npm - nuxeo-development-framework - Versions diffs - 1.3.0 → 1.3.3 - Mend

nuxeo-development-framework 1.3.0 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/forms'), require('@angular/common/locales/ar'), require('@angular/common/locales/en'), require('@ngx-translate/core'), require('@rxweb/reactive-form-validators'), require('keycloak-angular'), require('ngx-toastr'), require('ngx-treeview'), require('rxjs'), require('rxjs/operators'), require('@angular/platform-browser'), require('moment-es6'), require('moment-hijri'), require('@ng-bootstrap/ng-bootstrap'), require('moment'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/core'), require('@angular/material/datepicker'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/menu'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@angular/material/tooltip'), require('@busacca/ng-pick-datetime'), require('@mat-datetimepicker/core'), require('@ng-select/ng-select'), require('angular-formio'), require('angular-ng-autocomplete'), require('@angular/router'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('formiojs'), require('lodash'), require('@angular/cdk/bidi'), require('@angular/material/form-field'), require('ts-cacheable'), require('@angular/material/dialog'), require('@angular/animations'), require('@angular/material/progress-bar'), require('dwt'), require('@swimlane/ngx-datatable'), require('@angular/cdk/layout'), require('chart.js'), require('chartjs-plugin-piechart-outlabels'), require('chartjs-plugin-labels'), require('ngx-infinite-scroll'), require('rxjs/internal/operators/take'), require('sockjs-client'), require('webstomp-client'), require('@angular/material/badge'), require('@angular/material/toolbar'), require('@angular/material/chips'), require('@angular/material/expansion'), require('@pdftron/webviewer')) :
     typeof define === 'function' && define.amd ? define('nuxeo-development-framework', ['exports', '@angular/core', '@angular/common', '@angular/common/http', '@angular/forms', '@angular/common/locales/ar', '@angular/common/locales/en', '@ngx-translate/core', '@rxweb/reactive-form-validators', 'keycloak-angular', 'ngx-toastr', 'ngx-treeview', 'rxjs', 'rxjs/operators', '@angular/platform-browser', 'moment-es6', 'moment-hijri', '@ng-bootstrap/ng-bootstrap', 'moment', '@angular/material/button', '@angular/material/checkbox', '@angular/material/core', '@angular/material/datepicker', '@angular/material/icon', '@angular/material/input', '@angular/material/menu', '@angular/material/radio', '@angular/material/slide-toggle', '@angular/material/tooltip', '@busacca/ng-pick-datetime', '@mat-datetimepicker/core', '@ng-select/ng-select', 'angular-formio', 'angular-ng-autocomplete', '@angular/router', '@angular/material/progress-spinner', '@angular/material/list', 'formiojs', 'lodash', '@angular/cdk/bidi', '@angular/material/form-field', 'ts-cacheable', '@angular/material/dialog', '@angular/animations', '@angular/material/progress-bar', 'dwt', '@swimlane/ngx-datatable', '@angular/cdk/layout', 'chart.js', 'chartjs-plugin-piechart-outlabels', 'chartjs-plugin-labels', 'ngx-infinite-scroll', 'rxjs/internal/operators/take', 'sockjs-client', 'webstomp-client', '@angular/material/badge', '@angular/material/toolbar', '@angular/material/chips', '@angular/material/expansion', '@pdftron/webviewer'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['nuxeo-development-framework'] = {}, global.ng.core, global.ng.common, global.ng.common.http, global.ng.forms, global.ng.common.locales.ar, global.ng.common.locales.en, global.i1$1, global.reactiveFormValidators, global.i2, global.i1$3, global.i1$2, global.rxjs, global.rxjs.operators, global.ng.platformBrowser, global.moment$4, global.moment_, global.i1$4, global.momentjs, global.ng.material.button, global.ng.material.checkbox, global.ng.material.core, global.ng.material.datepicker, global.ng.material.icon, global.ng.material.input, global.ng.material.menu, global.ng.material.radio, global.ng.material.slideToggle, global.ng.material.tooltip, global.i6, global.core, global.i3$5, global.i3$3, global.i3$1, global.ng.router, global.ng.material.progressSpinner, global.ng.material.list, global.formiojs, global._, global.ng.cdk.bidi, global.ng.material.formField, global.tsCacheable, global.ng.material.dialog, global.ng.animations, global.ng.material.progressBar, global.Dynamsoft, global.i2$6, global.ng.cdk.layout, global.chart_js, null, null, global.i7$1, global.rxjs['internal/operators/take'], global.SockJS, global.Stomp, global.ng.material.badge, global.ng.material.toolbar, global.ng.material.chips, global.ng.material.expansion, global.WebViewer));
-}(this, (function (exports, i0, i4, i1, i3, localeAr, localeEn, i1$1, reactiveFormValidators, i2, i1$3, i1$2, rxjs, operators, i2$1, moment$4, moment_, i1$4, momentjs, button, i7, i2$3, datepicker, i3$2, i5, i4$1, i2$5, i2$4, i9, i6, core, i3$5, i3$3, i3$1, i1$5, i1$6, i2$2, formiojs, _, i3$4, i6$1, tsCacheable, i1$7, animations, i4$2, Dynamsoft, i2$6, i2$7, chart_js, chartjsPluginPiechartOutlabels, chartjsPluginLabels, i7$1, take, SockJS, Stomp, i9$1, toolbar, i5$1, i6$2, WebViewer) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['nuxeo-development-framework'] = {}, global.ng.core, global.ng.common, global.ng.common.http, global.ng.forms, global.ng.common.locales.ar, global.ng.common.locales.en, global.i1$1, global.reactiveFormValidators, global.i2, global.i1$3, global.i1$2, global.rxjs, global.rxjs.operators, global.ng.platformBrowser, global.moment$4, global.moment_, global.i1$4, global.momentjs, global.ng.material.button, global.ng.material.checkbox, global.ng.material.core, global.ng.material.datepicker, global.ng.material.icon, global.ng.material.input, global.ng.material.menu, global.ng.material.radio, global.ng.material.slideToggle, global.ng.material.tooltip, global.i6, global.core, global.i3$5, global.i3$3, global.i3$1, global.ng.router, global.ng.material.progressSpinner, global.ng.material.list, global.formiojs, global._, global.ng.cdk.bidi, global.ng.material.formField, global.tsCacheable, global.ng.material.dialog, global.ng.animations, global.ng.material.progressBar, global.Dynamsoft, global.i4$3, global.ng.cdk.layout, global.chart_js, null, null, global.i7$1, global.rxjs['internal/operators/take'], global.SockJS, global.Stomp, global.ng.material.badge, global.ng.material.toolbar, global.ng.material.chips, global.ng.material.expansion, global.WebViewer));
+}(this, (function (exports, i0, i4, i1, i3, localeAr, localeEn, i1$1, reactiveFormValidators, i2, i1$3, i1$2, rxjs, operators, i2$1, moment$4, moment_, i1$4, momentjs, button, i7, i2$3, datepicker, i3$2, i5, i4$1, i2$5, i2$4, i10, i6, core, i3$5, i3$3, i3$1, i1$5, i1$6, i2$2, formiojs, _, i3$4, i6$1, tsCacheable, i1$7, animations, i4$2, Dynamsoft, i4$3, i2$6, chart_js, chartjsPluginPiechartOutlabels, chartjsPluginLabels, i7$1, take, SockJS, Stomp, i9, toolbar, i5$1, i6$2, WebViewer) { 'use strict';
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -48,7 +48,7 @@
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i2__namespace$5 = /*#__PURE__*/_interopNamespace(i2$5);
     var i2__namespace$4 = /*#__PURE__*/_interopNamespace(i2$4);
-    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i3__namespace$5 = /*#__PURE__*/_interopNamespace(i3$5);
     var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3$3);
@@ -62,12 +62,12 @@
     var i1__namespace$7 = /*#__PURE__*/_interopNamespace(i1$7);
     var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
     var Dynamsoft__default = /*#__PURE__*/_interopDefaultLegacy(Dynamsoft);
+    var i4__namespace$3 = /*#__PURE__*/_interopNamespace(i4$3);
     var i2__namespace$6 = /*#__PURE__*/_interopNamespace(i2$6);
-    var i2__namespace$7 = /*#__PURE__*/_interopNamespace(i2$7);
     var i7__namespace$1 = /*#__PURE__*/_interopNamespace(i7$1);
     var SockJS__namespace = /*#__PURE__*/_interopNamespace(SockJS);
     var Stomp__namespace = /*#__PURE__*/_interopNamespace(Stomp);
-    var i9__namespace$1 = /*#__PURE__*/_interopNamespace(i9$1);
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
     var WebViewer__default = /*#__PURE__*/_interopDefaultLegacy(WebViewer);
@@ -7840,7 +7840,7 @@
         return TreeviewSelectComponent;
     }());
     TreeviewSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: TreeviewSelectComponent, deps: [{ token: i1__namespace$2.TreeviewI18n }, { token: TranslationService$1 }, { token: DepartmentApiService }, { token: DepartmentManagementService }, { token: RolesService$1 }, { token: NuxeoService$1 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TreeviewSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", 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" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: i1$2.TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: i1$2.DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template\r\n  #itemTemplate\r\n  let-item=\"item\"\r\n  let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\"\r\n>\r\n  <!-- single -->\r\n  <div *ngIf=\"!treeview && !multiple\">\r\n    <div\r\n      class=\"text-nowrap row-item\"\r\n      [ngClass]=\"{ active: item.value === this.value }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapseExpand()\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label>\r\n    </div>\r\n  </div>\r\n  <!-- Multiple -->\r\n  <div *ngIf=\"!treeview && multiple\">\r\n    <div\r\n      class=\"text-nowrap row-item\"\r\n      [ngClass]=\"{ active: item.value === this.value }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapseExpand()\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <!-- <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      <div class=\"multiple-treeview\">\r\n        <mat-checkbox\r\n          [checked]=\"multipleSelection.includes(item.value)\"\r\n          (change)=\"selectMultiple($event.checked, item)\"\r\n        >\r\n          <span> {{ item.text }} </span>\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- treeView -->\r\n  <div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n    <div\r\n      (mouseenter)=\"hoverField.style.display = 'flex'\"\r\n      (mouseleave)=\"hoverField.style.display = 'none'\"\r\n      class=\"text-nowrap row-item treeview-row\"\r\n      [ngClass]=\"{ selected: item.value == selectedItem }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapsed(item)\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <label class=\"form-check-label-treeview\" (click)=\"select(item)\"\r\n        >{{ item.text }}\r\n        <span #hoverField class=\"hoverField\">\r\n          <span\r\n            type=\"button\"\r\n            matTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n            (click)=\"onAction($event, 'update', item)\"\r\n          >\r\n            <li class=\"bi bi-pencil\"></li>\r\n          </span>\r\n\r\n          <span\r\n            type=\"button\"\r\n            matTooltip=\"{{\r\n              'department_management.form.toolTip_message' | translate\r\n            }}\"\r\n            (click)=\"onAction($event, 'add', item)\"\r\n          >\r\n            <li class=\"bi bi-plus\"></li>\r\n          </span>\r\n        </span>\r\n      </label>\r\n    </div>\r\n  </div>\r\n    <!-- treeView as form control -->\r\n    <div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n      <div\r\n        class=\"text-nowrap row-item treeview-row-form-control\"\r\n        [ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n      >\r\n        <i\r\n          *ngIf=\"item.children\"\r\n          (click)=\"onCollapsed(item)\"\r\n          aria-hidden=\"true\"\r\n          [ngSwitch]=\"item.collapsed\"\r\n        >\r\n          <span\r\n            *ngSwitchCase=\"true\"\r\n            class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n          ></span>\r\n  \r\n          <span\r\n            *ngSwitchCase=\"false\"\r\n            class=\"bi bi-caret-down-fill caret-icon\"\r\n          ></span>\r\n        </i>\r\n        <label class=\"form-check-label-treeview\" (click)=\"select(item)\"\r\n          >{{ item.text }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n  #headerTemplate\r\n  let-config=\"config\"\r\n  let-item=\"item\"\r\n  let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\"\r\n  let-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n  <div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n    <div class=\"col-12\">\r\n      <input\r\n        class=\"form-control\"\r\n        type=\"text\"\r\n        [placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n        [(ngModel)]=\"filterText\"\r\n        (ngModelChange)=\"onFilterTextChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n    <div class=\"col-12\">\r\n      <label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n        <strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n      </label>\r\n      <label\r\n        *ngIf=\"config.hasCollapseExpand\"\r\n        class=\"float-right\"\r\n        (click)=\"onCollapseExpand()\"\r\n      >\r\n        <i\r\n          [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\"\r\n          aria-hidden=\"true\"\r\n          [ngSwitch]=\"item.collapsed\"\r\n        >\r\n          <span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n          <span\r\n            *ngSwitchCase=\"false\"\r\n            class=\"bi bi-arrows-angle-contract\"\r\n          ></span>\r\n        </i>\r\n      </label>\r\n    </div>\r\n  </div>\r\n  <a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{'department_management.selectDefault'| translate}}</a>\r\n  <div *ngIf=\"config.hasDivider\" class=\"dropdown-divider\" [ngClass]=\"{'dropdown-divider-noMargin': defaultSelect}\"></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n  <ngx-dropdown-treeview\r\n    [config]=\"config\"\r\n    [headerTemplate]=\"headerTemplate\"\r\n    [items]=\"items\"\r\n    [itemTemplate]=\"itemTemplate\"\r\n  >\r\n  </ngx-dropdown-treeview\r\n></ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n  <div class=\"multiple-tree-view\">\r\n    <ngx-dropdown-treeview\r\n      [config]=\"config\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-dropdown-treeview>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n  <div class=\"tree-view\">\r\n    <ngx-treeview\r\n      [config]=\"config\"\r\n      [headerTemplate]=\"headerTemplate\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-treeview>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n  <div class=\"tree-view-form-control\">\r\n    <ngx-treeview\r\n      [config]=\"config\"\r\n      [headerTemplate]=\"headerTemplate\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-treeview>\r\n  </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}.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}.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: i7__namespace.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$2.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1__namespace$2.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace.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: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    TreeviewSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", 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" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: i1$2.TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: i1$2.DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-template\r\n  #itemTemplate\r\n  let-item=\"item\"\r\n  let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\"\r\n>\r\n  <!-- single -->\r\n  <div *ngIf=\"!treeview && !multiple\">\r\n    <div\r\n      class=\"text-nowrap row-item\"\r\n      [ngClass]=\"{ active: item.value === this.value }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapseExpand()\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label>\r\n    </div>\r\n  </div>\r\n  <!-- Multiple -->\r\n  <div *ngIf=\"!treeview && multiple\">\r\n    <div\r\n      class=\"text-nowrap row-item\"\r\n      [ngClass]=\"{ active: item.value === this.value }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapseExpand()\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <!-- <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      <div class=\"multiple-treeview\">\r\n        <mat-checkbox\r\n          [checked]=\"multipleSelection.includes(item.value)\"\r\n          (change)=\"selectMultiple($event.checked, item)\"\r\n        >\r\n          <span> {{ item.text }} </span>\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- treeView -->\r\n  <div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n    <div\r\n      (mouseenter)=\"hoverField.style.display = 'flex'\"\r\n      (mouseleave)=\"hoverField.style.display = 'none'\"\r\n      class=\"text-nowrap row-item treeview-row\"\r\n      [ngClass]=\"{ selected: item.value == selectedItem }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapsed(item)\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <label class=\"form-check-label-treeview\" (click)=\"select(item)\"\r\n        >{{ item.text }}\r\n        <span #hoverField class=\"hoverField\">\r\n          <span\r\n            type=\"button\"\r\n            matTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n            (click)=\"onAction($event, 'update', item)\"\r\n          >\r\n            <li class=\"bi bi-pencil\"></li>\r\n          </span>\r\n\r\n          <span\r\n            type=\"button\"\r\n            matTooltip=\"{{\r\n              'department_management.form.toolTip_message' | translate\r\n            }}\"\r\n            (click)=\"onAction($event, 'add', item)\"\r\n          >\r\n            <li class=\"bi bi-plus\"></li>\r\n          </span>\r\n        </span>\r\n      </label>\r\n    </div>\r\n  </div>\r\n    <!-- treeView as form control -->\r\n    <div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n      <div\r\n        class=\"text-nowrap row-item treeview-row-form-control\"\r\n        [ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n      >\r\n        <i\r\n          *ngIf=\"item.children\"\r\n          (click)=\"onCollapsed(item)\"\r\n          aria-hidden=\"true\"\r\n          [ngSwitch]=\"item.collapsed\"\r\n        >\r\n          <span\r\n            *ngSwitchCase=\"true\"\r\n            class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n          ></span>\r\n  \r\n          <span\r\n            *ngSwitchCase=\"false\"\r\n            class=\"bi bi-caret-down-fill caret-icon\"\r\n          ></span>\r\n        </i>\r\n        <label class=\"form-check-label-treeview\" (click)=\"select(item)\"\r\n          >{{ item.text }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template\r\n  #headerTemplate\r\n  let-config=\"config\"\r\n  let-item=\"item\"\r\n  let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\"\r\n  let-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n  <div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n    <div class=\"col-12\">\r\n      <input\r\n        class=\"form-control\"\r\n        type=\"text\"\r\n        [placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n        [(ngModel)]=\"filterText\"\r\n        (ngModelChange)=\"onFilterTextChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n    <div class=\"col-12\">\r\n      <label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n        <strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n      </label>\r\n      <label\r\n        *ngIf=\"config.hasCollapseExpand\"\r\n        class=\"float-right\"\r\n        (click)=\"onCollapseExpand()\"\r\n      >\r\n        <i\r\n          [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\"\r\n          aria-hidden=\"true\"\r\n          [ngSwitch]=\"item.collapsed\"\r\n        >\r\n          <span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n          <span\r\n            *ngSwitchCase=\"false\"\r\n            class=\"bi bi-arrows-angle-contract\"\r\n          ></span>\r\n        </i>\r\n      </label>\r\n    </div>\r\n  </div>\r\n  <a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{'department_management.selectDefault'| translate}}</a>\r\n  <div *ngIf=\"config.hasDivider\" class=\"dropdown-divider\" [ngClass]=\"{'dropdown-divider-noMargin': defaultSelect}\"></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n  <ngx-dropdown-treeview\r\n    [config]=\"config\"\r\n    [headerTemplate]=\"headerTemplate\"\r\n    [items]=\"items\"\r\n    [itemTemplate]=\"itemTemplate\"\r\n  >\r\n  </ngx-dropdown-treeview\r\n></ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n  <div class=\"multiple-tree-view\">\r\n    <ngx-dropdown-treeview\r\n      [config]=\"config\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-dropdown-treeview>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n  <div class=\"tree-view\">\r\n    <ngx-treeview\r\n      [config]=\"config\"\r\n      [headerTemplate]=\"headerTemplate\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-treeview>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n  <div class=\"tree-view-form-control\">\r\n    <ngx-treeview\r\n      [config]=\"config\"\r\n      [headerTemplate]=\"headerTemplate\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-treeview>\r\n  </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}.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}.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: i7__namespace.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$2.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1__namespace$2.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace.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: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: TreeviewSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10302,7 +10302,7 @@
             i2$5.MatRadioModule,
             AvatarModule,
             DirectiveModule,
-            i9.MatTooltipModule,
+            i10.MatTooltipModule,
             i1$1.TranslateModule,
             i3$1.AutocompleteLibModule,
             i3$3.FormioModule,
@@ -10353,7 +10353,7 @@
                 i2$5.MatRadioModule,
                 AvatarModule,
                 DirectiveModule,
-                i9.MatTooltipModule,
+                i10.MatTooltipModule,
                 i1$1.TranslateModule,
                 i3$1.AutocompleteLibModule,
                 i3$3.FormioModule,
@@ -10385,7 +10385,7 @@
                             i2$5.MatRadioModule,
                             AvatarModule,
                             DirectiveModule,
-                            i9.MatTooltipModule,
+                            i10.MatTooltipModule,
                             i1$1.TranslateModule,
                             i3$1.AutocompleteLibModule,
                             i3$3.FormioModule,
@@ -14151,8 +14151,11 @@
      *
      */
     var TableComponent = /** @class */ (function () {
-        function TableComponent(nuxeoService) {
+        function TableComponent(nuxeoService, appConfig, translation) {
+            var _this = this;
             this.nuxeoService = nuxeoService;
+            this.appConfig = appConfig;
+            this.translation = translation;
             /** event to emit when selecting single row */
             this.onRowSelected = new i0.EventEmitter();
             /** event to emit when selecting single row to catch index*/
@@ -14171,12 +14174,18 @@
             this.fullWidth = 'auto';
             /** Table Mode: list | card */
             this.tableMode = 'list';
+            this.format = "EEEE, MMMM d, y";
             this.defultSort = null;
             this.highlightSelectedCard = false;
+            this.isArabic = false;
             this.tableWidth = 'auto';
             this.tableColumns = [];
             this.selected = [];
             this.pageNumber = 1;
+            this.format = this.appConfig.myConfiguration['dateFormate'];
+            this.langSubscription = this.translation.isArabic.subscribe(function (res) {
+                _this.isArabic = res;
+            });
         }
         TableComponent.prototype.ngOnInit = function () {
             this.onResize(window.innerWidth);
@@ -14246,8 +14255,8 @@
         };
         return TableComponent;
     }());
-    TableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: TableComponent, deps: [{ token: NuxeoService$1 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", 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", tableMode: "tableMode", tableActions: "tableActions", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting" }, ngImport: i0__namespace, template: "<div [style]=\"'width:' + tableWidth\" *ngIf=\"tableMode === 'list'\">\r\n  <ngx-datatable\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [columnMode]=\"'force'\"\r\n    [externalSorting]=\"true\"\r\n    (activate)=\"rowDetails($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    (sort)=\"onSort($event)\"\r\n    (window:resize)=\"assignTableColumns($event)\"\r\n    [rowHeight]=\"'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n  >\r\n    <!-- | translate -->\r\n    <ng-container *ngFor=\"let column of tableColumns; let i = index\">\r\n      <ngx-datatable-column\r\n        *ngIf=\"column.display\"\r\n        [sortable]=\"column.sortable\"\r\n        [name]=\"prefix + column.name | translate\"\r\n        [prop]=\"column.prop\"\r\n        [resizeable]=\"false\"\r\n        [draggable]=\"false\"\r\n        [maxWidth]=\"column.size\"\r\n        [headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n      >\r\n        <ng-template\r\n          let-row=\"row\"\r\n          let-value=\"value\"\r\n          let-index=\"index\"\r\n          ngx-datatable-cell-template\r\n        >\r\n          <ng-container *ngIf=\"column.type === 'text'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ value ? value : \"--\" }}\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              <cts-dropdown-viewer\r\n                [withOutLabel]=\"true\"\r\n                [value]=\"value\"\r\n                [dropdownId]=\"column.vocabularyId\"\r\n              ></cts-dropdown-viewer>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ (value ? column.vocabularyId + '.' + value : \"--\") | translate }}\r\n            </div>\r\n          </ng-container>\r\n          \r\n          <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ vocItemTranslationPrefix + value | translate }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"column.type === 'department'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              <cts-department-viewer\r\n                [noStyle]=\"true\"\r\n                [value]=\"value\"\r\n              >\r\n              </cts-department-viewer>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'status'\">\r\n            <div class=\"status-wrapper\">\r\n              <span class=\"value {{ value }}\">{{\r\n                \"STATS.\" + value | translate\r\n              }}</span>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'role'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ \"role.\" + (value ? value : \"--\") | translate }}\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'direction'\">\r\n            <div\r\n              (click)=\"iconSelected($event, row)\"\r\n              class=\"status-wrapper {{ value }} {{ row.state }}\"\r\n            >\r\n              <span matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n                <i\r\n                  class=\"bi bi-box-arrow-down\"\r\n                  *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                ></i>\r\n                <i\r\n                  class=\"bi bi-box-arrow-up outgoing\"\r\n                  *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                ></i>\r\n                <i\r\n                  class=\"bi bi-box-arrow-right internal\"\r\n                  *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                ></i>\r\n              </span>\r\n              <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n            <div class=\"actions-wrapper\">\r\n              <!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n              <i\r\n                class=\"bi bi-pencil-square edit-icon\"\r\n                matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n                (click)=\"performAction(row, 'edit')\"\r\n                *ngIf=\"entityType === 'voc-table'\"\r\n              ></i>\r\n              <i\r\n                class=\"bi bi-trash\"\r\n                matTooltip=\"{{ 'delete' | translate }}\"\r\n                (click)=\"performAction(row, 'delete')\"\r\n                *ngIf=\"\r\n                  entityType === 'voc-table' || entityType === 'department' ||\r\n                  entityType === 'signers'\r\n                \"\r\n              ></i>\r\n\r\n              <i\r\n              class=\"bi bi-plus-square\"\r\n              matTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n              (click)=\"performAction(row, 'delete')\"\r\n              *ngIf=\"entityType === 'users' && row.isInitial\"\r\n            ></i>\r\n            \r\n              <span *ngFor=\"let action of column.actions\">\r\n                <i\r\n                  *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n                  class=\"{{ action.icon }}\"\r\n                  matTooltip=\"{{ action.tooltip | translate }}\"\r\n                  (click)=\"performAction(row, action.actionName)\"\r\n                ></i>\r\n              </span>\r\n\r\n              <!-- <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            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'date'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              <cts-date-viewer\r\n                [withOutLabel]=\"true\"\r\n                [value]=\"value\"\r\n              ></cts-date-viewer>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"column.type === 'custom'\">\r\n            <cts-dynamic-column\r\n            [id]=\"column.template\"\r\n            [column]=\"column\"\r\n            [context]=\"row\"\r\n          >\r\n          </cts-dynamic-column>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'card'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n      <div class=\"memo-title\">\r\n        <span>\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n          <button\r\n            *permission=\"{ name: 'deleteMemo', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n            (click)=\"performAction(row, 'deleteMemo')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <button\r\n          *permission=\"{ name: 'terminateDelegation', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          (click)=\"performAction(row, 'terminateDelegation')\"\r\n        >\r\n          <i\r\n            class=\"bi bi-trash\"\r\n            matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"\r\n          ></i>\r\n        </button>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{ name: 'memoPublished', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          >\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationFinished', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          >\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"memo-body\"\r\n        *ngFor=\"let property of columns\"\r\n        (click)=\"cardSelected(row);cardFocused(i)\"\r\n      >\r\n        <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n        <div class=\"value\">\r\n          <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n            {{ row.properties[property.value] }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n            {{ row.properties[property.value].fullName }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n            {{ row.properties[property.value] | localizedDate: \"MMMM d, y\" }}\r\n            <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n            {{ row.properties[property.value] ? 'Yes':'No' | translate }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'dynamicCard'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" [ngClass]=\"{'selected-card': highlightSelectedCard && row?.isSelected}\" *ngFor=\"let row of rows\">\r\n      <div *ngIf=\"columns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of columns\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n              {{ row.properties[property.value] | localizedDate: \"MMMM d, y\" }}\r\n              <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"iner-card-container\" (click)=\"cardSelected(row)\" *ngIf=\"columns.length === 1\">\r\n        <cts-dynamic-column\r\n        [id]=\"columns[0].template\"\r\n        [column]=\"columns[0]\"\r\n        [context]=\"row\"\r\n      >\r\n      </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", 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}.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}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;width:100%!important;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{width:100%!important;height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{width:100%!important;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-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-scroll{width:100%!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper{height:50px;font-size:14px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row{width:100%!important;height:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center{width:100%!important;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{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{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 .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 .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 .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{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{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{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{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{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{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{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{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{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.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{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{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{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{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .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{color:#2e62df!important;font-size:26px}.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}\n"], components: [{ type: i2__namespace$6.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: 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: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$6.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: i2__namespace$6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i9__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1__namespace$1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    TableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: TableComponent, deps: [{ token: NuxeoService$1 }, { token: AppConfigService }, { token: TranslationService$1 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", 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", tableMode: "tableMode", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting" }, ngImport: i0__namespace, template: "<div [style]=\"'width:' + tableWidth\" *ngIf=\"tableMode === 'list'\">\r\n  <ngx-datatable\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [columnMode]=\"'force'\"\r\n    [externalSorting]=\"true\"\r\n    (activate)=\"rowDetails($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    (sort)=\"onSort($event)\"\r\n    (window:resize)=\"assignTableColumns($event)\"\r\n    [rowHeight]=\"'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n  >\r\n    <!-- | translate -->\r\n    <ng-container *ngFor=\"let column of tableColumns; let i = index\">\r\n      <ngx-datatable-column\r\n        *ngIf=\"column.display\"\r\n        [sortable]=\"column.sortable\"\r\n        [name]=\"prefix + column.name | translate\"\r\n        [prop]=\"column.prop\"\r\n        [resizeable]=\"false\"\r\n        [draggable]=\"false\"\r\n        [maxWidth]=\"column.size\"\r\n        [headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n      >\r\n        <ng-template\r\n          let-row=\"row\"\r\n          let-value=\"value\"\r\n          let-index=\"index\"\r\n          ngx-datatable-cell-template\r\n        >\r\n          <ng-container *ngIf=\"column.type === 'text'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ value ? value : \"--\" }}\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              <cts-dropdown-viewer\r\n                [withOutLabel]=\"true\"\r\n                [value]=\"value\"\r\n                [dropdownId]=\"column.vocabularyId\"\r\n              ></cts-dropdown-viewer>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ (value ? column.vocabularyId + '.' + value : \"--\") | translate }}\r\n            </div>\r\n          </ng-container>\r\n          \r\n          <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ vocItemTranslationPrefix + value | translate }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"column.type === 'department'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              <cts-department-viewer\r\n                [noStyle]=\"true\"\r\n                [value]=\"value\"\r\n              >\r\n              </cts-department-viewer>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'status'\">\r\n            <div class=\"status-wrapper\">\r\n              <span class=\"value {{ value }}\">{{\r\n                \"STATS.\" + value | translate\r\n              }}</span>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'role'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              {{ \"role.\" + (value ? value : \"--\") | translate }}\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'direction'\">\r\n            <div\r\n              (click)=\"iconSelected($event, row)\"\r\n              class=\"status-wrapper {{ value }} {{ row.state }}\"\r\n            >\r\n              <span matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n                <i\r\n                  class=\"bi bi-box-arrow-down\"\r\n                  *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                ></i>\r\n                <i\r\n                  class=\"bi bi-box-arrow-up outgoing\"\r\n                  *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                ></i>\r\n                <i\r\n                  class=\"bi bi-box-arrow-right internal\"\r\n                  *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                ></i>\r\n              </span>\r\n              <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n            <div class=\"actions-wrapper\">\r\n              <!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n              <i\r\n                class=\"bi bi-pencil-square edit-icon\"\r\n                matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n                (click)=\"performAction(row, 'edit')\"\r\n                *ngIf=\"entityType === 'voc-table'\"\r\n              ></i>\r\n              <i\r\n                class=\"bi bi-trash\"\r\n                matTooltip=\"{{ 'delete' | translate }}\"\r\n                (click)=\"performAction(row, 'delete')\"\r\n                *ngIf=\"\r\n                  entityType === 'voc-table' || entityType === 'department' ||\r\n                  entityType === 'signers'\r\n                \"\r\n              ></i>\r\n\r\n              <i\r\n              class=\"bi bi-plus-square\"\r\n              matTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n              (click)=\"performAction(row, 'delete')\"\r\n              *ngIf=\"entityType === 'users' && row.isInitial\"\r\n            ></i>\r\n            \r\n              <span *ngFor=\"let action of column.actions\">\r\n                <i\r\n                  *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n                  class=\"{{ action.icon }}\"\r\n                  matTooltip=\"{{ action.tooltip | translate }}\"\r\n                  (click)=\"performAction(row, action.actionName)\"\r\n                ></i>\r\n              </span>\r\n\r\n              <!-- <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            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'date'\">\r\n            <div class=\"cell-text-wrapper\">\r\n              <cts-date-viewer\r\n                [withOutLabel]=\"true\"\r\n                [value]=\"value\"\r\n              ></cts-date-viewer>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"column.type === 'custom'\">\r\n            <cts-dynamic-column\r\n            [id]=\"column.template\"\r\n            [column]=\"column\"\r\n            [context]=\"row\"\r\n          >\r\n          </cts-dynamic-column>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'card'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n      <div class=\"memo-title\">\r\n        <span>\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i\r\n              *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n              class=\"{{ action.icon }}\"\r\n              matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"\r\n            ></i>\r\n          </span>\r\n          <button\r\n            *permission=\"{ name: 'deleteMemo', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n            (click)=\"performAction(row, 'deleteMemo')\"\r\n          >\r\n            <i\r\n              class=\"bi bi-trash\"\r\n              matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"\r\n            ></i>\r\n          </button>\r\n          <button\r\n          *permission=\"{ name: 'terminateDelegation', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          (click)=\"performAction(row, 'terminateDelegation')\"\r\n        >\r\n          <i\r\n            class=\"bi bi-trash\"\r\n            matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"\r\n          ></i>\r\n        </button>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{ name: 'memoPublished', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          >\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationFinished', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          >\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n          <span\r\n            class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationActive', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n          >\r\n            {{ \"delegations.active\" | translate }}\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"memo-body\"\r\n        *ngFor=\"let property of columns\"\r\n        (click)=\"cardSelected(row);cardFocused(i)\"\r\n      >\r\n        <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n        <div class=\"value\">\r\n          <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n            {{ row.properties[property.value] }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n            {{ row.properties[property.value].fullName }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n            {{row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}\r\n            <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n            {{ (row.properties[property.value] ? 'Yes':'No') | translate }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'dynamicCard'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" [ngClass]=\"{'selected-card': highlightSelectedCard && row?.isSelected}\" *ngFor=\"let row of rows\">\r\n      <div *ngIf=\"columns.length > 1\">\r\n        <div\r\n          class=\"memo-body\"\r\n          *ngFor=\"let property of columns\"\r\n          (click)=\"cardSelected(row)\"\r\n        >\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n              {{ row.properties[property.value] | localizedDate: \"MMMM d, y\" }}\r\n              <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"iner-card-container\" (click)=\"cardSelected(row)\" *ngIf=\"columns.length === 1\">\r\n        <cts-dynamic-column\r\n        [id]=\"columns[0].template\"\r\n        [column]=\"columns[0]\"\r\n        [context]=\"row\"\r\n      >\r\n      </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", 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}.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}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;width:100%!important;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{width:100%!important;height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{width:100%!important;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-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-scroll{width:100%!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper{height:50px;font-size:14px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row{width:100%!important;height:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center{width:100%!important;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{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{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 .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 .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 .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{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{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{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{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{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{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{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{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{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.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{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{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{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{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .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{color:#2e62df!important;font-size:26px}.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}\n"], components: [{ type: i4__namespace$3.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: 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: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace$3.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$3.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1__namespace$1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: TableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -14256,7 +14265,7 @@
                         styleUrls: ['./table.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                     }]
-            }], ctorParameters: function () { return [{ type: NuxeoService$1 }]; }, propDecorators: { onRowSelected: [{
+            }], ctorParameters: function () { return [{ type: NuxeoService$1 }, { type: AppConfigService }, { type: TranslationService$1 }]; }, propDecorators: { onRowSelected: [{
                     type: i0.Output
                 }], onRowIndexSelected: [{
                     type: i0.Output
@@ -14290,6 +14299,8 @@
                     type: i0.Input
                 }], tableActions: [{
                     type: i0.Input
+                }], format: [{
+                    type: i0.Input
                 }], defultSort: [{
                     type: i0.Input
                 }], highlightSelectedCard: [{
@@ -14307,43 +14318,43 @@
     }());
     TableModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: TableModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     TableModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: TableModule, declarations: [TableComponent, DynamicColumnComponent], imports: [i4.CommonModule,
-            i2$6.NgxDatatableModule,
+            i4$3.NgxDatatableModule,
             PipesModule,
             i1$1.TranslateModule,
-            i9.MatTooltipModule,
+            i10.MatTooltipModule,
             DirectiveModule,
             DynamicViewModule,
-            i9.MatTooltipModule], exports: [TableComponent,
+            i10.MatTooltipModule], exports: [TableComponent,
             DynamicColumnComponent,
-            i2$6.NgxDatatableModule] });
+            i4$3.NgxDatatableModule] });
     TableModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: TableModule, imports: [[
                 i4.CommonModule,
-                i2$6.NgxDatatableModule,
+                i4$3.NgxDatatableModule,
                 PipesModule,
                 i1$1.TranslateModule,
-                i9.MatTooltipModule,
+                i10.MatTooltipModule,
                 DirectiveModule,
                 DynamicViewModule,
-                i9.MatTooltipModule
-            ], i2$6.NgxDatatableModule] });
+                i10.MatTooltipModule
+            ], i4$3.NgxDatatableModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: TableModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [TableComponent, DynamicColumnComponent],
                         imports: [
                             i4.CommonModule,
-                            i2$6.NgxDatatableModule,
+                            i4$3.NgxDatatableModule,
                             PipesModule,
                             i1$1.TranslateModule,
-                            i9.MatTooltipModule,
+                            i10.MatTooltipModule,
                             DirectiveModule,
                             DynamicViewModule,
-                            i9.MatTooltipModule
+                            i10.MatTooltipModule
                         ],
                         exports: [
                             TableComponent,
                             DynamicColumnComponent,
-                            i2$6.NgxDatatableModule
+                            i4$3.NgxDatatableModule
                         ]
                     }]
             }] });
@@ -14661,7 +14672,7 @@
         return DynamicTableComponent;
     }());
     DynamicTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicTableComponent, deps: [{ token: AdapterService }, { token: CallApiService }, { token: DynamicTableService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DynamicTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", sortingBy: "sortingBy", queryParam: "queryParam", quickFilter: "quickFilter", report: "report", rowCursor: "rowCursor", fullWidth: "fullWidth", tableMode: "tableMode", tableActions: "tableActions", defultSort: "defultSort", range: "range", isSearchPage: "isSearchPage", highlightSelectedCard: "highlightSelectedCard" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"wrapping\">\r\n  <div class=\"table-reposition\">\r\n    <cts-table\r\n      *ngIf=\"rows.length\"\r\n      [rows]=\"rows\"\r\n      [columns]=\"columns\"\r\n      [responsiveColumns]=\"responsiveColumns\"\r\n      [rowCursor]=\"rowCursor\"\r\n      [fullWidth]=\"fullWidth\"\r\n      [entityType]=\"entityType\"\r\n      [prefix]=\"prefix\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [tableMode]=\"tableMode\"\r\n      [tableActions]=\"tableActions\"\r\n      [defultSort]=\"defultSort\"\r\n      [highlightSelectedCard]=\"highlightSelectedCard\"\r\n      (onRowSelected)=\"rowDetails($event)\"\r\n      (onRowIndexSelected)=\"indexDetails($event)\"\r\n      (actionOnRow)=\"performAction($event)\"\r\n      (onSorting)=\"onSort($event)\"\r\n    ></cts-table>\r\n  </div>\r\n  <ng-container *ngIf=\"loading\">\r\n    <cts-spinner></cts-spinner>\r\n  </ng-container>\r\n  <div\r\n    class=\"d-flex justify-content-center align-items-center my-3\"\r\n    *ngIf=\"rows.length\"\r\n  >\r\n    <cts-pagination\r\n      [page]=\"pageNum\"\r\n      (change)=\"PaginationChange($event)\"\r\n      [size]=\"pageSize\"\r\n      [count]=\"totalRecords\"\r\n    ></cts-pagination>\r\n  </div>\r\n\r\n  <div class=\"empty-state\" *ngIf=\"rows.length === 0\">\r\n    <div class=\"text\">{{ 'noData' | translate}}</div>\r\n  </div>\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}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:auto}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:bold}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}\n"], components: [{ type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "tableActions", "defultSort", "highlightSelectedCard"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting"] }, { type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    DynamicTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", sortingBy: "sortingBy", queryParam: "queryParam", quickFilter: "quickFilter", report: "report", rowCursor: "rowCursor", fullWidth: "fullWidth", tableMode: "tableMode", tableActions: "tableActions", defultSort: "defultSort", range: "range", isSearchPage: "isSearchPage", highlightSelectedCard: "highlightSelectedCard" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"wrapping\">\r\n  <div class=\"table-reposition\">\r\n    <cts-table\r\n      *ngIf=\"rows.length\"\r\n      [rows]=\"rows\"\r\n      [columns]=\"columns\"\r\n      [responsiveColumns]=\"responsiveColumns\"\r\n      [rowCursor]=\"rowCursor\"\r\n      [fullWidth]=\"fullWidth\"\r\n      [entityType]=\"entityType\"\r\n      [prefix]=\"prefix\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [tableMode]=\"tableMode\"\r\n      [tableActions]=\"tableActions\"\r\n      [defultSort]=\"defultSort\"\r\n      [highlightSelectedCard]=\"highlightSelectedCard\"\r\n      (onRowSelected)=\"rowDetails($event)\"\r\n      (onRowIndexSelected)=\"indexDetails($event)\"\r\n      (actionOnRow)=\"performAction($event)\"\r\n      (onSorting)=\"onSort($event)\"\r\n    ></cts-table>\r\n  </div>\r\n  <ng-container *ngIf=\"loading\">\r\n    <cts-spinner></cts-spinner>\r\n  </ng-container>\r\n  <div\r\n    class=\"d-flex justify-content-center align-items-center my-3\"\r\n    *ngIf=\"rows.length\"\r\n  >\r\n    <cts-pagination\r\n      [page]=\"pageNum\"\r\n      (change)=\"PaginationChange($event)\"\r\n      [size]=\"pageSize\"\r\n      [count]=\"totalRecords\"\r\n    ></cts-pagination>\r\n  </div>\r\n\r\n  <div class=\"empty-state\" *ngIf=\"rows.length === 0\">\r\n    <div class=\"text\">{{ 'noData' | translate}}</div>\r\n  </div>\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}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:auto}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:bold}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}\n"], components: [{ type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "tableActions", "format", "defultSort", "highlightSelectedCard"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting"] }, { type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -14897,7 +14908,7 @@
         };
         return DynamicSearchComponent;
     }());
-    DynamicSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicSearchComponent, deps: [{ token: i1__namespace$5.ActivatedRoute }, { token: i1__namespace$5.Router }, { token: i2__namespace$7.BreakpointObserver }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicSearchComponent, deps: [{ token: i1__namespace$5.ActivatedRoute }, { token: i1__namespace$5.Router }, { token: i2__namespace$6.BreakpointObserver }], target: i0__namespace.ɵɵFactoryTarget.Component });
     DynamicSearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DynamicSearchComponent, selector: "cts-dynamic-search", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", sortingBy: "sortingBy", fullTextParamName: "fullTextParamName", filter: "filter", onRowSelected: "onRowSelected", sortingArray: "sortingArray" }, outputs: { actionOnRow: "actionOnRow" }, ngImport: i0__namespace, template: "<div class=\"search-toolbar d-md-flex d-xl-none mx-3\">\r\n  <button (click)=\"onOpenFilter()\" class=\"my-button\">\r\n    <span> {{ \"FILTER\" | translate }}</span>\r\n    <i class=\"bi bi-filter\" *ngIf=\"!openFilter\"></i>\r\n    <i class=\"bi bi-x\" *ngIf=\"openFilter\"></i>\r\n  </button>\r\n  <div *ngIf=\"openFilter\">\r\n    <i class=\"bi bi-caret-up-fill arrow-up\"></i>\r\n  </div>\r\n</div>\r\n<div class=\"row wrapper\">\r\n  <div class=\"popup-filter px-3 d-flex d-xl-none\" *ngIf=\"openFilter\">\r\n    <form\r\n      [formGroup]=\"searchForm\"\r\n      class=\"search-form\"\r\n      (ngSubmit)=\"submitForm()\"\r\n    >\r\n      <input\r\n        class=\"search-input\"\r\n        type=\"text\"\r\n        formControlName=\"text\"\r\n        [placeholder]=\"'search.search' | translate\"\r\n      />\r\n      <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n    </form>\r\n    <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n      <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n      <div *ngFor=\"let aggregation of aggregations\">\r\n        <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n          <cts-dynamic-filter\r\n            [entityType]=\"entityType\"\r\n            [filters]=\"aggregation.buckets\"\r\n            [id]=\"aggregation.id\"\r\n            [selections]=\"aggregation.selection\"\r\n            [title]=\"aggregation.field\"\r\n            [prefix]=\"'search'\"\r\n            [department]=\"\r\n              aggregation.field === 'corr:to' ||\r\n              aggregation.field === 'corr:from'\r\n            \"\r\n            [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n            [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n            [config]=\"aggregation.config ? aggregation.config : {}\"\r\n            (onFilterSelected)=\"FilterSelected($event)\"\r\n          ></cts-dynamic-filter>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n  <div class=\"col-xl-3 search-sideMenu d-none d-xl-block\">\r\n    <form\r\n      [formGroup]=\"searchForm\"\r\n      class=\"search-form\"\r\n      (ngSubmit)=\"submitForm()\"\r\n    >\r\n      <input\r\n        class=\"search-input\"\r\n        type=\"text\"\r\n        formControlName=\"text\"\r\n        [placeholder]=\"'search.search' | translate\"\r\n      />\r\n      <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n    </form>\r\n    <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n      <div *ngFor=\"let aggregation of aggregations\">\r\n        <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n          <cts-dynamic-filter\r\n            [entityType]=\"entityType\"\r\n            [filters]=\"aggregation.buckets\"\r\n            [id]=\"aggregation.id\"\r\n            [selections]=\"aggregation.selection\"\r\n            [title]=\"aggregation.field\"\r\n            [prefix]=\"'search'\"\r\n            [department]=\"\r\n              aggregation.field === 'corr:to' ||\r\n              aggregation.field === 'corr:from'\r\n            \"\r\n            [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n            [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n            [config]=\"aggregation.config ? aggregation.config : {}\"\r\n            (onFilterSelected)=\"FilterSelected($event)\"\r\n          ></cts-dynamic-filter>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"col-12 col-xl-9\">\r\n    <app-card>\r\n      <div class=\"title\">\r\n        <h3>\r\n          {{ \"search.header\" | translate }}\r\n        </h3>\r\n      </div>\r\n      <div class=\"body\">\r\n        <div *ngIf=\"aggregations\" class=\"table-toolbar\">\r\n          <div class=\"result-count\">\r\n            <span>\r\n              {{\r\n                \"search.\" + \"resultsNumber\"\r\n                  | translate: { value: totalRecords ? totalRecords : 0 }\r\n              }}\r\n            </span>\r\n          </div>\r\n          <!-- <form\r\n          [formGroup]=\"searchForm\"\r\n          class=\"search-form\"\r\n          (ngSubmit)=\"submitForm()\"\r\n        >\r\n          <input\r\n            class=\"search-input\"\r\n            type=\"text\"\r\n            formControlName=\"text\"\r\n            [placeholder]=\"'search.search' | translate\"\r\n          />\r\n          <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n        </form> -->\r\n        </div>\r\n        <cts-dynamic-table\r\n          [pageSize]=\"pageSize\"\r\n          [columns]=\"columns\"\r\n          [responsiveColumns]=\"responsiveColumns\"\r\n          [pageProvider]=\"pageProvider\"\r\n          [quickFilter]=\"filter\"\r\n          [entityType]=\"entityType\"\r\n          [fields]=\"fields\"\r\n          [queryParam]=\"queryParams\"\r\n          [headers]=\"headers\"\r\n          [prefix]=\"prefix\"\r\n          [sortingBy]=\"sortingBy\"\r\n          [isSearchPage]=\"true\"\r\n          (onRowSelected)=\"onRowSelected($event)\"\r\n          (actionOnRow)=\"performAction($event)\"\r\n          (onGettingData)=\"getTableData($event)\"\r\n        ></cts-dynamic-table>\r\n      </div>\r\n    </app-card>\r\n  </div>\r\n\r\n  <ng-template #progressSpinner>\r\n    <div class=\"progress-spinner\">\r\n      <mat-spinner color=\"warn\" [diameter]=\"25\"></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #noAggregations>\r\n    <div class=\"progress-spinner\">\r\n      {{ \"search.noAggregations\" | translate }}\r\n    </div>\r\n  </ng-template>\r\n</div>\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}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.result-count{color:#8f98aa;font-size:14px}.search-sideMenu{background-color:#fff;padding-top:22px;padding-bottom:22px;border-radius:5px}.search-sideMenu .search-form{display:flex;color:#6a768e;width:100%}.search-sideMenu .search-form .search-input{width:100%;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.search-sideMenu .search-form .search-input::-webkit-input-placeholder{font-size:14px}.search-sideMenu .search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.search-sideMenu .search-form .search-icon{background:#465573;color:#fff;width:12%;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}.search-toolbar{position:relative;display:flex;justify-content:flex-end;margin-bottom:16px}.search-toolbar .my-button{width:90px}.search-toolbar .arrow-up{position:absolute;top:26px;right:28px;font-size:25px;color:#8f98aab3}.wrapper{position:relative}.wrapper .popup-filter{flex-direction:column;position:absolute;right:0;z-index:9999;max-height:70vh;max-width:400px;background-color:#fff;overflow:scroll;box-shadow:0 1px 10px 2px #00000054;top:-4px;border-radius:5px}.wrapper .popup-filter .search-form{margin-top:10px!important}.wrapper .popup-filter .search-input{width:100%!important}.wrapper .search-container{background-color:#fff;border-radius:5px;border:0px;padding:16px;height:-webkit-max-content;height:max-content}.wrapper .search-container .table-toolbar{display:flex;align-items:center;margin-bottom:8px;justify-content:space-between}.progress-spinner{margin-top:10px;margin-block-end:0;display:grid;place-items:center;width:100%}.rtl .popup-filter{left:0px;right:unset!important}.rtl .arrow-up{position:absolute;top:33px;left:28px;right:unset!important}\n"], components: [{ type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: ["title", "filters", "selections", "id", "entityType", "prefix", "department", "componentType", "customPageProvider", "config"], outputs: ["onFilterSelected"] }, { type: CardComponent, selector: "app-card", inputs: ["noBody", "dark"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "sortingBy", "queryParam", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "tableActions", "defultSort", "range", "isSearchPage", "highlightSelectedCard"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData"] }, { type: i1__namespace$6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace.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: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicSearchComponent, decorators: [{
                 type: i0.Component,
@@ -14907,7 +14918,7 @@
                         styleUrls: ['./dynamic-search.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$5.ActivatedRoute }, { type: i1__namespace$5.Router }, { type: i2__namespace$7.BreakpointObserver }]; }, propDecorators: { columns: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$5.ActivatedRoute }, { type: i1__namespace$5.Router }, { type: i2__namespace$6.BreakpointObserver }]; }, propDecorators: { columns: [{
                     type: i0.Input
                 }], responsiveColumns: [{
                     type: i0.Input
@@ -16337,9 +16348,9 @@
     }());
     DynamicChartModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     DynamicChartModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartModule, declarations: [DynamicChartComponent,
-            DynamicSingleChartComponent], imports: [i4.CommonModule, i1$1.TranslateModule, LibrarySharedModule, i9.MatTooltipModule], exports: [DynamicChartComponent,
+            DynamicSingleChartComponent], imports: [i4.CommonModule, i1$1.TranslateModule, LibrarySharedModule, i10.MatTooltipModule], exports: [DynamicChartComponent,
             DynamicSingleChartComponent] });
-    DynamicChartModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartModule, imports: [[i4.CommonModule, i1$1.TranslateModule, LibrarySharedModule, i9.MatTooltipModule]] });
+    DynamicChartModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartModule, imports: [[i4.CommonModule, i1$1.TranslateModule, LibrarySharedModule, i10.MatTooltipModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -16347,7 +16358,7 @@
                             DynamicChartComponent,
                             DynamicSingleChartComponent
                         ],
-                        imports: [i4.CommonModule, i1$1.TranslateModule, LibrarySharedModule, i9.MatTooltipModule],
+                        imports: [i4.CommonModule, i1$1.TranslateModule, LibrarySharedModule, i10.MatTooltipModule],
                         exports: [
                             DynamicChartComponent,
                             DynamicSingleChartComponent
@@ -16377,7 +16388,7 @@
         return UsersCardComponent;
     }());
     UsersCardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: UsersCardComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    UsersCardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", 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}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__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$1.TranslatePipe } });
+    UsersCardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", 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}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__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$1.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: UsersCardComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -16401,13 +16412,13 @@
         return UsersCardModule;
     }());
     UsersCardModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: UsersCardModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    UsersCardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: UsersCardModule, declarations: [UsersCardComponent], imports: [i4.CommonModule, i1$1.TranslateModule, i9.MatTooltipModule, CardModule, AvatarModule, i1$5.RouterModule], exports: [UsersCardComponent, i1$5.RouterModule] });
-    UsersCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: UsersCardModule, providers: [], imports: [[i4.CommonModule, i1$1.TranslateModule, i9.MatTooltipModule, CardModule, AvatarModule, i1$5.RouterModule], i1$5.RouterModule] });
+    UsersCardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: UsersCardModule, declarations: [UsersCardComponent], imports: [i4.CommonModule, i1$1.TranslateModule, i10.MatTooltipModule, CardModule, AvatarModule, i1$5.RouterModule], exports: [UsersCardComponent, i1$5.RouterModule] });
+    UsersCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: UsersCardModule, providers: [], imports: [[i4.CommonModule, i1$1.TranslateModule, i10.MatTooltipModule, CardModule, AvatarModule, i1$5.RouterModule], i1$5.RouterModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: UsersCardModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [UsersCardComponent],
-                        imports: [i4.CommonModule, i1$1.TranslateModule, i9.MatTooltipModule, CardModule, AvatarModule, i1$5.RouterModule],
+                        imports: [i4.CommonModule, i1$1.TranslateModule, i10.MatTooltipModule, CardModule, AvatarModule, i1$5.RouterModule],
                         exports: [UsersCardComponent, i1$5.RouterModule],
                         providers: [],
                     }]
@@ -17239,7 +17250,7 @@
         return NotificationsButtonComponent;
     }());
     NotificationsButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: NotificationsButtonComponent, deps: [{ token: NotificationsService }, { token: i1__namespace$1.TranslateService }, { token: i1__namespace$3.ToastrService }, { token: TimeAgoPipe }, { token: i1__namespace$5.Router }, { token: i0__namespace.ChangeDetectorRef }, { token: TranslationService$1 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NotificationsButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: NotificationsButtonComponent, selector: "app-notifications-button", outputs: { toastrClick: "toastrClick", listItemClick: "listItemClick" }, ngImport: i0__namespace, template: "<div [matMenuTriggerFor]=\"langMenu\" class=\"notification\" (click)=\"getNotifications()\" class=\"search-wrapper\">\r\n  <span matBadgeSize=\"small\" matBadge=\"{{ notificationsCount }}\" matBadgeColor=\"warn\" matbadgeposition=\"before\"\r\n    class=\"bi bi-bell bell\"></span>\r\n</div>\r\n<mat-menu class=\"mat-menu-panel myMenu notification-list\" #langMenu=\"matMenu\">\r\n  <app-notifications-list (listItemClick)=\"onListItemClick($event)\"></app-notifications-list>\r\n</mat-menu>\r\n", styles: [".notifications-count{background-color:#eee;border-radius:5px;color:#333;font-size:11px;padding:0 6px;box-sizing:border-box}.notification-list{max-width:450px!important;width:450px;height:66vh}.notification-list .mat-menu-content{padding:0!important;position:relative;height:calc(100% - 29px)}.notification-list .mat-menu-content .mat-toolbar{margin:0 0 -10px}.mat-menu-panel.myMenu{border-radius:5px!important;overflow:hidden}.notification .mat-icon{margin-right:0!important;vertical-align:middle}.toast-container{right:12px!important;bottom:12px!important;pointer-events:all}.toast-container .ngx-toastr{padding:25px!important;background-position:263px center;border-radius:5px!important;box-shadow:none!important}.toast-container .toast-title{font-weight:normal}.wrap{white-space:normal!important;font-size:14px!important;margin-bottom:8px!important}.mat-menu-content:not(:empty){padding-top:0;padding-bottom:0}[dir=rtl] .toast-container{left:12px!important;right:auto!important;direction:rtl;text-align:right}[dir=rtl] .toast-container .ngx-toastr{background-position:10px center}[dir=rtl] .toast-container .toast-close-button{float:left}.mat-badge-content{right:-4px!important;top:-1px!important}.rtl .mat-badge-content{font-weight:600;right:-6px!important;top:-5px!important}\n"], components: [{ type: i4__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationsListComponent, selector: "app-notifications-list", outputs: ["listItemClick"] }], directives: [{ type: i4__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: i9__namespace$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    NotificationsButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: NotificationsButtonComponent, selector: "app-notifications-button", outputs: { toastrClick: "toastrClick", listItemClick: "listItemClick" }, ngImport: i0__namespace, template: "<div [matMenuTriggerFor]=\"langMenu\" class=\"notification\" (click)=\"getNotifications()\" class=\"search-wrapper\">\r\n  <span matBadgeSize=\"small\" matBadge=\"{{ notificationsCount }}\" matBadgeColor=\"warn\" matbadgeposition=\"before\"\r\n    class=\"bi bi-bell bell\"></span>\r\n</div>\r\n<mat-menu class=\"mat-menu-panel myMenu notification-list\" #langMenu=\"matMenu\">\r\n  <app-notifications-list (listItemClick)=\"onListItemClick($event)\"></app-notifications-list>\r\n</mat-menu>\r\n", styles: [".notifications-count{background-color:#eee;border-radius:5px;color:#333;font-size:11px;padding:0 6px;box-sizing:border-box}.notification-list{max-width:450px!important;width:450px;height:66vh}.notification-list .mat-menu-content{padding:0!important;position:relative;height:calc(100% - 29px)}.notification-list .mat-menu-content .mat-toolbar{margin:0 0 -10px}.mat-menu-panel.myMenu{border-radius:5px!important;overflow:hidden}.notification .mat-icon{margin-right:0!important;vertical-align:middle}.toast-container{right:12px!important;bottom:12px!important;pointer-events:all}.toast-container .ngx-toastr{padding:25px!important;background-position:263px center;border-radius:5px!important;box-shadow:none!important}.toast-container .toast-title{font-weight:normal}.wrap{white-space:normal!important;font-size:14px!important;margin-bottom:8px!important}.mat-menu-content:not(:empty){padding-top:0;padding-bottom:0}[dir=rtl] .toast-container{left:12px!important;right:auto!important;direction:rtl;text-align:right}[dir=rtl] .toast-container .ngx-toastr{background-position:10px center}[dir=rtl] .toast-container .toast-close-button{float:left}.mat-badge-content{right:-4px!important;top:-1px!important}.rtl .mat-badge-content{font-weight:600;right:-6px!important;top:-5px!important}\n"], components: [{ type: i4__namespace$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationsListComponent, selector: "app-notifications-list", outputs: ["listItemClick"] }], directives: [{ type: i4__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: i9__namespace.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: NotificationsButtonComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -17274,9 +17285,9 @@
             i3$2.MatIconModule,
             i1$1.TranslateModule,
             i1$6.MatProgressSpinnerModule,
-            i9.MatTooltipModule,
+            i10.MatTooltipModule,
             i7$1.InfiniteScrollModule,
-            i9$1.MatBadgeModule,
+            i9.MatBadgeModule,
             i1$1.TranslateModule,
             toolbar.MatToolbarModule], exports: [NotificationsListComponent,
             NotificationsButtonComponent,
@@ -17295,9 +17306,9 @@
                 i3$2.MatIconModule,
                 i1$1.TranslateModule,
                 i1$6.MatProgressSpinnerModule,
-                i9.MatTooltipModule,
+                i10.MatTooltipModule,
                 i7$1.InfiniteScrollModule,
-                i9$1.MatBadgeModule,
+                i9.MatBadgeModule,
                 i1$1.TranslateModule,
                 toolbar.MatToolbarModule
             ]] });
@@ -17314,9 +17325,9 @@
                             i3$2.MatIconModule,
                             i1$1.TranslateModule,
                             i1$6.MatProgressSpinnerModule,
-                            i9.MatTooltipModule,
+                            i10.MatTooltipModule,
                             i7$1.InfiniteScrollModule,
-                            i9$1.MatBadgeModule,
+                            i9.MatBadgeModule,
                             i1$1.TranslateModule,
                             toolbar.MatToolbarModule
                         ],
@@ -17682,7 +17693,7 @@
         return CommentItemComponent;
     }());
     CommentItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: CommentItemComponent, deps: [{ token: TranslationService$1 }, { token: i1__namespace$7.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CommentItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: CommentItemComponent, selector: "app-comment-item", inputs: { comment: "comment", loaderType: "loaderType" }, outputs: { refreshCommentList: "refreshCommentList" }, ngImport: i0__namespace, template: "<div class=\"comment-item\" SetRtl>\r\n\r\n  <div class=\"comment-controls\" >\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      {{ comment.Commenter.properties.firstName }}\r\n      {{ comment.Commenter.properties.lastName }}\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}.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: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i9__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace$1.TranslatePipe, "localizedDate": LocalizedDatePipe, "timeAgo": TimeAgoPipe } });
+    CommentItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: CommentItemComponent, selector: "app-comment-item", inputs: { comment: "comment", loaderType: "loaderType" }, outputs: { refreshCommentList: "refreshCommentList" }, ngImport: i0__namespace, template: "<div class=\"comment-item\" SetRtl>\r\n\r\n  <div class=\"comment-controls\" >\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      {{ comment.Commenter.properties.firstName }}\r\n      {{ comment.Commenter.properties.lastName }}\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}.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: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace$1.TranslatePipe, "localizedDate": LocalizedDatePipe, "timeAgo": TimeAgoPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: CommentItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -17854,9 +17865,9 @@
             i1$1.TranslateModule,
             i3$2.MatIconModule,
             i1$6.MatProgressSpinnerModule,
-            i9.MatTooltipModule,
+            i10.MatTooltipModule,
             DirectiveModule,
-            i9.MatTooltipModule], exports: [CommentsDashletComponent] });
+            i10.MatTooltipModule], exports: [CommentsDashletComponent] });
     CommentsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: CommentsModule, providers: [], imports: [[
                 i4.CommonModule,
                 LibrarySharedModule,
@@ -17867,9 +17878,9 @@
                 i1$1.TranslateModule,
                 i3$2.MatIconModule,
                 i1$6.MatProgressSpinnerModule,
-                i9.MatTooltipModule,
+                i10.MatTooltipModule,
                 DirectiveModule,
-                i9.MatTooltipModule
+                i10.MatTooltipModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: CommentsModule, decorators: [{
                 type: i0.NgModule,
@@ -17890,9 +17901,9 @@
                             i1$1.TranslateModule,
                             i3$2.MatIconModule,
                             i1$6.MatProgressSpinnerModule,
-                            i9.MatTooltipModule,
+                            i10.MatTooltipModule,
                             DirectiveModule,
-                            i9.MatTooltipModule
+                            i10.MatTooltipModule
                         ],
                         exports: [CommentsDashletComponent],
                         providers: [],
@@ -18067,7 +18078,7 @@
         return CorrespondenceTagsComponent;
     }());
     CorrespondenceTagsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: CorrespondenceTagsComponent, deps: [{ token: TagsApiService }, { token: NuxeoService$1 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CorrespondenceTagsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: { correspondence: "correspondence", customClass: "customClass", addCustomApiName: "addCustomApiName", deleteCustomApiName: "deleteCustomApiName", useParams: "useParams" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"{{customClass}}\">\r\n  <div class=\"tags-header\">\r\n    <div class=\"tag-header-title\">{{ \"Tags.tags\" | translate }}</div>\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  </div>\r\n  <div class=\"tags-wrapper\">\r\n    <ng-container *ngIf=\"removable\">\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 formControlName=\"tag\">\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\" (removed)=\"deleteTag(tag)\"\r\n            >{{ tag }} <mat-icon matChipRemove *ngIf=\"removable\">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}.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: DynamicFormSelectTagComponent, selector: "cts-dynamic-form-select-tag", inputs: ["label"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme"], outputs: ["onClick"] }, { type: i5__namespace$1.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border"] }], directives: [{ type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$1.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: i5__namespace$1.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    CorrespondenceTagsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: { correspondence: "correspondence", customClass: "customClass", addCustomApiName: "addCustomApiName", deleteCustomApiName: "deleteCustomApiName", useParams: "useParams" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"{{customClass}}\">\r\n  <div class=\"tags-header\">\r\n    <div class=\"tag-header-title\">{{ \"Tags.tags\" | translate }}</div>\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  </div>\r\n  <div class=\"tags-wrapper\">\r\n    <ng-container *ngIf=\"removable\">\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 formControlName=\"tag\">\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\" (removed)=\"deleteTag(tag)\"\r\n            >{{ tag }} <mat-icon matChipRemove *ngIf=\"removable\">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}.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: DynamicFormSelectTagComponent, selector: "cts-dynamic-form-select-tag", inputs: ["label"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme"], outputs: ["onClick"] }, { type: i5__namespace$1.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border"] }], directives: [{ type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$1.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: i5__namespace$1.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: CorrespondenceTagsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -18107,7 +18118,7 @@
             LibrarySharedModule,
             i3$2.MatIconModule,
             DynamicFormModule,
-            i9.MatTooltipModule,
+            i10.MatTooltipModule,
             DirectiveModule], exports: [CorrespondenceTagsComponent] });
     CtsTagsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: CtsTagsModule, imports: [[
                 i4.CommonModule,
@@ -18119,7 +18130,7 @@
                 LibrarySharedModule,
                 i3$2.MatIconModule,
                 DynamicFormModule,
-                i9.MatTooltipModule,
+                i10.MatTooltipModule,
                 DirectiveModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: CtsTagsModule, decorators: [{
@@ -18136,7 +18147,7 @@
                             LibrarySharedModule,
                             i3$2.MatIconModule,
                             DynamicFormModule,
-                            i9.MatTooltipModule,
+                            i10.MatTooltipModule,
                             DirectiveModule
                         ],
                         exports: [CorrespondenceTagsComponent],
@@ -19049,7 +19060,7 @@
             i3$5.NgSelectModule,
             SelectModule,
             i3$1.AutocompleteLibModule,
-            i2$7.LayoutModule,
+            i2$6.LayoutModule,
             i5$1.MatChipsModule,
             i4$1.MatMenuModule,
             i2$2.MatListModule,
@@ -19070,7 +19081,7 @@
                 i3$5.NgSelectModule,
                 SelectModule,
                 i3$1.AutocompleteLibModule,
-                i2$7.LayoutModule,
+                i2$6.LayoutModule,
                 i5$1.MatChipsModule,
                 i4$1.MatMenuModule,
                 i2$2.MatListModule,
@@ -19102,7 +19113,7 @@
                             i3$5.NgSelectModule,
                             SelectModule,
                             i3$1.AutocompleteLibModule,
-                            i2$7.LayoutModule,
+                            i2$6.LayoutModule,
                             i5$1.MatChipsModule,
                             i4$1.MatMenuModule,
                             i2$2.MatListModule,
@@ -19386,7 +19397,7 @@
                         forceClientSideInit: true,
                         streaming: true,
                         licenseKey: this.environment.pdftronLicenceKey,
-                        annotationUser: this.nuxeo.nuxeoClient.user.properties.username,
+                        annotationUser: this.nuxeo.nuxeoClient.user.properties.firstName + ' ' + this.nuxeo.nuxeoClient.user.properties.lastName,
                         disabledElements: ['downloadButton', 'printButton'],
                     }, this.viewerRef.nativeElement).then(function (instance) { return __awaiter(_this, void 0, void 0, function () {
                         return __generator(this, function (_a) {