nuxeo-development-framework 6.0.4 → 6.0.6

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

@@ -148,7 +148,7 @@
                   }]
           }], ctorParameters: function () { return []; } });
 
-  /******************************************************************************
+  /*! *****************************************************************************
   Copyright (c) Microsoft Corporation.
 
   Permission to use, copy, modify, and/or distribute this software for any
@@ -162,7 +162,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; }) ||
@@ -215,64 +215,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);
@@ -298,13 +240,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;
@@ -368,11 +310,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;
@@ -454,13 +392,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));
       }
@@ -476,7 +410,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)
@@ -530,108 +464,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;
@@ -2503,7 +2336,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: [{
@@ -3783,6 +3616,9 @@
                   }
               });
           }
+          if (this.bearerToken) {
+              headers['Authorization'] = this.bearerToken;
+          }
           return this.http
               .request(query.method, "" + this.environment.nuxeo + query.url, {
               body: _payload,
@@ -5009,7 +4845,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: [{
@@ -5302,7 +5138,7 @@
       return GeneralNotificationPopupComponent;
   }());
   GeneralNotificationPopupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GeneralNotificationPopupComponent, deps: [{ token: i1__namespace$3.MatDialogRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  GeneralNotificationPopupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GeneralNotificationPopupComponent, selector: "lib-general-notification-popup", ngImport: i0__namespace, template: "<div class=\"general-notification-popup-continaer\" SetRtl>\n    <div class=\"popup-title\">\n        {{'viewer.no_permission' | translate}}\n    </div>\n    <div class=\"updated-popup-body\">\n            <div class=\"repated-data\">{{'viewer.NO_PERMISSION_READ' | translate}} \n            </div>\n    </div>\n    <div class=\"button-group\">\n        <cts-button size=\"'regular'\" [theme]=\"''\" class=\"new-primary-button-wrapper\" (onClick)=\"close()\"\n            >\n            {{ \"BUTTONS.CLOSE\" | translate }}\n        </cts-button>\n    </div>\n</div>", styles: [""], components: [{ type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  GeneralNotificationPopupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GeneralNotificationPopupComponent, selector: "lib-general-notification-popup", ngImport: i0__namespace, template: "<div class=\"general-notification-popup-continaer\" SetRtl>\r\n    <div class=\"popup-title\">\r\n        {{'viewer.no_permission' | translate}}\r\n    </div>\r\n    <div class=\"updated-popup-body\">\r\n            <div class=\"repated-data\">{{'viewer.NO_PERMISSION_READ' | translate}} \r\n            </div>\r\n    </div>\r\n    <div class=\"button-group\">\r\n        <cts-button size=\"'regular'\" [theme]=\"''\" class=\"new-primary-button-wrapper\" (onClick)=\"close()\"\r\n            >\r\n            {{ \"BUTTONS.CLOSE\" | translate }}\r\n        </cts-button>\r\n    </div>\r\n</div>", styles: [""], components: [{ type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GeneralNotificationPopupComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5619,7 +5455,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$3.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: [{
@@ -7166,7 +7002,8 @@
                           filecontent: item.properties ? item.properties['file:content'] : item['file:content'],
                           direction: item.properties ? item.properties['corr:direction'] : item['corr:direction'],
                           iconName: 'arrow_upward',
-                          moreclasses: "relation-file-icons"
+                          moreclasses: "relation-file-icons",
+                          referenceNumber: item.referenceNumber ? item.referenceNumber : '-'
                       });
                   });
               }
@@ -7184,7 +7021,8 @@
                           filecontent: item.properties ? item.properties['file:content'] : item['file:content'],
                           direction: item.properties ? item.properties['corr:direction'] : item['corr:direction'],
                           iconName: 'arrow_downward',
-                          moreclasses: "relation-file-icons"
+                          moreclasses: "relation-file-icons",
+                          referenceNumber: item.referenceNumber ? item.referenceNumber : '-'
                       });
                   });
               }
@@ -7193,7 +7031,7 @@
       return CorrespondenceRelationReplyComponent;
   }());
   CorrespondenceRelationReplyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CorrespondenceRelationReplyComponent, deps: [{ token: CorrespondenceRelationService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CorrespondenceRelationReplyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationReplyComponent, selector: "cts-correspondence-relation-reply", inputs: { correspondence_id: "correspondence_id" }, outputs: { actionclicked: "actionclicked" }, ngImport: i0__namespace, template: "<div class=\"relations-list\" *ngIf=\"replyrelation.length > 0\">\r\n  <ng-container>\r\n    <mat-list>\r\n      <div class=\"mat-list-items\" *ngFor=\"let item of replyrelation\">\r\n        <cts-item-list\r\n          [item]=\"item\"\r\n          [title]=\"item.title\"\r\n          [actions]=\"menu_actions\"\r\n          [iconname]=\"item.iconName\"\r\n          [moreclasses]=\"item.moreclasses\"\r\n          (actionclicked)=\"fireAction(item, 'view')\"\r\n          (itemClicked)=\"fireAction(item)\"\r\n        ></cts-item-list>\r\n      </div>\r\n    </mat-list>\r\n  </ng-container>\r\n</div>\r\n<div class=\"nocontent\" *ngIf=\"replyrelation.length === 0\">\r\n  <p>{{ \"correspondence-relation.nocontentreply\" | 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: 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"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  CorrespondenceRelationReplyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationReplyComponent, selector: "cts-correspondence-relation-reply", inputs: { correspondence_id: "correspondence_id" }, outputs: { actionclicked: "actionclicked" }, ngImport: i0__namespace, template: "<div class=\"relations-list\" *ngIf=\"replyrelation.length > 0\">\r\n  <ng-container>\r\n    <mat-list>\r\n      <div class=\"mat-list-items\" *ngFor=\"let item of replyrelation\">\r\n        <cts-item-list\r\n          [item]=\"item\"\r\n          [title]=\"item.referenceNumber ? (item.referenceNumber + ' - ' + item.title) : (item.title)\"\r\n          [actions]=\"menu_actions\"\r\n          [iconname]=\"item.iconName\"\r\n          [moreclasses]=\"item.moreclasses\"\r\n          (actionclicked)=\"fireAction(item, 'view')\"\r\n          (itemClicked)=\"fireAction(item)\"\r\n        ></cts-item-list>\r\n      </div>\r\n    </mat-list>\r\n  </ng-container>\r\n</div>\r\n<div class=\"nocontent\" *ngIf=\"replyrelation.length === 0\">\r\n  <p>{{ \"correspondence-relation.nocontentreply\" | 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: 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"] }], 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: CorrespondenceRelationReplyComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -7327,7 +7165,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$3.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" }, 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>\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" }, 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>\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: [{
@@ -7443,9 +7281,14 @@
       };
       CorrespondenceRelationComponent.prototype.showCorrespondenceInViewer = function (corres_id) {
           var _this = this;
-          this.documentsApi.getDocument(corres_id).subscribe(function (file) {
-              _this.viewerFilesService.updateViewer.next(file);
-          });
+          if (corres_id) {
+              this.documentsApi.getDocument(corres_id).subscribe(function (file) {
+                  _this.viewerFilesService.updateViewer.next(file);
+              });
+          }
+          else {
+              this.openGeneralNotificationPopup();
+          }
       };
       CorrespondenceRelationComponent.prototype.openConfirmDialog = function (functionToPerform, title, msg) {
           return this.dialog
@@ -10574,7 +10417,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: [{
@@ -11103,7 +10946,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 #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]", 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: [{
@@ -12688,8 +12531,6 @@
           });
           return filterData;
       };
-      DynamicFormSelectUsersComponent.prototype.getUsersUnderCertainGroup = function () {
-      };
       DynamicFormSelectUsersComponent.prototype.reset = function () {
           this.ngSelectComponent.handleClearClick();
       };
@@ -14190,7 +14031,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: [{
@@ -14310,7 +14151,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: [{
@@ -14358,7 +14199,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: [{
@@ -14392,7 +14233,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: [{
@@ -14459,7 +14300,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: [{
@@ -14507,7 +14348,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: [{
@@ -15701,7 +15542,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.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-feature-settings:normal;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]", 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: [{
@@ -15887,7 +15728,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: [{
@@ -16005,7 +15846,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: [{
@@ -16051,7 +15892,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: [{
@@ -16390,7 +16231,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 class=\"fot__label\" [matTooltip]=\"option?.tooltip | optionTooltip: language\">\r\n\t{{ option | localizedLabel: language }}\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, "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 class=\"fot__label\" [matTooltip]=\"option?.tooltip | optionTooltip: language\">\r\n\t{{ option | localizedLabel: language }}\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, "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: [{
@@ -18003,7 +17844,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: [{
@@ -18345,7 +18186,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: [{
@@ -19977,7 +19818,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: [{
@@ -20127,7 +19968,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: [{
@@ -21264,7 +21105,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: [{
@@ -22774,7 +22615,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: [{
@@ -24319,7 +24160,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' })),
@@ -29030,7 +28871,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$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 } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddToCollectionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -29151,7 +28992,7 @@
       return DisplaySuitableIconComponent;
   }());
   DisplaySuitableIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DisplaySuitableIconComponent, deps: [{ token: IconService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DisplaySuitableIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: { data: "data", size: "size", dataType: "dataType", archive: "archive" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!-- <div *ngIf=\" data.type == 'Folder';else notFolder\">\r\n  <div [style.width]=\"size\">\r\n    <img class=\"w-full\" [src]=\"'assets/drive-icons/folder.png'\" />\r\n  </div>\r\n</div>\r\n<ng-template #notFolder>\r\n  <div *ngIf=\"!data.properties.file; else file\">\r\n    <img class=\"w-full\" [src]=\"'assets/drive-icons/generic.png'\" />\r\n  </div>\r\n  <ng-template #file>\r\n    <div *ngIf=\"data.properties.file['mime-type'].includes('image');else noImage\" [style.width]=\"size\">\r\n      <img class=\"w-full\" [src]=\"data.contextParameters.thumbnail.url | secure | async\" />\r\n      <ng-template #noImage>\r\n        <mat-icon svgIcon=\"iconsmind:photo\" class=\"icon-size-6\"></mat-icon>\r\n      </ng-template>    \r\n    </div>\r\n    <div *ngIf=\" data.properties.file['mime-type'].includes('video');else noVideo\" [style.width]=\"size\">\r\n      <figure class=\"hover-video w-full\">\r\n        <img class=\"w-full\" [src]=\"data.contextParameters.thumbnail.url | secure | async\" />\r\n        <figcaption>\r\n          <mat-icon svgIcon=\"iconsmind:play_music\" class=\"icon-size-4\"></mat-icon>\r\n        </figcaption>\r\n      </figure>\r\n      <ng-template #noVideo>\r\n        <mat-icon svgIcon=\"iconsmind:video_2\" class=\"icon-size-6\"></mat-icon>\r\n      </ng-template>   \r\n    </div>\r\n    <div *ngIf=\" data.properties.file['mime-type'].includes('application')\">\r\n      <mat-icon svgIcon=\"iconsmind:file\" class=\"icon-size-6\"></mat-icon>\r\n    </div>\r\n  </ng-template>\r\n</ng-template> -->\r\n\r\n\r\n<div [style.width]=\"size\">\r\n  <img class=\"w-full\" [src]=\"image\" />\r\n</div>", styles: [".hover-video{display:inline-block;margin:8px;max-width:100%;min-width:100%;overflow:hidden;position:relative;text-align:center}.hover-video *{box-sizing:border-box;transition:all .45s ease}.hover-video:before,.hover-video:after{position:absolute;top:0;bottom:0;left:0;right:0;content:\"\";transition:all .3s ease;z-index:1;opacity:0;transform:scaleY(2)}.hover-video video{vertical-align:top;max-width:100%;backface-visibility:hidden}.hover-video figcaption{position:absolute;top:0;bottom:0;left:0;right:0;align-items:center;z-index:1;display:flex;flex-direction:column;justify-content:center;line-height:1.1em;opacity:0;z-index:2;transition-delay:.1s;font-size:24px;font-family:sans-serif;font-weight:400;letter-spacing:1px;text-transform:uppercase}.hover-video{transform:scale(1);opacity:1}.hover-video>video{opacity:.7}.hover-video figcaption{opacity:1}.hover-video:hover figcaption:hover{opacity:.5;background-color:#eaecee}\n"] });
+  DisplaySuitableIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: { data: "data", size: "size", dataType: "dataType", archive: "archive" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!-- <div *ngIf=\" data.type == 'Folder';else notFolder\">\r\n  <div [style.width]=\"size\">\r\n    <img class=\"w-full\" [src]=\"'assets/drive-icons/folder.png'\" />\r\n  </div>\r\n</div>\r\n<ng-template #notFolder>\r\n  <div *ngIf=\"!data.properties.file; else file\">\r\n    <img class=\"w-full\" [src]=\"'assets/drive-icons/generic.png'\" />\r\n  </div>\r\n  <ng-template #file>\r\n    <div *ngIf=\"data.properties.file['mime-type'].includes('image');else noImage\" [style.width]=\"size\">\r\n      <img class=\"w-full\" [src]=\"data.contextParameters.thumbnail.url | secure | async\" />\r\n      <ng-template #noImage>\r\n        <mat-icon svgIcon=\"iconsmind:photo\" class=\"icon-size-6\"></mat-icon>\r\n      </ng-template>    \r\n    </div>\r\n    <div *ngIf=\" data.properties.file['mime-type'].includes('video');else noVideo\" [style.width]=\"size\">\r\n      <figure class=\"hover-video w-full\">\r\n        <img class=\"w-full\" [src]=\"data.contextParameters.thumbnail.url | secure | async\" />\r\n        <figcaption>\r\n          <mat-icon svgIcon=\"iconsmind:play_music\" class=\"icon-size-4\"></mat-icon>\r\n        </figcaption>\r\n      </figure>\r\n      <ng-template #noVideo>\r\n        <mat-icon svgIcon=\"iconsmind:video_2\" class=\"icon-size-6\"></mat-icon>\r\n      </ng-template>   \r\n    </div>\r\n    <div *ngIf=\" data.properties.file['mime-type'].includes('application')\">\r\n      <mat-icon svgIcon=\"iconsmind:file\" class=\"icon-size-6\"></mat-icon>\r\n    </div>\r\n  </ng-template>\r\n</ng-template> -->\r\n\r\n\r\n<div [style.width]=\"size\">\r\n  <img class=\"w-full\" [src]=\"image\" />\r\n</div>", styles: [".hover-video{display:inline-block;margin:8px;max-width:100%;min-width:100%;overflow:hidden;position:relative;text-align:center}.hover-video *{box-sizing:border-box;transition:all .45s ease}.hover-video:before,.hover-video:after{position:absolute;top:0;bottom:0;left:0;right:0;content:\"\";transition:all .3s ease;z-index:1;opacity:0;transform:scaleY(2)}.hover-video video{vertical-align:top;max-width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.hover-video figcaption{position:absolute;top:0;bottom:0;left:0;right:0;align-items:center;z-index:1;display:flex;flex-direction:column;justify-content:center;line-height:1.1em;opacity:0;z-index:2;transition-delay:.1s;font-size:24px;font-family:sans-serif;font-weight:400;letter-spacing:1px;text-transform:uppercase}.hover-video{transform:scale(1);opacity:1}.hover-video>video{opacity:.7}.hover-video figcaption{opacity:1}.hover-video:hover figcaption:hover{opacity:.5;background-color:#eaecee}\n"] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DisplaySuitableIconComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -29404,7 +29245,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: [{
@@ -29660,7 +29501,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$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 } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CreateDirectoryComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -30824,7 +30665,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: [{
@@ -31825,7 +31666,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$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 } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LoanRequestComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -32408,7 +32249,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$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 } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RenameComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -33315,7 +33156,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$3.MatDialogRef }, { token: i1__namespace$3.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: [{
@@ -34322,7 +34163,7 @@
       return AddPermissionsDialogComponent;
   }(BaseDialogComponent));
   AddPermissionsDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AddPermissionsDialogComponent, deps: [{ token: i1__namespace$3.MatDialogRef }, { token: PermissionService }, { token: CustomToastrService }, { token: i2__namespace$4.FormBuilder }, { token: TranslationService }, { token: i1$4.MAT_DIALOG_DATA }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  AddPermissionsDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddPermissionsDialogComponent, selector: "app-add-permissions-dialog", usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.createFile' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<form [formGroup]=\"permissionForm\" class=\"h-full\" SetRtl>\r\n\t\t\t<div class=\"flex flex-col h-full\">\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\" *ngIf=\"state == 'update'\">\r\n\t\t\t\t\t\t{{ 'permission.edit_permission' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span class=\"text-gray-900 text-lg\" *ngIf=\"state !== 'update'\">\r\n\t\t\t\t\t\t{{ 'permission.add_new_permission' | translate }}\r\n\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t<div class=\"user-select mt-5\" *ngIf=\"state != 'update'\">\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{{ 'permission.username' | 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]=\"permissionService.departmentUsers\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'permission.placeholder' | translate\"\r\n\t\t\t\t\t\t\t[multiple]=\"true\"\r\n\t\t\t\t\t\t\t[loading]=\"refreshUsers\"\r\n\t\t\t\t\t\t\tbindLabel=\"displayLabel\"\r\n\t\t\t\t\t\t\tbindValue=\"properties.username\"\r\n\t\t\t\t\t\t\tformControlName=\"users\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\r\n\t\t\t\t\t\t\t\t<div class=\"ng-option disabled\">\r\n\t\t\t\t\t\t\t\t\t{{ 'permission.ngSelect_resultNotFound' | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n\t\t\t\t\t\t\t\t<div class=\"flex flex-col h-full\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex flex-row\">\r\n\t\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\t<cts-avatar\r\n\t\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\t\tproperties: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfirstName: item.properties.firstName,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlastName: item.properties.lastName\r\n\t\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\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</cts-avatar>\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<div class=\"flex flex-col pt-0 px-2\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.displayLabel }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\t\t\t\t>{{ item.properties.email }}-{{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.properties.username\r\n\t\t\t\t\t\t\t\t\t\t\t\t}}</span\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</div>\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</ng-template>\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 class=\"mt-3 rights-select\">\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{{ 'permission.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\t[placeholder]=\"'permission.rightsPlaceholder' | translate\"\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\tformControlName=\"permission\"\r\n\t\t\t\t\t\t\t[(ngModel)]=\"editableRight\"\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</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\t*ngIf=\"state != 'update'\"\r\n\t\t\t[disabled]=\"createAndAdd\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t\t(click)=\"dialog.executeAction(create, [permissionForm.value])\"\r\n\t\t>\r\n\t\t\t<span *ngIf=\"!creating; else loader\">{{\r\n\t\t\t\t'permission.create' | translate\r\n\t\t\t}}</span>\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\tclass=\"submission-button\"\r\n\t\t\t(click)=\"dialog.executeAction(edit, [permissionForm.value])\"\r\n\t\t\t*ngIf=\"state == 'update'\"\r\n\t\t>\r\n\t\t\t<span *ngIf=\"!updating; else loader\">{{\r\n\t\t\t\t'permission.update' | translate\r\n\t\t\t}}</span>\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\t*ngIf=\"state != 'update'\"\r\n\t\t\tclass=\"submission-button w-44\"\r\n\t\t\t(click)=\"\r\n\t\t\t\tdialog.executeAction(createandAddAnother, [\r\n\t\t\t\t\tpermissionForm,\r\n\t\t\t\t\tpermissionForm.value\r\n\t\t\t\t])\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t<span *ngIf=\"!createAndAdd; else loader\">{{\r\n\t\t\t\t'permission.createAndAdd' | translate\r\n\t\t\t}}</span>\r\n\t\t</button>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".form-radio{appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;user-select:none;flex-shrink:0;border-radius:100%;height:1em;width:1em;color:#4299e1;background-color:#fff;border-color:#e2e8f0;border-width:1px}.form-radio:checked{background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media not print{.form-radio::-ms-check{border-width:1px;color:transparent;background:inherit;border-color:inherit;border-radius:inherit}}.form-radio:focus{outline:none;box-shadow:0 0 0 3px #4299e180;border-color:#63b3ed}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container,.rights-select .ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important}.user-select .ng-select-container .ng-value-container,.rights-select .ng-select-container .ng-value-container{padding:unset!important}.user-select .ng-select-container .ng-value-container .ng-placeholder,.rights-select .ng-select-container .ng-value-container .ng-placeholder{font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value,.rights-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper,.rights-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input,.rights-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding-top:4px!important}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid blue;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#00f;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#00f}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}.add-permsion-wrapper{height:calc(100% - 50px);overflow:auto}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { 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: 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: 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"] }, { type: i5__namespace.ɵl, selector: "[ng-notfound-tmp]" }, { type: i5__namespace.ɵf, selector: "[ng-option-tmp]" }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  AddPermissionsDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddPermissionsDialogComponent, selector: "app-add-permissions-dialog", usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.createFile' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<form [formGroup]=\"permissionForm\" class=\"h-full\" SetRtl>\r\n\t\t\t<div class=\"flex flex-col h-full\">\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\" *ngIf=\"state == 'update'\">\r\n\t\t\t\t\t\t{{ 'permission.edit_permission' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span class=\"text-gray-900 text-lg\" *ngIf=\"state !== 'update'\">\r\n\t\t\t\t\t\t{{ 'permission.add_new_permission' | translate }}\r\n\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t<div class=\"user-select mt-5\" *ngIf=\"state != 'update'\">\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{{ 'permission.username' | 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]=\"permissionService.departmentUsers\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'permission.placeholder' | translate\"\r\n\t\t\t\t\t\t\t[multiple]=\"true\"\r\n\t\t\t\t\t\t\t[loading]=\"refreshUsers\"\r\n\t\t\t\t\t\t\tbindLabel=\"displayLabel\"\r\n\t\t\t\t\t\t\tbindValue=\"properties.username\"\r\n\t\t\t\t\t\t\tformControlName=\"users\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\r\n\t\t\t\t\t\t\t\t<div class=\"ng-option disabled\">\r\n\t\t\t\t\t\t\t\t\t{{ 'permission.ngSelect_resultNotFound' | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n\t\t\t\t\t\t\t\t<div class=\"flex flex-col h-full\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex flex-row\">\r\n\t\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\t<cts-avatar\r\n\t\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\t\tproperties: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfirstName: item.properties.firstName,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlastName: item.properties.lastName\r\n\t\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\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</cts-avatar>\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<div class=\"flex flex-col pt-0 px-2\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.displayLabel }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\t\t\t\t\t>{{ item.properties.email }}-{{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.properties.username\r\n\t\t\t\t\t\t\t\t\t\t\t\t}}</span\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</div>\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</ng-template>\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 class=\"mt-3 rights-select\">\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{{ 'permission.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\t[placeholder]=\"'permission.rightsPlaceholder' | translate\"\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\tformControlName=\"permission\"\r\n\t\t\t\t\t\t\t[(ngModel)]=\"editableRight\"\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</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\t*ngIf=\"state != 'update'\"\r\n\t\t\t[disabled]=\"createAndAdd\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t\t(click)=\"dialog.executeAction(create, [permissionForm.value])\"\r\n\t\t>\r\n\t\t\t<span *ngIf=\"!creating; else loader\">{{\r\n\t\t\t\t'permission.create' | translate\r\n\t\t\t}}</span>\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\tclass=\"submission-button\"\r\n\t\t\t(click)=\"dialog.executeAction(edit, [permissionForm.value])\"\r\n\t\t\t*ngIf=\"state == 'update'\"\r\n\t\t>\r\n\t\t\t<span *ngIf=\"!updating; else loader\">{{\r\n\t\t\t\t'permission.update' | translate\r\n\t\t\t}}</span>\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\t*ngIf=\"state != 'update'\"\r\n\t\t\tclass=\"submission-button w-44\"\r\n\t\t\t(click)=\"\r\n\t\t\t\tdialog.executeAction(createandAddAnother, [\r\n\t\t\t\t\tpermissionForm,\r\n\t\t\t\t\tpermissionForm.value\r\n\t\t\t\t])\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t<span *ngIf=\"!createAndAdd; else loader\">{{\r\n\t\t\t\t'permission.createAndAdd' | translate\r\n\t\t\t}}</span>\r\n\t\t</button>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".form-radio{-webkit-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;user-select:none;flex-shrink:0;border-radius:100%;height:1em;width:1em;color:#4299e1;background-color:#fff;border-color:#e2e8f0;border-width:1px}.form-radio:checked{background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media not print{.form-radio::-ms-check{border-width:1px;color:transparent;background:inherit;border-color:inherit;border-radius:inherit}}.form-radio:focus{outline:none;box-shadow:0 0 0 3px #4299e180;border-color:#63b3ed}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container,.rights-select .ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important}.user-select .ng-select-container .ng-value-container,.rights-select .ng-select-container .ng-value-container{padding:unset!important}.user-select .ng-select-container .ng-value-container .ng-placeholder,.rights-select .ng-select-container .ng-value-container .ng-placeholder{font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value,.rights-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper,.rights-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input,.rights-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding-top:4px!important}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid blue;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#00f;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#00f}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}.add-permsion-wrapper{height:calc(100% - 50px);overflow:auto}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { 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: 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: 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"] }, { type: i5__namespace.ɵl, selector: "[ng-notfound-tmp]" }, { type: i5__namespace.ɵf, selector: "[ng-option-tmp]" }], 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: AddPermissionsDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -34977,7 +34818,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$3.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: [{
@@ -39237,7 +39078,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: [{
@@ -41558,7 +41399,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: [{
@@ -41950,7 +41791,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: [{
@@ -41972,7 +41813,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: [{
@@ -42388,7 +42229,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: [{
@@ -42416,7 +42257,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: [{
@@ -42471,7 +42312,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: [{
@@ -42788,7 +42629,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: [{
@@ -42854,7 +42695,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: [{
@@ -42959,7 +42800,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: [{
@@ -43203,7 +43044,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(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: [{
@@ -47146,7 +46987,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: [{
@@ -47208,7 +47049,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$3.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: [{
@@ -47535,7 +47376,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: [{
@@ -47613,7 +47454,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: [{
@@ -47708,7 +47549,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$3.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: [{
@@ -47743,7 +47584,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$3.MatDialogRef }, { token: i1$4.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  CustomChartDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomChartDialogComponent, selector: "app-custom-chart-dialog", viewQueries: [{ propertyName: "customChartComponent", first: true, predicate: ["customChart"], descendants: true }], ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-custom-chart\r\n\t\t\t#customChart\r\n\t\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n\t\t\t[criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t></app-custom-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [""], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "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: [{
@@ -47802,7 +47643,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: [{
@@ -47843,7 +47684,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: [{
@@ -48643,7 +48484,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-feature-settings:\"tnum\";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 } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: InfoDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -48726,7 +48567,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: [{
@@ -49749,7 +49590,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\t<mat-expansion-panel-header #panelH (click)=\"panelH._toggle()\">\r\n\t\t<div class=\"w-full d-flex justify-content-between\">\r\n\t\t\t<ng-container *ngIf=\"completed$ | async as completed; else generalMsg\">\r\n\t\t\t\t<ng-container *ngIf=\"completed > 1; else single\">\r\n\t\t\t\t\t<div class=\"flex items-center justify-center font-weight-bold\">\r\n\t\t\t\t\t\t{{ 'UploaderBottomSheet.MultiUploadsComplete' | translate : { completed: completed } }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-template #single>\r\n\t\t\t\t\t<div class=\"flex items-center justify-center font-weight-bold\">\r\n\t\t\t\t\t\t{{ 'UploaderBottomSheet.SingleUploadsComplete' | translate }}\r\n\t\t\t\t\t</div></ng-template\r\n\t\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-template #generalMsg>\r\n\t\t\t\t<div class=\"flex items-center justify-center font-weight-bold\">\r\n\t\t\t\t\t{{ 'UploaderBottomSheet.UploadingData' | translate }}\r\n\t\t\t\t</div>\r\n\t\t\t</ng-template>\r\n\r\n\t\t\t<div>\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 mx-2\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:plus'\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); fileInput.click()\"\r\n\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.CREATE' | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\t\t\t\t<input type=\"file\" hidden #fileInput (change)=\"add($event)\" multiple />\r\n\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 mx-2\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:open-folder'\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); open()\"\r\n\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.ShowUploadedFiles' | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 mx-2\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:expand'\"\r\n\t\t\t\t\t[ngClass]=\"{\r\n\t\t\t\t\t\tcontainerOpened: !expanded,\r\n\t\t\t\t\t\tcontainerClosed: expanded\r\n\t\t\t\t\t}\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); expanded = !expanded\"\r\n\t\t\t\t\tmatTooltip=\"{{ (expanded ? 'UploaderBottomSheet.MINIMIZED' : 'UploaderBottomSheet.MAXIMIZED') | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 close-sheet\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:cancel-icon'\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); dismiss()\"\r\n\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.CLOSE' | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</mat-expansion-panel-header>\r\n\r\n\t<div>\r\n\t\t<div\r\n\t\t\tclass=\"file-item d-flex justify-content-between align-items-center py-2 px-5\"\r\n\t\t\t*ngFor=\"let fileInfo of uploaderBottomSheetService.filesInfo$ | async; trackBy: trackFile\"\r\n\t\t>\r\n\t\t\t<div class=\"d-flex align-items-center truncate\">\r\n\t\t\t\t<img src=\"{{ fileInfo.icon }}\" class=\"file-icon\" alt=\"{{ fileInfo.data.name }}\" />\r\n\t\t\t\t<span class=\"truncate file-name\">{{ fileInfo.data.name }}</span>\r\n\t\t\t</div>\r\n\t\t\t<div>\r\n\t\t\t\t<!-- only if user hover the row -->\r\n\t\t\t\t<span class=\"more-upload-actions align-items-center\">\r\n\t\t\t\t\t<!-- cancel if file : pending or uploading + hover -->\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"icon-size-3.5\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:cancel-icon'\"\r\n\t\t\t\t\t\t(click)=\"$event.stopPropagation(); cancel(fileInfo)\"\r\n\t\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.CANCEL' | translate }}\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Pending || fileInfo.status == fileStatus.InProgress\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- retry if file : canceled or error + hover -->\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"icon-size-4.5\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:retry'\"\r\n\t\t\t\t\t\t(click)=\"$event.stopPropagation(); retry(fileInfo)\"\r\n\t\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.RETRY' | translate }}\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Canceled || fileInfo.status == fileStatus.Error\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- open file : hover + completed -->\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"icon-size-4.5\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:open-folder'\"\r\n\t\t\t\t\t\t(click)=\"$event.stopPropagation(); open(fileInfo)\"\r\n\t\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.OPEN' | translate }}\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Completed\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</mat-icon>\r\n\t\t\t\t</span>\r\n\r\n\t\t\t\t<span class=\"base-upload-actions align-items-center\">\r\n\t\t\t\t\t<!-- file completed -->\r\n\t\t\t\t\t<mat-icon class=\"icon-size-4.5\" [svgIcon]=\"'icons:complete'\" *ngIf=\"fileInfo.status == fileStatus.Completed\">\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- file has error -->\r\n\t\t\t\t\t<mat-icon class=\"icon-size-4.5\" [svgIcon]=\"'icons:error'\" *ngIf=\"fileInfo.status == fileStatus.Error\">\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- user cancle the file -->\r\n\t\t\t\t\t<mat-icon class=\"icon-size-4.5\" [svgIcon]=\"'icons:error'\" *ngIf=\"fileInfo.status == fileStatus.Canceled\">\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"spinner-container\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Pending || fileInfo.status == fileStatus.InProgress\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<mat-spinner [value]=\"fileInfo.progress\" diameter=\"20\" strokeWidth=\"2\" color=\"primary\"></mat-spinner>\r\n\t\t\t\t\t\t<div class=\"spinner-percentage\" *ngIf=\"fileInfo.status == fileStatus.InProgress\">\r\n\t\t\t\t\t\t\t{{ fileInfo.progress | number : '1.0-0' }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</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:inline-block}.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)}[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\t<mat-expansion-panel-header #panelH (click)=\"panelH._toggle()\">\r\n\t\t<div class=\"w-full d-flex justify-content-between\">\r\n\t\t\t<ng-container *ngIf=\"completed$ | async as completed; else generalMsg\">\r\n\t\t\t\t<ng-container *ngIf=\"completed > 1; else single\">\r\n\t\t\t\t\t<div class=\"flex items-center justify-center font-weight-bold\">\r\n\t\t\t\t\t\t{{ 'UploaderBottomSheet.MultiUploadsComplete' | translate : { completed: completed } }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-template #single>\r\n\t\t\t\t\t<div class=\"flex items-center justify-center font-weight-bold\">\r\n\t\t\t\t\t\t{{ 'UploaderBottomSheet.SingleUploadsComplete' | translate }}\r\n\t\t\t\t\t</div></ng-template\r\n\t\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-template #generalMsg>\r\n\t\t\t\t<div class=\"flex items-center justify-center font-weight-bold\">\r\n\t\t\t\t\t{{ 'UploaderBottomSheet.UploadingData' | translate }}\r\n\t\t\t\t</div>\r\n\t\t\t</ng-template>\r\n\r\n\t\t\t<div>\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 mx-2\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:plus'\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); fileInput.click()\"\r\n\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.CREATE' | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\t\t\t\t<input type=\"file\" hidden #fileInput (change)=\"add($event)\" multiple />\r\n\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 mx-2\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:open-folder'\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); open()\"\r\n\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.ShowUploadedFiles' | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 mx-2\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:expand'\"\r\n\t\t\t\t\t[ngClass]=\"{\r\n\t\t\t\t\t\tcontainerOpened: !expanded,\r\n\t\t\t\t\t\tcontainerClosed: expanded\r\n\t\t\t\t\t}\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); expanded = !expanded\"\r\n\t\t\t\t\tmatTooltip=\"{{ (expanded ? 'UploaderBottomSheet.MINIMIZED' : 'UploaderBottomSheet.MAXIMIZED') | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 close-sheet\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:cancel-icon'\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); dismiss()\"\r\n\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.CLOSE' | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</mat-expansion-panel-header>\r\n\r\n\t<div>\r\n\t\t<div\r\n\t\t\tclass=\"file-item d-flex justify-content-between align-items-center py-2 px-5\"\r\n\t\t\t*ngFor=\"let fileInfo of uploaderBottomSheetService.filesInfo$ | async; trackBy: trackFile\"\r\n\t\t>\r\n\t\t\t<div class=\"d-flex align-items-center truncate\">\r\n\t\t\t\t<img src=\"{{ fileInfo.icon }}\" class=\"file-icon\" alt=\"{{ fileInfo.data.name }}\" />\r\n\t\t\t\t<span class=\"truncate file-name\">{{ fileInfo.data.name }}</span>\r\n\t\t\t</div>\r\n\t\t\t<div>\r\n\t\t\t\t<!-- only if user hover the row -->\r\n\t\t\t\t<span class=\"more-upload-actions align-items-center\">\r\n\t\t\t\t\t<!-- cancel if file : pending or uploading + hover -->\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"icon-size-3.5\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:cancel-icon'\"\r\n\t\t\t\t\t\t(click)=\"$event.stopPropagation(); cancel(fileInfo)\"\r\n\t\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.CANCEL' | translate }}\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Pending || fileInfo.status == fileStatus.InProgress\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- retry if file : canceled or error + hover -->\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"icon-size-4.5\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:retry'\"\r\n\t\t\t\t\t\t(click)=\"$event.stopPropagation(); retry(fileInfo)\"\r\n\t\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.RETRY' | translate }}\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Canceled || fileInfo.status == fileStatus.Error\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- open file : hover + completed -->\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"icon-size-4.5\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:open-folder'\"\r\n\t\t\t\t\t\t(click)=\"$event.stopPropagation(); open(fileInfo)\"\r\n\t\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.OPEN' | translate }}\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Completed\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</mat-icon>\r\n\t\t\t\t</span>\r\n\r\n\t\t\t\t<span class=\"base-upload-actions align-items-center\">\r\n\t\t\t\t\t<!-- file completed -->\r\n\t\t\t\t\t<mat-icon class=\"icon-size-4.5\" [svgIcon]=\"'icons:complete'\" *ngIf=\"fileInfo.status == fileStatus.Completed\">\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- file has error -->\r\n\t\t\t\t\t<mat-icon class=\"icon-size-4.5\" [svgIcon]=\"'icons:error'\" *ngIf=\"fileInfo.status == fileStatus.Error\">\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- user cancle the file -->\r\n\t\t\t\t\t<mat-icon class=\"icon-size-4.5\" [svgIcon]=\"'icons:error'\" *ngIf=\"fileInfo.status == fileStatus.Canceled\">\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"spinner-container\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Pending || fileInfo.status == fileStatus.InProgress\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<mat-spinner [value]=\"fileInfo.progress\" diameter=\"20\" strokeWidth=\"2\" color=\"primary\"></mat-spinner>\r\n\t\t\t\t\t\t<div class=\"spinner-percentage\" *ngIf=\"fileInfo.status == fileStatus.InProgress\">\r\n\t\t\t\t\t\t\t{{ fileInfo.progress | number : '1.0-0' }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</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:inline-block}.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)}[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: [{
@@ -50817,7 +50658,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, #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]", 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: [{
@@ -50859,6 +50700,756 @@
                   }]
           }] });
 
+  var _EmdhaService_instances, _EmdhaService_txnId, _EmdhaService_emdhaPayload, _EmdhaService_displayCode, _EmdhaService_environment_get, _EmdhaService_checkTransactionStatus;
+  exports.TransactionStatus = void 0;
+  (function (TransactionStatus) {
+      TransactionStatus["Pending"] = "pending";
+      TransactionStatus["Authorized"] = "authorized";
+      TransactionStatus["Failed"] = "failed";
+      TransactionStatus["NotFound"] = "notfound";
+      TransactionStatus["Error"] = "error";
+  })(exports.TransactionStatus || (exports.TransactionStatus = {}));
+  var EmdhaService = /** @class */ (function (_super) {
+      __extends(EmdhaService, _super);
+      function EmdhaService(injector, nuxeoDialogService) {
+          var _this = _super.call(this, injector) || this;
+          _this.nuxeoDialogService = nuxeoDialogService;
+          _EmdhaService_instances.add(_this);
+          _EmdhaService_txnId.set(_this, void 0);
+          _EmdhaService_emdhaPayload.set(_this, void 0);
+          _EmdhaService_displayCode.set(_this, void 0);
+          return _this;
+      }
+      Object.defineProperty(EmdhaService.prototype, "displayCode", {
+          get: function () {
+              return __classPrivateFieldGet(this, _EmdhaService_displayCode, "f");
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(EmdhaService.prototype, "headers", {
+          get: function () {
+              var header = new i1$2.HttpHeaders();
+              if (this.customToken) {
+                  header = header.append('Authorization', this.customToken);
+              }
+              return header;
+          },
+          enumerable: false,
+          configurable: true
+      });
+      EmdhaService.prototype.start = function (component, emdhaPayload) {
+          __classPrivateFieldSet(this, _EmdhaService_emdhaPayload, emdhaPayload, "f");
+          var options = {
+              component: component,
+              panelClass: 'emdha-auth-dialog-container',
+              width: '400px',
+              minWidth: '400px',
+              data: {},
+          };
+          return this.nuxeoDialogService
+              .open(options)
+              .afterClosed()
+              .pipe(operators.take(1), operators.map(function (res) {
+              if (res) {
+                  return true;
+              }
+              else {
+                  return false;
+              }
+          }));
+      };
+      EmdhaService.prototype.auth = function (signerId) {
+          var _this = this;
+          var payload = {
+              params: {
+                  signerId: signerId,
+                  assuranceLevel: 'm',
+              },
+          };
+          return this.post({
+              endpoint: __classPrivateFieldGet(this, _EmdhaService_instances, "a", _EmdhaService_environment_get).nuxeo + "/site/automation/Emdha.SignerAuth",
+              payload: payload,
+              headers: this.headers
+          }).pipe(operators.tap(function (data) {
+              __classPrivateFieldSet(_this, _EmdhaService_txnId, data.txnId, "f");
+              __classPrivateFieldSet(_this, _EmdhaService_displayCode, data.displayCode, "f");
+          }));
+      };
+      EmdhaService.prototype.checkTransactionStatus = function () {
+          var _this = this;
+          return __classPrivateFieldGet(this, _EmdhaService_instances, "m", _EmdhaService_checkTransactionStatus).call(this).pipe(operators.map(function (data) { return ({ data: data, attempt: 1 }); }), operators.expand(function (_c) {
+              var data = _c.data, attempt = _c.attempt;
+              var _a, _b;
+              var state = (_a = data === null || data === void 0 ? void 0 : data.value) === null || _a === void 0 ? void 0 : _a.state;
+              if (state === 'authorized') {
+                  return rxjs.of(data);
+              }
+              if (['failed', 'notfound', 'error'].includes(state)) {
+                  return rxjs.throwError(function () { return new Error("Transaction " + state); });
+              }
+              if (attempt >= (((_b = __classPrivateFieldGet(_this, _EmdhaService_instances, "a", _EmdhaService_environment_get).emdhaSignature) === null || _b === void 0 ? void 0 : _b.maxAttempts) || 60)) {
+                  return rxjs.throwError(function () { return new Error('Max retry attempts reached'); });
+              }
+              return rxjs.timer(__classPrivateFieldGet(_this, _EmdhaService_instances, "a", _EmdhaService_environment_get).emdhaSignature.delayMs || 2000).pipe(operators.switchMap(function () { return __classPrivateFieldGet(_this, _EmdhaService_instances, "m", _EmdhaService_checkTransactionStatus).call(_this); }), operators.map(function (nextData) { return ({ data: nextData, attempt: attempt + 1 }); }));
+          }), operators.filter(function (data) { var _a; return ((_a = data === null || data === void 0 ? void 0 : data.value) === null || _a === void 0 ? void 0 : _a.state) === 'authorized'; }), operators.take(1), operators.map(function (_c) {
+              var data = _c.data;
+              return data;
+          }));
+      };
+      EmdhaService.prototype.signDocument = function () {
+          var _a, _b;
+          var signBase64 = __classPrivateFieldGet(this, _EmdhaService_emdhaPayload, "f").signImage.split(',')[1];
+          var payload = {
+              params: {
+                  signerName: this.user.fullName || 'comptech',
+                  emailId: ((_a = this.user.properties) === null || _a === void 0 ? void 0 : _a.email) || 'comptech@comptech.com',
+                  mobileNumber: ((_b = this.user.properties) === null || _b === void 0 ? void 0 : _b.phoneNumber) || '0000000000',
+                  targetDocumentId: __classPrivateFieldGet(this, _EmdhaService_emdhaPayload, "f").uid,
+                  pageNumber: __classPrivateFieldGet(this, _EmdhaService_emdhaPayload, "f").pageNumber,
+                  pageCoordinates: __classPrivateFieldGet(this, _EmdhaService_emdhaPayload, "f").pageCoordinates,
+                  returnSignedDocument: false,
+                  logoBase64: signBase64,
+              },
+          };
+          return this.post({
+              endpoint: __classPrivateFieldGet(this, _EmdhaService_instances, "a", _EmdhaService_environment_get).nuxeo + "/site/automation/Emdha.SignDocument",
+              payload: payload,
+              headers: this.headers
+          });
+      };
+      return EmdhaService;
+  }(BaseService));
+  _EmdhaService_txnId = new WeakMap(), _EmdhaService_emdhaPayload = new WeakMap(), _EmdhaService_displayCode = new WeakMap(), _EmdhaService_instances = new WeakSet(), _EmdhaService_environment_get = function _EmdhaService_environment_get() {
+      return EnvManager.environment;
+  }, _EmdhaService_checkTransactionStatus = function _EmdhaService_checkTransactionStatus() {
+      var payload = {
+          params: {
+              txnId: __classPrivateFieldGet(this, _EmdhaService_txnId, "f"),
+          },
+      };
+      return this.post({
+          endpoint: __classPrivateFieldGet(this, _EmdhaService_instances, "a", _EmdhaService_environment_get).nuxeo + "/site/automation/Emdha.CheckTransactionStatus",
+          payload: payload,
+          headers: this.headers
+      });
+  };
+  EmdhaService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EmdhaService, deps: [{ token: i0__namespace.Injector }, { token: NuxeoDialogService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  EmdhaService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EmdhaService, providedIn: 'root' });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EmdhaService, decorators: [{
+              type: i0.Injectable,
+              args: [{ providedIn: 'root' }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: NuxeoDialogService }]; } });
+
+  var _EmdhaAuthDialog_instances, _EmdhaAuthDialog_listenerTransactionStatus, _EmdhaAuthDialog_signDocument;
+  var EmdhaAuthDialog = /** @class */ (function (_super) {
+      __extends(EmdhaAuthDialog, _super);
+      function EmdhaAuthDialog(injector, emdhaService) {
+          var _this = _super.call(this, injector) || this;
+          _this.emdhaService = emdhaService;
+          _EmdhaAuthDialog_instances.add(_this);
+          _this.emdhaForm = new i2.FormGroup({
+              idNumber: new i2.FormControl(null, [
+                  i2.Validators.required,
+                  i2.Validators.minLength(10),
+                  i2.Validators.minLength(10),
+              ]),
+          });
+          _this.displayCode = '';
+          _this.proccessingSign = false;
+          return _this;
+      }
+      Object.defineProperty(EmdhaAuthDialog.prototype, "getDialogTitle", {
+          get: function () {
+              if (this.proccessingSign) {
+                  return 'viewer.emdha.authenticating';
+              }
+              else if (this.displayCode) {
+                  return 'viewer.emdha.auth-confirmation';
+              }
+              return 'viewer.emdha.auth';
+          },
+          enumerable: false,
+          configurable: true
+      });
+      EmdhaAuthDialog.prototype.ngOnInit = function () {
+          var _this = this;
+          this.loading = true;
+          this.proccessingSign = true;
+          __classPrivateFieldGet(this, _EmdhaAuthDialog_instances, "m", _EmdhaAuthDialog_signDocument).call(this)
+              .pipe(operators.takeUntil(this.destroy$))
+              .subscribe(function (data) {
+              _this.loading = false;
+              _this.proccessingSign = false;
+              if (data.code == 'NO_TOKEN') {
+                  return;
+              }
+              else {
+                  _this.close(true);
+              }
+          }, function (error) {
+              _this.loading = false;
+              _this.proccessingSign = false;
+              console.log(error);
+              _this.toastrService.error('viewer.emdha.auth-error');
+              _this.close(false);
+          });
+      };
+      EmdhaAuthDialog.prototype.signerAuth = function () {
+          var _this = this;
+          this.loading = true;
+          this.emdhaService
+              .auth(this.emdhaForm.controls['idNumber'].value)
+              .pipe(operators.takeUntil(this.destroy$), operators.finalize(function () {
+              _this.loading = false;
+          }))
+              .subscribe(function (data) {
+              _this.displayCode = data.displayCode;
+              __classPrivateFieldGet(_this, _EmdhaAuthDialog_instances, "m", _EmdhaAuthDialog_listenerTransactionStatus).call(_this);
+          }, function (error) {
+              if (error.error.includes('THERE IS AN ACTIVE TRANSACTION')) {
+                  _this.displayCode = _this.emdhaService.displayCode;
+                  __classPrivateFieldGet(_this, _EmdhaAuthDialog_instances, "m", _EmdhaAuthDialog_listenerTransactionStatus).call(_this);
+              }
+              else {
+                  _this.toastrService.error('viewer.emdha.auth-error');
+                  _this.close(false);
+              }
+          });
+      };
+      return EmdhaAuthDialog;
+  }(BaseDialogComponent));
+  _EmdhaAuthDialog_instances = new WeakSet(), _EmdhaAuthDialog_listenerTransactionStatus = function _EmdhaAuthDialog_listenerTransactionStatus() {
+      var _this = this;
+      this.emdhaService
+          .checkTransactionStatus()
+          .pipe(operators.takeUntil(this.destroy$))
+          .subscribe(function (data) {
+          _this.loading = true;
+          __classPrivateFieldGet(_this, _EmdhaAuthDialog_instances, "m", _EmdhaAuthDialog_signDocument).call(_this).subscribe(function () {
+              _this.loading = false;
+              _this.close(true);
+          }, function (error) {
+              console.log(error);
+              _this.loading = false;
+              _this.toastrService.error('viewer.emdha.auth-error');
+              _this.close(false);
+          });
+      }, function (error) {
+          console.log(error);
+          _this.toastrService.error('viewer.emdha.auth-error');
+          _this.close(false);
+      });
+  }, _EmdhaAuthDialog_signDocument = function _EmdhaAuthDialog_signDocument() {
+      var _this = this;
+      return this.emdhaService.signDocument().pipe(operators.takeUntil(this.destroy$), operators.finalize(function () { return (_this.loading = false); }));
+  };
+  EmdhaAuthDialog.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EmdhaAuthDialog, deps: [{ token: i0__namespace.Injector }, { token: EmdhaService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  EmdhaAuthDialog.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EmdhaAuthDialog, selector: "app-emdha-auth-dialog", usesInheritance: true, ngImport: i0__namespace, template: "<ndf-nuxeo-dialog\r\n  dialogTitle=\"{{getDialogTitle | translate }}\"\r\n  [loading]=\"loading\"\r\n>\r\n  <ng-template #contentTemplate>\r\n    <div class=\"nafath-container\">\r\n      <ng-container *ngIf=\"!proccessingSign\">\r\n        <div class=\"header\">\r\n          <div class=\"nafath\">{{'viewer.emdha.nafath' | translate}}</div>\r\n          <div class=\"nafath-sub\">\r\n            {{'viewer.emdha.national single sign-on' | translate}}\r\n          </div>\r\n        </div>\r\n\r\n        <form [formGroup]=\"emdhaForm\" *ngIf=\"!displayCode;else showDisplayCode\">\r\n          <div class=\"flex\">\r\n            <app-dynamic-form-textitem\r\n              class=\"w-full py-10\"\r\n              formControlName=\"idNumber\"\r\n              [label]=\"'viewer.emdha.idNumber'\"\r\n              [placeholder]=\"'viewer.emdha.idNumberHint'\"\r\n              [preventSpace]=\"true\"\r\n            ></app-dynamic-form-textitem>\r\n          </div>\r\n\r\n          <button\r\n            class=\"cancelation-button confirmation-button\"\r\n            [disabled]=\"emdhaForm?.invalid\"\r\n            (click)=\"signerAuth()\"\r\n          >\r\n            <mat-icon svgIcon=\"icons:login\"></mat-icon>\r\n            {{ 'viewer.emdha.login' | translate }}\r\n          </button>\r\n        </form>\r\n\r\n        <ng-template #showDisplayCode>\r\n          <div class=\"nafath-code-container py-10\">\r\n            <div class=\"nafath-code\">{{displayCode}}</div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #actionsTemplate let-dialog=\"dialog\"> </ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [":host{--nafath-color: #11998e}.nafath-container{padding-bottom:10px;min-height:150px}.header{text-align:var(--emdha-header-text-align, center)}.header .nafath{color:var(--emdha-header-nafath-color, var(--nafath-color));font-weight:var(--emdha-header-nafath-font-weight, 500);font-size:var(--emdha-header-nafath-font-size, 1.5rem);line-height:var(--emdha-header-nafath-line-height, 1.75rem);font-style:var(--emdha-header-nafath-font-style, normal)}.header .nafath-sub{font-weight:var(--emdha-header-nafath-sub-font-weight, 100);font-size:var(--emdha-header-nafath-sub-font-size, .85rem)}.nafath-code-container{display:flex;justify-content:center}.nafath-code-container .nafath-code{width:-moz-fit-content;width:fit-content;padding:10px 16px;border-radius:8px;text-align:var(--emdha-nafath-code-text-align, center);color:var(--emdha-nafath-code-color, #fff);background:var(--emdha-nafath-code-bg-color, var(--nafath-color));font-weight:var(--emdha-nafath-code-font-weight, 500);font-size:var(--emdha-nafath-code-font-size, 2rem)}::ng-deep .app-property-value .app-input-wrapper label{color:unset!important}::ng-deep .app-property-value .app-input-wrapper label .text-danger{color:red}::ng-deep .app-property-value .app-input-wrapper .form-control{width:100%;background-color:unset!important;border-radius:4px!important}::ng-deep .app-property-value .input-filled{border-color:var(--emdha-dialog-input-border-color, var(--nafath-color))!important}::ng-deep .emdha-auth-dialog-container .ndf-dialog-wrapper .dialog-header{color:var(--emdha-dialog-header-color, var(--nafath-color))!important}::ng-deep .emdha-auth-dialog-container .ndf-dialog-wrapper .dialog-body{padding-bottom:unset!important}::ng-deep .emdha-auth-dialog-container .ndf-dialog-wrapper>div:last-child{padding-top:unset!important;display:block!important}::ng-deep .emdha-auth-dialog-container .cancelation-button{width:100%!important;padding-top:1px;display:flex!important;height:35px!important;max-height:35px!important;min-height:35px!important;min-width:80px!important;align-items:center!important;justify-content:center!important;grid-gap:.25rem!important;gap:.25rem!important;border-radius:4px!important;padding-left:1rem!important;padding-right:1rem!important;font-size:.875rem!important;font-weight:400!important;line-height:1.5rem!important;border:1px solid #aaa!important}::ng-deep .emdha-auth-dialog-container .confirmation-button{width:100%!important;border:unset!important;background-color:var(--emdha-header-login-bg-color, var(--nafath-color))!important;color:var(--emdha-header-login-color, #fff)!important}::ng-deep .emdha-auth-dialog-container .confirmation-button:disabled{opacity:.5}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "nativeAutoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "autoCompleteType", "tenantId", "emitFullObject", "outsideParams", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id", "maxCharsNum"] }, { 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.ɵ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"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EmdhaAuthDialog, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'app-emdha-auth-dialog',
+                      templateUrl: './emdha-auth.dialog.html',
+                      styleUrls: ['./emdha-auth.dialog.scss'],
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: EmdhaService }]; } });
+
+  var _SignaturesService_instances, _SignaturesService_userSignatures, _SignaturesService_trackedSignatures, _SignaturesService_signAlreadyDrawed, _SignaturesService_selectedSign, _SignaturesService_createUserSignature, _SignaturesService_exctractNotRepeatedSign, _SignaturesService_findSignatureToDelete, _SignaturesService_findSignatureToUpdate, _SignaturesService_startConstructingSignOptions, _SignaturesService_getTitle, _SignaturesService_constructAndDrawSignature, _SignaturesService_checkIfHasSignatures, _SignaturesService_registerAuditLog;
+  exports.SignatureType = void 0;
+  (function (SignatureType) {
+      SignatureType["Tron"] = "tron";
+      SignatureType["Emdha"] = "emdha";
+  })(exports.SignatureType || (exports.SignatureType = {}));
+  exports.InsertSingPosition = void 0;
+  (function (InsertSingPosition) {
+      InsertSingPosition["CurrentPage"] = "currentPage";
+      InsertSingPosition["FirstPage"] = "firstPage";
+      InsertSingPosition["LastPage"] = "lastPage";
+      InsertSingPosition["FirstLastPage"] = "firstLast";
+      InsertSingPosition["AllPages"] = "allPages";
+  })(exports.InsertSingPosition || (exports.InsertSingPosition = {}));
+  var SignaturesService = /** @class */ (function (_super) {
+      __extends(SignaturesService, _super);
+      function SignaturesService(injector, emdhaService, pdftronService, documentsService) {
+          var _this = _super.call(this, injector) || this;
+          _this.emdhaService = emdhaService;
+          _this.pdftronService = pdftronService;
+          _this.documentsService = documentsService;
+          _SignaturesService_instances.add(_this);
+          _SignaturesService_userSignatures.set(_this, []);
+          _SignaturesService_trackedSignatures.set(_this, []);
+          _SignaturesService_signAlreadyDrawed.set(_this, false);
+          _SignaturesService_selectedSign.set(_this, void 0);
+          _this.hasSignatures$ = new rxjs.BehaviorSubject(false);
+          _this.operations = {
+              get: 'AC_UA_UserSignature_GetAsBase64',
+              create: 'AC_UA_DMS_User_Signature_Create',
+              delete: 'AC_UA_DMS_User_Signature_Delete',
+              lock: 'AC_UA_DMS_Document_Lock',
+              unlock: 'AC_UA_DMS_Document_Unlock',
+              audit: 'AC_AU_RegisterAuditLog',
+              createVersion: 'Document.CreateVersion'
+          };
+          return _this;
+      }
+      SignaturesService.prototype.lockDocument = function (mode, docId, headers) {
+          if (headers === void 0) { headers = {}; }
+          return this.automation({
+              operation: this.operations.lock,
+              input: docId,
+              params: { mode: mode },
+              headers: headers
+          });
+      };
+      SignaturesService.prototype.unlockDocument = function (docId, headers) {
+          if (headers === void 0) { headers = {}; }
+          return this.automation({
+              operation: this.operations.unlock,
+              input: docId,
+              headers: headers
+          });
+      };
+      SignaturesService.prototype.getLockOwner = function (userId) {
+          return this.request("user/" + userId);
+      };
+      SignaturesService.prototype.getUserSignatures = function (forceFetch) {
+          var _this = this;
+          if (forceFetch === void 0) { forceFetch = false; }
+          if (!forceFetch && __classPrivateFieldGet(this, _SignaturesService_userSignatures, "f").length > 0) {
+              return rxjs.of(__classPrivateFieldGet(this, _SignaturesService_userSignatures, "f"));
+          }
+          else {
+              __classPrivateFieldSet(this, _SignaturesService_userSignatures, [], "f");
+          }
+          return this.automation({
+              operation: this.operations.get,
+              headers: { 'X-NXproperties': '*' }
+          }).pipe(operators.take(1), operators.map(function (data) {
+              var base64sign = '';
+              var notRepeatedSign = __classPrivateFieldGet(_this, _SignaturesService_instances, "m", _SignaturesService_exctractNotRepeatedSign).call(_this, data);
+              notRepeatedSign.map(function (sign, i) {
+                  if (sign['file:content']) {
+                      base64sign =
+                          'data:' +
+                              (sign['file:content']['mime-type'] ? sign['file:content']['mime-type'] : 'image/png') +
+                              ';base64,' +
+                              sign['file:content']['data'];
+                      __classPrivateFieldGet(_this, _SignaturesService_userSignatures, "f").push({
+                          id: i,
+                          image: base64sign,
+                          name: sign.name || sign.title
+                      });
+                  }
+              });
+              return __classPrivateFieldGet(_this, _SignaturesService_userSignatures, "f");
+          }));
+      };
+      SignaturesService.prototype.addUserSignature = function (file) {
+          var _this = this;
+          return this.documentsService.uploadBatch([file]).pipe(operators.take(1), operators.switchMap(function (batch) { return __classPrivateFieldGet(_this, _SignaturesService_instances, "m", _SignaturesService_createUserSignature).call(_this, batch).pipe(operators.take(1)); }), operators.switchMap(function () { return _this.getUserSignatures(true); }));
+      };
+      SignaturesService.prototype.deleteUserSignature = function (sign) {
+          var _this = this;
+          return this.automation({
+              operation: this.operations.delete,
+              context: {
+                  userSignatureName: sign.name
+              }
+          }).pipe(operators.map(function () {
+              __classPrivateFieldGet(_this, _SignaturesService_userSignatures, "f").splice(sign.id, 1);
+              return __classPrivateFieldGet(_this, _SignaturesService_userSignatures, "f");
+          }));
+      };
+      SignaturesService.prototype.applySignToDocument = function (sign, insertPosition) {
+          __classPrivateFieldSet(this, _SignaturesService_selectedSign, sign, "f");
+          if (__classPrivateFieldGet(this, _SignaturesService_signAlreadyDrawed, "f")) {
+              this.pdftronService.instance.annotManager.deleteAnnotations(__classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f"));
+              __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_startConstructingSignOptions).call(this, sign, insertPosition, false);
+          }
+          else {
+              __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_startConstructingSignOptions).call(this, sign, insertPosition, true);
+          }
+          __classPrivateFieldSet(this, _SignaturesService_signAlreadyDrawed, true, "f");
+          __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_checkIfHasSignatures).call(this);
+      };
+      // client should lock/unlock the document to customize header if need
+      SignaturesService.prototype.saveSingFile = function (signatureType, document, file, extraHeaders, useVersionCustomParam, updateDocument) {
+          var _this = this;
+          if (extraHeaders === void 0) { extraHeaders = {}; }
+          if (useVersionCustomParam === void 0) { useVersionCustomParam = true; }
+          if (updateDocument === void 0) { updateDocument = true; }
+          // const signInfo = this.pdftronService.getSignatureAnnotaionsInfo(
+          //   this.#trackedSignatures,
+          // );
+          if (__classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f").length <= 0) {
+              return rxjs.throwError(function () { return new Error('No signature to save'); });
+          }
+          if (signatureType === exports.SignatureType.Emdha) {
+              var pdfYCoordinate = 792;
+              var x1 = __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f")[0].X;
+              var y1 = pdfYCoordinate -
+                  (__classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f")[0].Y + __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f")[0].Height < pdfYCoordinate
+                      ? __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f")[0].Y + __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f")[0].Height
+                      : __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f")[0].Y);
+              var x2 = x1 + __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f")[0].Width;
+              var y2 = y1 + __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f")[0].Height;
+              var emdhaPayload = {
+                  uid: document.uid,
+                  pageNumber: this.pdftronService.instance.docViewer.getCurrentPage(),
+                  pageCoordinates: Math.floor(x1) + "," + Math.floor(y1) + "," + Math.floor(x2) + "," + Math.floor(y2),
+                  signImage: __classPrivateFieldGet(this, _SignaturesService_selectedSign, "f").image
+              };
+              return this.emdhaService.start(EmdhaAuthDialog, emdhaPayload);
+          }
+          else {
+              return this.documentsService.uploadBatch([file], extraHeaders).pipe(operators.take(1), operators.switchMap(function (batch) {
+                  var props = { 'file:content': batch[0].blob };
+                  var versionCustomParam = {
+                      increment: 'major',
+                      saveDocument: true
+                  };
+                  return _this.documentsService
+                      .createVersion(document.uid, 'minor', _this.operations.createVersion, useVersionCustomParam ? versionCustomParam : null)
+                      .pipe(operators.take(1), operators.switchMap(function () {
+                      if (!updateDocument)
+                          return rxjs.of(batch);
+                      return _this.documentsService.updateDocument(Object.assign(Object.assign({}, document), { properties: props }));
+                  }), operators.tap(function () {
+                      _this.documentsService.reFetch.next(true);
+                      if (_this.operations.audit) {
+                          __classPrivateFieldGet(_this, _SignaturesService_instances, "m", _SignaturesService_registerAuditLog).call(_this, document.uid, 'sign');
+                      }
+                  }), operators.take(1));
+              }));
+          }
+      };
+      SignaturesService.prototype.onTrackingSignature = function (signatures) {
+          var _this = this;
+          console.log('onTrackingSignature', signatures);
+          if (signatures.action === 'delete') {
+              signatures.anotations.map(function (anot) {
+                  __classPrivateFieldGet(_this, _SignaturesService_instances, "m", _SignaturesService_findSignatureToDelete).call(_this, anot); // delete old signature with its old position
+              });
+          }
+          else if (signatures.action === 'modify') {
+              if (signatures.anotations[0]['applyMovingToAllPages']) {
+                  __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f").map(function (sign) {
+                      sign.X = signatures.anotations[0]['X'];
+                      sign.Y = signatures.anotations[0]['Y'];
+                      _this.pdftronService.instance.annotManager.redrawAnnotation(sign);
+                  });
+              }
+              else {
+                  __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_findSignatureToUpdate).call(this, signatures.anotations[0]); // delete old signature with its old position
+                  __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f").push(signatures.anotations[0]); // add new signature with its new position
+              }
+          }
+          else if (signatures.action === 'add') {
+              __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f").push(signatures.anotations[0]);
+          }
+          __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_checkIfHasSignatures).call(this);
+      };
+      SignaturesService.prototype.reset = function () {
+          __classPrivateFieldSet(this, _SignaturesService_trackedSignatures, [], "f");
+          __classPrivateFieldSet(this, _SignaturesService_signAlreadyDrawed, false, "f");
+          __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_checkIfHasSignatures).call(this);
+      };
+      SignaturesService.prototype.setCustomToken = function (token) {
+          this.emdhaService.customToken = token;
+      };
+      return SignaturesService;
+  }(BaseService));
+  _SignaturesService_userSignatures = new WeakMap(), _SignaturesService_trackedSignatures = new WeakMap(), _SignaturesService_signAlreadyDrawed = new WeakMap(), _SignaturesService_selectedSign = new WeakMap(), _SignaturesService_instances = new WeakSet(), _SignaturesService_createUserSignature = function _SignaturesService_createUserSignature(batch) {
+      return this.customAutomation({
+          operation: this.operations.create,
+          context: {
+              signature: {
+                  'file:content': {
+                      'upload-batch': batch[0]['blob']['upload-batch'],
+                      'upload-fileId': batch[0]['blob']['upload-fileId']
+                  }
+              }
+          }
+      });
+  }, _SignaturesService_exctractNotRepeatedSign = function _SignaturesService_exctractNotRepeatedSign(newSignatures) {
+      var _this = this;
+      var notRepeated = newSignatures.filter(function (sign) { return !__classPrivateFieldGet(_this, _SignaturesService_userSignatures, "f").some(function (s) { return s.name === sign.title; }); });
+      return notRepeated;
+  }, _SignaturesService_findSignatureToDelete = function _SignaturesService_findSignatureToDelete(signature) {
+      __classPrivateFieldSet(this, _SignaturesService_trackedSignatures, __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f").filter(function (sign) {
+          return (sign.PageNumber !== signature.PageNumber ||
+              sign.ImageData !== signature.ImageData ||
+              (sign.X !== signature.X && sign.Y !== signature.Y));
+      }), "f");
+  }, _SignaturesService_findSignatureToUpdate = function _SignaturesService_findSignatureToUpdate(signature) {
+      __classPrivateFieldSet(this, _SignaturesService_trackedSignatures, __classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f").filter(function (sign) {
+          return sign.PageNumber !== signature.PageNumber || sign.ImageData !== signature.ImageData;
+      }), "f");
+  }, _SignaturesService_startConstructingSignOptions = function _SignaturesService_startConstructingSignOptions(sign, insertPosition, addMoveButton) {
+      var _this = this;
+      this.pdftronService.instance.annotManager.setReadOnly(false);
+      if (addMoveButton) {
+          this.pdftronService.instance.annotationPopup.add({
+              type: 'actionButton',
+              img: '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-arrows-move" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"/></svg>',
+              title: this.translateService.instant('viewer.Sync movement with all pages'),
+              onClick: function () {
+                  var selectAnot = _this.pdftronService.instance.annotManager.getSelectedAnnotations();
+                  selectAnot[0]['applyMovingToAllPages'] = selectAnot[0]['applyMovingToAllPages'] ? false : true;
+                  _this.pdftronService.instance.annotManager.setNoteContents(selectAnot[0], __classPrivateFieldGet(_this, _SignaturesService_instances, "m", _SignaturesService_getTitle).call(_this, selectAnot[0]));
+                  console.log(selectAnot);
+              }
+          });
+          this.pdftronService.instance.disableElements([
+              'toolbarGroup-Shapes',
+              'toolbarGroup-Edit',
+              'toolbarGroup-Insert',
+              'toolbarGroup-Annotate',
+              'linkButton',
+              'annotationStyleEditButton',
+              'annotationCommentButton'
+          ]);
+      }
+      var pageCount = this.pdftronService.instance.docViewer.getPageCount();
+      if (pageCount === 1 ||
+          (pageCount > 1 && insertPosition === exports.InsertSingPosition.FirstPage) ||
+          (pageCount > 1 && insertPosition === exports.InsertSingPosition.LastPage)) {
+          var page = pageCount > 1 && insertPosition === exports.InsertSingPosition.LastPage ? pageCount : 1;
+          __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_constructAndDrawSignature).call(this, page, sign.image);
+      }
+      else if (insertPosition === exports.InsertSingPosition.FirstLastPage) {
+          __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_constructAndDrawSignature).call(this, 1, sign.image);
+          __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_constructAndDrawSignature).call(this, pageCount, sign.image);
+      }
+      else if (insertPosition === exports.InsertSingPosition.CurrentPage) {
+          var currentPage = this.pdftronService.instance.docViewer.getCurrentPage();
+          __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_constructAndDrawSignature).call(this, currentPage, sign.image);
+      }
+      else if (insertPosition === exports.InsertSingPosition.AllPages) {
+          for (var pageNum = 1; pageNum < pageCount + 1; pageNum++) {
+              __classPrivateFieldGet(this, _SignaturesService_instances, "m", _SignaturesService_constructAndDrawSignature).call(this, pageNum, sign.image);
+          }
+      }
+  }, _SignaturesService_getTitle = function _SignaturesService_getTitle(selectAnot) {
+      if (selectAnot && selectAnot['applyMovingToAllPages']) {
+          return this.translateService.instant('viewer.Motion is synchronized with all pages');
+      }
+      else {
+          return this.translateService.instant('viewer.Motion is not synchronized with all pages');
+      }
+  }, _SignaturesService_constructAndDrawSignature = function _SignaturesService_constructAndDrawSignature(page, signImg) {
+      var signatureAnnot = new this.pdftronService.instance.Annotations.StampAnnotation();
+      signatureAnnot.PageNumber = page;
+      var pageHeight = this.pdftronService.instance.docViewer.getPageHeight(page);
+      var pageWidth = this.pdftronService.instance.docViewer.getPageWidth(page);
+      signatureAnnot.X = pageWidth - 180;
+      signatureAnnot.Y = pageHeight - 110;
+      signatureAnnot.Width = 140;
+      signatureAnnot.Height = 60;
+      var keepAsSVG = false;
+      signatureAnnot.setImageData(signImg, keepAsSVG);
+      signatureAnnot.Author = this.pdftronService.instance.annotManager.getCurrentUser();
+      this.pdftronService.instance.annotManager.addAnnotation(signatureAnnot);
+      this.pdftronService.instance.annotManager.redrawAnnotation(signatureAnnot);
+  }, _SignaturesService_checkIfHasSignatures = function _SignaturesService_checkIfHasSignatures() {
+      this.hasSignatures$.next(__classPrivateFieldGet(this, _SignaturesService_trackedSignatures, "f").length > 0);
+  }, _SignaturesService_registerAuditLog = function _SignaturesService_registerAuditLog(docId, eventType) {
+      return this.customAutomation({
+          operation: this.operations.audit,
+          input: docId,
+          params: { event: eventType }
+      });
+  };
+  SignaturesService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SignaturesService, deps: [{ token: i0__namespace.Injector }, { token: EmdhaService }, { token: PdftronService }, { token: DocumentsService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  SignaturesService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SignaturesService, providedIn: 'root' });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SignaturesService, decorators: [{
+              type: i0.Injectable,
+              args: [{ providedIn: 'root' }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: EmdhaService }, { type: PdftronService }, { type: DocumentsService }]; } });
+
+  var _NdfSignaturePanelComponent_instances, _NdfSignaturePanelComponent_loadSignatures;
+  var NdfSignaturePanelComponent = /** @class */ (function (_super) {
+      __extends(NdfSignaturePanelComponent, _super);
+      function NdfSignaturePanelComponent(injector, signaturesService, dialog) {
+          var _this = _super.call(this, injector) || this;
+          _this.signaturesService = signaturesService;
+          _this.dialog = dialog;
+          _NdfSignaturePanelComponent_instances.add(_this);
+          _this.allowedSignTypes = 'image/png,image/jpg,image/jpeg';
+          _this.svgDeleteIcon = 'icons:delete_elements';
+          _this.enableMultiSign = false;
+          _this.userSignatures = [];
+          _this.signaturePosition = [
+              { label: 'viewer.current_page_only', id: exports.InsertSingPosition.CurrentPage },
+              { label: 'viewer.first_page_only', id: exports.InsertSingPosition.FirstPage },
+              { label: 'viewer.last_page_only', id: exports.InsertSingPosition.LastPage }
+          ];
+          _this.signaturesService.reset();
+          return _this;
+      }
+      NdfSignaturePanelComponent.prototype.ngOnInit = function () {
+          var _c;
+          if (this.enableMultiSign) {
+              (_c = this.signaturePosition).push.apply(_c, [
+                  { label: 'viewer.first_last_pages', id: exports.InsertSingPosition.FirstLastPage },
+                  { label: 'viewer.all_pages', id: exports.InsertSingPosition.AllPages },
+              ]);
+          }
+          __classPrivateFieldGet(this, _NdfSignaturePanelComponent_instances, "m", _NdfSignaturePanelComponent_loadSignatures).call(this);
+      };
+      NdfSignaturePanelComponent.prototype.addNewSign = function () {
+          this.signatureUploadInput.nativeElement.click();
+      };
+      NdfSignaturePanelComponent.prototype.applySignToDocument = function () {
+          if (!this.selectedSign || !this.selectedPosition)
+              return;
+          this.signaturesService.applySignToDocument(this.selectedSign, this.selectedPosition);
+      };
+      NdfSignaturePanelComponent.prototype.saveSignature = function (event) {
+          var _this = this;
+          if (!this.allowedSignTypes.split(',').includes(event.target.files[0].type)) {
+              this.toastrService.error('viewer.notAllowedType');
+          }
+          else {
+              this.loading = true;
+              this.signaturesService
+                  .addUserSignature(event.target.files[0])
+                  .pipe(operators.takeUntil(this.destroy$), operators.finalize(function () {
+                  _this.loading = false;
+                  var input = event.target;
+                  input.value = null;
+              }))
+                  .subscribe(function (data) {
+                  _this.userSignatures = data;
+                  _this.toastrService.success('viewer.sing_created_success');
+              });
+          }
+      };
+      NdfSignaturePanelComponent.prototype.selectSignature = function (sign) {
+          this.selectedSign = sign;
+      };
+      NdfSignaturePanelComponent.prototype.deleteSignature = function (sign) {
+          var _this = this;
+          var _a, _b;
+          this.dialog.open(((_a = this.customConfirmationDialog) === null || _a === void 0 ? void 0 : _a.component) || ConfirmationDialogComponent, ((_b = this.customConfirmationDialog) === null || _b === void 0 ? void 0 : _b.config) || {
+              width: "510px",
+              data: {
+                  title: this.translateService.instant("confirmDialog.confirm"),
+                  message: this.translateService.instant('viewer.confirm_sign_delete'),
+                  confirmButton: "viewer.sing_deleted_success",
+                  cancelButton: "BUTTONS.Cancel",
+              },
+              disableClose: true,
+          }).afterClosed().subscribe(function (data) {
+              if (data) {
+                  _this.loading = true;
+                  _this.signaturesService.deleteUserSignature(sign).pipe(operators.takeUntil(_this.destroy$), operators.finalize(function () { return (_this.loading = false); })).subscribe(function (data) {
+                      _this.userSignatures = data;
+                      _this.toastrService.success('viewer.sing_deleted_success');
+                  });
+              }
+          });
+      };
+      return NdfSignaturePanelComponent;
+  }(BaseComponent));
+  _NdfSignaturePanelComponent_instances = new WeakSet(), _NdfSignaturePanelComponent_loadSignatures = function _NdfSignaturePanelComponent_loadSignatures() {
+      var _this = this;
+      this.loading = true;
+      this.signaturesService
+          .getUserSignatures()
+          .pipe(operators.finalize(function () { return (_this.loading = false); }))
+          .subscribe(function (data) {
+          _this.userSignatures = data;
+      });
+  };
+  NdfSignaturePanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfSignaturePanelComponent, deps: [{ token: i0__namespace.Injector }, { token: SignaturesService }, { token: i1__namespace$3.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NdfSignaturePanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfSignaturePanelComponent, selector: "ndf-signature-panel", inputs: { allowedSignTypes: "allowedSignTypes", svgDeleteIcon: "svgDeleteIcon", enableMultiSign: "enableMultiSign", customConfirmationDialog: "customConfirmationDialog" }, queries: [{ propertyName: "addTemplate", first: true, predicate: ["addTemplate"], descendants: true }, { propertyName: "appendSigntoDoc", first: true, predicate: ["appendSigntoDoc"], descendants: true }], viewQueries: [{ propertyName: "signatureUploadInput", first: true, predicate: ["signatureUploadInput"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<input\r\n  type=\"file\"\r\n  class=\"hidden\"\r\n  #signatureUploadInput\r\n  [accept]=\"allowedSignTypes\"\r\n  (change)=\"saveSignature($event)\"\r\n/>\r\n<div class=\"ndf-signature-panel\">\r\n  <div class=\"selecting-sign-iner-eraper\">\r\n    <div class=\"section-title flex justify-between\">\r\n      {{ \"viewer.choose_signature\" | translate }}\r\n\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          addTemplate;\r\n          context: {\r\n            action: addNewSign.bind(this),\r\n            loading: loading,\r\n            signaturesLength: userSignatures?.length\r\n          }\r\n        \"\r\n      ></ng-container>\r\n    </div>\r\n\r\n    <mat-progress-bar\r\n      *ngIf=\"loading\"\r\n      [mode]=\"'indeterminate'\"\r\n      class=\"mt-1\"\r\n    ></mat-progress-bar>\r\n\r\n    <ng-container *ngIf=\"!loading\">\r\n      <ng-container *ngIf=\"userSignatures?.length; else showNoSignatures\">\r\n        <div class=\"sign-imges mt-6\">\r\n          <span\r\n            *ngFor=\"let sign of userSignatures\"\r\n            class=\"single-sign-img-container\"\r\n            [ngClass]=\"{\r\n              selected_sign: sign.id === selectedSign?.id\r\n            }\"\r\n          >\r\n            <img [src]=\"sign.image\" (click)=\"selectSignature(sign)\" />\r\n            <mat-icon\r\n              [svgIcon]=\"svgDeleteIcon\"\r\n              class=\"delete-sign\"\r\n              (click)=\"deleteSignature(sign)\"\r\n            ></mat-icon>\r\n          </span>\r\n        </div>\r\n        <div class=\"sign-options mt-4\">\r\n          <label class=\"sign-position\">\r\n            {{ \"viewer.sign_position\" | translate }}\r\n          </label>\r\n          <mat-radio-group\r\n            class=\"opsition-options-wraper\"\r\n            [(ngModel)]=\"selectedPosition\"\r\n          >\r\n            <mat-radio-button\r\n              *ngFor=\"let opt of signaturePosition\"\r\n              class=\"single-option\"\r\n              [value]=\"opt.id\"\r\n              >{{ opt.label | translate }}</mat-radio-button\r\n            >\r\n          </mat-radio-group>\r\n        </div>\r\n\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            appendSigntoDoc;\r\n            context: {\r\n              action: applySignToDocument.bind(this),\r\n              disabled: !selectedPosition || !selectedSign || loading\r\n            }\r\n          \"\r\n        ></ng-container>\r\n      </ng-container>\r\n\r\n      <ng-template #showNoSignatures>\r\n        <app-no-data-found\r\n          message=\"viewer.no_sign_for_certificate\"\r\n        ></app-no-data-found>\r\n      </ng-template>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: [".ndf-signature-panel{overflow-x:hidden}.sign-imges{display:flex;grid-gap:10px;gap:10px;text-align:center;overflow-x:auto;height:100px;align-items:center}.sign-imges .single-sign-img-container{min-width:100px;width:100px;height:65px;box-shadow:0 1px 4px -1px #1c345442;cursor:pointer;position:relative}.sign-imges .single-sign-img-container img{height:100%;width:100%;padding:5px}.sign-imges .single-sign-img-container img:hover{transform:scale(1.1)}.sign-imges .single-sign-img-container.selected_sign{box-shadow:none;border:1px solid var(--selected-sign-border-color, #ddd)}.sign-imges .single-sign-img-container .delete-sign{position:absolute;top:-8px;left:0;border-radius:50%;padding:3px;color:var(--delete-sign-color, red);background:var(--delete-sign-bg-color, #ddd);cursor:pointer}.sign-imges .single-sign-img-container .delete-sign:hover{transform:scale(1.1)}mat-radio-button{display:block}::ng-deep .delete-sign.mat-icon svg{width:16px!important;height:16px!important}\n"], components: [{ type: i4__namespace$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2__namespace$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }], directives: [{ 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 } });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfSignaturePanelComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'ndf-signature-panel',
+                      templateUrl: './ndf-signature-panel.component.html',
+                      styleUrls: ['./ndf-signature-panel.component.scss'],
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: SignaturesService }, { type: i1__namespace$3.MatDialog }]; }, propDecorators: { addTemplate: [{
+                  type: i0.ContentChild,
+                  args: ['addTemplate']
+              }], appendSigntoDoc: [{
+                  type: i0.ContentChild,
+                  args: ['appendSigntoDoc']
+              }], signatureUploadInput: [{
+                  type: i0.ViewChild,
+                  args: ['signatureUploadInput']
+              }], allowedSignTypes: [{
+                  type: i0.Input
+              }], svgDeleteIcon: [{
+                  type: i0.Input
+              }], enableMultiSign: [{
+                  type: i0.Input
+              }], customConfirmationDialog: [{
+                  type: i0.Input
+              }] } });
+
+  var NdfSignaturesModule = /** @class */ (function () {
+      function NdfSignaturesModule() {
+      }
+      return NdfSignaturesModule;
+  }());
+  NdfSignaturesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfSignaturesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  NdfSignaturesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfSignaturesModule, declarations: [NdfSignaturePanelComponent,
+          EmdhaAuthDialog], imports: [i4.CommonModule,
+          i1.TranslateModule,
+          i2.FormsModule,
+          i2.ReactiveFormsModule,
+          i4$3.MatProgressBarModule,
+          i2$2.MatIconModule,
+          i2$5.MatRadioModule,
+          i2$2.MatIconModule,
+          NoDataModule,
+          DynamicFormModule,
+          NuxeoDialogModule], exports: [NdfSignaturePanelComponent,
+          EmdhaAuthDialog] });
+  NdfSignaturesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfSignaturesModule, imports: [[
+              i4.CommonModule,
+              i1.TranslateModule,
+              i2.FormsModule,
+              i2.ReactiveFormsModule,
+              i4$3.MatProgressBarModule,
+              i2$2.MatIconModule,
+              i2$5.MatRadioModule,
+              i2$2.MatIconModule,
+              NoDataModule,
+              DynamicFormModule,
+              NuxeoDialogModule,
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfSignaturesModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [
+                          NdfSignaturePanelComponent,
+                          EmdhaAuthDialog
+                      ],
+                      imports: [
+                          i4.CommonModule,
+                          i1.TranslateModule,
+                          i2.FormsModule,
+                          i2.ReactiveFormsModule,
+                          i4$3.MatProgressBarModule,
+                          i2$2.MatIconModule,
+                          i2$5.MatRadioModule,
+                          i2$2.MatIconModule,
+                          NoDataModule,
+                          DynamicFormModule,
+                          NuxeoDialogModule,
+                      ],
+                      exports: [
+                          NdfSignaturePanelComponent,
+                          EmdhaAuthDialog
+                      ]
+                  }]
+          }] });
+
   /*
    * Public API Surface of nuxeo-development-framework
    */
@@ -51082,6 +51673,8 @@
   exports.EditorSettingsComponent = EditorSettingsComponent;
   exports.ElementHeightDirective = ElementHeightDirective;
   exports.ElementHeightModule = ElementHeightModule;
+  exports.EmdhaAuthDialog = EmdhaAuthDialog;
+  exports.EmdhaService = EmdhaService;
   exports.EmptyTemplateDirective = EmptyTemplateDirective;
   exports.EnvManager = EnvManager;
   exports.Evaluator = Evaluator;
@@ -51204,6 +51797,8 @@
   exports.NdfReportsService = NdfReportsService;
   exports.NdfScannerComponent = NdfScannerComponent;
   exports.NdfScannerModule = NdfScannerModule;
+  exports.NdfSignaturePanelComponent = NdfSignaturePanelComponent;
+  exports.NdfSignaturesModule = NdfSignaturesModule;
   exports.NdfTableComponent = NdfTableComponent;
   exports.NdfTableConfigurationService = NdfTableConfigurationService;
   exports.NdfTableModule = NdfTableModule;
@@ -51302,6 +51897,7 @@
   exports.SharedDocsService = SharedDocsService;
   exports.SharedServicesModule = SharedServicesModule;
   exports.SidepanelComponent = SidepanelComponent;
+  exports.SignaturesService = SignaturesService;
   exports.SilentPdfTronService = SilentPdfTronService;
   exports.SingleActivityComponent = SingleActivityComponent;
   exports.SkeletonComponent = SkeletonComponent;