nuxeo-development-framework 6.2.5 → 6.2.7

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/dialog'), require('@angular/router'), require('@ngx-translate/core'), require('rxjs/operators'), require('rxjs'), require('@angular/animations'), require('ngx-toastr'), require('crypto-js'), require('@angular/cdk/bidi'), require('@angular/common/http'), require('keycloak-angular'), require('ngx-cookie-service'), require('@angular/cdk/coercion'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/tooltip'), require('@angular/platform-browser'), require('moment'), require('moment-es6'), require('moment-hijri'), require('lodash-es'), require('lodash'), require('lodash/omit'), require('lodash/assign'), require('lodash/cloneDeep'), require('ngx-infinite-scroll'), require('@angular/material/list'), require('@angular/material/menu'), require('angular-ng-autocomplete'), require('@angular/material/core'), require('@angular/cdk/clipboard'), require('ts-cacheable'), require('@ng-select/ng-select'), require('@angular/material/form-field'), require('@angular/material/chips'), require('@angular/material/expansion'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/datepicker'), require('@angular/material/input'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@busacca/ng-pick-datetime'), require('@mat-datetimepicker/core'), require('angular-formio'), require('ngx-treeview'), require('@ng-bootstrap/ng-bootstrap'), require('formiojs'), require('lodash/find'), require('lodash/isEqual'), require('@swimlane/ngx-datatable'), require('@angular/material/button-toggle'), require('@angular/cdk/collections'), require('@angular/cdk/drag-drop'), require('@angular/material/autocomplete'), require('ngx-mask'), require('moment/moment'), require('@angular/cdk/layout'), require('dwt'), require('@angular/material/progress-bar'), require('chart.js/auto'), require('chartjs-adapter-moment'), require('devextreme-angular'), require('file-saver'), require('devextreme-angular/ui/nested'), require('@pdftron/webviewer'), require('@angular/material/tabs'), require('@angular/material/divider'), require('@angular/common/locales/ar'), require('@angular/common/locales/en'), require('@rxweb/reactive-form-validators'), require('rete-angular-plugin'), require('rete'), require('rete-area-plugin'), require('rete-auto-arrange-plugin'), require('rete-connection-plugin'), require('rete-connection-reroute-plugin'), require('rete-readonly-plugin'), require('rete-minimap-plugin'), require('d3-shape'), require('rete-connection-path-plugin'), require('rete-render-utils'), require('@angular/material/badge'), require('@angular/material/toolbar'), require('ngx-markdown'), require('@kurkle/color'), require('@angular/cdk/accordion'), require('lodash/flatMap'), require('@angular/material/bottom-sheet')) :
   typeof define === 'function' && define.amd ? define('nuxeo-development-framework', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/dialog', '@angular/router', '@ngx-translate/core', 'rxjs/operators', 'rxjs', '@angular/animations', 'ngx-toastr', 'crypto-js', '@angular/cdk/bidi', '@angular/common/http', 'keycloak-angular', 'ngx-cookie-service', '@angular/cdk/coercion', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/tooltip', '@angular/platform-browser', 'moment', 'moment-es6', 'moment-hijri', 'lodash-es', 'lodash', 'lodash/omit', 'lodash/assign', 'lodash/cloneDeep', 'ngx-infinite-scroll', '@angular/material/list', '@angular/material/menu', 'angular-ng-autocomplete', '@angular/material/core', '@angular/cdk/clipboard', 'ts-cacheable', '@ng-select/ng-select', '@angular/material/form-field', '@angular/material/chips', '@angular/material/expansion', '@angular/material/button', '@angular/material/checkbox', '@angular/material/datepicker', '@angular/material/input', '@angular/material/radio', '@angular/material/slide-toggle', '@busacca/ng-pick-datetime', '@mat-datetimepicker/core', 'angular-formio', 'ngx-treeview', '@ng-bootstrap/ng-bootstrap', 'formiojs', 'lodash/find', 'lodash/isEqual', '@swimlane/ngx-datatable', '@angular/material/button-toggle', '@angular/cdk/collections', '@angular/cdk/drag-drop', '@angular/material/autocomplete', 'ngx-mask', 'moment/moment', '@angular/cdk/layout', 'dwt', '@angular/material/progress-bar', 'chart.js/auto', 'chartjs-adapter-moment', 'devextreme-angular', 'file-saver', 'devextreme-angular/ui/nested', '@pdftron/webviewer', '@angular/material/tabs', '@angular/material/divider', '@angular/common/locales/ar', '@angular/common/locales/en', '@rxweb/reactive-form-validators', 'rete-angular-plugin', 'rete', 'rete-area-plugin', 'rete-auto-arrange-plugin', 'rete-connection-plugin', 'rete-connection-reroute-plugin', 'rete-readonly-plugin', 'rete-minimap-plugin', 'd3-shape', 'rete-connection-path-plugin', 'rete-render-utils', '@angular/material/badge', '@angular/material/toolbar', 'ngx-markdown', '@kurkle/color', '@angular/cdk/accordion', 'lodash/flatMap', '@angular/material/bottom-sheet'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["nuxeo-development-framework"] = {}, global.ng.core, global.ng.common, global.ng.forms, global.ng.material.dialog, global.ng.router, global.i1, global.rxjs.operators, global.rxjs, global.ng.animations, global.i1$1, global.CryptoJS, global.ng.cdk.bidi, global.ng.common.http, global.i2$1, global.i3, global.ng.cdk.coercion, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.tooltip, global.ng.platformBrowser, global.moment$6, global.moment$7, global.moment_, global.lodashEs, global._, global._omit, global._assign, global._cloneDeep, global.i7$1, global.ng.material.list, global.ng.material.menu, global.i6$1, global.ng.material.core, global.ng.cdk.clipboard, global.tsCacheable, global.i5, global.ng.material.formField, global.ng.material.chips, global.ng.material.expansion, global.ng.material.button, global.ng.material.checkbox, global.ng.material.datepicker, global.ng.material.input, global.ng.material.radio, global.ng.material.slideToggle, global.i6$3, global.core, global.i3$2, global.i1$9, global.i1$8, global.formiojs, global._find, global._isEqual, global.i4$2, global.ng.material.buttonToggle, global.ng.cdk.collections, global.ng.cdk.dragDrop, global.ng.material.autocomplete, global.i5$4, global.moment$8, global.ng.cdk.layout, global.Dynamsoft, global.ng.material.progressBar, global.Chart, null, global.i4$4, global.FileSaver, global.i5$6, global.WebViewer, global.ng.material.tabs, global.ng.material.divider, global.ng.common.locales.ar, global.ng.common.locales.en, global.reactiveFormValidators, global.i2$7, global.rete, global.reteAreaPlugin, global.reteAutoArrangePlugin, global.reteConnectionPlugin, global.reteConnectionReroutePlugin, global.reteReadonlyPlugin, global.reteMinimapPlugin, global.d3Shape, global.reteConnectionPathPlugin, global.reteRenderUtils, global.ng.material.badge, global.ng.material.toolbar, global.i2$8, global.colorLib, global.ng.cdk.accordion, global._flatMap, global.ng.material.bottomSheet));
-})(this, (function (exports, i0, i4, i2, i1$4, i1$3, i1, operators, rxjs, animations, i1$1, CryptoJS, i4$1, i1$2, i2$1, i3, coercion, i2$2, i6, i7, i1$5, moment$6, moment$7, moment_, lodashEs, _, _omit, _assign, _cloneDeep, i7$1, i2$3, i3$1, i6$1, i2$4, i1$6, tsCacheable, i5, i1$7, i7$2, i6$2, i1$b, i5$1, i2$6, i5$2, i2$5, i1$a, i6$3, core, i3$2, i1$9, i1$8, formiojs, _find, _isEqual, i4$2, i1$c, collections, i7$3, i5$3, i5$4, moment$8, i5$5, Dynamsoft, i4$3, Chart, chartjsAdapterMoment, i4$4, FileSaver, i5$6, WebViewer, i1$d, i9, localeAr, localeEn, reactiveFormValidators, i2$7, rete, reteAreaPlugin, reteAutoArrangePlugin, reteConnectionPlugin, reteConnectionReroutePlugin, reteReadonlyPlugin, reteMinimapPlugin, d3Shape, reteConnectionPathPlugin, reteRenderUtils, i7$4, toolbar, i2$8, colorLib, i6$4, _flatMap, i1$e) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["nuxeo-development-framework"] = {}, global.ng.core, global.ng.common, global.ng.forms, global.ng.material.dialog, global.ng.router, global.i1, global.rxjs.operators, global.rxjs, global.ng.animations, global.i1$1, global.CryptoJS, global.ng.cdk.bidi, global.ng.common.http, global.i2$1, global.i3, global.ng.cdk.coercion, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.tooltip, global.ng.platformBrowser, global.moment$6, global.moment$7, global.moment_, global.lodashEs, global._, global._omit, global._assign, global._cloneDeep, global.i7$1, global.ng.material.list, global.ng.material.menu, global.i6$1, global.ng.material.core, global.ng.cdk.clipboard, global.tsCacheable, global.i5, global.ng.material.formField, global.ng.material.chips, global.ng.material.expansion, global.ng.material.button, global.ng.material.checkbox, global.ng.material.datepicker, global.ng.material.input, global.ng.material.radio, global.ng.material.slideToggle, global.i6$3, global.core, global.i3$2, global.i1$9, global.i1$8, global.formiojs, global._find, global._isEqual, global.i4$2, global.ng.material.buttonToggle, global.ng.cdk.collections, global.ng.cdk.dragDrop, global.ng.material.autocomplete, global.i5$4, global.moment$8, global.ng.cdk.layout, global.Dynamsoft, global.ng.material.progressBar, global.Chart, null, global.i4$4, global.FileSaver, global.i5$5, global.WebViewer, global.ng.material.tabs, global.ng.material.divider, global.ng.common.locales.ar, global.ng.common.locales.en, global.reactiveFormValidators, global.i2$7, global.rete, global.reteAreaPlugin, global.reteAutoArrangePlugin, global.reteConnectionPlugin, global.reteConnectionReroutePlugin, global.reteReadonlyPlugin, global.reteMinimapPlugin, global.d3Shape, global.reteConnectionPathPlugin, global.reteRenderUtils, global.ng.material.badge, global.ng.material.toolbar, global.i2$8, global.colorLib, global.ng.cdk.accordion, global._flatMap, global.ng.material.bottomSheet));
+})(this, (function (exports, i0, i4, i2, i1$4, i1$3, i1, operators, rxjs, animations, i1$1, CryptoJS, i4$1, i1$2, i2$1, i3, coercion, i2$2, i6, i7, i1$5, moment$6, moment$7, moment_, lodashEs, _, _omit, _assign, _cloneDeep, i7$1, i2$3, i3$1, i6$1, i2$4, i1$6, tsCacheable, i5, i1$7, i7$2, i6$2, i1$b, i5$1, i2$6, i5$2, i2$5, i1$a, i6$3, core, i3$2, i1$9, i1$8, formiojs, _find, _isEqual, i4$2, i1$c, collections, i7$3, i5$3, i5$4, moment$8, i9, Dynamsoft, i4$3, Chart, chartjsAdapterMoment, i4$4, FileSaver, i5$5, WebViewer, i1$d, i9$1, localeAr, localeEn, reactiveFormValidators, i2$7, rete, reteAreaPlugin, reteAutoArrangePlugin, reteConnectionPlugin, reteConnectionReroutePlugin, reteReadonlyPlugin, reteMinimapPlugin, d3Shape, reteConnectionPathPlugin, reteRenderUtils, i7$4, toolbar, i2$8, colorLib, i6$4, _flatMap, i1$e) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -78,16 +78,16 @@
   var i5__namespace$3 = /*#__PURE__*/_interopNamespace(i5$3);
   var i5__namespace$4 = /*#__PURE__*/_interopNamespace(i5$4);
   var moment__namespace$1 = /*#__PURE__*/_interopNamespace(moment$8);
-  var i5__namespace$5 = /*#__PURE__*/_interopNamespace(i5$5);
+  var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
   var Dynamsoft__default = /*#__PURE__*/_interopDefaultLegacy(Dynamsoft);
   var i4__namespace$3 = /*#__PURE__*/_interopNamespace(i4$3);
   var Chart__default = /*#__PURE__*/_interopDefaultLegacy(Chart);
   var i4__namespace$4 = /*#__PURE__*/_interopNamespace(i4$4);
   var FileSaver__namespace = /*#__PURE__*/_interopNamespace(FileSaver);
-  var i5__namespace$6 = /*#__PURE__*/_interopNamespace(i5$6);
+  var i5__namespace$5 = /*#__PURE__*/_interopNamespace(i5$5);
   var WebViewer__default = /*#__PURE__*/_interopDefaultLegacy(WebViewer);
   var i1__namespace$d = /*#__PURE__*/_interopNamespace(i1$d);
-  var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+  var i9__namespace$1 = /*#__PURE__*/_interopNamespace(i9$1);
   var localeAr__default = /*#__PURE__*/_interopDefaultLegacy(localeAr);
   var localeEn__default = /*#__PURE__*/_interopDefaultLegacy(localeEn);
   var i2__namespace$7 = /*#__PURE__*/_interopNamespace(i2$7);
@@ -147,7 +147,7 @@
                   }]
           }], ctorParameters: function () { return []; } });
 
-  /******************************************************************************
+  /*! *****************************************************************************
   Copyright (c) Microsoft Corporation.
 
   Permission to use, copy, modify, and/or distribute this software for any
@@ -161,7 +161,7 @@
   OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
   PERFORMANCE OF THIS SOFTWARE.
   ***************************************************************************** */
-  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+  /* global Reflect, Promise */
   var extendStatics = function (d, b) {
       extendStatics = Object.setPrototypeOf ||
           ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -214,64 +214,6 @@
   function __param(paramIndex, decorator) {
       return function (target, key) { decorator(target, key, paramIndex); };
   }
-  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-      function accept(f) { if (f !== void 0 && typeof f !== "function")
-          throw new TypeError("Function expected"); return f; }
-      var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-      var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-      var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-      var _, done = false;
-      for (var i = decorators.length - 1; i >= 0; i--) {
-          var context = {};
-          for (var p in contextIn)
-              context[p] = p === "access" ? {} : contextIn[p];
-          for (var p in contextIn.access)
-              context.access[p] = contextIn.access[p];
-          context.addInitializer = function (f) { if (done)
-              throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-          var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-          if (kind === "accessor") {
-              if (result === void 0)
-                  continue;
-              if (result === null || typeof result !== "object")
-                  throw new TypeError("Object expected");
-              if (_ = accept(result.get))
-                  descriptor.get = _;
-              if (_ = accept(result.set))
-                  descriptor.set = _;
-              if (_ = accept(result.init))
-                  initializers.unshift(_);
-          }
-          else if (_ = accept(result)) {
-              if (kind === "field")
-                  initializers.unshift(_);
-              else
-                  descriptor[key] = _;
-          }
-      }
-      if (target)
-          Object.defineProperty(target, contextIn.name, descriptor);
-      done = true;
-  }
-  ;
-  function __runInitializers(thisArg, initializers, value) {
-      var useValue = arguments.length > 2;
-      for (var i = 0; i < initializers.length; i++) {
-          value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-      }
-      return useValue ? value : void 0;
-  }
-  ;
-  function __propKey(x) {
-      return typeof x === "symbol" ? x : "".concat(x);
-  }
-  ;
-  function __setFunctionName(f, name, prefix) {
-      if (typeof name === "symbol")
-          name = name.description ? "[".concat(name.description, "]") : "";
-      return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-  }
-  ;
   function __metadata(metadataKey, metadataValue) {
       if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
           return Reflect.metadata(metadataKey, metadataValue);
@@ -297,13 +239,13 @@
   }
   function __generator(thisArg, body) {
       var _ = { label: 0, sent: function () { if (t[0] & 1)
-              throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-      return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+              throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+      return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
       function verb(n) { return function (v) { return step([n, v]); }; }
       function step(op) {
           if (f)
               throw new TypeError("Generator is already executing.");
-          while (g && (g = 0, op[0] && (_ = 0)), _)
+          while (_)
               try {
                   if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
                       return t;
@@ -367,11 +309,7 @@
   var __createBinding = Object.create ? (function (o, m, k, k2) {
       if (k2 === undefined)
           k2 = k;
-      var desc = Object.getOwnPropertyDescriptor(m, k);
-      if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-          desc = { enumerable: true, get: function () { return m[k]; } };
-      }
-      Object.defineProperty(o, k2, desc);
+      Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
   }) : (function (o, m, k, k2) {
       if (k2 === undefined)
           k2 = k;
@@ -453,13 +391,9 @@
       if (!Symbol.asyncIterator)
           throw new TypeError("Symbol.asyncIterator is not defined.");
       var g = generator.apply(thisArg, _arguments || []), i, q = [];
-      return i = Object.create((typeof AsyncIterator === "function" ? AsyncIterator : Object).prototype), verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
-      function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
-      function verb(n, f) { if (g[n]) {
-          i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); };
-          if (f)
-              i[n] = f(i[n]);
-      } }
+      return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+      function verb(n) { if (g[n])
+          i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
       function resume(n, v) { try {
           step(g[n](v));
       }
@@ -475,7 +409,7 @@
   function __asyncDelegator(o) {
       var i, p;
       return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-      function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
+      function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
   }
   function __asyncValues(o) {
       if (!Symbol.asyncIterator)
@@ -529,108 +463,7 @@
       if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
           throw new TypeError("Cannot write private member to an object whose class did not declare it");
       return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-  }
-  function __classPrivateFieldIn(state, receiver) {
-      if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
-          throw new TypeError("Cannot use 'in' operator on non-object");
-      return typeof state === "function" ? receiver === state : state.has(receiver);
-  }
-  function __addDisposableResource(env, value, async) {
-      if (value !== null && value !== void 0) {
-          if (typeof value !== "object" && typeof value !== "function")
-              throw new TypeError("Object expected.");
-          var dispose, inner;
-          if (async) {
-              if (!Symbol.asyncDispose)
-                  throw new TypeError("Symbol.asyncDispose is not defined.");
-              dispose = value[Symbol.asyncDispose];
-          }
-          if (dispose === void 0) {
-              if (!Symbol.dispose)
-                  throw new TypeError("Symbol.dispose is not defined.");
-              dispose = value[Symbol.dispose];
-              if (async)
-                  inner = dispose;
-          }
-          if (typeof dispose !== "function")
-              throw new TypeError("Object not disposable.");
-          if (inner)
-              dispose = function () { try {
-                  inner.call(this);
-              }
-              catch (e) {
-                  return Promise.reject(e);
-              } };
-          env.stack.push({ value: value, dispose: dispose, async: async });
-      }
-      else if (async) {
-          env.stack.push({ async: true });
-      }
-      return value;
-  }
-  var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-      var e = new Error(message);
-      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-  };
-  function __disposeResources(env) {
-      function fail(e) {
-          env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
-          env.hasError = true;
-      }
-      var r, s = 0;
-      function next() {
-          while (r = env.stack.pop()) {
-              try {
-                  if (!r.async && s === 1)
-                      return s = 0, env.stack.push(r), Promise.resolve().then(next);
-                  if (r.dispose) {
-                      var result = r.dispose.call(r.value);
-                      if (r.async)
-                          return s |= 2, Promise.resolve(result).then(next, function (e) { fail(e); return next(); });
-                  }
-                  else
-                      s |= 1;
-              }
-              catch (e) {
-                  fail(e);
-              }
-          }
-          if (s === 1)
-              return env.hasError ? Promise.reject(env.error) : Promise.resolve();
-          if (env.hasError)
-              throw env.error;
-      }
-      return next();
-  }
-  var tslib_es6 = {
-      __extends: __extends,
-      __assign: __assign,
-      __rest: __rest,
-      __decorate: __decorate,
-      __param: __param,
-      __metadata: __metadata,
-      __awaiter: __awaiter,
-      __generator: __generator,
-      __createBinding: __createBinding,
-      __exportStar: __exportStar,
-      __values: __values,
-      __read: __read,
-      __spread: __spread,
-      __spreadArrays: __spreadArrays,
-      __spreadArray: __spreadArray,
-      __await: __await,
-      __asyncGenerator: __asyncGenerator,
-      __asyncDelegator: __asyncDelegator,
-      __asyncValues: __asyncValues,
-      __makeTemplateObject: __makeTemplateObject,
-      __importStar: __importStar,
-      __importDefault: __importDefault,
-      __classPrivateFieldGet: __classPrivateFieldGet,
-      __classPrivateFieldSet: __classPrivateFieldSet,
-      __classPrivateFieldIn: __classPrivateFieldIn,
-      __addDisposableResource: __addDisposableResource,
-      __disposeResources: __disposeResources,
-  };
+  }
 
   // export class EnvManager {
   //   static environment: Environment = null;
@@ -1001,7 +834,7 @@
       return CustomToastrComponent;
   }(i1$1.Toast));
   CustomToastrComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomToastrComponent, deps: [{ token: 'environment' }, { token: i1__namespace$1.ToastrService }, { token: i1__namespace$1.ToastPackage }, { token: i1__namespace.TranslateService }, { token: UserPreferencesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CustomToastrComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomToastrComponent, selector: "cts-custom-toastr", usesInheritance: true, ngImport: i0__namespace, template: "<div\r\n\tclass=\"toast-container {{ type }}-container\"\r\n\t[style.display]=\"state.value === 'inactive' ? 'none' : ''\"\r\n\t[dir]=\"lang\"\r\n\t[@simpleFadeAnimation]=\"'in'\"\r\n>\r\n\t<div class=\"icon-container rounded-s-md {{ type }}\">\r\n\t\t<ng-container [ngSwitch]=\"type\">\r\n\t\t\t<span class=\"bi bi-check2 toast-icon\" *ngSwitchCase=\"'success'\"></span>\r\n\t\t\t<span class=\"bi bi-x toast-icon\" *ngSwitchCase=\"'error'\"></span>\r\n\t\t\t<span class=\"bi bi-info-circle toast-icon\" *ngSwitchCase=\"'info'\"></span>\r\n\t\t\t<span class=\"bi bi-exclamation-triangle toast-icon\" *ngSwitchCase=\"'warning'\"></span>\r\n\t\t\t<span class=\"bi bi-bell-fill notification-icon\" *ngSwitchCase=\"'notification'\"></span>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"toast-content-container\">\r\n\t\t<div *ngIf=\"title\" [attr.aria-label]=\"title\" class=\"toast-content\">\r\n\t\t\t{{ title | translate }}\r\n\t\t</div>\r\n\t\t<div *ngIf=\"message\" role=\"alert\" aria-live=\"polite\" [attr.aria-label]=\"message\" class=\"message msg-{{ type }}\">\r\n\t\t\t{{ message | translate: { value: value } }}\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"customContent\" class=\"message msg-{{ type }}\">{{ customContent }}</div>\r\n\t</div>\r\n\t<button type=\"button\" aria-label=\"Close\" class=\"toast-close-button remove\" (click)=\"clear()\">\r\n\t\t<span aria-hidden=\"true\" style=\"font-size: 26px; color: gray\">\u00D7</span>\r\n\t</button>\r\n</div>\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}:host{pointer-events:auto}.toast-container{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-left:16px;margin-right:16px;position:relative;width:400px;height:80px;box-shadow:0 0 4px #0000003b;background-color:#fff;border-radius:5px}.toast-container .error{background-color:#ff375e}.toast-container .success{background-color:#0dbab5}.toast-container .warning{background-color:#eca15f}.toast-container .info{background-color:#1a96c6}.toast-container .notification{background-color:#1a96c6}.toast-container .toast-icon{font-size:40px;color:#fff;-webkit-text-stroke:3px white}.toast-container .notification-icon{font-size:30px;color:#fff}.toast-container .msg-error{color:#ff375e}.toast-container .msg-success{color:#0dbab5}.toast-container .msg-warning{color:#eca15f}.toast-container .msg-info{color:#1a96c6}.toast-container .msg-notification{color:#1a96c6}.toast-container .icon-container{grid-column:span 1/span 1;display:flex;align-items:center;justify-content:center}.toast-container .toast-content-container{grid-column:span 3/span 3;display:flex;flex-direction:column;padding-top:4px;padding-bottom:4px;padding-inline-start:8px;overflow:hidden}.toast-container .toast-content-container .toast-content{font-size:18px;color:#8f98aa}.toast-container .toast-content-container .message{font-size:14px;line-height:20px}.toast-container .remove{grid-column:span 1/span 1;cursor:pointer;display:flex;justify-content:flex-end;padding-inline-end:8px}.toast-container .remove mat-icon{color:#8f98aa;font-size:20px;line-height:28px}.rounded-s-md{border-start-start-radius:6px;border-end-start-radius:6px}\n"], directives: [{ type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe }, animations: [
+  CustomToastrComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomToastrComponent, selector: "cts-custom-toastr", usesInheritance: true, ngImport: i0__namespace, template: "<div\r\n\tclass=\"toast-container {{ type }}-container\"\r\n\t[style.display]=\"state.value === 'inactive' ? 'none' : ''\"\r\n\t[dir]=\"lang\"\r\n\t[@simpleFadeAnimation]=\"'in'\"\r\n>\r\n\t<div class=\"icon-container rounded-s-md {{ type }}\">\r\n\t\t<ng-container [ngSwitch]=\"type\">\r\n\t\t\t<span class=\"bi bi-check2 toast-icon\" *ngSwitchCase=\"'success'\"></span>\r\n\t\t\t<span class=\"bi bi-x toast-icon\" *ngSwitchCase=\"'error'\"></span>\r\n\t\t\t<span class=\"bi bi-info-circle toast-icon\" *ngSwitchCase=\"'info'\"></span>\r\n\t\t\t<span class=\"bi bi-exclamation-triangle toast-icon\" *ngSwitchCase=\"'warning'\"></span>\r\n\t\t\t<span class=\"bi bi-bell-fill notification-icon\" *ngSwitchCase=\"'notification'\"></span>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"toast-content-container\">\r\n\t\t<div *ngIf=\"title\" [attr.aria-label]=\"title\" class=\"toast-content\">\r\n\t\t\t{{ title | translate }}\r\n\t\t</div>\r\n\t\t<div *ngIf=\"message\" role=\"alert\" aria-live=\"polite\" [attr.aria-label]=\"message\" class=\"message msg-{{ type }}\">\r\n\t\t\t{{ message | translate: { value: value } }}\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"customContent\" class=\"message msg-{{ type }}\">{{ customContent }}</div>\r\n\t</div>\r\n\t<button type=\"button\" aria-label=\"Close\" class=\"toast-close-button remove\" (click)=\"clear()\">\r\n\t\t<span aria-hidden=\"true\" style=\"font-size: 26px; color: gray\">\u00D7</span>\r\n\t</button>\r\n</div>\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}:host{pointer-events:auto}.toast-container .error{background-color:#ff375e}.toast-container .success{background-color:#0dbab5}.toast-container .warning{background-color:#eca15f}.toast-container .info{background-color:#1a96c6}.toast-container .notification{background-color:#1a96c6}.toast-container .toast-icon{font-size:40px;color:#fff;-webkit-text-stroke:3px white}.toast-container .notification-icon{font-size:30px;color:#fff}.toast-container .msg-error{color:#ff375e}.toast-container .msg-success{color:#0dbab5}.toast-container .msg-warning{color:#eca15f}.toast-container .msg-info{color:#1a96c6}.toast-container .msg-notification{color:#1a96c6}.toast-container{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-left:16px;margin-right:16px;position:relative;width:400px;height:80px;box-shadow:0 0 4px #0000003b;background-color:#fff;border-radius:5px}.toast-container .icon-container{grid-column:span 1/span 1;display:flex;align-items:center;justify-content:center}.toast-container .toast-content-container{grid-column:span 3/span 3;display:flex;flex-direction:column;padding-top:4px;padding-bottom:4px;padding-inline-start:8px;overflow:hidden}.toast-container .toast-content-container .toast-content{font-size:18px;color:#8f98aa}.toast-container .toast-content-container .message{font-size:14px;line-height:20px}.toast-container .remove{grid-column:span 1/span 1;cursor:pointer;display:flex;justify-content:flex-end;padding-inline-end:8px}.toast-container .remove mat-icon{color:#8f98aa;font-size:20px;line-height:28px}.rounded-s-md{border-start-start-radius:6px;border-end-start-radius:6px}\n"], directives: [{ type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe }, animations: [
           // the fade-in/fade-out animation.
           animations.trigger('simpleFadeAnimation', [
               // the "in" style determines the "resting" state of the element when it is visible.
@@ -2502,7 +2335,7 @@
       return NdfNuxeoDialog;
   }(BaseComponent));
   NdfNuxeoDialog.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfNuxeoDialog, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NdfNuxeoDialog.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: { dialogTitle: "dialogTitle", subTitle: "subTitle", panelClass: "panelClass", bodyClass: "bodyClass", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div SetDirRtl class=\"ndf-dialog-wrapper flex flex-col h-full\" [class]=\"data?.dialogConfig?.panelClass ?? panelClass\">\r\n\t<div\r\n\t\tclass=\"dialog-header flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7\"\r\n\t>\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\">{{ data?.dialogConfig?.subTitle || subTitle }}</span>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\"> </mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div\r\n\t\t#dialogBody\r\n\t\tclass=\"dialog-body flex flex-col {{bodyClass}} overflow-y-auto relative z-99\"\r\n\t\t[ngClass]=\"{'overflow-hidden': loading}\"\r\n\t>\r\n\t\t<ng-container *ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate ; context: { dialog: this }\"></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div class=\"ndf-dialog-overlay z-999\" [ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"ndf-dialog-loader z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner [value]=\"90\" [strokeWidth]=\"4\" overlay=\"true\" [diameter]=\"40\" color=\"primary\"> </mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"block w-full h-px absolute inset-0 z-9999\" *ngIf=\"loaderMode === 'progressBar'\">\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-between p-6 pt-0 gap-x-4\">\r\n\t\t<span>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"footerTemplate; context: { dialog: this }\"></ng-container>\r\n\t\t</span>\r\n\t\t<span class=\"flex gap-x-4\">\r\n\t\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">{{\"BUTTONS.CANCEL\" | translate}}</button>\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t\t></ng-container>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper .dialog-body{height:100%;max-height:var(--dialog-body-max-height, calc(100vh - 208px))}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay,.ndf-dialog-wrapper .dialog-body .ndf-dialog-loader{display:flex;width:100%;height:100%;align-items:center;justify-content:center;position:absolute;left:0px;bottom:0px;right:0px}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay{background-color:#cbd5e166}:host{height:100%;display:block}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  NdfNuxeoDialog.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: { dialogTitle: "dialogTitle", subTitle: "subTitle", panelClass: "panelClass", bodyClass: "bodyClass", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div SetDirRtl class=\"ndf-dialog-wrapper flex flex-col h-full\" [class]=\"data?.dialogConfig?.panelClass ?? panelClass\">\r\n\t<div\r\n\t\tclass=\"dialog-header flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7\"\r\n\t>\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\">{{ data?.dialogConfig?.subTitle || subTitle }}</span>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\"> </mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div\r\n\t\t#dialogBody\r\n\t\tclass=\"dialog-body flex flex-col {{bodyClass}} overflow-y-auto relative z-99\"\r\n\t\t[ngClass]=\"{'overflow-hidden': loading}\"\r\n\t>\r\n\t\t<ng-container *ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate ; context: { dialog: this }\"></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div class=\"ndf-dialog-overlay z-999\" [ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"ndf-dialog-loader z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner [value]=\"90\" [strokeWidth]=\"4\" overlay=\"true\" [diameter]=\"40\" color=\"primary\"> </mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"block w-full h-px absolute inset-0 z-9999\" *ngIf=\"loaderMode === 'progressBar'\">\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-between p-6 pt-0 gap-x-4\">\r\n\t\t<span>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"footerTemplate; context: { dialog: this }\"></ng-container>\r\n\t\t</span>\r\n\t\t<span class=\"flex gap-x-4\">\r\n\t\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">{{\"BUTTONS.CANCEL\" | translate}}</button>\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t\t></ng-container>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper .dialog-body{height:100%;max-height:var(--dialog-body-max-height, calc(100vh - 208px))}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay,.ndf-dialog-wrapper .dialog-body .ndf-dialog-loader{display:flex;width:100%;height:100%;align-items:center;justify-content:center;position:absolute;left:0px;bottom:0px;right:0px}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay{background-color:#cbd5e166}:host{height:100%;display:block}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfNuxeoDialog, decorators: [{
               type: i0.Component,
               args: [{
@@ -4897,7 +4730,7 @@
       return ButtonComponent;
   }());
   ButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonComponent, selector: "cts-button", inputs: { disabled: "disabled", loading: "loading", size: "size", theme: "theme", spinnerTheming: "spinnerTheming" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0__namespace, template: "<button\r\ntype=\"button\"\r\nclass=\"btn\"\r\n  mat-button\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"emitClick()\"\r\n  [ngClass]=\"this.classes\"\r\n>\r\n  <ng-content *ngIf=\"!loading; else spinner\"></ng-content>\r\n  <ng-template #spinner>\r\n    <mat-spinner class=\"spinner\" [diameter]=\"25\" [color]=\"spinnerTheming\"></mat-spinner>\r\n  </ng-template>\r\n</button>\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}.btn.submitting,.btn.outline-dark,.btn.light-gray,.btn.gray,.btn.dark,.btn.danger,.btn.green,.btn.blue,.btn.primary,.my-base-class{color:#fff;width:100%;border:1px solid transparent;padding:6px 12px;overflow:hidden;min-width:max-content;border-radius:5px}.btn.submitting:hover,.btn.outline-dark:hover,.btn.light-gray:hover,.btn.gray:hover,.btn.dark:hover,.btn.danger:hover,.btn.green:hover,.btn.blue:hover,.btn.primary:hover,.my-base-class:hover{filter:brightness(92%)}.btn.primary{background-image:linear-gradient(to right,#0dbab5,#1a96c6)}.btn.rtl.primary{background-image:linear-gradient(to left,#0dbab5,#1a96c6)}.btn.blue{background-color:#3c3cf0}.btn.green{background-color:#00dca5}.btn.danger{background-color:#fd6670}.btn.dark{background-color:#465573}.btn.gray{background-color:#6a768e;border:none}.btn.light-gray{background-color:#d9dce2;color:#465573;border:none}.btn.outline-dark{background-color:#fff;border:1px solid #8f98aa;color:#465573}.btn.outline-dark:hover{background-color:#8f98aa;color:#fff}.btn.large{height:50px}.btn.regular{height:40px}.btn.small{height:30px}.btn.submitting{background:#d7d7d7!important;border:1px solid #b4bac6}.btn.spinner{margin:auto}.btn.disabled{opacity:.5}.btn:focus{background:#2cbddd}\n"], components: [{ type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+  ButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonComponent, selector: "cts-button", inputs: { disabled: "disabled", loading: "loading", size: "size", theme: "theme", spinnerTheming: "spinnerTheming" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0__namespace, template: "<button\r\ntype=\"button\"\r\nclass=\"btn\"\r\n  mat-button\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"emitClick()\"\r\n  [ngClass]=\"this.classes\"\r\n>\r\n  <ng-content *ngIf=\"!loading; else spinner\"></ng-content>\r\n  <ng-template #spinner>\r\n    <mat-spinner class=\"spinner\" [diameter]=\"25\" [color]=\"spinnerTheming\"></mat-spinner>\r\n  </ng-template>\r\n</button>\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}.btn.submitting,.btn.outline-dark,.btn.light-gray,.btn.gray,.btn.dark,.btn.danger,.btn.green,.btn.blue,.btn.primary,.my-base-class{color:#fff;width:100%;border:1px solid transparent;padding:6px 12px;overflow:hidden;min-width:max-content;border-radius:5px}.btn.submitting:hover,.btn.outline-dark:hover,.btn.light-gray:hover,.btn.gray:hover,.btn.dark:hover,.btn.danger:hover,.btn.green:hover,.btn.blue:hover,.btn.primary:hover,.my-base-class:hover{filter:brightness(92%)}.btn.primary{background-image:linear-gradient(to right,#0dbab5,#1a96c6)}.btn.rtl.primary{background-image:linear-gradient(to left,#0dbab5,#1a96c6)}.btn.blue{background-color:#3c3cf0}.btn.green{background-color:#00dca5}.btn.danger{background-color:#fd6670}.btn.dark{background-color:#465573}.btn.gray{background-color:#6a768e;border:none}.btn.light-gray{background-color:#d9dce2;color:#465573;border:none}.btn.outline-dark{background-color:#fff;border:1px solid #8f98aa;color:#465573}.btn.outline-dark:hover{background-color:#8f98aa;color:#fff}.btn.large{height:50px}.btn.regular{height:40px}.btn.small{height:30px}.btn.submitting{background:rgb(215,215,215)!important;border:1px solid #b4bac6}.btn.spinner{margin:auto}.btn.disabled{opacity:.5}.btn:focus{background:#2cbddd}\n"], components: [{ type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ButtonComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5079,7 +4912,7 @@
       return ItemListComponent;
   }());
   ItemListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ItemListComponent, deps: [{ token: ViewerFilesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ItemListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemListComponent, selector: "cts-item-list", inputs: { item: "item", iconname: "iconname", title: "title", actions: "actions", isselected: "isselected", moreclasses: "moreclasses" }, outputs: { itemClicked: "itemClicked", actionclicked: "actionclicked" }, ngImport: i0__namespace, template: "\r\n<mat-list-item class=\"list-item\" (click)=\"itemlistClick()\" [ngClass]=\"{\r\n    'list-item-selected': selectedId == item.uid\r\n  }\">\r\n  <div class=\"direction\"><i class=\"incoming bi bi-box-arrow-down\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'incoming'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"outcoming bi bi-box-arrow-up\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'outgoing'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"internal bi bi-box-arrow-right\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'interenal'\"></i></div>\r\n\r\n  <mat-icon *ngIf=\"iconname\" mat-list-icon class=\"icon {{moreclasses}}\">{{\r\n    iconname\r\n    }}</mat-icon>\r\n\r\n    <span class=\"icon-Revew new-icon\"></span>\r\n    <ng-content select=\".icon\"></ng-content>\r\n\r\n  <div class=\"content\">\r\n    <div *ngIf=\"title\" mat-line [matTooltip]=\"title\">{{ title }}</div>\r\n  <div mat-line>\r\n    <ng-content select=\".description\"> </ng-content>\r\n  </div>\r\n</div>\r\n  <button class=\"menu-item-action\" *ngIf=\"actions?.length\" (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\" class=\"actionMenuWrapper\">\r\n    <div SetRtl class=\"flex flex-col justify-between\">\r\n      <ng-container *ngFor=\"let menu_item of actions\">\r\n        <button mat-menu-item class=\"{{menu_item.action_Style}}\" (click)=\"menuactionClicked(menu_item.name, item)\">\r\n          <i class=\"{{menu_item.icon}}\" *ngIf=\"menu_item.icon\"></i>\r\n          <span class=\"{{menu_item.title_Style}}\">{{ menu_item.title | translate }}</span>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </mat-menu>\r\n</mat-list-item>\r\n", styles: [".list-item{font-size:16px;cursor:pointer;height:55px!important}.list-item .new-icon{display:none}.list-item .mat-list-item-content{padding:0!important}.list-item .mat-list-item-content .icon{padding:0 4px;font-size:35px;width:auto;height:auto}.list-item .mat-list-item-content .icon.link-relation{font-size:25px}.list-item .mat-list-item-content .icon.attachment-icon{font-size:25px}.list-item .mat-list-item-content .content{width:100%;margin:0;overflow:hidden;text-overflow:ellipsis}.list-item .mat-list-item-content .content .mat-line{font-size:16px;color:#212529}.list-item .mat-list-item-content .content .mat-line .description{font-size:12px}.list-item a{color:#000}.list-item .menu-item-action{font-size:20px;border:0;background:transparent}.list-item .direction{font-size:20px}.list-item .direction .incoming{color:#00dca5}.list-item .direction .outcoming{color:#fbb62c}.list-item:hover{background-color:#f5f6f8}.list-item-selected{background-color:#f5f6f8}\n"], components: [{ type: i2__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i2__namespace$3.MatLine, selector: "[mat-line], [matLine]" }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  ItemListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemListComponent, selector: "cts-item-list", inputs: { item: "item", iconname: "iconname", title: "title", actions: "actions", isselected: "isselected", moreclasses: "moreclasses" }, outputs: { itemClicked: "itemClicked", actionclicked: "actionclicked" }, ngImport: i0__namespace, template: "\r\n<mat-list-item class=\"list-item\" (click)=\"itemlistClick()\" [ngClass]=\"{\r\n    'list-item-selected': selectedId == item.uid\r\n  }\">\r\n  <div class=\"direction\"><i class=\"incoming bi bi-box-arrow-down\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'incoming'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"outcoming bi bi-box-arrow-up\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'outgoing'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"internal bi bi-box-arrow-right\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'interenal'\"></i></div>\r\n\r\n  <mat-icon *ngIf=\"iconname\" mat-list-icon class=\"icon {{moreclasses}}\">{{\r\n    iconname\r\n    }}</mat-icon>\r\n\r\n    <span class=\"icon-Revew new-icon\"></span>\r\n    <ng-content select=\".icon\"></ng-content>\r\n\r\n  <div class=\"content\">\r\n    <div *ngIf=\"title\" mat-line [matTooltip]=\"title\">{{ title }}</div>\r\n  <div mat-line>\r\n    <ng-content select=\".description\"> </ng-content>\r\n  </div>\r\n</div>\r\n  <button class=\"menu-item-action\" *ngIf=\"actions?.length\" (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\" class=\"actionMenuWrapper\">\r\n    <div SetRtl class=\"flex flex-col justify-between\">\r\n      <ng-container *ngFor=\"let menu_item of actions\">\r\n        <button mat-menu-item class=\"{{menu_item.action_Style}}\" (click)=\"menuactionClicked(menu_item.name, item)\">\r\n          <i class=\"{{menu_item.icon}}\" *ngIf=\"menu_item.icon\"></i>\r\n          <span class=\"{{menu_item.title_Style}}\">{{ menu_item.title | translate }}</span>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </mat-menu>\r\n</mat-list-item>\r\n", styles: [".list-item{font-size:16px;cursor:pointer;height:55px!important}.list-item .new-icon{display:none}.list-item .mat-list-item-content{padding:0!important}.list-item .mat-list-item-content .icon{padding:0 4px;font-size:35px;width:auto;height:auto}.list-item .mat-list-item-content .icon.link-relation{font-size:25px}.list-item .mat-list-item-content .icon.attachment-icon{font-size:25px}.list-item .mat-list-item-content .content{width:100%;margin:0;overflow:hidden;text-overflow:ellipsis}.list-item .mat-list-item-content .content .mat-line{font-size:16px;color:#212529}.list-item .mat-list-item-content .content .mat-line .description{font-size:12px}.list-item a{color:#000}.list-item .menu-item-action{font-size:20px;border:0;background:transparent}.list-item .direction{font-size:20px}.list-item .direction .incoming{color:#00dca5}.list-item .direction .outcoming{color:#fbb62c}.list-item:hover{background-color:#f5f6f8}.list-item-selected{background-color:#f5f6f8}\n"], components: [{ type: i2__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i2__namespace$3.MatLine, selector: "[mat-line], [matLine]" }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { 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: ItemListComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5692,7 +5525,7 @@
       return CommentItemComponent;
   }());
   CommentItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CommentItemComponent, deps: [{ token: TranslationService }, { token: i1__namespace$4.MatDialog }, { token: NuxeoDialogService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CommentItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentItemComponent, selector: "app-comment-item", inputs: { comment: "comment", loaderType: "loaderType", showCommentActions: "showCommentActions" }, outputs: { refreshCommentList: "refreshCommentList" }, ngImport: i0__namespace, template: "<div class=\"comment-item\" SetRtl>\r\n\r\n  <div class=\"comment-controls\" *ngIf=\"showCommentActions\">\r\n    <span class=\"bi bi-pencil contril-icon\" \r\n    *permission=\"{name: 'updateComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.EDIT' | translate }}\"\r\n     (click)=\"executeFunction('edit')\"\r\n     ></span>\r\n\r\n    <span class=\"bi bi-trash contril-icon\" \r\n    *permission=\"{name: 'deleteComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.Delete' | translate }}\"\r\n    (click)=\"executeFunction('delete')\"\r\n    ></span>\r\n  </div>\r\n\r\n  <app-user-card [user]=\"comment.Commenter\" [diameter]=\"12\">\r\n    <div class=\"lineOne\">\r\n      {{lang === 'en' ? (comment.Commenter.fullName) : (comment.Commenter.fullNameAr ? comment.Commenter.fullNameAr : comment.Commenter.fullName)}}\r\n    </div>\r\n    <div class=\"lineOnePart2\">\r\n      <span class=\"date\" matTooltip='{{ comment?.creationDate | localizedDate:\r\n        \"fullDate\"}}' matTooltipClass=\"tdf-tooltip\" TooltipPosition='below'>\r\n        <span class=\"date-sperator px-1\">|</span>{{ comment?.creationDate | timeAgo : lang }}</span>\r\n    </div>\r\n    <div class=\"lineTwo\">\r\n      <app-read-more class=\"comment-text\" [text]=\"comment?.text\" [wordCount]=\"loaderType === 'scroll' ? 20 : 60\">\r\n      </app-read-more>\r\n    </div>\r\n  </app-user-card>\r\n</div>\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}.comment-item{border:1px solid #d9dce2;padding:8px 4px;display:flex;position:relative}.comment-item:hover{background:#f5f6f8}.comment-item .comment-controls{position:absolute;right:5px}.comment-item .comment-controls .contril-icon{padding:0 5px;cursor:pointer}.date{color:#3c3cf0}.comment-text{color:#8f98aa}.comment-avatar{align-items:top;padding:0 4px;display:flex}.comment-avatar .avatar{width:40px;height:40px;display:block}.rtl .comment-controls{left:5px;right:auto}\n"], components: [{ type: UserCardComponent, selector: "app-user-card", inputs: ["user", "diameter"] }, { type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "charCount", "wordCount", "lineBreaks"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe, "timeAgo": TimeAgoPipe } });
+  CommentItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentItemComponent, selector: "app-comment-item", inputs: { comment: "comment", loaderType: "loaderType", showCommentActions: "showCommentActions" }, outputs: { refreshCommentList: "refreshCommentList" }, ngImport: i0__namespace, template: "<div class=\"comment-item\" SetRtl>\r\n\r\n  <div class=\"comment-controls\" *ngIf=\"showCommentActions\">\r\n    <span class=\"bi bi-pencil contril-icon\" \r\n    *permission=\"{name: 'updateComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.EDIT' | translate }}\"\r\n     (click)=\"executeFunction('edit')\"\r\n     ></span>\r\n\r\n    <span class=\"bi bi-trash contril-icon\" \r\n    *permission=\"{name: 'deleteComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.Delete' | translate }}\"\r\n    (click)=\"executeFunction('delete')\"\r\n    ></span>\r\n  </div>\r\n\r\n  <app-user-card [user]=\"comment.Commenter\" [diameter]=\"12\">\r\n    <div class=\"lineOne\">\r\n      {{lang === 'en' ? (comment.Commenter.fullName) : (comment.Commenter.fullNameAr ? comment.Commenter.fullNameAr : comment.Commenter.fullName)}}\r\n    </div>\r\n    <div class=\"lineOnePart2\">\r\n      <span class=\"date\" matTooltip='{{ comment?.creationDate | localizedDate:\r\n        \"fullDate\"}}' matTooltipClass=\"tdf-tooltip\" TooltipPosition='below'>\r\n        <span class=\"date-sperator px-1\">|</span>{{ comment?.creationDate | timeAgo : lang }}</span>\r\n    </div>\r\n    <div class=\"lineTwo\">\r\n      <app-read-more class=\"comment-text\" [text]=\"comment?.text\" [wordCount]=\"loaderType === 'scroll' ? 20 : 60\">\r\n      </app-read-more>\r\n    </div>\r\n  </app-user-card>\r\n</div>\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}.comment-item{border:1px solid #d9dce2;padding:8px 4px;display:flex;position:relative}.comment-item:hover{background:#f5f6f8}.comment-item .comment-controls{position:absolute;right:5px}.comment-item .comment-controls .contril-icon{padding:0 5px;cursor:pointer}.date{color:#3c3cf0}.comment-text{color:#8f98aa}.comment-avatar{align-items:top;padding:0 4px;display:flex}.comment-avatar .avatar{width:40px;height:40px;display:block}.rtl .comment-controls{left:5px;right:auto}\n"], components: [{ type: UserCardComponent, selector: "app-user-card", inputs: ["user", "diameter"] }, { type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "charCount", "wordCount", "lineBreaks"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe, "timeAgo": TimeAgoPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CommentItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -7402,7 +7235,7 @@
       return CorrespondenceRelationListComponent;
   }());
   CorrespondenceRelationListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CorrespondenceRelationListComponent, deps: [{ token: CorrespondenceRelationService }, { token: i1__namespace$4.MatDialog }, { token: ViewerFilesService }, { token: DocumentsService }, { token: AdapterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CorrespondenceRelationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationListComponent, selector: "cts-correspondence-relation-list", inputs: { correspondence_id: "correspondence_id", reload: "reload", removeRelationTitleFromExpansionList: "removeRelationTitleFromExpansionList" }, ngImport: i0__namespace, template: "<div class=\"relations-list\" *ngIf=\"relateddoc.length > 0\">\r\n  <ng-container>\r\n    <div *ngFor=\"let group of relateddoc; first as isFirst\">\r\n      <mat-accordion class=\"example-headers-align\" multi>\r\n        <mat-expansion-panel [expanded]=\"isFirst\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title *ngIf=\"!removeRelationTitleFromExpansionList || (removeRelationTitleFromExpansionList && group[0] !=='relatedCorrespondence')\">\r\n              {{\r\n                \"vocabulary.VOC_CorrespondenceRelationsNames.\" + group[0]\r\n                  | translate\r\n              }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <ng-template matExpansionPanelContent>\r\n            <mat-list>\r\n              <div class=\"mat-list-items\" *ngFor=\"let item of group[1]\">\r\n                <cts-item-list\r\n                  [item]=\"item\"\r\n                  [title]=\"item.title\"\r\n                  [iconname]=\"'link'\"\r\n                  [actions]=\"menu_actions\"\r\n                  (actionclicked)=\"handleMenuItemClicked($event)\"\r\n                  (itemClicked)=\"showCorrespondenceInViewer(item)\"\r\n                  [moreclasses]=\"'link-relation'\"\r\n                ></cts-item-list>\r\n              </div>\r\n            </mat-list>\r\n          </ng-template>\r\n        </mat-expansion-panel>\r\n      </mat-accordion>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n<div class=\"nocontent\" *ngIf=\"relateddoc.length === 0\">\r\n  <p>{{ \"correspondence-relation.nocontent\" | translate }}</p>\r\n</div>\r\n", styles: [".relations-list{border:1px solid #eee}.relations-list .mat-expansion-panel{box-shadow:none!important}.relations-list .mat-expansion-panel-header{border-bottom:1px solid #d9dce2;background-color:#f5f6f8;height:50px!important}.relations-list .mat-expansion-panel-header:hover{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header:focus{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header-title{font-weight:500}.relations-list .mat-accordion .mat-expansion-panel{border-radius:0!important}.relations-list .mat-expansion-panel-body{padding:0!important}.nocontent{color:gray;padding:10px;font-size:14px;border:1px solid #d9dce2}.nocontent p{margin:0;text-align:center}\n"], components: [{ type: i6__namespace$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6__namespace$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight"] }, { type: i2__namespace$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: ItemListComponent, selector: "cts-item-list", inputs: ["item", "iconname", "title", "actions", "isselected", "moreclasses"], outputs: ["itemClicked", "actionclicked"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i6__namespace$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6__namespace$2.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  CorrespondenceRelationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationListComponent, selector: "cts-correspondence-relation-list", inputs: { correspondence_id: "correspondence_id", reload: "reload", removeRelationTitleFromExpansionList: "removeRelationTitleFromExpansionList" }, ngImport: i0__namespace, template: "<div class=\"relations-list\" *ngIf=\"relateddoc.length > 0\">\r\n  <ng-container>\r\n    <div *ngFor=\"let group of relateddoc; first as isFirst\">\r\n      <mat-accordion class=\"example-headers-align\" multi>\r\n        <mat-expansion-panel [expanded]=\"isFirst\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title *ngIf=\"!removeRelationTitleFromExpansionList || (removeRelationTitleFromExpansionList && group[0] !=='relatedCorrespondence')\">\r\n              {{\r\n                \"vocabulary.VOC_CorrespondenceRelationsNames.\" + group[0]\r\n                  | translate\r\n              }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <ng-template matExpansionPanelContent>\r\n            <mat-list>\r\n              <div class=\"mat-list-items\" *ngFor=\"let item of group[1]\">\r\n                <cts-item-list\r\n                  [item]=\"item\"\r\n                  [title]=\"item.title\"\r\n                  [iconname]=\"'link'\"\r\n                  [actions]=\"menu_actions\"\r\n                  (actionclicked)=\"handleMenuItemClicked($event)\"\r\n                  (itemClicked)=\"showCorrespondenceInViewer(item)\"\r\n                  [moreclasses]=\"'link-relation'\"\r\n                ></cts-item-list>\r\n              </div>\r\n            </mat-list>\r\n          </ng-template>\r\n        </mat-expansion-panel>\r\n      </mat-accordion>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n<div class=\"nocontent\" *ngIf=\"relateddoc.length === 0\">\r\n  <p>{{ \"correspondence-relation.nocontent\" | translate }}</p>\r\n</div>\r\n", styles: [".relations-list{border:1px solid #eee}.relations-list .mat-expansion-panel{box-shadow:none!important}.relations-list .mat-expansion-panel-header{border-bottom:1px solid #d9dce2;background-color:#f5f6f8;height:50px!important}.relations-list .mat-expansion-panel-header:hover{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header:focus{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header-title{font-weight:500}.relations-list .mat-accordion .mat-expansion-panel{border-radius:0!important}.relations-list .mat-expansion-panel-body{padding:0!important}.nocontent{color:gray;padding:10px;font-size:14px;border:1px solid #d9dce2}.nocontent p{margin:0;text-align:center}\n"], components: [{ type: i6__namespace$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6__namespace$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i2__namespace$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: ItemListComponent, selector: "cts-item-list", inputs: ["item", "iconname", "title", "actions", "isselected", "moreclasses"], outputs: ["itemClicked", "actionclicked"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i6__namespace$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6__namespace$2.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], 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: CorrespondenceRelationListComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -7568,7 +7401,7 @@
       return CorrespondenceRelationComponent;
   }());
   CorrespondenceRelationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CorrespondenceRelationComponent, deps: [{ token: i1__namespace$4.MatDialog }, { token: CorrespondenceRelationService }, { token: CustomToastrService }, { token: ViewerFilesService }, { token: DocumentsService }, { token: UserPreferencesService }, { token: NuxeoService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CorrespondenceRelationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationComponent, selector: "cts-correspondence-relation", inputs: { corr_id: "corr_id", correspondance: "correspondance", canOpenDialogFromOutside: "canOpenDialogFromOutside", removeRelationTitleFromExpansionList: "removeRelationTitleFromExpansionList" }, outputs: { openDialogFromOutside: "openDialogFromOutside" }, ngImport: i0__namespace, template: "<div class=\"relations-container\">\r\n  <div  class=\"mb-3 relations-reply\">\r\n    <div class=\"subheader\">\r\n      <div>{{ \"correspondence-relation.reply_relation\" | translate }}</div>\r\n    </div>\r\n    <cts-correspondence-relation-reply\r\n      [correspondence_id]=\"corr_id\"\r\n      (actionclicked)=\"handleActions($event)\"\r\n    ></cts-correspondence-relation-reply>\r\n  </div>\r\n\r\n  <div class=\"mb-2 relations-listing\">\r\n    <div class=\"subheader\">\r\n      <div>{{ \"correspondence-relation.title\" | translate }}</div>\r\n      <div class=\"\" *permission=\"{\r\n        name: 'AddRelatedCorrespondence',\r\n        entity: correspondance , user: nuxeoService.nuxeoClient.user\r\n      }\" (click)=\"openDialog()\"><mat-icon>add</mat-icon></div>\r\n    </div>\r\n    <cts-correspondence-relation-list\r\n      [correspondence_id]=\"corr_id\"\r\n      [reload]=\"reload\"\r\n      [removeRelationTitleFromExpansionList]=\"removeRelationTitleFromExpansionList\"\r\n    ></cts-correspondence-relation-list>\r\n  </div>\r\n\r\n\r\n</div>\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}.relations-container .subheader{padding:10px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:bold}.relations-container .subheader mat-icon{font-size:25px;cursor:pointer;color:#465573}.relations-container .relations-title{display:flex;justify-content:space-between;align-items:center}.relations-container .relations-title a{font-size:30px;color:#789}.relations-container .relations-list{border:1px solid #00000026}.relations-container .relations-list .relation-item{display:flex;justify-content:space-between;align-items:center}\n"], components: [{ type: CorrespondenceRelationReplyComponent, selector: "cts-correspondence-relation-reply", inputs: ["correspondence_id"], outputs: ["actionclicked"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CorrespondenceRelationListComponent, selector: "cts-correspondence-relation-list", inputs: ["correspondence_id", "reload", "removeRelationTitleFromExpansionList"] }], directives: [{ type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  CorrespondenceRelationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationComponent, selector: "cts-correspondence-relation", inputs: { corr_id: "corr_id", correspondance: "correspondance", canOpenDialogFromOutside: "canOpenDialogFromOutside", removeRelationTitleFromExpansionList: "removeRelationTitleFromExpansionList" }, outputs: { openDialogFromOutside: "openDialogFromOutside" }, ngImport: i0__namespace, template: "<div class=\"relations-container\">\r\n  <div  class=\"mb-3 relations-reply\">\r\n    <div class=\"subheader\">\r\n      <div>{{ \"correspondence-relation.reply_relation\" | translate }}</div>\r\n    </div>\r\n    <cts-correspondence-relation-reply\r\n      [correspondence_id]=\"corr_id\"\r\n      (actionclicked)=\"handleActions($event)\"\r\n    ></cts-correspondence-relation-reply>\r\n  </div>\r\n\r\n  <div class=\"mb-2 relations-listing\">\r\n    <div class=\"subheader\">\r\n      <div>{{ \"correspondence-relation.title\" | translate }}</div>\r\n      <div class=\"\" *permission=\"{\r\n        name: 'AddRelatedCorrespondence',\r\n        entity: correspondance , user: nuxeoService.nuxeoClient.user\r\n      }\" (click)=\"openDialog()\"><mat-icon>add</mat-icon></div>\r\n    </div>\r\n    <cts-correspondence-relation-list\r\n      [correspondence_id]=\"corr_id\"\r\n      [reload]=\"reload\"\r\n      [removeRelationTitleFromExpansionList]=\"removeRelationTitleFromExpansionList\"\r\n    ></cts-correspondence-relation-list>\r\n  </div>\r\n\r\n\r\n</div>\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}.relations-container .subheader{padding:10px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:bold}.relations-container .subheader mat-icon{font-size:25px;cursor:pointer;color:#465573}.relations-container .relations-title{display:flex;justify-content:space-between;align-items:center}.relations-container .relations-title a{font-size:30px;color:#789}.relations-container .relations-list{border:1px solid rgba(0,0,0,.1490196078)}.relations-container .relations-list .relation-item{display:flex;justify-content:space-between;align-items:center}\n"], components: [{ type: CorrespondenceRelationReplyComponent, selector: "cts-correspondence-relation-reply", inputs: ["correspondence_id"], outputs: ["actionclicked"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CorrespondenceRelationListComponent, selector: "cts-correspondence-relation-list", inputs: ["correspondence_id", "reload", "removeRelationTitleFromExpansionList"] }], directives: [{ type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CorrespondenceRelationComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -10670,7 +10503,7 @@
       return DynamicFormSlideToggleitemComponent;
   }());
   DynamicFormSlideToggleitemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFormSlideToggleitemComponent, deps: [{ token: i2__namespace$4.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicFormSlideToggleitemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: { label: "label", disabled: "disabled", checked: "checked", theme: "theme" }, outputs: { onToggle: "onToggle" }, ngImport: i0__namespace, template: "<div class=\"dynamic-toggle\">\r\n  <mat-slide-toggle\r\n    [checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    [(ngModel)]=\"value\"\r\n    (change)=\"setValue($event)\"\r\n    >{{ label | translate\r\n    }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\"\r\n      >*</span\r\n    ></mat-slide-toggle\r\n  >\r\n</div>\r\n<!-- [required]=\"isRequired()\" -->\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}.dynamic-toggle .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:transparent;background-image:linear-gradient(to right,#0dbab5,#1a96c6);margin:0 10px}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#fff}.rtl .mat-slide-toggle-label-before .mat-slide-toggle-bar,.rtl .mat-slide-toggle-bar{margin-left:8px;margin-right:0!important}\n"], components: [{ type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ 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"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  DynamicFormSlideToggleitemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: { label: "label", disabled: "disabled", checked: "checked", theme: "theme" }, outputs: { onToggle: "onToggle" }, ngImport: i0__namespace, template: "<div class=\"dynamic-toggle\">\r\n  <mat-slide-toggle\r\n    [checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    [(ngModel)]=\"value\"\r\n    (change)=\"setValue($event)\"\r\n    >{{ label | translate\r\n    }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\"\r\n      >*</span\r\n    ></mat-slide-toggle\r\n  >\r\n</div>\r\n<!-- [required]=\"isRequired()\" -->\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}.dynamic-toggle .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:transparent;background-image:linear-gradient(to right,#0dbab5,#1a96c6);margin:0 10px}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#fff}.rtl .mat-slide-toggle-label-before .mat-slide-toggle-bar,.rtl .mat-slide-toggle-bar{margin-left:8px;margin-right:0!important}\n"], components: [{ type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ 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"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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: DynamicFormSlideToggleitemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -11199,7 +11032,7 @@
       return TreeviewSelectComponent;
   }());
   TreeviewSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TreeviewSelectComponent, deps: [{ token: i1__namespace$a.TreeviewI18n }, { token: TranslationService }, { token: DepartmentApiService }, { token: DepartmentManagementService$1 }, { token: RolesService }, { token: NuxeoService }, { token: GlobalAdminService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  TreeviewSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", selectDepChildren: "selectDepChildren", displayIsAllowRecExternal: "displayIsAllowRecExternal", fixedParentNode: "fixedParentNode", showTreeActions: "showTreeActions" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: i1$9.TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: i1$9.DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template\r\n\t#itemTemplate\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n>\r\n\t<!-- single -->\r\n\t<div *ngIf=\"!treeview && !multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label> -->\r\n\t\t\t<label *ngIf=\"item.disabled\" class=\"form-check-label\">{{ item.text }}</label>\r\n\t\t\t<label *ngIf=\"!item.disabled\" class=\"form-check-label\" (click)=\"select(item)\">{{ item.text }}</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- Multiple -->\r\n\t<div *ngIf=\"!treeview && multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <input\r\n        class=\"multiple-checkBox\"\r\n        type=\"checkbox\"\r\n        [checked]=\"multipleSelection.includes(item.value)\"\r\n        (change)=\"selectMultiple($event.target.checked, item)\"\r\n      />\r\n\r\n      <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n\t\t\t<div class=\"multiple-treeview\">\r\n\t\t\t\t<mat-checkbox [checked]=\"isItemSelected(item)\" (change)=\"selectMultiple($event.checked, item)\">\r\n\t\t\t\t\t<span> {{ item.text }} </span>\r\n\t\t\t\t</mat-checkbox>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView -->\r\n\t<div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\t(mouseenter)=\"hoverField.style.display = 'flex'\"\r\n\t\t\t(mouseleave)=\"hoverField.style.display = 'none'\"\r\n\t\t\tclass=\"text-nowrap row-item treeview-row\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\tselected: item.value == selectedItem,\r\n\t\t\t\ttreeParentNode: item.value === fixedParentNode?.value\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value != fixedParentNode?.value\">{{ item.text }}</ng-conteiner>\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value === fixedParentNode?.value\">{{ item.text | translate }}</ng-conteiner>\r\n\t\t\t\t<span #hoverField class=\"hoverField\">\r\n\t\t\t\t\t<ng-container *ngIf=\"showTreeActions\">\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'update', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-pencil\"></li>\r\n\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.toolTip_message' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'add', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-plus\"></li>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</span>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView as form control -->\r\n\t<div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\tclass=\"text-nowrap row-item treeview-row-form-control\"\r\n\t\t\t[ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }} </label>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n<ng-template\r\n\t#headerTemplate\r\n\tlet-config=\"config\"\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n\tlet-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n\t<div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<input\r\n\t\t\t\tclass=\"form-control\"\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\t[placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n\t\t\t\t[(ngModel)]=\"filterText\"\r\n\t\t\t\t(ngModelChange)=\"onFilterTextChange($event)\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n\t\t\t\t<strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n\t\t\t</label>\r\n\t\t\t<label *ngIf=\"config.hasCollapseExpand\" class=\"float-right\" (click)=\"onCollapseExpand()\">\r\n\t\t\t\t<i [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n\t\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-arrows-angle-contract\"></span>\r\n\t\t\t\t</i>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{\r\n\t\t'department_management.selectDefault' | translate\r\n\t}}</a>\r\n\t<div\r\n\t\t*ngIf=\"config.hasDivider\"\r\n\t\tclass=\"dropdown-divider\"\r\n\t\t[ngClass]=\"{ 'dropdown-divider-noMargin': defaultSelect }\"\r\n\t></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n\t<div class=\"dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[headerTemplate]=\"headerTemplate\"\r\n\t\t\t[items]=\"items\"\r\n\t\t\t[itemTemplate]=\"itemTemplate\"\r\n\t\t>\r\n\t\t</ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n\t<div class=\"multiple-tree-view dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview [config]=\"config\" [items]=\"items\" [itemTemplate]=\"itemTemplate\"> </ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n\t<div class=\"tree-view\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n\t<div class=\"tree-view-form-control\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\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}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ 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"] }, { type: i1__namespace$a.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1__namespace$a.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  TreeviewSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", selectDepChildren: "selectDepChildren", displayIsAllowRecExternal: "displayIsAllowRecExternal", fixedParentNode: "fixedParentNode", showTreeActions: "showTreeActions" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: i1$9.TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: i1$9.DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template\r\n\t#itemTemplate\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n>\r\n\t<!-- single -->\r\n\t<div *ngIf=\"!treeview && !multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label> -->\r\n\t\t\t<label *ngIf=\"item.disabled\" class=\"form-check-label\">{{ item.text }}</label>\r\n\t\t\t<label *ngIf=\"!item.disabled\" class=\"form-check-label\" (click)=\"select(item)\">{{ item.text }}</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- Multiple -->\r\n\t<div *ngIf=\"!treeview && multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <input\r\n        class=\"multiple-checkBox\"\r\n        type=\"checkbox\"\r\n        [checked]=\"multipleSelection.includes(item.value)\"\r\n        (change)=\"selectMultiple($event.target.checked, item)\"\r\n      />\r\n\r\n      <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n\t\t\t<div class=\"multiple-treeview\">\r\n\t\t\t\t<mat-checkbox [checked]=\"isItemSelected(item)\" (change)=\"selectMultiple($event.checked, item)\">\r\n\t\t\t\t\t<span> {{ item.text }} </span>\r\n\t\t\t\t</mat-checkbox>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView -->\r\n\t<div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\t(mouseenter)=\"hoverField.style.display = 'flex'\"\r\n\t\t\t(mouseleave)=\"hoverField.style.display = 'none'\"\r\n\t\t\tclass=\"text-nowrap row-item treeview-row\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\tselected: item.value == selectedItem,\r\n\t\t\t\ttreeParentNode: item.value === fixedParentNode?.value\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value != fixedParentNode?.value\">{{ item.text }}</ng-conteiner>\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value === fixedParentNode?.value\">{{ item.text | translate }}</ng-conteiner>\r\n\t\t\t\t<span #hoverField class=\"hoverField\">\r\n\t\t\t\t\t<ng-container *ngIf=\"showTreeActions\">\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'update', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-pencil\"></li>\r\n\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.toolTip_message' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'add', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-plus\"></li>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</span>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView as form control -->\r\n\t<div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\tclass=\"text-nowrap row-item treeview-row-form-control\"\r\n\t\t\t[ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }} </label>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n<ng-template\r\n\t#headerTemplate\r\n\tlet-config=\"config\"\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n\tlet-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n\t<div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<input\r\n\t\t\t\tclass=\"form-control\"\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\t[placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n\t\t\t\t[(ngModel)]=\"filterText\"\r\n\t\t\t\t(ngModelChange)=\"onFilterTextChange($event)\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n\t\t\t\t<strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n\t\t\t</label>\r\n\t\t\t<label *ngIf=\"config.hasCollapseExpand\" class=\"float-right\" (click)=\"onCollapseExpand()\">\r\n\t\t\t\t<i [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n\t\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-arrows-angle-contract\"></span>\r\n\t\t\t\t</i>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{\r\n\t\t'department_management.selectDefault' | translate\r\n\t}}</a>\r\n\t<div\r\n\t\t*ngIf=\"config.hasDivider\"\r\n\t\tclass=\"dropdown-divider\"\r\n\t\t[ngClass]=\"{ 'dropdown-divider-noMargin': defaultSelect }\"\r\n\t></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n\t<div class=\"dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[headerTemplate]=\"headerTemplate\"\r\n\t\t\t[items]=\"items\"\r\n\t\t\t[itemTemplate]=\"itemTemplate\"\r\n\t\t>\r\n\t\t</ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n\t<div class=\"multiple-tree-view dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview [config]=\"config\" [items]=\"items\" [itemTemplate]=\"itemTemplate\"> </ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n\t<div class=\"tree-view\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n\t<div class=\"tree-view-form-control\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\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}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ 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"] }, { type: i1__namespace$a.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1__namespace$a.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], 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: TreeviewSelectComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -12001,7 +11834,7 @@
       return DynamicFormOptionsComponent;
   }());
   DynamicFormOptionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFormOptionsComponent, deps: [{ token: i2__namespace$4.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicFormOptionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormOptionsComponent, selector: "cts-dynamic-form-options", inputs: { label: "label", data: "data", bindLabel: "bindLabel", bindValue: "bindValue", multiple: "multiple" }, ngImport: i0__namespace, template: "<!-- template for viewing single select selected value -->\r\n<ng-container *ngIf=\"multiple\">\r\n  <ng-container *ngIf=\"label\">\r\n    <div>\r\n      <label class=\"radio-label\"\r\n        >{{ label | translate\r\n        }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n      >\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"option-wrapper\" *ngFor=\"let item of data ; let i = index\">\r\n    <span>\r\n      <input\r\n        id=\"item-{{ i }}\"\r\n        type=\"checkbox\"\r\n        (change)=\"\r\n          emitSelection(\r\n            bindValue ? item[bindValue] : item,\r\n            $event.target.checked\r\n          )\r\n        \"\r\n        [checked]=\"containsValue(bindValue ? item[bindValue] : item, selection)\"\r\n      />\r\n    </span>\r\n    <span class=\"label-wrapper\">\r\n      {{ (bindLabel ? item[bindLabel] : item) | translate }}\r\n    </span>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!multiple\">\r\n  <ng-container *ngIf=\"label\">\r\n    <div>\r\n      <label class=\"radio-label\"\r\n        >{{ label | translate\r\n        }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n      >\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"radio-option\">\r\n    <mat-radio-group\r\n      [(ngModel)]=\"selectedItem\"\r\n      (ngModelChange)=\"onSelectedItemChanged($event)\"\r\n      class=\"radio-group\"\r\n    >\r\n      <mat-radio-button\r\n        class=\"radio-button\"\r\n        *ngFor=\"let item of data\"\r\n        [value]=\"bindValue ? item[bindValue] : item\"\r\n      >\r\n        {{ (bindLabel ? item[bindLabel] : item) | translate }}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n  </div>\r\n</ng-container>\r\n<!-- template for viewing multi select selected values -->\r\n<!-- [checked]=\"containsValue(bindValue ? item[bindValue] : item,selectedItem)\" -->\r\n", styles: [".radio-label{font-size:17px;margin-bottom:1px}.radio-option{display:flex;grid-column-gap:4px;column-gap:4px}.radio-option .radio-group{display:flex;grid-column-gap:10px;column-gap:10px}.radio-option .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element{opacity:0!important;background-color:#00dca5!important}.radio-option .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#00dca5!important}.radio-option .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#00dca5!important}\n"], components: [{ type: i2__namespace$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { 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 }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  DynamicFormOptionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormOptionsComponent, selector: "cts-dynamic-form-options", inputs: { label: "label", data: "data", bindLabel: "bindLabel", bindValue: "bindValue", multiple: "multiple" }, ngImport: i0__namespace, template: "<!-- template for viewing single select selected value -->\r\n<ng-container *ngIf=\"multiple\">\r\n  <ng-container *ngIf=\"label\">\r\n    <div>\r\n      <label class=\"radio-label\"\r\n        >{{ label | translate\r\n        }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n      >\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"option-wrapper\" *ngFor=\"let item of data ; let i = index\">\r\n    <span>\r\n      <input\r\n        id=\"item-{{ i }}\"\r\n        type=\"checkbox\"\r\n        (change)=\"\r\n          emitSelection(\r\n            bindValue ? item[bindValue] : item,\r\n            $event.target.checked\r\n          )\r\n        \"\r\n        [checked]=\"containsValue(bindValue ? item[bindValue] : item, selection)\"\r\n      />\r\n    </span>\r\n    <span class=\"label-wrapper\">\r\n      {{ (bindLabel ? item[bindLabel] : item) | translate }}\r\n    </span>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!multiple\">\r\n  <ng-container *ngIf=\"label\">\r\n    <div>\r\n      <label class=\"radio-label\"\r\n        >{{ label | translate\r\n        }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n      >\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"radio-option\">\r\n    <mat-radio-group\r\n      [(ngModel)]=\"selectedItem\"\r\n      (ngModelChange)=\"onSelectedItemChanged($event)\"\r\n      class=\"radio-group\"\r\n    >\r\n      <mat-radio-button\r\n        class=\"radio-button\"\r\n        *ngFor=\"let item of data\"\r\n        [value]=\"bindValue ? item[bindValue] : item\"\r\n      >\r\n        {{ (bindLabel ? item[bindLabel] : item) | translate }}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n  </div>\r\n</ng-container>\r\n<!-- template for viewing multi select selected values -->\r\n<!-- [checked]=\"containsValue(bindValue ? item[bindValue] : item,selectedItem)\" -->\r\n", styles: [".radio-label{font-size:17px;margin-bottom:1px}.radio-option .radio-group{display:flex;grid-column-gap:10px;column-gap:10px}.radio-option{display:flex;grid-column-gap:4px;column-gap:4px}.radio-option .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element{opacity:0!important;background-color:#00dca5!important}.radio-option .mat-radio-button.mat-accent .mat-radio-inner-circle{background-color:#00dca5!important}.radio-option .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#00dca5!important}\n"], components: [{ type: i2__namespace$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { 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 }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFormOptionsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -14284,7 +14117,7 @@
       return DepartmentViewerComponent;
   }());
   DepartmentViewerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DepartmentViewerComponent, deps: [{ token: TranslationService }, { token: DepartmentApiService }, { token: DynamicVieweService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DepartmentViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: { label: "label", value: "value", dropdownId: "dropdownId", vertical: "vertical", withOutLabel: "withOutLabel", noStyle: "noStyle" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!noStyle\">\r\n  <div\r\n    class=\"my-dynamic-viewer\"\r\n    [ngClass]=\"{ vertical: vertical === true, 'with-out-label': withOutLabel }\"\r\n  >\r\n    <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{ label | translate }}</div>\r\n    <div *ngIf=\"departmentName\" class=\"my-value\" matTooltip=\"{{departmentName}}\">\r\n      {{ departmentName }}\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"noStyle\">\r\n  {{ departmentName }}\r\n</ng-container>\r\n", styles: [""], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  DepartmentViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: { label: "label", value: "value", dropdownId: "dropdownId", vertical: "vertical", withOutLabel: "withOutLabel", noStyle: "noStyle" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!noStyle\">\r\n  <div\r\n    class=\"my-dynamic-viewer\"\r\n    [ngClass]=\"{ vertical: vertical === true, 'with-out-label': withOutLabel }\"\r\n  >\r\n    <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{ label | translate }}</div>\r\n    <div *ngIf=\"departmentName\" class=\"my-value\" matTooltip=\"{{departmentName}}\">\r\n      {{ departmentName }}\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"noStyle\">\r\n  {{ departmentName }}\r\n</ng-container>\r\n", styles: [""], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DepartmentViewerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -14404,7 +14237,7 @@
       return DynamicFilterComponent;
   }());
   DynamicFilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicFilterComponent, deps: [{ token: TranslationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: { title: "title", filters: "filters", selections: "selections", id: "id", entityType: "entityType", prefix: "prefix", department: "department", componentType: "componentType", customPageProvider: "customPageProvider", config: "config", aggregation: "aggregation" }, outputs: { onFilterSelected: "onFilterSelected" }, ngImport: i0__namespace, template: "<div class=\"aggregation-container\">\r\n  <div class=\"search-title\">\r\n    {{ prefix + \".\" + title | translate }}\r\n  </div>\r\n  <ng-container *ngIf=\"filters && componentType != 'colorsCodes'\">\r\n    <ng-container *ngFor=\"let group of filters; index as i\">\r\n      <div *ngIf=\"i < 5 || more\" class=\"search-checkbox\">\r\n        <!-- <input\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          type=\"checkbox\"\r\n          (change)=\"onFilterSelect(group.key, $event.target.checked)\"\r\n        /> -->\r\n        <!-- <div class=\"mx-8\">\r\n          <span [ngSwitch]=\"EntityType(group.fetchedKey)\">\r\n            <span *ngSwitchCase=\"'directoryEntry'\">\r\n              {{\r\n                \"vocabulary.\" + group.fetchedKey.directoryName + \".\" + group.key\r\n                  | translate\r\n              }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.fetchedKey.properties.firstName +\r\n                  \" \" +\r\n                  group.fetchedKey.properties.lastName\r\n              }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi>\r\n        </div> -->\r\n        <mat-checkbox\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          (change)=\"onFilterSelect(group.key, $event.checked)\"\r\n        >\r\n          <span [ngSwitch]=\"componentType\" class=\"aggregation-label\">\r\n\r\n            <span *ngSwitchCase=\"'custom-voc'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'vocabulary'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.key === 'system' ? ('SYSTEM_ADMIN' | translate) : (group.fetchedKey.properties.firstName + \" \" + group.fetchedKey.properties.lastName)\r\n              }}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'agency'\">\r\n              {{ (aggregation.prefix +  group.key) | translate}}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-pp'\">\r\n              <lib-custom-pp-viewer [pageProvider]=\"customPageProvider\" [config]=\"config\" [group]=\"group\"></lib-custom-pp-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-document'\">\r\n              <lib-custom-document-viewer [pageProvider]=\"customPageProvider\" [group]=\"group\"></lib-custom-document-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'department'\">\r\n              <cts-department-viewer\r\n              [noStyle]=\"true\"\r\n              [value]=\"group.key\"\r\n            >\r\n            </cts-department-viewer>\r\n            <!-- {{group.key}} -->\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-department'\">\r\n              {{isArabic ? group.fetchedKey.properties[config.propertyAr] : group.fetchedKey.properties[config.propertyEn]}}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'string'\">\r\n              <span>{{group.key}}</span>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi></mat-checkbox\r\n        >\r\n      </div>\r\n    </ng-container>\r\n    <div *ngIf=\"filters.length > 5\" class=\"more\">\r\n      <button class=\"btn-more\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"filters && componentType == 'colorsCodes'\">\r\n    <div class=\"flex flex-wrap colorsContainer\">\r\n      <ng-container *ngFor=\"let group of filters; index as i\">\r\n          <div *ngIf=\"i < 24 || more\" class=\"color-search-checkbox flex items-end justify-start\" [style.backgroundColor]=\"group.key\"\r\n          matTooltip=\"{{'search.colorInOtherPhotos' | translate :{num:group.docCount} }}\" [matTooltipPosition]=\"'above'\" \r\n          (click)=\"onFilterSelect(group.key, (_selections.includes(group.key)) ? false : true)\">\r\n            <span class=\"checkIcon bi bi-check\" *ngIf=\"_selections.includes(group.key)\" [ngStyle]=\"{color: (isWhiteOrClosetToWhite(group.key)) ? 'black': 'white'}\"></span>\r\n          </div>\r\n        \r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"filters.length > 20\" class=\"more\">\r\n      <button class=\"btn-more mt-1\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n\r\n  \r\n</div>\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}.mx-8{margin-left:8px;margin-right:8px}.aggregation-container{border-bottom:1px solid #b4bac6;padding-bottom:8px}.aggregation-container .search-title{margin-bottom:6px;margin-top:6px;border-bottom-width:2px;font-weight:700;--tw-text-opacity: 1;color:rgba(70,85,115,var(--tw-text-opacity))}.aggregation-container .search-checkbox{display:flex;align-items:center;margin-bottom:.5rem}.aggregation-container .colorsContainer{overflow:visible;width:max-content;max-width:252px;grid-gap:4px;gap:4px}.aggregation-container .color-search-checkbox{width:28px;height:28px;box-shadow:#00000059 3px 5px 10px;transition:all .2s ease-in-out;cursor:pointer;border-radius:10%/50%}.aggregation-container .color-search-checkbox .checkIcon{width:1rem;height:1rem;min-width:1rem;min-height:1rem;font-size:1rem;line-height:1rem;color:#fff}.aggregation-container .color-search-checkbox:hover{transform:scale(1.3)}.aggregation-container .mat-checkbox-ripple .mat-ripple-element,.aggregation-container .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.aggregation-container .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.aggregation-container mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.aggregation-container mat-checkbox .mat-checkbox-inner-container{transform:scale(1.1)}.aggregation-container .justify-items-center{justify-items:center}.aggregation-container .more{display:flex;justify-content:center}.aggregation-container .btn-more{border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgba(217,220,226,var(--tw-border-opacity));background:none;border:none;margin:0;padding:0;color:#00f}.rtl mat-checkbox .mat-checkbox-inner-container{margin-right:0!important;margin-left:8px!important}\n"], components: [{ 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"] }, { type: CutomeVocViewerComponent, selector: "lib-cutome-voc-viewer", inputs: ["type", "group"] }, { type: CustomPpViewerComponent, selector: "lib-custom-pp-viewer", inputs: ["pageProvider", "group", "config"] }, { type: CustomDocumentViewerComponent, selector: "lib-custom-document-viewer", inputs: ["pageProvider", "group"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4__namespace$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  DynamicFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: { title: "title", filters: "filters", selections: "selections", id: "id", entityType: "entityType", prefix: "prefix", department: "department", componentType: "componentType", customPageProvider: "customPageProvider", config: "config", aggregation: "aggregation" }, outputs: { onFilterSelected: "onFilterSelected" }, ngImport: i0__namespace, template: "<div class=\"aggregation-container\">\r\n  <div class=\"search-title\">\r\n    {{ prefix + \".\" + title | translate }}\r\n  </div>\r\n  <ng-container *ngIf=\"filters && componentType != 'colorsCodes'\">\r\n    <ng-container *ngFor=\"let group of filters; index as i\">\r\n      <div *ngIf=\"i < 5 || more\" class=\"search-checkbox\">\r\n        <!-- <input\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          type=\"checkbox\"\r\n          (change)=\"onFilterSelect(group.key, $event.target.checked)\"\r\n        /> -->\r\n        <!-- <div class=\"mx-8\">\r\n          <span [ngSwitch]=\"EntityType(group.fetchedKey)\">\r\n            <span *ngSwitchCase=\"'directoryEntry'\">\r\n              {{\r\n                \"vocabulary.\" + group.fetchedKey.directoryName + \".\" + group.key\r\n                  | translate\r\n              }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.fetchedKey.properties.firstName +\r\n                  \" \" +\r\n                  group.fetchedKey.properties.lastName\r\n              }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi>\r\n        </div> -->\r\n        <mat-checkbox\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          (change)=\"onFilterSelect(group.key, $event.checked)\"\r\n        >\r\n          <span [ngSwitch]=\"componentType\" class=\"aggregation-label\">\r\n\r\n            <span *ngSwitchCase=\"'custom-voc'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'vocabulary'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.key === 'system' ? ('SYSTEM_ADMIN' | translate) : (group.fetchedKey.properties.firstName + \" \" + group.fetchedKey.properties.lastName)\r\n              }}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'agency'\">\r\n              {{ (aggregation.prefix +  group.key) | translate}}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-pp'\">\r\n              <lib-custom-pp-viewer [pageProvider]=\"customPageProvider\" [config]=\"config\" [group]=\"group\"></lib-custom-pp-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-document'\">\r\n              <lib-custom-document-viewer [pageProvider]=\"customPageProvider\" [group]=\"group\"></lib-custom-document-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'department'\">\r\n              <cts-department-viewer\r\n              [noStyle]=\"true\"\r\n              [value]=\"group.key\"\r\n            >\r\n            </cts-department-viewer>\r\n            <!-- {{group.key}} -->\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-department'\">\r\n              {{isArabic ? group.fetchedKey.properties[config.propertyAr] : group.fetchedKey.properties[config.propertyEn]}}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'string'\">\r\n              <span>{{group.key}}</span>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi></mat-checkbox\r\n        >\r\n      </div>\r\n    </ng-container>\r\n    <div *ngIf=\"filters.length > 5\" class=\"more\">\r\n      <button class=\"btn-more\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"filters && componentType == 'colorsCodes'\">\r\n    <div class=\"flex flex-wrap colorsContainer\">\r\n      <ng-container *ngFor=\"let group of filters; index as i\">\r\n          <div *ngIf=\"i < 24 || more\" class=\"color-search-checkbox flex items-end justify-start\" [style.backgroundColor]=\"group.key\"\r\n          matTooltip=\"{{'search.colorInOtherPhotos' | translate :{num:group.docCount} }}\" [matTooltipPosition]=\"'above'\" \r\n          (click)=\"onFilterSelect(group.key, (_selections.includes(group.key)) ? false : true)\">\r\n            <span class=\"checkIcon bi bi-check\" *ngIf=\"_selections.includes(group.key)\" [ngStyle]=\"{color: (isWhiteOrClosetToWhite(group.key)) ? 'black': 'white'}\"></span>\r\n          </div>\r\n        \r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"filters.length > 20\" class=\"more\">\r\n      <button class=\"btn-more mt-1\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n\r\n  \r\n</div>\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}.mx-8{margin-left:8px;margin-right:8px}.aggregation-container{border-bottom:1px solid #b4bac6;padding-bottom:8px}.aggregation-container .search-title{margin-bottom:6px;margin-top:6px;border-bottom-width:2px;font-weight:700;--tw-text-opacity: 1;color:rgba(70,85,115,var(--tw-text-opacity))}.aggregation-container .search-checkbox{display:flex;align-items:center;margin-bottom:.5rem}.aggregation-container .colorsContainer{overflow:visible;width:max-content;max-width:252px;grid-gap:4px;gap:4px}.aggregation-container .color-search-checkbox{width:28px;height:28px;box-shadow:#00000059 3px 5px 10px;transition:all .2s ease-in-out;cursor:pointer;border-radius:10%/50%}.aggregation-container .color-search-checkbox .checkIcon{width:1rem;height:1rem;min-width:1rem;min-height:1rem;font-size:1rem;line-height:1rem;color:#fff}.aggregation-container .color-search-checkbox:hover{transform:scale(1.3)}.aggregation-container .mat-checkbox-ripple .mat-ripple-element,.aggregation-container .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.aggregation-container .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.aggregation-container mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.aggregation-container mat-checkbox .mat-checkbox-inner-container{transform:scale(1.1)}.aggregation-container .justify-items-center{justify-items:center}.aggregation-container .more{display:flex;justify-content:center}.aggregation-container .btn-more{border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgba(217,220,226,var(--tw-border-opacity));background:none;border:none;margin:0;padding:0;color:#00f}.rtl mat-checkbox .mat-checkbox-inner-container{margin-right:0!important;margin-left:8px!important}\n"], components: [{ 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"] }, { type: CutomeVocViewerComponent, selector: "lib-cutome-voc-viewer", inputs: ["type", "group"] }, { type: CustomPpViewerComponent, selector: "lib-custom-pp-viewer", inputs: ["pageProvider", "group", "config"] }, { type: CustomDocumentViewerComponent, selector: "lib-custom-document-viewer", inputs: ["pageProvider", "group"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4__namespace$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], 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: DynamicFilterComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -14452,7 +14285,7 @@
       return DataViewerComponent;
   }());
   DataViewerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataViewerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DataViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DataViewerComponent, selector: "cts-data-viewer", inputs: { label: "label", value: "value", vertical: "vertical", defultValue: "defultValue", customClass: "customClass" }, ngImport: i0__namespace, template: "<div class=\"my-dynamic-viewer {{customClass}}\" \r\n[ngClass]=\"{'vertical' : vertical === true}\">\r\n  <div class=\"my-label\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n  <div class=\"my-value\"> \r\n    <span class=\"direction-img\">\r\n      <i class=\"bi bi-box-arrow-down incoming\"></i>\r\n      <i class=\"bi bi-box-arrow-up outgoing\"></i>\r\n      <i class=\"bi bi-box-arrow-right internal\"></i>\r\n    </span>\r\n    <span class=\"text\" matTooltip=\"{{value ? value : '-'}}\">\r\n      {{value ? value : (defultValue ? (defultValue | translate) : '-')}}\r\n    </span>\r\n    \r\n    </div> \r\n</div>\r\n", styles: [""], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  DataViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DataViewerComponent, selector: "cts-data-viewer", inputs: { label: "label", value: "value", vertical: "vertical", defultValue: "defultValue", customClass: "customClass" }, ngImport: i0__namespace, template: "<div class=\"my-dynamic-viewer {{customClass}}\" \r\n[ngClass]=\"{'vertical' : vertical === true}\">\r\n  <div class=\"my-label\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n  <div class=\"my-value\"> \r\n    <span class=\"direction-img\">\r\n      <i class=\"bi bi-box-arrow-down incoming\"></i>\r\n      <i class=\"bi bi-box-arrow-up outgoing\"></i>\r\n      <i class=\"bi bi-box-arrow-right internal\"></i>\r\n    </span>\r\n    <span class=\"text\" matTooltip=\"{{value ? value : '-'}}\">\r\n      {{value ? value : (defultValue ? (defultValue | translate) : '-')}}\r\n    </span>\r\n    \r\n    </div> \r\n</div>\r\n", styles: [""], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], 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: DataViewerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -14486,7 +14319,7 @@
       return BooleanViewerComponent;
   }());
   BooleanViewerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanViewerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  BooleanViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanViewerComponent, selector: "cts-boolean-viewer", inputs: { label: "label", value: "value", trueValue: "trueValue", falseValue: "falseValue", vertical: "vertical" }, ngImport: i0__namespace, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true}\">\r\n    <div class=\"my-label\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n    <div class=\"my-value\" matTooltip=\"{{value ?  (trueValue | translate) : (falseValue | translate)}}\"> {{value ?  (trueValue | translate) : (falseValue | translate)}}</div>\r\n</div>", styles: [""], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  BooleanViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanViewerComponent, selector: "cts-boolean-viewer", inputs: { label: "label", value: "value", trueValue: "trueValue", falseValue: "falseValue", vertical: "vertical" }, ngImport: i0__namespace, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true}\">\r\n    <div class=\"my-label\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n    <div class=\"my-value\" matTooltip=\"{{value ?  (trueValue | translate) : (falseValue | translate)}}\"> {{value ?  (trueValue | translate) : (falseValue | translate)}}</div>\r\n</div>", styles: [""], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BooleanViewerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -14553,7 +14386,7 @@
       return DropdownViewerComponent;
   }());
   DropdownViewerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DropdownViewerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DropdownViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: { label: "label", value: "value", dropdownId: "dropdownId", vertical: "vertical", withOutLabel: "withOutLabel" }, ngImport: i0__namespace, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true , 'with-out-label': withOutLabel}\">\r\n  <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n  <div class=\"my-value\" matTooltip='{{value ? (\"vocabulary.\" + voc_name + \".\" + value| translate ): \"-\"}}'> {{value ? (\"vocabulary.\" + voc_name + \".\" + value| translate ): '-'}}</div>\r\n</div>\r\n", styles: [""], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  DropdownViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: { label: "label", value: "value", dropdownId: "dropdownId", vertical: "vertical", withOutLabel: "withOutLabel" }, ngImport: i0__namespace, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true , 'with-out-label': withOutLabel}\">\r\n  <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n  <div class=\"my-value\" matTooltip='{{value ? (\"vocabulary.\" + voc_name + \".\" + value| translate ): \"-\"}}'> {{value ? (\"vocabulary.\" + voc_name + \".\" + value| translate ): '-'}}</div>\r\n</div>\r\n", styles: [""], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], 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: DropdownViewerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -14601,7 +14434,7 @@
       return DateViewerComponent;
   }());
   DateViewerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateViewerComponent, deps: [{ token: AppConfigService }, { token: TranslationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DateViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateViewerComponent, selector: "cts-date-viewer", inputs: { label: "label", value: "value", vertical: "vertical", format: "format", hijri: "hijri", withOutLabel: "withOutLabel" }, ngImport: i0__namespace, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true  , 'with-out-label': withOutLabel}\">\r\n    <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n    <div class=\"my-value\" *ngIf=\"!hijri\" matTooltip=\"{{value | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}\"> {{value | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}</div>\r\n    <div class=\"my-value\" *ngIf=\"hijri\" matTooltip=\"{{value | hijriDate}}\">{{value | hijriDate}}</div>\r\n</div>", styles: [""], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe, "hijriDate": HijriDatePipe } });
+  DateViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateViewerComponent, selector: "cts-date-viewer", inputs: { label: "label", value: "value", vertical: "vertical", format: "format", hijri: "hijri", withOutLabel: "withOutLabel" }, ngImport: i0__namespace, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true  , 'with-out-label': withOutLabel}\">\r\n    <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n    <div class=\"my-value\" *ngIf=\"!hijri\" matTooltip=\"{{value | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}\"> {{value | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}</div>\r\n    <div class=\"my-value\" *ngIf=\"hijri\" matTooltip=\"{{value | hijriDate}}\">{{value | hijriDate}}</div>\r\n</div>", styles: [""], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe, "hijriDate": HijriDatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateViewerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -16124,7 +15957,7 @@
   }());
   _TableComponent_resizeObserver = new WeakMap();
   TableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TableComponent, deps: [{ token: NuxeoService }, { token: AppConfigService }, { token: TranslationService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  TableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableComponent, selector: "cts-table", inputs: { rows: "rows", columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", pageCount: "pageCount", totalRecords: "totalRecords", rowCursor: "rowCursor", fullWidth: "fullWidth", vocItemTranslationPrefix: "vocItemTranslationPrefix", higlightUnread: "higlightUnread", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu", messages: "messages", defaultColumnSize: "defaultColumnSize" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: i4$2.DatatableComponent, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n\t#tableContainer\r\n\tclass=\"iner-table-container\"\r\n\t[style]=\"'width:' + tableWidth\"\r\n\t*ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n\t<ngx-datatable\r\n\t\t[ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n\t\tclass=\"large-table\"\r\n\t\t[rows]=\"rows\"\r\n\t\t[summaryRow]=\"customFirstRow\"\r\n\t\t[columnMode]=\"'standard'\"\r\n\t\t[scrollbarH]=\"true\"\r\n\t\t[rowClass]=\"getRowClass\"\r\n\t\t[style.width.%]=\"100\"\r\n\t\t[externalSorting]=\"true\"\r\n\t\t(activate)=\"rowDetails($event)\"\r\n\t\t(select)=\"onSelect($event)\"\r\n\t\t(sort)=\"onSort($event)\"\r\n\t\t(window:resize)=\"assignTableColumns($event)\"\r\n\t\t[rowHeight]=\"isFixedOptionColumns ? '3rem' : 'auto'\"\r\n\t\t[selected]=\"selected\"\r\n\t\t[selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n\t\t[sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n\t\t[messages]=\"messages\"\r\n\t>\r\n\t\t<ngx-datatable-column\r\n\t\t\t*ngIf=\"multiSelectRows\"\r\n\t\t\t[width]=\"30\"\r\n\t\t\t[sortable]=\"false\"\r\n\t\t\t[prop]=\"''\"\r\n\t\t\t[canAutoResize]=\"false\"\r\n\t\t\t[draggable]=\"false\"\r\n\t\t\t[resizeable]=\"false\"\r\n\t\t>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-header-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-allRowsSelected=\"allRowsSelected\"\r\n\t\t\t\tlet-selectFn=\"selectFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-cell-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-isSelected=\"isSelected\"\r\n\t\t\t\tlet-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t</ngx-datatable-column>\r\n\t\t<!-- | translate -->\r\n\r\n\t\t<ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n\t\t\t<ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n\t\t\t<!-- [frozenRight]=\"column.type === 'actions'\" -->\r\n\t\t\t<ng-container *ngFor=\"let column of columns; let i = index\">\r\n\t\t\t\t<ng-container *permission=\"{ name: column.permission }\">\r\n\t\t\t\t\t<ngx-datatable-column\r\n\t\t\t\t\t\t*ngIf=\"column.display\"\r\n\t\t\t\t\t\t[sortable]=\"column.sortable\"\r\n\t\t\t\t\t\t[name]=\"prefix + column.name | translate\"\r\n\t\t\t\t\t\t[prop]=\"column.prop\"\r\n\t\t\t\t\t\t[resizeable]=\"false\"\r\n\t\t\t\t\t\t[draggable]=\"false\"\r\n\t\t\t\t\t\t[width]=\"column?.size || defaultColumnSize\"\r\n\t\t\t\t\t\t[frozenLeft]=\"isFixedOptionColumns && column.type === 'actions'\"\r\n\t\t\t\t\t\t[headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n\t\t\t\t\t\t[summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<ng-template let-row=\"row\" let-value=\"value\" let-index=\"index\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'text'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" *ngIf=\"!column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" matTooltip=\"{{ value ? value : '--' }}\" *ngIf=\"column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"value\" [dropdownId]=\"column.vocabularyId\">\r\n\t\t\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocCell'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ (value ? column.vocabularyId + '.' + value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocItem'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ vocItemTranslationPrefix + value | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'department'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"value\"> </cts-department-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'status'\">\r\n\t\t\t\t\t\t\t\t<div class=\"status-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"value {{ value }}\">\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"statusIcons && statusIcons !== {}\" class=\"status-icon {{ statusIcons[value] }}\"></span>\r\n\t\t\t\t\t\t\t\t\t\t{{ 'STATS.' + value | translate }}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'role'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ 'role.' + (value ? value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"!showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-pencil-square edit-icon\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'UPDATE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'edit')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-trash\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'delete' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-plus-square\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<span *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"action.type == 'button'; else showIcon\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.class }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"action.icon\" [class]=\"action.iconClass\" [svgIcon]=\"action.icon\"> </mat-icon>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t{{ action.title | translate }}\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<ng-template #showIcon>\r\n\t\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<button class=\"action-menu-trigger\" [matMenuTriggerFor]=\"menu\" [disabled]=\"disabledActions\">\r\n\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-three-dots-vertical\"></i>\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t<mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\">\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-pencil-square edit-icon\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'UPDATE' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-trash\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'delete' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-plus-square\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'USER_MANGMENT.addToDepartment' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<ng-conttainer *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ action.tooltip | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-conttainer>\r\n\t\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'date'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-date-viewer [withOutLabel]=\"true\" [value]=\"value\"></cts-date-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'custom'\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.template\" [column]=\"column\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'direction'\">\r\n\t\t\t\t\t\t\t\t<div (click)=\"iconSelected($event, row)\" class=\"status-wrapper {{ value }} {{ row.state }}\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['incoming'] : 'bi bi-box-arrow-down' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['outgoing'] : 'bi bi-box-arrow-up outgoing' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['internal'] : 'bi bi-box-arrow-right internal' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'InternalCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<ng-template #customRowTemplate let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<div class=\"w-full flex items-center justify-center overflow-visible\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.custom1stCellTemplate\" [column]=\"column\" [context]=\"row\">\r\n\t\t\t\t\t\t\t\t</cts-dynamic-column>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</ngx-datatable-column>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"responsiveView && tableMode !== tableModes.card\" (window:resize)=\"assignTableColumns($event)\">\r\n\t<div class=\"dynamic-cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'owner'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.owner]?.[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'status'\" class=\"value {{ row[property.value] }}\">\r\n\t\t\t\t\t\t\t{{ 'STATS.' + row[property.value] | translate }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'department'\">\r\n\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"row.properties[property.value]\"> </cts-department-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'vocabulary'\" class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t<cts-dropdown-viewer\r\n\t\t\t\t\t\t\t\t[withOutLabel]=\"true\"\r\n\t\t\t\t\t\t\t\t[value]=\"row.properties[property.value]\"\r\n\t\t\t\t\t\t\t\t[dropdownId]=\"property.vocabularyId\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t*ngIf=\"property.type === 'direction'\"\r\n\t\t\t\t\t\t\t(click)=\"iconSelected($event, row)\"\r\n\t\t\t\t\t\t\tclass=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-down\" *ngIf=\"row.type === 'IncomingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-up outgoing\" *ngIf=\"row.type === 'OutgoingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-right internal\" *ngIf=\"row.type === 'InternalCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"property.template\" [column]=\"property\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngFor=\"let row of rows\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'deleteMemo',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'deleteMemo')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'terminateDelegation',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'terminateDelegation')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'memoPublished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'MEMOS.PUBLISHED' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationFinished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.finished' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationActive',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.active' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row); cardFocused(i)\">\r\n\t\t\t\t<div class=\"key\" *ngIf=\"property.type !== 'default'\">\r\n\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"key\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value].fullName }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n\t\t\t\t\t\t{{ (row.properties[property.value] ? 'Yes' : 'No') | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"text\"\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n\t\t\t\t\t\t\t{{ item | translate }} {{ ', ' }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"tableColumns[0].template\" [column]=\"tableColumns[0]\" [context]=\"row\">\r\n\t\t\t\t</cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n\t<app-dynamic-component\r\n\t\tclass=\"table-custom-view__component\"\r\n\t\t*ngFor=\"let row of rows\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[row]=\"row\"\r\n\t\t[rowAction]=\"actionOnRow\"\r\n\t\t[onClick]=\"onRowSelected\"\r\n\t\t(click)=\"cardSelected(row)\"\r\n\t\t[class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n\t></app-dynamic-component>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.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}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{display:flex;justify-content:space-between;align-items:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:5px 5px 0;width:16px;height:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:\"\\f127\";display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:normal!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-up.sort-btn:before{content:\"\\f57b\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-down.sort-btn:before{content:\"\\f574\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;white-space:pre-wrap}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:flex}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .checkbox-input{z-index:99}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-scroll{width:100%!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{display:flex!important;min-height:50px!important;overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center .datatable-body-cell{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:50px;font-size:14px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row{min-width:100%!important;height:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center{display:flex;justify-content:space-between;padding:0 20px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell{min-height:50px;display:flex;align-items:center;overflow:hidden}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{width:100%;display:flex;justify-content:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input{z-index:99}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper{position:relative}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator{font-size:12px;position:absolute;top:-5px;right:-10px;color:#ebb98e}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value{display:flex;justify-content:center;align-items:center;border-radius:5px;width:100px;height:25px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon{margin-inline-end:5px;font-size:16px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft{background-color:#596973;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:#06a57e;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision{background:#689be7;color:#e9f1fd}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign{background-color:#dda722;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection{background-color:#28b994;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect{background-color:#e38888;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi{font-size:25px;cursor:pointer;color:#465573;margin:0 5px!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover{color:#2e62df!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button{display:flex;color:#5171a6;font-size:16px;height:45px;align-items:center;padding:0 10px;width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i{font-size:20px;padding:0;display:flex;align-items:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text{padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover{background-color:#e6ebf2}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi{font-size:25px;cursor:not-allowed;color:#465573;margin:0 5px!important;opacity:.7}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(even){background-color:#f4f6f8}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:#eef1f5}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:270px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:bold;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.cards-container .single-card .memo-title .action-wrap .action{margin:0 5px;cursor:pointer}.cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:bold}.cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.cards-container .single-card .memo-body{display:flex;padding:0 10px}.cards-container .single-card .memo-body .key{width:50%;font-size:12px;color:#9aa4ac}.cards-container .single-card .memo-body .value{width:50%;font-size:12px}.cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cards-container .single-card:hover{background-color:#f6f7f8}.cards-container .single-card:focus{background-color:#f6f7f8}.cards-container .selected-card{background-color:#f6f7f8}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.dynamic-cards-container{display:flex;flex-wrap:wrap;justify-content:center}.dynamic-cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:306px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.dynamic-cards-container .single-card .memo-title{font-size:14px;font-weight:bold;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.dynamic-cards-container .single-card .memo-title .action-wrap .action{cursor:pointer}.dynamic-cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.dynamic-cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:bold}.dynamic-cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.dynamic-cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.dynamic-cards-container .single-card .memo-body{display:flex;padding:0 10px}.dynamic-cards-container .single-card .memo-body .key{width:58%;font-size:12px;color:#9aa4ac;margin-bottom:4px}.dynamic-cards-container .single-card .memo-body .value{width:58%;font-size:12px}.dynamic-cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-cards-container .single-card .memo-body .draft{background-color:#596973;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:#06a57e;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;text-align:center}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:#fff;text-align:center}.dynamic-cards-container .single-card:hover{background-color:#f6f7f8}.dynamic-cards-container .single-card:focus{background-color:#f6f7f8}.dynamic-cards-container .selected-card{background-color:#f6f7f8}.overflowVisible{overflow:visible!important}.table-custom-view{display:var(--tcv-display, grid);grid-template-columns:var(--tcv-display-columns, repeat(var(--tcv-columns-count, auto-fit), minmax(350px, 1fr)));grid-gap:var(--tcv-gap, 1rem);gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell{flex-shrink:0}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{flex-shrink:0}.actions-wrapper i{font-size:var(--table-options-font-size, 2rem)!important}.ngx-datatable .datatable-row-left{position:absolute!important;right:0px!important}.ngx-datatable .datatable-row-left .datatable-body-cell{overflow:hidden;background:var(--table-options-body-cell-color, #fff)}.ngx-datatable .datatable-row-left .datatable-header-cell{overflow:hidden;background:var(--table-options-header-cell-color, #fff)}.rtl .ngx-datatable .datatable-row-left{left:0px!important;right:unset!important}\n"], components: [{ type: i4__namespace$2.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { 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"] }, { type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }, { type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: ["componentName", "row", "rowAction", "onClick"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$2.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { type: i4__namespace$2.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { type: i4__namespace$2.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  TableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableComponent, selector: "cts-table", inputs: { rows: "rows", columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", pageCount: "pageCount", totalRecords: "totalRecords", rowCursor: "rowCursor", fullWidth: "fullWidth", vocItemTranslationPrefix: "vocItemTranslationPrefix", higlightUnread: "higlightUnread", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu", messages: "messages", defaultColumnSize: "defaultColumnSize" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: i4$2.DatatableComponent, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n\t#tableContainer\r\n\tclass=\"iner-table-container\"\r\n\t[style]=\"'width:' + tableWidth\"\r\n\t*ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n\t<ngx-datatable\r\n\t\t[ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n\t\tclass=\"large-table\"\r\n\t\t[rows]=\"rows\"\r\n\t\t[summaryRow]=\"customFirstRow\"\r\n\t\t[columnMode]=\"'standard'\"\r\n\t\t[scrollbarH]=\"true\"\r\n\t\t[rowClass]=\"getRowClass\"\r\n\t\t[style.width.%]=\"100\"\r\n\t\t[externalSorting]=\"true\"\r\n\t\t(activate)=\"rowDetails($event)\"\r\n\t\t(select)=\"onSelect($event)\"\r\n\t\t(sort)=\"onSort($event)\"\r\n\t\t(window:resize)=\"assignTableColumns($event)\"\r\n\t\t[rowHeight]=\"isFixedOptionColumns ? '3rem' : 'auto'\"\r\n\t\t[selected]=\"selected\"\r\n\t\t[selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n\t\t[sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n\t\t[messages]=\"messages\"\r\n\t>\r\n\t\t<ngx-datatable-column\r\n\t\t\t*ngIf=\"multiSelectRows\"\r\n\t\t\t[width]=\"30\"\r\n\t\t\t[sortable]=\"false\"\r\n\t\t\t[prop]=\"''\"\r\n\t\t\t[canAutoResize]=\"false\"\r\n\t\t\t[draggable]=\"false\"\r\n\t\t\t[resizeable]=\"false\"\r\n\t\t>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-header-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-allRowsSelected=\"allRowsSelected\"\r\n\t\t\t\tlet-selectFn=\"selectFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-cell-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-isSelected=\"isSelected\"\r\n\t\t\t\tlet-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t</ngx-datatable-column>\r\n\t\t<!-- | translate -->\r\n\r\n\t\t<ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n\t\t\t<ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n\t\t\t<!-- [frozenRight]=\"column.type === 'actions'\" -->\r\n\t\t\t<ng-container *ngFor=\"let column of columns; let i = index\">\r\n\t\t\t\t<ng-container *permission=\"{ name: column.permission }\">\r\n\t\t\t\t\t<ngx-datatable-column\r\n\t\t\t\t\t\t*ngIf=\"column.display\"\r\n\t\t\t\t\t\t[sortable]=\"column.sortable\"\r\n\t\t\t\t\t\t[name]=\"prefix + column.name | translate\"\r\n\t\t\t\t\t\t[prop]=\"column.prop\"\r\n\t\t\t\t\t\t[resizeable]=\"false\"\r\n\t\t\t\t\t\t[draggable]=\"false\"\r\n\t\t\t\t\t\t[width]=\"column?.size || defaultColumnSize\"\r\n\t\t\t\t\t\t[frozenLeft]=\"isFixedOptionColumns && column.type === 'actions'\"\r\n\t\t\t\t\t\t[headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n\t\t\t\t\t\t[summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<ng-template let-row=\"row\" let-value=\"value\" let-index=\"index\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'text'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" *ngIf=\"!column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" matTooltip=\"{{ value ? value : '--' }}\" *ngIf=\"column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"value\" [dropdownId]=\"column.vocabularyId\">\r\n\t\t\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocCell'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ (value ? column.vocabularyId + '.' + value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocItem'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ vocItemTranslationPrefix + value | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'department'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"value\"> </cts-department-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'status'\">\r\n\t\t\t\t\t\t\t\t<div class=\"status-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"value {{ value }}\">\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"statusIcons && statusIcons !== {}\" class=\"status-icon {{ statusIcons[value] }}\"></span>\r\n\t\t\t\t\t\t\t\t\t\t{{ 'STATS.' + value | translate }}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'role'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ 'role.' + (value ? value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"!showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-pencil-square edit-icon\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'UPDATE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'edit')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-trash\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'delete' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-plus-square\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<span *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"action.type == 'button'; else showIcon\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.class }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"action.icon\" [class]=\"action.iconClass\" [svgIcon]=\"action.icon\"> </mat-icon>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t{{ action.title | translate }}\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<ng-template #showIcon>\r\n\t\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<button class=\"action-menu-trigger\" [matMenuTriggerFor]=\"menu\" [disabled]=\"disabledActions\">\r\n\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-three-dots-vertical\"></i>\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t<mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\">\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-pencil-square edit-icon\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'UPDATE' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-trash\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'delete' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-plus-square\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'USER_MANGMENT.addToDepartment' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<ng-conttainer *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ action.tooltip | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-conttainer>\r\n\t\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'date'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-date-viewer [withOutLabel]=\"true\" [value]=\"value\"></cts-date-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'custom'\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.template\" [column]=\"column\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'direction'\">\r\n\t\t\t\t\t\t\t\t<div (click)=\"iconSelected($event, row)\" class=\"status-wrapper {{ value }} {{ row.state }}\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['incoming'] : 'bi bi-box-arrow-down' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['outgoing'] : 'bi bi-box-arrow-up outgoing' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['internal'] : 'bi bi-box-arrow-right internal' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'InternalCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<ng-template #customRowTemplate let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<div class=\"w-full flex items-center justify-center overflow-visible\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.custom1stCellTemplate\" [column]=\"column\" [context]=\"row\">\r\n\t\t\t\t\t\t\t\t</cts-dynamic-column>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</ngx-datatable-column>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"responsiveView && tableMode === tableModes.list  \" (window:resize)=\"assignTableColumns($event)\">\r\n\t<div class=\"dynamic-cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'owner'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.owner]?.[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'status'\" class=\"value {{ row[property.value] }}\">\r\n\t\t\t\t\t\t\t{{ 'STATS.' + row[property.value] | translate }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'department'\">\r\n\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"row.properties[property.value]\"> </cts-department-viewer>\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t<div class=\"value\"  *ngIf=\"property.type === 'role'\">\r\n\t\t\t\t\t\t\t\t\t{{ 'role.' + (row[property.value] ? row[property.value] : '--') | translate }}\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t<div class=\"value\" *ngIf=\"property.type === 'VocCell'\">\r\n\t\t\t\t\t\t\t\t\t{{ (row[property.value] ? property.vocabularyId + '.' + row[property.value] : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t \r\n\t\t\t\t\t\t\t\t<div class=\"value\" *ngIf=\"property.type === 'VocItem'\">\r\n\t\t\t\t\t\t\t\t\t{{ vocItemTranslationPrefix + row[property.value] | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'vocabulary'\" class=\"value\">\r\n\t\t\t\t\t\t\t<cts-dropdown-viewer\r\n\t\t\t\t\t\t\t\t[withOutLabel]=\"true\"\r\n\t\t\t\t\t\t\t\t[value]=\"row.properties[property.value]\"\r\n\t\t\t\t\t\t\t\t[dropdownId]=\"property.vocabularyId\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t*ngIf=\"property.type === 'direction'\"\r\n\t\t\t\t\t\t\t(click)=\"iconSelected($event, row)\"\r\n\t\t\t\t\t\t\tclass=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-down\" *ngIf=\"row.type === 'IncomingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-up outgoing\" *ngIf=\"row.type === 'OutgoingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-right internal\" *ngIf=\"row.type === 'InternalCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n \r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"property.template\" [column]=\"property\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngFor=\"let row of rows\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'deleteMemo',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'deleteMemo')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'terminateDelegation',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'terminateDelegation')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'memoPublished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'MEMOS.PUBLISHED' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationFinished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.finished' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationActive',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.active' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row); cardFocused(i)\">\r\n\t\t\t\t<div class=\"key\" *ngIf=\"property.type !== 'default'\">\r\n\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"key\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value].fullName }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n\t\t\t\t\t\t{{ (row.properties[property.value] ? 'Yes' : 'No') | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"text\"\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n\t\t\t\t\t\t\t{{ item | translate }} {{ ', ' }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"tableColumns[0].template\" [column]=\"tableColumns[0]\" [context]=\"row\">\r\n\t\t\t\t</cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n\t<app-dynamic-component\r\n\t\tclass=\"table-custom-view__component\"\r\n\t\t*ngFor=\"let row of rows\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[row]=\"row\"\r\n\t\t[rowAction]=\"actionOnRow\"\r\n\t\t[onClick]=\"onRowSelected\"\r\n\t\t(click)=\"cardSelected(row)\"\r\n\t\t[class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n\t></app-dynamic-component>\r\n</div>\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}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{display:flex;justify-content:space-between;align-items:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:5px 5px 0;width:16px;height:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:\"\\f127\";display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:normal!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-up.sort-btn:before{content:\"\\f57b\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-down.sort-btn:before{content:\"\\f574\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;white-space:pre-wrap}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:flex}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .checkbox-input{z-index:99}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-scroll{width:100%!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{display:flex!important;min-height:50px!important;overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center .datatable-body-cell{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:50px;font-size:14px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row{min-width:100%!important;height:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center{display:flex;justify-content:space-between;padding:0 20px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell{min-height:50px;display:flex;align-items:center;overflow:hidden}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{width:100%;display:flex;justify-content:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input{z-index:99}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper{position:relative}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator{font-size:12px;position:absolute;top:-5px;right:-10px;color:#ebb98e}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value{display:flex;justify-content:center;align-items:center;border-radius:5px;width:100px;height:25px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon{margin-inline-end:5px;font-size:16px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft{background-color:#596973;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:#06a57e;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision{background:#689be7;color:#e9f1fd}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign{background-color:#dda722;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection{background-color:#28b994;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect{background-color:#e38888;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi{font-size:25px;cursor:pointer;color:#465573;margin:0 5px!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover{color:#2e62df!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button{display:flex;color:#5171a6;font-size:16px;height:45px;align-items:center;padding:0 10px;width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i{font-size:20px;padding:0;display:flex;align-items:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text{padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover{background-color:#e6ebf2}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi{font-size:25px;cursor:not-allowed;color:#465573;margin:0 5px!important;opacity:.7}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(even){background-color:#f4f6f8}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:#eef1f5}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:270px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:bold;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.cards-container .single-card .memo-title .action-wrap .action{margin:0 5px;cursor:pointer}.cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:bold}.cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.cards-container .single-card .memo-body{display:flex;padding:0 10px}.cards-container .single-card .memo-body .key{width:var(--table-text-key-width, 50%);font-size:12px;color:#9aa4ac}.cards-container .single-card .memo-body .value{width:var(--table-text-value-width, 50%);font-size:12px}.cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:var(--table-text-white-space, nowrap)}.cards-container .single-card:hover{background-color:#f6f7f8}.cards-container .single-card:focus{background-color:#f6f7f8}.cards-container .selected-card{background-color:#f6f7f8}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.dynamic-cards-container{display:flex;flex-wrap:wrap;justify-content:center}.dynamic-cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:306px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.dynamic-cards-container .single-card .memo-title{font-size:14px;font-weight:bold;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.dynamic-cards-container .single-card .memo-title .action-wrap .action{cursor:pointer}.dynamic-cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.dynamic-cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:bold}.dynamic-cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.dynamic-cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.dynamic-cards-container .single-card .memo-body{display:flex;padding:0 10px}.dynamic-cards-container .single-card .memo-body .key{width:58%;font-size:12px;color:#9aa4ac;margin-bottom:4px}.dynamic-cards-container .single-card .memo-body .value{width:58%;font-size:12px}.dynamic-cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-cards-container .single-card .memo-body .draft{background-color:#596973;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:#06a57e;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;text-align:center}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:#fff;text-align:center}.dynamic-cards-container .single-card:hover{background-color:#f6f7f8}.dynamic-cards-container .single-card:focus{background-color:#f6f7f8}.dynamic-cards-container .selected-card{background-color:#f6f7f8}.overflowVisible{overflow:visible!important}.table-custom-view{display:var(--tcv-display, grid);grid-template-columns:var(--tcv-display-columns, repeat(var(--tcv-columns-count, auto-fit), minmax(350px, 1fr)));grid-gap:var(--tcv-gap, 1rem);gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell{flex-shrink:0}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{flex-shrink:0}.actions-wrapper i{font-size:var(--table-options-font-size, 2rem)!important}.ngx-datatable .datatable-row-left{position:absolute!important;right:0px!important}.ngx-datatable .datatable-row-left .datatable-body-cell{overflow:hidden;background:var(--table-options-body-cell-color, #fff)}.ngx-datatable .datatable-row-left .datatable-header-cell{overflow:hidden;background:var(--table-options-header-cell-color, #fff)}.rtl .ngx-datatable .datatable-row-left{left:0px!important;right:unset!important}\n"], components: [{ type: i4__namespace$2.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { 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"] }, { type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }, { type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: ["componentName", "row", "rowAction", "onClick"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$2.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { type: i4__namespace$2.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { type: i4__namespace$2.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TableComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -16577,7 +16410,7 @@
       return DynamicTableComponent;
   }(DestroySubject));
   DynamicTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicTableComponent, deps: [{ token: AdapterService }, { token: CallApiService }, { token: NuxeoService }, { token: DynamicTableService }, { token: i0__namespace.ChangeDetectorRef }, { token: TableHooksService }], 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", higlightUnread: "higlightUnread", 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 }], usesInheritance: 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[higlightUnread]=\"higlightUnread\"\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", "higlightUnread", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { type: i6__namespace.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", higlightUnread: "higlightUnread", 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 }], usesInheritance: 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[higlightUnread]=\"higlightUnread\"\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));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", "higlightUnread", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { type: i6__namespace.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: [{
@@ -16914,7 +16747,7 @@
       return SortingListComponent;
   }(BaseComponent));
   SortingListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SortingListComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  SortingListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SortingListComponent, selector: "table-sorting-list", inputs: { sortList: "sortList" }, outputs: { sortChanged: "sortChanged" }, host: { classAttribute: "sort-list" }, usesInheritance: true, ngImport: i0__namespace, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"sort-list__button\">\r\n\t<mat-icon inline> sort </mat-icon>\r\n\t{{ 'TABLE.sortBy' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<span [dir]=\"direction\" class=\"sort-list__menu\">\r\n\t\t<button mat-menu-item *ngFor=\"let item of sortList\" (click)=\"changeSort(item)\" [class.selected]=\"item.selected\">\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".sort-list__menu{max-height:var(--sort-max-height, 250px);overflow-y:auto}.sort-list__menu .mat-menu-item{line-height:var(--sort-item-height, 36px);height:var(--sort-item-height, 36px)}\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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3__namespace$1.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.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  SortingListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SortingListComponent, selector: "table-sorting-list", inputs: { sortList: "sortList" }, outputs: { sortChanged: "sortChanged" }, host: { classAttribute: "sort-list" }, usesInheritance: true, ngImport: i0__namespace, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"sort-list__button\">\r\n\t<mat-icon inline> sort </mat-icon>\r\n\t{{ 'TABLE.sortBy' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<span [dir]=\"direction\" class=\"sort-list__menu\">\r\n\t\t<button mat-menu-item *ngFor=\"let item of sortList\" (click)=\"changeSort(item)\" [class.selected]=\"item.selected\">\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".sort-list__menu{max-height:var(--sort-max-height, 250px);overflow-y:auto}.sort-list__menu .mat-menu-item{line-height:var(--sort-item-height, 36px);height:var(--sort-item-height, 36px)}\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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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: SortingListComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -17032,7 +16865,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 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$1.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$1.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$3.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$3.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$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i7__namespace$3.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$3.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: [{
@@ -17078,7 +16911,7 @@
       return TableExportComponent;
   }());
   TableExportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TableExportComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  TableExportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableExportComponent, selector: "ndf-table-export", inputs: { config: "config" }, outputs: { onExport: "onExport" }, ngImport: i0__namespace, template: "<button\r\n\tmat-stroked-button\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t(click)=\"export()\"\r\n\t*ngIf=\"!config?.allowedTypes\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n\r\n<button\r\n\tmat-stroked-button\r\n\t*ngIf=\"config?.allowedTypes\"\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\t[attr.aria-label]=\"'TABLE.EXPORT.export' | translate\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let type of config?.allowedTypes\" (click)=\"export(type.value)\">\r\n\t\t<span>{{ type.label | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: [""], 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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace$1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  TableExportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableExportComponent, selector: "ndf-table-export", inputs: { config: "config" }, outputs: { onExport: "onExport" }, ngImport: i0__namespace, template: "<button\r\n\tmat-stroked-button\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t(click)=\"export()\"\r\n\t*ngIf=\"!config?.allowedTypes\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n\r\n<button\r\n\tmat-stroked-button\r\n\t*ngIf=\"config?.allowedTypes\"\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\t[attr.aria-label]=\"'TABLE.EXPORT.export' | translate\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let type of config?.allowedTypes\" (click)=\"export(type.value)\">\r\n\t\t<span>{{ type.label | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: [""], 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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TableExportComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -17467,7 +17300,7 @@
       return FilterOptionTextComponent;
   }());
   FilterOptionTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterOptionTextComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FilterOptionTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterOptionTextComponent, selector: "filter-option-text", inputs: { option: "option", showCount: "showCount", language: "language" }, host: { classAttribute: "fot" }, ngImport: i0__namespace, template: "<span\r\n  class=\"fot__label\"\r\n  [matTooltip]=\"option?.tooltip | optionTooltip : language\"\r\n>\r\n  {{\r\n    option?.labelTemplate\r\n      ? (option | evaluateLabel : language)\r\n      : (option | localizedLabel : language)\r\n  }}\r\n</span>\r\n\r\n<small class=\"fot__count\" *ngIf=\"showCount\">{{ option.count }}</small>\r\n", styles: [".fot{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:.3rem;gap:.3rem;margin-inline:var(--fot-margin-inline, 0);font-size:var(--fot-font-size, .8rem);line-height:var(--fot-line-height, 1.3);width:var(--fot-width, 100%)}.fot__label{color:var(--fot-label-color, currentColor);white-space:var(--fot-label-white-space, pre-wrap);word-break:var(--fot-label-word-break, break-word);max-width:var(--fot-label-width, 100%)}.fot__count{color:var(--fot-count-color, var(--secondary, currentColor));background:var(--fot-count-background, #eee);border-radius:var(--fot-count-radius, 9px);padding:var(--fot-count-padding, .2rem .3rem);min-width:var(--fot-count-min-width, 1.8rem);text-align:center}\n"], directives: [{ type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "optionTooltip": TooltipPipe, "evaluateLabel": EvaluatorLabelPipe, "localizedLabel": LocalizedLabelPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  FilterOptionTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterOptionTextComponent, selector: "filter-option-text", inputs: { option: "option", showCount: "showCount", language: "language" }, host: { classAttribute: "fot" }, ngImport: i0__namespace, template: "<span\r\n  class=\"fot__label\"\r\n  [matTooltip]=\"option?.tooltip | optionTooltip : language\"\r\n>\r\n  {{\r\n    option?.labelTemplate\r\n      ? (option | evaluateLabel : language)\r\n      : (option | localizedLabel : language)\r\n  }}\r\n</span>\r\n\r\n<small class=\"fot__count\" *ngIf=\"showCount\">{{ option.count }}</small>\r\n", styles: [".fot{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:.3rem;gap:.3rem;margin-inline:var(--fot-margin-inline, 0);font-size:var(--fot-font-size, .8rem);line-height:var(--fot-line-height, 1.3);width:var(--fot-width, 100%)}.fot__label{color:var(--fot-label-color, currentColor);white-space:var(--fot-label-white-space, pre-wrap);word-break:var(--fot-label-word-break, break-word);max-width:var(--fot-label-width, 100%)}.fot__count{color:var(--fot-count-color, var(--secondary, currentColor));background:var(--fot-count-background, #eee);border-radius:var(--fot-count-radius, 9px);padding:var(--fot-count-padding, .2rem .3rem);min-width:var(--fot-count-min-width, 1.8rem);text-align:center}\n"], directives: [{ type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "optionTooltip": TooltipPipe, "evaluateLabel": EvaluatorLabelPipe, "localizedLabel": LocalizedLabelPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterOptionTextComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -19080,7 +18913,7 @@
               useExisting: i0.forwardRef(function () { return NdfDatepickerComponent; }),
               multi: true
           }
-      ], usesInheritance: true, ngImport: i0__namespace, template: "<div *ngIf=\"calendarService.dateType$ | async as dateType\" class=\"ndf-datepicker ndf-datepicker--{{ dateType }}\">\r\n\t<label class=\"ndf-datepicker__label\" *ngIf=\"label\">{{ label }}</label>\r\n\t<div>\r\n\t\t<ndf-gregorian-datepicker\r\n\t\t\t*ngIf=\"calendarService.isGregorian\"\r\n\t\t\t[formControl]=\"dateControl\"\r\n\t\t\tclass=\"ndf-datepicker__input\"\r\n\t\t>\r\n\t\t\t<ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\r\n\t\t</ndf-gregorian-datepicker>\r\n\r\n\t\t<ndf-hijri-datepicker *ngIf=\"calendarService.isHijri\" class=\"ndf-datepicker__input\" [formControl]=\"dateControl\"\r\n\t\t\t><ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\r\n\t\t</ndf-hijri-datepicker>\r\n\t</div>\r\n\t<ng-template #actions>\r\n\t\t<mat-icon\r\n      class=\"datepicker-button\"\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleCalendar()\"\r\n\t\t\t[matTooltip]=\"(dateType == dateTypes.Hijri ? 'DATE_PICKER.gregorian' : 'DATE_PICKER.hijri') | translate\"\r\n\t\t>\r\n\t\t\t{{ dateType == dateTypes.Hijri ? 'light_mode' : ' dark_mode' }}\r\n\t\t</mat-icon>\r\n\t</ng-template>\r\n</div>\r\n", components: [{ type: NdfGregorianDatepickerComponent, selector: "ndf-gregorian-datepicker" }, { type: NdfHijriDatepickerComponent, selector: "ndf-hijri-datepicker" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+      ], usesInheritance: true, ngImport: i0__namespace, template: "<div *ngIf=\"calendarService.dateType$ | async as dateType\" class=\"ndf-datepicker ndf-datepicker--{{ dateType }}\">\r\n\t<label class=\"ndf-datepicker__label\" *ngIf=\"label\">{{ label }}</label>\r\n\t<div>\r\n\t\t<ndf-gregorian-datepicker\r\n\t\t\t*ngIf=\"calendarService.isGregorian\"\r\n\t\t\t[formControl]=\"dateControl\"\r\n\t\t\tclass=\"ndf-datepicker__input\"\r\n\t\t>\r\n\t\t\t<ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\r\n\t\t</ndf-gregorian-datepicker>\r\n\r\n\t\t<ndf-hijri-datepicker *ngIf=\"calendarService.isHijri\" class=\"ndf-datepicker__input\" [formControl]=\"dateControl\"\r\n\t\t\t><ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\r\n\t\t</ndf-hijri-datepicker>\r\n\t</div>\r\n\t<ng-template #actions>\r\n\t\t<mat-icon\r\n      class=\"datepicker-button\"\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleCalendar()\"\r\n\t\t\t[matTooltip]=\"(dateType == dateTypes.Hijri ? 'DATE_PICKER.gregorian' : 'DATE_PICKER.hijri') | translate\"\r\n\t\t>\r\n\t\t\t{{ dateType == dateTypes.Hijri ? 'light_mode' : ' dark_mode' }}\r\n\t\t</mat-icon>\r\n\t</ng-template>\r\n</div>\r\n", components: [{ type: NdfGregorianDatepickerComponent, selector: "ndf-gregorian-datepicker" }, { type: NdfHijriDatepickerComponent, selector: "ndf-hijri-datepicker" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfDatepickerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -19422,7 +19255,7 @@
       return FilterOptionsSortComponent;
   }());
   FilterOptionsSortComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterOptionsSortComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FilterOptionsSortComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterOptionsSortComponent, selector: "filter-options-sort", inputs: { options: "options", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0__namespace, template: "<mat-icon [matMenuTriggerFor]=\"menu\" role=\"button\" class=\"cursor-pointer\">sort</mat-icon>\r\n\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let option of options\" (click)=\"onSortChange(option)\">\r\n\t\t<span>{{ 'FILTERS.SORT.' + option.key | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-menu-item{height:40px;line-height:40px}:host{height:24px}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3__namespace$1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  FilterOptionsSortComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterOptionsSortComponent, selector: "filter-options-sort", inputs: { options: "options", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0__namespace, template: "<mat-icon [matMenuTriggerFor]=\"menu\" role=\"button\" class=\"cursor-pointer\">sort</mat-icon>\r\n\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let option of options\" (click)=\"onSortChange(option)\">\r\n\t\t<span>{{ 'FILTERS.SORT.' + option.key | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-menu-item{height:40px;line-height:40px}:host{height:24px}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FilterOptionsSortComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -21107,7 +20940,7 @@
               useExisting: i0.forwardRef(function () { return AggregationSwitchComponent; }),
               multi: true
           }
-      ], queries: [{ propertyName: "switchTemplate", first: true, predicate: SWITCH_TEMPLATE, descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"options$ | async as options\">\r\n\t<field-header *ngIf=\"fieldConfig.label && !renderOptions?.hideLabel\" class=\"filter-switch__label\">\r\n\t\t<span>\r\n\t\t\t{{ fieldConfig.label | translate }}\r\n\t\t</span>\r\n\t\t<filter-options-sort *ngIf=\"renderOptions?.sort\" (sortChange)=\"sortChange($event)\"></filter-options-sort>\r\n\t</field-header>\r\n\r\n\t<filter-search-input\r\n\t\tclass=\"filter-switch__filter\"\r\n\t\t*ngIf=\"renderOptions?.filter\"\r\n\t\t[(searchText)]=\"searchText\"\r\n\t></filter-search-input>\r\n\r\n\t<filter-autocomplete-input\r\n\t\t*ngIf=\"renderOptions?.search\"\r\n\t\t[fieldConfig]=\"fieldConfig\"\r\n\t\t[language]=\"language\"\r\n\t\t[direction]=\"direction\"\r\n\t\t(searchChange)=\"emitValue($event)\"\r\n\t></filter-autocomplete-input>\r\n\r\n\t<ng-container *ngIf=\"options | filter: searchText as filteredOptions\">\r\n\t\t<div class=\"filter-switch__wrapper\">\r\n\t\t\t<mat-slide-toggle\r\n\t\t\t\t*ngFor=\"let option of filteredOptions; index as index\"\r\n\t\t\t\tclass=\"filter-switch__item\"\r\n\t\t\t\t[checked]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t(change)=\"selectionModel.toggle(option.value)\"\r\n\t\t\t\t[class.checkedBox]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.unCheckedBox]=\"!selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.hidden]=\"renderOptions?.collapse && index + 1 > visibleItemsCount\"\r\n\t\t\t>\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"contentTemplate || defaultTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, config, aggregation }\"\r\n\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t<ng-template #defaultTemplate>\r\n\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t[option]=\"option\"\r\n\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</mat-slide-toggle>\r\n\t\t</div>\r\n\r\n\t\t<filter-empty-message *ngIf=\"!filteredOptions.length\" class=\"filter-switch__empty\"></filter-empty-message>\r\n\r\n\t\t<filter-collapse-control\r\n\t\t\tclass=\"filter-switch__collapse\"\r\n\t\t\t*ngIf=\"renderOptions?.collapse\"\r\n\t\t\t[minCount]=\"expandedCount\"\r\n\t\t\t[(visibleCount)]=\"visibleItemsCount\"\r\n\t\t\t[totalItems]=\"filteredOptions.length\"\r\n\t\t></filter-collapse-control>\r\n\t</ng-container>\r\n</ng-container>\r\n", styles: [".filter-switch{display:var(--fSwitch-display, block)}.filter-switch__wrapper{display:var(--fSwitch-wrapper-display, flex);flex-direction:var(--fSwitch-wrapper-direction, column)}.filter-switch__item{padding-inline-start:.5rem;margin-bottom:var(--filter-row-margin-bottom, .5rem)}.filter-switch__item.hidden{display:none}.filter-switch__item .mat-slide-toggle-content{flex-grow:1}\n"], components: [{ type: FieldHeaderComponent, selector: "field-header" }, { type: FilterOptionsSortComponent, selector: "filter-options-sort", inputs: ["options", "sort"], outputs: ["sortChange"] }, { type: FilterSearchInputComponent, selector: "filter-search-input", inputs: ["searchText"], outputs: ["searchTextChange"] }, { type: FilterAutocompleteInputComponent, selector: "filter-autocomplete-input", inputs: ["direction", "language", "fieldConfig"], outputs: ["searchChange"] }, { type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: FilterOptionTextComponent, selector: "filter-option-text", inputs: ["option", "showCount", "language"] }, { type: FilterEmptyMessageComponent, selector: "filter-empty-message", inputs: ["message"] }, { type: FilterCollapseControlComponent, selector: "filter-collapse-control", inputs: ["minCount", "totalItems", "visibleCount"], outputs: ["visibleCountChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "filter": FilterPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+      ], queries: [{ propertyName: "switchTemplate", first: true, predicate: SWITCH_TEMPLATE, descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"options$ | async as options\">\r\n\t<field-header *ngIf=\"fieldConfig.label && !renderOptions?.hideLabel\" class=\"filter-switch__label\">\r\n\t\t<span>\r\n\t\t\t{{ fieldConfig.label | translate }}\r\n\t\t</span>\r\n\t\t<filter-options-sort *ngIf=\"renderOptions?.sort\" (sortChange)=\"sortChange($event)\"></filter-options-sort>\r\n\t</field-header>\r\n\r\n\t<filter-search-input\r\n\t\tclass=\"filter-switch__filter\"\r\n\t\t*ngIf=\"renderOptions?.filter\"\r\n\t\t[(searchText)]=\"searchText\"\r\n\t></filter-search-input>\r\n\r\n\t<filter-autocomplete-input\r\n\t\t*ngIf=\"renderOptions?.search\"\r\n\t\t[fieldConfig]=\"fieldConfig\"\r\n\t\t[language]=\"language\"\r\n\t\t[direction]=\"direction\"\r\n\t\t(searchChange)=\"emitValue($event)\"\r\n\t></filter-autocomplete-input>\r\n\r\n\t<ng-container *ngIf=\"options | filter: searchText as filteredOptions\">\r\n\t\t<div class=\"filter-switch__wrapper\">\r\n\t\t\t<mat-slide-toggle\r\n\t\t\t\t*ngFor=\"let option of filteredOptions; index as index\"\r\n\t\t\t\tclass=\"filter-switch__item\"\r\n\t\t\t\t[checked]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t(change)=\"selectionModel.toggle(option.value)\"\r\n\t\t\t\t[class.checkedBox]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.unCheckedBox]=\"!selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.hidden]=\"renderOptions?.collapse && index + 1 > visibleItemsCount\"\r\n\t\t\t>\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"contentTemplate || defaultTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, config, aggregation }\"\r\n\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t<ng-template #defaultTemplate>\r\n\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t[option]=\"option\"\r\n\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</mat-slide-toggle>\r\n\t\t</div>\r\n\r\n\t\t<filter-empty-message *ngIf=\"!filteredOptions.length\" class=\"filter-switch__empty\"></filter-empty-message>\r\n\r\n\t\t<filter-collapse-control\r\n\t\t\tclass=\"filter-switch__collapse\"\r\n\t\t\t*ngIf=\"renderOptions?.collapse\"\r\n\t\t\t[minCount]=\"expandedCount\"\r\n\t\t\t[(visibleCount)]=\"visibleItemsCount\"\r\n\t\t\t[totalItems]=\"filteredOptions.length\"\r\n\t\t></filter-collapse-control>\r\n\t</ng-container>\r\n</ng-container>\r\n", styles: [".filter-switch{display:var(--fSwitch-display, block)}.filter-switch__wrapper{display:var(--fSwitch-wrapper-display, flex);flex-direction:var(--fSwitch-wrapper-direction, column)}.filter-switch__item{padding-inline-start:.5rem;margin-bottom:var(--filter-row-margin-bottom, .5rem)}.filter-switch__item.hidden{display:none}.filter-switch__item .mat-slide-toggle-content{flex-grow:1}\n"], components: [{ type: FieldHeaderComponent, selector: "field-header" }, { type: FilterOptionsSortComponent, selector: "filter-options-sort", inputs: ["options", "sort"], outputs: ["sortChange"] }, { type: FilterSearchInputComponent, selector: "filter-search-input", inputs: ["searchText"], outputs: ["searchTextChange"] }, { type: FilterAutocompleteInputComponent, selector: "filter-autocomplete-input", inputs: ["direction", "language", "fieldConfig"], outputs: ["searchChange"] }, { type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: FilterOptionTextComponent, selector: "filter-option-text", inputs: ["option", "showCount", "language"] }, { type: FilterEmptyMessageComponent, selector: "filter-empty-message", inputs: ["message"] }, { type: FilterCollapseControlComponent, selector: "filter-collapse-control", inputs: ["minCount", "totalItems", "visibleCount"], outputs: ["visibleCountChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "filter": FilterPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AggregationSwitchComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -21257,7 +21090,7 @@
               useExisting: i0.forwardRef(function () { return PredicateTextInputComponent; }),
               multi: true
           }
-      ], usesInheritance: true, ngImport: i0__namespace, template: "<input\r\n\t*ngIf=\"!maskOptions?.mask\"\r\n\ttype=\"text\"\r\n\tclass=\"text-field__input\"\r\n\t[formControl]=\"internalValue\"\r\n\t[title]=\"field?.label | translate\"\r\n\t[placeholder]=\"renderOptions?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n/>\r\n\r\n<input\r\n\t*ngIf=\"maskOptions?.mask\"\r\n\ttype=\"text\"\r\n\tclass=\"text-field__input\"\r\n\t[formControl]=\"internalValue\"\r\n\t[title]=\"field?.label | translate\"\r\n\t[placeholder]=\"renderOptions?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n\t[mask]=\"maskOptions?.mask\"\r\n\t[dropSpecialCharacters]=\"maskOptions?.dropSpecialCharacters ?? true\"\r\n\t[showMaskTyped]=\"maskOptions?.showMaskTyped ?? true\"\r\n\t[validation]=\"maskOptions?.validation\"\r\n\t[shownMaskExpression]=\"maskOptions?.shownMaskExpression\"\r\n\t[allowNegativeNumbers]=\"maskOptions?.allowNegativeNumbers\"\r\n\t[keepCharacterPositions]=\"maskOptions?.keepCharacterPositions\"\r\n\t[leadZero]=\"maskOptions?.leadZero\"\r\n\t[hiddenInput]=\"maskOptions?.hiddenInput\"\r\n\t[clearIfNotMatch]=\"maskOptions?.clearIfNotMatch\"\r\n\t[prefix]=\"maskOptions?.prefix ?? ''\"\r\n\t[suffix]=\"maskOptions?.suffix ?? ''\"\r\n/>\r\n\r\n<div *ngIf=\"renderOptions?.suffix\" class=\"text-field__suffix\">\r\n\t<mat-icon\r\n\t\t*ngIf=\"tooltip\"\r\n\t\t[matTooltip]=\"tooltip | hashTranslateAsync | async\"\r\n\t\tclass=\"text-field__suffix__item suffix-icon\"\r\n\t>\r\n\t\tinfo\r\n\t</mat-icon>\r\n\r\n\t<span *ngIf=\"renderOptions.suffix?.text\" class=\"text-field__suffix__item text- suffix-text\">\r\n\t\t{{ renderOptions.suffix.text | translate }}\r\n\t</span>\r\n\r\n\t<button *ngIf=\"selectConfig\" class=\"text-field__suffix__item suffix-button\" [matMenuTriggerFor]=\"menu\">\r\n\t\t<mat-icon> edit </mat-icon>\r\n\t</button>\r\n\r\n\t<button *ngIf=\"dialogConfig\" class=\"text-field__suffix__item suffix-button\" (click)=\"openModal()\">\r\n\t\t<mat-icon>help_outline</mat-icon>\r\n\t</button>\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"text-field__suffix__menu\">\r\n\t<span [dir]=\"direction\" class=\"text-field__suffix__menu__wrapper\" *ngIf=\"selectConfig?.items\">\r\n\t\t<button\r\n\t\t\tmat-menu-item\r\n\t\t\t*ngFor=\"let item of selectConfig.items\"\r\n\t\t\t(click)=\"changeOperator(item)\"\r\n\t\t\t[class.selected]=\"item.value === selectValue?.value\"\r\n\t\t>\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".text-field{--text-border-color: var(--tf-border-color, var(--main-hover));display:var(--tf-display, inline-grid);grid-template-columns:var(--tf-columns, 1fr auto);align-items:var(--tf-align-items, center);border:var(--tf-border, 1px solid);border-color:var(--text-border-color);border-radius:var(--tf-radius, 4px);color:var(--tf-background, var(--main-text));background-color:var(--tf-background, transparent);height:var(--tf-height, calc(1.5em + .75rem + 2px));width:var(--tf-width, 100%)}.text-field:focus-within{--text-border-color: var(--tf-focus-border-color, var(--main-color))}.text-field__input{display:block;padding:var(--tf-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(--tf-radius, 4px);border-end-start-radius:var(--tf-radius, 4px);min-width:0}.text-field__suffix{display:inline-flex;align-items:center;grid-gap:var(--tf-suffix-gap, 0 .2rem);gap:var(--tf-suffix-gap, 0 .2rem);border-inline-start:var(--tf-suffix-start-border, 1px solid var(--text-border-color))}.text-field__suffix__item{padding:var(--tf-item-padding, 0 .1rem);width:auto;height:100%;display:grid;place-items:center}.text-field__suffix__menu .mat-menu-item{line-height:var(--mi-height, 36px);height:var(--mi-height, 36px)}.text-field__suffix__menu .mat-menu-item.selected{background:var(--mi-sel-background, var(--main-color));color:var(--mi-sel-color, var(--main-hover))}.text-field__suffix__menu .mat-menu-item.selected:hover{--mi-sel-color: currentColor}.text-field__suffix__menu__wrapper{max-height:var(--tf-menu-height, 250px);overflow-y:auto;display:block}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], 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"] }, { type: i5__namespace$4.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace$1.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.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe, "async": i4__namespace$1.AsyncPipe, "hashTranslateAsync": HashTranslateAsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+      ], usesInheritance: true, ngImport: i0__namespace, template: "<input\r\n\t*ngIf=\"!maskOptions?.mask\"\r\n\ttype=\"text\"\r\n\tclass=\"text-field__input\"\r\n\t[formControl]=\"internalValue\"\r\n\t[title]=\"field?.label | translate\"\r\n\t[placeholder]=\"renderOptions?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n/>\r\n\r\n<input\r\n\t*ngIf=\"maskOptions?.mask\"\r\n\ttype=\"text\"\r\n\tclass=\"text-field__input\"\r\n\t[formControl]=\"internalValue\"\r\n\t[title]=\"field?.label | translate\"\r\n\t[placeholder]=\"renderOptions?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n\t[mask]=\"maskOptions?.mask\"\r\n\t[dropSpecialCharacters]=\"maskOptions?.dropSpecialCharacters ?? true\"\r\n\t[showMaskTyped]=\"maskOptions?.showMaskTyped ?? true\"\r\n\t[validation]=\"maskOptions?.validation\"\r\n\t[shownMaskExpression]=\"maskOptions?.shownMaskExpression\"\r\n\t[allowNegativeNumbers]=\"maskOptions?.allowNegativeNumbers\"\r\n\t[keepCharacterPositions]=\"maskOptions?.keepCharacterPositions\"\r\n\t[leadZero]=\"maskOptions?.leadZero\"\r\n\t[hiddenInput]=\"maskOptions?.hiddenInput\"\r\n\t[clearIfNotMatch]=\"maskOptions?.clearIfNotMatch\"\r\n\t[prefix]=\"maskOptions?.prefix ?? ''\"\r\n\t[suffix]=\"maskOptions?.suffix ?? ''\"\r\n/>\r\n\r\n<div *ngIf=\"renderOptions?.suffix\" class=\"text-field__suffix\">\r\n\t<mat-icon\r\n\t\t*ngIf=\"tooltip\"\r\n\t\t[matTooltip]=\"tooltip | hashTranslateAsync | async\"\r\n\t\tclass=\"text-field__suffix__item suffix-icon\"\r\n\t>\r\n\t\tinfo\r\n\t</mat-icon>\r\n\r\n\t<span *ngIf=\"renderOptions.suffix?.text\" class=\"text-field__suffix__item text- suffix-text\">\r\n\t\t{{ renderOptions.suffix.text | translate }}\r\n\t</span>\r\n\r\n\t<button *ngIf=\"selectConfig\" class=\"text-field__suffix__item suffix-button\" [matMenuTriggerFor]=\"menu\">\r\n\t\t<mat-icon> edit </mat-icon>\r\n\t</button>\r\n\r\n\t<button *ngIf=\"dialogConfig\" class=\"text-field__suffix__item suffix-button\" (click)=\"openModal()\">\r\n\t\t<mat-icon>help_outline</mat-icon>\r\n\t</button>\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"text-field__suffix__menu\">\r\n\t<span [dir]=\"direction\" class=\"text-field__suffix__menu__wrapper\" *ngIf=\"selectConfig?.items\">\r\n\t\t<button\r\n\t\t\tmat-menu-item\r\n\t\t\t*ngFor=\"let item of selectConfig.items\"\r\n\t\t\t(click)=\"changeOperator(item)\"\r\n\t\t\t[class.selected]=\"item.value === selectValue?.value\"\r\n\t\t>\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".text-field{--text-border-color: var(--tf-border-color, var(--main-hover));display:var(--tf-display, inline-grid);grid-template-columns:var(--tf-columns, 1fr auto);align-items:var(--tf-align-items, center);border:var(--tf-border, 1px solid);border-color:var(--text-border-color);border-radius:var(--tf-radius, 4px);color:var(--tf-background, var(--main-text));background-color:var(--tf-background, transparent);height:var(--tf-height, calc(1.5em + .75rem + 2px));width:var(--tf-width, 100%)}.text-field:focus-within{--text-border-color: var(--tf-focus-border-color, var(--main-color))}.text-field__input{display:block;padding:var(--tf-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(--tf-radius, 4px);border-end-start-radius:var(--tf-radius, 4px);min-width:0}.text-field__suffix{display:inline-flex;align-items:center;grid-gap:var(--tf-suffix-gap, 0 .2rem);gap:var(--tf-suffix-gap, 0 .2rem);border-inline-start:var(--tf-suffix-start-border, 1px solid var(--text-border-color))}.text-field__suffix__item{padding:var(--tf-item-padding, 0 .1rem);width:auto;height:100%;display:grid;place-items:center}.text-field__suffix__menu .mat-menu-item{line-height:var(--mi-height, 36px);height:var(--mi-height, 36px)}.text-field__suffix__menu .mat-menu-item.selected{background:var(--mi-sel-background, var(--main-color));color:var(--mi-sel-color, var(--main-hover))}.text-field__suffix__menu .mat-menu-item.selected:hover{--mi-sel-color: currentColor}.text-field__suffix__menu__wrapper{max-height:var(--tf-menu-height, 250px);overflow-y:auto;display:block}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], 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"] }, { type: i5__namespace$4.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe, "async": i4__namespace$1.AsyncPipe, "hashTranslateAsync": HashTranslateAsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PredicateTextInputComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -21969,7 +21802,7 @@
       return FiltersPanelComponent;
   }(BaseFiltersPanel));
   FiltersPanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FiltersPanelComponent, deps: [{ token: i1__namespace.TranslateService }, { token: NuxeoService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FiltersPanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FiltersPanelComponent, selector: "app-filters-panel", inputs: { aggregations: "aggregations", fields: "fields", activeQuery: "activeQuery" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div [formGroup]=\"formGroup\" class=\"filters-panel\" [dir]=\"direction$ | async\">\r\n\t<div class=\"reset-filter flex reset-container\">\r\n\t\t<button mat-stroked-button class=\"w-full\" (click)=\"resetFilters()\" [disabled]=\"!hasValues\">\r\n\t\t\t{{ 'BUTTONS.clearFilter' | translate }}\r\n\t\t</button>\r\n\t</div>\r\n\t<ng-container *ngFor=\"let field of fields | filterByRoles; trackBy: trackByFieldKey\">\r\n\t\t<ng-container *permission=\"{ name: field.config?.permission }\">\r\n\t\t\t<ng-container *ngIf=\"visibleFields[field.config.fieldKey]\">\r\n\t\t\t\t<app-predicate-field\r\n\t\t\t\t\t*ngIf=\"field.type == fieldTypes.predicate\"\r\n\t\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t></app-predicate-field>\r\n\t\t\t\t<app-aggregation-field\r\n\t\t\t\t\t*ngIf=\"field.type == fieldTypes.aggregation && !!aggregations\"\r\n\t\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t\t[aggregation]=\"aggregations[field.config.aggregation]\"\r\n\t\t\t\t\t[contentTemplate]=\"getContentTemplate(field.config.render.type)\"\r\n\t\t\t\t></app-aggregation-field>\r\n\t\t\t\t<app-custom-field\r\n\t\t\t\t\t*ngIf=\"field.type == fieldTypes.custom\"\r\n\t\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t\t></app-custom-field>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>\r\n", styles: [".filters-panel{display:var(--filters-panel-display, flex);flex-direction:var(--filters-panel-direction, column);grid-gap:var(--filters-panel-gap, .5rem);gap:var(--filters-panel-gap, .5rem);flex-wrap:var(--filters-panel-wrap, wrap);max-width:100%;box-sizing:border-box}.aggregation-field{padding-inline:var(--af-padding-inline, var(--ff-padding-inline, .5rem));padding-block:var(--af-padding-block, var(--ff-padding-block, 0));max-width:100%}.reset-container{padding:.5rem;position:sticky;top:-8px;z-index:4;background:var(--reset-filter-panel-bg, #fff)}.reset-container button.mat-button-base{background-color:var(--reset-filter-panel-btn-bg, transparent);border-color:var(--reset-filter-panel-btn-bg, #e2e8f0);color:var(--reset-filter-panel-btn-color, currentColor)}\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: PredicateFieldComponent, selector: "app-predicate-field" }, { type: AggregationFieldComponent, selector: "app-aggregation-field", inputs: ["aggregation", "contentTemplate"] }, { type: CustomFieldComponent, selector: "app-custom-field", inputs: ["aggregations"] }], directives: [{ type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "filterByRoles": FiltersByRolesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  FiltersPanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FiltersPanelComponent, selector: "app-filters-panel", inputs: { aggregations: "aggregations", fields: "fields", activeQuery: "activeQuery" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div [formGroup]=\"formGroup\" class=\"filters-panel\" [dir]=\"direction$ | async\">\r\n  <div class=\"filters-toolbar flex\">\r\n    <div class=\"reset-filter\">\r\n      <button\r\n        mat-stroked-button\r\n        class=\"w-full\"\r\n        (click)=\"resetFilters()\"\r\n        [disabled]=\"!hasValues\"\r\n      >\r\n        {{ \"BUTTONS.clearFilter\" | translate }}\r\n      </button>\r\n    </div>\r\n    <ng-content selector=\"[filters-actions]\"></ng-content>\r\n  </div>\r\n\r\n  <ng-container\r\n    *ngFor=\"let field of fields | filterByRoles; trackBy: trackByFieldKey\"\r\n  >\r\n    <ng-container *permission=\"{ name: field.config?.permission }\">\r\n      <ng-container *ngIf=\"visibleFields[field.config.fieldKey]\">\r\n        <app-predicate-field\r\n          *ngIf=\"field.type == fieldTypes.predicate\"\r\n          [fieldConfig]=\"field.config\"\r\n          [formControlName]=\"field.config.fieldKey\"\r\n        ></app-predicate-field>\r\n        <app-aggregation-field\r\n          *ngIf=\"field.type == fieldTypes.aggregation && !!aggregations\"\r\n          [formControlName]=\"field.config.fieldKey\"\r\n          [fieldConfig]=\"field.config\"\r\n          [aggregation]=\"aggregations[field.config.aggregation]\"\r\n          [contentTemplate]=\"getContentTemplate(field.config.render.type)\"\r\n        ></app-aggregation-field>\r\n        <app-custom-field\r\n          *ngIf=\"field.type == fieldTypes.custom\"\r\n          [fieldConfig]=\"field.config\"\r\n          [formControlName]=\"field.config.fieldKey\"\r\n          [aggregations]=\"aggregations\"\r\n        ></app-custom-field>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n", styles: [".filters-panel{display:var(--filters-panel-display, flex);flex-direction:var(--filters-panel-direction, column);grid-gap:var(--filters-panel-gap, .5rem);gap:var(--filters-panel-gap, .5rem);flex-wrap:var(--filters-panel-wrap, wrap);max-width:100%;box-sizing:border-box}.aggregation-field{padding-inline:var(--af-padding-inline, var(--ff-padding-inline, .5rem));padding-block:var(--af-padding-block, var(--ff-padding-block, 0));max-width:100%}.filters-toolbar{padding:.5rem;position:sticky;top:-8px;z-index:4;background:var(--reset-filter-panel-bg, #fff);grid-gap:.5rem;gap:.5rem}.filters-toolbar .reset-filter{flex-grow:1}.filters-toolbar button.mat-button-base{background-color:var(--reset-filter-panel-btn-bg, transparent);border-color:var(--reset-filter-panel-btn-bg, #e2e8f0);color:var(--reset-filter-panel-btn-color, currentColor)}\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: PredicateFieldComponent, selector: "app-predicate-field" }, { type: AggregationFieldComponent, selector: "app-aggregation-field", inputs: ["aggregation", "contentTemplate"] }, { type: CustomFieldComponent, selector: "app-custom-field", inputs: ["aggregations"] }], directives: [{ type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "filterByRoles": FiltersByRolesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FiltersPanelComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -22047,7 +21880,7 @@
       return ActiveUserSwitchComponent;
   }(BaseCustomField));
   ActiveUserSwitchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActiveUserSwitchComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  ActiveUserSwitchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActiveUserSwitchComponent, selector: "active-user-switch", usesInheritance: true, ngImport: i0__namespace, template: "<mat-slide-toggle\r\n\tclass=\"filter-switch__item\"\r\n\t[checked]=\"isUserSelected\"\r\n\t(change)=\"toggle($event)\"\r\n\t[class.checkedBox]=\"isUserSelected\"\r\n\t[class.unCheckedBox]=\"!isUserSelected\"\r\n>\r\n\t{{ renderOptions?.text || field?.label | translate }}\r\n</mat-slide-toggle>\r\n", styles: [""], components: [{ type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  ActiveUserSwitchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActiveUserSwitchComponent, selector: "active-user-switch", usesInheritance: true, ngImport: i0__namespace, template: "<mat-slide-toggle\r\n\tclass=\"filter-switch__item\"\r\n\t[checked]=\"isUserSelected\"\r\n\t(change)=\"toggle($event)\"\r\n\t[class.checkedBox]=\"isUserSelected\"\r\n\t[class.unCheckedBox]=\"!isUserSelected\"\r\n>\r\n\t{{ renderOptions?.text || field?.label | translate }}\r\n</mat-slide-toggle>\r\n", styles: [""], components: [{ type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ActiveUserSwitchComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -22578,7 +22411,7 @@
       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=\"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 });
+  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, 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%);max-width:100%;box-sizing:border-box;min-width:0}.global-search:focus-within{--text-border-color: var(--gs-focus-border-color, var(--main-color))}.global-search__container{position:relative;display:flex;min-width:0;overflow:hidden}.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;width:100%;box-sizing:border-box}.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: [{
@@ -22807,7 +22640,7 @@
       return EditorButtonComponent;
   }());
   EditorButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorButtonComponent, deps: [{ token: 'environment' }, { token: i1__namespace$5.Router }, { token: PROJECT_BASE_HREF }, { token: AppConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EditorButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorButtonComponent, selector: "app-editor-button", inputs: { type: "type", key: "key" }, usesOnChanges: true, ngImport: i0__namespace, template: "\n\t\t<ng-container *ngIf=\"isEnabled\">\n\t\t\t<button\n\t\t\t\tmat-stroked-button\n\t\t\t\t[matTooltip]=\"'JSON_EDITOR.navigateToEditor' | translate\"\n\t\t\t\t(click)=\"navigate()\"\n\t\t\t\t*permission=\"{ name: typeConfig?.permission }\"\n\t\t\t>\n\t\t\t\t<mat-icon>edit</mat-icon>\n\t\t\t</button>\n\t\t</ng-container>\n\t", isInline: true, components: [{ type: i1__namespace$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  EditorButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorButtonComponent, selector: "app-editor-button", inputs: { type: "type", key: "key" }, usesOnChanges: true, ngImport: i0__namespace, template: "\n\t\t<ng-container *ngIf=\"isEnabled\">\n\t\t\t<button\n\t\t\t\tmat-stroked-button\n\t\t\t\t[matTooltip]=\"'JSON_EDITOR.navigateToEditor' | translate\"\n\t\t\t\t(click)=\"navigate()\"\n\t\t\t\t*permission=\"{ name: typeConfig?.permission }\"\n\t\t\t>\n\t\t\t\t<mat-icon>edit</mat-icon>\n\t\t\t</button>\n\t\t</ng-container>\n\t", isInline: true, components: [{ type: i1__namespace$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorButtonComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -22875,12 +22708,19 @@
               }] } });
 
   var _NdfTableComponent_instances, _NdfTableComponent_initDisplayedKeys;
+  var SCREEN_SIZE = {
+      xs: 'xs',
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg',
+      xl: 'xl',
+  };
   var NdfTableComponent = /** @class */ (function (_super) {
       __extends(NdfTableComponent, _super);
       /**
        *
        */
-      function NdfTableComponent(_filtersMapper, _dynamicTableService, _translateService, _ngTableService, _toastrService, _userPreferencesService, _ndfTableConfigurationService, _tableHooksService, _dialog) {
+      function NdfTableComponent(_filtersMapper, _dynamicTableService, _translateService, _ngTableService, _toastrService, _userPreferencesService, _ndfTableConfigurationService, _tableHooksService, _dialog, _breakpointObserver) {
           var _this = _super.call(this) || this;
           _this._filtersMapper = _filtersMapper;
           _this._dynamicTableService = _dynamicTableService;
@@ -22891,6 +22731,7 @@
           _this._ndfTableConfigurationService = _ndfTableConfigurationService;
           _this._tableHooksService = _tableHooksService;
           _this._dialog = _dialog;
+          _this._breakpointObserver = _breakpointObserver;
           _NdfTableComponent_instances.add(_this);
           _this._aggregationsSub = new rxjs.BehaviorSubject(null);
           _this._displayedColumnsSub = new rxjs.BehaviorSubject([]);
@@ -22943,6 +22784,16 @@
               pageSize: 10,
               length: 0,
           };
+          _this.screenSizes = SCREEN_SIZE;
+          _this.currentScreenSize = 'Unknown';
+          _this.breakpointDisplayNames = new Map([
+              ['(max-width: 767.98px)', SCREEN_SIZE.xs],
+              [i9.Breakpoints.XSmall, SCREEN_SIZE.xs],
+              [i9.Breakpoints.Small, SCREEN_SIZE.sm],
+              [i9.Breakpoints.Medium, SCREEN_SIZE.md],
+              [i9.Breakpoints.Large, SCREEN_SIZE.lg],
+              [i9.Breakpoints.XLarge, SCREEN_SIZE.xl],
+          ]);
           _this.editorType = NDF_EDITOR_TYPE.TABLES;
           _this.togglePanel = function () {
               _this.isPanelOpened = !_this.isPanelOpened;
@@ -23097,7 +22948,27 @@
           enumerable: false,
           configurable: true
       });
+      NdfTableComponent.prototype.getContext = function () {
+          return {
+              $implicit: this.tableConfig,
+              panelOpened: this.isPanelOpened,
+              togglePanel: this.togglePanel,
+              openModal: this.openSearchModal,
+              search: this.onTextSearch,
+              clear: this.onClearSearch,
+          };
+      };
       NdfTableComponent.prototype.ngOnInit = function () {
+          var _this = this;
+          this._breakpointObserver
+              .observe(__spreadArray([], __read(this.breakpointDisplayNames.keys())))
+              .pipe(operators.takeUntil(this.destroy$))
+              .subscribe(function (result) {
+              var _a;
+              var activeQuery = Object.keys(result.breakpoints).find(function (query) { return result.breakpoints[query]; });
+              _this.currentScreenSize =
+                  (_a = _this.breakpointDisplayNames.get(activeQuery !== null && activeQuery !== void 0 ? activeQuery : '')) !== null && _a !== void 0 ? _a : 'Unknown';
+          });
       };
       NdfTableComponent.prototype.ngOnChanges = function (changes) {
           var _a, _b;
@@ -23330,15 +23201,19 @@
   }(DestroySubject));
   _NdfTableComponent_instances = new WeakSet(), _NdfTableComponent_initDisplayedKeys = function _NdfTableComponent_initDisplayedKeys() {
       var _a;
-      var displayedKeys = (_a = this._userPreferencesService.get(this.tableConfig.key)) === null || _a === void 0 ? void 0 : _a.split(',');
+      var displayedKeys = (_a = this._userPreferencesService
+          .get(this.tableConfig.key)) === null || _a === void 0 ? void 0 : _a.split(',');
       if (displayedKeys === null || displayedKeys === void 0 ? void 0 : displayedKeys.length) {
-          this.tableConfig.columns.filter(function (col) { return col.type != 'actions'; })
-              .forEach(function (col) { col.defaultVisible = displayedKeys.includes(col.prop); });
+          this.tableConfig.columns
+              .filter(function (col) { return col.type != 'actions'; })
+              .forEach(function (col) {
+              col.defaultVisible = displayedKeys.includes(col.prop);
+          });
           this._displayedColumnsSub.next(__spreadArray([], __read(this.tableConfig.columns.filter(function (col) { return col.defaultVisible; }))));
       }
   };
-  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: UserPreferencesService }, { token: NdfTableConfigurationService }, { token: TableHooksService }, { token: i1__namespace$4.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", 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 && !!filtersConfig.fields?.length\"\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", "higlightUnread", "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: i6__namespace.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", "higlightUnread", "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 } });
+  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: UserPreferencesService }, { token: NdfTableConfigurationService }, { token: TableHooksService }, { token: i1__namespace$4.MatDialog }, { token: i9__namespace.BreakpointObserver }], 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", 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 ndf-table--size-{{ currentScreenSize }}\"\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    >\r\n      <div filters-actions class=\"panel-toolbar-area\">\r\n        <button (click)=\"togglePanel()\">\r\n          <mat-icon> close</mat-icon>\r\n        </button>\r\n      </div>\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]=\"getContext()\"\r\n        ></ng-container>\r\n\r\n        <ng-template #defaultActionTemplate>\r\n          <button\r\n            mat-stroked-button\r\n            *ngIf=\"isPanelToggleAvailable && !!filtersConfig.fields?.length\"\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 && currentScreenSize !== screenSizes.xs\"\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 && currentScreenSize !== screenSizes.xs\"\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]=\"getContext()\"\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]=\"tableConfig?.cardColumns || []\"\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]=\"tableConfig?.cardColumns || []\"\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) - 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-toolbar-area{display:var(--panel-toolbar-area-display, none)}.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:var(--ndf-table-panel-index, 10)}.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;flex-shrink:0}.ndf-table__table{flex-grow:1;display:flex;flex-direction:column}.ndf-table__table.no-data{--table-div-height: auto}.ndf-table--size-xs{--panel-toolbar-area-display: block}.ndf-table--size-xs.panel-opened{--ndf-tbl-content-pis: 0}.ndf-table--size-xs .columns-toggler,.ndf-table--size-xs .mode-toggler{display:none}.loading-data{position:absolute;inset:0;display:grid;place-items:center;background:var(--loading-data-background, rgba(255, 255, 255, .2));backdrop-filter:var(--loading-data-backdrop-filter, blur(3px))}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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", "higlightUnread", "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: i6__namespace.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", "higlightUnread", "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: [{
@@ -23350,7 +23225,7 @@
                           '[dir]': 'direction',
                       },
                   }]
-          }], ctorParameters: function () { return [{ type: FiltersMapperService }, { type: DynamicTableService }, { type: i1__namespace.TranslateService }, { type: NdfTableService }, { type: CustomToastrService }, { type: UserPreferencesService }, { type: NdfTableConfigurationService }, { type: TableHooksService }, { type: i1__namespace$4.MatDialog }]; }, propDecorators: { rows: [{
+          }], ctorParameters: function () { return [{ type: FiltersMapperService }, { type: DynamicTableService }, { type: i1__namespace.TranslateService }, { type: NdfTableService }, { type: CustomToastrService }, { type: UserPreferencesService }, { type: NdfTableConfigurationService }, { type: TableHooksService }, { type: i1__namespace$4.MatDialog }, { type: i9__namespace.BreakpointObserver }]; }, propDecorators: { rows: [{
                   type: i0.Input
               }], totalRecords: [{
                   type: i0.Input
@@ -23887,7 +23762,7 @@
       };
       return DynamicSearchComponent;
   }());
-  DynamicSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicSearchComponent, deps: [{ token: i1__namespace$5.ActivatedRoute }, { token: i1__namespace$5.Router }, { token: EvaluatorsService }, { token: NuxeoService }, { token: GlobalAdminService }, { token: 'environment' }, { token: i5__namespace$5.BreakpointObserver }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  DynamicSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicSearchComponent, deps: [{ token: i1__namespace$5.ActivatedRoute }, { token: i1__namespace$5.Router }, { token: EvaluatorsService }, { token: NuxeoService }, { token: GlobalAdminService }, { token: 'environment' }, { token: i9__namespace.BreakpointObserver }], target: i0__namespace.ɵɵFactoryTarget.Component });
   DynamicSearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicSearchComponent, selector: "cts-dynamic-search", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", sortingBy: "sortingBy", fullTextParamName: "fullTextParamName", filter: "filter", higlightUnread: "higlightUnread", suggesterApi: "suggesterApi", onRowSelected: "onRowSelected", sortingArray: "sortingArray", customResponsiveStyle: "customResponsiveStyle", openCloseFilterFromOutside: "openCloseFilterFromOutside", theme: "theme" }, outputs: { actionOnRow: "actionOnRow" }, viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: ["dynamicTable"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!customResponsiveStyle\">\r\n  <div class=\"search-toolbar d-md-flex d-xl-none mx-3\">\r\n    <button (click)=\"onOpenFilter()\" class=\"my-button\">\r\n      <span> {{ \"FILTER\" | translate }}</span>\r\n      <i class=\"bi bi-filter\" *ngIf=\"!openFilter\"></i>\r\n      <i class=\"bi bi-x\" *ngIf=\"openFilter\"></i>\r\n    </button>\r\n    <div *ngIf=\"openFilter\">\r\n      <i class=\"bi bi-caret-up-fill arrow-up\"></i>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"customResponsiveStyle\">\r\n  <div class=\"customStyle -mt-12 px-8 flex flex-col\"\r\n    [ngClass]=\"{'bg-accent-200': theme === 'dgda','bg-accent-100': theme === 'ksreleif' || theme === 'comptechco'}\"\r\n    [@collapse]=\"!openFilter\">\r\n    <!-- <form\r\n        [formGroup]=\"searchForm\"\r\n        class=\"search-form\"\r\n        (ngSubmit)=\"submitForm()\"\r\n      >\r\n        <input\r\n          class=\"search-input\"\r\n          type=\"text\"\r\n          formControlName=\"text\"\r\n          [placeholder]=\"'search.search' | translate\"\r\n        />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form> -->\r\n    <div class=\"flex gap-x-18 flex-row mt-5 pb-3 overflow-x-auto\">\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <ng-container *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter [aggregation]=\"aggregation\" [entityType]=\"entityType\" [filters]=\"aggregation.buckets\"\r\n                [id]=\"aggregation.id\" [selections]=\"aggregation.selection\" [title]=\"aggregation.field\"\r\n                [prefix]=\"'search'\" [department]=\"\r\n                    aggregation.field === 'corr:to' ||\r\n                    aggregation.field === 'corr:from'\r\n                  \" [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n                [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\" (onFilterSelected)=\"FilterSelected($event)\">\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<div class=\"row wrapper\">\r\n  <div class=\"wrapper-overlay\" *ngIf=\"loading\"></div>\r\n\r\n  <ng-container *ngIf=\"!customResponsiveStyle\">\r\n    <div class=\"popup-filter px-3 d-flex d-xl-none\" *ngIf=\"openFilter\">\r\n      <form [formGroup]=\"searchForm\" class=\"search-form\" (ngSubmit)=\"submitForm()\">\r\n        <input class=\"search-input\" type=\"text\" formControlName=\"text\" [matAutocomplete]=\"matAutocomplete1\"\r\n          [placeholder]=\"'search.search' | translate\" />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form>\r\n      <form [formGroup]=\"dateForm\" class=\"date-form\">\r\n        <filter-date-range class=\"filter-date-list__range\" [formControl]=\"dateForm.controls.date\"></filter-date-range>\r\n      </form>\r\n      <mat-autocomplete class=\"\r\n         auto-complete-iner-wrapper\r\n          auto-complete-wrapper\r\n      \" [disableRipple]=\"true\" #matAutocomplete1=\"matAutocomplete\">\r\n        <mat-option class=\"no-text\" *ngIf=\"resultSets && !resultSets.length\">\r\n          {{'no_result_found' | translate}}\r\n        </mat-option>\r\n        <ng-container *ngFor=\"let resultSet of resultSets\">\r\n          <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n            <span class=\"option-iner-text\">{{ resultSet.label }}</span>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-autocomplete>\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <div *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter [aggregation]=\"aggregation\" [entityType]=\"entityType\" [filters]=\"aggregation.buckets\"\r\n                [id]=\"aggregation.id\" [selections]=\"aggregation.selection\" [title]=\"aggregation.field\"\r\n                [prefix]=\"'search'\" [department]=\"\r\n                aggregation.field === 'corr:to' ||\r\n                aggregation.field === 'corr:from'\r\n              \" [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n                [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\" (onFilterSelected)=\"FilterSelected($event)\">\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"col-xl-3 search-sideMenu d-none d-xl-block\">\r\n    <form [formGroup]=\"searchForm\" class=\"search-form\" (ngSubmit)=\"submitForm()\">\r\n      <input class=\"search-input\" type=\"text\" formControlName=\"text\" [matAutocomplete]=\"matAutocomplete2\"\r\n        [placeholder]=\"'search.search' | translate\" />\r\n      <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n    </form>\r\n    <form [formGroup]=\"dateForm\" class=\"date-form\">\r\n      <filter-date-range class=\"filter-date-list__range\" [formControl]=\"dateForm.controls.date\"></filter-date-range>\r\n    </form>\r\n    <mat-autocomplete class=\"\r\n       auto-complete-iner-wrapper\r\n        auto-complete-wrapper\r\n    \" [disableRipple]=\"true\" #matAutocomplete2=\"matAutocomplete\">\r\n      <mat-option class=\"no-text\" *ngIf=\"resultSets && !resultSets.length\">\r\n        {{'no_result_found' | translate}}\r\n      </mat-option>\r\n      <ng-container *ngFor=\"let resultSet of resultSets\">\r\n        <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n          <span class=\"option-iner-text\">{{ resultSet.label }}</span>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n    <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n      <div *ngFor=\"let aggregation of aggregations\">\r\n        <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n          <cts-dynamic-filter [aggregation]=\"aggregation\" [entityType]=\"entityType\" [filters]=\"aggregation.buckets\"\r\n            [id]=\"aggregation.id\" [selections]=\"aggregation.selection\" [title]=\"aggregation.field\" [prefix]=\"'search'\"\r\n            [department]=\"\r\n              aggregation.field === 'corr:to' ||\r\n              aggregation.field === 'corr:from'\r\n            \" [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n            [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n            [config]=\"aggregation.config ? aggregation.config : {}\" (onFilterSelected)=\"FilterSelected($event)\">\r\n          </cts-dynamic-filter>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"col-12 col-xl-9\">\r\n    <app-card>\r\n      <div class=\"title\">\r\n        <h3>\r\n          {{ \"search.header\" | translate }}\r\n        </h3>\r\n      </div>\r\n      <div class=\"body\">\r\n        <div *ngIf=\"aggregations\" class=\"table-toolbar\">\r\n          <div class=\"result-count\">\r\n            <span>\r\n              {{\r\n              \"search.\" + \"resultsNumber\"\r\n              | translate: { value: totalRecords ? totalRecords : 0 }\r\n              }}\r\n            </span>\r\n          </div>\r\n          <div>\r\n            <form class=\"d-flex justify-between\" [formGroup]=\"searchForm\" (ngSubmit)=\"submitForm()\">\r\n              <div *ngIf=\"useToggleFilters && !customResponsiveStyle\"></div>\r\n              <div *ngIf=\"customResponsiveStyle\">\r\n                <div class=\"search-form custom-responsive-search\">\r\n                  <input class=\"search-input\" type=\"text\" formControlName=\"text\" [matAutocomplete]=\"matAutocomplete\"\r\n                    [placeholder]=\"'search.search' | translate\" />\r\n                  <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n                </div>\r\n                <mat-autocomplete class=\"\r\n                   auto-complete-iner-wrapper\r\n                    auto-complete-wrapper\r\n                \" [disableRipple]=\"true\" #matAutocomplete=\"matAutocomplete\">\r\n                  <mat-option class=\"no-text\" *ngIf=\"resultSets && !resultSets.length\">\r\n                    {{no_result_found | translate}}\r\n                  </mat-option>\r\n                  <ng-container *ngFor=\"let resultSet of resultSets\">\r\n                    <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n                      <span class=\"option-iner-text\">{{ resultSet.label }}</span>\r\n                    </mat-option>\r\n                  </ng-container>\r\n                </mat-autocomplete>\r\n              </div>\r\n              <div class=\"d-flex\" *ngIf=\"useToggleFilters\">\r\n                <cts-dynamic-form-slide-toggleitem class=\"mx-2 small-font\" [label]=\"'search.PERSONAL_FILES'\"\r\n                  (onToggle)=\"submitForm()\" formControlName=\"personalFiles\">\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem class=\"mx-2 small-font\" [label]=\"'search.DEP_FILES'\"\r\n                  formControlName=\"depFiles\" (onToggle)=\"submitForm()\">\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem class=\"mx-2 small-font\" [label]=\"'search.WORKSPACE_FILES'\"\r\n                  formControlName=\"workSpaceFiles\" (onToggle)=\"submitForm()\">\r\n                </cts-dynamic-form-slide-toggleitem>\r\n              </div>\r\n            </form>\r\n          </div>\r\n        </div>\r\n        <cts-dynamic-table #dynamicTable [pageSize]=\"pageSize\" [columns]=\"columns\"\r\n          [responsiveColumns]=\"responsiveColumns\" [pageProvider]=\"pageProvider\" [quickFilter]=\"filter\"\r\n          [entityType]=\"entityType\" [fields]=\"fields\" [queryParam]=\"queryParams\" [skipAggregation]=\"'never'\"\r\n          [higlightUnread]=\"higlightUnread\" [headers]=\"headers\" [prefix]=\"prefix\" [sortingBy]=\"sortingBy\"\r\n          [isSearchPage]=\"true\" (onRowSelected)=\"onRowSelected($event)\" (actionOnRow)=\"performAction($event)\"\r\n          (onGettingData)=\"getTableData($event)\"></cts-dynamic-table>\r\n      </div>\r\n    </app-card>\r\n  </div>\r\n\r\n  <ng-template #progressSpinner>\r\n    <div class=\"progress-spinner\">\r\n      <mat-spinner color=\"warn\" [diameter]=\"25\"></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #noAggregations>\r\n    <div class=\"progress-spinner\">\r\n      {{ \"search.noAggregations\" | translate }}\r\n    </div>\r\n  </ng-template>\r\n</div>", 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}.result-count{color:#8f98aa;font-size:14px}.search-sideMenu{background-color:#fff;padding-top:22px;padding-bottom:22px;border-radius:5px}.auto-complete-iner-wrapper{max-height:350px;border-radius:4px}.auto-complete-iner-wrapper .no-text{font-size:14px;color:#465573}.auto-complete-iner-wrapper .mat-option{text-align:start;color:#465573;font-weight:bold;font-size:14px}.auto-complete-iner-wrapper .mat-option .mat-option-text{text-align:flex-start}.search-form{display:flex;color:#6a768e;width:100%}.search-form .search-input{width:100%;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.search-form .search-input::-webkit-input-placeholder{font-size:14px}.search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.search-form .search-icon{background:#465573;color:#fff;width:12%;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}.small-font{font-size:14px}.custom-responsive-search{width:300px!important;margin:0 35px}.search-toolbar{position:relative;display:flex;justify-content:flex-end;margin-bottom:16px}.search-toolbar .my-button{width:90px}.search-toolbar .arrow-up{position:absolute;top:26px;right:28px;font-size:25px;color:#8f98aab3}.wrapper{position:relative}.wrapper .popup-filter{flex-direction:column;position:absolute;right:0;z-index:9999;max-height:70vh;max-width:400px;background-color:#fff;overflow:scroll;box-shadow:0 1px 10px 2px #00000054;top:-4px;border-radius:5px}.wrapper .popup-filter .search-form{margin-top:10px!important}.wrapper .popup-filter .search-input{width:100%!important}.wrapper .search-container{background-color:#fff;border-radius:5px;border:0px;padding:16px;height:max-content}.wrapper .search-container .table-toolbar{display:flex;align-items:center;margin-bottom:8px;justify-content:space-between}.wrapper .wrapper-overlay{position:absolute;top:0;bottom:0;right:0;left:0;z-index:9}.progress-spinner{margin-top:10px;margin-block-end:0;display:grid;place-items:center;width:100%}.rtl .popup-filter{left:0px;right:unset!important}.rtl .arrow-up{position:absolute;top:33px;left:28px;right:unset!important}@media (width: 1180px),(width: 820px){.customStyle cts-dynamic-filter .aggregation-container{width:176px!important}}.customStyle .search-form{display:flex;color:#6a768e;width:100%}.customStyle .search-form .search-input{width:288px;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.customStyle .search-form .search-input::-webkit-input-placeholder{font-size:14px}.customStyle .search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.customStyle .search-form .search-icon{background:#465573;color:#fff;width:40px;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}\n"], components: [{ type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: ["title", "filters", "selections", "id", "entityType", "prefix", "department", "componentType", "customPageProvider", "config", "aggregation"], outputs: ["onFilterSelected"] }, { type: FilterDateRangeComponent, selector: "filter-date-range" }, { type: i5__namespace$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2__namespace$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: CardComponent, selector: "app-card", inputs: ["noBody", "dark"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"], outputs: ["onToggle"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "higlightUnread", "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: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: i5__namespace$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i1__namespace.TranslatePipe }, animations: [
           animations.trigger('collapse', [
               animations.state('false', animations.style({ height: animations.AUTO_STYLE, visibility: animations.AUTO_STYLE })),
@@ -23916,7 +23791,7 @@
           return [{ type: i1__namespace$5.ActivatedRoute }, { type: i1__namespace$5.Router }, { type: EvaluatorsService }, { type: NuxeoService }, { type: GlobalAdminService }, { type: undefined, decorators: [{
                           type: i0.Inject,
                           args: ['environment']
-                      }] }, { type: i5__namespace$5.BreakpointObserver }];
+                      }] }, { type: i9__namespace.BreakpointObserver }];
       }, propDecorators: { dynamicTable: [{
                   type: i0.ViewChild,
                   args: ['dynamicTable']
@@ -24196,7 +24071,7 @@
           i5.NgSelectModule,
           SelectModule,
           i6$1.AutocompleteLibModule,
-          i5$5.LayoutModule,
+          i9.LayoutModule,
           i7$2.MatChipsModule,
           i3$1.MatMenuModule,
           i2$3.MatListModule,
@@ -24219,7 +24094,7 @@
               i5.NgSelectModule,
               SelectModule,
               i6$1.AutocompleteLibModule,
-              i5$5.LayoutModule,
+              i9.LayoutModule,
               i7$2.MatChipsModule,
               i3$1.MatMenuModule,
               i2$3.MatListModule,
@@ -24253,7 +24128,7 @@
                           i5.NgSelectModule,
                           SelectModule,
                           i6$1.AutocompleteLibModule,
-                          i5$5.LayoutModule,
+                          i9.LayoutModule,
                           i7$2.MatChipsModule,
                           i3$1.MatMenuModule,
                           i2$3.MatListModule,
@@ -24482,7 +24357,7 @@
       return CorrespondenceTagsComponent;
   }());
   CorrespondenceTagsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CorrespondenceTagsComponent, deps: [{ token: TagsApiService }, { token: NuxeoService }, { token: EvaluatorsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CorrespondenceTagsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: { alwaysShowRemoveBtn: "alwaysShowRemoveBtn", correspondence: "correspondence", customClass: "customClass", addCustomApiName: "addCustomApiName", deleteCustomApiName: "deleteCustomApiName", useParams: "useParams", accordionMode: "accordionMode", systemTags: "systemTags", accordionOpen: "accordionOpen", title: "title", multiple: "multiple" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"{{customClass}}\">\r\n  <div class=\"tags-header\" [ngClass]=\"{'border-b': !open}\">\r\n    <div class=\"tag-header-title\">{{ title | translate }}</div>\r\n    <div class=\"flex gap-x-2\">\r\n      <ng-container *ngIf=\"!systemTags\">\r\n        <div\r\n      \r\n        class=\"allowEdit-tag-btn\"\r\n        *permission=\"{ name: 'addTag', entity: correspondence, user: nuxeoService.nuxeoClient.user }\"\r\n        (click)=\"removable = !removable\"\r\n        >\r\n          <span class=\"bi bi-plus-lg detailed-menu\" [matTooltip]=\"'Tags.toolTip' | translate\" *ngIf=\"!removable\"></span>\r\n          <span class=\"tags-close-icon bi bi-x detailed-menu\" [matTooltip]=\"'Tags.Close' | translate\" *ngIf=\"removable\"></span>\r\n        </div>\r\n      </ng-container>\r\n      <button (click)=\"toggleAccrdion()\" *ngIf=\"accordionMode\">\r\n        <mat-icon svgIcon=\"mat_solid:keyboard_arrow_up\" *ngIf=\"open\"></mat-icon>\r\n        <mat-icon svgIcon=\"mat_solid:keyboard_arrow_down\" *ngIf=\"!open\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tags-wrapper\" [@collapse]=\"!open\">\r\n    <ng-container *ngIf=\"removable && !systemTags\">\r\n      <div class=\"add-tag-container\">\r\n        <div class=\"tag-form-container\">\r\n          <form [formGroup]=\"tagsFrom\">\r\n            <cts-dynamic-form-select-tag\r\n             formControlName=\"tag\"\r\n             [multiple]=\"multiple\">\r\n            </cts-dynamic-form-select-tag>\r\n          </form>\r\n        </div>\r\n        <div class=\"add-tag-btn\">\r\n          <cts-button\r\n            [disabled]=\"this.tagsFrom.invalid\"\r\n            [loading]=\"loading\"\r\n            (onClick)=\"addTag()\"\r\n            class=\"detailed-menu\"\r\n            >{{ \"BUTTONS.ADD\" | translate }}</cts-button\r\n          >\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"tagsList.length > 0; else noEntry\">\r\n      <div class=\"tags-list-container row\">\r\n        <mat-chip-list *ngFor=\"let tag of tagsList\">\r\n          <mat-chip [removable]=\"removable || (canRemoveTag && alwaysShowRemoveBtn)\" (removed)=\"deleteTag(tag)\"\r\n            >{{ tag }} \r\n            <mat-icon matChipRemove class=\"cancelBtn\" *ngIf=\"(removable && !systemTags) || (canRemoveTag && alwaysShowRemoveBtn)\">cancel</mat-icon>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n</div>\r\n\r\n<ng-template #noEntry>\r\n  <cts-no-data [message]=\"'Tags.noEntry'\" [border]=\"false\"></cts-no-data>\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}.tags-header{display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:14px}.tags-header .allowEdit-tag-btn{cursor:pointer}.tags-header .allowEdit-tag-btn span{color:#1a96c6;font-size:18px}.tags-header .allowEdit-tag-btn .tags-close-icon{display:flex;font-size:30px}.tags-wrapper{padding:5px 16px;border:1px solid #d9dce2;display:flex;flex-direction:column;grid-row-gap:8px;row-gap:8px}.tags-wrapper .add-tag-container{display:flex;justify-content:space-between;grid-column-gap:6px;column-gap:6px}.tags-wrapper .add-tag-container .tag-form-container{width:80%}.tags-wrapper .add-tag-container .add-tag-btn{width:20%}.tags-wrapper .tags-list-container{display:flex;grid-column-gap:4px;column-gap:4px;grid-row-gap:8px;row-gap:8px;margin:0}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormSelectTagComponent, selector: "cts-dynamic-form-select-tag", inputs: ["label", "multiple", "selectedTagsCustomTemplate"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }, { type: i7__namespace$2.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border", "img"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i7__namespace$2.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "translate": i1__namespace.TranslatePipe }, animations: [
+  CorrespondenceTagsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: { alwaysShowRemoveBtn: "alwaysShowRemoveBtn", correspondence: "correspondence", customClass: "customClass", addCustomApiName: "addCustomApiName", deleteCustomApiName: "deleteCustomApiName", useParams: "useParams", accordionMode: "accordionMode", systemTags: "systemTags", accordionOpen: "accordionOpen", title: "title", multiple: "multiple" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"{{customClass}}\">\r\n  <div class=\"tags-header\" [ngClass]=\"{'border-b': !open}\">\r\n    <div class=\"tag-header-title\">{{ title | translate }}</div>\r\n    <div class=\"flex gap-x-2\">\r\n      <ng-container *ngIf=\"!systemTags\">\r\n        <div\r\n      \r\n        class=\"allowEdit-tag-btn\"\r\n        *permission=\"{ name: 'addTag', entity: correspondence, user: nuxeoService.nuxeoClient.user }\"\r\n        (click)=\"removable = !removable\"\r\n        >\r\n          <span class=\"bi bi-plus-lg detailed-menu\" [matTooltip]=\"'Tags.toolTip' | translate\" *ngIf=\"!removable\"></span>\r\n          <span class=\"tags-close-icon bi bi-x detailed-menu\" [matTooltip]=\"'Tags.Close' | translate\" *ngIf=\"removable\"></span>\r\n        </div>\r\n      </ng-container>\r\n      <button (click)=\"toggleAccrdion()\" *ngIf=\"accordionMode\">\r\n        <mat-icon svgIcon=\"mat_solid:keyboard_arrow_up\" *ngIf=\"open\"></mat-icon>\r\n        <mat-icon svgIcon=\"mat_solid:keyboard_arrow_down\" *ngIf=\"!open\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tags-wrapper\" [@collapse]=\"!open\">\r\n    <ng-container *ngIf=\"removable && !systemTags\">\r\n      <div class=\"add-tag-container\">\r\n        <div class=\"tag-form-container\">\r\n          <form [formGroup]=\"tagsFrom\">\r\n            <cts-dynamic-form-select-tag\r\n             formControlName=\"tag\"\r\n             [multiple]=\"multiple\">\r\n            </cts-dynamic-form-select-tag>\r\n          </form>\r\n        </div>\r\n        <div class=\"add-tag-btn\">\r\n          <cts-button\r\n            [disabled]=\"this.tagsFrom.invalid\"\r\n            [loading]=\"loading\"\r\n            (onClick)=\"addTag()\"\r\n            class=\"detailed-menu\"\r\n            >{{ \"BUTTONS.ADD\" | translate }}</cts-button\r\n          >\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"tagsList.length > 0; else noEntry\">\r\n      <div class=\"tags-list-container row\">\r\n        <mat-chip-list *ngFor=\"let tag of tagsList\">\r\n          <mat-chip [removable]=\"removable || (canRemoveTag && alwaysShowRemoveBtn)\" (removed)=\"deleteTag(tag)\"\r\n            >{{ tag }} \r\n            <mat-icon matChipRemove class=\"cancelBtn\" *ngIf=\"(removable && !systemTags) || (canRemoveTag && alwaysShowRemoveBtn)\">cancel</mat-icon>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n</div>\r\n\r\n<ng-template #noEntry>\r\n  <cts-no-data [message]=\"'Tags.noEntry'\" [border]=\"false\"></cts-no-data>\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}.tags-header{display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:14px}.tags-header .allowEdit-tag-btn{cursor:pointer}.tags-header .allowEdit-tag-btn span{color:#1a96c6;font-size:18px}.tags-header .allowEdit-tag-btn .tags-close-icon{display:flex;font-size:30px}.tags-wrapper{padding:5px 16px;border:1px solid #d9dce2;display:flex;flex-direction:column;grid-row-gap:8px;row-gap:8px}.tags-wrapper .add-tag-container{display:flex;justify-content:space-between;grid-column-gap:6px;column-gap:6px}.tags-wrapper .add-tag-container .tag-form-container{width:80%}.tags-wrapper .add-tag-container .add-tag-btn{width:20%}.tags-wrapper .tags-list-container{display:flex;grid-column-gap:4px;column-gap:4px;grid-row-gap:8px;row-gap:8px;margin:0}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormSelectTagComponent, selector: "cts-dynamic-form-select-tag", inputs: ["label", "multiple", "selectedTagsCustomTemplate"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }, { type: i7__namespace$2.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border", "img"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i7__namespace$2.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "translate": i1__namespace.TranslatePipe }, animations: [
           animations.trigger('collapse', [
               animations.state('false', animations.style({ height: animations.AUTO_STYLE, visibility: animations.AUTO_STYLE })),
               animations.state('true', animations.style({ height: '0', visibility: 'hidden' })),
@@ -27633,7 +27508,7 @@
       return DynamicChartComponent;
   }());
   DynamicChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicChartComponent, deps: [{ token: i1__namespace.TranslateService }, { token: i0__namespace.ChangeDetectorRef }, { token: CallApiService }, { token: i1__namespace$5.Router }, { token: ChartDataService }, { token: TranslationService }, { token: DepartmentApiService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicChartComponent, selector: "cts-dynamic-chart", inputs: { prefix: "prefix", chartType: "chartType", randomColors: "randomColors", pageProvider: "pageProvider", headers: "headers", observable: "observable", aggregations: "aggregations", quickFilters: "quickFilters", systemCurrentLifeCycleState: "systemCurrentLifeCycleState", range: "range", label: "label", selectedRange: "selectedRange", tenantId: "tenantId", colors: "colors", randomColor: "randomColor", fetchedKey: "fetchedKey", pageProviderTwo: "pageProviderTwo", quickFilterTwo: "quickFilterTwo", quickFilterThree: "quickFilterThree", combinedData: "combinedData", statusOne: "statusOne", statusTwo: "statusTwo", statusThree: "statusThree", min: "min", max: "max", width: "width", height: "height", card: "card", cardTitle: "cardTitle", inputChartData: "inputChartData", asigneeDepartments: "asigneeDepartments", noFetchedKey: "noFetchedKey", isInternalActive: "isInternalActive" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["revenueLineChart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"card-continer\" *ngIf=\"card; else test\">\r\n  <div class=\"chart-card-header\">\r\n    <div class=\"chart-card-title\">{{ cardTitle | translate }}</div>\r\n    <button class=\"chart-card-button\" (click)=\"previewCorrespondences()\">\r\n      {{ 'report.Preview' | translate }}\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"isFetching\">\r\n    <cts-spinner></cts-spinner>\r\n  </ng-container>\r\n  <div class=\"stat chart-canvas\" [style.height.px]=\"height\">\r\n    <div [hidden]=\"data.data?.length == 0 || data.length == 0\">\r\n      <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n    </div>\r\n    <div class=\"no-stats\" *ngIf=\"data.data?.length == 0 || data.length == 0\">\r\n      <span>{{ 'STATS.noData' | translate }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #test>\r\n  <div class=\"stat\">\r\n    <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n  </div>\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}.no-stats{width:100%;height:100%;display:grid;place-items:center}.card-continer{background:#ffffff;border-radius:5px;width:100%;padding:16px 20px;box-shadow:0 1px 1px #00000017}.card-continer .chart-card-header{display:flex;justify-content:space-between;align-items:center}.card-continer .chart-card-header .chart-card-title{font-weight:500}.card-continer .chart-card-header .chart-card-button{all:unset;background:#3341551a;color:#465573;padding:6px 18px;border-radius:24px;font-size:16px;cursor:pointer}.card-continer .chart-card-header .chart-card-button:hover{background:#8f98aa;color:#fff}.chart-canvas{position:relative;width:100%}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  DynamicChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicChartComponent, selector: "cts-dynamic-chart", inputs: { prefix: "prefix", chartType: "chartType", randomColors: "randomColors", pageProvider: "pageProvider", headers: "headers", observable: "observable", aggregations: "aggregations", quickFilters: "quickFilters", systemCurrentLifeCycleState: "systemCurrentLifeCycleState", range: "range", label: "label", selectedRange: "selectedRange", tenantId: "tenantId", colors: "colors", randomColor: "randomColor", fetchedKey: "fetchedKey", pageProviderTwo: "pageProviderTwo", quickFilterTwo: "quickFilterTwo", quickFilterThree: "quickFilterThree", combinedData: "combinedData", statusOne: "statusOne", statusTwo: "statusTwo", statusThree: "statusThree", min: "min", max: "max", width: "width", height: "height", card: "card", cardTitle: "cardTitle", inputChartData: "inputChartData", asigneeDepartments: "asigneeDepartments", noFetchedKey: "noFetchedKey", isInternalActive: "isInternalActive" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["revenueLineChart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"card-continer\" *ngIf=\"card; else test\">\r\n  <div class=\"chart-card-header\">\r\n    <div class=\"chart-card-title\">{{ cardTitle | translate }}</div>\r\n    <button class=\"chart-card-button\" (click)=\"previewCorrespondences()\">\r\n      {{ 'report.Preview' | translate }}\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"isFetching\">\r\n    <cts-spinner></cts-spinner>\r\n  </ng-container>\r\n  <div class=\"stat chart-canvas\" [style.height.px]=\"height\">\r\n    <div [hidden]=\"data.data?.length == 0 || data.length == 0\">\r\n      <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n    </div>\r\n    <div class=\"no-stats\" *ngIf=\"data.data?.length == 0 || data.length == 0\">\r\n      <span>{{ 'STATS.noData' | translate }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #test>\r\n  <div class=\"stat\">\r\n    <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n  </div>\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}.no-stats{width:100%;height:100%;display:grid;place-items:center}.card-continer{background:#ffffff;border-radius:5px;width:100%;padding:16px 20px;box-shadow:0 1px 1px #00000017}.card-continer .chart-card-header .chart-card-title{font-weight:500}.card-continer .chart-card-header{display:flex;justify-content:space-between;align-items:center}.card-continer .chart-card-header .chart-card-button{all:unset;background:rgba(51,65,85,.1019607843);color:#465573;padding:6px 18px;border-radius:24px;font-size:16px;cursor:pointer}.card-continer .chart-card-header .chart-card-button:hover{background:#8f98aa;color:#fff}.chart-canvas{position:relative;width:100%}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicChartComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -29196,7 +29071,7 @@
       return AddToCollectionComponent;
   }(BaseComponent));
   AddToCollectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddToCollectionComponent, deps: [{ token: FileManagerService }, { token: CustomToastrService }, { token: NuxeoDialogService }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  AddToCollectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddToCollectionComponent, selector: "app-add-to-collection", inputs: { createOperation: "createOperation", addOperation: "addOperation", getCollectionPP: "getCollectionPP", memberInCollections: "memberInCollections", enableMemberInCollections: "enableMemberInCollections", visible: "visible", rtlEnabled: "rtlEnabled", selectedItems: "selectedItems" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: i4$4.DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #contentTemplate>\r\n  <form>\r\n    <dx-form\r\n      class=\"collection-form-wrapper\"\r\n      #createForm\r\n      [formData]=\"formData\"\r\n      [disabled]=\"loading\"\r\n    >\r\n      <dxi-item editorType=\"dxTextBox\">\r\n        <ng-select\r\n          [items]=\"items$ | async\"\r\n          bindLabel=\"displayLabel\"\r\n          [addTag]=\"true\"\r\n          addTagText=\"Add collection\"\r\n          [multiple]=\"false\"\r\n          [hideSelected]=\"true\"\r\n          [minTermLength]=\"0\"\r\n          [loading]=\"tagsLoading\"\r\n          typeToSearchText=\"search\"\r\n          [typeahead]=\"tagsInput$\"\r\n          [(ngModel)]=\"selectedTags\"\r\n          required\r\n          placeholder=\"{{ 'VOCABULARY.SELECT_ITEM' | translate }}\"\r\n          name=\"selectedItem\"\r\n          (change)=\"emitSelection($event)\"\r\n        >\r\n        </ng-select>\r\n      </dxi-item>\r\n    </dx-form>\r\n  </form>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n  <span\r\n    class=\"submission-button px-5\"\r\n    (click)=\"dialog.executeAction(onFormCollectionSubmit)\"\r\n  >\r\n    {{ \"FILE_MANAGER.ADD\" | translate }}\r\n  </span>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4__namespace$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5__namespace$6.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { 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: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
+  AddToCollectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddToCollectionComponent, selector: "app-add-to-collection", inputs: { createOperation: "createOperation", addOperation: "addOperation", getCollectionPP: "getCollectionPP", memberInCollections: "memberInCollections", enableMemberInCollections: "enableMemberInCollections", visible: "visible", rtlEnabled: "rtlEnabled", selectedItems: "selectedItems" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: i4$4.DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #contentTemplate>\r\n  <form>\r\n    <dx-form\r\n      class=\"collection-form-wrapper\"\r\n      #createForm\r\n      [formData]=\"formData\"\r\n      [disabled]=\"loading\"\r\n    >\r\n      <dxi-item editorType=\"dxTextBox\">\r\n        <ng-select\r\n          [items]=\"items$ | async\"\r\n          bindLabel=\"displayLabel\"\r\n          [addTag]=\"true\"\r\n          addTagText=\"Add collection\"\r\n          [multiple]=\"false\"\r\n          [hideSelected]=\"true\"\r\n          [minTermLength]=\"0\"\r\n          [loading]=\"tagsLoading\"\r\n          typeToSearchText=\"search\"\r\n          [typeahead]=\"tagsInput$\"\r\n          [(ngModel)]=\"selectedTags\"\r\n          required\r\n          placeholder=\"{{ 'VOCABULARY.SELECT_ITEM' | translate }}\"\r\n          name=\"selectedItem\"\r\n          (change)=\"emitSelection($event)\"\r\n        >\r\n        </ng-select>\r\n      </dxi-item>\r\n    </dx-form>\r\n  </form>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n  <span\r\n    class=\"submission-button px-5\"\r\n    (click)=\"dialog.executeAction(onFormCollectionSubmit)\"\r\n  >\r\n    {{ \"FILE_MANAGER.ADD\" | translate }}\r\n  </span>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4__namespace$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "isDirty", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5__namespace$5.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { 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: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddToCollectionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -29570,7 +29445,7 @@
       return ClipboardComponent;
   }());
   ClipboardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClipboardComponent, deps: [{ token: FileManagerService }, { token: UserService }, { token: CustomToastrService }, { token: UserPreferencesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ClipboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardItems: "clipboardItems", myCurrecntFolderData: "myCurrecntFolderData", preventedGroups: "preventedGroups", directory: "directory" }, outputs: { onClipboardClose: "onClipboardClose", onRefreshFolderTree: "onRefreshFolderTree" }, ngImport: i0__namespace, template: "<div class=\"clipboard-side-section relative\">\r\n\r\n    <div class=\"p-3 h-full\">\r\n        <div class=\"clipboard-header flex justify-between items-center border-b-2\">\r\n            <span class=\"flex text-gray-500 font-bold items-center\">\r\n                <span class=\"text-4xl bi bi-clipboard\"></span>\r\n                <span class=\"mx-2 text-xl\">{{'clipboard' | translate}}</span>\r\n            </span>\r\n            <mat-icon class=\"close-icon text-gray-500 cursor-pointer\" (click)=\"closeClipboard()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <!-- <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"clipboardLoading\">\r\n            {{ \"loading\" | translate }}\r\n        </div> -->\r\n        <div class=\"w-full h-px bg-gray-200 mb-3\" *ngIf=\"clipboardLoading\">\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n        <div class=\"clipboard-content flex flex-col justify-between items-between\">\r\n            <div class=\"h-full flex justify-center items-center text-gray-500\"\r\n                *ngIf=\"clipboardDocments.length === 0\">{{'no_clipboard_items' | translate}}</div>\r\n\r\n            <div class=\"px-2 h-5/6 overflow-y-auto\" *ngIf=\"clipboardDocments.length > 0\">\r\n                <div class=\"border-b-2\" *ngFor=\"let document of clipboardDocments\">\r\n                    <div class=\"py-1 w-82 flex  items-center justify-between\">\r\n                        <div class=\"flex items-center w-5/6\">\r\n                            <mat-checkbox [(ngModel)]=\"document.isSelected\" (change)=\"checking()\"> </mat-checkbox>\r\n                            <div class=\"flex w-full\">\r\n                                <!-- <title-with-icon class=\"w-1/6 -my-1.5\" [context]=\"document\"\r\n                                    [showTitle]=\"false\"></title-with-icon> -->\r\n                            <app-display-suitable-icon class=\"mx-1\" [data]=\"document\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                                <!--  -->\r\n                                <div *ngIf=\"document.isFile === 'File'\"\r\n                                    class=\"justify-center flex flex-col flex-1 flex-grow-0 w-5/6\">\r\n                                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                                        [title]=\"document.properties?.['file:content']?.['name']\"\r\n                                        [alt]=\"document.properties?.['file:content']?.['name']\">\r\n                                        {{document['title']}}\r\n                                    </div>\r\n                                    <div class=\"text-gray-500 text-sm text-nowrap\">\r\n                                        {{((document.properties?.['file:content']?.['length']) / (1024 *\r\n                                        1024)).toFixed(2) }}\r\n                                        MB\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"\r\n                                     d-flex\r\n                                     items-center\r\n                                     text-base text-gray-500\r\n                                     font-bold\r\n                                 \" *ngIf=\"document.isFile === 'Folder'\">\r\n                                    {{ document?.title }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <span [matTooltip]=\"'BUTTONS.REMOVE_CLIPBOARD' | translate\"\r\n                            class=\"cursor-pointer w-5 h-5 rounded-full border-2 flex justify-center items-center border-gray-500 \"\r\n                            (click)=\"deletefromClipboard(document)\">\r\n                            <span class=\"text-gray-500 bi bi-x text-lg flex items-center\"></span>\r\n                        </span>\r\n                    </div>\r\n                    <div class=\"text-md text-gray-500 text-center my-2\">\r\n                        <span *ngIf=\"document.canCopyToTarget && !document.canMoveToTarget\">{{'can_copy_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"!document.canCopyToTarget && document.canMoveToTarget\">{{'can_move_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"document.canCopyToTarget && document.canMoveToTarget\">{{'can_copy_and_move' |\r\n                            translate}}</span>\r\n                        <span\r\n                            *ngIf=\"!document.canCopyToTarget && !document.canMoveToTarget\">{{'can_not_copy_and_move'\r\n                            | translate}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"h-1/6 flex w-full justify-center items-center\">\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableCopy\"\r\n                    (click)=\"copyFromInsideClipboard()\">{{'BUTTONS.COPY' | translate}}</button>\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableMove\"\r\n                    (click)=\"moveFromInsideClipboard()\">{{'BUTTONS.MOVE' | translate}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"bg-transparent absolute top-0 bottom-0 left-0 right-0 \" *ngIf=\"clipboardLoading\">\r\n\r\n    </div>\r\n</div>", styles: [".clipboard-side-section{width:0px;overflow-x:hidden;height:91vh;background-color:#fff;overflow:hidden;border:1px solid lightgray;z-index:999;transition:.1s ease-in-out;border-bottom:none}.clipboard-side-section .clipboard-header{height:60px}.clipboard-side-section .clipboard-content{height:calc(100% - 60px)}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }], directives: [{ type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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 }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  ClipboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardItems: "clipboardItems", myCurrecntFolderData: "myCurrecntFolderData", preventedGroups: "preventedGroups", directory: "directory" }, outputs: { onClipboardClose: "onClipboardClose", onRefreshFolderTree: "onRefreshFolderTree" }, ngImport: i0__namespace, template: "<div class=\"clipboard-side-section relative\">\r\n\r\n    <div class=\"p-3 h-full\">\r\n        <div class=\"clipboard-header flex justify-between items-center border-b-2\">\r\n            <span class=\"flex text-gray-500 font-bold items-center\">\r\n                <span class=\"text-4xl bi bi-clipboard\"></span>\r\n                <span class=\"mx-2 text-xl\">{{'clipboard' | translate}}</span>\r\n            </span>\r\n            <mat-icon class=\"close-icon text-gray-500 cursor-pointer\" (click)=\"closeClipboard()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <!-- <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"clipboardLoading\">\r\n            {{ \"loading\" | translate }}\r\n        </div> -->\r\n        <div class=\"w-full h-px bg-gray-200 mb-3\" *ngIf=\"clipboardLoading\">\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n        <div class=\"clipboard-content flex flex-col justify-between items-between\">\r\n            <div class=\"h-full flex justify-center items-center text-gray-500\"\r\n                *ngIf=\"clipboardDocments.length === 0\">{{'no_clipboard_items' | translate}}</div>\r\n\r\n            <div class=\"px-2 h-5/6 overflow-y-auto\" *ngIf=\"clipboardDocments.length > 0\">\r\n                <div class=\"border-b-2\" *ngFor=\"let document of clipboardDocments\">\r\n                    <div class=\"py-1 w-82 flex  items-center justify-between\">\r\n                        <div class=\"flex items-center w-5/6\">\r\n                            <mat-checkbox [(ngModel)]=\"document.isSelected\" (change)=\"checking()\"> </mat-checkbox>\r\n                            <div class=\"flex w-full\">\r\n                                <!-- <title-with-icon class=\"w-1/6 -my-1.5\" [context]=\"document\"\r\n                                    [showTitle]=\"false\"></title-with-icon> -->\r\n                            <app-display-suitable-icon class=\"mx-1\" [data]=\"document\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                                <!--  -->\r\n                                <div *ngIf=\"document.isFile === 'File'\"\r\n                                    class=\"justify-center flex flex-col flex-1 flex-grow-0 w-5/6\">\r\n                                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                                        [title]=\"document.properties?.['file:content']?.['name']\"\r\n                                        [alt]=\"document.properties?.['file:content']?.['name']\">\r\n                                        {{document['title']}}\r\n                                    </div>\r\n                                    <div class=\"text-gray-500 text-sm text-nowrap\">\r\n                                        {{((document.properties?.['file:content']?.['length']) / (1024 *\r\n                                        1024)).toFixed(2) }}\r\n                                        MB\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"\r\n                                     d-flex\r\n                                     items-center\r\n                                     text-base text-gray-500\r\n                                     font-bold\r\n                                 \" *ngIf=\"document.isFile === 'Folder'\">\r\n                                    {{ document?.title }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <span [matTooltip]=\"'BUTTONS.REMOVE_CLIPBOARD' | translate\"\r\n                            class=\"cursor-pointer w-5 h-5 rounded-full border-2 flex justify-center items-center border-gray-500 \"\r\n                            (click)=\"deletefromClipboard(document)\">\r\n                            <span class=\"text-gray-500 bi bi-x text-lg flex items-center\"></span>\r\n                        </span>\r\n                    </div>\r\n                    <div class=\"text-md text-gray-500 text-center my-2\">\r\n                        <span *ngIf=\"document.canCopyToTarget && !document.canMoveToTarget\">{{'can_copy_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"!document.canCopyToTarget && document.canMoveToTarget\">{{'can_move_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"document.canCopyToTarget && document.canMoveToTarget\">{{'can_copy_and_move' |\r\n                            translate}}</span>\r\n                        <span\r\n                            *ngIf=\"!document.canCopyToTarget && !document.canMoveToTarget\">{{'can_not_copy_and_move'\r\n                            | translate}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"h-1/6 flex w-full justify-center items-center\">\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableCopy\"\r\n                    (click)=\"copyFromInsideClipboard()\">{{'BUTTONS.COPY' | translate}}</button>\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableMove\"\r\n                    (click)=\"moveFromInsideClipboard()\">{{'BUTTONS.MOVE' | translate}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"bg-transparent absolute top-0 bottom-0 left-0 right-0 \" *ngIf=\"clipboardLoading\">\r\n\r\n    </div>\r\n</div>", styles: [".clipboard-side-section{width:0px;overflow-x:hidden;height:91vh;background-color:#fff;overflow:hidden;border:1px solid lightgray;z-index:999;transition:.1s ease-in-out;border-bottom:none}.clipboard-side-section .clipboard-header{height:60px}.clipboard-side-section .clipboard-content{height:calc(100% - 60px)}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }], directives: [{ type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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 }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ClipboardComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -29826,7 +29701,7 @@
       return CreateDirectoryComponent;
   }(BaseComponent));
   CreateDirectoryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreateDirectoryComponent, deps: [{ token: FileManagerService }, { token: CustomToastrService }, { token: NuxeoDialogService }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CreateDirectoryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateDirectoryComponent, selector: "app-create-directory", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItem: "selectedItem" }, outputs: { visibleChange: "visibleChange", refresh: "refresh" }, viewQueries: [{ propertyName: "form", first: true, predicate: i4$4.DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #contentTemplate>\r\n\t<div>\r\n\t\t<form>\r\n\t\t\t<dx-form\r\n\t\t\t\tclass=\"form-wrapper\"\r\n\t\t\t\t#form\r\n\t\t\t\t[formData]=\"formData\"\r\n\t\t\t\t[disabled]=\"loading\"\r\n\t\t\t>\r\n\t\t\t\t<dxi-item dataField=\"title\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label text=\"{{ 'CREATE.TITLE' | translate }}\"></dxo-label>\r\n\t\t\t\t\t<dxi-validation-rule\r\n\t\t\t\t\t\ttype=\"required\"\r\n\t\t\t\t\t\tmessage=\"Title is required\"\r\n\t\t\t\t\t></dxi-validation-rule>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t\t<dxi-item name=\"description\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label text=\"{{ 'CREATE.DESCRIPTION' | translate }}\"></dxo-label>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t</dx-form>\r\n\t\t</form>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<span\r\n\t\tclass=\"dx-button-text\"\r\n\t\t(click)=\"dialog.executeAction(onSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.CREATE' | translate }}\r\n\t</span>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4__namespace$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5__namespace$6.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i5__namespace$6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { type: i5__namespace$6.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  CreateDirectoryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateDirectoryComponent, selector: "app-create-directory", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItem: "selectedItem" }, outputs: { visibleChange: "visibleChange", refresh: "refresh" }, viewQueries: [{ propertyName: "form", first: true, predicate: i4$4.DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #contentTemplate>\r\n\t<div>\r\n\t\t<form>\r\n\t\t\t<dx-form\r\n\t\t\t\tclass=\"form-wrapper\"\r\n\t\t\t\t#form\r\n\t\t\t\t[formData]=\"formData\"\r\n\t\t\t\t[disabled]=\"loading\"\r\n\t\t\t>\r\n\t\t\t\t<dxi-item dataField=\"title\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label text=\"{{ 'CREATE.TITLE' | translate }}\"></dxo-label>\r\n\t\t\t\t\t<dxi-validation-rule\r\n\t\t\t\t\t\ttype=\"required\"\r\n\t\t\t\t\t\tmessage=\"Title is required\"\r\n\t\t\t\t\t></dxi-validation-rule>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t\t<dxi-item name=\"description\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label text=\"{{ 'CREATE.DESCRIPTION' | translate }}\"></dxo-label>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t</dx-form>\r\n\t\t</form>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<span\r\n\t\tclass=\"dx-button-text\"\r\n\t\t(click)=\"dialog.executeAction(onSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.CREATE' | translate }}\r\n\t</span>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4__namespace$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "isDirty", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5__namespace$5.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i5__namespace$5.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { type: i5__namespace$5.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreateDirectoryComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -30991,7 +30866,7 @@
       return AttachmentItemComponent;
   }());
   AttachmentItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AttachmentItemComponent, deps: [{ token: TranslationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  AttachmentItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AttachmentItemComponent, selector: "app-attachment-item", inputs: { item: "item", type: "type", showRemoveButton: "showRemoveButton", source: "source", personImageLink: "personImageLink" }, outputs: { onRemovingItem: "onRemovingItem" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"source != 'faceRecognition'\">\r\n    <div SetRtl class=\"p-2 w-72 h-15 relative border-2 flex items-center text-lg cursor-pointer hover:bg-primary-100\" \r\n    [ngClass]=\"{'border-gray-200': item.progress === undefined , \r\n    'border-primary-300': (item.progress === 'done' && item['generalValidationValid'] !== false) , \r\n    'border-red-500': (item.progress === 'error' || item['generalValidationValid'] === false) }\">\r\n        <mat-icon class=\"cursor-pointer  top-1  absolute text-gray-900 text-xl\" \r\n        [ngClass]=\"{'left-1' : isArabic , 'right-1' : !isArabic}\" (click)=\"removeItem()\" \r\n        *ngIf=\"showRemoveButton\">close</mat-icon>\r\n        <span class=\"my-icon-wrap\">\r\n            <app-display-suitable-icon [data]=\"item\" [dataType]=\"'file'\"></app-display-suitable-icon>\r\n        </span>\r\n        <div class=\"file-title mx-2 whitespace-nowrap overflow-hidden overflow-ellipsis text-lg\" matTooltip=\"{{item.batch.title ? item.batch.title : item.title}}\" *ngIf=\"type === 'batch'\">{{item.batch.title ? item.batch.title : item.title}}</div>\r\n        <div class=\"file-title mx-2 whitespace-nowrap overflow-hidden overflow-ellipsis text-lg\" matTooltip=\"{{item.name}}\" *ngIf=\"type === 'file'\">{{item.name}}</div>\r\n        <div class=\"viewer-loader absolute bottom-0 w-11/12\">\r\n            <mat-progress-bar *ngIf=\"item.progress === 'inProgress'\" mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"source == 'faceRecognition'\">\r\n    <div class=\"w-52 h-52 relative border flex flex-col items-center cursor-pointer hover:bg-primary-100\" \r\n    [ngClass]=\"{'border-gray-200': item.progress === undefined, 'border-primary-300': item.progress === 'done', 'border-red-500': item.progress === 'error'}\">\r\n        \r\n        <div class=\"flex items-center justify-center opacity-70 cursor-pointer bg-accent-100 rounded-full top-1  absolute text-gray-900 text-xl\" \r\n        [ngClass]=\"{'left-1' : isArabic , 'right-1' : !isArabic}\" (click)=\"removeItem()\">\r\n            <mat-icon class=\"icon-size-5\">close</mat-icon>\r\n        </div>\r\n        <span class=\"h-3/4 w-full\">\r\n            <img [src]=\"personImageLink || './assets/images/Photos/loadingImg.png'\" class=\"w-full h-full\" alt=\"personPhoto\">\r\n        </span>\r\n        <div class=\"w-full h-1/4 overflow-hidden text-lg\" [ngClass]=\"{'shortTitle': item.name.length < 25,'longTitle': item.name.length > 25}\">{{item.name}}</div>\r\n        <div class=\"viewer-loader absolute bottom-0 w-full\">\r\n            <mat-progress-bar *ngIf=\"item.progress === 'inProgress'\" mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [".my-icon-wrap{width:40px;height:40px}.file-title{width:calc(100% - 60px)}.shortTitle{display:flex;align-items:center;justify-content:center;text-overflow:ellipsis}.longTitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }, { type: i4__namespace$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+  AttachmentItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AttachmentItemComponent, selector: "app-attachment-item", inputs: { item: "item", type: "type", showRemoveButton: "showRemoveButton", source: "source", personImageLink: "personImageLink" }, outputs: { onRemovingItem: "onRemovingItem" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"source != 'faceRecognition'\">\r\n    <div SetRtl class=\"p-2 w-72 h-15 relative border-2 flex items-center text-lg cursor-pointer hover:bg-primary-100\" \r\n    [ngClass]=\"{'border-gray-200': item.progress === undefined , \r\n    'border-primary-300': (item.progress === 'done' && item['generalValidationValid'] !== false) , \r\n    'border-red-500': (item.progress === 'error' || item['generalValidationValid'] === false) }\">\r\n        <mat-icon class=\"cursor-pointer  top-1  absolute text-gray-900 text-xl\" \r\n        [ngClass]=\"{'left-1' : isArabic , 'right-1' : !isArabic}\" (click)=\"removeItem()\" \r\n        *ngIf=\"showRemoveButton\">close</mat-icon>\r\n        <span class=\"my-icon-wrap\">\r\n            <app-display-suitable-icon [data]=\"item\" [dataType]=\"'file'\"></app-display-suitable-icon>\r\n        </span>\r\n        <div class=\"file-title mx-2 whitespace-nowrap overflow-hidden overflow-ellipsis text-lg\" matTooltip=\"{{item.batch.title ? item.batch.title : item.title}}\" *ngIf=\"type === 'batch'\">{{item.batch.title ? item.batch.title : item.title}}</div>\r\n        <div class=\"file-title mx-2 whitespace-nowrap overflow-hidden overflow-ellipsis text-lg\" matTooltip=\"{{item.name}}\" *ngIf=\"type === 'file'\">{{item.name}}</div>\r\n        <div class=\"viewer-loader absolute bottom-0 w-11/12\">\r\n            <mat-progress-bar *ngIf=\"item.progress === 'inProgress'\" mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"source == 'faceRecognition'\">\r\n    <div class=\"w-52 h-52 relative border flex flex-col items-center cursor-pointer hover:bg-primary-100\" \r\n    [ngClass]=\"{'border-gray-200': item.progress === undefined, 'border-primary-300': item.progress === 'done', 'border-red-500': item.progress === 'error'}\">\r\n        \r\n        <div class=\"flex items-center justify-center opacity-70 cursor-pointer bg-accent-100 rounded-full top-1  absolute text-gray-900 text-xl\" \r\n        [ngClass]=\"{'left-1' : isArabic , 'right-1' : !isArabic}\" (click)=\"removeItem()\">\r\n            <mat-icon class=\"icon-size-5\">close</mat-icon>\r\n        </div>\r\n        <span class=\"h-3/4 w-full\">\r\n            <img [src]=\"personImageLink || './assets/images/Photos/loadingImg.png'\" class=\"w-full h-full\" alt=\"personPhoto\">\r\n        </span>\r\n        <div class=\"w-full h-1/4 overflow-hidden text-lg\" [ngClass]=\"{'shortTitle': item.name.length < 25,'longTitle': item.name.length > 25}\">{{item.name}}</div>\r\n        <div class=\"viewer-loader absolute bottom-0 w-full\">\r\n            <mat-progress-bar *ngIf=\"item.progress === 'inProgress'\" mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [".my-icon-wrap{width:40px;height:40px}.file-title{width:calc(100% - 60px)}.shortTitle{display:flex;align-items:center;justify-content:center;text-overflow:ellipsis}.longTitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }, { type: i4__namespace$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AttachmentItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -31650,7 +31525,7 @@
       return CreateModalComponent;
   }(BaseDialogComponent));
   CreateModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreateModalComponent, deps: [{ token: i1$4.MAT_DIALOG_DATA }, { token: UploadManagmentService }, { token: DialogMangmentService }, { token: FileManagerService }, { token: CustomToastrService }, { token: i2__namespace$4.FormBuilder }, { token: AdapterService }, { token: FileManagerService }, { token: AppConfigService }, { token: DateHelperService }, { token: UserService }, { token: 'environment' }, { token: i0__namespace.Injector }, { token: DynamicFormService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CreateModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateModalComponent, selector: "app-create-modal", host: { listeners: { "document:keyup.enter": "KeyUpEvent($event)" } }, usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.createFile' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<div class=\"relative w-full h-full\">\r\n\t\t\t<div class=\"iner-wrapper\" [ngClass]=\"{ 'd-flex': addingProperties }\">\r\n\t\t\t\t<div\r\n\t\t\t\t\t*ngIf=\"addingProperties\"\r\n\t\t\t\t\tclass=\"properties-section p-3 overflow-x-hidden overflow-y-auto\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"\"\r\n\t\t\t\t\t\t*ngIf=\"selectedFile && source === 'fileManger' && showStaticForm\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div class=\"mb-5\">\r\n\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t{{ 'CREATE.FILE_TYPE' | translate }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"text-base text-gray-900\">\r\n\t\t\t\t\t\t\t\t{{ isArabic ? fileType.arabicText : fileType.englishText }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"file-fields mt-3\" SetRtl>\r\n\t\t\t\t\t\t\t<form [formGroup]=\"fileForm\">\r\n\t\t\t\t\t\t\t\t<!-- -----------------old static form ---------------------- -->\r\n\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.TITLE' | translate\r\n\t\t\t\t\t\t\t\t\t\t\t}}<span class=\"text-red-500\">*</span>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"title\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.TITLE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.DESCRIPTION' | translate }}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"description\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.DESCRIPTION' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<!-- ---------------------------------- -->\r\n\r\n\t\t\t\t\t\t\t\t<!------------------ new statis form  ---------------------------->\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"usingExtraFields\">\r\n\t\t\t\t\t\t\t\t\t<app-dynamic-fields-renderer\r\n\t\t\t\t\t\t\t\t\t\t[form]=\"fileForm\"\r\n\t\t\t\t\t\t\t\t\t\t[agencyNameFilter]=\"agencyNameFilter\"\r\n\t\t\t\t\t\t\t\t\t\t[countryNameFilter]=\"countryNameFilter\"\r\n\t\t\t\t\t\t\t\t\t></app-dynamic-fields-renderer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</form>\r\n\r\n\t\t\t\t\t\t\t<div class=\"dynamic-part\" *ngIf=\"showRenderer\">\r\n\t\t\t\t\t\t\t\t<app-dynamic-form\r\n\t\t\t\t\t\t\t\t\t[form]=\"selectedFile.dynamicForm\"\r\n\t\t\t\t\t\t\t\t\t[data]=\"temporaryDyanmicData\"\r\n\t\t\t\t\t\t\t\t\t(change)=\"ondynamicFormChange($event)\"\r\n\t\t\t\t\t\t\t\t></app-dynamic-form>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"w-full h-full p-3 flex justify-center items-center text-lg text-gray-900\"\r\n\t\t\t\t\t\t*ngIf=\"!selectedFile\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'CREATE.SELECT_TOSTART_ADDING' | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"attachment-tab-body overflow-hidden\"\r\n\t\t\t\t\t[ngClass]=\"{ 'attachment-iner-small-body': addingProperties }\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<app-attachments\r\n\t\t\t\t\t\t[multiple]=\"true\"\r\n\t\t\t\t\t\t(onSelectingItem)=\"selectFile($event)\"\r\n\t\t\t\t\t></app-attachments>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"w-full text-red-500 text-base text-start px-3\"\r\n\t\t\t\t*ngIf=\"!uploadMangmentService.GeneralFormValidation\"\r\n\t\t\t>\r\n\t\t\t\t{{ 'CREATE.FILL_REQUIRED_FIELD' | translate }}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\t(uploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length > 0) &&\r\n\t\t\t\t!addingProperties\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(startAddingProperties)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.ADD_PROPERTIES' | translate }}\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length +\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.allfiles.length >\r\n\t\t\t\t\t1\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(ApplyChangesToAll)\"\r\n\t\t\t[disabled]=\"!selectedFile || !selectedFile.staticFormValid\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\t'opacity-30 cursor-not-allowed':\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid,\r\n\t\t\t\t'cursor-pointer hover:text-white hover:bg-gray-900': !(\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid\r\n\t\t\t\t)\r\n\t\t\t}\"\r\n\t\t\tclass=\"submission-button mx-2\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.APPLY_TO_ALL' | translate }}\r\n\t\t</button>\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length === 0\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t(click)=\"dialog.executeAction(createDocument)\"\r\n\t\t\t\tclass=\"submission-button relative\"\r\n\t\t\t\t[disabled]=\"creating\"\r\n\t\t\t>\r\n\t\t\t\t<span *ngIf=\"!creating; else loader\">{{\r\n\t\t\t\t\t'BUTTONS.CREATE' | translate\r\n\t\t\t\t}}</span>\r\n\t\t\t</button>\r\n\t\t\t<ng-template #loader>\r\n\t\t\t\t<mat-spinner\r\n\t\t\t\t\t[value]=\"90\"\r\n\t\t\t\t\t[strokeWidth]=\"3\"\r\n\t\t\t\t\toverlay=\"true\"\r\n\t\t\t\t\t[diameter]=\"25\"\r\n\t\t\t\t\tcolor=\"warn\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-spinner>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length > 0\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(tryAgainCreateDocument)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.TRY_AGAIN' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<button\r\n\t\t\t[disabled]=\"!fileForm?.valid || disableCreateWhenFinishBtn\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(createWhenFinish)\"\r\n\t\t\tclass=\"submission-button w-44\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.CREATE_WHEN_FINSH' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\tclass=\"cancelation-button mx-2\"\r\n\t\t\t(click)=\"dialog.executeAction(minimizDialog)\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.numberOfUploadedFiles !== 0 ||\r\n\t\t\t\taddingProperties\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.MINIMIZED' | translate }}\r\n\t\t</button>\r\n\t\t<!-- <button class=\"cancelation-button\" (click)=\" dialog.executeAction(closeDialog)\">\r\n{{ 'BUTTONS.CANCEL' | translate }}\r\n</button> -->\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".dynamic-part{margin-left:-15px;margin-right:-15px}.iner-wrapper{height:calc(100% - 70px)}.iner-wrapper .properties-section{width:calc(100% - 270px);height:calc(100% - 15px)}.iner-wrapper .attachment-tab-body{height:calc(100% - -20px);overflow-y:auto;overflow-x:hidden}.iner-wrapper .attachment-iner-small-body{width:350px}.rtl .actions-iner-wrapper{direction:ltr}.actions-iner-wrapper{direction:rtl}:host{height:100%;display:block}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: DynamicFieldsRendererComponent, selector: "app-dynamic-fields-renderer", inputs: ["form", "agencyNameFilter", "countryNameFilter", "orgNameFilter", "ngoNameFilter", "disableInitSecrecyLevel", "mode", "fields"], outputs: ["checkTextSpellCheckerField"] }, { type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["form", "data", "readOnly"], outputs: ["change"] }, { type: AttachmentsComponent, selector: "app-attachments", inputs: ["allowedTypes", "params", "path", "maxSize", "docParams", "multiple", "createDocument", "allowedMaxNumberOfFiles", "source"], outputs: ["uploadSuccess", "uploadError", "onSelectingItem", "itemRemoved"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  CreateModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateModalComponent, selector: "app-create-modal", host: { listeners: { "document:keyup.enter": "KeyUpEvent($event)" } }, usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.createFile' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<div class=\"relative w-full h-full\">\r\n\t\t\t<div class=\"iner-wrapper\" [ngClass]=\"{ 'd-flex': addingProperties }\">\r\n\t\t\t\t<div\r\n\t\t\t\t\t*ngIf=\"addingProperties\"\r\n\t\t\t\t\tclass=\"properties-section p-3 overflow-x-hidden overflow-y-auto\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"\"\r\n\t\t\t\t\t\t*ngIf=\"selectedFile && source === 'fileManger' && showStaticForm\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div class=\"mb-5\">\r\n\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t{{ 'CREATE.FILE_TYPE' | translate }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"text-base text-gray-900\">\r\n\t\t\t\t\t\t\t\t{{ isArabic ? fileType.arabicText : fileType.englishText }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"file-fields mt-3\" SetRtl>\r\n\t\t\t\t\t\t\t<form [formGroup]=\"fileForm\">\r\n\t\t\t\t\t\t\t\t<!-- -----------------old static form ---------------------- -->\r\n\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.TITLE' | translate\r\n\t\t\t\t\t\t\t\t\t\t\t}}<span class=\"text-red-500\">*</span>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"title\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.TITLE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.DESCRIPTION' | translate }}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"description\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.DESCRIPTION' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<!-- ---------------------------------- -->\r\n\r\n\t\t\t\t\t\t\t\t<!------------------ new statis form  ---------------------------->\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"usingExtraFields\">\r\n\t\t\t\t\t\t\t\t\t<app-dynamic-fields-renderer\r\n\t\t\t\t\t\t\t\t\t\t[form]=\"fileForm\"\r\n\t\t\t\t\t\t\t\t\t\t[agencyNameFilter]=\"agencyNameFilter\"\r\n\t\t\t\t\t\t\t\t\t\t[countryNameFilter]=\"countryNameFilter\"\r\n\t\t\t\t\t\t\t\t\t></app-dynamic-fields-renderer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</form>\r\n\r\n\t\t\t\t\t\t\t<div class=\"dynamic-part\" *ngIf=\"showRenderer\">\r\n\t\t\t\t\t\t\t\t<app-dynamic-form\r\n\t\t\t\t\t\t\t\t\t[form]=\"selectedFile.dynamicForm\"\r\n\t\t\t\t\t\t\t\t\t[data]=\"temporaryDyanmicData\"\r\n\t\t\t\t\t\t\t\t\t(change)=\"ondynamicFormChange($event)\"\r\n\t\t\t\t\t\t\t\t></app-dynamic-form>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"w-full h-full p-3 flex justify-center items-center text-lg text-gray-900\"\r\n\t\t\t\t\t\t*ngIf=\"!selectedFile\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'CREATE.SELECT_TOSTART_ADDING' | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"attachment-tab-body overflow-hidden\"\r\n\t\t\t\t\t[ngClass]=\"{ 'attachment-iner-small-body': addingProperties }\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<app-attachments\r\n\t\t\t\t\t\t[multiple]=\"true\"\r\n\t\t\t\t\t\t(onSelectingItem)=\"selectFile($event)\"\r\n\t\t\t\t\t></app-attachments>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"w-full text-red-500 text-base text-start px-3\"\r\n\t\t\t\t*ngIf=\"!uploadMangmentService.GeneralFormValidation\"\r\n\t\t\t>\r\n\t\t\t\t{{ 'CREATE.FILL_REQUIRED_FIELD' | translate }}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\t(uploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length > 0) &&\r\n\t\t\t\t!addingProperties\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(startAddingProperties)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.ADD_PROPERTIES' | translate }}\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length +\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.allfiles.length >\r\n\t\t\t\t\t1\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(ApplyChangesToAll)\"\r\n\t\t\t[disabled]=\"!selectedFile || !selectedFile.staticFormValid\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\t'opacity-30 cursor-not-allowed':\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid,\r\n\t\t\t\t'cursor-pointer hover:text-white hover:bg-gray-900': !(\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid\r\n\t\t\t\t)\r\n\t\t\t}\"\r\n\t\t\tclass=\"submission-button mx-2\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.APPLY_TO_ALL' | translate }}\r\n\t\t</button>\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length === 0\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t(click)=\"dialog.executeAction(createDocument)\"\r\n\t\t\t\tclass=\"submission-button relative\"\r\n\t\t\t\t[disabled]=\"creating\"\r\n\t\t\t>\r\n\t\t\t\t<span *ngIf=\"!creating; else loader\">{{\r\n\t\t\t\t\t'BUTTONS.CREATE' | translate\r\n\t\t\t\t}}</span>\r\n\t\t\t</button>\r\n\t\t\t<ng-template #loader>\r\n\t\t\t\t<mat-spinner\r\n\t\t\t\t\t[value]=\"90\"\r\n\t\t\t\t\t[strokeWidth]=\"3\"\r\n\t\t\t\t\toverlay=\"true\"\r\n\t\t\t\t\t[diameter]=\"25\"\r\n\t\t\t\t\tcolor=\"warn\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-spinner>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length > 0\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(tryAgainCreateDocument)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.TRY_AGAIN' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<button\r\n\t\t\t[disabled]=\"!fileForm?.valid || disableCreateWhenFinishBtn\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(createWhenFinish)\"\r\n\t\t\tclass=\"submission-button w-44\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.CREATE_WHEN_FINSH' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\tclass=\"cancelation-button mx-2\"\r\n\t\t\t(click)=\"dialog.executeAction(minimizDialog)\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.numberOfUploadedFiles !== 0 ||\r\n\t\t\t\taddingProperties\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.MINIMIZED' | translate }}\r\n\t\t</button>\r\n\t\t<!-- <button class=\"cancelation-button\" (click)=\" dialog.executeAction(closeDialog)\">\r\n{{ 'BUTTONS.CANCEL' | translate }}\r\n</button> -->\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".dynamic-part{margin-left:-15px;margin-right:-15px}.iner-wrapper{height:calc(100% - 70px)}.iner-wrapper .properties-section{width:calc(100% - 270px);height:calc(100% - 15px)}.iner-wrapper .attachment-tab-body{height:calc(100% + 20px);overflow-y:auto;overflow-x:hidden}.iner-wrapper .attachment-iner-small-body{width:350px}.rtl .actions-iner-wrapper{direction:ltr}.actions-iner-wrapper{direction:rtl}:host{height:100%;display:block}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: DynamicFieldsRendererComponent, selector: "app-dynamic-fields-renderer", inputs: ["form", "agencyNameFilter", "countryNameFilter", "orgNameFilter", "ngoNameFilter", "disableInitSecrecyLevel", "mode", "fields"], outputs: ["checkTextSpellCheckerField"] }, { type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["form", "data", "readOnly"], outputs: ["change"] }, { type: AttachmentsComponent, selector: "app-attachments", inputs: ["allowedTypes", "params", "path", "maxSize", "docParams", "multiple", "createDocument", "allowedMaxNumberOfFiles", "source"], outputs: ["uploadSuccess", "uploadError", "onSelectingItem", "itemRemoved"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreateModalComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -31992,7 +31867,7 @@
       return LoanRequestComponent;
   }(BaseComponent));
   LoanRequestComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LoanRequestComponent, deps: [{ token: FileManagerService }, { token: CustomToastrService }, { token: NuxeoDialogService }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  LoanRequestComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LoanRequestComponent, selector: "app-loan-request", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItem: "selectedItem" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: i4$4.DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #contentTemplate>\r\n\t<div>\r\n\t\t<form (submit)=\"($event)\">\r\n\t\t\t<dx-form\r\n\t\t\t\tclass=\"collection-form-wrapper\"\r\n\t\t\t\t#createForm\r\n\t\t\t\t[formData]=\"loanFormData\"\r\n\t\t\t\t[disabled]=\"loading\"\r\n\t\t\t>\r\n\t\t\t\t<dxi-item dataField=\"Duration\" editorType=\"dxNumberBox\">\r\n\t\t\t\t\t<dxo-label\r\n\t\t\t\t\t\tclass=\"text-base font-bold\"\r\n\t\t\t\t\t\ttext=\"{{ 'CREATE.DURATION' | translate }}\"\r\n\t\t\t\t\t></dxo-label>\r\n\t\t\t\t\t<dxi-validation-rule\r\n\t\t\t\t\t\ttype=\"required\"\r\n\t\t\t\t\t\tmessage=\"Duration is required\"\r\n\t\t\t\t\t></dxi-validation-rule>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t\t<dxi-item itemType=\"button\">\r\n\t\t\t\t\t<dxo-button-options\r\n\t\t\t\t\t\twidth=\"30%\"\r\n\t\t\t\t\t\ttype=\"danger\"\r\n\t\t\t\t\t\t[useSubmitBehavior]=\"true\"\r\n\t\t\t\t\t\t[template]=\"'loanTemplate'\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</dxo-button-options>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t</dx-form>\r\n\t\t</form>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\t[disabled]=\"disable\"\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(onFormLoanRequestSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.LOAN' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4__namespace$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5__namespace$6.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i5__namespace$6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { type: i5__namespace$6.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }, { type: i5__namespace$6.DxoButtonOptionsComponent, selector: "dxo-button-options", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  LoanRequestComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LoanRequestComponent, selector: "app-loan-request", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItem: "selectedItem" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: i4$4.DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #contentTemplate>\r\n\t<div>\r\n\t\t<form (submit)=\"($event)\">\r\n\t\t\t<dx-form\r\n\t\t\t\tclass=\"collection-form-wrapper\"\r\n\t\t\t\t#createForm\r\n\t\t\t\t[formData]=\"loanFormData\"\r\n\t\t\t\t[disabled]=\"loading\"\r\n\t\t\t>\r\n\t\t\t\t<dxi-item dataField=\"Duration\" editorType=\"dxNumberBox\">\r\n\t\t\t\t\t<dxo-label\r\n\t\t\t\t\t\tclass=\"text-base font-bold\"\r\n\t\t\t\t\t\ttext=\"{{ 'CREATE.DURATION' | translate }}\"\r\n\t\t\t\t\t></dxo-label>\r\n\t\t\t\t\t<dxi-validation-rule\r\n\t\t\t\t\t\ttype=\"required\"\r\n\t\t\t\t\t\tmessage=\"Duration is required\"\r\n\t\t\t\t\t></dxi-validation-rule>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t\t<dxi-item itemType=\"button\">\r\n\t\t\t\t\t<dxo-button-options\r\n\t\t\t\t\t\twidth=\"30%\"\r\n\t\t\t\t\t\ttype=\"danger\"\r\n\t\t\t\t\t\t[useSubmitBehavior]=\"true\"\r\n\t\t\t\t\t\t[template]=\"'loanTemplate'\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</dxo-button-options>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t</dx-form>\r\n\t\t</form>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\t[disabled]=\"disable\"\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(onFormLoanRequestSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.LOAN' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4__namespace$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "isDirty", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5__namespace$5.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i5__namespace$5.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { type: i5__namespace$5.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }, { type: i5__namespace$5.DxoButtonOptionsComponent, selector: "dxo-button-options", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LoanRequestComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -32575,7 +32450,7 @@
       return RenameComponent;
   }(BaseComponent));
   RenameComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RenameComponent, deps: [{ token: FileManagerService }, { token: CustomToastrService }, { token: NuxeoDialogService }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  RenameComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RenameComponent, selector: "app-rename", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItems: "selectedItems" }, outputs: { visibleChange: "visibleChange", refresh: "refresh" }, viewQueries: [{ propertyName: "form", first: true, predicate: i4$4.DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #contentTemplate>\r\n\t<div class=\"renameFileComponent\">\r\n\t\t<form>\r\n\t\t\t<dx-form\r\n\t\t\t\tclass=\"form-wrapper\"\r\n\t\t\t\t#form\r\n\t\t\t\t[formData]=\"formData\"\r\n\t\t\t\t[disabled]=\"loading\"\r\n\t\t\t>\r\n\t\t\t\t<dxi-item dataField=\"title\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label\r\n\t\t\t\t\t\tclass=\"text-base font-bold\"\r\n\t\t\t\t\t\ttext=\"{{ 'CREATE.TITLE' | translate }}\"\r\n\t\t\t\t\t></dxo-label>\r\n\t\t\t\t\t<dxi-validation-rule\r\n\t\t\t\t\t\ttype=\"required\"\r\n\t\t\t\t\t\tmessage=\"{{ 'ERRORS.Title_is_required' | translate }}\"\r\n\t\t\t\t\t></dxi-validation-rule>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t</dx-form>\r\n\t\t</form>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\t[disabled]=\"disable\"\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(onFormSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.RENAME' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4__namespace$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5__namespace$6.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i5__namespace$6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { type: i5__namespace$6.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  RenameComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RenameComponent, selector: "app-rename", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItems: "selectedItems" }, outputs: { visibleChange: "visibleChange", refresh: "refresh" }, viewQueries: [{ propertyName: "form", first: true, predicate: i4$4.DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #contentTemplate>\r\n\t<div class=\"renameFileComponent\">\r\n\t\t<form>\r\n\t\t\t<dx-form\r\n\t\t\t\tclass=\"form-wrapper\"\r\n\t\t\t\t#form\r\n\t\t\t\t[formData]=\"formData\"\r\n\t\t\t\t[disabled]=\"loading\"\r\n\t\t\t>\r\n\t\t\t\t<dxi-item dataField=\"title\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label\r\n\t\t\t\t\t\tclass=\"text-base font-bold\"\r\n\t\t\t\t\t\ttext=\"{{ 'CREATE.TITLE' | translate }}\"\r\n\t\t\t\t\t></dxo-label>\r\n\t\t\t\t\t<dxi-validation-rule\r\n\t\t\t\t\t\ttype=\"required\"\r\n\t\t\t\t\t\tmessage=\"{{ 'ERRORS.Title_is_required' | translate }}\"\r\n\t\t\t\t\t></dxi-validation-rule>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t</dx-form>\r\n\t\t</form>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\t[disabled]=\"disable\"\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(onFormSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.RENAME' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4__namespace$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "isDirty", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isDirtyChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5__namespace$5.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i5__namespace$5.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { type: i5__namespace$5.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RenameComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -33482,7 +33357,7 @@
       return ShareDialogComponent;
   }(BaseDialogComponent));
   ShareDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ShareDialogComponent, deps: [{ token: i1$4.MAT_DIALOG_DATA }, { token: i1__namespace$4.MatDialogRef }, { token: i1__namespace$4.MatDialog }, { token: i2__namespace$4.FormBuilder }, { token: SharedDocsService }, { token: CustomToastrService }, { token: NuxeoService }, { token: UserPreferencesService }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ShareDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ShareDialogComponent, selector: "app-share-dialog", usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.SHARE' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<form [formGroup]=\"shareForm\" class=\"h-full p-5 overflow-auto\" SetRtl>\r\n\t\t\t<div class=\"flex flex-col justify-between h-full\">\r\n\t\t\t\t<!--Form Section-->\r\n\t\t\t\t<div class=\"add-permsion-wrapper\">\r\n\t\t\t\t\t<span class=\"text-gray-900 text-lg\">\r\n\t\t\t\t\t\t{{ 'share.shareDialogTitle' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<div class=\"mt-5 selectorsWrapper\">\r\n\t\t\t\t\t\t<app-select-users-by-departments\r\n\t\t\t\t\t\t\tformControlName=\"depAnditsUsers\"\r\n\t\t\t\t\t\t\t[allowMultipleUsers]=\"true\"\r\n\t\t\t\t\t\t\t[userLabel]=\"'share.users' | translate\"\r\n\t\t\t\t\t\t\t[depLabel]=\"'share.Dep' | translate\"\r\n\t\t\t\t\t\t\t[display]=\"'column'\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t</app-select-users-by-departments>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"forbiddenUsers.length\" class=\"flex\">\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let p of forbiddenUsers; let i; as: index\">\r\n\t\t\t\t\t\t\t<span class=\"text-red-500 text-base\"> {{ p }}&nbsp; </span>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t<p *ngIf=\"forbiddenUsers.length == 1\">\r\n\t\t\t\t\t\t\t\t{{ 'share.single_forbidden' | translate }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t<p *ngIf=\"forbiddenUsers.length > 1\">\r\n\t\t\t\t\t\t\t\t{{ 'share.multi_forbidden' | translate }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"sameCurrentUser\">\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t{{ 'share.shareWithLoggedInUser' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"isSharedBefore.length\" class=\"flex\">\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t{{ 'share.share_exists' | translate }}\r\n\t\t\t\t\t\t\t<ng-container *ngFor=\"let p of isSharedBefore\">\r\n\t\t\t\t\t\t\t\t{{ p }}\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t{{ 'share.before' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"mt-4 rightsSelector\">\r\n\t\t\t\t\t\t<label class=\"text-base font-bold mb-0\">\r\n\t\t\t\t\t\t\t{{ 'share.Rights' | translate }}\r\n\t\t\t\t\t\t\t<span class=\"text-danger\">*</span>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<ng-select\r\n\t\t\t\t\t\t\t[items]=\"rights\"\r\n\t\t\t\t\t\t\tbindLabel=\"label\"\r\n\t\t\t\t\t\t\tbindValue=\"value\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'permission.rightsPlaceholder' | translate\"\r\n\t\t\t\t\t\t\tformControlName=\"rights\"\r\n\t\t\t\t\t\t\t(change)=\"setRight($event)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t</ng-select>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"sharedList.length\" class=\"mt-4\">\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<label class=\"text-base font-bold mb-0\">\r\n\t\t\t\t\t\t\t\t{{ 'share.fileUrl' | translate }}\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t\t<div class=\"flex relative\">\r\n\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t#fileUrl\r\n\t\t\t\t\t\t\t\t\t[value]=\"shareableUrl\"\r\n\t\t\t\t\t\t\t\t\tdisabled\r\n\t\t\t\t\t\t\t\t\tclass=\"appearance-none block w-full bg-accent-100 text-gray-700 border border-gray-200 rounded py-2.5 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"\r\n\t\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\tclass=\"absolute pt-2.5 bg-accent-100\"\r\n\t\t\t\t\t\t\t\t\t[matTooltip]=\"'BUTTONS.COPY' | translate\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'right-2' : 'left-2'\"\r\n\t\t\t\t\t\t\t\t\t[cdkCopyToClipboard]=\"fileUrl.value\"\r\n\t\t\t\t\t\t\t\t\t(click)=\"copy()\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t\t\t\t\tsvgIcon=\"mat_solid:content_copy\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"icon-size-6\"\r\n\t\t\t\t\t\t\t\t\t></mat-icon>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"copied\"\r\n\t\t\t\t\t\t\t\t\tclass=\"flex absolute justify-around w-24 -mt-10 border border-red-700 h-7 rounded bg-gray-200\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'right-0' : 'left-0'\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclass=\"w-3 h-3 justify-center bg-gray-200 transform rotate-45 border mt-5 borders-color\"\r\n\t\t\t\t\t\t\t\t\t></div>\r\n\t\t\t\t\t\t\t\t\t<span class=\"absolute font-extralight\">{{\r\n\t\t\t\t\t\t\t\t\t\t'share.copied' | translate\r\n\t\t\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!--Shares Section-->\r\n\t\t\t\t<div *ngIf=\"sharedList.length\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"flex flex-row justify-between h-7 border-b-2 border-accent-100 mt-2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span class=\"text-base font-bold\">\r\n\t\t\t\t\t\t\t{{ 'share.shares' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'canRemoveShare',\r\n\t\t\t\t\t\t\t\tentity: selectedItem.entity\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'share.Rm_All_shares' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"openDialog('Rem_ALL_shares')\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t\t\t[svgIcon]=\"'heroicons_outline:trash'\"\r\n\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'mr-2' : 'ml-2'\"\r\n\t\t\t\t\t\t\t></mat-icon>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"h-52 overflow-y-auto\">\r\n\t\t\t\t\t\t<div class=\"flex flex-row justify-between mt-2.5\">\r\n\t\t\t\t\t\t\t<span class=\"w-1/2 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.shareWith' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span class=\"w-1/4 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.share_date' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span class=\"w-1/4 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.permission' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span>&nbsp;</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let d of sharedList\">\r\n\t\t\t\t\t\t\t<div class=\"flex flex-row justify-between mt-2.5\">\r\n\t\t\t\t\t\t\t\t<div class=\"flex flex-row w-1/2\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex-0 w-8 h-8 rounded-full overflow-hidden\">\r\n\t\t\t\t\t\t\t\t\t\t<cts-avatar\r\n\t\t\t\t\t\t\t\t\t\t\t[user]=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\tproperties: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfirstName: d.user.properties?.firstName,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tlastName: d.user.properties?.lastName\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t</cts-avatar>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex flex-col -mt-2 px-2 break-all\">\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ d.user.fullName }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ d.user.properties.email }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"w-1/4 mt-1.5 break-all px-2.5\">\r\n\t\t\t\t\t\t\t\t\t<span>{{\r\n\t\t\t\t\t\t\t\t\t\td.sharedDate\r\n\t\t\t\t\t\t\t\t\t\t\t| localizedDate\r\n\t\t\t\t\t\t\t\t\t\t\t\t: 'dd MMMM yyyy'\r\n\t\t\t\t\t\t\t\t\t\t\t\t: (isArabic ? 'ar-AR' : 'en-US')\r\n\t\t\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"w-1/4 mt-1.5 break-all px-4\">\r\n\t\t\t\t\t\t\t\t\t<span>{{ 'rights.' + d.sharedMode | translate }}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"mt-1.5\">\r\n\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\tname: 'canRemoveShare',\r\n\t\t\t\t\t\t\t\t\t\t\tentity: selectedItem.entity\r\n\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'share.Rm_custom_share' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"\r\n\t\t\t\t\t\t\t\t\t\t\topenDialog(\r\n\t\t\t\t\t\t\t\t\t\t\t\t'Rem_custom_share',\r\n\t\t\t\t\t\t\t\t\t\t\t\td.user.properties.username,\r\n\t\t\t\t\t\t\t\t\t\t\t\td.sharedMode\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"ms-Icon ms-Icon--ChromeClose\"\r\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'mr-2.5' : 'ml-2.5'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<button\r\n\t\t\tclass=\"submission-button\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(click)=\"dialog.executeAction(share)\"\r\n\t\t>\r\n\t\t\t{{ 'share.shareButton' | translate }}\r\n\t\t</button>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".share-dialog-wrapper .mat-dialog-container{overflow:hidden;padding:0!important}.share-dialog-wrapper .borders-color{--tw-border-opacity: 1;border-bottom-color:rgba(185,28,28,var(--tw-border-opacity))!important;border-right-color:rgba(185,28,28,var(--tw-border-opacity))!important}.share-dialog-wrapper .rightsSelector .ng-select-container .ng-value-container .ng-placeholder{font-size:12px;margin-top:3px}.share-dialog-wrapper .selectorsWrapper .dep-label,.share-dialog-wrapper .selectorsWrapper .users-label{@apply text-base font-bold mb-0;}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: SelectUsersByDepartmentsComponent, selector: "app-select-users-by-departments", inputs: ["display", "depLabel", "userLabel", "allowMultipleUsers", "fetchDepUsersByCustomApi", "fetchedUsers"], outputs: ["formChanged", "onDataLoad"] }, { 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"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }], pipes: { "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  ShareDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ShareDialogComponent, selector: "app-share-dialog", usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.SHARE' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<form [formGroup]=\"shareForm\" class=\"h-full p-5 overflow-auto\" SetRtl>\r\n\t\t\t<div class=\"flex flex-col justify-between h-full\">\r\n\t\t\t\t<!--Form Section-->\r\n\t\t\t\t<div class=\"add-permsion-wrapper\">\r\n\t\t\t\t\t<span class=\"text-gray-900 text-lg\">\r\n\t\t\t\t\t\t{{ 'share.shareDialogTitle' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<div class=\"mt-5 selectorsWrapper\">\r\n\t\t\t\t\t\t<app-select-users-by-departments\r\n\t\t\t\t\t\t\tformControlName=\"depAnditsUsers\"\r\n\t\t\t\t\t\t\t[allowMultipleUsers]=\"true\"\r\n\t\t\t\t\t\t\t[userLabel]=\"'share.users' | translate\"\r\n\t\t\t\t\t\t\t[depLabel]=\"'share.Dep' | translate\"\r\n\t\t\t\t\t\t\t[display]=\"'column'\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t</app-select-users-by-departments>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"forbiddenUsers.length\" class=\"flex\">\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let p of forbiddenUsers; let i; as: index\">\r\n\t\t\t\t\t\t\t<span class=\"text-red-500 text-base\"> {{ p }}&nbsp; </span>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t<p *ngIf=\"forbiddenUsers.length == 1\">\r\n\t\t\t\t\t\t\t\t{{ 'share.single_forbidden' | translate }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t<p *ngIf=\"forbiddenUsers.length > 1\">\r\n\t\t\t\t\t\t\t\t{{ 'share.multi_forbidden' | translate }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"sameCurrentUser\">\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t{{ 'share.shareWithLoggedInUser' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"isSharedBefore.length\" class=\"flex\">\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t{{ 'share.share_exists' | translate }}\r\n\t\t\t\t\t\t\t<ng-container *ngFor=\"let p of isSharedBefore\">\r\n\t\t\t\t\t\t\t\t{{ p }}\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t{{ 'share.before' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"mt-4 rightsSelector\">\r\n\t\t\t\t\t\t<label class=\"text-base font-bold mb-0\">\r\n\t\t\t\t\t\t\t{{ 'share.Rights' | translate }}\r\n\t\t\t\t\t\t\t<span class=\"text-danger\">*</span>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<ng-select\r\n\t\t\t\t\t\t\t[items]=\"rights\"\r\n\t\t\t\t\t\t\tbindLabel=\"label\"\r\n\t\t\t\t\t\t\tbindValue=\"value\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'permission.rightsPlaceholder' | translate\"\r\n\t\t\t\t\t\t\tformControlName=\"rights\"\r\n\t\t\t\t\t\t\t(change)=\"setRight($event)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t</ng-select>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"sharedList.length\" class=\"mt-4\">\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<label class=\"text-base font-bold mb-0\">\r\n\t\t\t\t\t\t\t\t{{ 'share.fileUrl' | translate }}\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t\t<div class=\"flex relative\">\r\n\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t#fileUrl\r\n\t\t\t\t\t\t\t\t\t[value]=\"shareableUrl\"\r\n\t\t\t\t\t\t\t\t\tdisabled\r\n\t\t\t\t\t\t\t\t\tclass=\"appearance-none block w-full bg-accent-100 text-gray-700 border border-gray-200 rounded py-2.5 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"\r\n\t\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\tclass=\"absolute pt-2.5 bg-accent-100\"\r\n\t\t\t\t\t\t\t\t\t[matTooltip]=\"'BUTTONS.COPY' | translate\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'right-2' : 'left-2'\"\r\n\t\t\t\t\t\t\t\t\t[cdkCopyToClipboard]=\"fileUrl.value\"\r\n\t\t\t\t\t\t\t\t\t(click)=\"copy()\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t\t\t\t\tsvgIcon=\"mat_solid:content_copy\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"icon-size-6\"\r\n\t\t\t\t\t\t\t\t\t></mat-icon>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"copied\"\r\n\t\t\t\t\t\t\t\t\tclass=\"flex absolute justify-around w-24 -mt-10 border border-red-700 h-7 rounded bg-gray-200\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'right-0' : 'left-0'\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclass=\"w-3 h-3 justify-center bg-gray-200 transform rotate-45 border mt-5 borders-color\"\r\n\t\t\t\t\t\t\t\t\t></div>\r\n\t\t\t\t\t\t\t\t\t<span class=\"absolute font-extralight\">{{\r\n\t\t\t\t\t\t\t\t\t\t'share.copied' | translate\r\n\t\t\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!--Shares Section-->\r\n\t\t\t\t<div *ngIf=\"sharedList.length\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"flex flex-row justify-between h-7 border-b-2 border-accent-100 mt-2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span class=\"text-base font-bold\">\r\n\t\t\t\t\t\t\t{{ 'share.shares' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'canRemoveShare',\r\n\t\t\t\t\t\t\t\tentity: selectedItem.entity\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'share.Rm_All_shares' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"openDialog('Rem_ALL_shares')\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t\t\t[svgIcon]=\"'heroicons_outline:trash'\"\r\n\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'mr-2' : 'ml-2'\"\r\n\t\t\t\t\t\t\t></mat-icon>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"h-52 overflow-y-auto\">\r\n\t\t\t\t\t\t<div class=\"flex flex-row justify-between mt-2.5\">\r\n\t\t\t\t\t\t\t<span class=\"w-1/2 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.shareWith' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span class=\"w-1/4 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.share_date' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span class=\"w-1/4 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.permission' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span>&nbsp;</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let d of sharedList\">\r\n\t\t\t\t\t\t\t<div class=\"flex flex-row justify-between mt-2.5\">\r\n\t\t\t\t\t\t\t\t<div class=\"flex flex-row w-1/2\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex-0 w-8 h-8 rounded-full overflow-hidden\">\r\n\t\t\t\t\t\t\t\t\t\t<cts-avatar\r\n\t\t\t\t\t\t\t\t\t\t\t[user]=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\tproperties: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfirstName: d.user.properties?.firstName,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tlastName: d.user.properties?.lastName\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t</cts-avatar>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex flex-col -mt-2 px-2 break-all\">\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ d.user.fullName }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ d.user.properties.email }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"w-1/4 mt-1.5 break-all px-2.5\">\r\n\t\t\t\t\t\t\t\t\t<span>{{\r\n\t\t\t\t\t\t\t\t\t\td.sharedDate\r\n\t\t\t\t\t\t\t\t\t\t\t| localizedDate\r\n\t\t\t\t\t\t\t\t\t\t\t\t: 'dd MMMM yyyy'\r\n\t\t\t\t\t\t\t\t\t\t\t\t: (isArabic ? 'ar-AR' : 'en-US')\r\n\t\t\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"w-1/4 mt-1.5 break-all px-4\">\r\n\t\t\t\t\t\t\t\t\t<span>{{ 'rights.' + d.sharedMode | translate }}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"mt-1.5\">\r\n\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\tname: 'canRemoveShare',\r\n\t\t\t\t\t\t\t\t\t\t\tentity: selectedItem.entity\r\n\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'share.Rm_custom_share' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"\r\n\t\t\t\t\t\t\t\t\t\t\topenDialog(\r\n\t\t\t\t\t\t\t\t\t\t\t\t'Rem_custom_share',\r\n\t\t\t\t\t\t\t\t\t\t\t\td.user.properties.username,\r\n\t\t\t\t\t\t\t\t\t\t\t\td.sharedMode\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"ms-Icon ms-Icon--ChromeClose\"\r\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'mr-2.5' : 'ml-2.5'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<button\r\n\t\t\tclass=\"submission-button\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(click)=\"dialog.executeAction(share)\"\r\n\t\t>\r\n\t\t\t{{ 'share.shareButton' | translate }}\r\n\t\t</button>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".share-dialog-wrapper .mat-dialog-container{overflow:hidden;padding:0!important}.share-dialog-wrapper .borders-color{--tw-border-opacity: 1;border-bottom-color:rgba(185,28,28,var(--tw-border-opacity))!important;border-right-color:rgba(185,28,28,var(--tw-border-opacity))!important}.share-dialog-wrapper .rightsSelector .ng-select-container .ng-value-container .ng-placeholder{font-size:12px;margin-top:3px}.share-dialog-wrapper .selectorsWrapper .dep-label,.share-dialog-wrapper .selectorsWrapper .users-label{@apply text-base font-bold mb-0;}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: SelectUsersByDepartmentsComponent, selector: "app-select-users-by-departments", inputs: ["display", "depLabel", "userLabel", "allowMultipleUsers", "fetchDepUsersByCustomApi", "fetchedUsers"], outputs: ["formChanged", "onDataLoad"] }, { 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"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i2__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i2__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }], pipes: { "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ShareDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -34861,7 +34736,7 @@
       return PermissionsComponent;
   }());
   PermissionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PermissionsComponent, deps: [{ token: PermissionService }, { token: i1__namespace$4.MatDialog }, { token: CustomToastrService }, { token: TranslationService }, { token: NuxeoService }, { token: UserService }, { token: EvaluatorsService }, { token: NuxeoDialogService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  PermissionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PermissionsComponent, selector: "app-permissions", inputs: { documentId: "documentId", document: "document", allowAddAndBlock: "allowAddAndBlock", sourcePage: "sourcePage" }, ngImport: i0__namespace, template: "<div class=\"h-auto mt-3 px-0 pb-4\" *ngIf=\"!loading; else loader\">\r\n    <!--LocalPermission List Items-->\r\n    <div *ngIf=\"sourcePage != 'myFiles'\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.local\" | translate\r\n            }}</span>\r\n            <span *ngIf=\"allowAdd_Block_DeletePermission && !inheritedPermissions.length\">\r\n                <button\r\n                    *ngIf=\"allowAddAndBlock\"\r\n                    class=\"hover:text-blue-700 text-blue-500 mb-1 text-base\"\r\n                    (click)=\"addNewLocalPermissions()\"\r\n                    [disabled]=\"!permissionsType\"\r\n                >\r\n                    {{ \"permission.new\" | translate }}\r\n                </button>\r\n            </span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [allowDeleteAndEdit]=\"allowAdd_Block_DeletePermission\"\r\n            [permissionsArray]=\"localPermissions\"\r\n            *ngIf=\"localPermissions.length > 0; else nolocalPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <ng-template #nolocalPermissions>\r\n        <div class=\"single-permssion p-3 text-center\">\r\n            {{ \"permission.noLocal\" | translate }}\r\n        </div>\r\n    </ng-template>\r\n    <!--InheritedPermission List Items-->\r\n    <div>\r\n        <div class=\"flex flex-row justify-between mt-3\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.inherited\" | translate\r\n            }}</span>\r\n            <span *ngIf=\"allowAdd_Block_DeletePermission\">\r\n                <button\r\n                    class=\"hover:text-blue-700 text-blue-500 mb-1 text-base\"\r\n                    *ngIf=\"status != null && allowAddAndBlock\"\r\n                >\r\n                    <span\r\n                        *ngIf=\"status == 'block'; else unblock\"\r\n                        (click)=\"unblockPermissionInheritance()\"\r\n                    >\r\n                        {{ \"permission.unblock\" | translate }}\r\n                    </span>\r\n                    <ng-template #unblock>\r\n                        <span (click)=\"blockPermissionInheritance()\">\r\n                            {{ \"permission.block\" | translate }}\r\n                        </span>\r\n                    </ng-template>\r\n                </button>\r\n            </span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\" *ngIf=\"!blockOrUnblock\"></mat-divider>\r\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"blockOrUnblock\"></mat-progress-bar>\r\n        <app-permissions-template\r\n            *ngIf=\"inheritedPermissions.length > 0; else noinheritedPermissions\"\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            [permissionsArray]=\"inheritedPermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <ng-template #noinheritedPermissions>\r\n        <div class=\"single-permssion p-3 text-center\">\r\n            {{\"permission.noInherited\" | translate }}</div>\r\n    </ng-template>\r\n    <!--departmentPermissions List Items-->\r\n    <div *ngIf=\"departmentPermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.departmentPermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"departmentPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <!--sharePermissions List Items-->\r\n    <div *ngIf=\"sharePermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.sharePermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"sharePermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <!--workflowPermissions List Items-->\r\n    <div *ngIf=\"workflowPermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.workflowPermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"workflowPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #loader>\r\n    <div class=\"flex items-center justify-center w-full h-full\">\r\n        <mat-spinner [value]=\"90\" [strokeWidth]=\"6\" overlay=\"true\" [diameter]=\"75\"></mat-spinner>\r\n    </div>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i9__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: PermissionsTemplateComponent, selector: "app-permissions-template", inputs: ["allowDeleteAndEdit", "documentId", "userVisiblePermissions", "permissionsArray"], outputs: ["getPermissions"] }, { type: i4__namespace$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  PermissionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PermissionsComponent, selector: "app-permissions", inputs: { documentId: "documentId", document: "document", allowAddAndBlock: "allowAddAndBlock", sourcePage: "sourcePage" }, ngImport: i0__namespace, template: "<div class=\"h-auto mt-3 px-0 pb-4\" *ngIf=\"!loading; else loader\">\r\n    <!--LocalPermission List Items-->\r\n    <div *ngIf=\"sourcePage != 'myFiles'\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.local\" | translate\r\n            }}</span>\r\n            <span *ngIf=\"allowAdd_Block_DeletePermission && !inheritedPermissions.length\">\r\n                <button\r\n                    *ngIf=\"allowAddAndBlock\"\r\n                    class=\"hover:text-blue-700 text-blue-500 mb-1 text-base\"\r\n                    (click)=\"addNewLocalPermissions()\"\r\n                    [disabled]=\"!permissionsType\"\r\n                >\r\n                    {{ \"permission.new\" | translate }}\r\n                </button>\r\n            </span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [allowDeleteAndEdit]=\"allowAdd_Block_DeletePermission\"\r\n            [permissionsArray]=\"localPermissions\"\r\n            *ngIf=\"localPermissions.length > 0; else nolocalPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <ng-template #nolocalPermissions>\r\n        <div class=\"single-permssion p-3 text-center\">\r\n            {{ \"permission.noLocal\" | translate }}\r\n        </div>\r\n    </ng-template>\r\n    <!--InheritedPermission List Items-->\r\n    <div>\r\n        <div class=\"flex flex-row justify-between mt-3\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.inherited\" | translate\r\n            }}</span>\r\n            <span *ngIf=\"allowAdd_Block_DeletePermission\">\r\n                <button\r\n                    class=\"hover:text-blue-700 text-blue-500 mb-1 text-base\"\r\n                    *ngIf=\"status != null && allowAddAndBlock\"\r\n                >\r\n                    <span\r\n                        *ngIf=\"status == 'block'; else unblock\"\r\n                        (click)=\"unblockPermissionInheritance()\"\r\n                    >\r\n                        {{ \"permission.unblock\" | translate }}\r\n                    </span>\r\n                    <ng-template #unblock>\r\n                        <span (click)=\"blockPermissionInheritance()\">\r\n                            {{ \"permission.block\" | translate }}\r\n                        </span>\r\n                    </ng-template>\r\n                </button>\r\n            </span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\" *ngIf=\"!blockOrUnblock\"></mat-divider>\r\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"blockOrUnblock\"></mat-progress-bar>\r\n        <app-permissions-template\r\n            *ngIf=\"inheritedPermissions.length > 0; else noinheritedPermissions\"\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            [permissionsArray]=\"inheritedPermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <ng-template #noinheritedPermissions>\r\n        <div class=\"single-permssion p-3 text-center\">\r\n            {{\"permission.noInherited\" | translate }}</div>\r\n    </ng-template>\r\n    <!--departmentPermissions List Items-->\r\n    <div *ngIf=\"departmentPermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.departmentPermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"departmentPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <!--sharePermissions List Items-->\r\n    <div *ngIf=\"sharePermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.sharePermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"sharePermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <!--workflowPermissions List Items-->\r\n    <div *ngIf=\"workflowPermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.workflowPermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"workflowPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #loader>\r\n    <div class=\"flex items-center justify-center w-full h-full\">\r\n        <mat-spinner [value]=\"90\" [strokeWidth]=\"6\" overlay=\"true\" [diameter]=\"75\"></mat-spinner>\r\n    </div>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i9__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: PermissionsTemplateComponent, selector: "app-permissions-template", inputs: ["allowDeleteAndEdit", "documentId", "userVisiblePermissions", "permissionsArray"], outputs: ["getPermissions"] }, { type: i4__namespace$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PermissionsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -35144,7 +35019,7 @@
       return SidepanelComponent;
   }());
   SidepanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SidepanelComponent, deps: [{ token: i4__namespace$1.DatePipe }, { token: UserPreferencesService }, { token: DialogMangmentService }, { token: DynamicFormService }, { token: DocumentsService }, { token: TagsApiService }, { token: TranslationService }, { token: i1__namespace$4.MatDialog }, { token: SharedDocsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  SidepanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidepanelComponent, selector: "app-sidepanel", inputs: { selectedItem: "selectedItem", menuOpen: "menuOpen", sourcePage: "sourcePage", allowAddAndBlock: "allowAddAndBlock" }, outputs: { onCloseSideMenu: "onCloseSideMenu" }, viewQueries: [{ propertyName: "detailsTemplate", first: true, predicate: ["detailsTemplate"], descendants: true, static: true }, { propertyName: "commentsTemplate", first: true, predicate: ["commentsTemplate"], descendants: true, static: true }, { propertyName: "activityTemplate", first: true, predicate: ["activityTemplate"], descendants: true, static: true }, { propertyName: "permissionsTemplate", first: true, predicate: ["permissionsTemplate"], descendants: true, static: true }, { propertyName: "filesTemplate", first: true, predicate: ["filesTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"side-menu-details\" SetRtl>\r\n    <div class=\"h-full\" *ngIf=\"selectedItem && showDetails && !sideMenuLoading\">\r\n        <div class=\"\">\r\n            <div class=\"mb-3 px-5 py-1 w-100 flex border-b-2 items-center\">\r\n                <!-- <title-with-icon class=\"-my-1.5\" [context]=\"selectedItem.entity\" [showTitle]=\"false\"></title-with-icon> -->\r\n                <app-display-suitable-icon [data]=\"selectedItem\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                <div class=\"justify-center flex flex-col   flex-1 flex-grow-0 w-7/12\" *ngIf=\"!selectedItem.isDirectory\">\r\n                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                        [title]=\"selectedItem.entity?.properties?.['file:content']?.['name']\"\r\n                        [alt]=\"selectedItem.entity?.properties?.['file:content']?.['name']\">\r\n                        {{selectedItem.entity?.properties?.['file:content']?.['name']}}\r\n                    </div>\r\n                    <div class=\"text-gray-500 text-sm\">\r\n                        {{((selectedItem.entity?.properties?.['file:content']?.['length']) / (1024 *\r\n                        1024)).toFixed(2) }}\r\n                        MB\r\n                    </div>\r\n                </div>\r\n                <div class=\"\r\n                         d-flex\r\n                         items-center\r\n                         text-base text-gray-500\r\n                         font-bold\r\n                     \" *ngIf=\"selectedItem.isDirectory\">\r\n                    {{ selectedItem?.name }}\r\n                </div>\r\n                <ng-container *permission=\"{name: 'lockOwnerIfLocked', entity: selectedItem.entity}\">\r\n                    <mat-icon class=\"text-gray-500 cursor-pointer  mx-3\"\r\n                        *permission=\"{name: 'canUpdate', entity: selectedItem.entity}\"\r\n                        matTooltip=\"{{ 'FOLDERS.UPDATE_DETAILS' | translate }}\"\r\n                        (click)=\"openUpdateFromSideMenu()\">edit</mat-icon>\r\n                </ng-container>\r\n            </div>\r\n            <mat-icon class=\"close-icon text-gray-500\" (click)=\"closeDetailsMenu()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <div class=\"dynamic-section\">\r\n            <div class=\"mx-2 h-full\">\r\n                <app-dynamic-tabs [tabs]=\"myTabs\"></app-dynamic-tabs>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"sideMenuLoading\">\r\n        {{ \"loading\" | translate }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Comments -->\r\n<ng-template #commentsTemplate>\r\n    <div class=\"overflow-auto h-full\">\r\n        <app-comments-dashlet [correspondence]=\"sideMenuFileDetails\" [entityId]=\"selectedItem.entity.uid\"\r\n            [showaddcomment]=\"true\" [row]=\"false\">\r\n        </app-comments-dashlet>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- myLogFile -->\r\n<ng-template #activityTemplate>\r\n    <!-- <cts-viewer-log [correspondence]=\"selectedItem.entity\"></cts-viewer-log> -->\r\n    <div class=\"h-full mt-3\">\r\n        <app-activities-log [documentId]=\"selectedItem.entity.uid\" [documentTitle]=\"selectedItem.entity.title\"\r\n            [file]=\"sideMenuFileDetails\"></app-activities-log>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #permissionsTemplate>\r\n    <div class=\"h-full overflow-auto px-2 mt-3\">\r\n        <app-permissions [sourcePage]=\"sourcePage\"\r\n        [allowAddAndBlock]=\"allowAddAndBlock\"  [document]=\"sideMenuFileDetails\"\r\n            [documentId]=\"selectedItem.entity.uid\"></app-permissions>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Files Tab -->\r\n<ng-template #filesTemplate>\r\n    <div class=\"h-full overflow-auto px-2 mt-3\">\r\n        <cts-versions [file]=\"selectedItem.entity\"></cts-versions>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Details -->\r\n<ng-template #detailsTemplate>\r\n    <div class=\"pb-2 mt-3 h-full px-2 overflow-auto\">\r\n        <div class=\"static-data\">\r\n            <div class=\"mt-5\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.TITLE_ONLY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{ dynamicFormData[\"dc:title\"] }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.DESCRIPTION_ONLY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{ dynamicFormData[\"dc:description\"] }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.CREATED_AT\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{\r\n                    dynamicFormData[\"dc:created\"]\r\n                    | localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')\r\n                    }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.LAST_MODIFIED\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{\r\n                    dynamicFormData[\"dc:modified\"]\r\n                    | localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')\r\n                    }}\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"super-document-fields\">\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentSubject\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_SUBJECT\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:documentSubject\"] ? dynamicFormData[\"gdoc:documentSubject\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentNumber\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_NUMBER\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:documentNumber\"] ? dynamicFormData[\"gdoc:documentNumber\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentReferenceNumber\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_REF_NUMBER\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\" dir=\"ltr\">\r\n                        {{ dynamicFormData[\"gdoc:documentReferenceNumber\"] ?\r\n                        dynamicFormData[\"gdoc:documentReferenceNumber\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:gDocumentDate\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_DATE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:gDocumentDate\"] ? (dynamicFormData[\"gdoc:gDocumentDate\"] |\r\n                        localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')) : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='(selectedItem.entity.category && selectedItem.entity.category !== {})'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.CATEGORY\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.category && selectedItem.entity.category !== {}) ?\r\n                        (isArabic ? selectedItem.entity.category.arabicName : selectedItem.entity.category.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\"\r\n                    *ngIf='(selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.CATEGORY_TYPE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.categoryType.arabicName :\r\n                        selectedItem.entity.categoryType.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf='(selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.MAIN_TOPIC\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.mainTopic.arabicName :\r\n                        selectedItem.entity.mainTopic.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\"\r\n                    *ngIf='(selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_TYPE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.documentType.arabicName :\r\n                        selectedItem.entity.documentType.englishTitle)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:secrecyLevel\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.SCRECY_LEVEL\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ 'vocabulary.VOC_SecrecyLevel.' + dynamicFormData[\"gdoc:secrecyLevel\"] | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:importance\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.IMPORTANCE_LEVEL\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ 'vocabulary.VOC_Importance.' + dynamicFormData[\"gdoc:importance\"] | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='selectedItem.entity.department'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DEPARTMENT_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ selectedItem.entity.department ?\r\n                        (isArabic ? selectedItem.entity.department.arabicName :\r\n                        selectedItem.entity.department.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:departmentCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DEPARTMENT_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:departmentCode\"] ? dynamicFormData[\"gdoc:departmentCode\"] : '--'}}\r\n                    </div>\r\n                </div> -->\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:agencyCategoryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.AGENCY_CATEGORY_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:agencyCategoryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:agencyCategoryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:agencyCategoryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:agencyNameCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.AGENCY_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:agencyNameCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:agencyNameCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:agencyNameCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:countryCategoryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.COUNTRY_CATEGORY_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:countryCategoryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:countryCategoryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:countryCategoryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:countryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.COUNTRY_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:countryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:countryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:countryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:remarks\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.REMARKS\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:remarks\"] ? dynamicFormData[\"gdoc:remarks\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.BY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm d-flex\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl\">\r\n                        <app-user [user]=\"dynamicFormData['dc:creator']\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\" *ngIf=\"dynamicFormData['dc:contributors'].length > 0\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.CONTRUBITORS\" | translate }}\r\n                </div>\r\n                <div class=\"d-flex flex-wrap\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl mb-2\"\r\n                        *ngFor=\"let user of dynamicFormData['dc:contributors']\">\r\n                        <app-user [user]=\"user\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\" *ngIf=\"sharedListUser.length > 0\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{\"share.shareWith\" | translate}}\r\n                </div>\r\n                <div class=\"d-flex flex-wrap\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl mb-2\" *ngFor=\"let user of sharedListUser\">\r\n                        <app-user [user]=\"user\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-5\" *ngIf=\"dynamicForm && dynamicFormData\">\r\n            <app-multiple-dynamic-form-viewer [form]=\"dynamicForm\"\r\n                [data]=\"dynamicFormData\"></app-multiple-dynamic-form-viewer>\r\n        </div>\r\n        <div class=\"tags-wrappers relative px-0 py-3\">\r\n            <cts-correspondence-tags [correspondence]=\"sideMenuFileDetails\" [customClass]=\"'tags-dms-wrapper'\"\r\n                [useParams]=\"true\" [addCustomApiName]=\"'Services.TagDocument'\"\r\n                [deleteCustomApiName]=\"'Services.UntagDocument'\">\r\n            </cts-correspondence-tags>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [""], components: [{ type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicTabsComponent, selector: "app-dynamic-tabs", inputs: ["tabs", "selectedIndex"] }, { type: CommentsDashletComponent, selector: "app-comments-dashlet", inputs: ["entityId", "correspondence", "row", "showaddcomment", "showCommentActions"] }, { type: ActivitiesLogComponent, selector: "app-activities-log", inputs: ["documentId", "file", "documentTitle"], outputs: ["success"] }, { type: PermissionsComponent, selector: "app-permissions", inputs: ["documentId", "document", "allowAddAndBlock", "sourcePage"] }, { type: VersionsComponent, selector: "cts-versions", inputs: ["selectedVersion", "file", "actions", "currentTranslation", "originTranslation", "historyTranslation", "showUserCard"], outputs: ["handleActions"] }, { type: UserComponent, selector: "app-user", inputs: ["user", "type", "textColor"] }, { type: MultipleDynamicFormViewerComponent, selector: "app-multiple-dynamic-form-viewer", inputs: ["form", "data"] }, { type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: ["alwaysShowRemoveBtn", "correspondence", "customClass", "addCustomApiName", "deleteCustomApiName", "useParams", "accordionMode", "systemTags", "accordionOpen", "title", "multiple"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  SidepanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidepanelComponent, selector: "app-sidepanel", inputs: { selectedItem: "selectedItem", menuOpen: "menuOpen", sourcePage: "sourcePage", allowAddAndBlock: "allowAddAndBlock" }, outputs: { onCloseSideMenu: "onCloseSideMenu" }, viewQueries: [{ propertyName: "detailsTemplate", first: true, predicate: ["detailsTemplate"], descendants: true, static: true }, { propertyName: "commentsTemplate", first: true, predicate: ["commentsTemplate"], descendants: true, static: true }, { propertyName: "activityTemplate", first: true, predicate: ["activityTemplate"], descendants: true, static: true }, { propertyName: "permissionsTemplate", first: true, predicate: ["permissionsTemplate"], descendants: true, static: true }, { propertyName: "filesTemplate", first: true, predicate: ["filesTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"side-menu-details\" SetRtl>\r\n    <div class=\"h-full\" *ngIf=\"selectedItem && showDetails && !sideMenuLoading\">\r\n        <div class=\"\">\r\n            <div class=\"mb-3 px-5 py-1 w-100 flex border-b-2 items-center\">\r\n                <!-- <title-with-icon class=\"-my-1.5\" [context]=\"selectedItem.entity\" [showTitle]=\"false\"></title-with-icon> -->\r\n                <app-display-suitable-icon [data]=\"selectedItem\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                <div class=\"justify-center flex flex-col   flex-1 flex-grow-0 w-7/12\" *ngIf=\"!selectedItem.isDirectory\">\r\n                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                        [title]=\"selectedItem.entity?.properties?.['file:content']?.['name']\"\r\n                        [alt]=\"selectedItem.entity?.properties?.['file:content']?.['name']\">\r\n                        {{selectedItem.entity?.properties?.['file:content']?.['name']}}\r\n                    </div>\r\n                    <div class=\"text-gray-500 text-sm\">\r\n                        {{((selectedItem.entity?.properties?.['file:content']?.['length']) / (1024 *\r\n                        1024)).toFixed(2) }}\r\n                        MB\r\n                    </div>\r\n                </div>\r\n                <div class=\"\r\n                         d-flex\r\n                         items-center\r\n                         text-base text-gray-500\r\n                         font-bold\r\n                     \" *ngIf=\"selectedItem.isDirectory\">\r\n                    {{ selectedItem?.name }}\r\n                </div>\r\n                <ng-container *permission=\"{name: 'lockOwnerIfLocked', entity: selectedItem.entity}\">\r\n                    <mat-icon class=\"text-gray-500 cursor-pointer  mx-3\"\r\n                        *permission=\"{name: 'canUpdate', entity: selectedItem.entity}\"\r\n                        matTooltip=\"{{ 'FOLDERS.UPDATE_DETAILS' | translate }}\"\r\n                        (click)=\"openUpdateFromSideMenu()\">edit</mat-icon>\r\n                </ng-container>\r\n            </div>\r\n            <mat-icon class=\"close-icon text-gray-500\" (click)=\"closeDetailsMenu()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <div class=\"dynamic-section\">\r\n            <div class=\"mx-2 h-full\">\r\n                <app-dynamic-tabs [tabs]=\"myTabs\"></app-dynamic-tabs>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"sideMenuLoading\">\r\n        {{ \"loading\" | translate }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Comments -->\r\n<ng-template #commentsTemplate>\r\n    <div class=\"overflow-auto h-full\">\r\n        <app-comments-dashlet [correspondence]=\"sideMenuFileDetails\" [entityId]=\"selectedItem.entity.uid\"\r\n            [showaddcomment]=\"true\" [row]=\"false\">\r\n        </app-comments-dashlet>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- myLogFile -->\r\n<ng-template #activityTemplate>\r\n    <!-- <cts-viewer-log [correspondence]=\"selectedItem.entity\"></cts-viewer-log> -->\r\n    <div class=\"h-full mt-3\">\r\n        <app-activities-log [documentId]=\"selectedItem.entity.uid\" [documentTitle]=\"selectedItem.entity.title\"\r\n            [file]=\"sideMenuFileDetails\"></app-activities-log>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #permissionsTemplate>\r\n    <div class=\"h-full overflow-auto px-2 mt-3\">\r\n        <app-permissions [sourcePage]=\"sourcePage\"\r\n        [allowAddAndBlock]=\"allowAddAndBlock\"  [document]=\"sideMenuFileDetails\"\r\n            [documentId]=\"selectedItem.entity.uid\"></app-permissions>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Files Tab -->\r\n<ng-template #filesTemplate>\r\n    <div class=\"h-full overflow-auto px-2 mt-3\">\r\n        <cts-versions [file]=\"selectedItem.entity\"></cts-versions>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Details -->\r\n<ng-template #detailsTemplate>\r\n    <div class=\"pb-2 mt-3 h-full px-2 overflow-auto\">\r\n        <div class=\"static-data\">\r\n            <div class=\"mt-5\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.TITLE_ONLY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{ dynamicFormData[\"dc:title\"] }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.DESCRIPTION_ONLY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{ dynamicFormData[\"dc:description\"] }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.CREATED_AT\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{\r\n                    dynamicFormData[\"dc:created\"]\r\n                    | localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')\r\n                    }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.LAST_MODIFIED\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{\r\n                    dynamicFormData[\"dc:modified\"]\r\n                    | localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')\r\n                    }}\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"super-document-fields\">\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentSubject\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_SUBJECT\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:documentSubject\"] ? dynamicFormData[\"gdoc:documentSubject\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentNumber\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_NUMBER\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:documentNumber\"] ? dynamicFormData[\"gdoc:documentNumber\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentReferenceNumber\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_REF_NUMBER\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\" dir=\"ltr\">\r\n                        {{ dynamicFormData[\"gdoc:documentReferenceNumber\"] ?\r\n                        dynamicFormData[\"gdoc:documentReferenceNumber\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:gDocumentDate\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_DATE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:gDocumentDate\"] ? (dynamicFormData[\"gdoc:gDocumentDate\"] |\r\n                        localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')) : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='(selectedItem.entity.category && selectedItem.entity.category !== {})'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.CATEGORY\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.category && selectedItem.entity.category !== {}) ?\r\n                        (isArabic ? selectedItem.entity.category.arabicName : selectedItem.entity.category.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\"\r\n                    *ngIf='(selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.CATEGORY_TYPE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.categoryType.arabicName :\r\n                        selectedItem.entity.categoryType.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf='(selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.MAIN_TOPIC\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.mainTopic.arabicName :\r\n                        selectedItem.entity.mainTopic.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\"\r\n                    *ngIf='(selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_TYPE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.documentType.arabicName :\r\n                        selectedItem.entity.documentType.englishTitle)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:secrecyLevel\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.SCRECY_LEVEL\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ 'vocabulary.VOC_SecrecyLevel.' + dynamicFormData[\"gdoc:secrecyLevel\"] | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:importance\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.IMPORTANCE_LEVEL\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ 'vocabulary.VOC_Importance.' + dynamicFormData[\"gdoc:importance\"] | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='selectedItem.entity.department'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DEPARTMENT_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ selectedItem.entity.department ?\r\n                        (isArabic ? selectedItem.entity.department.arabicName :\r\n                        selectedItem.entity.department.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:departmentCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DEPARTMENT_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:departmentCode\"] ? dynamicFormData[\"gdoc:departmentCode\"] : '--'}}\r\n                    </div>\r\n                </div> -->\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:agencyCategoryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.AGENCY_CATEGORY_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:agencyCategoryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:agencyCategoryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:agencyCategoryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:agencyNameCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.AGENCY_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:agencyNameCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:agencyNameCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:agencyNameCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:countryCategoryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.COUNTRY_CATEGORY_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:countryCategoryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:countryCategoryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:countryCategoryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:countryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.COUNTRY_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:countryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:countryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:countryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:remarks\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.REMARKS\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:remarks\"] ? dynamicFormData[\"gdoc:remarks\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.BY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm d-flex\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl\">\r\n                        <app-user [user]=\"dynamicFormData['dc:creator']\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\" *ngIf=\"dynamicFormData['dc:contributors'].length > 0\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.CONTRUBITORS\" | translate }}\r\n                </div>\r\n                <div class=\"d-flex flex-wrap\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl mb-2\"\r\n                        *ngFor=\"let user of dynamicFormData['dc:contributors']\">\r\n                        <app-user [user]=\"user\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\" *ngIf=\"sharedListUser.length > 0\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{\"share.shareWith\" | translate}}\r\n                </div>\r\n                <div class=\"d-flex flex-wrap\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl mb-2\" *ngFor=\"let user of sharedListUser\">\r\n                        <app-user [user]=\"user\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-5\" *ngIf=\"dynamicForm && dynamicFormData\">\r\n            <app-multiple-dynamic-form-viewer [form]=\"dynamicForm\"\r\n                [data]=\"dynamicFormData\"></app-multiple-dynamic-form-viewer>\r\n        </div>\r\n        <div class=\"tags-wrappers relative px-0 py-3\">\r\n            <cts-correspondence-tags [correspondence]=\"sideMenuFileDetails\" [customClass]=\"'tags-dms-wrapper'\"\r\n                [useParams]=\"true\" [addCustomApiName]=\"'Services.TagDocument'\"\r\n                [deleteCustomApiName]=\"'Services.UntagDocument'\">\r\n            </cts-correspondence-tags>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [""], components: [{ type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicTabsComponent, selector: "app-dynamic-tabs", inputs: ["tabs", "selectedIndex"] }, { type: CommentsDashletComponent, selector: "app-comments-dashlet", inputs: ["entityId", "correspondence", "row", "showaddcomment", "showCommentActions"] }, { type: ActivitiesLogComponent, selector: "app-activities-log", inputs: ["documentId", "file", "documentTitle"], outputs: ["success"] }, { type: PermissionsComponent, selector: "app-permissions", inputs: ["documentId", "document", "allowAddAndBlock", "sourcePage"] }, { type: VersionsComponent, selector: "cts-versions", inputs: ["selectedVersion", "file", "actions", "currentTranslation", "originTranslation", "historyTranslation", "showUserCard"], outputs: ["handleActions"] }, { type: UserComponent, selector: "app-user", inputs: ["user", "type", "textColor"] }, { type: MultipleDynamicFormViewerComponent, selector: "app-multiple-dynamic-form-viewer", inputs: ["form", "data"] }, { type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: ["alwaysShowRemoveBtn", "correspondence", "customClass", "addCustomApiName", "deleteCustomApiName", "useParams", "accordionMode", "systemTags", "accordionOpen", "title", "multiple"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SidepanelComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -37249,7 +37124,7 @@
           AddPermissionsDialogComponent,
           PermissionsTemplateComponent], imports: [i4.CommonModule,
           i1.TranslateModule,
-          i9.MatDividerModule,
+          i9$1.MatDividerModule,
           i4$3.MatProgressBarModule,
           i6.MatProgressSpinnerModule,
           SharedServicesModule,
@@ -37266,7 +37141,7 @@
   PermissionsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PermissionsModule, imports: [[
               i4.CommonModule,
               i1.TranslateModule,
-              i9.MatDividerModule,
+              i9$1.MatDividerModule,
               i4$3.MatProgressBarModule,
               i6.MatProgressSpinnerModule,
               SharedServicesModule,
@@ -37290,7 +37165,7 @@
                       imports: [
                           i4.CommonModule,
                           i1.TranslateModule,
-                          i9.MatDividerModule,
+                          i9$1.MatDividerModule,
                           i4$3.MatProgressBarModule,
                           i6.MatProgressSpinnerModule,
                           SharedServicesModule,
@@ -37566,7 +37441,7 @@
           DirectiveModule,
           i4$4.DxPopupModule,
           i4$4.DxScrollViewModule,
-          i5$6.DxiToolbarItemModule,
+          i5$5.DxiToolbarItemModule,
           i4$4.DxButtonModule,
           i4$4.DxTemplateModule,
           i4$4.DxTextBoxModule,
@@ -37617,7 +37492,7 @@
           UpdateModalComponent,
           i4$4.DxPopupModule,
           i4$4.DxScrollViewModule,
-          i5$6.DxiToolbarItemModule,
+          i5$5.DxiToolbarItemModule,
           i4$4.DxButtonModule,
           i4$4.DxTemplateModule,
           i4$4.DxTextBoxModule,
@@ -37637,7 +37512,7 @@
               DirectiveModule,
               i4$4.DxPopupModule,
               i4$4.DxScrollViewModule,
-              i5$6.DxiToolbarItemModule,
+              i5$5.DxiToolbarItemModule,
               i4$4.DxButtonModule,
               i4$4.DxTemplateModule,
               i4$4.DxTextBoxModule,
@@ -37672,7 +37547,7 @@
               NuxeoDialogModule
           ], i4$4.DxPopupModule,
           i4$4.DxScrollViewModule,
-          i5$6.DxiToolbarItemModule,
+          i5$5.DxiToolbarItemModule,
           i4$4.DxButtonModule,
           i4$4.DxTemplateModule,
           i4$4.DxTextBoxModule,
@@ -37714,7 +37589,7 @@
                           DirectiveModule,
                           i4$4.DxPopupModule,
                           i4$4.DxScrollViewModule,
-                          i5$6.DxiToolbarItemModule,
+                          i5$5.DxiToolbarItemModule,
                           i4$4.DxButtonModule,
                           i4$4.DxTemplateModule,
                           i4$4.DxTextBoxModule,
@@ -37768,7 +37643,7 @@
                           UpdateModalComponent,
                           i4$4.DxPopupModule,
                           i4$4.DxScrollViewModule,
-                          i5$6.DxiToolbarItemModule,
+                          i5$5.DxiToolbarItemModule,
                           i4$4.DxButtonModule,
                           i4$4.DxTemplateModule,
                           i4$4.DxTextBoxModule,
@@ -39419,7 +39294,7 @@
       return UsersCardComponent;
   }());
   UsersCardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: UsersCardComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  UsersCardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: UsersCardComponent, selector: "app-users-card", inputs: { members: "members", title: "title" }, ngImport: i0__namespace, template: "<app-card>\r\n  <h3 class=\"title\">\r\n    {{ title | translate }}\r\n  </h3>\r\n\r\n  <div class=\"body\">\r\n    <div class=\"images-container\">\r\n      <ng-container *ngFor=\"let member of members\">\r\n        <cts-avatar\r\n          class=\"member-avatar\"\r\n          matTooltip=\"{{ member.properties.user.properties.firstName }} {{\r\n            member.properties.user.properties.lastName\r\n          }} - {{ member.properties.role }}\" matTooltipClass=\"tdf-tooltip\" [user]=\"member?.properties?.user\"\r\n          *ngIf=\"member?.properties?.user\"\r\n          [routerLink]=\"['/users', 'profile', member?.properties.user?.properties.username]\">\r\n        </cts-avatar>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</app-card>\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}.member-avatar{display:inline-block;width:64px;height:64px;border-radius:100%;border:2px solid white;box-shadow:0 1px 5px 2px #00000021;margin:16px -8px;cursor:pointer;overflow:hidden}.images-container{overflow:hidden;padding:0 8px}\n"], components: [{ type: CardComponent, selector: "app-card", inputs: ["noBody", "dark"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i1__namespace$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  UsersCardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: UsersCardComponent, selector: "app-users-card", inputs: { members: "members", title: "title" }, ngImport: i0__namespace, template: "<app-card>\r\n  <h3 class=\"title\">\r\n    {{ title | translate }}\r\n  </h3>\r\n\r\n  <div class=\"body\">\r\n    <div class=\"images-container\">\r\n      <ng-container *ngFor=\"let member of members\">\r\n        <cts-avatar\r\n          class=\"member-avatar\"\r\n          matTooltip=\"{{ member.properties.user.properties.firstName }} {{\r\n            member.properties.user.properties.lastName\r\n          }} - {{ member.properties.role }}\" matTooltipClass=\"tdf-tooltip\" [user]=\"member?.properties?.user\"\r\n          *ngIf=\"member?.properties?.user\"\r\n          [routerLink]=\"['/users', 'profile', member?.properties.user?.properties.username]\">\r\n        </cts-avatar>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</app-card>\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}.member-avatar{display:inline-block;width:64px;height:64px;border-radius:100%;border:2px solid white;box-shadow:0 1px 5px 2px #00000021;margin:16px -8px;cursor:pointer;overflow:hidden}.images-container{overflow:hidden;padding:0 8px}\n"], components: [{ type: CardComponent, selector: "app-card", inputs: ["noBody", "dark"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1__namespace$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: UsersCardComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -41740,7 +41615,7 @@
       return NotificationItemComponent;
   }(DestroySubject));
   NotificationItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationItemComponent, selector: "app-notification-item", inputs: { iconOptions: "iconOptions", currentLang: "currentLang", notification: "notification" }, outputs: { markAsUnread: "markAsUnread", markAsRead: "markAsRead", markAsDeleted: "markAsDeleted" }, usesInheritance: true, ngImport: i0__namespace, template: "<div\r\n\t*ngIf=\"notification?.properties as properties\"\r\n\tclass=\"notification-item\"\r\n\t[class.new-item]=\"properties['notif_cnt:status'] == status.new\"\r\n\t[class.unread-item]=\"properties['notif_cnt:status'] == status.unRead\"\r\n>\r\n\t<div class=\"notification-item__icon\">\r\n\t\t<div class=\"notification-item__icon__wrapper\" *ngIf=\"iconOptions?.active\">\r\n\t\t\t<i [class]=\"notification | getIcon : iconOptions\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"notification-item__content\">\r\n\t\t<p class=\"notification-item__message line-clamp-2\">\r\n\t\t\t{{\r\n\t\t\t\tcurrentLang === 'ar-AR'\r\n\t\t\t\t\t? properties['notif_cnt:arMessage']\r\n\t\t\t\t\t: properties['notif_cnt:enMessage']\r\n\t\t\t}}\r\n\t\t</p>\r\n\t\t<button\r\n\t\t\tclass=\"mat-icon-button\"\r\n\t\t\t[matMenuTriggerFor]=\"appMenu\"\r\n\t\t\tmat-icon-button\r\n\t\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"mat-24\">more_horiz</mat-icon>\r\n\t\t</button>\r\n\t\t<span class=\"notification-item__date\">{{\r\n\t\t\tproperties['dc:created'] | timeAgo : currentLang\r\n\t\t}}</span>\r\n\t</div>\r\n\r\n\t<mat-menu\r\n\t\tclass=\"notification-item__actions\"\r\n\t\t#appMenu=\"matMenu\"\r\n\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t>\r\n\t\t<span\r\n\t\t\t(click)=\"closeMenu($event, appMenu)\"\r\n\t\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"properties['notif_cnt:status'] == status.read\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsUnread.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsUnread' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.new ||\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.unRead\r\n\t\t\t\t\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsRead.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsRead' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\t(click)=\"markAsDeleted.emit(notification)\"\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t>\r\n\t\t\t\t<span>{{ 'notifications.delete' | translate }}</span>\r\n\t\t\t</button>\r\n\t\t</span>\r\n\t</mat-menu>\r\n</div>\r\n", styles: [".notification-item{display:var(--n-item-display, grid);grid-template-columns:var(--n-item-columns, auto 1fr);grid-gap:var(--n-item-gap, .5rem);gap:var(--n-item-gap, .5rem);padding:var(--n-items-padding, .5rem 1rem);border:var(--n-item-border, solid #eee);border-width:var(--n-item-border-width, 0 0 1px 0);background:var(--n-item-background, transparent);min-height:var(--n-item-height, 85px);position:relative}.notification-item.new-item{--n-item-background: var(--n-status-new-color, #ecf8fe)}.notification-item.unread-item{--n-item-background: var(--n-status-unread-color, #ecf8fe)}.notification-item.unread-item:before{content:\"\";position:absolute;inset-inline-start:var(--n-item-unread-inline, 6px);inset-block-start:var(--n-item-unread-block, 6px);width:var(--n-item-unread-width, 8px);height:var(--n-item-unread-height, 8px);background:var(--n-item-unread-background, #39559d);border-radius:50%}.notification-item__icon{display:var(--n-item-icon-display, flex);align-items:var(--n-item-icon-align-items, center)}.notification-item__icon__wrapper{width:var(--n-item-icon-width, 56px);height:var(--n-item-icon-height, 56px);background:var(--n-item-icon-background, rgba(0, 0, 0, .025));color:var(--n-item-icon-color, #636363);font-size:var(--n-item-icon-size, 1.5rem);border-radius:var(--n-item-icon-radius, 50%);display:grid;place-items:center}.notification-item__content{display:var(--n-item-content-display, grid);grid-template-columns:var(--n-item-content-columns, 1fr auto);grid-gap:var(--n-item-gap, .2rem);gap:var(--n-item-gap, .2rem)}.notification-item__message{margin-bottom:0;font-size:var(--n-item-font-size, .9rem);color:var(--n-item-message-color)}.notification-item__date{font-size:var(--n-item-date-size, .8rem);text-align:var(--n-item-date-align, end);grid-column:var(--n-item-date-column, span 2);padding:var(--n-item-date-padding, 0 11px);color:var(--n-item-date-color)}.notification-item__actions{border-radius:var(--n-actions-radius, 4px);background:var(--n-actions-background, #fff);box-shadow:var(--n-actions-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notification-item__actions .mat-menu-content:not(:empty){padding:var(--n-actions--menu-padding, .5rem)}.notification-item__actions__item{text-align:var(--action-item-align, start)!important;background:var(--action-item-background, transparent)!important;color:var(--action-item-color, #28282d);padding:var(--action-item-padding, .4rem);height:var(--action-item-height, 38px);line-height:var(--action-item-line, 38px);border-radius:var(--action-item-radius, 4px);font-size:var(--action-item-size, 14px)}.notification-item__actions__item:hover{--action-item-background: var(--action-hover-background, #e6f7ff);--action-item-color: var(--action-hover-color, #005fdb)}\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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "getIcon": GetIconPipe, "timeAgo": TimeAgoPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  NotificationItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationItemComponent, selector: "app-notification-item", inputs: { iconOptions: "iconOptions", currentLang: "currentLang", notification: "notification" }, outputs: { markAsUnread: "markAsUnread", markAsRead: "markAsRead", markAsDeleted: "markAsDeleted" }, usesInheritance: true, ngImport: i0__namespace, template: "<div\r\n\t*ngIf=\"notification?.properties as properties\"\r\n\tclass=\"notification-item\"\r\n\t[class.new-item]=\"properties['notif_cnt:status'] == status.new\"\r\n\t[class.unread-item]=\"properties['notif_cnt:status'] == status.unRead\"\r\n>\r\n\t<div class=\"notification-item__icon\">\r\n\t\t<div class=\"notification-item__icon__wrapper\" *ngIf=\"iconOptions?.active\">\r\n\t\t\t<i [class]=\"notification | getIcon : iconOptions\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"notification-item__content\">\r\n\t\t<p class=\"notification-item__message line-clamp-2\">\r\n\t\t\t{{\r\n\t\t\t\tcurrentLang === 'ar-AR'\r\n\t\t\t\t\t? properties['notif_cnt:arMessage']\r\n\t\t\t\t\t: properties['notif_cnt:enMessage']\r\n\t\t\t}}\r\n\t\t</p>\r\n\t\t<button\r\n\t\t\tclass=\"mat-icon-button\"\r\n\t\t\t[matMenuTriggerFor]=\"appMenu\"\r\n\t\t\tmat-icon-button\r\n\t\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"mat-24\">more_horiz</mat-icon>\r\n\t\t</button>\r\n\t\t<span class=\"notification-item__date\">{{\r\n\t\t\tproperties['dc:created'] | timeAgo : currentLang\r\n\t\t}}</span>\r\n\t</div>\r\n\r\n\t<mat-menu\r\n\t\tclass=\"notification-item__actions\"\r\n\t\t#appMenu=\"matMenu\"\r\n\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t>\r\n\t\t<span\r\n\t\t\t(click)=\"closeMenu($event, appMenu)\"\r\n\t\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"properties['notif_cnt:status'] == status.read\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsUnread.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsUnread' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.new ||\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.unRead\r\n\t\t\t\t\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsRead.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsRead' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\t(click)=\"markAsDeleted.emit(notification)\"\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t>\r\n\t\t\t\t<span>{{ 'notifications.delete' | translate }}</span>\r\n\t\t\t</button>\r\n\t\t</span>\r\n\t</mat-menu>\r\n</div>\r\n", styles: [".notification-item{display:var(--n-item-display, grid);grid-template-columns:var(--n-item-columns, auto 1fr);grid-gap:var(--n-item-gap, .5rem);gap:var(--n-item-gap, .5rem);padding:var(--n-items-padding, .5rem 1rem);border:var(--n-item-border, solid #eee);border-width:var(--n-item-border-width, 0 0 1px 0);background:var(--n-item-background, transparent);min-height:var(--n-item-height, 85px);position:relative}.notification-item.new-item{--n-item-background: var(--n-status-new-color, #ecf8fe)}.notification-item.unread-item{--n-item-background: var(--n-status-unread-color, #ecf8fe)}.notification-item.unread-item:before{content:\"\";position:absolute;inset-inline-start:var(--n-item-unread-inline, 6px);inset-block-start:var(--n-item-unread-block, 6px);width:var(--n-item-unread-width, 8px);height:var(--n-item-unread-height, 8px);background:var(--n-item-unread-background, #39559d);border-radius:50%}.notification-item__icon{display:var(--n-item-icon-display, flex);align-items:var(--n-item-icon-align-items, center)}.notification-item__icon__wrapper{width:var(--n-item-icon-width, 56px);height:var(--n-item-icon-height, 56px);background:var(--n-item-icon-background, rgba(0, 0, 0, .025));color:var(--n-item-icon-color, #636363);font-size:var(--n-item-icon-size, 1.5rem);border-radius:var(--n-item-icon-radius, 50%);display:grid;place-items:center}.notification-item__content{display:var(--n-item-content-display, grid);grid-template-columns:var(--n-item-content-columns, 1fr auto);grid-gap:var(--n-item-gap, .2rem);gap:var(--n-item-gap, .2rem)}.notification-item__message{margin-bottom:0;font-size:var(--n-item-font-size, .9rem);color:var(--n-item-message-color)}.notification-item__date{font-size:var(--n-item-date-size, .8rem);text-align:var(--n-item-date-align, end);grid-column:var(--n-item-date-column, span 2);padding:var(--n-item-date-padding, 0 11px);color:var(--n-item-date-color)}.notification-item__actions{border-radius:var(--n-actions-radius, 4px);background:var(--n-actions-background, #fff);box-shadow:var(--n-actions-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notification-item__actions .mat-menu-content:not(:empty){padding:var(--n-actions--menu-padding, .5rem)}.notification-item__actions__item{text-align:var(--action-item-align, start)!important;background:var(--action-item-background, transparent)!important;color:var(--action-item-color, #28282d);padding:var(--action-item-padding, .4rem);height:var(--action-item-height, 38px);line-height:var(--action-item-line, 38px);border-radius:var(--action-item-radius, 4px);font-size:var(--action-item-size, 14px)}.notification-item__actions__item:hover{--action-item-background: var(--action-hover-background, #e6f7ff);--action-item-color: var(--action-hover-color, #005fdb)}\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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "getIcon": GetIconPipe, "timeAgo": TimeAgoPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -42132,7 +42007,7 @@
       return NotificationSourceSelectComponent;
   }(BaseNotification));
   NotificationSourceSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationSourceSelectComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationSourceSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: { typeChanged: "typeChanged" }, usesInheritance: true, ngImport: i0__namespace, template: "<span [dir]=\"direction$ | async\" *ngIf=\"sourceTypes$ | async as sourceTypes\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger px-2\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n    mat-stroked-button\r\n  >\r\n    <span>{{\r\n      (selectedFilterType\r\n        ? 'vocabulary.VOC_Notf_SourceTypes.' + selectedFilterType.properties.id\r\n        : 'notifications.allTypes'\r\n      ) | translate\r\n    }}</span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"source-type-select-menu\" #filterTypeMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        (click)=\"selectFilterType(null); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        *ngFor=\"let type of sourceTypes\"\r\n        (click)=\"selectFilterType(type); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{\r\n          'vocabulary.VOC_Notf_SourceTypes.' + type?.properties.id | translate\r\n        }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".source-type-select-menu{box-shadow:var(--source-type-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.source-type-select-menu .mat-menu-content:not(:empty){padding:var(--source-type-menu-padding, .5rem)}.source-type-select-menu__option{background:var(--source-type-option-background, transparent)!important;border-radius:var(--source-type-option-radius, 4px);font-size:var(--source-type-option-size, 14px);color:var(--source-type-option-color, #28282d);height:var(--source-type-option-height, 38px);line-height:var(--source-type-option-line-height, 38px)}.source-type-select-menu__option:hover{--source-type-option-background: var(--source-type-option-hover-background, #e6f7ff);--source-type-option-color: var(--source-type-option-hover-color, #005fdb)}.source-type-select-menu__option .mat-icon{color:currentColor}\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: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3__namespace$1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  NotificationSourceSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: { typeChanged: "typeChanged" }, usesInheritance: true, ngImport: i0__namespace, template: "<span [dir]=\"direction$ | async\" *ngIf=\"sourceTypes$ | async as sourceTypes\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger px-2\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n    mat-stroked-button\r\n  >\r\n    <span>{{\r\n      (selectedFilterType\r\n        ? 'vocabulary.VOC_Notf_SourceTypes.' + selectedFilterType.properties.id\r\n        : 'notifications.allTypes'\r\n      ) | translate\r\n    }}</span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"source-type-select-menu\" #filterTypeMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        (click)=\"selectFilterType(null); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        *ngFor=\"let type of sourceTypes\"\r\n        (click)=\"selectFilterType(type); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{\r\n          'vocabulary.VOC_Notf_SourceTypes.' + type?.properties.id | translate\r\n        }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".source-type-select-menu{box-shadow:var(--source-type-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.source-type-select-menu .mat-menu-content:not(:empty){padding:var(--source-type-menu-padding, .5rem)}.source-type-select-menu__option{background:var(--source-type-option-background, transparent)!important;border-radius:var(--source-type-option-radius, 4px);font-size:var(--source-type-option-size, 14px);color:var(--source-type-option-color, #28282d);height:var(--source-type-option-height, 38px);line-height:var(--source-type-option-line-height, 38px)}.source-type-select-menu__option:hover{--source-type-option-background: var(--source-type-option-hover-background, #e6f7ff);--source-type-option-color: var(--source-type-option-hover-color, #005fdb)}.source-type-select-menu__option .mat-icon{color:currentColor}\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: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationSourceSelectComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -42154,7 +42029,7 @@
       return NotificationStatusToggleComponent;
   }());
   NotificationStatusToggleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationStatusToggleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationStatusToggleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: { status: "status" }, outputs: { statusChanged: "statusChanged" }, ngImport: i0__namespace, template: "<div class=\"notification-toggle\" (click)=\"$event.stopPropagation()\">\r\n  <mat-slide-toggle [checked]=\"status\" (change)=\"statusChanged.emit($event)\">\r\n    <small class=\"px-2\">{{ 'notifications.read' | translate }}</small>\r\n  </mat-slide-toggle>\r\n</div>\r\n", styles: [":host{display:var(--n-status-toggle-display, flex);flex-direction:var(--n-status-toggle-direction, column);justify-content:var(--n-status-toggle-content, center)}:host ::ng-deep .mat-slide-toggle-label{margin-bottom:0}\n"], components: [{ type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], pipes: { "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  NotificationStatusToggleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: { status: "status" }, outputs: { statusChanged: "statusChanged" }, ngImport: i0__namespace, template: "<div class=\"notification-toggle\" (click)=\"$event.stopPropagation()\">\r\n  <mat-slide-toggle [checked]=\"status\" (change)=\"statusChanged.emit($event)\">\r\n    <small class=\"px-2\">{{ 'notifications.read' | translate }}</small>\r\n  </mat-slide-toggle>\r\n</div>\r\n", styles: [":host{display:var(--n-status-toggle-display, flex);flex-direction:var(--n-status-toggle-direction, column);justify-content:var(--n-status-toggle-content, center)}:host ::ng-deep .mat-slide-toggle-label{margin-bottom:0}\n"], components: [{ type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], 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: NotificationStatusToggleComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -42570,7 +42445,7 @@
       return NotificationsDateSelectComponent;
   }(BaseNotification));
   NotificationsDateSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsDateSelectComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationsDateSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: { dateChanged: "dateChanged" }, usesInheritance: true, ngImport: i0__namespace, template: "<span [dir]=\"direction$ | async\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"date-select-button\"\r\n    mat-stroked-button\r\n    [matMenuTriggerFor]=\"datesMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    <span>\r\n      {{\r\n        (selectedDate\r\n          ? 'notifications.dates.' + selectedDate.key\r\n          : 'notifications.dates.all'\r\n        ) | translate\r\n      }}\r\n    </span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"dates-select-menu\" #datesMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(null); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        *ngFor=\"let date of dates\"\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(date); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.' + date.key | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".dates-select-menu{box-shadow:var(--dates-select-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.dates-select-menu .mat-menu-content:not(:empty){padding:var(--dates-select-menu-padding, .5rem)}.dates-select-menu__option{background:var(--dates-select-option-background, transparent)!important;border-radius:var(--dates-select-option-radius, 4px);font-size:var(--dates-select-option-size, 14px);color:var(--dates-select-option-color, #28282d);height:var(--dates-select-option-height, 38px);line-height:var(--dates-select-option-line-height, 38px)}.dates-select-menu__option:hover{--dates-select-option-background: var(--dates-select-option-hover-background, #e6f7ff);--dates-select-option-color: var(--dates-select-option-hover-color, #005fdb)}.dates-select-menu__option .mat-icon{color:currentColor}\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: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3__namespace$1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  NotificationsDateSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: { dateChanged: "dateChanged" }, usesInheritance: true, ngImport: i0__namespace, template: "<span [dir]=\"direction$ | async\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"date-select-button\"\r\n    mat-stroked-button\r\n    [matMenuTriggerFor]=\"datesMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    <span>\r\n      {{\r\n        (selectedDate\r\n          ? 'notifications.dates.' + selectedDate.key\r\n          : 'notifications.dates.all'\r\n        ) | translate\r\n      }}\r\n    </span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"dates-select-menu\" #datesMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(null); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        *ngFor=\"let date of dates\"\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(date); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.' + date.key | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".dates-select-menu{box-shadow:var(--dates-select-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.dates-select-menu .mat-menu-content:not(:empty){padding:var(--dates-select-menu-padding, .5rem)}.dates-select-menu__option{background:var(--dates-select-option-background, transparent)!important;border-radius:var(--dates-select-option-radius, 4px);font-size:var(--dates-select-option-size, 14px);color:var(--dates-select-option-color, #28282d);height:var(--dates-select-option-height, 38px);line-height:var(--dates-select-option-line-height, 38px)}.dates-select-menu__option:hover{--dates-select-option-background: var(--dates-select-option-hover-background, #e6f7ff);--dates-select-option-color: var(--dates-select-option-hover-color, #005fdb)}.dates-select-menu__option .mat-icon{color:currentColor}\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: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsDateSelectComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -42598,7 +42473,7 @@
       return NotificationsListActionsComponent;
   }());
   NotificationsListActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsListActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationsListActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: { options: "options", direction: "direction" }, outputs: { markAllAsRead: "markAllAsRead", openSettings: "openSettings", openNotifications: "openNotifications" }, ngImport: i0__namespace, template: "<span [dir]=\"direction\" *ngIf=\"options?.active\">\r\n  <button\r\n    [matMenuTriggerFor]=\"actions\"\r\n    mat-icon-button\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <mat-icon>more_horiz</mat-icon>\r\n  </button>\r\n  <mat-menu #actions=\"matMenu\" class=\"notifications-actions-menu\">\r\n    <span (click)=\"closeMenu($event, actions)\">\r\n      <button\r\n        *ngIf=\"options.updateState\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"markAllAsRead.emit($event)\"\r\n      >\r\n        <mat-icon>done_all</mat-icon>\r\n        <span>{{ 'notifications.markAllAsRead' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openSetting\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openSettings.emit($event)\"\r\n      >\r\n        <mat-icon>tune</mat-icon>\r\n        <span>{{ 'notifications.notificationSettings' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openNotification\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openNotifications.emit($event)\"\r\n      >\r\n        <mat-icon>open_in_browser</mat-icon>\r\n        <span>{{ 'notifications.openNotifications' | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".notifications-actions-menu{box-shadow:var(--n-actions-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notifications-actions-menu .mat-menu-content:not(:empty){padding:var(--n-actions-menu-padding, .5rem)}.notifications-actions-menu__action{background:var(--n-menu-action-background, transparent)!important;border-radius:var(--n-menu-action-radius, 4px);font-size:var(--n-menu-action-size, 14px);color:var(--n-menu-action-color, #28282d);height:var(--n-menu-action-height, 40px);line-height:var(--n-menu-action-line-height, 40px)}.notifications-actions-menu__action:hover{--n-menu-action-background: var(--n-menu-action-hover-background, #e6f7ff);--n-menu-action-color: var(--n-menu-action-hover-color, #005fdb)}.notifications-actions-menu__action .mat-icon{color:currentColor}\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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  NotificationsListActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: { options: "options", direction: "direction" }, outputs: { markAllAsRead: "markAllAsRead", openSettings: "openSettings", openNotifications: "openNotifications" }, ngImport: i0__namespace, template: "<span [dir]=\"direction\" *ngIf=\"options?.active\">\r\n  <button\r\n    [matMenuTriggerFor]=\"actions\"\r\n    mat-icon-button\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <mat-icon>more_horiz</mat-icon>\r\n  </button>\r\n  <mat-menu #actions=\"matMenu\" class=\"notifications-actions-menu\">\r\n    <span (click)=\"closeMenu($event, actions)\">\r\n      <button\r\n        *ngIf=\"options.updateState\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"markAllAsRead.emit($event)\"\r\n      >\r\n        <mat-icon>done_all</mat-icon>\r\n        <span>{{ 'notifications.markAllAsRead' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openSetting\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openSettings.emit($event)\"\r\n      >\r\n        <mat-icon>tune</mat-icon>\r\n        <span>{{ 'notifications.notificationSettings' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openNotification\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openNotifications.emit($event)\"\r\n      >\r\n        <mat-icon>open_in_browser</mat-icon>\r\n        <span>{{ 'notifications.openNotifications' | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".notifications-actions-menu{box-shadow:var(--n-actions-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notifications-actions-menu .mat-menu-content:not(:empty){padding:var(--n-actions-menu-padding, .5rem)}.notifications-actions-menu__action{background:var(--n-menu-action-background, transparent)!important;border-radius:var(--n-menu-action-radius, 4px);font-size:var(--n-menu-action-size, 14px);color:var(--n-menu-action-color, #28282d);height:var(--n-menu-action-height, 40px);line-height:var(--n-menu-action-line-height, 40px)}.notifications-actions-menu__action:hover{--n-menu-action-background: var(--n-menu-action-hover-background, #e6f7ff);--n-menu-action-color: var(--n-menu-action-hover-color, #005fdb)}.notifications-actions-menu__action .mat-icon{color:currentColor}\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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsListActionsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -42653,7 +42528,7 @@
       return NotificationsListComponent;
   }(BaseListNotifications));
   NotificationsListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsListComponent, deps: [{ token: i0__namespace.Injector }, { token: NOTIFICATIONS_LIST_OPTIONS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListComponent, selector: "app-notifications-list", outputs: { openSettings: "openSettings", openNotifications: "openNotifications" }, providers: [ParamsService, ResponseService], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"notifications-list\">\r\n  <div class=\"notifications-list__header\">\r\n    <span *ngIf=\"options.title\">\r\n      <strong class=\"notifications-list__title\">{{ options.title | translate }}</strong>\r\n    </span>\r\n    <div class=\"notifications-list__actions\">\r\n      <ng-container *ngIf=\"options?.filters?.active\">\r\n        <app-notification-source-select\r\n          *ngIf=\"options?.filters?.type\"\r\n\r\n          (typeChanged)=\"typeChanged($event)\"\r\n        ></app-notification-source-select>\r\n        <app-notifications-date-select\r\n          *ngIf=\"options?.filters?.date\"\r\n\r\n          (dateChanged)=\"dateChanged($event)\"\r\n        ></app-notifications-date-select>\r\n        <app-notification-status-toggle\r\n          *ngIf=\"options?.filters?.state\"\r\n          (statusChanged)=\"statusChanged($event)\"\r\n        ></app-notification-status-toggle>\r\n      </ng-container>\r\n\r\n      <app-notifications-list-actions\r\n        [options]=\"options.actions\"\r\n        [direction]=\"direction$ | async\"\r\n        (markAllAsRead)=\"markAllAsRead($event)\"\r\n        (openNotifications)=\"openNotifications.emit($event)\"\r\n        (openSettings)=\"openSettings.emit($event)\"\r\n      ></app-notifications-list-actions>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"response$ | async as response; else loading\"\r\n    class=\"notifications-list__body\"\r\n    infiniteScroll\r\n    [scrollWindow]=\"false\"\r\n    [infiniteScrollDistance]=\"options.scroll?.distance || 2\"\r\n    [infiniteScrollThrottle]=\"options.scroll?.throttle || 300\"\r\n    (scrolled)=\"onScrollDown()\"\r\n  >\r\n    <ng-container *ngIf=\"response.data?.length; else noData\">\r\n      <app-notification-item\r\n        *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n        [iconOptions]=\"options?.icons\"\r\n        [notification]=\"item\"\r\n        [currentLang]=\"currentLang\"\r\n        [class.cursor-pointer]=\"item.properties?.['notf_nt:isClickable']\"\r\n        (click)=\"onItemClick(item)\"\r\n        (markAsUnread)=\"markAsUnread(item)\"\r\n        (markAsRead)=\"markAsRead(item)\"\r\n        (markAsDeleted)=\"markAsDeleted(item)\"\r\n      ></app-notification-item>\r\n    </ng-container>\r\n    <mat-spinner\r\n      *ngIf=\"isLoadingResult\"\r\n      class=\"notifications-list__loader mt-2 mx-auto\"\r\n      [diameter]=\"48\"\r\n    ></mat-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #filters>\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    {{ 'notifications.all' | translate }}\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"new-menu-design\" #filterTypeMenu=\"matMenu\">\r\n    <div (click)=\"$event.stopPropagation()\">\r\n      <div class=\"single-menu-action notification-filter-menu-item\">\r\n        {{ 'notifications.' + type.name | translate }}\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>\r\n      {{ 'notifications.noNotifications' | translate }}\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #loading>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>{{ 'notifications.loading_notification' | translate }}</p>\r\n  </div>\r\n</ng-template>\r\n", styles: [".notifications-list{padding:var(--nto-list-padding, 0)}.notifications-list__header{padding:var(--nto-list-header-padding, .5rem);display:var(--nto-list-header-display, flex);justify-content:var(--nto-list-header-justify, space-between);align-items:var(--nto-list-header-align-items, center);box-sizing:border-box;background:var(--nto-list-header-background, transparent);color:var(--nto-list-header-color, currentColor)}.notifications-list__title{color:var(--nto-list-title-color, #234990);font-size:var(--nto-list-title-size, 1rem);font-weight:var(--nto-list-title-weight, 600)}.notifications-list__actions{display:var(--nto-container-filters-display, flex);grid-gap:var(--nto-container-filters-gap, .5rem);gap:var(--nto-container-filters-gap, .5rem)}.notifications-list__loader{display:grid;place-items:center}.notifications-list__body{height:var(--nto-list-height, 60vh);overflow-y:auto}.no-notifications{color:var(--no-notifications-color, #b4bac6);font-size:var(--no-notifications-size, 1rem)}\n"], components: [{ type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: ["typeChanged"] }, { type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: ["dateChanged"] }, { type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: ["status"], outputs: ["statusChanged"] }, { type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: ["options", "direction"], outputs: ["markAllAsRead", "openSettings", "openNotifications"] }, { type: NotificationItemComponent, selector: "app-notification-item", inputs: ["iconOptions", "currentLang", "notification"], outputs: ["markAsUnread", "markAsRead", "markAsDeleted"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1__namespace.TranslatePipe, "async": i4__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  NotificationsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListComponent, selector: "app-notifications-list", outputs: { openSettings: "openSettings", openNotifications: "openNotifications" }, providers: [ParamsService, ResponseService], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"notifications-list\">\r\n  <div class=\"notifications-list__header\">\r\n    <span *ngIf=\"options.title\">\r\n      <strong class=\"notifications-list__title\">{{ options.title | translate }}</strong>\r\n    </span>\r\n    <div class=\"notifications-list__actions\">\r\n      <ng-container *ngIf=\"options?.filters?.active\">\r\n        <app-notification-source-select\r\n          *ngIf=\"options?.filters?.type\"\r\n\r\n          (typeChanged)=\"typeChanged($event)\"\r\n        ></app-notification-source-select>\r\n        <app-notifications-date-select\r\n          *ngIf=\"options?.filters?.date\"\r\n\r\n          (dateChanged)=\"dateChanged($event)\"\r\n        ></app-notifications-date-select>\r\n        <app-notification-status-toggle\r\n          *ngIf=\"options?.filters?.state\"\r\n          (statusChanged)=\"statusChanged($event)\"\r\n        ></app-notification-status-toggle>\r\n      </ng-container>\r\n\r\n      <app-notifications-list-actions\r\n        [options]=\"options.actions\"\r\n        [direction]=\"direction$ | async\"\r\n        (markAllAsRead)=\"markAllAsRead($event)\"\r\n        (openNotifications)=\"openNotifications.emit($event)\"\r\n        (openSettings)=\"openSettings.emit($event)\"\r\n      ></app-notifications-list-actions>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"response$ | async as response; else loading\"\r\n    class=\"notifications-list__body\"\r\n    infiniteScroll\r\n    [scrollWindow]=\"false\"\r\n    [infiniteScrollDistance]=\"options.scroll?.distance || 2\"\r\n    [infiniteScrollThrottle]=\"options.scroll?.throttle || 300\"\r\n    (scrolled)=\"onScrollDown()\"\r\n  >\r\n    <ng-container *ngIf=\"response.data?.length; else noData\">\r\n      <app-notification-item\r\n        *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n        [iconOptions]=\"options?.icons\"\r\n        [notification]=\"item\"\r\n        [currentLang]=\"currentLang\"\r\n        [class.cursor-pointer]=\"item.properties?.['notf_nt:isClickable']\"\r\n        (click)=\"onItemClick(item)\"\r\n        (markAsUnread)=\"markAsUnread(item)\"\r\n        (markAsRead)=\"markAsRead(item)\"\r\n        (markAsDeleted)=\"markAsDeleted(item)\"\r\n      ></app-notification-item>\r\n    </ng-container>\r\n    <mat-spinner\r\n      *ngIf=\"isLoadingResult\"\r\n      class=\"notifications-list__loader mt-2 mx-auto\"\r\n      [diameter]=\"48\"\r\n    ></mat-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #filters>\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    {{ 'notifications.all' | translate }}\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"new-menu-design\" #filterTypeMenu=\"matMenu\">\r\n    <div (click)=\"$event.stopPropagation()\">\r\n      <div class=\"single-menu-action notification-filter-menu-item\">\r\n        {{ 'notifications.' + type.name | translate }}\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>\r\n      {{ 'notifications.noNotifications' | translate }}\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #loading>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>{{ 'notifications.loading_notification' | translate }}</p>\r\n  </div>\r\n</ng-template>\r\n", styles: [".notifications-list{padding:var(--nto-list-padding, 0)}.notifications-list__header{padding:var(--nto-list-header-padding, .5rem);display:var(--nto-list-header-display, flex);justify-content:var(--nto-list-header-justify, space-between);align-items:var(--nto-list-header-align-items, center);box-sizing:border-box;background:var(--nto-list-header-background, transparent);color:var(--nto-list-header-color, currentColor)}.notifications-list__title{color:var(--nto-list-title-color, #234990);font-size:var(--nto-list-title-size, 1rem);font-weight:var(--nto-list-title-weight, 600)}.notifications-list__actions{display:var(--nto-container-filters-display, flex);grid-gap:var(--nto-container-filters-gap, .5rem);gap:var(--nto-container-filters-gap, .5rem)}.notifications-list__loader{display:grid;place-items:center}.notifications-list__body{height:var(--nto-list-height, 60vh);overflow-y:auto}.no-notifications{color:var(--no-notifications-color, #b4bac6);font-size:var(--no-notifications-size, 1rem)}\n"], components: [{ type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: ["typeChanged"] }, { type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: ["dateChanged"] }, { type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: ["status"], outputs: ["statusChanged"] }, { type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: ["options", "direction"], outputs: ["markAllAsRead", "openSettings", "openNotifications"] }, { type: NotificationItemComponent, selector: "app-notification-item", inputs: ["iconOptions", "currentLang", "notification"], outputs: ["markAsUnread", "markAsRead", "markAsDeleted"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1__namespace.TranslatePipe, "async": i4__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsListComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -42970,7 +42845,7 @@
       return NotificationsButtonComponent;
   }(BaseNotification));
   NotificationsButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsButtonComponent, deps: [{ token: i0__namespace.Injector }, { token: TranslationService }, { token: CustomToastrService }, { token: i0__namespace.ChangeDetectorRef }, { token: NOTIFICATIONS_LIST_OPTIONS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationsButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsButtonComponent, selector: "app-notifications-button", inputs: { styleClass: "styleClass", badgeOptions: "badgeOptions", shouldMarkAsUnread: "shouldMarkAsUnread", ignoredToastEvents: "ignoredToastEvents" }, outputs: { listItemClick: "listItemClick", openSettings: "openSettings", openNotifications: "openNotifications", onNotification: "onNotification" }, host: { classAttribute: "inline-flex justify-center items-center notification-button" }, queries: [{ propertyName: "customIconTemplate", first: true, predicate: NOTIFICATION_ICON, descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<button\r\n\t*ngIf=\"panelMode === panelModeEnum.panel\"\r\n\t[matMenuTriggerFor]=\"notifications\"\r\n\t[matBadge]=\"newNotificationCount$ | async\"\r\n\t[matBadgeHidden]=\"!(showBadge$ | async)\"\r\n\t[matBadgeSize]=\"badgeOptions.size\"\r\n\t[matBadgeColor]=\"badgeOptions.color\"\r\n\t[matBadgePosition]=\"badgeOptions.position\"\r\n\t[class]=\"styleClass\"\r\n>\r\n\t<ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\"> </ng-container>\r\n</button>\r\n\r\n<mat-menu #notifications=\"matMenu\" class=\"notification-list-panel\">\r\n\t<ng-template matMenuContent>\r\n\t\t<app-notifications-list\r\n\t\t\t(itemClicked)=\"listItemClick.emit($event); notifications.closed.emit()\"\r\n\t\t\t(openSettings)=\"openSettings.emit($event); notifications.closed.emit()\"\r\n\t\t\t(openNotifications)=\"openNotifications.emit($event); notifications.closed.emit()\"\r\n\t\t\t(markAllRead)=\"refreshUnreadCount()\"\r\n\t\t></app-notifications-list>\r\n\t</ng-template>\r\n\t<div class=\"notification-list-panel__footer flex justify-center\">\r\n\t\t<ng-content select=\"[notifications-footer]\"></ng-content>\r\n\t</div>\r\n</mat-menu>\r\n\r\n<ng-container *ngIf=\"panelMode === panelModeEnum.sidebar\">\r\n\t<button\r\n\t\t[matBadge]=\"newNotificationCount$ | async\"\r\n\t\t[matBadgeHidden]=\"!(showBadge$ | async)\"\r\n\t\t[matBadgeSize]=\"badgeOptions.size\"\r\n\t\t[matBadgeColor]=\"badgeOptions.color\"\r\n\t\t[matBadgePosition]=\"badgeOptions.position\"\r\n\t\t[class]=\"styleClass\"\r\n\t\t(click)=\"toggleSideBar()\"\r\n\t>\r\n\t\t<ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\"> </ng-container>\r\n\t</button>\r\n\t<app-notifications-sidebar\r\n\t\t[(visible)]=\"isSidebarOpened\"\r\n\t\t(visibleChange)=\"refreshUnreadCount()\"\r\n\t\t[position]=\"sidebarPosition$ | async\"\r\n\t>\r\n\t\t<ng-template appNotificationSidebarContent>\r\n\t\t\t<app-notifications-list\r\n\t\t\t\tclass=\"notifications-sidebar\"\r\n\t\t\t\t(itemClicked)=\"listItemClick.emit($event); toggleSideBar(false); refreshUnreadCount()\"\r\n\t\t\t\t(openSettings)=\"openSettings.emit($event); toggleSideBar(false)\"\r\n\t\t\t\t(openNotifications)=\"openNotifications.emit($event); toggleSideBar(false)\"\r\n\t\t\t\t(markAllRead)=\"refreshUnreadCount()\"\r\n\t\t\t></app-notifications-list>\r\n\t\t</ng-template>\r\n\t</app-notifications-sidebar>\r\n</ng-container>\r\n\r\n<ng-template #defaultIconTemplate>\r\n\t<i class=\"bi bi-bell bell\"></i>\r\n</ng-template>\r\n", styles: [".notification-button{font-size:var(--not-btn-font-size, 1.5rem);width:var(--not-btn-width, 40px)}.notification-button .mat-badge-content{text-overflow:unset;width:18px;height:18px;line-height:18px}.notification-list-panel{--width: var(--nos-panel-width, min(80vw, 450px));width:var(--width);border-radius:var(--nos-panel-radius, 5px);overflow:hidden;-webkit-overflow-scrolling:touch;outline:0;background:var(--nos-panel-background, #fff)}.notification-list-panel.mat-menu-panel{max-width:var(--width);max-height:var(--nos-panel-max-height, var(--height))}.notification-list-panel__navigate-btn{background:var(--not-btn-background, transparent);border-radius:var(--not-btn-radius, 5px);padding:var(--not-btn-padding, .5rem 1rem);margin:var(--not-btn-margin, .5rem 0);color:var(--not-btn-color, currentColor);width:var(--not-btn-width, 90%)}.notification-list-panel__navigate-btn:hover{--not-btn-background: var(--not-btn-hover-background, #f0f0f0);--not-btn-color: var(--not-btn-hover-color);-webkit-text-decoration:var(--not-btn-decoration, none);text-decoration:var(--not-btn-decoration, none)}.notification-list-panel__navigate-btn:active{--not-btn-background: var(--not-btn-active-background, #e2e2e2);--not-btn-color: var(--not-btn-active-color)}.notifications-sidebar{--nto-list-header-padding: var(--sidebar-list-header-padding, 1rem);--nto-list-height: var(--sidebar-list-height, calc(100vh - 100px))}\n"], components: [{ type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationsListComponent, selector: "app-notifications-list", outputs: ["openSettings", "openNotifications"] }, { type: NotificationsSidebarComponent, selector: "app-notifications-sidebar", inputs: ["appendToBody", "clearOnCLose", "visible", "position"], outputs: ["visibleChange", "onShow", "onHide"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i7__namespace$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { type: NotificationSidebarContentDirective, selector: "[appNotificationSidebarContent]" }], pipes: { "async": i4__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  NotificationsButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsButtonComponent, selector: "app-notifications-button", inputs: { styleClass: "styleClass", badgeOptions: "badgeOptions", shouldMarkAsUnread: "shouldMarkAsUnread", ignoredToastEvents: "ignoredToastEvents" }, outputs: { listItemClick: "listItemClick", openSettings: "openSettings", openNotifications: "openNotifications", onNotification: "onNotification" }, host: { classAttribute: "inline-flex justify-center items-center notification-button" }, queries: [{ propertyName: "customIconTemplate", first: true, predicate: NOTIFICATION_ICON, descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<button\r\n\t*ngIf=\"panelMode === panelModeEnum.panel\"\r\n\t[matMenuTriggerFor]=\"notifications\"\r\n\t[matBadge]=\"newNotificationCount$ | async\"\r\n\t[matBadgeHidden]=\"!(showBadge$ | async)\"\r\n\t[matBadgeSize]=\"badgeOptions.size\"\r\n\t[matBadgeColor]=\"badgeOptions.color\"\r\n\t[matBadgePosition]=\"badgeOptions.position\"\r\n\t[class]=\"styleClass\"\r\n>\r\n\t<ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\"> </ng-container>\r\n</button>\r\n\r\n<mat-menu #notifications=\"matMenu\" class=\"notification-list-panel\">\r\n\t<ng-template matMenuContent>\r\n\t\t<app-notifications-list\r\n\t\t\t(itemClicked)=\"listItemClick.emit($event); notifications.closed.emit()\"\r\n\t\t\t(openSettings)=\"openSettings.emit($event); notifications.closed.emit()\"\r\n\t\t\t(openNotifications)=\"openNotifications.emit($event); notifications.closed.emit()\"\r\n\t\t\t(markAllRead)=\"refreshUnreadCount()\"\r\n\t\t></app-notifications-list>\r\n\t</ng-template>\r\n\t<div class=\"notification-list-panel__footer flex justify-center\">\r\n\t\t<ng-content select=\"[notifications-footer]\"></ng-content>\r\n\t</div>\r\n</mat-menu>\r\n\r\n<ng-container *ngIf=\"panelMode === panelModeEnum.sidebar\">\r\n\t<button\r\n\t\t[matBadge]=\"newNotificationCount$ | async\"\r\n\t\t[matBadgeHidden]=\"!(showBadge$ | async)\"\r\n\t\t[matBadgeSize]=\"badgeOptions.size\"\r\n\t\t[matBadgeColor]=\"badgeOptions.color\"\r\n\t\t[matBadgePosition]=\"badgeOptions.position\"\r\n\t\t[class]=\"styleClass\"\r\n\t\t(click)=\"toggleSideBar()\"\r\n\t>\r\n\t\t<ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\"> </ng-container>\r\n\t</button>\r\n\t<app-notifications-sidebar\r\n\t\t[(visible)]=\"isSidebarOpened\"\r\n\t\t(visibleChange)=\"refreshUnreadCount()\"\r\n\t\t[position]=\"sidebarPosition$ | async\"\r\n\t>\r\n\t\t<ng-template appNotificationSidebarContent>\r\n\t\t\t<app-notifications-list\r\n\t\t\t\tclass=\"notifications-sidebar\"\r\n\t\t\t\t(itemClicked)=\"listItemClick.emit($event); toggleSideBar(false); refreshUnreadCount()\"\r\n\t\t\t\t(openSettings)=\"openSettings.emit($event); toggleSideBar(false)\"\r\n\t\t\t\t(openNotifications)=\"openNotifications.emit($event); toggleSideBar(false)\"\r\n\t\t\t\t(markAllRead)=\"refreshUnreadCount()\"\r\n\t\t\t></app-notifications-list>\r\n\t\t</ng-template>\r\n\t</app-notifications-sidebar>\r\n</ng-container>\r\n\r\n<ng-template #defaultIconTemplate>\r\n\t<i class=\"bi bi-bell bell\"></i>\r\n</ng-template>\r\n", styles: [".notification-button{font-size:var(--not-btn-font-size, 1.5rem);width:var(--not-btn-width, 40px)}.notification-button .mat-badge-content{text-overflow:unset;width:18px;height:18px;line-height:18px}.notification-list-panel{--width: var(--nos-panel-width, min(80vw, 450px));width:var(--width);border-radius:var(--nos-panel-radius, 5px);overflow:hidden;-webkit-overflow-scrolling:touch;outline:0;background:var(--nos-panel-background, #fff)}.notification-list-panel.mat-menu-panel{max-width:var(--width);max-height:var(--nos-panel-max-height, var(--height))}.notification-list-panel__navigate-btn{background:var(--not-btn-background, transparent);border-radius:var(--not-btn-radius, 5px);padding:var(--not-btn-padding, .5rem 1rem);margin:var(--not-btn-margin, .5rem 0);color:var(--not-btn-color, currentColor);width:var(--not-btn-width, 90%)}.notification-list-panel__navigate-btn:hover{--not-btn-background: var(--not-btn-hover-background, #f0f0f0);--not-btn-color: var(--not-btn-hover-color);-webkit-text-decoration:var(--not-btn-decoration, none);text-decoration:var(--not-btn-decoration, none)}.notification-list-panel__navigate-btn:active{--not-btn-background: var(--not-btn-active-background, #e2e2e2);--not-btn-color: var(--not-btn-active-color)}.notifications-sidebar{--nto-list-header-padding: var(--sidebar-list-header-padding, 1rem);--nto-list-height: var(--sidebar-list-height, calc(100vh - 100px))}\n"], components: [{ type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationsListComponent, selector: "app-notifications-list", outputs: ["openSettings", "openNotifications"] }, { type: NotificationsSidebarComponent, selector: "app-notifications-sidebar", inputs: ["appendToBody", "clearOnCLose", "visible", "position"], outputs: ["visibleChange", "onShow", "onHide"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i7__namespace$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { type: NotificationSidebarContentDirective, selector: "[appNotificationSidebarContent]" }], pipes: { "async": i4__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsButtonComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -43036,7 +42911,7 @@
       return NotificationSortbyToggleComponent;
   }());
   NotificationSortbyToggleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationSortbyToggleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationSortbyToggleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationSortbyToggleComponent, selector: "app-notification-sortby-toggle", inputs: { status: "status" }, outputs: { newestFirstChanged: "newestFirstChanged" }, ngImport: i0__namespace, template: "<div class=\"notification-toggle\" (click)=\"$event.stopPropagation()\">\r\n    <mat-slide-toggle [checked]=\"status\" (change)=\"newestFirstChanged.emit($event)\">\r\n      <small class=\"px-2\">{{ 'notifications.newest' | translate }}</small>\r\n    </mat-slide-toggle>\r\n  </div>", styles: [":host{display:var(--n-status-toggle-display, flex);flex-direction:var(--n-status-toggle-direction, column);justify-content:var(--n-status-toggle-content, center)}:host ::ng-deep .mat-slide-toggle-label{margin-bottom:0}\n"], components: [{ type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], pipes: { "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  NotificationSortbyToggleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationSortbyToggleComponent, selector: "app-notification-sortby-toggle", inputs: { status: "status" }, outputs: { newestFirstChanged: "newestFirstChanged" }, ngImport: i0__namespace, template: "<div class=\"notification-toggle\" (click)=\"$event.stopPropagation()\">\r\n    <mat-slide-toggle [checked]=\"status\" (change)=\"newestFirstChanged.emit($event)\">\r\n      <small class=\"px-2\">{{ 'notifications.newest' | translate }}</small>\r\n    </mat-slide-toggle>\r\n  </div>", styles: [":host{display:var(--n-status-toggle-display, flex);flex-direction:var(--n-status-toggle-direction, column);justify-content:var(--n-status-toggle-content, center)}:host ::ng-deep .mat-slide-toggle-label{margin-bottom:0}\n"], components: [{ type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], 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: NotificationSortbyToggleComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -43141,7 +43016,7 @@
       return NotificationsListContainerComponent;
   }(BaseListNotifications));
   NotificationsListContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsListContainerComponent, deps: [{ token: i0__namespace.Injector }, { token: NOTIFICATIONS_LIST_OPTIONS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationsListContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListContainerComponent, selector: "app-notifications-list-container", inputs: { styleClass: "styleClass", showFilters: "showFilters", showNewestToggle: "showNewestToggle", criteria: "criteria" }, providers: [ParamsService, ResponseService], queries: [{ propertyName: "customItemTemplate", first: true, predicate: NOTIFICATION_ITEM, descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"notifications-container {{ styleClass }}\">\r\n  <div class=\"notifications-container__header\">\r\n    <span class=\"notifications-container__title\">\r\n      <span *ngIf=\"options.title\"> {{ options.title | translate }}</span>\r\n    </span>\r\n    <div class=\"notifications-container__filters\" *ngIf=\"showFilters\">\r\n      <app-notification-source-select\r\n        *ngIf=\"options?.filters?.type\"\r\n        (typeChanged)=\"typeChanged($event)\"\r\n      ></app-notification-source-select>\r\n      <app-notifications-date-select\r\n        *ngIf=\"options?.filters?.date\"\r\n        (dateChanged)=\"dateChanged($event)\"\r\n      ></app-notifications-date-select>\r\n      <app-notification-status-toggle\r\n        *ngIf=\"options?.filters?.state\"\r\n        (statusChanged)=\"statusChanged($event)\"\r\n      ></app-notification-status-toggle>\r\n      <app-notification-sortby-toggle \r\n      *ngIf=\"showNewestToggle\"\r\n      (newestFirstChanged)=\"newestFirstChanged($event)\"\r\n      ></app-notification-sortby-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"response$ | async as response\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"\r\n        paginationMode == paginationModeEnum.scroll\r\n          ? scrollModeTemplate\r\n          : paginationModeTemplate\r\n      \"\r\n      [ngTemplateOutletContext]=\"{ $implicit: response }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #scrollModeTemplate let-response>\r\n    <div\r\n      class=\"notifications-container__body\"\r\n      infiniteScroll\r\n      [scrollWindow]=\"options.scroll?.scrollWindow\"\r\n      [infiniteScrollDistance]=\"options.scroll?.distance || 2\"\r\n      [infiniteScrollThrottle]=\"options.scroll?.throttle || 300\"\r\n      (scrolled)=\"onScrollDown()\"\r\n    >\r\n      <ng-container *ngIf=\"response.data?.length; else noData\">\r\n        <ng-container\r\n          *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n          [ngTemplateOutlet]=\"customItemTemplate || defaultItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: item,\r\n            markAsUnread: markAsUnread,\r\n            markAsRead: markAsRead,\r\n            markAsDeleted: markAsDeleted\r\n          }\"\r\n        >\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <mat-spinner\r\n        [diameter]=\"48\"\r\n        class=\"notifications-container__loader mt-2 mx-auto\"\r\n        *ngIf=\"isLoadingResult\"\r\n      ></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #paginationModeTemplate let-response>\r\n    <div\r\n      class=\"notifications-container__body--pagination mb-3\"\r\n      *ngIf=\"response.data?.length; else noData\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n        [ngTemplateOutlet]=\"customItemTemplate || defaultItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          $implicit: item,\r\n          markAsUnread: markAsUnread,\r\n          markAsRead: markAsRead,\r\n          markAsDeleted: markAsDeleted\r\n        }\"\r\n      >\r\n      </ng-container>\r\n      <div class=\"notifications-container__pagination-loader\" *ngIf=\"isLoadingResult\">\r\n        <mat-spinner [diameter]=\"48\"></mat-spinner>\r\n      </div>\r\n    </div>\r\n\r\n    <cts-pagination\r\n      [page]=\"selectedPage + 1\"\r\n      (change)=\"changePage($event - 1)\"\r\n      [size]=\"options.pageSize\"\r\n      [count]=\"response.totalItems\"\r\n    >\r\n    </cts-pagination>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #filters>\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    {{ 'notifications.all' | translate }}\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"new-menu-design\" #filterTypeMenu=\"matMenu\">\r\n    <div (click)=\"$event.stopPropagation()\">\r\n      <div class=\"single-menu-action notification-filter-menu-item\">\r\n        {{ 'notifications.' + type.name | translate }}\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>\r\n      {{ 'notifications.noNotifications' | translate }}\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate let-item>\r\n  <app-notification-item\r\n    [iconOptions]=\"options?.icons\"\r\n    [notification]=\"item\"\r\n    [currentLang]=\"currentLang\"\r\n    [class.cursor-pointer]=\"item.properties?.['notf_nt:isClickable']\"\r\n    (click)=\"onItemClick(item)\"\r\n    (markAsUnread)=\"markAsUnread(item)\"\r\n    (markAsRead)=\"markAsRead(item)\"\r\n    (markAsDeleted)=\"markAsDeleted(item)\"\r\n  ></app-notification-item>\r\n</ng-template>\r\n", styles: [".notifications-container{padding:var(--nto-container-padding, 0)}.notifications-container__header{padding:var(--nto-container-header-padding, .5rem);display:var(--nto-container-header-display, flex);justify-content:var(--nto-container-header-justify, space-between);align-items:var(--nto-container-header-align-items, center);box-sizing:border-box}.notifications-container__title{color:var(--nto-container-title-color, #2f258a);font-size:var(--nto-container-title-size, 1.1rem);font-weight:var(--nto-container-title-weight, normal)}.notifications-container__filters{display:var(--nto-container-filters-display, flex);grid-gap:var(--nto-container-filters-gap, .5rem);gap:var(--nto-container-filters-gap, .5rem)}.notifications-container__body{position:relative;height:var(--nto-container-height, 74vh);overflow-y:auto}.notifications-container__body--pagination{--nto-container-height: var(--nto-container-pagination-height, auto)}.notifications-container__loader{display:grid;place-items:center}.notifications-container__pagination-loader{display:grid;place-items:center;position:absolute;inset:0 0;width:100%;height:100%;background:var(--nto-pagination-background, rgba(255, 255, 255, .4))}.no-notifications{min-height:var(--no-notifications-min-height, 0);display:var(--no-notifications-display, flex);flex-direction:var(--no-notifications-direction, column);justify-content:var(--no-notifications-justify, center);align-items:var(--no-notifications-items, center);color:var(--no-notifications-color, #b4bac6);font-size:var(--no-notifications-size, 1rem)}\n"], components: [{ type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: ["typeChanged"] }, { type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: ["dateChanged"] }, { type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: ["status"], outputs: ["statusChanged"] }, { type: NotificationSortbyToggleComponent, selector: "app-notification-sortby-toggle", inputs: ["status"], outputs: ["newestFirstChanged"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationItemComponent, selector: "app-notification-item", inputs: ["iconOptions", "currentLang", "notification"], outputs: ["markAsUnread", "markAsRead", "markAsDeleted"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7__namespace$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1__namespace.TranslatePipe, "async": i4__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  NotificationsListContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListContainerComponent, selector: "app-notifications-list-container", inputs: { styleClass: "styleClass", showFilters: "showFilters", showNewestToggle: "showNewestToggle", criteria: "criteria" }, providers: [ParamsService, ResponseService], queries: [{ propertyName: "customItemTemplate", first: true, predicate: NOTIFICATION_ITEM, descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"notifications-container {{ styleClass }}\">\r\n  <div class=\"notifications-container__header\">\r\n    <span class=\"notifications-container__title\">\r\n      <span *ngIf=\"options.title\"> {{ options.title | translate }}</span>\r\n    </span>\r\n    <div class=\"notifications-container__filters\" *ngIf=\"showFilters\">\r\n      <app-notification-source-select\r\n        *ngIf=\"options?.filters?.type\"\r\n        (typeChanged)=\"typeChanged($event)\"\r\n      ></app-notification-source-select>\r\n      <app-notifications-date-select\r\n        *ngIf=\"options?.filters?.date\"\r\n        (dateChanged)=\"dateChanged($event)\"\r\n      ></app-notifications-date-select>\r\n      <app-notification-status-toggle\r\n        *ngIf=\"options?.filters?.state\"\r\n        (statusChanged)=\"statusChanged($event)\"\r\n      ></app-notification-status-toggle>\r\n      <app-notification-sortby-toggle \r\n      *ngIf=\"showNewestToggle\"\r\n      (newestFirstChanged)=\"newestFirstChanged($event)\"\r\n      ></app-notification-sortby-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"response$ | async as response\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"\r\n        paginationMode == paginationModeEnum.scroll\r\n          ? scrollModeTemplate\r\n          : paginationModeTemplate\r\n      \"\r\n      [ngTemplateOutletContext]=\"{ $implicit: response }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #scrollModeTemplate let-response>\r\n    <div\r\n      class=\"notifications-container__body\"\r\n      infiniteScroll\r\n      [scrollWindow]=\"options.scroll?.scrollWindow\"\r\n      [infiniteScrollDistance]=\"options.scroll?.distance || 2\"\r\n      [infiniteScrollThrottle]=\"options.scroll?.throttle || 300\"\r\n      (scrolled)=\"onScrollDown()\"\r\n    >\r\n      <ng-container *ngIf=\"response.data?.length; else noData\">\r\n        <ng-container\r\n          *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n          [ngTemplateOutlet]=\"customItemTemplate || defaultItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: item,\r\n            markAsUnread: markAsUnread,\r\n            markAsRead: markAsRead,\r\n            markAsDeleted: markAsDeleted\r\n          }\"\r\n        >\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <mat-spinner\r\n        [diameter]=\"48\"\r\n        class=\"notifications-container__loader mt-2 mx-auto\"\r\n        *ngIf=\"isLoadingResult\"\r\n      ></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #paginationModeTemplate let-response>\r\n    <div\r\n      class=\"notifications-container__body--pagination mb-3\"\r\n      *ngIf=\"response.data?.length; else noData\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n        [ngTemplateOutlet]=\"customItemTemplate || defaultItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          $implicit: item,\r\n          markAsUnread: markAsUnread,\r\n          markAsRead: markAsRead,\r\n          markAsDeleted: markAsDeleted\r\n        }\"\r\n      >\r\n      </ng-container>\r\n      <div class=\"notifications-container__pagination-loader\" *ngIf=\"isLoadingResult\">\r\n        <mat-spinner [diameter]=\"48\"></mat-spinner>\r\n      </div>\r\n    </div>\r\n\r\n    <cts-pagination\r\n      [page]=\"selectedPage + 1\"\r\n      (change)=\"changePage($event - 1)\"\r\n      [size]=\"options.pageSize\"\r\n      [count]=\"response.totalItems\"\r\n    >\r\n    </cts-pagination>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #filters>\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    {{ 'notifications.all' | translate }}\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"new-menu-design\" #filterTypeMenu=\"matMenu\">\r\n    <div (click)=\"$event.stopPropagation()\">\r\n      <div class=\"single-menu-action notification-filter-menu-item\">\r\n        {{ 'notifications.' + type.name | translate }}\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>\r\n      {{ 'notifications.noNotifications' | translate }}\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate let-item>\r\n  <app-notification-item\r\n    [iconOptions]=\"options?.icons\"\r\n    [notification]=\"item\"\r\n    [currentLang]=\"currentLang\"\r\n    [class.cursor-pointer]=\"item.properties?.['notf_nt:isClickable']\"\r\n    (click)=\"onItemClick(item)\"\r\n    (markAsUnread)=\"markAsUnread(item)\"\r\n    (markAsRead)=\"markAsRead(item)\"\r\n    (markAsDeleted)=\"markAsDeleted(item)\"\r\n  ></app-notification-item>\r\n</ng-template>\r\n", styles: [".notifications-container{padding:var(--nto-container-padding, 0)}.notifications-container__header{padding:var(--nto-container-header-padding, .5rem);display:var(--nto-container-header-display, flex);justify-content:var(--nto-container-header-justify, space-between);align-items:var(--nto-container-header-align-items, center);box-sizing:border-box}.notifications-container__title{color:var(--nto-container-title-color, #2f258a);font-size:var(--nto-container-title-size, 1.1rem);font-weight:var(--nto-container-title-weight, normal)}.notifications-container__filters{display:var(--nto-container-filters-display, flex);grid-gap:var(--nto-container-filters-gap, .5rem);gap:var(--nto-container-filters-gap, .5rem)}.notifications-container__body{position:relative;height:var(--nto-container-height, 74vh);overflow-y:auto}.notifications-container__body--pagination{--nto-container-height: var(--nto-container-pagination-height, auto)}.notifications-container__loader{display:grid;place-items:center}.notifications-container__pagination-loader{display:grid;place-items:center;position:absolute;inset:0 0;width:100%;height:100%;background:var(--nto-pagination-background, rgba(255, 255, 255, .4))}.no-notifications{min-height:var(--no-notifications-min-height, 0);display:var(--no-notifications-display, flex);flex-direction:var(--no-notifications-direction, column);justify-content:var(--no-notifications-justify, center);align-items:var(--no-notifications-items, center);color:var(--no-notifications-color, #b4bac6);font-size:var(--no-notifications-size, 1rem)}\n"], components: [{ type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: ["typeChanged"] }, { type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: ["dateChanged"] }, { type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: ["status"], outputs: ["statusChanged"] }, { type: NotificationSortbyToggleComponent, selector: "app-notification-sortby-toggle", inputs: ["status"], outputs: ["newestFirstChanged"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: i3__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationItemComponent, selector: "app-notification-item", inputs: ["iconOptions", "currentLang", "notification"], outputs: ["markAsUnread", "markAsRead", "markAsDeleted"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7__namespace$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1__namespace.TranslatePipe, "async": i4__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsListContainerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -43385,7 +43260,7 @@
       return NotificationsSettingsComponent;
   }(BaseNotification));
   NotificationsSettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsSettingsComponent, deps: [{ token: i0__namespace.Injector }, { token: TranslationService }, { token: i0__namespace.ChangeDetectorRef }, { token: CustomToastrService }, { token: 'environment' }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NotificationsSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsSettingsComponent, selector: "app-notifications-settings", inputs: { channel: "channel" }, outputs: { onSubscribe: "onSubscribe", onUnsubscribe: "onUnsubscribe" }, usesInheritance: true, ngImport: i0__namespace, template: "<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-4 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n<div *ngIf=\"settings$ | async as settings\" class=\"notifications-settings\">\r\n  <ng-container *ngIf=\"!isLoadingResult && settings.definitions\">\r\n    <div\r\n      *ngFor=\"let group of settings.definitions | keyvalue\"\r\n      class=\"notifications-settings__section notifications-settings__section--{{\r\n        group.key\r\n      }}\"\r\n    >\r\n      <div class=\"notifications-settings__section__title\">\r\n        <mat-icon> tune </mat-icon>\r\n        <strong> {{ 'vocabulary.VOC_Notf_SourceTypes.' + group.key | translate }}</strong>\r\n      </div>\r\n      <div class=\"notifications-settings__section__content\">\r\n        <div *ngFor=\"let definition of group.value\" class=\"notifications-settings__group\">\r\n          <mat-slide-toggle\r\n            [name]=\"definition.title\"\r\n            [checked]=\"\r\n              definition.autoSubscription\r\n                ? true\r\n                : (definition | checkIfSubscribed : settings.subscriptions)\r\n            \"\r\n            class=\"notifications-settings__group__toggle\"\r\n            [class.is-loading]=\"changingItemId === definition.uid\"\r\n            [disabled]=\"definition.autoSubscription\"\r\n            (change)=\"settingChanged(definition, $event)\"\r\n          >\r\n          </mat-slide-toggle>\r\n          <span class=\"notifications-settings__group__title\"\r\n            >{{ currentLang == 'ar' ? definition?.arTitle : definition?.enTitle }}\r\n          </span>\r\n\r\n          <p class=\"notifications-settings__group__description\">\r\n            {{\r\n              currentLang == 'ar' ? definition?.arDescription : definition?.enDescription\r\n            }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".notifications-settings{padding:var(--notifications-settings-padding, 1rem 0)}.notifications-settings__section{border:var(--setting-section-border, 1px solid #f0f0f0);border-radius:var(--setting-section-radius, 6px);padding:var(--settings-section-padding, 1rem);margin-block:var(--settings-section-margin-block, 0 1.5rem);margin-inline:var(--settings-section-margin-inline, 0)}.notifications-settings__section__title{display:var(--setting-section-title-display, flex);align-items:var(--setting-section-title-items, center);grid-gap:var(--setting-section-title-gap, .5rem);gap:var(--setting-section-title-gap, .5rem);padding-block:var(--setting-section-title-padding-block, .5rem);border-bottom:var(--setting-section-title-border-bottom, 1px solid #f0f0f0);background:var(--setting-section-title-background, transparent);color:var(--setting-section-title-color, #2f258a)}.notifications-settings__section__content{padding-block:var(--setting-section-content-padding-block, 1rem 0);display:var(--setting-section-content-display, grid);grid-template-columns:var(--setting-section-content-columns, repeat(auto-fit, minmax(490px, 1fr)));grid-gap:var(--setting-section-content-gap, 1rem);gap:var(--setting-section-content-gap, 1rem)}.notifications-settings__group{display:var(--setting-group-display, grid);grid-template-columns:var(--setting-group-columns, auto 1fr);background:var(--setting-group-background, transparent);padding:var(--setting-group-padding, .2rem 0);grid-gap:var(--setting-group-gap, .1rem 1rem);gap:var(--setting-group-gap, .1rem 1rem)}.notifications-settings__group__toggle{order:var(--setting-toggle-order)}.notifications-settings__group__toggle.is-loading{--loading-color: var(--setting-toggle-loader-color, #9189dd36);opacity:.5}.notifications-settings__group__toggle.is-loading ::ng-deep{pointer-events:none}.notifications-settings__group__toggle.is-loading ::ng-deep .mat-slide-toggle-thumb{animation:animateLoader 1.5s linear infinite}.notifications-settings__group__toggle.is-loading ::ng-deep label{margin-bottom:0}.notifications-settings__group__description{color:var(--setting-option-description-color, #666);font-size:var(--setting-option-description-size, .8rem);grid-column:var(--setting-option-description-column, 2)}@keyframes animateLoader{0%{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}50%{box-shadow:0 0 0 1px var(--loading-color),0 0 0 3px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 5px var(--loading-color),0 0 0 6px var(--loading-color)}to{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}}\n"], components: [{ type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "keyvalue": i4__namespace$1.KeyValuePipe, "translate": i1__namespace.TranslatePipe, "checkIfSubscribed": CheckIfSubscribedPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  NotificationsSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsSettingsComponent, selector: "app-notifications-settings", inputs: { channel: "channel" }, outputs: { onSubscribe: "onSubscribe", onUnsubscribe: "onUnsubscribe" }, usesInheritance: true, ngImport: i0__namespace, template: "<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-4 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n<div *ngIf=\"settings$ | async as settings\" class=\"notifications-settings\">\r\n  <ng-container *ngIf=\"!isLoadingResult && settings.definitions\">\r\n    <div\r\n      *ngFor=\"let group of settings.definitions | keyvalue\"\r\n      class=\"notifications-settings__section notifications-settings__section--{{\r\n        group.key\r\n      }}\"\r\n    >\r\n      <div class=\"notifications-settings__section__title\">\r\n        <mat-icon> tune </mat-icon>\r\n        <strong> {{ 'vocabulary.VOC_Notf_SourceTypes.' + group.key | translate }}</strong>\r\n      </div>\r\n      <div class=\"notifications-settings__section__content\">\r\n        <div *ngFor=\"let definition of group.value\" class=\"notifications-settings__group\">\r\n          <mat-slide-toggle\r\n            [name]=\"definition.title\"\r\n            [checked]=\"\r\n              definition.autoSubscription\r\n                ? true\r\n                : (definition | checkIfSubscribed : settings.subscriptions)\r\n            \"\r\n            class=\"notifications-settings__group__toggle\"\r\n            [class.is-loading]=\"changingItemId === definition.uid\"\r\n            [disabled]=\"definition.autoSubscription\"\r\n            (change)=\"settingChanged(definition, $event)\"\r\n          >\r\n          </mat-slide-toggle>\r\n          <span class=\"notifications-settings__group__title\"\r\n            >{{ currentLang == 'ar' ? definition?.arTitle : definition?.enTitle }}\r\n          </span>\r\n\r\n          <p class=\"notifications-settings__group__description\">\r\n            {{\r\n              currentLang == 'ar' ? definition?.arDescription : definition?.enDescription\r\n            }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".notifications-settings{padding:var(--notifications-settings-padding, 1rem 0)}.notifications-settings__section{border:var(--setting-section-border, 1px solid #f0f0f0);border-radius:var(--setting-section-radius, 6px);padding:var(--settings-section-padding, 1rem);margin-block:var(--settings-section-margin-block, 0 1.5rem);margin-inline:var(--settings-section-margin-inline, 0)}.notifications-settings__section__title{display:var(--setting-section-title-display, flex);align-items:var(--setting-section-title-items, center);grid-gap:var(--setting-section-title-gap, .5rem);gap:var(--setting-section-title-gap, .5rem);padding-block:var(--setting-section-title-padding-block, .5rem);border-bottom:var(--setting-section-title-border-bottom, 1px solid #f0f0f0);background:var(--setting-section-title-background, transparent);color:var(--setting-section-title-color, #2f258a)}.notifications-settings__section__content{padding-block:var(--setting-section-content-padding-block, 1rem 0);display:var(--setting-section-content-display, grid);grid-template-columns:var(--setting-section-content-columns, repeat(auto-fit, minmax(min(90%, 490px), 1fr)));grid-gap:var(--setting-section-content-gap, 1rem);gap:var(--setting-section-content-gap, 1rem)}.notifications-settings__group{display:var(--setting-group-display, grid);grid-template-columns:var(--setting-group-columns, auto 1fr);background:var(--setting-group-background, transparent);padding:var(--setting-group-padding, .2rem 0);grid-gap:var(--setting-group-gap, .1rem 1rem);gap:var(--setting-group-gap, .1rem 1rem)}.notifications-settings__group__toggle{order:var(--setting-toggle-order)}.notifications-settings__group__toggle.is-loading{--loading-color: var(--setting-toggle-loader-color, #9189dd36);opacity:.5}.notifications-settings__group__toggle.is-loading ::ng-deep{pointer-events:none}.notifications-settings__group__toggle.is-loading ::ng-deep .mat-slide-toggle-thumb{animation:animateLoader 1.5s linear infinite}.notifications-settings__group__toggle.is-loading ::ng-deep label{margin-bottom:0}.notifications-settings__group__description{color:var(--setting-option-description-color, #666);font-size:var(--setting-option-description-size, .8rem);grid-column:var(--setting-option-description-column, 2)}@keyframes animateLoader{0%{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}50%{box-shadow:0 0 0 1px var(--loading-color),0 0 0 3px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 5px var(--loading-color),0 0 0 6px var(--loading-color)}to{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}}\n"], components: [{ type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "keyvalue": i4__namespace$1.KeyValuePipe, "translate": i1__namespace.TranslatePipe, "checkIfSubscribed": CheckIfSubscribedPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NotificationsSettingsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -44182,7 +44057,7 @@
       return InfoDialogComponent;
   }(BaseDialogComponent));
   InfoDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: InfoDialogComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  InfoDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: InfoDialogComponent, selector: "app-info-dialog", usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog [dialogTitle]=\"dialogData.title | translate\" bodyClass=\"gap-4 p-0\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<div class=\"secondary-tabs flex gap-5 items-center self-stretch doc-tabs\">\r\n\t\t\t<div\r\n\t\t\t\t[class.selected-tab]=\"doc.name === activeDoc\"\r\n\t\t\t\tclass=\"tab-item relative flex py-5 px-3 justify-start items-center gap-2.5 cursor-pointer\"\r\n\t\t\t\t*ngFor=\"let doc of documentations\"\r\n\t\t\t\t(click)=\"activeDoc = doc.name\"\r\n\t\t\t>\r\n\t\t\t\t<h4>{{ doc?.name | translate }}</h4>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngFor=\"let doc of documentations\">\r\n\t\t\t<markdown class=\"markdown-content\" [src]=\"baseAppUrl + doc.path\" *ngIf=\"doc.name === activeDoc\"> </markdown>\r\n\t\t</ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\"> </ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: ["::ng-deep .markdown-content{direction:var(--markdown-direction, ltr)!important;text-align:start;color:var(--markdonw-text-color, inherit);background:var(--markdonw-background-color, transparent);border:var(--markdonw-border, 0px solid transparent);border-radius:var(--markdonw-border-radius, 0);padding:var(--markdown-padding, 1rem)}::ng-deep .markdown-content em{background-color:transparent}::ng-deep .markdown-content code,::ng-deep .markdown-content kbd,::ng-deep .markdown-content samp,::ng-deep .markdown-content pre{font-family:ui-monospace,SFMono-Regular,Consolas,\"Liberation Mono\",Menlo,monospace;font-size:1em}::ng-deep .markdown-content hr{margin-block:1rem}::ng-deep .markdown-content table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;font-variant:tabular-nums;margin-block:.5rem}::ng-deep .markdown-content table tr{border-top:1px solid var(--markdonw-table-tr-border-color, #d1d9e0b3)}::ng-deep .markdown-content table th,::ng-deep .markdown-content table td{padding:6px 13px;border:1px solid var(--markdonw-table-border-color, #d1d9e0)}.doc-tabs{position:sticky;top:0;background:var(--markdonw-tabs-background-color, #fff)}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: i2__namespace$8.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "emoji", "katex", "katexOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start"], outputs: ["error", "load", "ready"] }], directives: [{ type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  InfoDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: InfoDialogComponent, selector: "app-info-dialog", usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog [dialogTitle]=\"dialogData.title | translate\" bodyClass=\"gap-4 p-0\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<div class=\"secondary-tabs flex gap-5 items-center self-stretch doc-tabs\">\r\n\t\t\t<div\r\n\t\t\t\t[class.selected-tab]=\"doc.name === activeDoc\"\r\n\t\t\t\tclass=\"tab-item relative flex py-5 px-3 justify-start items-center gap-2.5 cursor-pointer\"\r\n\t\t\t\t*ngFor=\"let doc of documentations\"\r\n\t\t\t\t(click)=\"activeDoc = doc.name\"\r\n\t\t\t>\r\n\t\t\t\t<h4>{{ doc?.name | translate }}</h4>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<ng-container *ngFor=\"let doc of documentations\">\r\n\t\t\t<markdown class=\"markdown-content\" [src]=\"baseAppUrl + doc.path\" *ngIf=\"doc.name === activeDoc\"> </markdown>\r\n\t\t</ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\"> </ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: ["::ng-deep .markdown-content{direction:var(--markdown-direction, ltr)!important;text-align:start;color:var(--markdonw-text-color, inherit);background:var(--markdonw-background-color, transparent);border:var(--markdonw-border, 0px solid transparent);border-radius:var(--markdonw-border-radius, 0);padding:var(--markdown-padding, 1rem)}::ng-deep .markdown-content em{background-color:transparent}::ng-deep .markdown-content code,::ng-deep .markdown-content kbd,::ng-deep .markdown-content samp,::ng-deep .markdown-content pre{font-family:ui-monospace,SFMono-Regular,Consolas,\"Liberation Mono\",Menlo,monospace;font-size:1em}::ng-deep .markdown-content hr{margin-block:1rem}::ng-deep .markdown-content table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;font-variant:tabular-nums;margin-block:.5rem}::ng-deep .markdown-content table tr{border-top:1px solid var(--markdonw-table-tr-border-color, rgba(209, 217, 224, .7019607843))}::ng-deep .markdown-content table th,::ng-deep .markdown-content table td{padding:6px 13px;border:1px solid var(--markdonw-table-border-color, #d1d9e0)}.doc-tabs{position:sticky;top:0;background:var(--markdonw-tabs-background-color, #fff)}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: i2__namespace$8.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "emoji", "katex", "katexOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start"], outputs: ["error", "load", "ready"] }], directives: [{ type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: InfoDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -47575,7 +47450,7 @@
       return GraphChartComponent;
   }(BaseChart));
   GraphChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphChartComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  GraphChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphChartComponent, selector: "app-graph-chart", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"report$ | async as report\">\r\n\t<div class=\"chart-legends\"></div>\r\n\t<app-chart\r\n\t\t[type]=\"report.config.type\"\r\n\t\t[data]=\"report.data\"\r\n\t\t[options]=\"report.config?.options\"\r\n\t\t[plugins]=\"report.config?.plugins\"\r\n\t\t[responsive]=\"true\"\r\n\t\t(onReady)=\"chartReady($event)\"\r\n\t\tclass=\"app-chart\"\r\n\t></app-chart>\r\n</ng-container>\r\n", styles: [":host{--chart-height: var(--graph-chart-height, 100%);display:var(--graph-chart-display, flex);flex-direction:var(--graph-chart-direction, row);justify-content:var(--graph-chart-justify-content, space-between);align-items:var(--graph-chart-align-items, center);grid-gap:var(--graph-chart-gap, .5rem);gap:var(--graph-chart-gap, .5rem);min-height:0}.app-chart{--chart-padding: 1rem}.app-chart.bs-chart-pie,.app-chart.bs-chart-doughnut{--chart-grow: 0;aspect-ratio:1/1;--chart-align-self: center;--chart-print-width:65mm;--chart-print-height:65mm;--chart-print-max-width: 65mm}::ng-deep .chart-legends{max-height:var(--chart-legends-height, var(--chart-height));min-width:var(--chart-legends-width, 0);overflow:auto;font-size:1rem;text-align:start;display:flex;flex-direction:column;grid-gap:.2rem;gap:.2rem;padding-block:.5rem}::ng-deep .chart-legends:empty{--chart-legends-width: 0;display:none}::ng-deep .chart-legends.has-items{--chart-legends-width: var(--chart-legends-items-width, 200px)}::ng-deep .chart-legends__legend{display:flex;align-items:baseline;-webkit-user-select:none;user-select:none;cursor:default}::ng-deep .chart-legends__box{width:var(--chart-legends-box-width, 8px);height:var(--chart-legends-box-height, 8px);border-radius:var(--chart-legends-radius, 50%);margin-inline:var(--chart-legends-box-inline, 0 .5rem);display:inline-block;flex-shrink:0}@media print{::ng-deep .chart-legends__box{-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact}}\n"], components: [{ type: ChartComponent, selector: "app-chart", inputs: ["data", "options"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4__namespace$1.AsyncPipe } });
+  GraphChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphChartComponent, selector: "app-graph-chart", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"report$ | async as report\">\r\n\t<div class=\"chart-legends\"></div>\r\n\t<app-chart\r\n\t\t[type]=\"report.config.type\"\r\n\t\t[data]=\"report.data\"\r\n\t\t[options]=\"report.config?.options\"\r\n\t\t[plugins]=\"report.config?.plugins\"\r\n\t\t[responsive]=\"true\"\r\n\t\t(onReady)=\"chartReady($event)\"\r\n\t\tclass=\"app-chart\"\r\n\t></app-chart>\r\n</ng-container>\r\n", styles: [":host{--chart-height: var(--graph-chart-height, 100%);display:var(--graph-chart-display, flex);flex-direction:var(--graph-chart-direction, row);justify-content:var(--graph-chart-justify-content, space-between);align-items:var(--graph-chart-align-items, center);grid-gap:var(--graph-chart-gap, .5rem);gap:var(--graph-chart-gap, .5rem);min-height:0}.app-chart{--chart-padding: 1rem}.app-chart.bs-chart-pie,.app-chart.bs-chart-doughnut{--chart-grow: 0;aspect-ratio:1/1;--chart-align-self: center;--chart-print-width:65mm;--chart-print-height:65mm;--chart-print-max-width: 65mm}::ng-deep .chart-legends:empty{--chart-legends-width: 0;display:none}::ng-deep .chart-legends{max-height:var(--chart-legends-height, var(--chart-height));min-width:var(--chart-legends-width, 0);overflow:auto;font-size:1rem;text-align:start;display:flex;flex-direction:column;grid-gap:.2rem;gap:.2rem;padding-block:.5rem}::ng-deep .chart-legends.has-items{--chart-legends-width: var(--chart-legends-items-width, 200px)}::ng-deep .chart-legends__legend{display:flex;align-items:baseline;-webkit-user-select:none;user-select:none;cursor:default}::ng-deep .chart-legends__box{width:var(--chart-legends-box-width, 8px);height:var(--chart-legends-box-height, 8px);border-radius:var(--chart-legends-radius, 50%);margin-inline:var(--chart-legends-box-inline, 0 .5rem);display:inline-block;flex-shrink:0}@media print{::ng-deep .chart-legends__box{-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact}}\n"], components: [{ type: ChartComponent, selector: "app-chart", inputs: ["data", "options"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4__namespace$1.AsyncPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphChartComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -47650,7 +47525,7 @@
       return ChartTypeSelectorComponent;
   }());
   ChartTypeSelectorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChartTypeSelectorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ChartTypeSelectorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: { direction: "direction", config: "config", type: "type" }, outputs: { typeChange: "typeChange" }, host: { properties: { "attr.dir": "direction" }, classAttribute: "chart-type-selector" }, ngImport: i0__namespace, template: "<div\r\n\t[dir]=\"direction\"\r\n\tclass=\"font-light flex items-center rounded-lg gap-2 chart-type-selector__wrapper p-1\"\r\n\t*ngIf=\"isEnabled\"\r\n>\r\n\t<button\r\n\t\tclass=\"chart-type-selector__item rounded\"\r\n\t\t*ngFor=\"let type of types\"\r\n\t\t(click)=\"changeType(type)\"\r\n\t\t[class.selected]=\"type.type === selectedType?.type\"\r\n\t\t[matTooltip]=\"type.label | translate\"\r\n\t>\r\n\t\t<mat-icon>{{ type.icon }}</mat-icon>\r\n\t</button>\r\n</div>\r\n", styles: [".chart-type-selector__wrapper{border:var(--chart-type-border, 1px solid var(--border-color))}.chart-type-selector__item{background:var(--chart-type-background, transparent);color:var(--chart-type-color, currentColor);box-shadow:var(--chart-type-shadow, unset);width:var(--chart-type-width, 35px);height:var(--chart-type-height, 35px);flex-grow:1;display:grid;place-items:center}.chart-type-selector__item .mat-icon{color:var(--main-color, currentColor)}.chart-type-selector__item:hover{--chart-type-shadow: var(--chart-type-hover-shadow, 0 0 0 1px var(--main-color))}.chart-type-selector__item.selected{--chart-type-background: var(--chart-type-active-background, var(--main-color));--chart-type-color: var(--chart-type-active-color, var(--main-hover))}.chart-type-selector__item.selected .mat-icon{color:currentColor!important}\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: 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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  ChartTypeSelectorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: { direction: "direction", config: "config", type: "type" }, outputs: { typeChange: "typeChange" }, host: { properties: { "attr.dir": "direction" }, classAttribute: "chart-type-selector" }, ngImport: i0__namespace, template: "<div\r\n\t[dir]=\"direction\"\r\n\tclass=\"font-light flex items-center rounded-lg gap-2 chart-type-selector__wrapper p-1\"\r\n\t*ngIf=\"isEnabled\"\r\n>\r\n\t<button\r\n\t\tclass=\"chart-type-selector__item rounded\"\r\n\t\t*ngFor=\"let type of types\"\r\n\t\t(click)=\"changeType(type)\"\r\n\t\t[class.selected]=\"type.type === selectedType?.type\"\r\n\t\t[matTooltip]=\"type.label | translate\"\r\n\t>\r\n\t\t<mat-icon>{{ type.icon }}</mat-icon>\r\n\t</button>\r\n</div>\r\n", styles: [".chart-type-selector__wrapper{border:var(--chart-type-border, 1px solid var(--border-color))}.chart-type-selector__item{background:var(--chart-type-background, transparent);color:var(--chart-type-color, currentColor);box-shadow:var(--chart-type-shadow, unset);width:var(--chart-type-width, 35px);height:var(--chart-type-height, 35px);flex-grow:1;display:grid;place-items:center}.chart-type-selector__item .mat-icon{color:var(--main-color, currentColor)}.chart-type-selector__item:hover{--chart-type-shadow: var(--chart-type-hover-shadow, 0 0 0 1px var(--main-color))}.chart-type-selector__item.selected{--chart-type-background: var(--chart-type-active-background, var(--main-color));--chart-type-color: var(--chart-type-active-color, var(--main-hover))}.chart-type-selector__item.selected .mat-icon{color:currentColor!important}\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: 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.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], 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: ChartTypeSelectorComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -47712,7 +47587,7 @@
       return GraphDialogComponent;
   }());
   GraphDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphDialogComponent, deps: [{ token: i1__namespace$4.MatDialogRef }, { token: i1$4.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  GraphDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphDialogComponent, selector: "app-graph-dialog", viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-graph-chart\r\n\t\t\t#graphChart\r\n\t\t\tclass=\"ndf-report__content ndf-report__content--graph-char\"\r\n\t\t\t[config]=\"chart.config\"\r\n\t\t\t[data]=\"chart.data\"\r\n\t\t></app-graph-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<chart-type-selector\r\n\t\t\t\t[direction]=\"chart.direction\"\r\n\t\t\t\t[type]=\"chartType\"\r\n\t\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t\t></chart-type-selector>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [":host{--graph-chart-height: 100%;--app-chart-height: 100%;--dialog-body-max-height: 100%}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "config", "type"], outputs: ["typeChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  GraphDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphDialogComponent, selector: "app-graph-dialog", viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-graph-chart\r\n\t\t\t#graphChart\r\n\t\t\tclass=\"ndf-report__content ndf-report__content--graph-char\"\r\n\t\t\t[config]=\"chart.config\"\r\n\t\t\t[data]=\"chart.data\"\r\n\t\t></app-graph-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<chart-type-selector\r\n\t\t\t\t[direction]=\"chart.direction\"\r\n\t\t\t\t[type]=\"chartType\"\r\n\t\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t\t></chart-type-selector>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [":host{--graph-chart-height: 100%;--app-chart-height: 100%;--dialog-body-max-height: 100%}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "config", "type"], outputs: ["typeChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -47876,7 +47751,7 @@
       return ReportActionsComponent;
   }());
   ReportActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ReportActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ReportActionsComponent, selector: "app-report-actions", inputs: { config: "config" }, outputs: { navigate: "navigate", open: "open", print: "print" }, host: { classAttribute: "chart-actions flex items-center rounded-lg gap-2 p-1" }, ngImport: i0__namespace, template: "<button\r\n\tclass=\"print-button chart-actions__item\"\r\n\t(click)=\"print.emit()\"\r\n\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t*ngIf=\"isPrintAllowed\"\r\n>\r\n\t<mat-icon>print</mat-icon>\r\n</button>\r\n\r\n<button\r\n\tclass=\"navigate-button chart-actions__item\"\r\n\t(click)=\"navigate.emit()\"\r\n\t*ngIf=\"config?.navigate?.enabled\"\r\n\t[matTooltip]=\"'REPORTS.navigate' | translate\"\r\n>\r\n\t<mat-icon>send</mat-icon>\r\n</button>\r\n<button\r\n\tclass=\"navigate-button chart-actions__item\"\r\n\t(click)=\"open.emit(null)\"\r\n\t*ngIf=\"config?.details?.enabled\"\r\n\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n>\r\n\t<mat-icon>info</mat-icon>\r\n</button>\r\n", styles: [""], 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: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  ReportActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ReportActionsComponent, selector: "app-report-actions", inputs: { config: "config" }, outputs: { navigate: "navigate", open: "open", print: "print" }, host: { classAttribute: "chart-actions flex items-center rounded-lg gap-2 p-1" }, ngImport: i0__namespace, template: "<button\r\n\tclass=\"print-button chart-actions__item\"\r\n\t(click)=\"print.emit()\"\r\n\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t*ngIf=\"isPrintAllowed\"\r\n>\r\n\t<mat-icon>print</mat-icon>\r\n</button>\r\n\r\n<button\r\n\tclass=\"navigate-button chart-actions__item\"\r\n\t(click)=\"navigate.emit()\"\r\n\t*ngIf=\"config?.navigate?.enabled\"\r\n\t[matTooltip]=\"'REPORTS.navigate' | translate\"\r\n>\r\n\t<mat-icon>send</mat-icon>\r\n</button>\r\n<button\r\n\tclass=\"navigate-button chart-actions__item\"\r\n\t(click)=\"open.emit(null)\"\r\n\t*ngIf=\"config?.details?.enabled\"\r\n\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n>\r\n\t<mat-icon>info</mat-icon>\r\n</button>\r\n", styles: [""], 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: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportActionsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -47933,7 +47808,7 @@
       return GraphReportComponent;
   }(BaseGraphReport));
   GraphReportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphReportComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  GraphReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphReportComponent, selector: "app-graph-report", host: { classAttribute: "graph-report flex flex-col flex-grow" }, providers: [ChartThemeService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report chart-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openGraphDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t[config]=\"config\"\r\n\t\t[data]=\"data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer flex-wrap\">\r\n\t\t<app-report-actions\r\n\t\t\t[config]=\"config\"\r\n\t\t\t(print)=\"printChart()\"\r\n\t\t\t(navigate)=\"navigate()\"\r\n\t\t\t(open)=\"onOpen.emit(null)\"\r\n\t\t></app-report-actions>\r\n\r\n\t\t<chart-type-selector\r\n      [config]=\"config?.typeConfig\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t[type]=\"chartType$ | async\"\r\n\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t></chart-type-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}@media print{.chart-actions{display:none}}:host{min-width:0;max-width:100%}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "config", "type"], outputs: ["typeChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
+  GraphReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphReportComponent, selector: "app-graph-report", host: { classAttribute: "graph-report flex flex-col flex-grow" }, providers: [ChartThemeService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report chart-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openGraphDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t[config]=\"config\"\r\n\t\t[data]=\"data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer flex-wrap\">\r\n\t\t<app-report-actions\r\n\t\t\t[config]=\"config\"\r\n\t\t\t(print)=\"printChart()\"\r\n\t\t\t(navigate)=\"navigate()\"\r\n\t\t\t(open)=\"onOpen.emit(null)\"\r\n\t\t></app-report-actions>\r\n\r\n\t\t<chart-type-selector\r\n      [config]=\"config?.typeConfig\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t[type]=\"chartType$ | async\"\r\n\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t></chart-type-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}@media print{.chart-actions{display:none}}:host{min-width:0;max-width:100%}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "config", "type"], outputs: ["typeChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphReportComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -48028,7 +47903,7 @@
       return TimelineDialogComponent;
   }());
   TimelineDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimelineDialogComponent, deps: [{ token: i1__namespace$4.MatDialogRef }, { token: i1$4.MAT_DIALOG_DATA }, { token: DynamicTimelineReportService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  TimelineDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimelineDialogComponent, selector: "app-timeline-dialog", providers: [DynamicTimelineReportService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\" *ngIf=\"report$ | async as report\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-graph-chart\r\n\t\t\t#graphChart\r\n\t\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[criteria]=\"filterCriteria$ | async\"\r\n\t\t\t[data]=\"report.data\"\r\n\t\t></app-graph-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\r\n\t\t\t<time-group-selector\r\n\t\t\t\t*ngIf=\"report.config?.group?.active ?? true\"\r\n\t\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t\t></time-group-selector>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [":host{--graph-chart-height: 100%;--app-chart-height: 100%;--dialog-body-max-height: 100%}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe, "async": i4__namespace$1.AsyncPipe } });
+  TimelineDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimelineDialogComponent, selector: "app-timeline-dialog", providers: [DynamicTimelineReportService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\" *ngIf=\"report$ | async as report\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-graph-chart\r\n\t\t\t#graphChart\r\n\t\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[criteria]=\"filterCriteria$ | async\"\r\n\t\t\t[data]=\"report.data\"\r\n\t\t></app-graph-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\r\n\t\t\t<time-group-selector\r\n\t\t\t\t*ngIf=\"report.config?.group?.active ?? true\"\r\n\t\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t\t></time-group-selector>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [":host{--graph-chart-height: 100%;--app-chart-height: 100%;--dialog-body-max-height: 100%}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe, "async": i4__namespace$1.AsyncPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimelineDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -48130,7 +48005,7 @@
       return CustomChartDialogComponent;
   }());
   CustomChartDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomChartDialogComponent, deps: [{ token: i1__namespace$4.MatDialogRef }, { token: i1$4.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CustomChartDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomChartDialogComponent, selector: "app-custom-chart-dialog", viewQueries: [{ propertyName: "customChartComponent", first: true, predicate: ["customChart"], descendants: true }], ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-custom-chart\r\n\t\t\t#customChart\r\n\t\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n\t\t\t[criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t></app-custom-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [""], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: CustomChartComponent, selector: "app-custom-chart" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  CustomChartDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomChartDialogComponent, selector: "app-custom-chart-dialog", viewQueries: [{ propertyName: "customChartComponent", first: true, predicate: ["customChart"], descendants: true }], ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-custom-chart\r\n\t\t\t#customChart\r\n\t\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n\t\t\t[criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t></app-custom-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [""], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: CustomChartComponent, selector: "app-custom-chart" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomChartDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -48189,7 +48064,7 @@
       return DynamicTimelineReportComponent;
   }(BaseGraphReport));
   DynamicTimelineReportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicTimelineReportComponent, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicTimelineReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTimelineReportComponent, selector: "app-dynamic-timeline-report", host: { classAttribute: "timeline-report flex flex-col flex-grow" }, providers: [DynamicTimelineReportService, ChartThemeService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"report$ | async as report; else noData\" class=\"ndf-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openTimelineDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t[config]=\"report.config\"\r\n\t\t[criteria]=\"filterCriteria$ | async\"\r\n\t\t[data]=\"report.data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer \">\r\n\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 flex-wrap p-1\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"print-button chart-actions__item\"\r\n\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t*ngIf=\"config?.print\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"navigate()\"\r\n\t\t\t\t*ngIf=\"config?.navigate?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.enabled' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>send</mat-icon>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"openDetails()\"\r\n\t\t\t\t*ngIf=\"config?.details?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>info</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<time-group-selector\r\n\t\t\t*ngIf=\"config?.group?.active ?? true\"\r\n\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t></time-group-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n\r\n<ng-template #noData>\r\n\t<chart-panel class=\"ndf-report\">\r\n\t\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</chart-panel-header>\r\n\t\t<app-skeleton\r\n\t\t\tanimation=\"opacity\"\r\n\t\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t\theight=\"220px\"\r\n\t\t></app-skeleton>\r\n\t</chart-panel>\r\n</ng-template>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}@media print{.chart-actions{display:none}}:host{min-width:0;max-width:100%}.timeline-chart{display:var(--ndf-report-display, flex);flex-direction:var(--ndf-report-direction, column);justify-content:var(--ndf-report-justify-content, center);align-items:var(--ndf-report-align-items, center)}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  DynamicTimelineReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTimelineReportComponent, selector: "app-dynamic-timeline-report", host: { classAttribute: "timeline-report flex flex-col flex-grow" }, providers: [DynamicTimelineReportService, ChartThemeService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"report$ | async as report; else noData\" class=\"ndf-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openTimelineDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t[config]=\"report.config\"\r\n\t\t[criteria]=\"filterCriteria$ | async\"\r\n\t\t[data]=\"report.data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer \">\r\n\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 flex-wrap p-1\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"print-button chart-actions__item\"\r\n\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t*ngIf=\"config?.print\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"navigate()\"\r\n\t\t\t\t*ngIf=\"config?.navigate?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.enabled' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>send</mat-icon>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"openDetails()\"\r\n\t\t\t\t*ngIf=\"config?.details?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>info</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<time-group-selector\r\n\t\t\t*ngIf=\"config?.group?.active ?? true\"\r\n\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t></time-group-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n\r\n<ng-template #noData>\r\n\t<chart-panel class=\"ndf-report\">\r\n\t\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</chart-panel-header>\r\n\t\t<app-skeleton\r\n\t\t\tanimation=\"opacity\"\r\n\t\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t\theight=\"220px\"\r\n\t\t></app-skeleton>\r\n\t</chart-panel>\r\n</ng-template>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}@media print{.chart-actions{display:none}}:host{min-width:0;max-width:100%}.timeline-chart{display:var(--ndf-report-display, flex);flex-direction:var(--ndf-report-direction, column);justify-content:var(--ndf-report-justify-content, center);align-items:var(--ndf-report-align-items, center)}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicTimelineReportComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -48287,7 +48162,7 @@
       return CustomReportComponent;
   }(BaseReport));
   CustomReportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomReportComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CustomReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomReportComponent, selector: "app-custom-report", host: { classAttribute: "custom-report flex flex-col flex-grow" }, viewQueries: [{ propertyName: "customChartComponent", first: true, predicate: ["customChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report chart-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config?.label | translate }}\r\n\t\t</span>\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-custom-chart\r\n\t\t#customChart\r\n\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t[config]=\"config\"\r\n\t\t[data]=\"data\"\r\n\t\t[criteria]=\"criteria\"\r\n\t\t[direction]=\"direction\"\r\n\t></app-custom-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer flex-wrap\">\r\n\t\t<app-report-actions\r\n\t\t\t[config]=\"config\"\r\n\t\t\t(print)=\"printChart()\"\r\n\t\t\t(navigate)=\"navigate()\"\r\n\t\t\t(open)=\"onOpen.emit(null)\"\r\n\t\t></app-report-actions>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [""], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomChartComponent, selector: "app-custom-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
+  CustomReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomReportComponent, selector: "app-custom-report", host: { classAttribute: "custom-report flex flex-col flex-grow" }, viewQueries: [{ propertyName: "customChartComponent", first: true, predicate: ["customChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report chart-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config?.label | translate }}\r\n\t\t</span>\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-custom-chart\r\n\t\t#customChart\r\n\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t[config]=\"config\"\r\n\t\t[data]=\"data\"\r\n\t\t[criteria]=\"criteria\"\r\n\t\t[direction]=\"direction\"\r\n\t></app-custom-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer flex-wrap\">\r\n\t\t<app-report-actions\r\n\t\t\t[config]=\"config\"\r\n\t\t\t(print)=\"printChart()\"\r\n\t\t\t(navigate)=\"navigate()\"\r\n\t\t\t(open)=\"onOpen.emit(null)\"\r\n\t\t></app-report-actions>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [""], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomChartComponent, selector: "app-custom-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomReportComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -48725,7 +48600,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 }, { token: ReportsHooksService }], 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", loadCondition: "loadCondition", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, queries: [{ propertyName: "filterCustomTemplate", first: true, predicate: CUSTOM_TEMPLATE, descendants: true, read: i0.TemplateRef }, { propertyName: "headerPanelTemplate", first: true, predicate: HEADER_PANEL_TEMPLATE, descendants: true, read: i0.TemplateRef }, { propertyName: "emptyContentTemplate", first: true, predicate: EMPTY_CONTENT_TEMPLATE, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n  class=\"ndf-reports__container\"\r\n  [class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n  [dir]=\"direction\"\r\n  ndfFluidHeight\r\n>\r\n  <div\r\n    class=\"absolute flex justify-center items-center loading-result\"\r\n    *ngIf=\"isLoadingResult && callLoadCondition()\"\r\n  >\r\n    <mat-spinner class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n  </div>\r\n\r\n  <div class=\"ndf-reports__panel print:hidden\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"headerPanelTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        $implicit: aggregations,\r\n        filterChanged: filterChanged,\r\n        activeQuery: activeQuery,\r\n        triggerUpdate: triggerUpdate,\r\n        reset: resetFilters,\r\n        config: config\r\n      }\"\r\n    ></ng-container>\r\n\r\n    <app-filters-panel\r\n      *ngIf=\"!!filtersConfig?.fields?.length && callLoadCondition()\"\r\n      [fields]=\"filtersConfig?.fields\"\r\n      [aggregations]=\"aggregations\"\r\n      (filterChanged)=\"filterChanged($event)\"\r\n      [activeQuery]=\"activeFiltersQuery$ | async\"\r\n      class=\"ndf-reports__filters\"\r\n      [customTemplateRef]=\"filterCustomTemplate\"\r\n    ></app-filters-panel>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"callLoadCondition(); else emptyContent\">\r\n    <div\r\n      class=\"ndf-reports__content\"\r\n      (scrolled)=\"onContentScroll($event)\"\r\n      *ngIf=\"reportsData$ | async as reports\"\r\n    >\r\n      <div class=\"ndf-reports__header flex pt-4 print:hidden\">\r\n        <button\r\n          mat-stroked-button\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-editor-button\r\n          *ngIf=\"jsonEditorEnabled && reportsKey\"\r\n          [key]=\"reportsKey\"\r\n          [type]=\"editorType\"\r\n        ></app-editor-button>\r\n        <button\r\n          mat-stroked-button\r\n          *ngIf=\"config?.options?.print\"\r\n          class=\"print-button\"\r\n          (click)=\"printAll()\"\r\n        >\r\n          <mat-icon> print</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n        <app-ndf-report\r\n          *ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n          [config]=\"config\"\r\n          [data]=\"reports?.response\"\r\n          [criteria]=\"filtersParams$ | async\"\r\n          [direction]=\"direction\"\r\n          [attr.data-width]=\"config?.layout?.width || 4\"\r\n          [attr.data-height]=\"config?.layout?.height || 'auto'\"\r\n          [attr.data-start-column]=\"config?.layout?.columnPosition || 'auto'\"\r\n          [attr.data-start-row]=\"config?.layout?.rowPosition || 'auto'\"\r\n          [class.wide]=\"config?.layout?.width >= 6\"\r\n          [style]=\"config?.layout?.style\"\r\n          class=\"reports-grid__item {{ config?.layout?.styleClass }} \"\r\n          (onNavigate)=\"onNavigate($event)\"\r\n          (onOpen)=\"openReportDetails($event, config)\"\r\n        ></app-ndf-report>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <div\r\n    class=\"ndf-reports__details print:hidden\"\r\n    [class.opened]=\"showDetails\"\r\n    [@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n    (@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n  >\r\n    <app-ndf-table\r\n      *ngIf=\"reportDetails$ | async as report\"\r\n      [config]=\"report.config\"\r\n      [activeQuery]=\"activeFiltersQuery$ | async\"\r\n      [customCriteria]=\"detailsFiltersParams$ | async\"\r\n    >\r\n      <ng-template searchTableTemplate let-toggle=\"togglePanel\">\r\n        <div class=\"ndf-reports__details__header flex gap-2\">\r\n          <button mat-stroked-button class=\"toggle-button\" (click)=\"toggle()\">\r\n            <mat-icon> filter_alt</mat-icon>\r\n          </button>\r\n          <button\r\n            mat-stroked-button\r\n            class=\"close-button\"\r\n            (click)=\"closeDetailsPanel()\"\r\n          >\r\n            <mat-icon> close</mat-icon>\r\n          </button>\r\n        </div>\r\n        <h3>\r\n          {{ report.label | translate }}\r\n        </h3>\r\n      </ng-template>\r\n    </app-ndf-table>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #emptyContent>\r\n  <div class=\"ndf-reports__content flex items-center flex-grow-1\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"emptyContentTemplate || defaultEmptyContent\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyContent>\r\n  <div class=\"no-data mt-26\">\r\n    {{ 'noData' | translate }}\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{--table-dev-height: var(--ndf-reports-table-dev-height, auto);--report-height: var(--ndf-reports-report-height, 430px);--cp-height: var(--report-height);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%}@media print{:host{--report-height: auto;--cp-print-min-height: 80mm;padding:0}}.loading-result{background:var(--loading-result-background, rgba(255, 255, 255, .5));-webkit-backdrop-filter:var(--loading-result-filter, blur(3px));backdrop-filter:var(--loading-result-filter, blur(3px));width:100%;height:100%;z-index:3}.ndf-reports *{box-sizing:border-box;min-height:0}.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-pis: 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-pis, 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;width:100%;margin:0;padding:0;page-break-after:avoid}}.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));grid-template-rows:var(--reports-grid-rows, auto);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: 10mm;--reports-grid-margin-top: 0;padding:0;margin:0;--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: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { 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: 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: 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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", loadCondition: "loadCondition", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, queries: [{ propertyName: "filterCustomTemplate", first: true, predicate: CUSTOM_TEMPLATE, descendants: true, read: i0.TemplateRef }, { propertyName: "headerPanelTemplate", first: true, predicate: HEADER_PANEL_TEMPLATE, descendants: true, read: i0.TemplateRef }, { propertyName: "emptyContentTemplate", first: true, predicate: EMPTY_CONTENT_TEMPLATE, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n  class=\"ndf-reports__container\"\r\n  [class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n  [dir]=\"direction\"\r\n  ndfFluidHeight\r\n>\r\n  <div\r\n    class=\"absolute flex justify-center items-center loading-result\"\r\n    *ngIf=\"isLoadingResult && callLoadCondition()\"\r\n  >\r\n    <mat-spinner class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n  </div>\r\n\r\n  <div class=\"ndf-reports__panel print:hidden\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"headerPanelTemplate\"\r\n      [ngTemplateOutletContext]=\"{\r\n        $implicit: aggregations,\r\n        filterChanged: filterChanged,\r\n        activeQuery: activeQuery,\r\n        triggerUpdate: triggerUpdate,\r\n        reset: resetFilters,\r\n        config: config\r\n      }\"\r\n    ></ng-container>\r\n\r\n    <app-filters-panel\r\n      *ngIf=\"!!filtersConfig?.fields?.length && callLoadCondition()\"\r\n      [fields]=\"filtersConfig?.fields\"\r\n      [aggregations]=\"aggregations\"\r\n      (filterChanged)=\"filterChanged($event)\"\r\n      [activeQuery]=\"activeFiltersQuery$ | async\"\r\n      class=\"ndf-reports__filters\"\r\n      [customTemplateRef]=\"filterCustomTemplate\"\r\n    ></app-filters-panel>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"callLoadCondition(); else emptyContent\">\r\n    <div\r\n      class=\"ndf-reports__content\"\r\n      (scrolled)=\"onContentScroll($event)\"\r\n      *ngIf=\"reportsData$ | async as reports\"\r\n    >\r\n      <div class=\"ndf-reports__header flex pt-4 print:hidden\">\r\n        <button\r\n          mat-stroked-button\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-editor-button\r\n          *ngIf=\"jsonEditorEnabled && reportsKey\"\r\n          [key]=\"reportsKey\"\r\n          [type]=\"editorType\"\r\n        ></app-editor-button>\r\n        <button\r\n          mat-stroked-button\r\n          *ngIf=\"config?.options?.print\"\r\n          class=\"print-button\"\r\n          (click)=\"printAll()\"\r\n        >\r\n          <mat-icon> print</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n        <app-ndf-report\r\n          *ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n          [config]=\"config\"\r\n          [data]=\"reports?.response\"\r\n          [criteria]=\"filtersParams$ | async\"\r\n          [direction]=\"direction\"\r\n          [attr.data-width]=\"config?.layout?.width || 4\"\r\n          [attr.data-height]=\"config?.layout?.height || 'auto'\"\r\n          [attr.data-start-column]=\"config?.layout?.columnPosition || 'auto'\"\r\n          [attr.data-start-row]=\"config?.layout?.rowPosition || 'auto'\"\r\n          [class.wide]=\"config?.layout?.width >= 6\"\r\n          [style]=\"config?.layout?.style\"\r\n          class=\"reports-grid__item {{ config?.layout?.styleClass }} \"\r\n          (onNavigate)=\"onNavigate($event)\"\r\n          (onOpen)=\"openReportDetails($event, config)\"\r\n        ></app-ndf-report>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <div\r\n    class=\"ndf-reports__details print:hidden\"\r\n    [class.opened]=\"showDetails\"\r\n    [@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n    (@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n  >\r\n    <app-ndf-table\r\n      *ngIf=\"reportDetails$ | async as report\"\r\n      [config]=\"report.config\"\r\n      [activeQuery]=\"activeFiltersQuery$ | async\"\r\n      [customCriteria]=\"detailsFiltersParams$ | async\"\r\n    >\r\n      <ng-template searchTableTemplate let-toggle=\"togglePanel\">\r\n        <div class=\"ndf-reports__details__header flex gap-2\">\r\n          <button mat-stroked-button class=\"toggle-button\" (click)=\"toggle()\">\r\n            <mat-icon> filter_alt</mat-icon>\r\n          </button>\r\n          <button\r\n            mat-stroked-button\r\n            class=\"close-button\"\r\n            (click)=\"closeDetailsPanel()\"\r\n          >\r\n            <mat-icon> close</mat-icon>\r\n          </button>\r\n        </div>\r\n        <h3>\r\n          {{ report.label | translate }}\r\n        </h3>\r\n      </ng-template>\r\n    </app-ndf-table>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #emptyContent>\r\n  <div class=\"ndf-reports__content flex items-center flex-grow-1\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"emptyContentTemplate || defaultEmptyContent\"\r\n    ></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyContent>\r\n  <div class=\"no-data mt-26\">\r\n    {{ 'noData' | translate }}\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{--table-dev-height: var(--ndf-reports-table-dev-height, auto);--report-height: var(--ndf-reports-report-height, 430px);--cp-height: var(--report-height);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%}@media print{:host{--report-height: auto;--cp-print-min-height: 80mm;padding:0}}.loading-result{background:var(--loading-result-background, rgba(255, 255, 255, .5));backdrop-filter:var(--loading-result-filter, blur(3px));width:100%;height:100%;z-index:3}.ndf-reports *{box-sizing:border-box;min-height:0}.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) - 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-pis: 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-pis, 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;width:100%;margin:0;padding:0;page-break-after:avoid}}.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));grid-template-rows:var(--reports-grid-rows, auto);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: 10mm;--reports-grid-margin-top: 0;padding:0;margin:0;--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: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { 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: 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: 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: [{
@@ -48947,7 +48822,7 @@
       return EditorSettingsComponent;
   }());
   EditorSettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorSettingsComponent, deps: [{ token: ComponentRegisterService, optional: true }, { token: EvaluatorsService, optional: true }, { token: NdfTransformService, optional: true }, { token: ChartDataTransformers, optional: true }, { token: ChartPluginsRegistry, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EditorSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorSettingsComponent, selector: "app-editor-settings", ngImport: i0__namespace, template: "<cdk-accordion class=\"settings-list\">\r\n\t<cdk-accordion-item\r\n\t\t*ngFor=\"let item of settingsList; let index = index\"\r\n\t\t#accordionItem=\"cdkAccordionItem\"\r\n\t\tclass=\"settings-list__item\"\r\n\t\trole=\"button\"\r\n\t\ttabindex=\"0\"\r\n\t\t[attr.id]=\"'accordion-header-' + index\"\r\n\t\t[attr.aria-expanded]=\"accordionItem.expanded\"\r\n\t\t[attr.aria-controls]=\"'accordion-body-' + index\"\r\n\t>\r\n\t\t<div class=\"settings-list__item__header\" (click)=\"accordionItem.toggle()\">\r\n\t\t\t<span class=\"settings-list__item__header__title truncate\">\r\n\t\t\t\t{{ item.name | translate }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<mat-icon class=\"settings-list__item__header__icon\">\r\n\t\t\t\t{{ accordionItem.expanded ? 'expand_less' : 'expand_more' }}\r\n\t\t\t</mat-icon>\r\n\t\t</div>\r\n\t\t<div\r\n\t\t\tclass=\"settings-list__item__body\"\r\n\t\t\trole=\"region\"\r\n\t\t\t[style.display]=\"accordionItem.expanded ? '' : 'none'\"\r\n\t\t\t[attr.id]=\"'accordion-body-' + index\"\r\n\t\t\t[attr.aria-labelledby]=\"'accordion-header-' + index\"\r\n\t\t>\r\n\t\t\t<ul class=\"keys-list\">\r\n\t\t\t\t<li\r\n\t\t\t\t\t*ngFor=\"let key of item.keys\"\r\n\t\t\t\t\tclass=\"keys-list__key\"\r\n\t\t\t\t\t[appCopyToClipboard]=\"key\"\r\n\t\t\t\t\t[matTooltip]=\"'JSON_EDITOR.clickToCopy' | translate\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ key }}\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t</cdk-accordion-item>\r\n</cdk-accordion>\r\n", styles: [".settings-list{padding:var(--esl-padding, .5rem);color:var(--esl-color, inherit)}.settings-list__item__header{display:flex;justify-content:space-between;align-items:center;min-width:0;padding:var(--esl-header-padding, .5rem);border-bottom:var(--esl-header-border, 1px solid var(--border-color))}.settings-list__item__header__title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.keys-list{font-family:var(--keys-list-font-family, system-ui);font-size:var(--keys-list-font-size, .9rem);margin-block:var(--keys-list-margin, .5rem)}.keys-list__key{margin-bottom:.2rem;color:var(--keys-text-color, inherit);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-block:.15rem}.keys-list__key:hover{background:var(--keys-hover-background, #f5f5f5)}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6__namespace$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$4.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { type: CopyToClipboardDirective, selector: "[appCopyToClipboard]", inputs: ["appCopyToClipboard"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  EditorSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorSettingsComponent, selector: "app-editor-settings", ngImport: i0__namespace, template: "<cdk-accordion class=\"settings-list\">\r\n\t<cdk-accordion-item\r\n\t\t*ngFor=\"let item of settingsList; let index = index\"\r\n\t\t#accordionItem=\"cdkAccordionItem\"\r\n\t\tclass=\"settings-list__item\"\r\n\t\trole=\"button\"\r\n\t\ttabindex=\"0\"\r\n\t\t[attr.id]=\"'accordion-header-' + index\"\r\n\t\t[attr.aria-expanded]=\"accordionItem.expanded\"\r\n\t\t[attr.aria-controls]=\"'accordion-body-' + index\"\r\n\t>\r\n\t\t<div class=\"settings-list__item__header\" (click)=\"accordionItem.toggle()\">\r\n\t\t\t<span class=\"settings-list__item__header__title truncate\">\r\n\t\t\t\t{{ item.name | translate }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<mat-icon class=\"settings-list__item__header__icon\">\r\n\t\t\t\t{{ accordionItem.expanded ? 'expand_less' : 'expand_more' }}\r\n\t\t\t</mat-icon>\r\n\t\t</div>\r\n\t\t<div\r\n\t\t\tclass=\"settings-list__item__body\"\r\n\t\t\trole=\"region\"\r\n\t\t\t[style.display]=\"accordionItem.expanded ? '' : 'none'\"\r\n\t\t\t[attr.id]=\"'accordion-body-' + index\"\r\n\t\t\t[attr.aria-labelledby]=\"'accordion-header-' + index\"\r\n\t\t>\r\n\t\t\t<ul class=\"keys-list\">\r\n\t\t\t\t<li\r\n\t\t\t\t\t*ngFor=\"let key of item.keys\"\r\n\t\t\t\t\tclass=\"keys-list__key\"\r\n\t\t\t\t\t[appCopyToClipboard]=\"key\"\r\n\t\t\t\t\t[matTooltip]=\"'JSON_EDITOR.clickToCopy' | translate\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ key }}\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t</cdk-accordion-item>\r\n</cdk-accordion>\r\n", styles: [".settings-list{padding:var(--esl-padding, .5rem);color:var(--esl-color, inherit)}.settings-list__item__header{display:flex;justify-content:space-between;align-items:center;min-width:0;padding:var(--esl-header-padding, .5rem);border-bottom:var(--esl-header-border, 1px solid var(--border-color))}.settings-list__item__header__title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.keys-list{font-family:var(--keys-list-font-family, system-ui);font-size:var(--keys-list-font-size, .9rem);margin-block:var(--keys-list-margin, .5rem)}.keys-list__key{margin-bottom:.2rem;color:var(--keys-text-color, inherit);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-block:.15rem}.keys-list__key:hover{background:var(--keys-hover-background, #f5f5f5)}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6__namespace$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$4.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { type: CopyToClipboardDirective, selector: "[appCopyToClipboard]", inputs: ["appCopyToClipboard"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorSettingsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -50146,7 +50021,7 @@
       return NdfUploaderBottomSheetComponent;
   }(BaseComponent));
   NdfUploaderBottomSheetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfUploaderBottomSheetComponent, deps: [{ token: i0__namespace.Injector }, { token: NuxeoDialogService }, { token: NdfUploaderService }, { token: NdfUploaderBottomSheetService }, { token: i1$e.MAT_BOTTOM_SHEET_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NdfUploaderBottomSheetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfUploaderBottomSheetComponent, selector: "ndf-uploader-bottom-sheet", usesInheritance: true, ngImport: i0__namespace, template: "<mat-expansion-panel [expanded]=\"expanded\" hideToggle>\r\n  <mat-expansion-panel-header #panelH (click)=\"panelH._toggle()\">\r\n    <div class=\"w-full d-flex justify-content-between\">\r\n      <ng-container *ngIf=\"completed$ | async as completed; else generalMsg\">\r\n        <ng-container *ngIf=\"completed > 1; else single\">\r\n          <div class=\"flex items-center justify-center fw-bold\">\r\n            {{\r\n              \"UploaderBottomSheet.MultiUploadsComplete\"\r\n                | translate : { completed: completed }\r\n            }}\r\n          </div>\r\n        </ng-container>\r\n        <ng-template #single>\r\n          <div class=\"flex items-center justify-center fw-bold\">\r\n            {{ \"UploaderBottomSheet.SingleUploadsComplete\" | translate }}\r\n          </div></ng-template\r\n        >\r\n      </ng-container>\r\n      <ng-template #generalMsg>\r\n        <div class=\"flex items-center justify-center fw-bold\">\r\n          {{ \"UploaderBottomSheet.UploadingData\" | translate }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div>\r\n        <mat-icon\r\n          class=\"icon-size-3.5 mx-2\"\r\n          [svgIcon]=\"'icons:plus'\"\r\n          (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n          matTooltip=\"{{ 'UploaderBottomSheet.CREATE' | translate }}\"\r\n        >\r\n        </mat-icon>\r\n        <input type=\"file\" hidden #fileInput (change)=\"add($event)\" multiple />\r\n\r\n        <mat-icon\r\n          class=\"icon-size-3.5 mx-2\"\r\n          [svgIcon]=\"'icons:open-folder'\"\r\n          (click)=\"$event.stopPropagation(); open()\"\r\n          matTooltip=\"{{ 'UploaderBottomSheet.ShowUploadedFiles' | translate }}\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          class=\"icon-size-3.5 mx-2\"\r\n          [svgIcon]=\"'icons:expand'\"\r\n          [ngClass]=\"{\r\n            containerOpened: !expanded,\r\n            containerClosed: expanded\r\n          }\"\r\n          (click)=\"$event.stopPropagation(); expanded = !expanded\"\r\n          matTooltip=\"{{\r\n            (expanded\r\n              ? 'UploaderBottomSheet.MINIMIZED'\r\n              : 'UploaderBottomSheet.MAXIMIZED'\r\n            ) | translate\r\n          }}\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          class=\"icon-size-3.5 close-sheet\"\r\n          [svgIcon]=\"'icons:cancel-icon'\"\r\n          (click)=\"$event.stopPropagation(); dismiss()\"\r\n          matTooltip=\"{{ 'UploaderBottomSheet.CLOSE' | translate }}\"\r\n        >\r\n        </mat-icon>\r\n      </div>\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n\r\n  <div>\r\n    <div\r\n      class=\"file-item d-flex justify-content-between align-items-center py-2 px-5\"\r\n      *ngFor=\"\r\n        let fileInfo of uploaderBottomSheetService.filesInfo$ | async;\r\n        trackBy: trackFile\r\n      \"\r\n    >\r\n      <div class=\"d-flex align-items-center truncate\">\r\n        <img\r\n          src=\"{{ fileInfo.icon }}\"\r\n          class=\"file-icon\"\r\n          alt=\"{{ fileInfo.data.name }}\"\r\n        />\r\n        <span class=\"truncate file-name\">{{ fileInfo.data.name }}</span>\r\n      </div>\r\n      <div>\r\n        <!-- only if user hover the row -->\r\n        <span class=\"more-upload-actions align-items-center\">\r\n          <!-- cancel if file : pending or uploading + hover -->\r\n          <mat-icon\r\n            class=\"icon-size-3.5\"\r\n            [svgIcon]=\"'icons:cancel-icon'\"\r\n            (click)=\"$event.stopPropagation(); cancel(fileInfo)\"\r\n            matTooltip=\"{{ 'UploaderBottomSheet.CANCEL' | translate }}\"\r\n            *ngIf=\"\r\n              fileInfo.status == fileStatus.Pending ||\r\n              fileInfo.status == fileStatus.InProgress\r\n            \"\r\n          >\r\n          </mat-icon>\r\n\r\n          <!-- retry if file : canceled or error + hover -->\r\n\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"\r\n              fileInfo.metadata?.error == notAllowedFile\r\n                ? 'icons:error'\r\n                : 'icons:retry'\r\n            \"\r\n            (click)=\"\r\n              $event.stopPropagation();\r\n              fileInfo.metadata?.error == notAllowedFile\r\n                ? null\r\n                : retry(fileInfo)\r\n            \"\r\n            matTooltip=\"{{\r\n              fileInfo.metadata?.error || 'UploaderBottomSheet.RETRY'\r\n                | translate\r\n            }}\"\r\n            *ngIf=\"\r\n              fileInfo.status == fileStatus.Canceled ||\r\n              fileInfo.status == fileStatus.Error\r\n            \"\r\n          >\r\n          </mat-icon>\r\n\r\n          <!-- open file : hover + completed -->\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"'icons:open-folder'\"\r\n            (click)=\"$event.stopPropagation(); open(fileInfo)\"\r\n            matTooltip=\"{{ 'UploaderBottomSheet.OPEN' | translate }}\"\r\n            *ngIf=\"fileInfo.status == fileStatus.Completed\"\r\n          >\r\n          </mat-icon>\r\n        </span>\r\n\r\n        <span class=\"base-upload-actions align-items-center\">\r\n          <!-- file completed -->\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"'icons:complete'\"\r\n            *ngIf=\"fileInfo.status == fileStatus.Completed\"\r\n          >\r\n          </mat-icon>\r\n\r\n          <!-- file has error -->\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"'icons:error'\"\r\n            *ngIf=\"fileInfo.status == fileStatus.Error\"\r\n          >\r\n          </mat-icon>\r\n\r\n          <!-- user cancle the file -->\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"'icons:error'\"\r\n            *ngIf=\"fileInfo.status == fileStatus.Canceled\"\r\n          >\r\n          </mat-icon>\r\n\r\n          <div\r\n            class=\"spinner-container\"\r\n            *ngIf=\"\r\n              fileInfo.status == fileStatus.Pending ||\r\n              fileInfo.status == fileStatus.InProgress\r\n            \"\r\n          >\r\n            <mat-spinner\r\n              [value]=\"fileInfo.progress\"\r\n              diameter=\"20\"\r\n              strokeWidth=\"2\"\r\n              color=\"primary\"\r\n            ></mat-spinner>\r\n            <div\r\n              class=\"spinner-percentage\"\r\n              *ngIf=\"fileInfo.status == fileStatus.InProgress\"\r\n            >\r\n              {{ fileInfo.progress | number : \"1.0-0\" }}\r\n            </div>\r\n          </div>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".upload-bottom-sheet{width:var(--upload-bottom-sheet-width, 30vw)!important;padding:var(--upload-bottom-sheet-padding, 0)!important;border-width:var(--upload-bottom-sheet-border-width, 1px);border-radius:var(--upload-bottom-sheet-border-radius, 16px 16px 0 0)!important;position:fixed!important;bottom:var(--upload-bottom-sheet-bottom, 0)!important}.upload-bottom-sheet .mat-icon-button{height:var(--upload-bottom-sheet-mat-icon-button-height, 1.125rem)!important;line-height:var(--upload-bottom-sheet-mat-icon-button-line-height, 1.125rem)!important}.upload-bottom-sheet .mat-expansion-panel-content{overflow-y:auto!important;max-height:var(--upload-bottom-sheet-mat-expansion-panel-max-height, 20vh)!important}.upload-bottom-sheet .mat-expansion-panel-body{padding:var(--upload-bottom-sheet-mat-expansion-panel-body-padding, 0)!important}.upload-bottom-sheet .file-icon{width:var(--upload-bottom-sheet-file-icon-width, 24px);margin-inline-end:var(--upload-bottom-sheet-file-icon-margin-inline-end, 6px);padding:var(--upload-bottom-sheet-file-icon-padding, 2px)}.upload-bottom-sheet .spinner-container{position:relative;display:inline-flex;align-items:center;justify-content:center}.upload-bottom-sheet .spinner-percentage{position:absolute;font-size:var(--upload-bottom-sheet-spinner-percentage-font-size, 10px)}.upload-bottom-sheet .file-name{height:var(--upload-bottom-sheet-file-name-height, 24px)}.upload-bottom-sheet .base-upload-actions{display:flex}.upload-bottom-sheet .more-upload-actions{display:none}.upload-bottom-sheet .file-item:hover{cursor:pointer;background:var(--upload-bottom-sheet-file-item-hover-background, #f5f5f5)}.upload-bottom-sheet .file-item:hover .base-upload-actions{display:none}.upload-bottom-sheet .file-item:hover .more-upload-actions{display:flex}.upload-bottom-sheet .close-sheet{margin-inline-start:var(--upload-bottom-sheet-close-sheet-margin-inline-start, .5rem)}.mat-bottom-sheet-container{padding:unset}[lang=ar] .upload-bottom-sheet{left:1rem!important}[lang=en] .upload-bottom-sheet{right:1rem!important}\n"], components: [{ type: i6__namespace$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6__namespace$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "number": i4__namespace$1.DecimalPipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  NdfUploaderBottomSheetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfUploaderBottomSheetComponent, selector: "ndf-uploader-bottom-sheet", usesInheritance: true, ngImport: i0__namespace, template: "<mat-expansion-panel [expanded]=\"expanded\" hideToggle>\r\n  <mat-expansion-panel-header #panelH (click)=\"panelH._toggle()\">\r\n    <div class=\"w-full d-flex justify-content-between\">\r\n      <ng-container *ngIf=\"completed$ | async as completed; else generalMsg\">\r\n        <ng-container *ngIf=\"completed > 1; else single\">\r\n          <div class=\"flex items-center justify-center fw-bold\">\r\n            {{\r\n              \"UploaderBottomSheet.MultiUploadsComplete\"\r\n                | translate : { completed: completed }\r\n            }}\r\n          </div>\r\n        </ng-container>\r\n        <ng-template #single>\r\n          <div class=\"flex items-center justify-center fw-bold\">\r\n            {{ \"UploaderBottomSheet.SingleUploadsComplete\" | translate }}\r\n          </div></ng-template\r\n        >\r\n      </ng-container>\r\n      <ng-template #generalMsg>\r\n        <div class=\"flex items-center justify-center fw-bold\">\r\n          {{ \"UploaderBottomSheet.UploadingData\" | translate }}\r\n        </div>\r\n      </ng-template>\r\n\r\n      <div>\r\n        <mat-icon\r\n          class=\"icon-size-3.5 mx-2\"\r\n          [svgIcon]=\"'icons:plus'\"\r\n          (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n          matTooltip=\"{{ 'UploaderBottomSheet.CREATE' | translate }}\"\r\n        >\r\n        </mat-icon>\r\n        <input type=\"file\" hidden #fileInput (change)=\"add($event)\" multiple />\r\n\r\n        <mat-icon\r\n          class=\"icon-size-3.5 mx-2\"\r\n          [svgIcon]=\"'icons:open-folder'\"\r\n          (click)=\"$event.stopPropagation(); open()\"\r\n          matTooltip=\"{{ 'UploaderBottomSheet.ShowUploadedFiles' | translate }}\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          class=\"icon-size-3.5 mx-2\"\r\n          [svgIcon]=\"'icons:expand'\"\r\n          [ngClass]=\"{\r\n            containerOpened: !expanded,\r\n            containerClosed: expanded\r\n          }\"\r\n          (click)=\"$event.stopPropagation(); expanded = !expanded\"\r\n          matTooltip=\"{{\r\n            (expanded\r\n              ? 'UploaderBottomSheet.MINIMIZED'\r\n              : 'UploaderBottomSheet.MAXIMIZED'\r\n            ) | translate\r\n          }}\"\r\n        >\r\n        </mat-icon>\r\n\r\n        <mat-icon\r\n          class=\"icon-size-3.5 close-sheet\"\r\n          [svgIcon]=\"'icons:cancel-icon'\"\r\n          (click)=\"$event.stopPropagation(); dismiss()\"\r\n          matTooltip=\"{{ 'UploaderBottomSheet.CLOSE' | translate }}\"\r\n        >\r\n        </mat-icon>\r\n      </div>\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n\r\n  <div>\r\n    <div\r\n      class=\"file-item d-flex justify-content-between align-items-center py-2 px-5\"\r\n      *ngFor=\"\r\n        let fileInfo of uploaderBottomSheetService.filesInfo$ | async;\r\n        trackBy: trackFile\r\n      \"\r\n    >\r\n      <div class=\"d-flex align-items-center truncate\">\r\n        <img\r\n          src=\"{{ fileInfo.icon }}\"\r\n          class=\"file-icon\"\r\n          alt=\"{{ fileInfo.data.name }}\"\r\n        />\r\n        <span class=\"truncate file-name\">{{ fileInfo.data.name }}</span>\r\n      </div>\r\n      <div>\r\n        <!-- only if user hover the row -->\r\n        <span class=\"more-upload-actions align-items-center\">\r\n          <!-- cancel if file : pending or uploading + hover -->\r\n          <mat-icon\r\n            class=\"icon-size-3.5\"\r\n            [svgIcon]=\"'icons:cancel-icon'\"\r\n            (click)=\"$event.stopPropagation(); cancel(fileInfo)\"\r\n            matTooltip=\"{{ 'UploaderBottomSheet.CANCEL' | translate }}\"\r\n            *ngIf=\"\r\n              fileInfo.status == fileStatus.Pending ||\r\n              fileInfo.status == fileStatus.InProgress\r\n            \"\r\n          >\r\n          </mat-icon>\r\n\r\n          <!-- retry if file : canceled or error + hover -->\r\n\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"\r\n              fileInfo.metadata?.error == notAllowedFile\r\n                ? 'icons:error'\r\n                : 'icons:retry'\r\n            \"\r\n            (click)=\"\r\n              $event.stopPropagation();\r\n              fileInfo.metadata?.error == notAllowedFile\r\n                ? null\r\n                : retry(fileInfo)\r\n            \"\r\n            matTooltip=\"{{\r\n              fileInfo.metadata?.error || 'UploaderBottomSheet.RETRY'\r\n                | translate\r\n            }}\"\r\n            *ngIf=\"\r\n              fileInfo.status == fileStatus.Canceled ||\r\n              fileInfo.status == fileStatus.Error\r\n            \"\r\n          >\r\n          </mat-icon>\r\n\r\n          <!-- open file : hover + completed -->\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"'icons:open-folder'\"\r\n            (click)=\"$event.stopPropagation(); open(fileInfo)\"\r\n            matTooltip=\"{{ 'UploaderBottomSheet.OPEN' | translate }}\"\r\n            *ngIf=\"fileInfo.status == fileStatus.Completed\"\r\n          >\r\n          </mat-icon>\r\n        </span>\r\n\r\n        <span class=\"base-upload-actions align-items-center\">\r\n          <!-- file completed -->\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"'icons:complete'\"\r\n            *ngIf=\"fileInfo.status == fileStatus.Completed\"\r\n          >\r\n          </mat-icon>\r\n\r\n          <!-- file has error -->\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"'icons:error'\"\r\n            *ngIf=\"fileInfo.status == fileStatus.Error\"\r\n          >\r\n          </mat-icon>\r\n\r\n          <!-- user cancle the file -->\r\n          <mat-icon\r\n            class=\"icon-size-4.5\"\r\n            [svgIcon]=\"'icons:error'\"\r\n            *ngIf=\"fileInfo.status == fileStatus.Canceled\"\r\n          >\r\n          </mat-icon>\r\n\r\n          <div\r\n            class=\"spinner-container\"\r\n            *ngIf=\"\r\n              fileInfo.status == fileStatus.Pending ||\r\n              fileInfo.status == fileStatus.InProgress\r\n            \"\r\n          >\r\n            <mat-spinner\r\n              [value]=\"fileInfo.progress\"\r\n              diameter=\"20\"\r\n              strokeWidth=\"2\"\r\n              color=\"primary\"\r\n            ></mat-spinner>\r\n            <div\r\n              class=\"spinner-percentage\"\r\n              *ngIf=\"fileInfo.status == fileStatus.InProgress\"\r\n            >\r\n              {{ fileInfo.progress | number : \"1.0-0\" }}\r\n            </div>\r\n          </div>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".upload-bottom-sheet{width:var(--upload-bottom-sheet-width, 30vw)!important;padding:var(--upload-bottom-sheet-padding, 0)!important;border-width:var(--upload-bottom-sheet-border-width, 1px);border-radius:var(--upload-bottom-sheet-border-radius, 16px 16px 0 0)!important;position:fixed!important;bottom:var(--upload-bottom-sheet-bottom, 0)!important}.upload-bottom-sheet .mat-icon-button{height:var(--upload-bottom-sheet-mat-icon-button-height, 1.125rem)!important;line-height:var(--upload-bottom-sheet-mat-icon-button-line-height, 1.125rem)!important}.upload-bottom-sheet .mat-expansion-panel-content{overflow-y:auto!important;max-height:var(--upload-bottom-sheet-mat-expansion-panel-max-height, 20vh)!important}.upload-bottom-sheet .mat-expansion-panel-body{padding:var(--upload-bottom-sheet-mat-expansion-panel-body-padding, 0)!important}.upload-bottom-sheet .file-icon{width:var(--upload-bottom-sheet-file-icon-width, 24px);margin-inline-end:var(--upload-bottom-sheet-file-icon-margin-inline-end, 6px);padding:var(--upload-bottom-sheet-file-icon-padding, 2px)}.upload-bottom-sheet .spinner-container{position:relative;display:inline-flex;align-items:center;justify-content:center}.upload-bottom-sheet .spinner-percentage{position:absolute;font-size:var(--upload-bottom-sheet-spinner-percentage-font-size, 10px)}.upload-bottom-sheet .file-name{height:var(--upload-bottom-sheet-file-name-height, 24px)}.upload-bottom-sheet .base-upload-actions{display:flex}.upload-bottom-sheet .more-upload-actions{display:none}.upload-bottom-sheet .file-item:hover{cursor:pointer;background:var(--upload-bottom-sheet-file-item-hover-background, #f5f5f5)}.upload-bottom-sheet .file-item:hover .base-upload-actions{display:none}.upload-bottom-sheet .file-item:hover .more-upload-actions{display:flex}.upload-bottom-sheet .close-sheet{margin-inline-start:var(--upload-bottom-sheet-close-sheet-margin-inline-start, .5rem)}.mat-bottom-sheet-container{padding:unset}[lang=ar] .upload-bottom-sheet{left:1rem!important}[lang=en] .upload-bottom-sheet{right:1rem!important}\n"], components: [{ type: i6__namespace$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6__namespace$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe, "number": i4__namespace$1.DecimalPipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfUploaderBottomSheetComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -51149,7 +51024,7 @@
       return NdfScannerComponent;
   }());
   NdfScannerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfScannerComponent, deps: [{ token: i1__namespace.TranslateService }, { token: DocumentsService }, { token: NdfUploaderService }, { token: i4__namespace$1.DatePipe }, { token: i4.APP_BASE_HREF }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NdfScannerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfScannerComponent, selector: "ndf-scanner", inputs: { useStoredFile: "useStoredFile", hideUploadButton: "hideUploadButton", loading: "loading" }, outputs: { file: "file" }, host: { classAttribute: "ndf-scanner" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div id=\"DWTcontainer\" class=\"h-full\">\r\n\t<div id=\"DWTcontainerTop\">\r\n\t\t<div id=\"divEdit\">\r\n\t\t\t<ul class=\"operateGrp\">\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.showImageEditor' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnShowImageEditor_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Editor'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.rotateLeft' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRotateLeft_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Rotate-Left'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.rotateRight' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRotateRight_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Rotate-Right'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.rotate180' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRotate180_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Rotate-180'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.mirror' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnMirror_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:flip-horizontal'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.flip' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnFlip_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:flip-vertical'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.removeSelected' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRemoveCurrentImage_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:RemoveImages'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.removeAll' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRemoveAllImages_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:RemoveAllImages'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.resize' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnChangeImageSize_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:changeSize'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.crop' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnCrop_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:crop'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t\t<div id=\"ImgSizeEditor\" style=\"visibility: hidden\">\r\n\t\t\t\t<ul>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<label for=\"img_height\"\r\n\t\t\t\t\t\t\t>{{ 'scanner.newHeight' | translate }} :\r\n\t\t\t\t\t\t\t<input type=\"text\" id=\"img_height\" style=\"width: 50%\" size=\"10\" />\r\n\t\t\t\t\t\t\t{{ 'scanner.pixel' | translate }}</label\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<label for=\"img_width\"\r\n\t\t\t\t\t\t\t>{{ 'scanner.newWidth' | translate }} :&nbsp;\r\n\t\t\t\t\t\t\t<input type=\"text\" id=\"img_width\" style=\"width: 50%\" size=\"10\" />\r\n\t\t\t\t\t\t\t{{ 'scanner.pixel' | translate }}</label\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t{{ 'scanner.InterpolationMethod' | translate }}:\r\n\t\t\t\t\t\t<select size=\"1\" id=\"InterpolationMethod\">\r\n\t\t\t\t\t\t\t<option value=\"\"></option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li style=\"text-align: center\">\r\n\t\t\t\t\t\t<input type=\"button\" value=\"   OK   \" id=\"btnChangeImageSizeOK\" (click)=\"btnChangeImageSizeOK_onclick()\" />\r\n\t\t\t\t\t\t<input type=\"button\" value=\" Cancel \" id=\"btnCancelChange\" (click)=\"btnCancelChange_onclick()\" />\r\n\t\t\t\t\t</li>\r\n\t\t\t\t</ul>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div id=\"dwtcontrolContainer\"></div>\r\n\t\t<div class=\"w-full\" id=\"loader\">\r\n\t\t\t<div class=\"flex items-center justify-center h-full\">\r\n\t\t\t\t<mat-spinner></mat-spinner>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div id=\"btnGroupBtm\">\r\n\t\t\t<div class=\"ct-lt\">\r\n\t\t\t\t{{ 'scanner.page' | translate }}:\r\n\t\t\t\t<input id=\"DW_btnFirstImage\" (click)=\"btnFirstImage_onclick()\" type=\"button\" value=\" |< \" />&nbsp;\r\n\t\t\t\t<input id=\"DW_btnPreImage\" (click)=\"btnPreImage_onclick()\" type=\"button\" value=\" < \" />&nbsp;&nbsp;\r\n\t\t\t\t<input type=\"text\" size=\"2\" id=\"DW_CurrentImage\" readonly=\"readonly\" />\r\n\t\t\t\t/\r\n\t\t\t\t<input type=\"text\" size=\"2\" id=\"DW_TotalImage\" readonly=\"readonly\" />&nbsp;&nbsp;\r\n\t\t\t\t<input id=\"DW_btnNextImage\" (click)=\"btnNextImage_onclick()\" type=\"button\" value=\"> \" />&nbsp;\r\n\t\t\t\t<input id=\"DW_btnLastImage\" (click)=\"btnLastImage_onclick()\" type=\"button\" value=\">| \" />\r\n\t\t\t</div>\r\n\t\t\t<div class=\"ct-rt\">\r\n\t\t\t\t{{ 'scanner.preview' | translate }}:\r\n\t\t\t\t<select size=\"1\" id=\"DW_PreviewMode\" (change)=\"setlPreviewMode()\">\r\n\t\t\t\t\t<option value=\"0\">1X1</option>\r\n\t\t\t\t\t<option value=\"1\">2X2</option>\r\n\t\t\t\t\t<option value=\"2\">3X3</option>\r\n\t\t\t\t\t<option value=\"3\">4X4</option>\r\n\t\t\t\t\t<option value=\"4\">5X5</option></select\r\n\t\t\t\t><br />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<div id=\"ScanWrapper\">\r\n\t\t<div id=\"divScanner\" class=\"divinput\">\r\n\t\t\t<div id=\"div_ScanImage\" class=\"divTableStyle\">\r\n\t\t\t\t<ul id=\"ulScaneImageHIDE\">\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<label for=\"source\">\r\n\t\t\t\t\t\t\t<p>{{ 'scanner.source' | translate }}:</p>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<select size=\"1\" id=\"source\" style=\"position: relative\" (change)=\"source_onchange()\">\r\n\t\t\t\t\t\t\t<option value=\"\"></option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li style=\"display: none\" id=\"pNoScanner\">\r\n\t\t\t\t\t\t<a href=\"javascript: void(0)\" class=\"ShowtblLoadImage\" style=\"color: #fe8e14\" id=\"aNoScanner\"\r\n\t\t\t\t\t\t\t>(No TWAIN compatible drivers detected)</a\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li id=\"divProductDetail\">\r\n\t\t\t\t\t\t<ul id=\"divTwainType\">\r\n\t\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t\t<label id=\"lblShowUI\" for=\"ShowUI\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"checkbox\" id=\"ShowUI\" />{{ 'scanner.ShowUI' | translate }}&nbsp;</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<label for=\"ADF\"> <input type=\"checkbox\" id=\"ADF\" />{{ 'scanner.AutoFeeder' | translate }}&nbsp;</label>\r\n\t\t\t\t\t\t\t\t<label for=\"Duplex\"> <input type=\"checkbox\" id=\"Duplex\" />{{ 'scanner.Duplex' | translate }}</label>\r\n\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t\t{{ 'scanner.PixelType' | translate }}:\r\n\t\t\t\t\t\t\t\t<label for=\"BW\" style=\"margin-left: 5px\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"BW\" name=\"PixelType\" />{{ 'scanner.B&W' | translate }}</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<label for=\"Gray\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"Gray\" name=\"PixelType\" />{{ 'scanner.Gray' | translate }}</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<label for=\"RGB\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"RGB\" name=\"PixelType\" />{{ 'scanner.Color' | translate }}</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t\t<span>{{ 'scanner.Resolution' | translate }}:&nbsp;</span\r\n\t\t\t\t\t\t\t\t><select size=\"1\" id=\"Resolution\">\r\n\t\t\t\t\t\t\t\t\t<option value=\"100\">100</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"150\">150</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"200\">200</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"300\" selected>300</option>\r\n\t\t\t\t\t\t\t\t</select>\r\n\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t</ul>\r\n\t\t\t\t\t</li>\r\n\r\n\t\t\t\t\t<div class=\"flex justify-between items-center\">\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\tid=\"btnScan\"\r\n\t\t\t\t\t\t\tdisabled=\"disabled\"\r\n\t\t\t\t\t\t\t(click)=\"acquireImage()\"\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tclass=\"action-btn action-btn_2\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<i class=\"bi bi-upc-upload icon\"></i>\r\n\t\t\t\t\t\t\t<span> {{ 'scanner.scanFile' | translate }}</span>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t(click)=\"btnLoadImagesOrPDFs_onclick()\"\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tclass=\"action-btn action-btn_1 flex items-center justify-center gap-x-2\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<i class=\"bi bi-upload icon\"></i>\r\n\t\t\t\t\t\t\t<span> {{ 'scanner.loadFile' | translate }}</span>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ul>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"flex justify-end mx-3\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"btn save-button\"\r\n\t\t\t\t[ngClass]=\"{ 'hide-upload-button': hideUploadButton }\"\r\n\t\t\t\t#scannerUploadButton\r\n\t\t\t\tid=\"scannerUploadButton\"\r\n\t\t\t\t[disabled]=\"DWObject?.HowManyImagesInBuffer === 0\"\r\n\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t(click)=\"convertToBlob()\"\r\n\t\t\t>\r\n\t\t\t\t{{ 'scanner.saveFile' | translate }}\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".ndf-scanner img{vertical-align:middle;border:0}.ndf-scanner p{margin:0;padding:0}.ndf-scanner a:link,.ndf-scanner a:visited{color:#606060;text-decoration:none}.ndf-scanner a:hover{color:#fe8e14}.ndf-scanner input{font:normal 12px verdana;color:#444}.ndf-scanner input.invalid{background-color:#ff9;border:2px red inset}.ndf-scanner a img{border:none}.ndf-scanner a img:hover{border:none}.ndf-scanner ul{list-style:none;padding-left:0;margin:0}.ndf-scanner .container{width:980px;margin:0 auto}.ndf-scanner .container:after,.ndf-scanner .clearfix:after{content:\"\";display:table;clear:both}.ndf-scanner .tc{text-align:center}.ndf-scanner .btnOrg{padding:0 15px;height:30px;line-height:28px;font-size:14px;color:#fff;background:#50a8e1;border:none;outline:none;cursor:pointer;border-radius:5px;-webkit-border-radius:5px;-moz-border-right-colors:5px;transition:all .2s ease-in-out}.ndf-scanner .btnOrg:hover{background:#61c2ec}.ndf-scanner .d-btn{display:inline-block;padding:0 25px;height:36px;line-height:30px;color:#fe8e14;font-size:14px;text-align:center;cursor:pointer;border:solid 2px #fe8e14;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;transition:all .2s ease-in-out}.ndf-scanner .d-btn:link,.ndf-scanner .d-btn:visited{color:#fe8e14}.ndf-scanner .d-btn:hover{color:#ffae38;border:solid 2px #ffae38}.ndf-scanner .d-btn.lgBtn{height:46px;line-height:40px}.ndf-scanner .d-btn.mdBtn{height:42px;line-height:36px}.ndf-scanner .d-btn.smBtn{height:38px;line-height:32px}.ndf-scanner .d-btn.bgOrange{background:#fe8e14;color:#fff}.ndf-scanner .d-btn.bgOrange:hover{background:#ffae38}.ndf-scanner .d-btn.bgBlue{border-color:#50a8e1;background:#50a8e1;color:#fff}.ndf-scanner .d-btn.bgBlue:hover{border-color:#61c2ec;background:#61c2ec}.ndf-scanner #dwtScanDemo{width:980px;margin:0 auto}.ndf-scanner #dwtScanDemo .ct-top{padding:0 0 15px}.ndf-scanner #dwtScanDemo .ct-top .title{font-size:18px;line-height:27px;color:#444}.ndf-scanner #dwtScanDemo .ct-top .desc{margin:0 15px 0 30px;font-size:14px;line-height:24px;color:#aaa}.ndf-scanner #DWTcontainer{display:flex;justify-content:space-between;flex-direction:row}.ndf-scanner #DWTcontainerTop{position:relative;float:left;flex:1;margin:0 10px;height:auto;border-radius:4px;border:3px solid #ccc;display:flex;justify-content:space-between;flex-direction:row;overflow:hidden}.ndf-scanner .ds-dwt-container-box>div{border:none!important}.ndf-scanner #divEdit{float:left;margin:0;padding:0;width:60px;background:#fff;border-right:1px solid #ccc}.ndf-scanner #divEdit .operateGrp li{margin:0;width:60px;height:57px;line-height:52px;border-bottom:solid 1px #ccc;text-align:center}.ndf-scanner #divEdit .operateGrp li:nth-last-child(2){height:58px}.ndf-scanner #divEdit .operateGrp li:last-child{height:56px}.ndf-scanner #divEdit .operateGrp li>img{cursor:pointer}.ndf-scanner #Crop{padding:10px 5px 5px;text-align:center;border-collapse:collapse;border:3px solid #ce5e04;position:absolute;height:80px;z-index:1;background-color:#f0f0f0;width:250px}.ndf-scanner #ImgSizeEditor{padding:10px 15px;position:absolute;z-index:1;top:513px;left:-1px;height:auto;width:320px;font-size:14px;color:#606060;text-align:left;background-color:#f5f5f5;border-collapse:collapse;border:1px solid #ccc;box-shadow:4px 4px 18px #ccc;-webkit-box-shadow:4px 4px 18px #ccc;-moz-box-shadow:4px 4px 18px #ccc}.ndf-scanner #ImgSizeEditor li{margin-bottom:5px}.ndf-scanner #ImgSizeEditor input{background:#fff;border:solid 1px #ccc}.ndf-scanner #ImgSizeEditor input[type=text]{padding-left:3px}.ndf-scanner #ImgSizeEditor input[type=button]{padding:5px;margin:6px 5px 0}.ndf-scanner #dwtcontrolContainer{float:left;width:100%;height:calc(100% - 58px)}.ndf-scanner #dwtcontrolContainer .dynamsoft-dwt-container-box>div{border:none!important}.ndf-scanner #dwt-NonInstallContainerID{float:left;width:560px;height:590px}.ndf-scanner #DWTcontainerTop #btnGroupBtm{position:absolute;bottom:0;padding:15px;width:calc(100% - 60px);height:58px;background:#f5f5f5;border-top:1px solid #ccc;font-size:14px;color:#606060;vertical-align:bottom;display:flex;justify-content:space-between;flex-direction:row;align-items:center;box-sizing:border-box;left:60px}.ndf-scanner #btnGroupBtm .ct-lt{float:left}.ndf-scanner #btnGroupBtm .ct-lt input{padding:0;margin-right:6px;width:25px;height:20px;font-size:10px;background:var(--input-field-bg, #f5f5f5);border:solid 1px var(--border-color, #bbbcc0);color:var(--input-field-color, #606060);outline:none;cursor:pointer}.ndf-scanner #btnGroupBtm .ct-lt input[type=text]{height:20px;font-size:12px;border:none;cursor:default}.ndf-scanner #btnGroupBtm .ct-lt #DW_btnFirstImage{margin-left:5px}.ndf-scanner #btnGroupBtm .ct-lt #DW_CurrentImage{margin:0 0 0 -13px;text-align:right}.ndf-scanner #btnGroupBtm .ct-lt #DW_TotalImage{margin:0 -7px 0 0;text-align:left}.ndf-scanner #btnGroupBtm .ct-rt{float:right}.ndf-scanner #DW_PreviewMode{padding:0 5px;margin-left:5px;height:26px;border:solid 1px #d8d8d8;color:#444;outline:none;border-radius:5px;cursor:pointer}.ndf-scanner #ScanWrapper{border-radius:4px;width:315px;height:570px;box-sizing:border-box}.ndf-scanner div.divinput{font-size:14px;color:#606060;line-height:24px;margin-bottom:20px}.ndf-scanner .divType,.ndf-scanner #ScanWrapper .toggle{padding-left:20px;height:38px;line-height:36px;font-size:14px;color:#444;background:#eee;border-bottom:1px solid #ccc;cursor:pointer}.ndf-scanner #ScanWrapper .toggle{cursor:default}.ndf-scanner .mark_arrow{display:block;float:right;margin:15px 20px 0 0;width:12px;height:8px}.ndf-scanner .divTableStyle{border:3px solid #ccc;border-radius:5px;padding:10px}.ndf-scanner .divTableStyle input[type=radio],.ndf-scanner .divTableStyle input[type=checkbox]{margin:0 5px!important;height:13px;display:inline-block}.ndf-scanner #ScanWrapper select,.ndf-scanner #divUpload input[type=text]{margin-top:3px;margin-bottom:6px;height:26px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.ndf-scanner #ScanWrapper input[type=checkbox],.ndf-scanner #ScanWrapper input[type=radio]{margin:0 3px 0 0}.ndf-scanner #divScanner{border-bottom:none}.ndf-scanner #PCollapse{list-style:none inside none;margin-left:0;padding-left:0}.ndf-scanner select#source{margin-top:3px;padding-left:3px;width:100%;font-size:12px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.ndf-scanner select#Resolution{margin-left:3px;width:192px;height:26px}.ndf-scanner #divProductDetail li{margin-top:8px}.ndf-scanner #divProductDetail li:first-child{margin-top:3px}.ndf-scanner #divProductDetail li label{display:inline-block;margin:0 4px;font-size:12px}.ndf-scanner #divProductDetail li label:last-child{margin:0}.ndf-scanner #divProductDetail li label input{width:15px;height:15px;vertical-align:middle}.ndf-scanner #div_LoadLocalImage input[type=button]{margin:15px 0;width:90px;height:30px}.ndf-scanner #div_ScanImage{position:relative}.ndf-scanner #tblLoadImage{position:absolute;top:102px;z-index:1;padding:30px 22px;width:275px;height:128px;font-size:14px;line-height:30px;text-align:left;border:1px solid #fe8e14;background-color:#f5f5f5}.ndf-scanner #tblLoadImage>a{position:absolute;top:15px;right:15px;line-height:normal;text-decoration:none}.ndf-scanner #tblLoadImage a{color:#50a8e1}.ndf-scanner #tblLoadImage a:hover{color:#61c2ec}.ndf-scanner #divUpload input[type=text]{width:100%;padding-left:5px}.ndf-scanner #divUpload li label{display:inline-block;margin:0 8px 0 0;font-size:12px}.ndf-scanner #divUpload li img{margin-right:2px}.ndf-scanner #divUpload li label:last-child{margin-right:0}.ndf-scanner #divUpload li input{width:15px;height:15px;vertical-align:middle}.ndf-scanner #divUpload li:nth-child(3){margin:5px 0 8px}.ndf-scanner #divUpload li{padding:0 20px}.ndf-scanner #divUpload li:nth-child(2){padding-top:12px}.ndf-scanner #divUpload input[type=button]{margin:14px 0 20px}.ndf-scanner #divUpload #btnSave,.ndf-scanner #divUpload #btnUpload{padding:0;width:115px;height:30px;margin-right:15px;cursor:pointer}.ndf-scanner #divUpload #btnUpload{width:138px;margin-right:0}.ndf-scanner #DWTcontainerBtm{position:relative;float:left;width:980px}.ndf-scanner #DWTemessageContainer{float:left}.ndf-scanner #DWTemessageContainer input[type=text]{border:solid 1px #ccc;padding-left:3px}.ndf-scanner #DWTemessageContainer input[type=button]{cursor:pointer;margin:0 3px;outline:none}.ndf-scanner #DWTdivMsg{padding:5px 0 0;font-size:14px;color:#444}.ndf-scanner #DWTemessage{padding:6px 0 0 8px;margin-top:3px;width:632px;height:160px;border:solid 1px #ccc;overflow-y:scroll;background:#fff}.ndf-scanner #divNoteMessage{float:right;padding:10px 15px;margin-top:34px;width:315px;height:160px;font-size:12px;line-height:20px;border:1px solid #ccc;background:#e7f2fd;color:#606060}.ndf-scanner #divNoteMessage p{margin:0;color:#444}.ndf-scanner .ds-dialog-wrap,.ndf-scanner .ds-dialog-wrap div{box-sizing:content-box!important}.ndf-scanner .ds-dialog-wrap:before,.ndf-scanner .ds-dialog-wrap div:before,.ndf-scanner .ds-dialog-wrap:after,.ndf-scanner .ds-dialog-wrap div:after{box-sizing:content-box!important}.ndf-scanner .ks-overlay{position:absolute;left:-9999px;top:-9999px}.ndf-scanner .ks-ext-close{padding:0 20px;position:absolute;right:-5px;top:5px}.ndf-scanner .ks-ext-close,.ndf-scanner .ks-ext-close:link{color:#22a;text-decoration:none;cursor:pointer}.ndf-scanner .ks-ext-mask{background:#999;filter:alpha(opacity=70);-moz-opacity:.7;opacity:.7}.ndf-scanner .D-dailog .ks-ext-close .ks-ext-close-x{height:8px}.ndf-scanner .D-dailog .ks-ext-close,.ndf-scanner .D-dailog .ks-ext-close:hover{background:none;border:none}.ndf-scanner .D-dailog{position:absolute;left:-9999px;top:-99999px;margin:100px auto;padding:0;width:392px;height:262px;background-color:#f1f2f2}.ndf-scanner .D-dailog .D-dailog-body{width:350px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Mac{width:350px;height:235px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-NotAllowed{color:#444;line-height:1.8;width:350px;height:185px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Scan{width:380px;height:240px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Scan-sample{width:380px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog a{text-decoration:none}.ndf-scanner .link{text-decoration:underline}.ndf-scanner .D-dailog ul{margin:10px 0 10px 20px;list-style-type:disc}.ndf-scanner .red{color:red;margin-left:5px}.ndf-scanner #message{position:fixed;top:0px;left:0px;width:100%;z-index:105;text-align:center;font-weight:bold;font-size:100%;padding:10px 0;color:#239210;background-color:#e0f0d6;border:1px solid #54d33f;box-shadow:0 0 10px #3a3a3a}.ndf-scanner #MessageBody a{color:#6a9962;font-size:14px}.ndf-scanner #message span{text-align:center;width:95%;float:left}.ndf-scanner #MessageBoy a:hover{text-decoration:underline}.ndf-scanner .close-notify{white-space:nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}.ndf-scanner .close-notify a{color:#fff}.ndf-scanner .DWTPage{margin:0 auto}.hide-upload-button{opacity:0!important}app-scanner input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px!important;height:20px!important;border:2px solid var(--main-color)!important;background-color:var(--wrapper-bg)!important;cursor:pointer;border-radius:4px;position:relative;transition:background-color .3s}app-scanner input[type=checkbox]:checked{background-color:var(--main-color)!important;border-color:var(--main-color)!important}app-scanner input[type=checkbox]:checked:after{content:\"\";position:absolute;top:2px;left:6px;width:5px;border:solid var(--checkbox-inner-color, #fff);height:10px;border-width:0 2px 2px 0;transform:rotate(45deg)}app-scanner input[type=radio]{appearance:none;-webkit-appearance:none;width:20px!important;height:20px!important;border:2px solid var(--radio-border, var(--main-color))!important;background-color:var(--radio-bg, var(--wrapper-bg))!important;border-radius:50%;cursor:pointer;position:relative;transition:background-color .3s ease}app-scanner input[type=radio]:checked{background-color:var(--main-color)!important;border-color:var(--main-color)!important}app-scanner input[type=radio]:checked:after{content:\"\";position:absolute;top:4px;left:4px;width:8px;height:8px;background-color:var(--radio-inner-color, #fff)!important;border-radius:50%}app-scanner .mat-icon{color:var(--scanner-icon-color, #161616)}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  NdfScannerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfScannerComponent, selector: "ndf-scanner", inputs: { useStoredFile: "useStoredFile", hideUploadButton: "hideUploadButton", loading: "loading" }, outputs: { file: "file" }, host: { classAttribute: "ndf-scanner" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div id=\"DWTcontainer\" class=\"h-full\">\r\n\t<div id=\"DWTcontainerTop\">\r\n\t\t<div id=\"divEdit\">\r\n\t\t\t<ul class=\"operateGrp\">\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.showImageEditor' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnShowImageEditor_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Editor'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.rotateLeft' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRotateLeft_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Rotate-Left'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.rotateRight' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRotateRight_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Rotate-Right'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.rotate180' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRotate180_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Rotate-180'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.mirror' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnMirror_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:flip-horizontal'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.flip' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnFlip_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:flip-vertical'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.removeSelected' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRemoveCurrentImage_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:RemoveImages'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.removeAll' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRemoveAllImages_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:RemoveAllImages'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.resize' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnChangeImageSize_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:changeSize'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.crop' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnCrop_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:crop'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t\t<div id=\"ImgSizeEditor\" style=\"visibility: hidden\">\r\n\t\t\t\t<ul>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<label for=\"img_height\"\r\n\t\t\t\t\t\t\t>{{ 'scanner.newHeight' | translate }} :\r\n\t\t\t\t\t\t\t<input type=\"text\" id=\"img_height\" style=\"width: 50%\" size=\"10\" />\r\n\t\t\t\t\t\t\t{{ 'scanner.pixel' | translate }}</label\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<label for=\"img_width\"\r\n\t\t\t\t\t\t\t>{{ 'scanner.newWidth' | translate }} :&nbsp;\r\n\t\t\t\t\t\t\t<input type=\"text\" id=\"img_width\" style=\"width: 50%\" size=\"10\" />\r\n\t\t\t\t\t\t\t{{ 'scanner.pixel' | translate }}</label\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t{{ 'scanner.InterpolationMethod' | translate }}:\r\n\t\t\t\t\t\t<select size=\"1\" id=\"InterpolationMethod\">\r\n\t\t\t\t\t\t\t<option value=\"\"></option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li style=\"text-align: center\">\r\n\t\t\t\t\t\t<input type=\"button\" value=\"   OK   \" id=\"btnChangeImageSizeOK\" (click)=\"btnChangeImageSizeOK_onclick()\" />\r\n\t\t\t\t\t\t<input type=\"button\" value=\" Cancel \" id=\"btnCancelChange\" (click)=\"btnCancelChange_onclick()\" />\r\n\t\t\t\t\t</li>\r\n\t\t\t\t</ul>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div id=\"dwtcontrolContainer\"></div>\r\n\t\t<div class=\"w-full\" id=\"loader\">\r\n\t\t\t<div class=\"flex items-center justify-center h-full\">\r\n\t\t\t\t<mat-spinner></mat-spinner>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div id=\"btnGroupBtm\">\r\n\t\t\t<div class=\"ct-lt\">\r\n\t\t\t\t{{ 'scanner.page' | translate }}:\r\n\t\t\t\t<input id=\"DW_btnFirstImage\" (click)=\"btnFirstImage_onclick()\" type=\"button\" value=\" |< \" />&nbsp;\r\n\t\t\t\t<input id=\"DW_btnPreImage\" (click)=\"btnPreImage_onclick()\" type=\"button\" value=\" < \" />&nbsp;&nbsp;\r\n\t\t\t\t<input type=\"text\" size=\"2\" id=\"DW_CurrentImage\" readonly=\"readonly\" />\r\n\t\t\t\t/\r\n\t\t\t\t<input type=\"text\" size=\"2\" id=\"DW_TotalImage\" readonly=\"readonly\" />&nbsp;&nbsp;\r\n\t\t\t\t<input id=\"DW_btnNextImage\" (click)=\"btnNextImage_onclick()\" type=\"button\" value=\"> \" />&nbsp;\r\n\t\t\t\t<input id=\"DW_btnLastImage\" (click)=\"btnLastImage_onclick()\" type=\"button\" value=\">| \" />\r\n\t\t\t</div>\r\n\t\t\t<div class=\"ct-rt\">\r\n\t\t\t\t{{ 'scanner.preview' | translate }}:\r\n\t\t\t\t<select size=\"1\" id=\"DW_PreviewMode\" (change)=\"setlPreviewMode()\">\r\n\t\t\t\t\t<option value=\"0\">1X1</option>\r\n\t\t\t\t\t<option value=\"1\">2X2</option>\r\n\t\t\t\t\t<option value=\"2\">3X3</option>\r\n\t\t\t\t\t<option value=\"3\">4X4</option>\r\n\t\t\t\t\t<option value=\"4\">5X5</option></select\r\n\t\t\t\t><br />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<div id=\"ScanWrapper\">\r\n\t\t<div id=\"divScanner\" class=\"divinput\">\r\n\t\t\t<div id=\"div_ScanImage\" class=\"divTableStyle\">\r\n\t\t\t\t<ul id=\"ulScaneImageHIDE\">\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<label for=\"source\">\r\n\t\t\t\t\t\t\t<p>{{ 'scanner.source' | translate }}:</p>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<select size=\"1\" id=\"source\" style=\"position: relative\" (change)=\"source_onchange()\">\r\n\t\t\t\t\t\t\t<option value=\"\"></option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li style=\"display: none\" id=\"pNoScanner\">\r\n\t\t\t\t\t\t<a href=\"javascript: void(0)\" class=\"ShowtblLoadImage\" style=\"color: #fe8e14\" id=\"aNoScanner\"\r\n\t\t\t\t\t\t\t>(No TWAIN compatible drivers detected)</a\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li id=\"divProductDetail\">\r\n\t\t\t\t\t\t<ul id=\"divTwainType\">\r\n\t\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t\t<label id=\"lblShowUI\" for=\"ShowUI\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"checkbox\" id=\"ShowUI\" />{{ 'scanner.ShowUI' | translate }}&nbsp;</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<label for=\"ADF\"> <input type=\"checkbox\" id=\"ADF\" />{{ 'scanner.AutoFeeder' | translate }}&nbsp;</label>\r\n\t\t\t\t\t\t\t\t<label for=\"Duplex\"> <input type=\"checkbox\" id=\"Duplex\" />{{ 'scanner.Duplex' | translate }}</label>\r\n\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t\t{{ 'scanner.PixelType' | translate }}:\r\n\t\t\t\t\t\t\t\t<label for=\"BW\" style=\"margin-left: 5px\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"BW\" name=\"PixelType\" />{{ 'scanner.B&W' | translate }}</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<label for=\"Gray\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"Gray\" name=\"PixelType\" />{{ 'scanner.Gray' | translate }}</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<label for=\"RGB\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"RGB\" name=\"PixelType\" />{{ 'scanner.Color' | translate }}</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t\t<span>{{ 'scanner.Resolution' | translate }}:&nbsp;</span\r\n\t\t\t\t\t\t\t\t><select size=\"1\" id=\"Resolution\">\r\n\t\t\t\t\t\t\t\t\t<option value=\"100\">100</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"150\">150</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"200\">200</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"300\" selected>300</option>\r\n\t\t\t\t\t\t\t\t</select>\r\n\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t</ul>\r\n\t\t\t\t\t</li>\r\n\r\n\t\t\t\t\t<div class=\"flex justify-between items-center\">\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\tid=\"btnScan\"\r\n\t\t\t\t\t\t\tdisabled=\"disabled\"\r\n\t\t\t\t\t\t\t(click)=\"acquireImage()\"\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tclass=\"action-btn action-btn_2\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<i class=\"bi bi-upc-upload icon\"></i>\r\n\t\t\t\t\t\t\t<span> {{ 'scanner.scanFile' | translate }}</span>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t(click)=\"btnLoadImagesOrPDFs_onclick()\"\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tclass=\"action-btn action-btn_1 flex items-center justify-center gap-x-2\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<i class=\"bi bi-upload icon\"></i>\r\n\t\t\t\t\t\t\t<span> {{ 'scanner.loadFile' | translate }}</span>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ul>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"flex justify-end mx-3\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"btn save-button\"\r\n\t\t\t\t[ngClass]=\"{ 'hide-upload-button': hideUploadButton }\"\r\n\t\t\t\t#scannerUploadButton\r\n\t\t\t\tid=\"scannerUploadButton\"\r\n\t\t\t\t[disabled]=\"DWObject?.HowManyImagesInBuffer === 0\"\r\n\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t(click)=\"convertToBlob()\"\r\n\t\t\t>\r\n\t\t\t\t{{ 'scanner.saveFile' | translate }}\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".ndf-scanner img{vertical-align:middle;border:0}.ndf-scanner p{margin:0;padding:0}.ndf-scanner a:link,.ndf-scanner a:visited{color:#606060;text-decoration:none}.ndf-scanner a:hover{color:#fe8e14}.ndf-scanner input{font:normal 12px verdana;color:#444}.ndf-scanner input.invalid{background-color:#ff9;border:2px red inset}.ndf-scanner a img{border:none}.ndf-scanner a img:hover{border:none}.ndf-scanner ul{list-style:none;padding-left:0;margin:0}.ndf-scanner .container{width:980px;margin:0 auto}.ndf-scanner .container:after,.ndf-scanner .clearfix:after{content:\"\";display:table;clear:both}.ndf-scanner .tc{text-align:center}.ndf-scanner .btnOrg{padding:0 15px;height:30px;line-height:28px;font-size:14px;color:#fff;background:#50a8e1;border:none;outline:none;cursor:pointer;border-radius:5px;-webkit-border-radius:5px;-moz-border-right-colors:5px;transition:all .2s ease-in-out}.ndf-scanner .btnOrg:hover{background:#61c2ec}.ndf-scanner .d-btn{display:inline-block;padding:0 25px;height:36px;line-height:30px;color:#fe8e14;font-size:14px;text-align:center;cursor:pointer;border:solid 2px #fe8e14;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;transition:all .2s ease-in-out}.ndf-scanner .d-btn:link,.ndf-scanner .d-btn:visited{color:#fe8e14}.ndf-scanner .d-btn:hover{color:#ffae38;border:solid 2px #ffae38}.ndf-scanner .d-btn.lgBtn{height:46px;line-height:40px}.ndf-scanner .d-btn.mdBtn{height:42px;line-height:36px}.ndf-scanner .d-btn.smBtn{height:38px;line-height:32px}.ndf-scanner .d-btn.bgOrange{background:#fe8e14;color:#fff}.ndf-scanner .d-btn.bgOrange:hover{background:#ffae38}.ndf-scanner .d-btn.bgBlue{border-color:#50a8e1;background:#50a8e1;color:#fff}.ndf-scanner .d-btn.bgBlue:hover{border-color:#61c2ec;background:#61c2ec}.ndf-scanner #dwtScanDemo{width:980px;margin:0 auto}.ndf-scanner #dwtScanDemo .ct-top{padding:0 0 15px}.ndf-scanner #dwtScanDemo .ct-top .title{font-size:18px;line-height:27px;color:#444}.ndf-scanner #dwtScanDemo .ct-top .desc{margin:0 15px 0 30px;font-size:14px;line-height:24px;color:#aaa}.ndf-scanner #DWTcontainer{display:flex;justify-content:space-between;flex-direction:row}.ndf-scanner #DWTcontainerTop{position:relative;float:left;flex:1;margin:0 10px;height:auto;border-radius:4px;border:3px solid #ccc;display:flex;justify-content:space-between;flex-direction:row;overflow:hidden}.ndf-scanner .ds-dwt-container-box>div{border:none!important}.ndf-scanner #divEdit{float:left;margin:0;padding:0;width:60px;background:#fff;border-right:1px solid #ccc}.ndf-scanner #divEdit .operateGrp li{margin:0;width:60px;height:57px;line-height:52px;border-bottom:solid 1px #ccc;text-align:center}.ndf-scanner #divEdit .operateGrp li:nth-last-child(2){height:58px}.ndf-scanner #divEdit .operateGrp li:last-child{height:56px}.ndf-scanner #divEdit .operateGrp li>img{cursor:pointer}.ndf-scanner #Crop{padding:10px 5px 5px;text-align:center;border-collapse:collapse;border:3px solid #ce5e04;position:absolute;height:80px;z-index:1;background-color:#f0f0f0;width:250px}.ndf-scanner #ImgSizeEditor{padding:10px 15px;position:absolute;z-index:1;top:513px;left:-1px;height:auto;width:320px;font-size:14px;color:#606060;text-align:left;background-color:#f5f5f5;border-collapse:collapse;border:1px solid #ccc;box-shadow:4px 4px 18px #ccc;-webkit-box-shadow:4px 4px 18px #ccc;-moz-box-shadow:4px 4px 18px #ccc}.ndf-scanner #ImgSizeEditor li{margin-bottom:5px}.ndf-scanner #ImgSizeEditor input{background:#fff;border:solid 1px #ccc}.ndf-scanner #ImgSizeEditor input[type=text]{padding-left:3px}.ndf-scanner #ImgSizeEditor input[type=button]{padding:5px;margin:6px 5px 0}.ndf-scanner #dwtcontrolContainer{float:left;width:100%;height:calc(100% - 58px)}.ndf-scanner #dwtcontrolContainer .dynamsoft-dwt-container-box>div{border:none!important}.ndf-scanner #dwt-NonInstallContainerID{float:left;width:560px;height:590px}.ndf-scanner #DWTcontainerTop #btnGroupBtm{position:absolute;bottom:0;padding:15px;width:calc(100% - 60px);height:58px;background:#f5f5f5;border-top:1px solid #ccc;font-size:14px;color:#606060;vertical-align:bottom;display:flex;justify-content:space-between;flex-direction:row;align-items:center;box-sizing:border-box;left:60px}.ndf-scanner #btnGroupBtm .ct-lt{float:left}.ndf-scanner #btnGroupBtm .ct-lt input{padding:0;margin-right:6px;width:25px;height:20px;font-size:10px;background:var(--input-field-bg, #f5f5f5);border:solid 1px var(--border-color, #bbbcc0);color:var(--input-field-color, rgb(96, 96, 96));outline:none;cursor:pointer}.ndf-scanner #btnGroupBtm .ct-lt input[type=text]{height:20px;font-size:12px;border:none;cursor:default}.ndf-scanner #btnGroupBtm .ct-lt #DW_btnFirstImage{margin-left:5px}.ndf-scanner #btnGroupBtm .ct-lt #DW_CurrentImage{margin:0 0 0 -13px;text-align:right}.ndf-scanner #btnGroupBtm .ct-lt #DW_TotalImage{margin:0 -7px 0 0;text-align:left}.ndf-scanner #btnGroupBtm .ct-rt{float:right}.ndf-scanner #DW_PreviewMode{padding:0 5px;margin-left:5px;height:26px;border:solid 1px #d8d8d8;color:#444;outline:none;border-radius:5px;cursor:pointer}.ndf-scanner #ScanWrapper{border-radius:4px;width:315px;height:570px;box-sizing:border-box}.ndf-scanner div.divinput{font-size:14px;color:#606060;line-height:24px;margin-bottom:20px}.ndf-scanner .divType,.ndf-scanner #ScanWrapper .toggle{padding-left:20px;height:38px;line-height:36px;font-size:14px;color:#444;background:#eee;border-bottom:1px solid #ccc;cursor:pointer}.ndf-scanner #ScanWrapper .toggle{cursor:default}.ndf-scanner .mark_arrow{display:block;float:right;margin:15px 20px 0 0;width:12px;height:8px}.ndf-scanner .divTableStyle{border:3px solid #ccc;border-radius:5px;padding:10px}.ndf-scanner .divTableStyle input[type=radio],.ndf-scanner .divTableStyle input[type=checkbox]{margin:0 5px!important;height:13px;display:inline-block}.ndf-scanner #ScanWrapper select,.ndf-scanner #divUpload input[type=text]{margin-top:3px;margin-bottom:6px;height:26px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.ndf-scanner #ScanWrapper input[type=checkbox],.ndf-scanner #ScanWrapper input[type=radio]{margin:0 3px 0 0}.ndf-scanner #divScanner{border-bottom:none}.ndf-scanner #PCollapse{list-style:none inside none;margin-left:0;padding-left:0}.ndf-scanner select#source{margin-top:3px;padding-left:3px;width:100%;font-size:12px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.ndf-scanner select#Resolution{margin-left:3px;width:192px;height:26px}.ndf-scanner #divProductDetail li{margin-top:8px}.ndf-scanner #divProductDetail li:first-child{margin-top:3px}.ndf-scanner #divProductDetail li label{display:inline-block;margin:0 4px;font-size:12px}.ndf-scanner #divProductDetail li label:last-child{margin:0}.ndf-scanner #divProductDetail li label input{width:15px;height:15px;vertical-align:middle}.ndf-scanner #div_LoadLocalImage input[type=button]{margin:15px 0;width:90px;height:30px}.ndf-scanner #div_ScanImage{position:relative}.ndf-scanner #tblLoadImage{position:absolute;top:102px;z-index:1;padding:30px 22px;width:275px;height:128px;font-size:14px;line-height:30px;text-align:left;border:1px solid #fe8e14;background-color:#f5f5f5}.ndf-scanner #tblLoadImage>a{position:absolute;top:15px;right:15px;line-height:normal;text-decoration:none}.ndf-scanner #tblLoadImage a{color:#50a8e1}.ndf-scanner #tblLoadImage a:hover{color:#61c2ec}.ndf-scanner #divUpload input[type=text]{width:100%;padding-left:5px}.ndf-scanner #divUpload li label{display:inline-block;margin:0 8px 0 0;font-size:12px}.ndf-scanner #divUpload li img{margin-right:2px}.ndf-scanner #divUpload li label:last-child{margin-right:0}.ndf-scanner #divUpload li input{width:15px;height:15px;vertical-align:middle}.ndf-scanner #divUpload li:nth-child(3){margin:5px 0 8px}.ndf-scanner #divUpload li{padding:0 20px}.ndf-scanner #divUpload li:nth-child(2){padding-top:12px}.ndf-scanner #divUpload input[type=button]{margin:14px 0 20px}.ndf-scanner #divUpload #btnSave,.ndf-scanner #divUpload #btnUpload{padding:0;width:115px;height:30px;margin-right:15px;cursor:pointer}.ndf-scanner #divUpload #btnUpload{width:138px;margin-right:0}.ndf-scanner #DWTcontainerBtm{position:relative;float:left;width:980px}.ndf-scanner #DWTemessageContainer{float:left}.ndf-scanner #DWTemessageContainer input[type=text]{border:solid 1px #ccc;padding-left:3px}.ndf-scanner #DWTemessageContainer input[type=button]{cursor:pointer;margin:0 3px;outline:none}.ndf-scanner #DWTdivMsg{padding:5px 0 0;font-size:14px;color:#444}.ndf-scanner #DWTemessage{padding:6px 0 0 8px;margin-top:3px;width:632px;height:160px;border:solid 1px #ccc;overflow-y:scroll;background:#fff}.ndf-scanner #divNoteMessage{float:right;padding:10px 15px;margin-top:34px;width:315px;height:160px;font-size:12px;line-height:20px;border:1px solid #ccc;background:#e7f2fd;color:#606060}.ndf-scanner #divNoteMessage p{margin:0;color:#444}.ndf-scanner .ds-dialog-wrap,.ndf-scanner .ds-dialog-wrap div{box-sizing:content-box!important}.ndf-scanner .ds-dialog-wrap:before,.ndf-scanner .ds-dialog-wrap div:before,.ndf-scanner .ds-dialog-wrap:after,.ndf-scanner .ds-dialog-wrap div:after{box-sizing:content-box!important}.ndf-scanner .ks-overlay{position:absolute;left:-9999px;top:-9999px}.ndf-scanner .ks-ext-close{padding:0 20px;position:absolute;right:-5px;top:5px}.ndf-scanner .ks-ext-close,.ndf-scanner .ks-ext-close:link{color:#22a;text-decoration:none;cursor:pointer}.ndf-scanner .ks-ext-mask{background:#999;filter:alpha(opacity=70);-moz-opacity:.7;opacity:.7}.ndf-scanner .D-dailog .ks-ext-close .ks-ext-close-x{height:8px}.ndf-scanner .D-dailog .ks-ext-close,.ndf-scanner .D-dailog .ks-ext-close:hover{background:none;border:none}.ndf-scanner .D-dailog{position:absolute;left:-9999px;top:-99999px;margin:100px auto;padding:0;width:392px;height:262px;background-color:#f1f2f2}.ndf-scanner .D-dailog .D-dailog-body{width:350px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Mac{width:350px;height:235px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-NotAllowed{color:#444;line-height:1.8;width:350px;height:185px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Scan{width:380px;height:240px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Scan-sample{width:380px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog a{text-decoration:none}.ndf-scanner .link{text-decoration:underline}.ndf-scanner .D-dailog ul{margin:10px 0 10px 20px;list-style-type:disc}.ndf-scanner .red{color:red;margin-left:5px}.ndf-scanner #message{position:fixed;top:0px;left:0px;width:100%;z-index:105;text-align:center;font-weight:bold;font-size:100%;padding:10px 0;color:#239210;background-color:#e0f0d6;border:1px solid #54d33f;box-shadow:0 0 10px #3a3a3a}.ndf-scanner #MessageBody a{color:#6a9962;font-size:14px}.ndf-scanner #message span{text-align:center;width:95%;float:left}.ndf-scanner #MessageBoy a:hover{text-decoration:underline}.ndf-scanner .close-notify{white-space:nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}.ndf-scanner .close-notify a{color:#fff}.ndf-scanner .DWTPage{margin:0 auto}.hide-upload-button{opacity:0!important}app-scanner input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px!important;height:20px!important;border:2px solid var(--main-color)!important;background-color:var(--wrapper-bg)!important;cursor:pointer;border-radius:4px;position:relative;transition:background-color .3s}app-scanner input[type=checkbox]:checked{background-color:var(--main-color)!important;border-color:var(--main-color)!important}app-scanner input[type=checkbox]:checked:after{content:\"\";position:absolute;top:2px;left:6px;width:5px;border:solid var(--checkbox-inner-color, #fff);height:10px;border-width:0 2px 2px 0;transform:rotate(45deg)}app-scanner input[type=radio]{appearance:none;-webkit-appearance:none;width:20px!important;height:20px!important;border:2px solid var(--radio-border, var(--main-color))!important;background-color:var(--radio-bg, var(--wrapper-bg))!important;border-radius:50%;cursor:pointer;position:relative;transition:background-color .3s ease}app-scanner input[type=radio]:checked{background-color:var(--main-color)!important;border-color:var(--main-color)!important}app-scanner input[type=radio]:checked:after{content:\"\";position:absolute;top:4px;left:4px;width:8px;height:8px;background-color:var(--radio-inner-color, #fff)!important;border-radius:50%}app-scanner .mat-icon{color:var(--scanner-icon-color, #161616)}\n"], components: [{ type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i7__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], 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: NdfScannerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -52098,6 +51973,128 @@
                   }]
           }] });
 
+  var NdfError404Component = /** @class */ (function (_super) {
+      __extends(NdfError404Component, _super);
+      function NdfError404Component(injector) {
+          var _this = _super.call(this, injector) || this;
+          _this.color = 'var(--primary)';
+          _this.errorCode = '404';
+          _this.translationDictionary = {
+              en: {
+                  title: 'ERROR',
+                  content: 'Make sure the url is correct. Otherwise, this page may have been removed,renamed, or temporarily unavaliable',
+                  description: 'This Page Does Not Exist!'
+              },
+              ar: {
+                  title: 'حدث خطأ ما',
+                  content: 'الرجاء التأكد أن عنوان الصفحة صحيح. في حالة كان العنوان صحيح من المحتمل أن تكون الصفحة حذفت أو أعيد تسميتها أو غير متاحه مؤقتا.',
+                  description: 'لا يمكن إيجاد الصفحة'
+              }
+          };
+          return _this;
+      }
+      NdfError404Component.prototype.ngOnInit = function () {
+          var _this = this;
+          this.translateService.onLangChange.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+              _this.cdr.markForCheck();
+          });
+          this.translateService.onTranslationChange.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+              _this.cdr.markForCheck();
+          });
+      };
+      Object.defineProperty(NdfError404Component.prototype, "isTranslationLoaded", {
+          get: function () {
+              var lang = this.currentLang;
+              var translations = this.translateService.translations;
+              return !!lang && !!translations && Object.keys(translations[lang] || {}).length > 0;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(NdfError404Component.prototype, "translationLanguage", {
+          get: function () {
+              return this.translationDictionary[this.currentLang]
+                  ? this.currentLang
+                  : 'ar';
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(NdfError404Component.prototype, "fallbackTitle", {
+          get: function () {
+              return this.title || this.translationDictionary[this.translationLanguage].title;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(NdfError404Component.prototype, "fallbackDescription", {
+          get: function () {
+              return this.description || this.translationDictionary[this.translationLanguage].description;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(NdfError404Component.prototype, "fallbackContent", {
+          get: function () {
+              return this.content || this.translationDictionary[this.translationLanguage].content;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      return NdfError404Component;
+  }(BaseComponent));
+  NdfError404Component.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfError404Component, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NdfError404Component.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfError404Component, selector: "ndf-error-404", inputs: { title: "title", description: "description", content: "content", color: "color", errorCode: "errorCode" }, usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"w-full flex flex-col justify-center items-center gap-y-4 text-center\">\r\n  <div *ngIf=\"isTranslationLoaded\">\r\n    <div class=\"text-gray-500 text-4xl\">\r\n      {{ title || \"errorPage.404.title\" | translate }}\r\n    </div>\r\n    <svg\r\n      class=\"inline-block\"\r\n      width=\"220\"\r\n      height=\"220\"\r\n      viewBox=\"0 0 220 220\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      style.color=\"{{ color }}\"\r\n    >\r\n      <rect\r\n        x=\"10\"\r\n        y=\"10\"\r\n        width=\"200\"\r\n        height=\"200\"\r\n        rx=\"20\"\r\n        fill=\"currentColor\"\r\n      />\r\n\r\n      <rect x=\"10\" y=\"10\" width=\"200\" height=\"45\" rx=\"20\" fill=\"currentColor\" />\r\n\r\n      <circle cx=\"35\" cy=\"32\" r=\"6\" fill=\"white\" />\r\n      <circle cx=\"60\" cy=\"32\" r=\"6\" fill=\"white\" />\r\n      <circle cx=\"85\" cy=\"32\" r=\"6\" fill=\"white\" />\r\n\r\n      <line x1=\"10\" y1=\"55\" x2=\"210\" y2=\"55\" stroke=\"white\" stroke-width=\"2\" />\r\n\r\n      <text\r\n        x=\"110\"\r\n        y=\"120\"\r\n        text-anchor=\"middle\"\r\n        fill=\"white\"\r\n        font-size=\"64\"\r\n        font-family=\"Arial, Helvetica, sans-serif\"\r\n        font-weight=\"500\"\r\n      >\r\n        {{ errorCode }}\r\n      </text>\r\n      <line\r\n        x1=\"45\"\r\n        y1=\"140\"\r\n        x2=\"175\"\r\n        y2=\"140\"\r\n        stroke=\"white\"\r\n        stroke-width=\"5\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n      <line\r\n        x1=\"45\"\r\n        y1=\"160\"\r\n        x2=\"175\"\r\n        y2=\"160\"\r\n        stroke=\"white\"\r\n        stroke-width=\"5\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n      <line\r\n        x1=\"45\"\r\n        y1=\"180\"\r\n        x2=\"150\"\r\n        y2=\"180\"\r\n        stroke=\"white\"\r\n        stroke-width=\"5\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n    </svg>\r\n    <div class=\"text-gray-500 text-3xl\">\r\n      {{ description || \"errorPage.404.notExist\" | translate }}\r\n    </div>\r\n\r\n    <div class=\"w-96 text-center text-gray-500\">\r\n      {{ content || \"errorPage.404.content\" | translate }}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"!isTranslationLoaded\">\r\n    <div class=\"text-gray-500 text-4xl\">\r\n      {{ fallbackTitle }}\r\n    </div>\r\n    <svg\r\n      class=\"inline-block\"\r\n      width=\"220\"\r\n      height=\"220\"\r\n      viewBox=\"0 0 220 220\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      style.color=\"{{ color }}\"\r\n    >\r\n      <rect\r\n        x=\"10\"\r\n        y=\"10\"\r\n        width=\"200\"\r\n        height=\"200\"\r\n        rx=\"20\"\r\n        fill=\"currentColor\"\r\n      />\r\n\r\n      <rect x=\"10\" y=\"10\" width=\"200\" height=\"45\" rx=\"20\" fill=\"currentColor\" />\r\n\r\n      <circle cx=\"35\" cy=\"32\" r=\"6\" fill=\"white\" />\r\n      <circle cx=\"60\" cy=\"32\" r=\"6\" fill=\"white\" />\r\n      <circle cx=\"85\" cy=\"32\" r=\"6\" fill=\"white\" />\r\n\r\n      <line x1=\"10\" y1=\"55\" x2=\"210\" y2=\"55\" stroke=\"white\" stroke-width=\"2\" />\r\n\r\n      <text\r\n        x=\"110\"\r\n        y=\"120\"\r\n        text-anchor=\"middle\"\r\n        fill=\"white\"\r\n        font-size=\"64\"\r\n        font-family=\"Arial, Helvetica, sans-serif\"\r\n        font-weight=\"500\"\r\n      >\r\n        404\r\n      </text>\r\n      <line\r\n        x1=\"45\"\r\n        y1=\"140\"\r\n        x2=\"175\"\r\n        y2=\"140\"\r\n        stroke=\"white\"\r\n        stroke-width=\"5\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n      <line\r\n        x1=\"45\"\r\n        y1=\"160\"\r\n        x2=\"175\"\r\n        y2=\"160\"\r\n        stroke=\"white\"\r\n        stroke-width=\"5\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n      <line\r\n        x1=\"45\"\r\n        y1=\"180\"\r\n        x2=\"150\"\r\n        y2=\"180\"\r\n        stroke=\"white\"\r\n        stroke-width=\"5\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n    </svg>\r\n    <div class=\"text-gray-500 text-3xl\">\r\n      {{ fallbackDescription }}\r\n    </div>\r\n\r\n    <div class=\"w-96 text-center text-gray-500\">\r\n      {{ fallbackContent }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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: NdfError404Component, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'ndf-error-404',
+                      templateUrl: './404.component.html',
+                      styleUrls: ['./404.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                      host: {}
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; }, propDecorators: { title: [{
+                  type: i0.Input
+              }], description: [{
+                  type: i0.Input
+              }], content: [{
+                  type: i0.Input
+              }], color: [{
+                  type: i0.Input
+              }], errorCode: [{
+                  type: i0.Input
+              }] } });
+
+  var NdfErrorsModule = /** @class */ (function () {
+      function NdfErrorsModule() {
+      }
+      return NdfErrorsModule;
+  }());
+  NdfErrorsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfErrorsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  NdfErrorsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfErrorsModule, declarations: [NdfError404Component], imports: [i4.CommonModule,
+          i1.TranslateModule], exports: [NdfError404Component] });
+  NdfErrorsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfErrorsModule, providers: [], imports: [[
+              i4.CommonModule,
+              i1.TranslateModule,
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfErrorsModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [
+                          NdfError404Component
+                      ],
+                      exports: [
+                          NdfError404Component
+                      ],
+                      imports: [
+                          i4.CommonModule,
+                          i1.TranslateModule,
+                      ],
+                      providers: [],
+                  }]
+          }] });
+
   /*
    * Public API Surface of nuxeo-development-framework
    */
@@ -52438,6 +52435,8 @@
   exports.NdfConfirmationDialogComponent = NdfConfirmationDialogComponent;
   exports.NdfDatepickerComponent = NdfDatepickerComponent;
   exports.NdfDatepickerModule = NdfDatepickerModule;
+  exports.NdfError404Component = NdfError404Component;
+  exports.NdfErrorsModule = NdfErrorsModule;
   exports.NdfFiltersPanelModule = NdfFiltersPanelModule;
   exports.NdfGregorianDatepickerComponent = NdfGregorianDatepickerComponent;
   exports.NdfHijriDatepickerComponent = NdfHijriDatepickerComponent;