nuxeo-development-framework 0.0.3 → 0.0.7

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/forms'), require('@ngx-translate/core'), require('keycloak-angular'), require('ngx-toastr'), require('rxjs'), require('rxjs/operators'), require('@rxweb/reactive-form-validators'), require('@angular/common/locales/ar'), require('@angular/common/locales/en'), require('ngx-treeview'), 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('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', '@ngx-translate/core', 'keycloak-angular', 'ngx-toastr', 'rxjs', 'rxjs/operators', '@rxweb/reactive-form-validators', '@angular/common/locales/ar', '@angular/common/locales/en', 'ngx-treeview', '@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', '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.i1$1, global.i2, global.i1$3, global.rxjs, global.rxjs.operators, global.reactiveFormValidators, global.ng.common.locales.ar, global.ng.common.locales.en, global.i1$2, 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$7, global.i3$5, global.i3$2, 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, global.i6$2, 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, i3, i1, i3$1, i1$1, i2, i1$3, rxjs, operators, reactiveFormValidators, localeAr, localeEn, i1$2, i2$1, moment$4, moment_, i1$4, momentjs, button, i3$4, i2$3, datepicker, i3$3, i5, i4, i2$5, i2$4, i7, i6, core, i3$7, i3$5, i3$2, i1$5, i1$6, i2$2, formiojs, _, i3$6, i6$1, tsCacheable, i1$7, animations, i4$1, Dynamsoft, i2$6, i2$7, chart_js, i6$2, take, SockJS, Stomp, i8, toolbar, i5$1, i6$3, WebViewer) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/forms'), require('@ngx-translate/core'), require('keycloak-angular'), require('ngx-toastr'), require('rxjs'), require('rxjs/operators'), require('@rxweb/reactive-form-validators'), require('@angular/common/locales/ar'), require('@angular/common/locales/en'), require('ngx-treeview'), 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', '@ngx-translate/core', 'keycloak-angular', 'ngx-toastr', 'rxjs', 'rxjs/operators', '@rxweb/reactive-form-validators', '@angular/common/locales/ar', '@angular/common/locales/en', 'ngx-treeview', '@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.i1$1, global.i2, global.i1$3, global.rxjs, global.rxjs.operators, global.reactiveFormValidators, global.ng.common.locales.ar, global.ng.common.locales.en, global.i1$2, 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$7, global.i3$5, global.i3$2, 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.i6$2, 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, i3, i1, i3$1, i1$1, i2, i1$3, rxjs, operators, reactiveFormValidators, localeAr, localeEn, i1$2, i2$1, moment$4, moment_, i1$4, momentjs, button, i3$4, i2$3, datepicker, i3$3, i5, i4, i2$5, i2$4, i7, i6, core, i3$7, i3$5, i3$2, i1$5, i1$6, i2$2, formiojs, _, i3$6, i6$1, tsCacheable, i1$7, animations, i4$1, Dynamsoft, i2$6, i2$7, chart_js, chartjsPluginPiechartOutlabels, chartjsPluginLabels, i6$2, take, SockJS, Stomp, i8, toolbar, i5$1, i6$3, WebViewer) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -4725,7 +4725,7 @@
         return ItemListComponent;
     }());
     ItemListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: ItemListComponent, deps: [{ token: ViewerFilesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ItemListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: ItemListComponent, selector: "cts-item-list", inputs: { item: "item", iconname: "iconname", title: "title", actions: "actions", isselected: "isselected", moreclasses: "moreclasses" }, outputs: { itemClicked: "itemClicked", actionclicked: "actionclicked" }, ngImport: i0__namespace, template: "\r\n<mat-list-item class=\"list-item\" (click)=\"itemlistClick()\" [ngClass]=\"{\r\n    'list-item-selected': selectedId == item.uid\r\n  }\">\r\n  <div class=\"direction\"><i class=\"incoming bi bi-box-arrow-down\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'incoming'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"outcoming bi bi-box-arrow-up\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'outgoing'\"></i></div>\r\n\r\n  <mat-icon *ngIf=\"iconname\" mat-list-icon class=\"icon {{moreclasses}}\">{{\r\n    iconname\r\n    }}</mat-icon>\r\n\r\n  <ng-content select=\".icon\"></ng-content>\r\n\r\n  <div class=\"content\">\r\n    <div *ngIf=\"title\" mat-line>{{ title }}</div>\r\n  <div mat-line>\r\n    <ng-content select=\".description\"> </ng-content>\r\n  </div>\r\n</div>\r\n  <button class=\"menu-item-action\" *ngIf=\"actions?.length\" (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\">\r\n    <ng-container *ngFor=\"let menu_item of actions\">\r\n      <button mat-menu-item (click)=\"menuactionClicked(menu_item.name, item)\">\r\n        {{ menu_item.title | translate }}\r\n      </button>\r\n    </ng-container>\r\n  </mat-menu>\r\n</mat-list-item>\r\n", styles: [".list-item{font-size:16px;cursor:pointer;height:55px!important}.list-item .mat-list-item-content{padding:0!important}.list-item .mat-list-item-content .icon{padding:0 4px;font-size:35px;width:auto;height:auto}.list-item .mat-list-item-content .icon.link-relation{font-size:25px}.list-item .mat-list-item-content .content{width:100%;margin:0;overflow:hidden;text-overflow:ellipsis}.list-item .mat-list-item-content .content .mat-line{font-size:16px;color:#212529}.list-item .mat-list-item-content .content .mat-line .description{font-size:12px}.list-item a{color:#000}.list-item .menu-item-action{font-size:20px;border:0;background:transparent}.list-item .direction{font-size:20px}.list-item .direction .incoming{color:#00dca5}.list-item .direction .outcoming{color:#fbb62c}.list-item:hover{background-color:#f5f6f8}.list-item-selected{background-color:#f5f6f8}\n"], components: [{ type: i2__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4__namespace.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i2__namespace$3.MatLine, selector: "[mat-line], [matLine]" }, { type: i4__namespace.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    ItemListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: ItemListComponent, selector: "cts-item-list", inputs: { item: "item", iconname: "iconname", title: "title", actions: "actions", isselected: "isselected", moreclasses: "moreclasses" }, outputs: { itemClicked: "itemClicked", actionclicked: "actionclicked" }, ngImport: i0__namespace, template: "\r\n<mat-list-item class=\"list-item\" (click)=\"itemlistClick()\" [ngClass]=\"{\r\n    'list-item-selected': selectedId == item.uid\r\n  }\">\r\n  <div class=\"direction\"><i class=\"incoming bi bi-box-arrow-down\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'incoming'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"outcoming bi bi-box-arrow-up\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'outgoing'\"></i></div>\r\n\r\n  <mat-icon *ngIf=\"iconname\" mat-list-icon class=\"icon {{moreclasses}}\">{{\r\n    iconname\r\n    }}</mat-icon>\r\n\r\n  <ng-content select=\".icon\"></ng-content>\r\n\r\n  <div class=\"content\">\r\n    <div *ngIf=\"title\" mat-line>{{ title }}</div>\r\n  <div mat-line>\r\n    <ng-content select=\".description\"> </ng-content>\r\n  </div>\r\n</div>\r\n  <button class=\"menu-item-action\" *ngIf=\"actions?.length\" (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\">\r\n    <ng-container *ngFor=\"let menu_item of actions\">\r\n      <button mat-menu-item (click)=\"menuactionClicked(menu_item.name, item)\">\r\n        {{ menu_item.title | translate }}\r\n      </button>\r\n    </ng-container>\r\n  </mat-menu>\r\n</mat-list-item>\r\n", styles: [".list-item{font-size:16px;cursor:pointer;height:55px!important}.list-item .mat-list-item-content{padding:0!important}.list-item .mat-list-item-content .icon{padding:0 4px;font-size:35px;width:auto;height:auto}.list-item .mat-list-item-content .icon.link-relation{font-size:25px}.list-item .mat-list-item-content .icon.attachment-icon{font-size:25px}.list-item .mat-list-item-content .content{width:100%;margin:0;overflow:hidden;text-overflow:ellipsis}.list-item .mat-list-item-content .content .mat-line{font-size:16px;color:#212529}.list-item .mat-list-item-content .content .mat-line .description{font-size:12px}.list-item a{color:#000}.list-item .menu-item-action{font-size:20px;border:0;background:transparent}.list-item .direction{font-size:20px}.list-item .direction .incoming{color:#00dca5}.list-item .direction .outcoming{color:#fbb62c}.list-item:hover{background-color:#f5f6f8}.list-item-selected{background-color:#f5f6f8}\n"], components: [{ type: i2__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4__namespace.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i2__namespace$3.MatLine, selector: "[mat-line], [matLine]" }, { type: i4__namespace.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i3__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: ItemListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4856,7 +4856,7 @@
                 target: property
             });
         };
-        DynamicFormUpdateService.prototype.getTextBoxSuggestionResults = function (pageProvider, params, key) {
+        DynamicFormUpdateService.prototype.getTextBoxSuggestionResults = function (pageProvider, params, key, autoCompleteValueKey) {
             return this.callApi
                 .query(Object.assign({ pageProvider: pageProvider }, params), {
                 headers: {
@@ -4865,7 +4865,8 @@
             })
                 .pipe(operators.map(function (data) {
                 var results = [];
-                data.aggregations.Correspondence_from_agg.buckets.map(function (item) {
+                var myInternalResult = data.aggregations[autoCompleteValueKey];
+                myInternalResult.buckets.map(function (item) {
                     results.push({
                         title: item.key
                     });
@@ -6367,6 +6368,14 @@
             maxAge: 60 * minute$1,
         })
     ], DepartmentApiService.prototype, "getDepartmentTree", null);
+    __decorate([
+        tsCacheable.Cacheable({
+            maxCacheCount: 200,
+            storageStrategy: tsCacheable.LocalStorageStrategy,
+            cacheBusterObserver: departmentCacheBuster$,
+            maxAge: 120 * minute$1,
+        })
+    ], DepartmentApiService.prototype, "getDepartmentDetails", null);
     __decorate([
         tsCacheable.Cacheable({
             maxCacheCount: 200,
@@ -6400,7 +6409,7 @@
                             type: i0.Inject,
                             args: ['environment']
                         }] }];
-        }, propDecorators: { getDepartmentTree: [], getDepartmentNestedTree: [], createDepartment: [], createDepartmentInRoot: [], updateDepartment: [] } });
+        }, propDecorators: { getDepartmentTree: [], getDepartmentDetails: [], getDepartmentNestedTree: [], createDepartment: [], createDepartmentInRoot: [], updateDepartment: [] } });
 
     /** @ignore */
     var DropdownTreeviewSelectI18n = /** @class */ (function (_super) {
@@ -6602,6 +6611,7 @@
             this.autoComplete_pageProvider = '';
             this.autoComplete_propertyName = '';
             this.autoComplete_propertyKey = '';
+            this.autoCompleteValueKey = '';
             /** input type */
             this.type = 'text';
             /** is Editable */
@@ -6772,7 +6782,7 @@
                 };
                 params[this.autoComplete_propertyName] = val_1;
                 this.dynamicFormUpdateService
-                    .getTextBoxSuggestionResults(this.autoComplete_pageProvider, params, this.autoComplete_propertyKey)
+                    .getTextBoxSuggestionResults(this.autoComplete_pageProvider, params, this.autoComplete_propertyKey, this.autoCompleteValueKey)
                     .subscribe(function (data) {
                     _this.documentList = data.filter(function (option) { return option.title.toLowerCase().includes(val_1.toLowerCase()); });
                     _this.showsuggestedOptions = true;
@@ -6789,7 +6799,7 @@
     }());
     DynamicFormTextItemComponent.DEFAULT_SEPARATOR = ', ';
     DynamicFormTextItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicFormTextItemComponent, deps: [{ token: DynamicFormUpdateService }, { token: i1__namespace$1.TranslateService }, { token: i3__namespace$1.NgControl, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DynamicFormTextItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: { autoComplete: "autoComplete", autoComplete_pageProvider: "autoComplete_pageProvider", autoComplete_propertyName: "autoComplete_propertyName", autoComplete_propertyKey: "autoComplete_propertyKey", type: "type", property: "property", label: "label", editable: "editable", placeholder: "placeholder", disabled: "disabled", displayEmpty: "displayEmpty", preventSpace: "preventSpace", id: "id" }, viewQueries: [{ propertyName: "editorInput", first: true, predicate: ["editorInput"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"app-property-value\">\r\n  <div class=\"app-input-wrapper\">\r\n    <label *ngIf=\"label\" for=\"formGroupInputSmall\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger m-1\">*</span></label\r\n    >\r\n    <div class=\"\">\r\n      <ng-container *ngIf=\"isEditable(); else readOnly\">\r\n        <div class=\"new-one\" (clickOutside)=\"openOptions(false)\">\r\n          <input\r\n            [id]=\"id\"\r\n            [attr.disabled]=\"isDisabled() || null\"\r\n            [type]=\"type\"\r\n            class=\"form-control\"\r\n            [ngClass]=\"{'input-filled' : editedValue }\"\r\n            (keydown.space)=\"allowSpace($event)\"\r\n            #editorInput\r\n            [required]=\"isRequired()\"\r\n            [(ngModel)]=\"editedValue\"\r\n            (ngModelChange)=\"update($event)\"\r\n            (keyup)=\"waitUntilUserFinishTyping()\"\r\n            [attr.data-automation-id]=\"'card-textitem-editinput-'\"\r\n            placeholder=\"{{ placeholder | translate }}\"\r\n            (focus)=\"openOptions(true)\"\r\n          />\r\n          <div *ngIf=\"documentList.length !== 0\" id=\"suggestedoptions\">\r\n            <div\r\n              class=\"suggestions-wrapper\"\r\n              [ngClass]=\"{ 'd-block': showsuggestedOptions }\"\r\n            >\r\n              <div\r\n                class=\"option\"\r\n                id=\"suggestedoptions\"\r\n                *ngFor=\"let option of documentList\"\r\n                (click)=\"selectItem(option.title)\"\r\n              >\r\n                {{ option.title }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <mat-error\r\n          [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n          class=\"app-textitem-editable-error\"\r\n          *ngIf=\"hasErrors()\"\r\n        >\r\n          <ul>\r\n            <li *ngIf=\"control.errors.required\">\r\n              {{ label | translate }} {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n            </li>\r\n            <li *ngIf=\"control.errors.pattern\">\r\n              {{ \"wrong pattern\" | translate }}\r\n            </li>\r\n          </ul>\r\n        </mat-error>\r\n      </ng-container>\r\n      <ng-template #readOnly>\r\n        {{ editedValue }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".app-property-value .input-filled{border-color:#1a96c6!important}.app-property-value .app-input-wrapper label{color:#8f98aa;font-size:12px;margin-bottom:0}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;background-color:#8f98aa1a;border-radius:0;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .app-textitem-editable-error ul{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error ul li{margin-top:5px}.app-property-value .app-input-wrapper .new-one{position:relative}.app-property-value .app-input-wrapper .suggestions-wrapper{border-radius:3px;height:auto;max-height:240px;border:1px solid #ccc;box-shadow:2px 2px 2px #0000000f;overflow:auto;display:none;position:absolute;width:100%;background-color:#fff;z-index:99}.app-property-value .app-input-wrapper .suggestions-wrapper .option{margin-bottom:5px;padding:5px 10px;cursor:pointer}.app-property-value .app-input-wrapper .suggestions-wrapper .option:hover{background-color:#f5faff}\n"], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i3__namespace$1.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    DynamicFormTextItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: { autoComplete: "autoComplete", autoComplete_pageProvider: "autoComplete_pageProvider", autoComplete_propertyName: "autoComplete_propertyName", autoComplete_propertyKey: "autoComplete_propertyKey", autoCompleteValueKey: "autoCompleteValueKey", type: "type", property: "property", label: "label", editable: "editable", placeholder: "placeholder", disabled: "disabled", displayEmpty: "displayEmpty", preventSpace: "preventSpace", id: "id" }, viewQueries: [{ propertyName: "editorInput", first: true, predicate: ["editorInput"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"app-property-value\">\r\n  <div class=\"app-input-wrapper\">\r\n    <label *ngIf=\"label\" for=\"formGroupInputSmall\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger m-1\">*</span></label\r\n    >\r\n    <div class=\"\">\r\n      <ng-container *ngIf=\"isEditable(); else readOnly\">\r\n        <div class=\"new-one\" (clickOutside)=\"openOptions(false)\">\r\n          <input\r\n            [id]=\"id\"\r\n            [attr.disabled]=\"isDisabled() || null\"\r\n            [type]=\"type\"\r\n            class=\"form-control\"\r\n            [ngClass]=\"{'input-filled' : editedValue }\"\r\n            (keydown.space)=\"allowSpace($event)\"\r\n            #editorInput\r\n            [required]=\"isRequired()\"\r\n            [(ngModel)]=\"editedValue\"\r\n            (ngModelChange)=\"update($event)\"\r\n            (keyup)=\"waitUntilUserFinishTyping()\"\r\n            [attr.data-automation-id]=\"'card-textitem-editinput-'\"\r\n            placeholder=\"{{ placeholder | translate }}\"\r\n            (focus)=\"openOptions(true)\"\r\n          />\r\n          <div *ngIf=\"documentList.length !== 0\" id=\"suggestedoptions\">\r\n            <div\r\n              class=\"suggestions-wrapper\"\r\n              [ngClass]=\"{ 'd-block': showsuggestedOptions }\"\r\n            >\r\n              <div\r\n                class=\"option\"\r\n                id=\"suggestedoptions\"\r\n                *ngFor=\"let option of documentList\"\r\n                (click)=\"selectItem(option.title)\"\r\n              >\r\n                {{ option.title }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <mat-error\r\n          [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n          class=\"app-textitem-editable-error\"\r\n          *ngIf=\"hasErrors()\"\r\n        >\r\n          <ul>\r\n            <li *ngIf=\"control.errors.required\">\r\n              {{ label | translate }} {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n            </li>\r\n            <li *ngIf=\"control.errors.pattern\">\r\n              {{ \"wrong pattern\" | translate }}\r\n            </li>\r\n          </ul>\r\n        </mat-error>\r\n      </ng-container>\r\n      <ng-template #readOnly>\r\n        {{ editedValue }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".app-property-value .input-filled{border-color:#1a96c6!important}.app-property-value .app-input-wrapper label{color:#8f98aa;font-size:12px;margin-bottom:0}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;background-color:#8f98aa1a;border-radius:0;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .app-textitem-editable-error ul{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error ul li{margin-top:5px}.app-property-value .app-input-wrapper .new-one{position:relative}.app-property-value .app-input-wrapper .suggestions-wrapper{border-radius:3px;height:auto;max-height:240px;border:1px solid #ccc;box-shadow:2px 2px 2px #0000000f;overflow:auto;display:none;position:absolute;width:100%;background-color:#fff;z-index:99}.app-property-value .app-input-wrapper .suggestions-wrapper .option{margin-bottom:5px;padding:5px 10px;cursor:pointer}.app-property-value .app-input-wrapper .suggestions-wrapper .option:hover{background-color:#f5faff}\n"], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i3__namespace$1.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.MatError, selector: "mat-error", inputs: ["id"] }], 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: DynamicFormTextItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6812,6 +6822,8 @@
                     type: i0.Input
                 }], autoComplete_propertyKey: [{
                     type: i0.Input
+                }], autoCompleteValueKey: [{
+                    type: i0.Input
                 }], type: [{
                     type: i0.Input
                 }], property: [{
@@ -7406,7 +7418,7 @@
         return DepartmentFormComponent;
     }());
     DepartmentFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DepartmentFormComponent, deps: [{ token: i1$7.MAT_DIALOG_DATA }, { token: i1__namespace$7.MatDialogRef }, { token: CustomToastrService }, { token: DepartmentApiService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DepartmentFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DepartmentFormComponent, selector: "cts-department-form", ngImport: i0__namespace, template: "<div SetDirRtl class=\"voc-form\">\r\n  <div class=\"voc-form-hedaer\">\r\n    {{\r\n      \"department_management.form.\" + (updateMode ? \"updateHeader\" : \"header\")\r\n        | translate\r\n    }}\r\n  </div>\r\n  <form [formGroup]=\"departmentForm\" class=\"row voc-form-body\">\r\n    <div class=\"col-lg-6 col-12\">\r\n      <app-dynamic-form-textitem\r\n        formControlName=\"title\"\r\n        [label]=\"'department_management.form.title'\"\r\n        [disabled]=\"updateMode\"\r\n        [preventSpace]=\"true\"\r\n      ></app-dynamic-form-textitem>\r\n      <div class=\"hint-msg\">{{ \"department_management.form.hintMsg\" | translate }}</div>\r\n    </div>\r\n    <!-- <app-dynamic-form-textitem\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"agencyCode\"\r\n      [label]=\"'department_management.form.AgencyCode'\"\r\n    ></app-dynamic-form-textitem> -->\r\n    <app-dynamic-form-textitem\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"arabicName\"\r\n      [label]=\"'department_management.form.ArabicName'\"\r\n    ></app-dynamic-form-textitem>\r\n    <app-dynamic-form-textitem\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"englishName\"\r\n      [label]=\"'department_management.form.EnglishName'\"\r\n    ></app-dynamic-form-textitem>\r\n    <app-dynamic-form-vocabulary-item\r\n      class=\"col-lg-6 col-12\"\r\n      [label]=\"'department_management.form.deptTypee'\"\r\n      [bindLabel]=\"'label'\"\r\n      [bindValue]=\"'id'\"\r\n      placeholder=\"{{ 'VOCABULARY.SELECT_ITEM' | translate }}\"\r\n      [multiple]=\"false\"\r\n      [searchable]=\"false\"\r\n      [closeOnSelect]=\"true\"\r\n      [hideSelectedItems]=\"false\"\r\n      [vocabularyType]=\"'VOC_DepartmentType'\"\r\n      formControlName=\"deptTypee\"\r\n    >\r\n    </app-dynamic-form-vocabulary-item>\r\n    <app-dynamic-form-textitem\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"description\"\r\n      [label]=\"'department_management.form.Description'\"\r\n    ></app-dynamic-form-textitem>\r\n    <!-- <cts-dynamic-form-select-users\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"manager\"\r\n      [bindValue]=\"\"\r\n      [bindLabel]=\"\"\r\n      [label]=\"'department_management.form.Manager'\"\r\n      [deptTitle]=\"'all'\"\r\n      [bindValue]=\"'properties.username'\"\r\n    ></cts-dynamic-form-select-users> -->\r\n\r\n    <cts-dynamic-form-slide-toggleitem\r\n      class=\"col-lg-6 col-12 isAllowRecExternal\"\r\n      formControlName=\"isAllowRecExternal\"\r\n      [label]=\"'department_management.form.isAllowRecExternal'\"\r\n    ></cts-dynamic-form-slide-toggleitem>\r\n  </form>\r\n  <div class=\"button-group d-flex flex-row-reverse\">\r\n    <cts-button\r\n      [theme]=\"'danger'\"\r\n      size=\"'regular'\"\r\n      class=\"voc-form-close\"\r\n      mat-dialog-close\r\n    >\r\n      {{ \"BUTTONS.CLOSE\" | translate }}\r\n    </cts-button>\r\n    <cts-button\r\n      *ngIf=\"!updateMode\"\r\n      [loading]=\"loading\"\r\n      size=\"'regular'\"\r\n      [theme]=\"'primary'\"\r\n      class=\"voc-form-submit\"\r\n      (onClick)=\"save()\"\r\n      [disabled]=\"departmentForm.invalid\"\r\n    >\r\n      {{ \"BUTTONS.SAVE\" | translate }}\r\n    </cts-button>\r\n    <cts-button\r\n      *ngIf=\"updateMode\"\r\n      [loading]=\"loading\"\r\n      size=\"'regular'\"\r\n      [theme]=\"'primary'\"\r\n      class=\"voc-form-submit\"\r\n      (onClick)=\"update()\"\r\n      [disabled]=\"departmentForm.invalid\"\r\n    >\r\n      {{ \"BUTTONS.UPDATE\" | translate }}\r\n    </cts-button>\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.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.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}.voc-form{padding:20px}.voc-form .hint-msg{font-size:12px;font-style:italic;margin-top:2px;color:#6a768e}.voc-form .voc-form-hedaer{margin-bottom:8px;font-size:20px;color:#465573}.voc-form .button-group{margin-top:12px;grid-column-gap:6px!important;column-gap:6px!important}.voc-form .button-group cts-button{width:16%}@media (max-width: 992px){.voc-form .button-group cts-button{width:20%}}@media only screen and (max-width: 768px){.voc-form .button-group cts-button{width:28%}}.voc-form .isAllowRecExternal{display:flex;align-items:center;margin-top:26px;overflow:hidden}@media only screen and (max-width: 768px){.voc-form .isAllowRecExternal{font-size:12px}}\n"], components: [{ type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme"], outputs: ["onClick"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
+    DepartmentFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DepartmentFormComponent, selector: "cts-department-form", ngImport: i0__namespace, template: "<div SetDirRtl class=\"voc-form\">\r\n  <div class=\"voc-form-hedaer\">\r\n    {{\r\n      \"department_management.form.\" + (updateMode ? \"updateHeader\" : \"header\")\r\n        | translate\r\n    }}\r\n  </div>\r\n  <form [formGroup]=\"departmentForm\" class=\"row voc-form-body\">\r\n    <div class=\"col-lg-6 col-12\">\r\n      <app-dynamic-form-textitem\r\n        formControlName=\"title\"\r\n        [label]=\"'department_management.form.title'\"\r\n        [disabled]=\"updateMode\"\r\n        [preventSpace]=\"true\"\r\n      ></app-dynamic-form-textitem>\r\n      <div class=\"hint-msg\">{{ \"department_management.form.hintMsg\" | translate }}</div>\r\n    </div>\r\n    <!-- <app-dynamic-form-textitem\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"agencyCode\"\r\n      [label]=\"'department_management.form.AgencyCode'\"\r\n    ></app-dynamic-form-textitem> -->\r\n    <app-dynamic-form-textitem\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"arabicName\"\r\n      [label]=\"'department_management.form.ArabicName'\"\r\n    ></app-dynamic-form-textitem>\r\n    <app-dynamic-form-textitem\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"englishName\"\r\n      [label]=\"'department_management.form.EnglishName'\"\r\n    ></app-dynamic-form-textitem>\r\n    <app-dynamic-form-vocabulary-item\r\n      class=\"col-lg-6 col-12\"\r\n      [label]=\"'department_management.form.deptTypee'\"\r\n      [bindLabel]=\"'label'\"\r\n      [bindValue]=\"'id'\"\r\n      placeholder=\"{{ 'VOCABULARY.SELECT_ITEM' | translate }}\"\r\n      [multiple]=\"false\"\r\n      [searchable]=\"false\"\r\n      [closeOnSelect]=\"true\"\r\n      [hideSelectedItems]=\"false\"\r\n      [vocabularyType]=\"'VOC_DepartmentType'\"\r\n      formControlName=\"deptTypee\"\r\n    >\r\n    </app-dynamic-form-vocabulary-item>\r\n    <app-dynamic-form-textitem\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"description\"\r\n      [label]=\"'department_management.form.Description'\"\r\n    ></app-dynamic-form-textitem>\r\n    <!-- <cts-dynamic-form-select-users\r\n      class=\"col-lg-6 col-12\"\r\n      formControlName=\"manager\"\r\n      [bindValue]=\"\"\r\n      [bindLabel]=\"\"\r\n      [label]=\"'department_management.form.Manager'\"\r\n      [deptTitle]=\"'all'\"\r\n      [bindValue]=\"'properties.username'\"\r\n    ></cts-dynamic-form-select-users> -->\r\n\r\n    <cts-dynamic-form-slide-toggleitem\r\n      class=\"col-lg-6 col-12 isAllowRecExternal\"\r\n      formControlName=\"isAllowRecExternal\"\r\n      [label]=\"'department_management.form.isAllowRecExternal'\"\r\n    ></cts-dynamic-form-slide-toggleitem>\r\n  </form>\r\n  <div class=\"button-group d-flex flex-row-reverse\">\r\n    <cts-button\r\n      [theme]=\"'danger'\"\r\n      size=\"'regular'\"\r\n      class=\"voc-form-close\"\r\n      mat-dialog-close\r\n    >\r\n      {{ \"BUTTONS.CLOSE\" | translate }}\r\n    </cts-button>\r\n    <cts-button\r\n      *ngIf=\"!updateMode\"\r\n      [loading]=\"loading\"\r\n      size=\"'regular'\"\r\n      [theme]=\"'primary'\"\r\n      class=\"voc-form-submit\"\r\n      (onClick)=\"save()\"\r\n      [disabled]=\"departmentForm.invalid\"\r\n    >\r\n      {{ \"BUTTONS.SAVE\" | translate }}\r\n    </cts-button>\r\n    <cts-button\r\n      *ngIf=\"updateMode\"\r\n      [loading]=\"loading\"\r\n      size=\"'regular'\"\r\n      [theme]=\"'primary'\"\r\n      class=\"voc-form-submit\"\r\n      (onClick)=\"update()\"\r\n      [disabled]=\"departmentForm.invalid\"\r\n    >\r\n      {{ \"BUTTONS.UPDATE\" | translate }}\r\n    </cts-button>\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.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.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}.voc-form{padding:20px}.voc-form .hint-msg{font-size:12px;font-style:italic;margin-top:2px;color:#6a768e}.voc-form .voc-form-hedaer{margin-bottom:8px;font-size:20px;color:#465573}.voc-form .button-group{margin-top:12px;grid-column-gap:6px!important;column-gap:6px!important}.voc-form .button-group cts-button{width:16%}@media (max-width: 992px){.voc-form .button-group cts-button{width:20%}}@media only screen and (max-width: 768px){.voc-form .button-group cts-button{width:28%}}.voc-form .isAllowRecExternal{display:flex;align-items:center;margin-top:26px;overflow:hidden}@media only screen and (max-width: 768px){.voc-form .isAllowRecExternal{font-size:12px}}\n"], components: [{ type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme"], outputs: ["onClick"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DepartmentFormComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9561,7 +9573,7 @@
             var _this = this;
             var myAdaptedData = {};
             Object.keys(Object.assign({}, data)).map(function (key) {
-                if (key.includes(_this.myPrefix)) {
+                if (key.includes(_this.myPrefix + ':')) {
                     myAdaptedData[key.replace(_this.myPrefix + ':', '')] = data[key];
                 }
             });
@@ -12384,7 +12396,7 @@
         return AttachmentsListComponent;
     }());
     AttachmentsListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: AttachmentsListComponent, deps: [{ token: NuxeoService$1 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AttachmentsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: AttachmentsListComponent, selector: "cts-attachments-list", inputs: { ancestorId: "ancestorId", provider: "provider", items: "items", batchList: "batchList", dontDelete: "dontDelete", canDelete: "canDelete", item: "item" }, outputs: { deleteSuccess: "deleteSuccess", documentsCount: "documentsCount", documentSelect: "documentSelect" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container>\r\n  <div class=\"doc-list\">\r\n    <ng-container>\r\n      <form [formGroup]=\"attachmentForm\">\r\n        <div formArrayName=\"attachmentCard\">\r\n          <div\r\n            class=\"doc-item\"\r\n            *ngFor=\"\r\n              let attachmentCardControl of attachmentForm.get('attachmentCard')[\r\n                'controls'\r\n              ];\r\n              let i = index\r\n            \"\r\n          >\r\n            <!-- (click)=\"preview(item.uid)\" -->\r\n            <div class=\"file-icon\">\r\n              <mat-icon>file_copy</mat-icon>\r\n            </div>\r\n            <div\r\n              [formGroupName]=\"i\"\r\n              class=\"attachmentForm-container row no-gutters\"\r\n            >\r\n              <div class=\"formControl-wrapper col-12 col-xl-6\">\r\n                <app-dynamic-form-textitem\r\n                  placeholder=\"{{ 'Title' | translate }}\"\r\n                  class=\"textitem\"\r\n                  formControlName=\"title\"\r\n                  \r\n                >\r\n                </app-dynamic-form-textitem>\r\n                <app-dynamic-form-textitem\r\n                  placeholder=\"{{\r\n                    'CREATE.ATTACHMENTS.REMARKS_PLACE_HOLDER' | translate\r\n                  }}\"\r\n                  class=\"textitem\"\r\n                  formControlName=\"remarks\"\r\n                >\r\n                </app-dynamic-form-textitem>\r\n              </div>\r\n              <div class=\"formControl-wrapper col-12 col-xl-6\">\r\n                <app-dynamic-form-vocabulary-item\r\n                  class=\"voc-form-control\"\r\n                  [bindLabel]=\"'label'\"\r\n                  [bindValue]=\"'id'\"\r\n                  placeholder=\"{{ 'VOCABULARY.TYPE' | translate }}\"\r\n                  [multiple]=\"false\"\r\n                  [searchable]=\"false\"\r\n                  [closeOnSelect]=\"true\"\r\n                  [hideSelectedItems]=\"false\"\r\n                  [vocabularyType]=\"'VOC_CorrespondenceAttachmentType'\"\r\n                  formControlName=\"category\"\r\n                >\r\n                </app-dynamic-form-vocabulary-item>\r\n                <app-dynamic-form-vocabulary-item\r\n                  class=\"voc-form-control\"\r\n                  [bindLabel]=\"'label'\"\r\n                  [bindValue]=\"'id'\"\r\n                  placeholder=\"{{ 'VOCABULARY.CLASSIFICATION' | translate }}\"\r\n                  [multiple]=\"false\"\r\n                  [searchable]=\"false\"\r\n                  [closeOnSelect]=\"true\"\r\n                  [hideSelectedItems]=\"false\"\r\n                  [vocabularyType]=\"'VOC_CorrespondenceAttachClassification'\"\r\n                  formControlName=\"classification\"\r\n                >\r\n                </app-dynamic-form-vocabulary-item>\r\n              </div>\r\n              <!-- <div class=\"formControl-toggleitem col-2 col-xl-2\">\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  label=\"{{ 'CREATE.ATTACHMENTS.ISOBJECT' | translate }}\"\r\n                  formControlName=\"isObject\"\r\n                ></cts-dynamic-form-slide-toggleitem>\r\n              </div> -->\r\n            </div>\r\n            <div class=\"btn-wrapper\">\r\n              <button\r\n                (click)=\"delInput(i)\"\r\n                class=\"btn btn-outline-danger btn-no-border\"\r\n              >\r\n                <!-- deleteDocument($event, attachmentCardControl.value.item) -->\r\n                <mat-icon>delete</mat-icon>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <mat-spinner class=\"centered-spinner\"></mat-spinner>\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.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.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}.doc-item{display:flex;flex:1;padding-top:6px;padding-bottom:6px;justify-content:space-between;align-items:center;padding-inline-end:4px;cursor:pointer;border:1px solid;border-color:#d9dce2}.doc-item .item-content{display:flex;align-items:center;justify-content:space-between}.doc-item .file-icon{margin:4px;color:#465573;display:flex;align-items:center}.attachmentForm-container{width:100%;grid-row-gap:6px;row-gap:6px}.attachmentForm-container .formControl-wrapper{display:flex;align-items:center;justify-content:space-between;grid-column-gap:10px;column-gap:10px;padding-inline-end:5px;padding-inline-start:5px}.attachmentForm-container .formControl-wrapper .voc-form-control{width:50%}.attachmentForm-container .formControl-wrapper .textitem{width:100%}.attachmentForm-container .formControl-toggleitem{display:flex;align-items:center;justify-content:center}.btn-wrapper{display:flex;justify-content:flex-end}\n"], components: [{ type: i3__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: i1__namespace$6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
+    AttachmentsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: AttachmentsListComponent, selector: "cts-attachments-list", inputs: { ancestorId: "ancestorId", provider: "provider", items: "items", batchList: "batchList", dontDelete: "dontDelete", canDelete: "canDelete", item: "item" }, outputs: { deleteSuccess: "deleteSuccess", documentsCount: "documentsCount", documentSelect: "documentSelect" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container>\r\n  <div class=\"doc-list\">\r\n    <ng-container>\r\n      <form [formGroup]=\"attachmentForm\">\r\n        <div formArrayName=\"attachmentCard\">\r\n          <div\r\n            class=\"doc-item\"\r\n            *ngFor=\"\r\n              let attachmentCardControl of attachmentForm.get('attachmentCard')[\r\n                'controls'\r\n              ];\r\n              let i = index\r\n            \"\r\n          >\r\n            <!-- (click)=\"preview(item.uid)\" -->\r\n            <div class=\"file-icon\">\r\n              <mat-icon>file_copy</mat-icon>\r\n            </div>\r\n            <div\r\n              [formGroupName]=\"i\"\r\n              class=\"attachmentForm-container row no-gutters\"\r\n            >\r\n              <div class=\"formControl-wrapper col-12 col-xl-6\">\r\n                <app-dynamic-form-textitem\r\n                  placeholder=\"{{ 'Title' | translate }}\"\r\n                  class=\"textitem\"\r\n                  formControlName=\"title\"\r\n                  \r\n                >\r\n                </app-dynamic-form-textitem>\r\n                <app-dynamic-form-textitem\r\n                  placeholder=\"{{\r\n                    'CREATE.ATTACHMENTS.REMARKS_PLACE_HOLDER' | translate\r\n                  }}\"\r\n                  class=\"textitem\"\r\n                  formControlName=\"remarks\"\r\n                >\r\n                </app-dynamic-form-textitem>\r\n              </div>\r\n              <div class=\"formControl-wrapper col-12 col-xl-6\">\r\n                <app-dynamic-form-vocabulary-item\r\n                  class=\"voc-form-control\"\r\n                  [bindLabel]=\"'label'\"\r\n                  [bindValue]=\"'id'\"\r\n                  placeholder=\"{{ 'VOCABULARY.TYPE' | translate }}\"\r\n                  [multiple]=\"false\"\r\n                  [searchable]=\"false\"\r\n                  [closeOnSelect]=\"true\"\r\n                  [hideSelectedItems]=\"false\"\r\n                  [vocabularyType]=\"'VOC_CorrespondenceAttachmentType'\"\r\n                  formControlName=\"category\"\r\n                >\r\n                </app-dynamic-form-vocabulary-item>\r\n                <app-dynamic-form-vocabulary-item\r\n                  class=\"voc-form-control\"\r\n                  [bindLabel]=\"'label'\"\r\n                  [bindValue]=\"'id'\"\r\n                  placeholder=\"{{ 'VOCABULARY.CLASSIFICATION' | translate }}\"\r\n                  [multiple]=\"false\"\r\n                  [searchable]=\"false\"\r\n                  [closeOnSelect]=\"true\"\r\n                  [hideSelectedItems]=\"false\"\r\n                  [vocabularyType]=\"'VOC_CorrespondenceAttachClassification'\"\r\n                  formControlName=\"classification\"\r\n                >\r\n                </app-dynamic-form-vocabulary-item>\r\n              </div>\r\n              <!-- <div class=\"formControl-toggleitem col-2 col-xl-2\">\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  label=\"{{ 'CREATE.ATTACHMENTS.ISOBJECT' | translate }}\"\r\n                  formControlName=\"isObject\"\r\n                ></cts-dynamic-form-slide-toggleitem>\r\n              </div> -->\r\n            </div>\r\n            <div class=\"btn-wrapper\">\r\n              <button\r\n                (click)=\"delInput(i)\"\r\n                class=\"btn btn-outline-danger btn-no-border\"\r\n              >\r\n                <!-- deleteDocument($event, attachmentCardControl.value.item) -->\r\n                <mat-icon>delete</mat-icon>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <mat-spinner class=\"centered-spinner\"></mat-spinner>\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.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.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}.doc-item{display:flex;flex:1;padding-top:6px;padding-bottom:6px;justify-content:space-between;align-items:center;padding-inline-end:4px;cursor:pointer;border:1px solid;border-color:#d9dce2}.doc-item .item-content{display:flex;align-items:center;justify-content:space-between}.doc-item .file-icon{margin:4px;color:#465573;display:flex;align-items:center}.attachmentForm-container{width:100%;grid-row-gap:6px;row-gap:6px}.attachmentForm-container .formControl-wrapper{display:flex;align-items:center;justify-content:space-between;grid-column-gap:10px;column-gap:10px;padding-inline-end:5px;padding-inline-start:5px}.attachmentForm-container .formControl-wrapper .voc-form-control{width:50%}.attachmentForm-container .formControl-wrapper .textitem{width:100%}.attachmentForm-container .formControl-toggleitem{display:flex;align-items:center;justify-content:center}.btn-wrapper{display:flex;justify-content:flex-end}\n"], components: [{ type: i3__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: i1__namespace$6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: AttachmentsListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12827,14 +12839,6 @@
     }());
     DepartmentViewerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DepartmentViewerComponent, deps: [{ token: TranslationService$1 }, { token: DepartmentApiService }], target: i0__namespace.ɵɵFactoryTarget.Component });
     DepartmentViewerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: { label: "label", value: "value", dropdownId: "dropdownId", vertical: "vertical", withOutLabel: "withOutLabel", noStyle: "noStyle" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!noStyle\">\r\n  <div\r\n    class=\"my-dynamic-viewer\"\r\n    [ngClass]=\"{ vertical: vertical === true, 'with-out-label': withOutLabel }\"\r\n  >\r\n    <div class=\"my-label\" *ngIf=\"!withOutLabel\">{{ label | translate }}</div>\r\n    <div *ngIf=\"departmentName\" class=\"my-value\">\r\n      {{ departmentName }}\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"noStyle\">\r\n  {{ departmentName }}\r\n</ng-container>\r\n", styles: [""], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
-    __decorate([
-        tsCacheable.Cacheable({
-            maxCacheCount: 200,
-            storageStrategy: tsCacheable.LocalStorageStrategy,
-            cacheBusterObserver: departmentCacheBuster$,
-            maxAge: 120 * minute$1,
-        })
-    ], DepartmentViewerComponent.prototype, "getDepartment", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DepartmentViewerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12854,7 +12858,7 @@
                     type: i0.Input
                 }], noStyle: [{
                     type: i0.Input
-                }], getDepartment: [] } });
+                }] } });
 
     /**
      * @title
@@ -13191,7 +13195,7 @@
         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" }, outputs: { onRowSelected: "onRowSelected", 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 === '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              </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-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\">\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          <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      </div>\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>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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.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.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 .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}\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", "formate", "hijri", "withOutLabel"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__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: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }], pipes: { "translate": i1__namespace$1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    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" }, outputs: { onRowSelected: "onRowSelected", 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              </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-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\">\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          <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      </div>\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>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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.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.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 .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}\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", "formate", "hijri", "withOutLabel"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__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: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }], 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: [{
@@ -13514,7 +13518,7 @@
         DynamicTableComponent.prototype.getData = function () {
             var _this = this;
             this.loading = true;
-            var params = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.filterParams), this.queryParam), this.sortingBy), this.quickFilter), { currentPageIndex: this.pageNum - 1, pageSize: this.pageSize, offset: 0 });
+            var params = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.filterParams), this.queryParam), this.sortingBy), this.quickFilter), { currentPageIndex: this.pageNum - 1, pageSize: this.pageSize, offset: 0, dublincore_created_agg: this.range });
             // don't refresh all table in case of sorting only
             if (!this.sorting) { // used to not refreshing all table in case of sorting since table lose sorting state when refresh all table
                 this.rows = []; // used to refresh table to feel changes in actions when perform action and need to refresh actions
@@ -13533,11 +13537,16 @@
                 .subscribe(function (res) {
                 _this.loading = false;
                 res.entries.forEach(function (element) {
-                    if (element.properties && element.properties.creator) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                    console.log("element", element);
+                    if (element.properties && ((_a = element.properties) === null || _a === void 0 ? void 0 : _a.creator) && ((_b = element.properties.creator) === null || _b === void 0 ? void 0 : _b.properties)) {
                         element.properties.creator =
-                            element.properties.creator.properties.firstName +
+                            ((_d = (_c = element.properties.creator) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.firstName) +
                                 ' ' +
-                                element.properties.creator.properties.lastName;
+                                ((_f = (_e = element.properties.creator) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.lastName);
+                    }
+                    if (element.properties && ((_g = element.properties) === null || _g === void 0 ? void 0 : _g.assignee)) {
+                        element.properties.assignee = (_h = element.properties) === null || _h === void 0 ? void 0 : _h.assignee.fullName;
                     }
                 });
                 _this.totalRecords = res.resultsCount;
@@ -13567,7 +13576,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", rowCursor: "rowCursor", fullWidth: "fullWidth", tableMode: "tableMode", tableActions: "tableActions", defultSort: "defultSort" }, outputs: { onRowSelected: "onRowSelected", 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      (onRowSelected)=\"rowDetails($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.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.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:auto;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"], outputs: ["onRowSelected", "onIconSelected", "actionOnRow", "onSorting"] }, { type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
+    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" }, outputs: { onRowSelected: "onRowSelected", 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      (onRowSelected)=\"rowDetails($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.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.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:auto;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"], outputs: ["onRowSelected", "onIconSelected", "actionOnRow", "onSorting"] }, { type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13603,6 +13612,8 @@
                     type: i0.Input
                 }], quickFilter: [{
                     type: i0.Input
+                }], report: [{
+                    type: i0.Input
                 }], rowCursor: [{
                     type: i0.Input
                 }], fullWidth: [{
@@ -13613,6 +13624,8 @@
                     type: i0.Input
                 }], defultSort: [{
                     type: i0.Input
+                }], range: [{
+                    type: i0.Input
                 }] } });
 
     /**
@@ -13721,10 +13734,16 @@
         };
         DynamicSearchComponent.prototype.paginationChange = function (event) { };
         DynamicSearchComponent.prototype.getTableData = function (data) {
+            var _this = this;
             this.loading = false;
             this.aggregations = Object.entries(data.aggregations).map(function (item) {
                 return item[1];
             });
+            this.aggregations = this.aggregations.filter(function (item) { return _this.sortingArray.includes(item.id); });
+            this.aggregations = ___namespace.sortBy(this.aggregations, function (item) {
+                return _this.sortingArray.indexOf(item.id);
+            });
+            console.log('aggregations', this.aggregations);
             this.totalRecords = data.totalSize;
         };
         DynamicSearchComponent.prototype.submitForm = function () {
@@ -13756,7 +13775,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.ɵ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" }, ngImport: i0__namespace, template: "<div class=\"search-toolbar d-md-flex d-xl-none\">\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      <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]=\"aggregation.field === 'corr:to' ||aggregation.field === 'corr:from'\"\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  <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]=\"aggregation.field === 'corr:to' ||aggregation.field === 'corr:from'\"\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  <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          (onRowSelected)=\"openViewer($event)\"\r\n          (onGettingData)=\"getTableData($event)\"\r\n        ></cts-dynamic-table>\r\n      </div>\r\n    </app-card>\r\n  </div>\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</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.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.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"], 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", "rowCursor", "fullWidth", "tableMode", "tableActions", "defultSort"], outputs: ["onRowSelected", "actionOnRow", "onGettingData"] }, { type: i1__namespace$6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace$1.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+    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", sortingArray: "sortingArray" }, ngImport: i0__namespace, template: "<div class=\"search-toolbar d-md-flex d-xl-none\">\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      <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]=\"aggregation.field === 'corr:to' ||aggregation.field === 'corr:from'\"\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  <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]=\"aggregation.field === 'corr:to' ||aggregation.field === 'corr:from'\"\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  <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          (onRowSelected)=\"openViewer($event)\"\r\n          (onGettingData)=\"getTableData($event)\"\r\n        ></cts-dynamic-table>\r\n      </div>\r\n    </app-card>\r\n  </div>\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</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.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.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"], 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"], outputs: ["onRowSelected", "actionOnRow", "onGettingData"] }, { type: i1__namespace$6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3__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,
                 args: [{
@@ -13783,6 +13802,8 @@
                     type: i0.Input
                 }], sortingBy: [{
                     type: i0.Input
+                }], sortingArray: [{
+                    type: i0.Input
                 }] } });
 
     /**
@@ -14133,16 +14154,6 @@
             this.refreshData = new i0.EventEmitter();
             this.prefix = 'STATS.';
             this.size = 8;
-            this.colors = {
-                inProgress: '#3c3cf0',
-                registered: '#5a1496',
-                draft: '#596973',
-                archived: '#fbb62c',
-                closed: '#00dca5',
-                assigned: '#fd6670',
-                undefined: '#f7f8f9',
-                other: '#f17205',
-            };
             this.totalNumber = [
                 {
                     beforeDraw: function (chart) {
@@ -14217,6 +14228,59 @@
                     },
                 },
             ];
+            this.groupObjectBykey = function (data) {
+                var nameIndices = {};
+                var statusHash = {};
+                var chartData = { labels: [], datasets: [] };
+                data.forEach(function (item) {
+                    if (!(item.label in nameIndices)) {
+                        nameIndices[item.label] = chartData.labels.push(item.label) - 1;
+                        chartData.datasets.forEach(function (a) {
+                            a.data.push(0);
+                        });
+                    }
+                    if (!statusHash[item.status]) {
+                        statusHash[item.status] = Object.assign(Object.assign(Object.assign({ label: _this.translate.instant(item.status) + " (" + item.totalItems + ")" }, (item.status === 'Incoming' && {
+                            backgroundColor: '#00dca5',
+                        })), (item.status === 'Outgoing' && {
+                            backgroundColor: '#fbb62c',
+                        })), { data: chartData.labels.map(function () {
+                                return 0;
+                            }), barPercentage: 0.4, barThickness: 24, maxBarThickness: 30, minBarLength: 2 });
+                        chartData.datasets.push(statusHash[item.status]);
+                    }
+                    statusHash[item.status].data[nameIndices[item.label]] = item.count;
+                });
+                return chartData;
+            };
+            this.groupObjectBykeyLine = function (data) {
+                data.sort(function (left, right) {
+                    return moment__default['default'].utc(left.id).diff(moment__default['default'].utc(right.id));
+                });
+                var nameIndices = {};
+                var statusHash = {};
+                var chartData = { labels: [], datasets: [] };
+                data.forEach(function (item) {
+                    if (!(item.id in nameIndices)) {
+                        nameIndices[item.id] = chartData.labels.push(item.id) - 1;
+                        chartData.datasets.forEach(function (a) {
+                            a.data.push(0);
+                        });
+                    }
+                    if (!statusHash[item.status]) {
+                        statusHash[item.status] = Object.assign(Object.assign(Object.assign({ label: _this.translate.instant(item.status) + " (" + item.totalItems + ")" }, (item.status === 'Incoming' && {
+                            borderColor: '#00dca5',
+                        })), (item.status === 'Outgoing' && {
+                            borderColor: '#fbb62c',
+                        })), { fill: false, lineTension: 0, data: chartData.labels.map(function () {
+                                return 0;
+                            }) });
+                        chartData.datasets.push(statusHash[item.status]);
+                    }
+                    statusHash[item.status].data[nameIndices[item.id]] = item.count;
+                });
+                return chartData;
+            };
             this.translation.isArabic.subscribe(function (arabic) {
                 arabic ? (_this.isArabic = arabic) : (_this.isArabic = arabic);
             });
@@ -14230,6 +14294,8 @@
          */
         ChartDataService.prototype.multiSeriesPieChart = function (data) {
             var _this = this;
+            var provideColors = data.colors;
+            var prefix = data.prefix;
             var totalItems = data.totalItems;
             var dataArr = [];
             var labels = [];
@@ -14239,7 +14305,7 @@
             dataArr = data.data.slice(0, this.size).map(function (item, index) {
                 var numbers = data.data.map(function (item1, index1) { return index === index1 ? item.count : 0; });
                 var colors = data.data.slice(0, _this.size).map(function (item1, index1) {
-                    return _this.colors[item1.label];
+                    return provideColors[item1.label];
                 });
                 numbers.push(data.totalItems - item.count);
                 colors.push('#f7f8f9');
@@ -14251,7 +14317,7 @@
             });
             labels = data.data
                 .slice(0, this.size)
-                .map(function (item) { return _this.translate.instant(_this.prefix + item.label) + " (" + item.count + ")"; });
+                .map(function (item) { return _this.translate.instant(prefix + item.label) + " (" + item.count + ")"; });
             var chartData = {
                 datasets: dataArr,
                 labels: labels,
@@ -14293,27 +14359,29 @@
         };
         ChartDataService.prototype.doughnutChart = function (data) {
             var _this = this;
-            var totalItems = data.totalItems;
+            var provideColors = data.colors;
+            var prefix = data.prefix;
+            var totalItems = data.data.totalItems;
             var backgroundColor = [];
             var dataArr = [];
             var labels = [];
             //for aggregations
             var itemCount = 0;
             var otherItemsCount;
-            data.data.slice(0, this.size).forEach(function (item, index) {
-                backgroundColor.push(_this.colors[item.label]);
+            data.data.data.slice(0, this.size).forEach(function (item, index) {
+                backgroundColor.push(provideColors[item.label]);
                 dataArr.push(item.count);
                 itemCount = itemCount + item.count;
             });
-            labels = data.data.slice(0, this.size).map(function (item, index) {
-                return _this.translate.instant(_this.prefix + item.label) + " (" + item.count + ")";
+            labels = data.data.data.slice(0, this.size).map(function (item, index) {
+                return _this.translate.instant(prefix + item.label) + " (" + item.count + ")";
             });
             //aggregate other data
             otherItemsCount = totalItems - itemCount;
             if (otherItemsCount > 0) {
-                backgroundColor.push(this.colors['other']);
+                backgroundColor.push(provideColors['other']);
                 dataArr.push(otherItemsCount);
-                labels.push(this.translate.instant(this.prefix + 'other') + " (" + otherItemsCount + ")");
+                labels.push(this.translate.instant(prefix + 'other') + " (" + otherItemsCount + ")");
             }
             var chartData = {
                 datasets: [
@@ -14333,13 +14401,14 @@
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
-                    tooltips: { enabled: false },
+                    tooltips: { enabled: true },
                     cutoutPercentage: 30,
                     legend: {
                         labels: {
                             usePointStyle: true,
                             boxWidth: 8,
                         },
+                        display: true,
                         position: this.isArabic ? 'right' : 'left',
                         rtl: this.isArabic ? true : false,
                     },
@@ -14360,80 +14429,258 @@
             return { options: options, chartData: chartData };
         };
         ChartDataService.prototype.lineChart = function (data) {
+            data = this.groupObjectBykeyLine(data.data);
+            console.log('chart data', data);
             this.isArabic ? moment__default['default'].locale('ar-sa') : moment__default['default'].locale('en-us');
-            var chartData = {
-                labels: [
-                    '2015-03-15T13:03:00Z',
-                    '2015-03-25T13:02:00Z',
-                    '2015-04-25T14:12:00Z',
-                ],
-                datasets: [
-                    {
-                        data: [86, 114, 106],
-                        label: 'Africa',
-                        borderColor: '#3e95cd',
-                        fill: false,
-                    },
-                    {
-                        data: [282, 350, 411],
-                        label: 'Asia',
-                        borderColor: '#8e5ea2',
-                        fill: false,
-                    },
-                    {
-                        data: [168, 170, 178],
-                        label: 'Europe',
-                        borderColor: '#3cba9f',
-                        fill: false,
-                    },
-                    {
-                        data: [40, 20, 10],
-                        label: 'Latin America',
-                        borderColor: '#e8c3b9',
-                        fill: false,
-                    },
-                    {
-                        data: [6, 3, 2],
-                        label: 'North America',
-                        borderColor: '#c45850',
-                        fill: false,
-                    },
-                ],
-            };
+            var chartData = data;
             var options = {
                 type: 'line',
                 data: chartData,
                 options: {
+                    maintainAspectRatio: false,
                     scales: {
                         xAxes: [
                             {
                                 ticks: {
                                     autoSkip: true,
-                                    maxTicksLimit: 3,
+                                    maxTicksLimit: 12,
                                     source: 'labels',
                                 },
                                 type: 'time',
                                 time: {
                                     unit: 'week',
                                     displayFormats: {
-                                        week: 'MM-D-yyyy',
+                                        week: 'DD-MM-yyyy',
                                     },
                                 },
                             },
                         ],
+                        yAxes: [
+                            {
+                                ticks: {
+                                    min: 0,
+                                    precision: 0,
+                                },
+                            },
+                        ],
+                    },
+                    title: {
+                        display: true,
+                        text: '',
+                    },
+                    legend: {
+                        labels: {
+                            // usePointStyle: true,
+                            boxWidth: 12,
+                        },
+                        // position: 'bottom',
+                        rtl: this.isArabic ? true : false,
+                    },
+                },
+            };
+            return { options: options, chartData: chartData };
+        };
+        ChartDataService.prototype.GroupedBarChart = function (data) {
+            data = this.groupObjectBykey(data.data);
+            this.isArabic ? moment__default['default'].locale('ar-sa') : moment__default['default'].locale('en-us');
+            var chartData = data;
+            var options = {
+                type: 'bar',
+                data: chartData,
+                options: {
+                    plugins: {
+                        outlabels: {
+                            display: false,
+                        },
+                        labels: false,
+                    },
+                    barValueSpacing: 20,
+                    scales: {
+                        yAxes: [
+                            {
+                                ticks: {
+                                    min: 0,
+                                    precision: 0,
+                                },
+                            },
+                        ],
+                    },
+                    legend: {
+                        // position: 'bottom',
+                        labels: {
+                            boxWidth: 12,
+                        },
+                        rtl: this.isArabic ? true : false,
+                    },
+                },
+            };
+            return { options: options, chartData: chartData };
+        };
+        ChartDataService.prototype.BarChart = function (data) {
+            var provideColors = data.colors;
+            var prefix = data.prefix;
+            var totalItems = data.totalItems;
+            var backgroundColor = [];
+            var dataArr = [];
+            var labels = [];
+            data.data.data.forEach(function (item, index) {
+                backgroundColor.push('#2e62df');
+                dataArr.push(item.count);
+            });
+            labels = data.data.data.map(function (item, index) {
+                return "" + item.label;
+            });
+            var chartData = {
+                datasets: [
+                    {
+                        backgroundColor: backgroundColor,
+                        data: dataArr,
+                        barPercentage: 0.4,
+                        barThickness: 24,
+                        maxBarThickness: 30,
+                        minBarLength: 2,
+                    },
+                ],
+                labels: labels,
+            };
+            var options = {
+                type: 'bar',
+                data: chartData,
+                options: {
+                    plugins: {
+                        outlabels: {
+                            display: false,
+                        },
+                        labels: false,
+                    },
+                    barValueSpacing: 20,
+                    scales: {
+                        yAxes: [
+                            {
+                                ticks: {
+                                    min: 0,
+                                    precision: 0,
+                                },
+                            },
+                        ],
+                    },
+                    legend: {
+                        // position: 'bottom',
+                        display: false,
+                        // labels: {
+                        //   boxWidth: 12,
+                        // },
+                        // rtl: this.isArabic ? true : false,
+                    },
+                },
+            };
+            return { options: options, chartData: chartData };
+        };
+        ChartDataService.prototype.outlabeledPieChart = function (data) {
+            var provideColors = data.colors;
+            var prefix = data.prefix;
+            var totalItems = data.totalItems;
+            var backgroundColor = [];
+            var dataArr = [];
+            var labels = [];
+            data.data.data.forEach(function (item, index) {
+                backgroundColor.push(provideColors[item.label]);
+                dataArr.push(item.count);
+            });
+            labels = data.data.data.map(function (item, index) {
+                return "" + item.label;
+            });
+            var chartData = {
+                datasets: [
+                    {
+                        backgroundColor: backgroundColor,
+                        data: dataArr,
                     },
+                ],
+                labels: labels,
+            };
+            var options = {
+                type: 'outlabeledPie',
+                data: chartData,
+                options: {
+                    layout: {
+                        padding: {
+                            top: 33,
+                        },
+                    },
+                    zoomOutPercentage: 55,
+                    plugins: {
+                        legend: false,
+                        outlabels: {
+                            lineWidth: 0.8,
+                            lineColor: '#b4bac6',
+                            text: function (context) {
+                                var index = context.dataIndex;
+                                var label = context.labels[index];
+                                var num = context.percent * 100;
+                                var text = ___namespace.truncate(label, {
+                                    length: 24,
+                                }) + " " + num.toFixed(0) + "%";
+                                return text;
+                            },
+                            color: 'white',
+                            stretch: 20,
+                            font: {
+                                resizable: true,
+                                minSize: 12,
+                                maxSize: 18,
+                            },
+                        },
+                    },
+                },
+            };
+            return { options: options, chartData: chartData };
+        };
+        ChartDataService.prototype.pieChart = function (data) {
+            var provideColors = data.colors;
+            var prefix = data.prefix;
+            var totalItems = data.totalItems;
+            var backgroundColor = [];
+            var dataArr = [];
+            var labels = [];
+            data.data.data.forEach(function (item, index) {
+                backgroundColor.push(provideColors[item.label]);
+                dataArr.push(item.count);
+            });
+            labels = data.data.data.map(function (item, index) {
+                return "" + item.label;
+            });
+            var chartData = {
+                datasets: [
+                    {
+                        backgroundColor: backgroundColor,
+                        data: dataArr,
+                    },
+                ],
+                labels: labels,
+            };
+            var options = {
+                type: 'pie',
+                data: chartData,
+                options: {
                     title: {
                         display: true,
-                        text: 'World population per region (in millions)',
+                        text: prefix.length > 0 ? "" + this.translate.instant(prefix) : '',
                     },
+                    zoomOutPercentage: 55,
                     legend: {
                         labels: {
                             usePointStyle: true,
                             boxWidth: 8,
                         },
-                        position: 'bottom',
+                        // position: 'left',
                         rtl: this.isArabic ? true : false,
                     },
+                    plugins: {
+                        outlabels: {
+                            display: false,
+                        },
+                    },
                 },
             };
             return { options: options, chartData: chartData };
@@ -14451,50 +14698,86 @@
 
     /** @ignore */
     var DynamicChartComponent = /** @class */ (function () {
-        function DynamicChartComponent(translate, changeDetector, callApi, chartData) {
+        function DynamicChartComponent(translate, changeDetector, callApi, router, chartData) {
             var _this = this;
             this.translate = translate;
             this.changeDetector = changeDetector;
             this.callApi = callApi;
+            this.router = router;
             this.chartData = chartData;
+            this.prefix = 'STATS.'; // for translation
+            this.randomColors = false;
             this.onDestroy$ = new rxjs.Subject();
+            this.creatChart = new rxjs.Subject();
             this.headers = {}; // headers in constants
+            this.range = '["from_now-7d_to_now"]';
             this.selectedRange = "week"; // range to be filterd on
-            this.range = {
-                week: { label: "STATS.WEEK", value: '["from_now-7d_to_now"]' },
-                month: { label: "STATS.MONTH", value: '["from_now-1M_to_now"]' },
-                "6months": {
-                    label: "STATS.MONTHS6",
-                    value: '["from_now-6M_to_now"]',
-                },
-                year: { label: "STATS.YEAR", value: '["from_now-1y_to_now"]' },
+            this.colors = {
+                inProgress: '#3c3cf0',
+                registered: '#5a1496',
+                draft: '#596973',
+                archived: '#fbb62c',
+                closed: '#00dca5',
+                assigned: '#fd6670',
+                undefined: '#f7f8f9',
+                other: '#f17205',
             };
+            this.data = [];
+            this.isFetching = false;
+            this.randomColor = false;
+            this.combinedData = false;
+            this.card = false;
+            this.cardTitle = '';
             chart_js.Chart.defaults.global.defaultFontFamily = "FS Albert Arabic Web";
             chart_js.Chart.defaults.global.defaultFontSize = 13;
             this.translate.onLangChange
                 .pipe(operators.takeUntil(this.onDestroy$))
                 .subscribe(function (data) {
-                _this.createChart();
+                _this.creatChart.next();
             });
         }
         DynamicChartComponent.prototype.createChart = function () {
             var _this = this;
-            this.getData().subscribe(function (data) {
-                _this.changeDetector.detectChanges();
-                var _a = _this.chartData[_this.chartType](data), options = _a.options, chartData = _a.chartData;
-                if (data.data.length) {
-                    if (!_this.chartObj) {
-                        var ctx = _this.chart.nativeElement.getContext("2d");
-                        _this.chartObj = new chart_js.Chart(ctx, options);
+            this.creatChart.pipe(operators.debounceTime(500)).subscribe(function (res) {
+                _this.getData().subscribe(function (data) {
+                    var _a;
+                    _this.data = data;
+                    _this.changeDetector.detectChanges();
+                    var randomColors = {};
+                    if (_this.randomColors) {
+                        data.data.forEach(function (item) {
+                            randomColors[item.label] = _this.stringToHslColor("" + item.label, 40, 70);
+                        });
+                    }
+                    _this.colors = _this.randomColors ? randomColors : _this.colors;
+                    var _d = _this.chartData[_this.chartType]({
+                        data: data,
+                        colors: _this.colors,
+                        prefix: _this.prefix,
+                    }), options = _d.options, chartData = _d.chartData;
+                    if (((_a = data.data) === null || _a === void 0 ? void 0 : _a.length) || data.length) {
+                        if (!_this.chartObj) {
+                            var ctx = _this.chart.nativeElement.getContext('2d');
+                            _this.chartObj = new chart_js.Chart(ctx, options);
+                        }
+                        else {
+                            _this.chartObj.chart.data = chartData;
+                            _this.chartObj.update();
+                        }
                     }
                     else {
-                        _this.chartObj.chart.data = chartData;
-                        _this.chartObj.update();
+                        // const ctx = this.chart.nativeElement.getContext('2d');
+                        // let noOptions = {
+                        //   type: options.type,
+                        //   data: {
+                        //     datasets: [],
+                        //   },
+                        //   options: {},
+                        // };
+                        // this.chartObj = new Chart(ctx, noOptions);
+                        // this.chartObj.chart.data = [];
                     }
-                }
-                else {
-                    _this.chartObj = null;
-                }
+                });
             });
         };
         DynamicChartComponent.prototype.updateStats = function () {
@@ -14502,38 +14785,98 @@
         };
         DynamicChartComponent.prototype.ngOnInit = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    this.updateStats();
+                var _this = this;
+                return __generator(this, function (_d) {
+                    setTimeout(function () {
+                        _this.createChart();
+                        _this.creatChart.next();
+                    });
                     return [2 /*return*/];
                 });
             });
         };
         DynamicChartComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.selectedRange) {
-                this.updateStats();
+            var _this = this;
+            var _a, _b, _c;
+            var minChanged = changes.min && !((_a = changes.min) === null || _a === void 0 ? void 0 : _a.firstChange);
+            var maxChanged = changes.max && !((_b = changes.max) === null || _b === void 0 ? void 0 : _b.firstChange);
+            var rangeChanged = changes.range && !((_c = changes.range) === null || _c === void 0 ? void 0 : _c.firstChange);
+            if (minChanged || maxChanged || rangeChanged) {
+                setTimeout(function () {
+                    _this.creatChart.next();
+                });
             }
         };
         DynamicChartComponent.prototype.ngOnDestroy = function () {
+            this.myDataSubscription ? this.myDataSubscription.unsubscribe() : '';
             this.onDestroy$.next(true);
             this.onDestroy$.complete();
+            this.creatChart.unsubscribe();
         };
         DynamicChartComponent.prototype.getData = function () {
             var _this = this;
-            return this.callApi
+            this.isFetching = true;
+            if (this.combinedData) {
+                return this.getCombinedData(this.pageProvider, this.quickFilters, this.range, this.pageProviderTwo, this.quickFilterTwo, this.statusOne, this.statusTwo);
+            }
+            else {
+                return this.callApi
+                    .query({
+                    pageProvider: this.pageProvider,
+                    currentPageIndex: 0,
+                    offset: 0,
+                    pageSize: 1,
+                    dublincore_created_agg: this.range,
+                    quickFilters: this.quickFilters,
+                    dublincore_created_min: this.min,
+                    dublincore_created_max: this.max,
+                    system_currentLifeCycleState_3: JSON.stringify(this.systemCurrentLifeCycleState),
+                }, {
+                    headers: this.headers,
+                })
+                    .pipe(operators.map(function (data) {
+                    var items = data.aggregations[_this.aggregations].buckets
+                        ? data.aggregations[_this.aggregations].buckets.map(function (item) { return ({
+                            label: _this.fetchedKey
+                                ? ___namespace.get(item, _this.fetchedKey)
+                                : item.key,
+                            count: item.docCount,
+                        }); })
+                        : [];
+                    _this.isFetching = false;
+                    return {
+                        data: items,
+                        totalItems: data.totalSize,
+                    };
+                }));
+            }
+        };
+        DynamicChartComponent.prototype.getCombinedData = function (pageProviderOne, quickFilterOne, selectedRange, pageProviderTwo, quickFilterTwo, statusOne, statusTwo) {
+            var _this = this;
+            var getOutgoing$ = this.callApi
                 .query({
-                pageProvider: this.pageProvider,
+                pageProvider: pageProviderOne,
                 currentPageIndex: 0,
                 offset: 0,
                 pageSize: 1,
-                dublincore_created_agg: this.range[this.selectedRange].value,
+                dublincore_created_agg: selectedRange,
+                quickFilters: quickFilterOne,
+                dublincore_created_min: this.min,
+                dublincore_created_max: this.max,
+                system_currentLifeCycleState_3: JSON.stringify(this.systemCurrentLifeCycleState),
             }, {
                 headers: this.headers,
             })
                 .pipe(operators.map(function (data) {
                 var items = data.aggregations[_this.aggregations].buckets
                     ? data.aggregations[_this.aggregations].buckets.map(function (item) { return ({
-                        label: item.key,
+                        label: _this.fetchedKey
+                            ? ___namespace.get(item, _this.fetchedKey)
+                            : item.key,
                         count: item.docCount,
+                        id: item.key,
+                        status: statusOne,
+                        totalItems: data.totalSize,
                     }); })
                     : [];
                 return {
@@ -14541,11 +14884,91 @@
                     totalItems: data.totalSize,
                 };
             }));
+            var getIncoming$ = this.callApi
+                .query({
+                pageProvider: pageProviderTwo,
+                currentPageIndex: 0,
+                offset: 0,
+                pageSize: 1,
+                dublincore_created_agg: selectedRange,
+                quickFilters: quickFilterTwo,
+                dublincore_created_min: this.min,
+                dublincore_created_max: this.max,
+                system_currentLifeCycleState_3: JSON.stringify(this.systemCurrentLifeCycleState),
+            }, {
+                headers: this.headers,
+            })
+                .pipe(operators.map(function (data) {
+                var items = data.aggregations[_this.aggregations].buckets
+                    ? data.aggregations[_this.aggregations].buckets.map(function (item) { return ({
+                        label: _this.fetchedKey
+                            ? ___namespace.get(item, _this.fetchedKey)
+                            : item.key,
+                        count: item.docCount,
+                        id: item.key,
+                        status: statusTwo,
+                        totalItems: data.totalSize,
+                    }); })
+                    : [];
+                return {
+                    data: items,
+                    totalItems: data.totalSize,
+                };
+            }));
+            return rxjs.forkJoin([getOutgoing$, getIncoming$]).pipe(operators.map(function (data) {
+                var combinedData = __spreadArray(__spreadArray([], __read(data[0].data)), __read(data[1].data));
+                _this.isFetching = false;
+                return combinedData;
+            }));
+        };
+        DynamicChartComponent.prototype.previewCorrespondences = function () {
+            console.log("params", this.systemCurrentLifeCycleState);
+            var queryParams;
+            if (this.combinedData) {
+                queryParams = {
+                    combinedData: this.combinedData,
+                    pageProvider: this.pageProvider,
+                    headers: JSON.stringify(this.headers),
+                    range: this.range,
+                    aggregations: this.aggregations,
+                    quickFilterOne: this.quickFilters,
+                    quickFilterTwo: this.quickFilterTwo,
+                    systemCurrentLifeCycleState: this.systemCurrentLifeCycleState,
+                    statusOne: this.statusOne,
+                    statusTwo: this.statusTwo,
+                    min: this.min,
+                    max: this.max,
+                };
+            }
+            else {
+                queryParams = {
+                    combinedData: this.combinedData,
+                    pageProvider: this.pageProvider,
+                    quickFilterOne: this.quickFilters,
+                    headers: JSON.stringify(this.headers),
+                    range: this.range,
+                    aggregations: this.aggregations,
+                    systemCurrentLifeCycleState: this.systemCurrentLifeCycleState,
+                    min: this.min,
+                    max: this.max,
+                };
+            }
+            this.router.navigate(['report', 'chart-details'], {
+                queryParams: queryParams,
+            });
+        };
+        DynamicChartComponent.prototype.stringToHslColor = function (str, s, l) {
+            var hash = 0;
+            for (var i = 0; i < str.length; i++) {
+                hash = str.charCodeAt(i) + ((hash << 5) - hash);
+            }
+            var h = hash % 360;
+            return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
         };
         return DynamicChartComponent;
     }());
-    DynamicChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartComponent, deps: [{ token: i1__namespace$1.TranslateService }, { token: i0__namespace.ChangeDetectorRef }, { token: CallApiService }, { token: ChartDataService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DynamicChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DynamicChartComponent, selector: "cts-dynamic-chart", inputs: { prefix: "prefix", chartType: "chartType", pageProvider: "pageProvider", headers: "headers", aggregations: "aggregations", selectedRange: "selectedRange" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["revenueLineChart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"stat\">\r\n  <canvas #revenueLineChart></canvas>\r\n</div>\r\n<ng-template #noData>\r\n  <div class=\"no-stats\">\r\n    <span>{{ \"STATS.noData\" | translate }}</span>\r\n  </div>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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.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.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}.stat-box{box-sizing:border-box}.stat{width:70%;background-color:#fff;padding-top:4px;padding-bottom:4px}.no-stats{text-align:center;margin-top:16px;padding:4px;color:#757e8d}\n"], pipes: { "translate": i1__namespace$1.TranslatePipe } });
+    DynamicChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartComponent, deps: [{ token: i1__namespace$1.TranslateService }, { token: i0__namespace.ChangeDetectorRef }, { token: CallApiService }, { token: i1__namespace$5.Router }, { token: ChartDataService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DynamicChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: DynamicChartComponent, selector: "cts-dynamic-chart", inputs: { prefix: "prefix", chartType: "chartType", randomColors: "randomColors", pageProvider: "pageProvider", headers: "headers", observable: "observable", aggregations: "aggregations", quickFilters: "quickFilters", systemCurrentLifeCycleState: "systemCurrentLifeCycleState", range: "range", label: "label", selectedRange: "selectedRange", colors: "colors", randomColor: "randomColor", fetchedKey: "fetchedKey", pageProviderTwo: "pageProviderTwo", quickFilterTwo: "quickFilterTwo", combinedData: "combinedData", statusOne: "statusOne", statusTwo: "statusTwo", min: "min", max: "max", width: "width", height: "height", card: "card", cardTitle: "cardTitle" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["revenueLineChart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"card-continer\" *ngIf=\"card; else test\">\r\n  <div class=\"chart-card-header\">\r\n    <div class=\"chart-card-title\">{{ cardTitle | translate }}</div>\r\n    <button class=\"chart-card-button\" (click)=\"previewCorrespondences()\">\r\n      {{ \"report.Preview\" | translate }}\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"isFetching\">\r\n    <cts-spinner></cts-spinner>\r\n  </ng-container>\r\n  <div class=\"stat\" [style.height.px]=\"height\">\r\n    <div [hidden]=\"data.data?.length == 0 || data.length == 0\">\r\n      <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n    </div>\r\n    <div class=\"no-stats\" *ngIf=\"data.data?.length == 0 || data.length == 0\">\r\n      <span>{{ \"STATS.noData\" | translate }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #test>\r\n  <div class=\"stat\">\r\n    <canvas #revenueLineChart [height]=\"height\" [width]=\"width\"></canvas>\r\n  </div>\r\n</ng-template>\r\n\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.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.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.no-stats{width:100%;height:100%;display:grid;place-items:center}.card-continer{background:#ffffff;border-radius:5px;width:100%;padding:16px 20px;box-shadow:0 1px 1px #00000017}.card-continer .chart-card-header{display:flex;justify-content:space-between;align-items:center}.card-continer .chart-card-header .chart-card-title{font-weight:500}.card-continer .chart-card-header .chart-card-button{all:unset;background:#3341551a;color:#465573;padding:6px 18px;border-radius:24px;font-size:16px;cursor:pointer}.card-continer .chart-card-header .chart-card-button:hover{background:#8f98aa;color:#fff}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -14553,21 +14976,61 @@
                         templateUrl: "./dynamic-chart.component.html",
                         styleUrls: ["./dynamic-chart.component.scss"],
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.TranslateService }, { type: i0__namespace.ChangeDetectorRef }, { type: CallApiService }, { type: ChartDataService }]; }, propDecorators: { chart: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.TranslateService }, { type: i0__namespace.ChangeDetectorRef }, { type: CallApiService }, { type: i1__namespace$5.Router }, { type: ChartDataService }]; }, propDecorators: { chart: [{
                     type: i0.ViewChild,
-                    args: ["revenueLineChart"]
+                    args: ['revenueLineChart', { static: false }]
                 }], prefix: [{
                     type: i0.Input
                 }], chartType: [{
                     type: i0.Input
+                }], randomColors: [{
+                    type: i0.Input
                 }], pageProvider: [{
                     type: i0.Input
                 }], headers: [{
                     type: i0.Input
+                }], observable: [{
+                    type: i0.Input
                 }], aggregations: [{
                     type: i0.Input
+                }], quickFilters: [{
+                    type: i0.Input
+                }], systemCurrentLifeCycleState: [{
+                    type: i0.Input
+                }], range: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
                 }], selectedRange: [{
                     type: i0.Input
+                }], colors: [{
+                    type: i0.Input
+                }], randomColor: [{
+                    type: i0.Input
+                }], fetchedKey: [{
+                    type: i0.Input
+                }], pageProviderTwo: [{
+                    type: i0.Input
+                }], quickFilterTwo: [{
+                    type: i0.Input
+                }], combinedData: [{
+                    type: i0.Input
+                }], statusOne: [{
+                    type: i0.Input
+                }], statusTwo: [{
+                    type: i0.Input
+                }], min: [{
+                    type: i0.Input
+                }], max: [{
+                    type: i0.Input
+                }], width: [{
+                    type: i0.Input
+                }], height: [{
+                    type: i0.Input
+                }], card: [{
+                    type: i0.Input
+                }], cardTitle: [{
+                    type: i0.Input
                 }] } });
 
     /**
@@ -14682,6 +15145,15 @@
                     ],
                     options: {
                         responsive: true,
+                        outlabels: {
+                            display: false,
+                        },
+                        plugins: {
+                            outlabels: {
+                                display: false,
+                            },
+                            labels: false
+                        },
                         tooltips: { enabled: false },
                         elements: {
                             center: {
@@ -14723,7 +15195,6 @@
                     args: ['myChart']
                 }] } });
 
-    // import { ChartBoxComponent } from './chart-box/chart-box.component';
     /**
      * @title
      * Chart Module
@@ -14735,9 +15206,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: [i3.CommonModule, i1$1.TranslateModule], exports: [DynamicChartComponent,
+            DynamicSingleChartComponent], imports: [i3.CommonModule, i1$1.TranslateModule, LibrarySharedModule, i7.MatTooltipModule], exports: [DynamicChartComponent,
             DynamicSingleChartComponent] });
-    DynamicChartModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartModule, imports: [[i3.CommonModule, i1$1.TranslateModule]] });
+    DynamicChartModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartModule, imports: [[i3.CommonModule, i1$1.TranslateModule, LibrarySharedModule, i7.MatTooltipModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: DynamicChartModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -14745,7 +15216,7 @@
                             DynamicChartComponent,
                             DynamicSingleChartComponent
                         ],
-                        imports: [i3.CommonModule, i1$1.TranslateModule],
+                        imports: [i3.CommonModule, i1$1.TranslateModule, LibrarySharedModule, i7.MatTooltipModule],
                         exports: [
                             DynamicChartComponent,
                             DynamicSingleChartComponent
@@ -15698,7 +16169,7 @@
         return FilterComponent;
     }());
     FilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FilterComponent, deps: [{ token: i3__namespace$1.FormBuilder }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FilterComponent, selector: "cts-filter", inputs: { fields: "fields", filterTitle: "filterTitle" }, outputs: { onFiltering: "onFiltering" }, ngImport: i0__namespace, template: "<div class=\"filter-wrapper\">\r\n    <div class=\"filter-title\">\r\n        <!-- {{filterTitle | translate}} -->\r\n    </div>\r\n    <div class=\"iner-filter-wrapper\" *ngIf=\"filterForm\">\r\n        <form [formGroup]=\"filterForm\">\r\n            <div class=\"single-control-wrapper\" *ngFor=\"let field of fields\">\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'text'\">\r\n                    <app-dynamic-form-textitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                      }}\"\r\n                  >\r\n                  </app-dynamic-form-textitem>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'dropdown'\">\r\n                    <app-dynamic-form-vocabulary-item\r\n                    [shwoAllValues]=\"false\"\r\n                    [label]=\"field.label\"\r\n                    [bindLabel]=\"field.bindLabel\"\r\n                    [bindValue]=\"field.bindValue\"\r\n                    [placeholder]=\"field.placeholder | translate\"\r\n                    [multiple]=\"field.multiple\"\r\n                    [searchable]=\"field.searchable\"\r\n                    [closeOnSelect]=\"field.closeOnSelect\"\r\n                    [hideSelectedItems]=\"field.hideSelectedItems\"\r\n                    [vocabularyType]=\"field.vocabularyType\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-vocabulary-item>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'rang'\">\r\n                    <cts-dynamic-form-hijri-dateitem [label]=\"field.label\" [formControlName]=\"field.formControlName\"[range]=\"true\" [vertical]=\"false\" >\r\n                    </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'department'\">\r\n                    <app-dynamic-form-department\r\n                    [label]=\"field.label\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                    }}\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-department>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'toggle'\">\r\n                    <cts-dynamic-form-slide-toggleitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  ></cts-dynamic-form-slide-toggleitem>\r\n                </div>\r\n\r\n                <div   class=\"control\" *ngIf=\"field.type === 'date'\">\r\n                    <cts-dynamic-form-hijri-dateitem\r\n                    [formControlName]=\"field.formControlName\"\r\n                    [label]=\"field.label\"\r\n                  >\r\n                  </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n  \r\n\r\n            </div>\r\n\r\n        </form>\r\n           \r\n    </div>\r\n    <div class=\"form-actions\">\r\n        <button class=\"my-button mx-2\" type=\"button\" (click)=\"filter()\"> {{'FILTER' | translate}}</button>\r\n        <button class=\"my-button reset mx-2\" type=\"button\" (click)=\"reset()\"> {{'reset' | translate}}</button>\r\n    </div>\r\n</div>\r\n\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.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.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}.filter-wrapper .filter-title{font-size:18px;font-weight:bold;margin-bottom:15px}.filter-wrapper .iner-filter-wrapper{height:320px;overflow:auto;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;padding:15px 15px 0}.filter-wrapper .iner-filter-wrapper .single-control-wrapper{margin-bottom:15px}.filter-wrapper .form-actions{display:flex;justify-content:flex-start;align-content:center;padding:10px 15px}.filter-wrapper .form-actions .filter{border:none;background-color:transparent;font-weight:bold;width:80px;height:40px;background-image:linear-gradient(to bottom,#0dbab5,#2e62df);color:#fff;border-radius:5px}\n"], components: [{ type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly"], outputs: ["valueChanged"] }, { type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label"], outputs: ["onSelecting", "actionClicked"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
+    FilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FilterComponent, selector: "cts-filter", inputs: { fields: "fields", filterTitle: "filterTitle" }, outputs: { onFiltering: "onFiltering" }, ngImport: i0__namespace, template: "<div class=\"filter-wrapper\">\r\n    <div class=\"filter-title\">\r\n        <!-- {{filterTitle | translate}} -->\r\n    </div>\r\n    <div class=\"iner-filter-wrapper\" *ngIf=\"filterForm\">\r\n        <form [formGroup]=\"filterForm\">\r\n            <div class=\"single-control-wrapper\" *ngFor=\"let field of fields\">\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'text'\">\r\n                    <app-dynamic-form-textitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                      }}\"\r\n                  >\r\n                  </app-dynamic-form-textitem>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'dropdown'\">\r\n                    <app-dynamic-form-vocabulary-item\r\n                    [shwoAllValues]=\"false\"\r\n                    [label]=\"field.label\"\r\n                    [bindLabel]=\"field.bindLabel\"\r\n                    [bindValue]=\"field.bindValue\"\r\n                    [placeholder]=\"field.placeholder | translate\"\r\n                    [multiple]=\"field.multiple\"\r\n                    [searchable]=\"field.searchable\"\r\n                    [closeOnSelect]=\"field.closeOnSelect\"\r\n                    [hideSelectedItems]=\"field.hideSelectedItems\"\r\n                    [vocabularyType]=\"field.vocabularyType\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-vocabulary-item>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'rang'\">\r\n                    <cts-dynamic-form-hijri-dateitem [label]=\"field.label\" [formControlName]=\"field.formControlName\"[range]=\"true\" [vertical]=\"false\" >\r\n                    </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'department'\">\r\n                    <app-dynamic-form-department\r\n                    [label]=\"field.label\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                    }}\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-department>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'toggle'\">\r\n                    <cts-dynamic-form-slide-toggleitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  ></cts-dynamic-form-slide-toggleitem>\r\n                </div>\r\n\r\n                <div   class=\"control\" *ngIf=\"field.type === 'date'\">\r\n                    <cts-dynamic-form-hijri-dateitem\r\n                    [formControlName]=\"field.formControlName\"\r\n                    [label]=\"field.label\"\r\n                  >\r\n                  </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n  \r\n\r\n            </div>\r\n\r\n        </form>\r\n           \r\n    </div>\r\n    <div class=\"form-actions\">\r\n        <button class=\"my-button mx-2\" type=\"button\" (click)=\"filter()\"> {{'FILTER' | translate}}</button>\r\n        <button class=\"my-button reset mx-2\" type=\"button\" (click)=\"reset()\"> {{'reset' | translate}}</button>\r\n    </div>\r\n</div>\r\n\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.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.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}.filter-wrapper .filter-title{font-size:18px;font-weight:bold;margin-bottom:15px}.filter-wrapper .iner-filter-wrapper{height:320px;overflow:auto;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;padding:15px 15px 0}.filter-wrapper .iner-filter-wrapper .single-control-wrapper{margin-bottom:15px}.filter-wrapper .form-actions{display:flex;justify-content:flex-start;align-content:center;padding:10px 15px}.filter-wrapper .form-actions .filter{border:none;background-color:transparent;font-weight:bold;width:80px;height:40px;background-image:linear-gradient(to bottom,#0dbab5,#2e62df);color:#fff;border-radius:5px}\n"], components: [{ type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly"], outputs: ["valueChanged"] }, { type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label"], outputs: ["onSelecting", "actionClicked"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1__namespace$1.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FilterComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -17117,7 +17588,7 @@
         return VersionsComponent;
     }());
     VersionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: VersionsComponent, deps: [{ token: ViewerFilesService }, { token: DocumentsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    VersionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: VersionsComponent, selector: "cts-versions", inputs: { selectedVersion: "selectedVersion", file: "file" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"viewer-attachments\">\r\n  <div class=\"subheader\">\r\n    <div> {{ \"viewer.origin\" | translate }}</div>\r\n\r\n  </div>\r\n  <div class=\"attachments-list\">\r\n    <mat-list>\r\n      <div class=\"mat-list-items\">\r\n        <cts-item-list [item]=\"file\" [title]=\"file.title\" [iconname]=\"'description'\" [moreclasses]=\"'text-danger'\"\r\n          (itemClicked)=\"showVersion(file)\">\r\n          <div class=\"description\">\r\n            {{ file.properties.major_version }}.{{\r\n              file.properties.minor_version\r\n            }}\r\n            -\r\n            {{ file.lastModified | localizedDate }}\r\n          </div>\r\n        </cts-item-list>\r\n      </div>\r\n    </mat-list>\r\n  </div>\r\n</div>\r\n<div class=\"viewer-attachments\">\r\n  <div class=\"subheader\">\r\n    <div> {{ \"viewer.history\" | translate }}</div>\r\n\r\n  </div>\r\n  <div class=\"attachments-list\" *ngIf=\"versions.length > 0\">\r\n    <ng-container >\r\n\r\n\r\n      <mat-list>\r\n        <div class=\"mat-list-items\" *ngFor=\"let version of versions ;let cnt = count; let i = index\">\r\n          <cts-item-list [item]=\"version\" [title]=\"version.title + ' - ' + ( cnt - (i-1) - 1 ) \" [iconname]=\"'description'\"\r\n            [moreclasses]=\"'text-danger'\" (itemClicked)=\"showVersion(version)\">\r\n            <div class=\"description\">\r\n              {{ version.properties.major_version }}.{{\r\n              version.properties.minor_version\r\n              }}\r\n              -\r\n              {{ version.lastModified | localizedDate }}\r\n              <span class=\"font-weight-bold\">\r\n                {{\r\n                  version.properties.lastContributor.properties.firstName +\r\n                    \" \" +\r\n                    version.properties.lastContributor.properties.lastName\r\n                }}\r\n              </span>\r\n            </div>\r\n          </cts-item-list>\r\n        </div>\r\n      </mat-list>\r\n    </ng-container>\r\n  </div>\r\n  <div *ngIf=\"versions.length === 0\">\r\n    <cts-no-data></cts-no-data>\r\n  </div>\r\n</div>\r\n<ng-template #noEntry>\r\n  \r\n</ng-template>\r\n", styles: [""], components: [{ type: i2__namespace$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: ItemListComponent, selector: "cts-item-list", inputs: ["item", "iconname", "title", "actions", "isselected", "moreclasses"], outputs: ["itemClicked", "actionclicked"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace$1.TranslatePipe, "localizedDate": LocalizedDatePipe } });
+    VersionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: VersionsComponent, selector: "cts-versions", inputs: { selectedVersion: "selectedVersion", file: "file" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"viewer-attachments\">\r\n  <div class=\"subheader\">\r\n    <div> {{ \"viewer.current\" | translate }}</div>\r\n\r\n  </div>\r\n  <div class=\"attachments-list\">\r\n    <mat-list>\r\n      <div class=\"mat-list-items\">\r\n        <cts-item-list [item]=\"file\" [title]=\"file.title\" [iconname]=\"'description'\" [moreclasses]=\"'text-danger'\"\r\n          (itemClicked)=\"showVersion(file)\">\r\n          <div class=\"description\">\r\n            {{ file.properties.major_version }}.{{\r\n              file.properties.minor_version\r\n            }}\r\n            -\r\n            {{ file.lastModified | localizedDate }}\r\n          </div>\r\n        </cts-item-list>\r\n      </div>\r\n    </mat-list>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"viewer-attachments\" *ngIf=\"versions.length > 0\">\r\n  <div class=\"subheader\">\r\n    <div>{{ \"viewer.origin\" | translate }}</div>\r\n  </div>\r\n  <div class=\"attachments-list\">\r\n    <mat-list>\r\n      <div class=\"mat-list-items\">\r\n        <cts-item-list\r\n        [item]=\"versions[versions.length -1]\"\r\n        [title]=\"versions[versions.length -1].title\"\r\n        [iconname]=\"'description'\"\r\n        [moreclasses]=\"'text-danger'\"\r\n        (itemClicked)=\"showVersion(versions[versions.length -1])\"\r\n        >\r\n          \r\n        </cts-item-list>\r\n      </div>\r\n    </mat-list>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"viewer-attachments\">\r\n  <div class=\"subheader\">\r\n    <div> {{ \"viewer.history\" | translate }}</div>\r\n\r\n  </div>\r\n  <div class=\"attachments-list\" *ngIf=\"versions.length > 0\">\r\n    <ng-container >\r\n\r\n\r\n      <mat-list>\r\n        <div class=\"mat-list-items\" *ngFor=\"let version of versions ;let cnt = count; let i = index\">\r\n          <cts-item-list [item]=\"version\" [title]=\"version.title + ' - ' + ( cnt - (i-1) - 1 ) \" [iconname]=\"'description'\"\r\n            [moreclasses]=\"'text-danger'\" (itemClicked)=\"showVersion(version)\">\r\n            <div class=\"description\">\r\n              {{ version.properties.major_version }}.{{\r\n              version.properties.minor_version\r\n              }}\r\n              -\r\n              {{ version.lastModified | localizedDate }}\r\n              <span class=\"font-weight-bold\">\r\n                {{\r\n                  version.properties.lastContributor.properties.firstName +\r\n                    \" \" +\r\n                    version.properties.lastContributor.properties.lastName\r\n                }}\r\n              </span>\r\n            </div>\r\n          </cts-item-list>\r\n        </div>\r\n      </mat-list>\r\n    </ng-container>\r\n  </div>\r\n  <div *ngIf=\"versions.length === 0\">\r\n    <cts-no-data></cts-no-data>\r\n  </div>\r\n</div>\r\n<ng-template #noEntry>\r\n  \r\n</ng-template>\r\n", styles: [""], components: [{ type: i2__namespace$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: ItemListComponent, selector: "cts-item-list", inputs: ["item", "iconname", "title", "actions", "isselected", "moreclasses"], outputs: ["itemClicked", "actionclicked"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace$1.TranslatePipe, "localizedDate": LocalizedDatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: VersionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -18076,6 +18547,7 @@
     exports.ViewerFilesService = ViewerFilesService;
     exports.ViewerLogComponent = ViewerLogComponent;
     exports.ViewerLogModule = ViewerLogModule;
+    exports.VocabularyApiService = VocabularyApiService;
     exports.VocabularyComponent = VocabularyComponent;
     exports.VocabularyModule = VocabularyModule;
     exports.appInitializer = appInitializer;