nuxeo-development-framework 5.3.6 → 5.3.8

package/fesm2015/nuxeo-development-framework.js

@@ -28,7 +28,7 @@ import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i3$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i6 from '@angular/material/tooltip';
+import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { merge } from 'lodash-es';
 import * as moment$6 from 'moment';
@@ -37,7 +37,7 @@ import _omit from 'lodash/omit';
 import _assign from 'lodash/assign';
 import _cloneDeep from 'lodash/cloneDeep';
 import * as _ from 'lodash';
-import ___default, { filter, sortBy, each, unionWith, isEqual, cloneDeep, isNil, isObject as isObject$1, isDate, isBoolean, isNumber, union, assign, keyBy, values } from 'lodash';
+import ___default, { filter, sortBy, each, unionWith, isEqual, cloneDeep, isNil, isObject as isObject$1, isDate, isBoolean, isNumber, keys, trim, get, set, values, union, assign, keyBy } from 'lodash';
 import * as i1$4 from '@angular/platform-browser';
 import { BrowserTransferStateModule } from '@angular/platform-browser';
 import moment$8 from 'moment-es6';
@@ -49,7 +49,7 @@ import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i3$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i6$1 from 'angular-ng-autocomplete';
+import * as i6 from 'angular-ng-autocomplete';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import * as i2$3 from '@angular/material/core';
 import { MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
@@ -59,9 +59,9 @@ import * as i5 from '@ng-select/ng-select';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 import * as i1$7 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i7 from '@angular/material/chips';
+import * as i7$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i6$2 from '@angular/material/expansion';
+import * as i6$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i1$c from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -75,7 +75,7 @@ import * as i2$5 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i1$9 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i6$3 from '@busacca/ng-pick-datetime';
+import * as i6$2 from '@busacca/ng-pick-datetime';
 import { OWL_DATE_TIME_FORMATS, OwlDateTimeIntl, OwlDateTimeModule, OwlNativeDateTimeModule } from '@busacca/ng-pick-datetime';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import * as i3$3 from 'angular-formio';
@@ -92,13 +92,14 @@ import { DatatableComponent, NgxDatatableModule } from '@swimlane/ngx-datatable'
 import * as i1$b from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i7$1 from '@angular/cdk/drag-drop';
+import * as i7$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i5$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i5$4 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
 import * as moment$7 from 'moment/moment';
+import stringHash from 'string-hash';
 import * as i5$5 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
 import Dynamsoft from 'dwt';
@@ -132,13 +133,13 @@ import { MinimapPlugin } from 'rete-minimap-plugin';
 import { curveLinear } from 'd3-shape';
 import { ConnectionPathPlugin, Transformers } from 'rete-connection-path-plugin';
 import { getDOMSocketPosition } from 'rete-render-utils';
-import * as i7$2 from '@angular/material/badge';
+import * as i7$3 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import colorLib from '@kurkle/color';
 import * as i2$8 from 'ngx-markdown';
 import { MarkdownModule } from 'ngx-markdown';
-import * as i6$4 from '@angular/cdk/accordion';
+import * as i6$3 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 
 class NuxeoDevelopmentFrameworkComponent {
@@ -1863,7 +1864,7 @@ class NdfNuxeoDialog extends BaseComponent {
     }
 }
 NdfNuxeoDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfNuxeoDialog, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NdfNuxeoDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: { dialogTitle: "dialogTitle", subTitle: "subTitle", panelClass: "panelClass", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div SetDirRtl class=\"ndf-dialog-wrapper flex flex-col h-full\" [class]=\"data?.dialogConfig?.panelClass ?? panelClass\">\r\n\t<div\r\n\t\tclass=\"dialog-header flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7\"\r\n\t>\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\">{{ data?.dialogConfig?.subTitle || subTitle }}</span>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\"> </mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div\r\n\t\t#dialogBody\r\n\t\tclass=\"dialog-body flex flex-col gap-y-4 p-6 overflow-y-auto relative z-99\"\r\n\t\t[ngClass]=\"{'overflow-hidden': loading}\"\r\n\t>\r\n\t\t<ng-container *ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate ; context: { dialog: this }\"></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div class=\"ndf-dialog-overlay z-999\" [ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"ndf-dialog-loader z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner [value]=\"90\" [strokeWidth]=\"4\" overlay=\"true\" [diameter]=\"40\" color=\"primary\"> </mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"block w-full h-px absolute inset-0 z-9999\" *ngIf=\"loaderMode === 'progressBar'\">\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-between p-6 pt-0 gap-x-4\">\r\n\t\t<span>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"footerTemplate; context: { dialog: this }\"></ng-container>\r\n\t\t</span>\r\n\t\t<span class=\"flex gap-x-4\">\r\n\t\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">{{\"BUTTONS.CANCEL\" | translate}}</button>\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t\t></ng-container>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper .dialog-body{height:100%;max-height:var(--dialog-body-max-height, calc(100vh - 208px))}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay,.ndf-dialog-wrapper .dialog-body .ndf-dialog-loader{display:flex;width:100%;height:100%;align-items:center;justify-content:center;position:absolute;left:0px;bottom:0px;right:0px}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay{background-color:#cbd5e166}:host{height:100%;display:block}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe } });
+NdfNuxeoDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: { dialogTitle: "dialogTitle", subTitle: "subTitle", panelClass: "panelClass", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div SetDirRtl class=\"ndf-dialog-wrapper flex flex-col h-full\" [class]=\"data?.dialogConfig?.panelClass ?? panelClass\">\r\n\t<div\r\n\t\tclass=\"dialog-header flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7\"\r\n\t>\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\">{{ data?.dialogConfig?.subTitle || subTitle }}</span>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\"> </mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div\r\n\t\t#dialogBody\r\n\t\tclass=\"dialog-body flex flex-col gap-y-4 p-6 overflow-y-auto relative z-99\"\r\n\t\t[ngClass]=\"{'overflow-hidden': loading}\"\r\n\t>\r\n\t\t<ng-container *ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate ; context: { dialog: this }\"></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div class=\"ndf-dialog-overlay z-999\" [ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"ndf-dialog-loader z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner [value]=\"90\" [strokeWidth]=\"4\" overlay=\"true\" [diameter]=\"40\" color=\"primary\"> </mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"block w-full h-px absolute inset-0 z-9999\" *ngIf=\"loaderMode === 'progressBar'\">\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-between p-6 pt-0 gap-x-4\">\r\n\t\t<span>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"footerTemplate; context: { dialog: this }\"></ng-container>\r\n\t\t</span>\r\n\t\t<span class=\"flex gap-x-4\">\r\n\t\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">{{\"BUTTONS.CANCEL\" | translate}}</button>\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t\t></ng-container>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper .dialog-body{height:100%;max-height:var(--dialog-body-max-height, calc(100vh - 208px))}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay,.ndf-dialog-wrapper .dialog-body .ndf-dialog-loader{display:flex;width:100%;height:100%;align-items:center;justify-content:center;position:absolute;left:0px;bottom:0px;right:0px}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay{background-color:#cbd5e166}:host{height:100%;display:block}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfNuxeoDialog, decorators: [{
             type: Component,
             args: [{
@@ -4009,7 +4010,7 @@ class ItemListComponent {
     }
 }
 ItemListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ItemListComponent, deps: [{ token: ViewerFilesService }], target: i0.ɵɵFactoryTarget.Component });
-ItemListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemListComponent, selector: "cts-item-list", inputs: { item: "item", iconname: "iconname", title: "title", actions: "actions", isselected: "isselected", moreclasses: "moreclasses" }, outputs: { itemClicked: "itemClicked", actionclicked: "actionclicked" }, ngImport: i0, template: "\r\n<mat-list-item class=\"list-item\" (click)=\"itemlistClick()\" [ngClass]=\"{\r\n    'list-item-selected': selectedId == item.uid\r\n  }\">\r\n  <div class=\"direction\"><i class=\"incoming bi bi-box-arrow-down\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'incoming'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"outcoming bi bi-box-arrow-up\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'outgoing'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"internal bi bi-box-arrow-right\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'interenal'\"></i></div>\r\n\r\n  <mat-icon *ngIf=\"iconname\" mat-list-icon class=\"icon {{moreclasses}}\">{{\r\n    iconname\r\n    }}</mat-icon>\r\n\r\n    <span class=\"icon-Revew new-icon\"></span>\r\n    <ng-content select=\".icon\"></ng-content>\r\n\r\n  <div class=\"content\">\r\n    <div *ngIf=\"title\" mat-line [matTooltip]=\"title\">{{ title }}</div>\r\n  <div mat-line>\r\n    <ng-content select=\".description\"> </ng-content>\r\n  </div>\r\n</div>\r\n  <button class=\"menu-item-action\" *ngIf=\"actions?.length\" (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\" class=\"actionMenuWrapper\">\r\n    <div SetRtl class=\"flex flex-col justify-between\">\r\n      <ng-container *ngFor=\"let menu_item of actions\">\r\n        <button mat-menu-item class=\"{{menu_item.action_Style}}\" (click)=\"menuactionClicked(menu_item.name, item)\">\r\n          <i class=\"{{menu_item.icon}}\" *ngIf=\"menu_item.icon\"></i>\r\n          <span class=\"{{menu_item.title_Style}}\">{{ menu_item.title | translate }}</span>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </mat-menu>\r\n</mat-list-item>\r\n", styles: [".list-item{font-size:16px;cursor:pointer;height:55px!important}.list-item .new-icon{display:none}.list-item .mat-list-item-content{padding:0!important}.list-item .mat-list-item-content .icon{padding:0 4px;font-size:35px;width:auto;height:auto}.list-item .mat-list-item-content .icon.link-relation{font-size:25px}.list-item .mat-list-item-content .icon.attachment-icon{font-size:25px}.list-item .mat-list-item-content .content{width:100%;margin:0;overflow:hidden;text-overflow:ellipsis}.list-item .mat-list-item-content .content .mat-line{font-size:16px;color:#212529}.list-item .mat-list-item-content .content .mat-line .description{font-size:12px}.list-item a{color:#000}.list-item .menu-item-action{font-size:20px;border:0;background:transparent}.list-item .direction{font-size:20px}.list-item .direction .incoming{color:#00dca5}.list-item .direction .outcoming{color:#fbb62c}.list-item:hover{background-color:#f5f6f8}.list-item-selected{background-color:#f5f6f8}\n"], components: [{ type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i2$3.MatLine, selector: "[mat-line], [matLine]" }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+ItemListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemListComponent, selector: "cts-item-list", inputs: { item: "item", iconname: "iconname", title: "title", actions: "actions", isselected: "isselected", moreclasses: "moreclasses" }, outputs: { itemClicked: "itemClicked", actionclicked: "actionclicked" }, ngImport: i0, template: "\r\n<mat-list-item class=\"list-item\" (click)=\"itemlistClick()\" [ngClass]=\"{\r\n    'list-item-selected': selectedId == item.uid\r\n  }\">\r\n  <div class=\"direction\"><i class=\"incoming bi bi-box-arrow-down\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'incoming'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"outcoming bi bi-box-arrow-up\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'outgoing'\"></i></div>\r\n\r\n  <div class=\"direction\"><i class=\"internal bi bi-box-arrow-right\" *ngIf=\"!iconname&&item.direction?.toLowerCase() === 'interenal'\"></i></div>\r\n\r\n  <mat-icon *ngIf=\"iconname\" mat-list-icon class=\"icon {{moreclasses}}\">{{\r\n    iconname\r\n    }}</mat-icon>\r\n\r\n    <span class=\"icon-Revew new-icon\"></span>\r\n    <ng-content select=\".icon\"></ng-content>\r\n\r\n  <div class=\"content\">\r\n    <div *ngIf=\"title\" mat-line [matTooltip]=\"title\">{{ title }}</div>\r\n  <div mat-line>\r\n    <ng-content select=\".description\"> </ng-content>\r\n  </div>\r\n</div>\r\n  <button class=\"menu-item-action\" *ngIf=\"actions?.length\" (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\">\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\" class=\"actionMenuWrapper\">\r\n    <div SetRtl class=\"flex flex-col justify-between\">\r\n      <ng-container *ngFor=\"let menu_item of actions\">\r\n        <button mat-menu-item class=\"{{menu_item.action_Style}}\" (click)=\"menuactionClicked(menu_item.name, item)\">\r\n          <i class=\"{{menu_item.icon}}\" *ngIf=\"menu_item.icon\"></i>\r\n          <span class=\"{{menu_item.title_Style}}\">{{ menu_item.title | translate }}</span>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </mat-menu>\r\n</mat-list-item>\r\n", styles: [".list-item{font-size:16px;cursor:pointer;height:55px!important}.list-item .new-icon{display:none}.list-item .mat-list-item-content{padding:0!important}.list-item .mat-list-item-content .icon{padding:0 4px;font-size:35px;width:auto;height:auto}.list-item .mat-list-item-content .icon.link-relation{font-size:25px}.list-item .mat-list-item-content .icon.attachment-icon{font-size:25px}.list-item .mat-list-item-content .content{width:100%;margin:0;overflow:hidden;text-overflow:ellipsis}.list-item .mat-list-item-content .content .mat-line{font-size:16px;color:#212529}.list-item .mat-list-item-content .content .mat-line .description{font-size:12px}.list-item a{color:#000}.list-item .menu-item-action{font-size:20px;border:0;background:transparent}.list-item .direction{font-size:20px}.list-item .direction .incoming{color:#00dca5}.list-item .direction .outcoming{color:#fbb62c}.list-item:hover{background-color:#f5f6f8}.list-item-selected{background-color:#f5f6f8}\n"], components: [{ type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i2$3.MatLine, selector: "[mat-line], [matLine]" }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ItemListComponent, decorators: [{
             type: Component,
             args: [{
@@ -4548,7 +4549,7 @@ class CommentItemComponent {
     }
 }
 CommentItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentItemComponent, deps: [{ token: TranslationService }, { token: i1$3.MatDialog }, { token: NuxeoDialogService }], target: i0.ɵɵFactoryTarget.Component });
-CommentItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentItemComponent, selector: "app-comment-item", inputs: { comment: "comment", loaderType: "loaderType", showCommentActions: "showCommentActions" }, outputs: { refreshCommentList: "refreshCommentList" }, ngImport: i0, template: "<div class=\"comment-item\" SetRtl>\r\n\r\n  <div class=\"comment-controls\" *ngIf=\"showCommentActions\">\r\n    <span class=\"bi bi-pencil contril-icon\" \r\n    *permission=\"{name: 'updateComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.EDIT' | translate }}\"\r\n     (click)=\"executeFunction('edit')\"\r\n     ></span>\r\n\r\n    <span class=\"bi bi-trash contril-icon\" \r\n    *permission=\"{name: 'deleteComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.Delete' | translate }}\"\r\n    (click)=\"executeFunction('delete')\"\r\n    ></span>\r\n  </div>\r\n\r\n  <app-user-card [user]=\"comment.Commenter\" [diameter]=\"12\">\r\n    <div class=\"lineOne\">\r\n      {{lang === 'en' ? (comment.Commenter.fullName) : (comment.Commenter.fullNameAr ? comment.Commenter.fullNameAr : comment.Commenter.fullName)}}\r\n    </div>\r\n    <div class=\"lineOnePart2\">\r\n      <span class=\"date\" matTooltip='{{ comment?.creationDate | localizedDate:\r\n        \"fullDate\"}}' matTooltipClass=\"tdf-tooltip\" TooltipPosition='below'>\r\n        <span class=\"date-sperator px-1\">|</span>{{ comment?.creationDate | timeAgo : lang }}</span>\r\n    </div>\r\n    <div class=\"lineTwo\">\r\n      <app-read-more class=\"comment-text\" [text]=\"comment?.text\" [wordCount]=\"loaderType === 'scroll' ? 20 : 60\">\r\n      </app-read-more>\r\n    </div>\r\n  </app-user-card>\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.comment-item{border:1px solid #d9dce2;padding:8px 4px;display:flex;position:relative}.comment-item:hover{background:#f5f6f8}.comment-item .comment-controls{position:absolute;right:5px}.comment-item .comment-controls .contril-icon{padding:0 5px;cursor:pointer}.date{color:#3c3cf0}.comment-text{color:#8f98aa}.comment-avatar{align-items:top;padding:0 4px;display:flex}.comment-avatar .avatar{width:40px;height:40px;display:block}.rtl .comment-controls{left:5px;right:auto}\n"], components: [{ type: UserCardComponent, selector: "app-user-card", inputs: ["user", "diameter"] }, { type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "charCount", "wordCount", "lineBreaks"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe, "timeAgo": TimeAgoPipe } });
+CommentItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentItemComponent, selector: "app-comment-item", inputs: { comment: "comment", loaderType: "loaderType", showCommentActions: "showCommentActions" }, outputs: { refreshCommentList: "refreshCommentList" }, ngImport: i0, template: "<div class=\"comment-item\" SetRtl>\r\n\r\n  <div class=\"comment-controls\" *ngIf=\"showCommentActions\">\r\n    <span class=\"bi bi-pencil contril-icon\" \r\n    *permission=\"{name: 'updateComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.EDIT' | translate }}\"\r\n     (click)=\"executeFunction('edit')\"\r\n     ></span>\r\n\r\n    <span class=\"bi bi-trash contril-icon\" \r\n    *permission=\"{name: 'deleteComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.Delete' | translate }}\"\r\n    (click)=\"executeFunction('delete')\"\r\n    ></span>\r\n  </div>\r\n\r\n  <app-user-card [user]=\"comment.Commenter\" [diameter]=\"12\">\r\n    <div class=\"lineOne\">\r\n      {{lang === 'en' ? (comment.Commenter.fullName) : (comment.Commenter.fullNameAr ? comment.Commenter.fullNameAr : comment.Commenter.fullName)}}\r\n    </div>\r\n    <div class=\"lineOnePart2\">\r\n      <span class=\"date\" matTooltip='{{ comment?.creationDate | localizedDate:\r\n        \"fullDate\"}}' matTooltipClass=\"tdf-tooltip\" TooltipPosition='below'>\r\n        <span class=\"date-sperator px-1\">|</span>{{ comment?.creationDate | timeAgo : lang }}</span>\r\n    </div>\r\n    <div class=\"lineTwo\">\r\n      <app-read-more class=\"comment-text\" [text]=\"comment?.text\" [wordCount]=\"loaderType === 'scroll' ? 20 : 60\">\r\n      </app-read-more>\r\n    </div>\r\n  </app-user-card>\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.comment-item{border:1px solid #d9dce2;padding:8px 4px;display:flex;position:relative}.comment-item:hover{background:#f5f6f8}.comment-item .comment-controls{position:absolute;right:5px}.comment-item .comment-controls .contril-icon{padding:0 5px;cursor:pointer}.date{color:#3c3cf0}.comment-text{color:#8f98aa}.comment-avatar{align-items:top;padding:0 4px;display:flex}.comment-avatar .avatar{width:40px;height:40px;display:block}.rtl .comment-controls{left:5px;right:auto}\n"], components: [{ type: UserCardComponent, selector: "app-user-card", inputs: ["user", "diameter"] }, { type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "charCount", "wordCount", "lineBreaks"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe, "timeAgo": TimeAgoPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -5584,7 +5585,7 @@ class CorrespondenceRelationCreateFormComponent {
     }
 }
 CorrespondenceRelationCreateFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationCreateFormComponent, deps: [{ token: i2$4.FormBuilder }, { token: CorrespondenceRelationService }, { token: CustomToastrService }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-CorrespondenceRelationCreateFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationCreateFormComponent, selector: "cts-correspondence-relation-create-form", viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"correspondence-relation-container\"\r\n  SetDirRtl\r\n  style=\"height: 80%; width: 100%\"\r\n>\r\n  <div class=\"correspondence-relation-title\">\r\n    {{ \"correspondence-relation.add\" | translate }}\r\n  </div>\r\n  <!-- <mat-divider></mat-divider> -->\r\n  <div mat-dialog-content [formGroup]=\"createform\">\r\n    <div class=\"vocabulary-list\">\r\n      <app-dynamic-form-vocabulary-item\r\n        [label]=\"'correspondence-relation.relation-type'\"\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_CorrespondenceRelationsNames'\"\r\n        formControlName=\"relationname\"\r\n        (onSelecting)=\"reset()\"\r\n      >\r\n      </app-dynamic-form-vocabulary-item>\r\n    </div>\r\n\r\n    <div class=\"search-container\" *ngIf=\"createform.value.relationname\">\r\n      <ng-autocomplete\r\n        #auto\r\n        [data]=\"documentList\"\r\n        [searchKeyword]=\"'filter'\"\r\n        (selected)=\"selectItem($event)\"\r\n        (inputChanged)=\"onSearchInputChange($event)\"\r\n        [customFilter]=\"disableFilter\"\r\n        (closed)=\"keep_Autocomplete_Results_Open()\"\r\n        [itemTemplate]=\"itemTemplate\"\r\n        [notFoundTemplate]=\"notFoundTemplate\"\r\n        [placeholder]=\"'correspondence-relation.searchby' | translate\"\r\n        [debounceTime]=\"1000\"\r\n        [isLoading]=\"isLoading\"\r\n        (inputCleared)=\"inputCleared()\"\r\n      >\r\n      </ng-autocomplete>\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <div class=\"item\">\r\n          <span>{{ item.title }}</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template #notFoundTemplate>\r\n        <div>{{ \"correspondence-relation.notfound\" | translate }}</div>\r\n      </ng-template>\r\n\r\n      <div class=\"chip-list\" *ngIf=\"related_corr.length > 0\">\r\n        <mat-chip-list #chipList aria-label=\"corr selection\">\r\n          <mat-chip\r\n            *ngFor=\"let corr of related_corr\"\r\n            [selectable]=\"selectable\"\r\n            [removable]=\"removable\"\r\n            (removed)=\"on_remove_relation_Chip(corr)\"\r\n          >\r\n            {{ corr.title }}\r\n            <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n      <div class=\"exist-relation\" *ngIf=\"exist\">\r\n        <span> {{ \"correspondence-relation.exist\" | translate }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\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      [loading]=\"saving\"\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      (onClick)=\"onSaveClick()\"\r\n      [theme]=\"'primary'\"\r\n      size=\"'regular'\"\r\n      [disabled]=\"\r\n        !this.createform.controls.relationname.valid || related_corr.length == 0\r\n      \"\r\n    >\r\n      {{ \"correspondence-relation.save\" | 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}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.correspondence-relation-container{padding:20px}.correspondence-relation-container .correspondence-relation-title{margin-bottom:8px;font-size:20px;color:#465573}.correspondence-relation-container .mat-dialog-content{height:100%;width:100%}.correspondence-relation-container .button-group{margin-top:12px;grid-column-gap:6px!important;column-gap:6px!important}.correspondence-relation-container .button-group cts-button{width:16%}@media (max-width: 992px){.correspondence-relation-container .button-group cts-button{width:20%}}@media only screen and (max-width: 768px){.correspondence-relation-container .button-group cts-button{width:28%}}.correspondence-relation-container .item{margin:1px;padding:8px 10px;font-size:.75rem}.correspondence-relation-container .dialog-actions button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:70px;border-radius:3px}.correspondence-relation-container .dialog-actions button:disabled{opacity:.4;cursor:not-allowed}.correspondence-relation-container .dialog-actions button:hover{opacity:.7}.correspondence-relation-container .autocomplete-container .suggestions-container ul{max-height:150px!important}.correspondence-relation-container .autocomplete-container .suggestions-container{height:150px!important;margin-top:10px;max-height:150px!important;border:1px lightgray solid!important;box-shadow:none!important}.correspondence-relation-container .search-container{position:relative}.correspondence-relation-container .chip-list{max-height:150px;border:1px lightgray solid;overflow:scroll;padding:10px;margin-bottom:10px;top:215px;position:absolute;width:100%}.correspondence-relation-container .chip-list .mat-standard-chip{border-radius:5px!important}.correspondence-relation-container .chip-list .mat-chip.mat-standard-chip{background-color:#8f98aa1a!important;height:auto}.correspondence-relation-container .autocomplete-container{box-shadow:none!important}.correspondence-relation-container .autocomplete-container .input-container input{background-color:#8f98aa1a!important;padding:10px!important}.correspondence-relation-container .exist-relation{background-color:#f8d7da!important;color:#842029!important;border-color:#f5c2c7!important;position:absolute;width:100%;top:300px}.correspondence-relation-container .autocomplete-container .suggestions-container .complete-selected,.correspondence-relation-container .autocomplete-container .suggestions-container ul li:hover{background-color:#8f98aa1a!important}.correspondence-relation-container .vocabulary-list{margin-bottom:10px}.correspondence-relation-container .vocabulary-list .mat-error{display:none!important}.correspondence-relation-container .mat-dialog-content{margin:3px 0 0!important;padding:0!important}[dir=rtl] .input-container input{direction:rtl}[dir=rtl] .x{left:10px;right:auto!important}\n"], components: [{ type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["onlyIds", "bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: i6$1.AutocompleteComponent, selector: "ng-autocomplete", inputs: ["data", "searchKeyword", "placeholder", "heading", "initialValue", "historyIdentifier", "historyHeading", "historyListMaxNumber", "notFoundText", "isLoading", "debounceTime", "disabled", "minQueryLength", "focusFirst", "customFilter", "selectedValueRender", "itemTemplate", "notFoundTemplate"], outputs: ["selected", "inputChanged", "inputFocused", "inputCleared", "opened", "closed", "scrolledToEnd"] }, { type: i7.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i7.MatChipRemove, selector: "[matChipRemove]" }, { type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+CorrespondenceRelationCreateFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationCreateFormComponent, selector: "cts-correspondence-relation-create-form", viewQueries: [{ propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"correspondence-relation-container\"\r\n  SetDirRtl\r\n  style=\"height: 80%; width: 100%\"\r\n>\r\n  <div class=\"correspondence-relation-title\">\r\n    {{ \"correspondence-relation.add\" | translate }}\r\n  </div>\r\n  <!-- <mat-divider></mat-divider> -->\r\n  <div mat-dialog-content [formGroup]=\"createform\">\r\n    <div class=\"vocabulary-list\">\r\n      <app-dynamic-form-vocabulary-item\r\n        [label]=\"'correspondence-relation.relation-type'\"\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_CorrespondenceRelationsNames'\"\r\n        formControlName=\"relationname\"\r\n        (onSelecting)=\"reset()\"\r\n      >\r\n      </app-dynamic-form-vocabulary-item>\r\n    </div>\r\n\r\n    <div class=\"search-container\" *ngIf=\"createform.value.relationname\">\r\n      <ng-autocomplete\r\n        #auto\r\n        [data]=\"documentList\"\r\n        [searchKeyword]=\"'filter'\"\r\n        (selected)=\"selectItem($event)\"\r\n        (inputChanged)=\"onSearchInputChange($event)\"\r\n        [customFilter]=\"disableFilter\"\r\n        (closed)=\"keep_Autocomplete_Results_Open()\"\r\n        [itemTemplate]=\"itemTemplate\"\r\n        [notFoundTemplate]=\"notFoundTemplate\"\r\n        [placeholder]=\"'correspondence-relation.searchby' | translate\"\r\n        [debounceTime]=\"1000\"\r\n        [isLoading]=\"isLoading\"\r\n        (inputCleared)=\"inputCleared()\"\r\n      >\r\n      </ng-autocomplete>\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <div class=\"item\">\r\n          <span>{{ item.title }}</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template #notFoundTemplate>\r\n        <div>{{ \"correspondence-relation.notfound\" | translate }}</div>\r\n      </ng-template>\r\n\r\n      <div class=\"chip-list\" *ngIf=\"related_corr.length > 0\">\r\n        <mat-chip-list #chipList aria-label=\"corr selection\">\r\n          <mat-chip\r\n            *ngFor=\"let corr of related_corr\"\r\n            [selectable]=\"selectable\"\r\n            [removable]=\"removable\"\r\n            (removed)=\"on_remove_relation_Chip(corr)\"\r\n          >\r\n            {{ corr.title }}\r\n            <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n      <div class=\"exist-relation\" *ngIf=\"exist\">\r\n        <span> {{ \"correspondence-relation.exist\" | translate }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\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      [loading]=\"saving\"\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      (onClick)=\"onSaveClick()\"\r\n      [theme]=\"'primary'\"\r\n      size=\"'regular'\"\r\n      [disabled]=\"\r\n        !this.createform.controls.relationname.valid || related_corr.length == 0\r\n      \"\r\n    >\r\n      {{ \"correspondence-relation.save\" | 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}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.correspondence-relation-container{padding:20px}.correspondence-relation-container .correspondence-relation-title{margin-bottom:8px;font-size:20px;color:#465573}.correspondence-relation-container .mat-dialog-content{height:100%;width:100%}.correspondence-relation-container .button-group{margin-top:12px;grid-column-gap:6px!important;column-gap:6px!important}.correspondence-relation-container .button-group cts-button{width:16%}@media (max-width: 992px){.correspondence-relation-container .button-group cts-button{width:20%}}@media only screen and (max-width: 768px){.correspondence-relation-container .button-group cts-button{width:28%}}.correspondence-relation-container .item{margin:1px;padding:8px 10px;font-size:.75rem}.correspondence-relation-container .dialog-actions button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:70px;border-radius:3px}.correspondence-relation-container .dialog-actions button:disabled{opacity:.4;cursor:not-allowed}.correspondence-relation-container .dialog-actions button:hover{opacity:.7}.correspondence-relation-container .autocomplete-container .suggestions-container ul{max-height:150px!important}.correspondence-relation-container .autocomplete-container .suggestions-container{height:150px!important;margin-top:10px;max-height:150px!important;border:1px lightgray solid!important;box-shadow:none!important}.correspondence-relation-container .search-container{position:relative}.correspondence-relation-container .chip-list{max-height:150px;border:1px lightgray solid;overflow:scroll;padding:10px;margin-bottom:10px;top:215px;position:absolute;width:100%}.correspondence-relation-container .chip-list .mat-standard-chip{border-radius:5px!important}.correspondence-relation-container .chip-list .mat-chip.mat-standard-chip{background-color:#8f98aa1a!important;height:auto}.correspondence-relation-container .autocomplete-container{box-shadow:none!important}.correspondence-relation-container .autocomplete-container .input-container input{background-color:#8f98aa1a!important;padding:10px!important}.correspondence-relation-container .exist-relation{background-color:#f8d7da!important;color:#842029!important;border-color:#f5c2c7!important;position:absolute;width:100%;top:300px}.correspondence-relation-container .autocomplete-container .suggestions-container .complete-selected,.correspondence-relation-container .autocomplete-container .suggestions-container ul li:hover{background-color:#8f98aa1a!important}.correspondence-relation-container .vocabulary-list{margin-bottom:10px}.correspondence-relation-container .vocabulary-list .mat-error{display:none!important}.correspondence-relation-container .mat-dialog-content{margin:3px 0 0!important;padding:0!important}[dir=rtl] .input-container input{direction:rtl}[dir=rtl] .x{left:10px;right:auto!important}\n"], components: [{ type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["onlyIds", "bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: i6.AutocompleteComponent, selector: "ng-autocomplete", inputs: ["data", "searchKeyword", "placeholder", "heading", "initialValue", "historyIdentifier", "historyHeading", "historyListMaxNumber", "notFoundText", "isLoading", "debounceTime", "disabled", "minQueryLength", "focusFirst", "customFilter", "selectedValueRender", "itemTemplate", "notFoundTemplate"], outputs: ["selected", "inputChanged", "inputFocused", "inputCleared", "opened", "closed", "scrolledToEnd"] }, { type: i7$1.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationCreateFormComponent, decorators: [{
             type: Component,
             args: [{
@@ -6046,7 +6047,7 @@ class CorrespondenceRelationListComponent {
     }
 }
 CorrespondenceRelationListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationListComponent, deps: [{ token: CorrespondenceRelationService }, { token: i1$3.MatDialog }, { token: ViewerFilesService }, { token: DocumentsService }, { token: AdapterService }], target: i0.ɵɵFactoryTarget.Component });
-CorrespondenceRelationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationListComponent, selector: "cts-correspondence-relation-list", inputs: { correspondence_id: "correspondence_id", reload: "reload" }, ngImport: i0, template: "<div class=\"relations-list\" *ngIf=\"relateddoc.length > 0\">\r\n  <ng-container>\r\n    <div *ngFor=\"let group of relateddoc; first as isFirst\">\r\n      <mat-accordion class=\"example-headers-align\" multi>\r\n        <mat-expansion-panel [expanded]=\"isFirst\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{\r\n                \"vocabulary.VOC_CorrespondenceRelationsNames.\" + group[0]\r\n                  | translate\r\n              }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <ng-template matExpansionPanelContent>\r\n            <mat-list>\r\n              <div class=\"mat-list-items\" *ngFor=\"let item of group[1]\">\r\n                <cts-item-list\r\n                  [item]=\"item\"\r\n                  [title]=\"item.title\"\r\n                  [iconname]=\"'link'\"\r\n                  [actions]=\"menu_actions\"\r\n                  (actionclicked)=\"handleMenuItemClicked($event)\"\r\n                  (itemClicked)=\"showCorrespondenceInViewer(item)\"\r\n                  [moreclasses]=\"'link-relation'\"\r\n                ></cts-item-list>\r\n              </div>\r\n            </mat-list>\r\n          </ng-template>\r\n        </mat-expansion-panel>\r\n      </mat-accordion>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n<div class=\"nocontent\" *ngIf=\"relateddoc.length === 0\">\r\n  <p>{{ \"correspondence-relation.nocontent\" | translate }}</p>\r\n</div>\r\n", styles: [".relations-list{border:1px solid #eee}.relations-list .mat-expansion-panel{box-shadow:none!important}.relations-list .mat-expansion-panel-header{border-bottom:1px solid #d9dce2;background-color:#f5f6f8;height:50px!important}.relations-list .mat-expansion-panel-header:hover{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header:focus{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header-title{font-weight:500}.relations-list .mat-accordion .mat-expansion-panel{border-radius:0!important}.relations-list .mat-expansion-panel-body{padding:0!important}.nocontent{color:gray;padding:10px;font-size:14px;border:1px solid #d9dce2}.nocontent p{margin:0;text-align:center}\n"], components: [{ type: i6$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight"] }, { type: i2$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: ItemListComponent, selector: "cts-item-list", inputs: ["item", "iconname", "title", "actions", "isselected", "moreclasses"], outputs: ["itemClicked", "actionclicked"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i6$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6$2.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+CorrespondenceRelationListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationListComponent, selector: "cts-correspondence-relation-list", inputs: { correspondence_id: "correspondence_id", reload: "reload" }, ngImport: i0, template: "<div class=\"relations-list\" *ngIf=\"relateddoc.length > 0\">\r\n  <ng-container>\r\n    <div *ngFor=\"let group of relateddoc; first as isFirst\">\r\n      <mat-accordion class=\"example-headers-align\" multi>\r\n        <mat-expansion-panel [expanded]=\"isFirst\">\r\n          <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n              {{\r\n                \"vocabulary.VOC_CorrespondenceRelationsNames.\" + group[0]\r\n                  | translate\r\n              }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <ng-template matExpansionPanelContent>\r\n            <mat-list>\r\n              <div class=\"mat-list-items\" *ngFor=\"let item of group[1]\">\r\n                <cts-item-list\r\n                  [item]=\"item\"\r\n                  [title]=\"item.title\"\r\n                  [iconname]=\"'link'\"\r\n                  [actions]=\"menu_actions\"\r\n                  (actionclicked)=\"handleMenuItemClicked($event)\"\r\n                  (itemClicked)=\"showCorrespondenceInViewer(item)\"\r\n                  [moreclasses]=\"'link-relation'\"\r\n                ></cts-item-list>\r\n              </div>\r\n            </mat-list>\r\n          </ng-template>\r\n        </mat-expansion-panel>\r\n      </mat-accordion>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n<div class=\"nocontent\" *ngIf=\"relateddoc.length === 0\">\r\n  <p>{{ \"correspondence-relation.nocontent\" | translate }}</p>\r\n</div>\r\n", styles: [".relations-list{border:1px solid #eee}.relations-list .mat-expansion-panel{box-shadow:none!important}.relations-list .mat-expansion-panel-header{border-bottom:1px solid #d9dce2;background-color:#f5f6f8;height:50px!important}.relations-list .mat-expansion-panel-header:hover{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header:focus{background-color:#f5f6f8!important}.relations-list .mat-expansion-panel-header-title{font-weight:500}.relations-list .mat-accordion .mat-expansion-panel{border-radius:0!important}.relations-list .mat-expansion-panel-body{padding:0!important}.nocontent{color:gray;padding:10px;font-size:14px;border:1px solid #d9dce2}.nocontent p{margin:0;text-align:center}\n"], components: [{ type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight"] }, { type: i2$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: ItemListComponent, selector: "cts-item-list", inputs: ["item", "iconname", "title", "actions", "isselected", "moreclasses"], outputs: ["itemClicked", "actionclicked"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i6$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationListComponent, decorators: [{
             type: Component,
             args: [{
@@ -6406,7 +6407,7 @@ class SearchAutocompleteComponent {
     close() { }
 }
 SearchAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SearchAutocompleteComponent, deps: [{ token: CorrespondenceRelationService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-SearchAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SearchAutocompleteComponent, selector: "cts-search-autocomplete", inputs: { placeholder: "placeholder", label: "label", correspondanceId: "correspondanceId", direction: "direction" }, outputs: { onSelecting: "onSelecting" }, viewQueries: [{ propertyName: "searchautocomplete", first: true, predicate: SearchAutocompleteComponent, descendants: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"search-container\">\r\n  <ng-container>\r\n    <div>\r\n      <label class=\"select-label\" >{{ label | translate\r\n      }}</label>\r\n    </div>\r\n  </ng-container>\r\n  <!-- [customFilter]=\"disableFilter\" -->\r\n  <ng-autocomplete #auto [data]=\"documentList\" [searchKeyword]=\"'filter'\" (selected)='selectItem($event)'\r\n    (inputChanged)='onSearchInputChange($event)' (closed)=\"close()\" [itemTemplate]=\"itemTemplate\"\r\n    [notFoundTemplate]=\"notFoundTemplate\" [placeholder]=\"'correspondence-relation.searchby' | translate\"\r\n    [debounceTime]='1000' [isLoading]=\"isLoading\" (inputCleared)='inputCleared()'>\r\n  </ng-autocomplete>\r\n\r\n  <ng-template #itemTemplate let-item>\r\n    <div class=\"item\">\r\n      <span>{{item.title}}</span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #notFoundTemplate>\r\n    <div>{{'correspondence-relation.notfound' | translate}}</div>\r\n  </ng-template>\r\n</div>", styles: [".select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.autocomplete-container .suggestions-container ul{max-height:150px!important}.autocomplete-container .suggestions-container .is-visible{height:150px!important;max-height:150px!important;border:1px lightgray solid!important;box-shadow:none!important}.autocomplete-container{box-shadow:none!important}.autocomplete-container .input-container input{background-color:#8f98aa1a!important;padding:10px!important;border:1px solid #ccc!important;border-radius:5px!important}.autocomplete-container .suggestions-container .complete-selected,.autocomplete-container .suggestions-container ul li:hover{background-color:#f5faff!important}.autocomplete-container .suggestions-container ul li{padding:8px 10px!important}[dir=rtl] .input-container input{direction:rtl}[dir=rtl] .x{left:10px;right:auto!important}\n"], components: [{ type: i6$1.AutocompleteComponent, selector: "ng-autocomplete", inputs: ["data", "searchKeyword", "placeholder", "heading", "initialValue", "historyIdentifier", "historyHeading", "historyListMaxNumber", "notFoundText", "isLoading", "debounceTime", "disabled", "minQueryLength", "focusFirst", "customFilter", "selectedValueRender", "itemTemplate", "notFoundTemplate"], outputs: ["selected", "inputChanged", "inputFocused", "inputCleared", "opened", "closed", "scrolledToEnd"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+SearchAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SearchAutocompleteComponent, selector: "cts-search-autocomplete", inputs: { placeholder: "placeholder", label: "label", correspondanceId: "correspondanceId", direction: "direction" }, outputs: { onSelecting: "onSelecting" }, viewQueries: [{ propertyName: "searchautocomplete", first: true, predicate: SearchAutocompleteComponent, descendants: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"search-container\">\r\n  <ng-container>\r\n    <div>\r\n      <label class=\"select-label\" >{{ label | translate\r\n      }}</label>\r\n    </div>\r\n  </ng-container>\r\n  <!-- [customFilter]=\"disableFilter\" -->\r\n  <ng-autocomplete #auto [data]=\"documentList\" [searchKeyword]=\"'filter'\" (selected)='selectItem($event)'\r\n    (inputChanged)='onSearchInputChange($event)' (closed)=\"close()\" [itemTemplate]=\"itemTemplate\"\r\n    [notFoundTemplate]=\"notFoundTemplate\" [placeholder]=\"'correspondence-relation.searchby' | translate\"\r\n    [debounceTime]='1000' [isLoading]=\"isLoading\" (inputCleared)='inputCleared()'>\r\n  </ng-autocomplete>\r\n\r\n  <ng-template #itemTemplate let-item>\r\n    <div class=\"item\">\r\n      <span>{{item.title}}</span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #notFoundTemplate>\r\n    <div>{{'correspondence-relation.notfound' | translate}}</div>\r\n  </ng-template>\r\n</div>", styles: [".select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.autocomplete-container .suggestions-container ul{max-height:150px!important}.autocomplete-container .suggestions-container .is-visible{height:150px!important;max-height:150px!important;border:1px lightgray solid!important;box-shadow:none!important}.autocomplete-container{box-shadow:none!important}.autocomplete-container .input-container input{background-color:#8f98aa1a!important;padding:10px!important;border:1px solid #ccc!important;border-radius:5px!important}.autocomplete-container .suggestions-container .complete-selected,.autocomplete-container .suggestions-container ul li:hover{background-color:#f5faff!important}.autocomplete-container .suggestions-container ul li{padding:8px 10px!important}[dir=rtl] .input-container input{direction:rtl}[dir=rtl] .x{left:10px;right:auto!important}\n"], components: [{ type: i6.AutocompleteComponent, selector: "ng-autocomplete", inputs: ["data", "searchKeyword", "placeholder", "heading", "initialValue", "historyIdentifier", "historyHeading", "historyListMaxNumber", "notFoundText", "isLoading", "debounceTime", "disabled", "minQueryLength", "focusFirst", "customFilter", "selectedValueRender", "itemTemplate", "notFoundTemplate"], outputs: ["selected", "inputChanged", "inputFocused", "inputCleared", "opened", "closed", "scrolledToEnd"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SearchAutocompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -8330,7 +8331,7 @@ class DynamicFormDateItemComponent {
 DynamicFormDateItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormDateItemComponent, deps: [{ token: DynamicFormUpdateService }, { token: i2$3.DateAdapter }, { token: UserPreferencesService }, { token: i1.TranslateService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
 DynamicFormDateItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormDateItemComponent, selector: "app-dynamic-form-dateitem", inputs: { label: "label", disabled: "disabled", property: "property", editable: "editable", displayEmpty: "displayEmpty", min: "min", max: "max", startAt: "startAt", displayClearAction: "displayClearAction", pickerType: "pickerType", selectMode: "selectMode", isfilter: "isfilter", placeholder: "placeholder" }, providers: [
         { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS }
-    ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datetimePicker"], descendants: true }], ngImport: i0, template: "<div class=\"app-property-value\">\r\n  <div class=\"app-input-wrapper\">\r\n    <ng-container *ngIf=\"label\">\r\n      <label class=\"\" for=\"formGroupInputSmall\"\r\n        >{{ label | translate\r\n        }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span>\r\n      </label>\r\n    </ng-container>\r\n    <div class=\"input-container\">\r\n      <ng-container *ngIf=\"isEditable(); else readOnly\">\r\n\r\n        <button *ngIf=\"!isfilter && pickerType !== 'timer'\" type=\"button\" class=\"claendar-icon\" [owlDateTimeTrigger]=\"dt3\">\r\n          <i class=\"bi bi-calendar-week icon\"></i>        </button>\r\n\r\n          <button *ngIf=\"!isfilter && pickerType === 'timer'\" type=\"button\" class=\"claendar-icon\" [owlDateTimeTrigger]=\"dt3\">\r\n            <i class=\"bi bi-clock icon\"></i>        </button>\r\n        <input\r\n          class=\"form-control date\"\r\n          [disabled]=\"isDisabled() || null\"\r\n          (blur)=\"onTouched($event)\"\r\n          [min]=\"min\"\r\n          [max]=\"max\"\r\n          [selectMode]=\"selectMode\"\r\n          [required]=\"isRequired\"\r\n          [(ngModel)]=\"valueDate\"\r\n          (ngModelChange)=\"onDateChanged($event)\"\r\n          autocomplete=\"false\"\r\n          [owlDateTimeTrigger]=\"dt3\"\r\n          [owlDateTime]=\"dt3\"\r\n          placeholder=\"{{ placeholder }}\"\r\n        />\r\n        <input\r\n        class=\"form-control timer\"\r\n        [disabled]=\"true\"\r\n        [required]=\"isRequired\"\r\n        [(ngModel)]=\"displayedTime\"\r\n        placeholder=\"{{ placeholder }}\"\r\n      />\r\n\r\n        <button type=\"button\" *ngIf=\"valueDate\" (click)=\"onDateClear()\" class=\"relative mx-1 clear-date-btn\"\r\n        [ngClass]=\"{'d-none': isDisabled()}\">\r\n          <i class=\"clear-date-icon material-icons  flex mr-1\">&#xE14C;</i>\r\n        </button>\r\n        <owl-date-time\r\n          [startAt]=\"startAt\"\r\n          [pickerType]=\"pickerType\"\r\n          #dt3\r\n        ></owl-date-time>\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             <span *ngIf=\"label\" class=\"mx-1\">{{ label | translate}}</span> {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n            </li>\r\n          </ul>\r\n        </mat-error>\r\n      </ng-container>\r\n      <ng-template #readOnly>\r\n        {{ valueDate | date }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".clear-date-icon{color:#999;font-size:15px}.input-container{position:relative}.input-container .form-control{padding:0 35px}.clear-date-btn{align-items:center;background:transparent;border:0px;position:absolute;right:10px;left:auto;top:50%;margin-top:-9px}.claendar-icon{border:none;background-color:transparent;position:absolute;display:flex;justify-content:flex-start;padding-inline-end:45px;width:100%;height:40px;align-items:center}.claendar-icon .icon{font-size:20px;color:#495057}.claendar-icon:focus{outline:none}.rtl .clear-date-btn{left:10px;right:auto}.rtl .owl-dt-container-info{direction:rtl}\n"], components: [{ type: i6$3.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$3.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6$3.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "value", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe, "date": i4$1.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datetimePicker"], descendants: true }], ngImport: i0, template: "<div class=\"app-property-value\">\r\n  <div class=\"app-input-wrapper\">\r\n    <ng-container *ngIf=\"label\">\r\n      <label class=\"\" for=\"formGroupInputSmall\"\r\n        >{{ label | translate\r\n        }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span>\r\n      </label>\r\n    </ng-container>\r\n    <div class=\"input-container\">\r\n      <ng-container *ngIf=\"isEditable(); else readOnly\">\r\n\r\n        <button *ngIf=\"!isfilter && pickerType !== 'timer'\" type=\"button\" class=\"claendar-icon\" [owlDateTimeTrigger]=\"dt3\">\r\n          <i class=\"bi bi-calendar-week icon\"></i>        </button>\r\n\r\n          <button *ngIf=\"!isfilter && pickerType === 'timer'\" type=\"button\" class=\"claendar-icon\" [owlDateTimeTrigger]=\"dt3\">\r\n            <i class=\"bi bi-clock icon\"></i>        </button>\r\n        <input\r\n          class=\"form-control date\"\r\n          [disabled]=\"isDisabled() || null\"\r\n          (blur)=\"onTouched($event)\"\r\n          [min]=\"min\"\r\n          [max]=\"max\"\r\n          [selectMode]=\"selectMode\"\r\n          [required]=\"isRequired\"\r\n          [(ngModel)]=\"valueDate\"\r\n          (ngModelChange)=\"onDateChanged($event)\"\r\n          autocomplete=\"false\"\r\n          [owlDateTimeTrigger]=\"dt3\"\r\n          [owlDateTime]=\"dt3\"\r\n          placeholder=\"{{ placeholder }}\"\r\n        />\r\n        <input\r\n        class=\"form-control timer\"\r\n        [disabled]=\"true\"\r\n        [required]=\"isRequired\"\r\n        [(ngModel)]=\"displayedTime\"\r\n        placeholder=\"{{ placeholder }}\"\r\n      />\r\n\r\n        <button type=\"button\" *ngIf=\"valueDate\" (click)=\"onDateClear()\" class=\"relative mx-1 clear-date-btn\"\r\n        [ngClass]=\"{'d-none': isDisabled()}\">\r\n          <i class=\"clear-date-icon material-icons  flex mr-1\">&#xE14C;</i>\r\n        </button>\r\n        <owl-date-time\r\n          [startAt]=\"startAt\"\r\n          [pickerType]=\"pickerType\"\r\n          #dt3\r\n        ></owl-date-time>\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             <span *ngIf=\"label\" class=\"mx-1\">{{ label | translate}}</span> {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n            </li>\r\n          </ul>\r\n        </mat-error>\r\n      </ng-container>\r\n      <ng-template #readOnly>\r\n        {{ valueDate | date }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".clear-date-icon{color:#999;font-size:15px}.input-container{position:relative}.input-container .form-control{padding:0 35px}.clear-date-btn{align-items:center;background:transparent;border:0px;position:absolute;right:10px;left:auto;top:50%;margin-top:-9px}.claendar-icon{border:none;background-color:transparent;position:absolute;display:flex;justify-content:flex-start;padding-inline-end:45px;width:100%;height:40px;align-items:center}.claendar-icon .icon{font-size:20px;color:#495057}.claendar-icon:focus{outline:none}.rtl .clear-date-btn{left:10px;right:auto}.rtl .owl-dt-container-info{direction:rtl}\n"], components: [{ type: i6$2.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6$2.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "value", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe, "date": i4$1.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormDateItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -8440,14 +8441,14 @@ class owlDateTimeIntl extends OwlDateTimeIntl {
         });
     }
 }
-owlDateTimeIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: owlDateTimeIntl, deps: [{ token: i1.TranslateService }, { token: UserPreferencesService }, { token: i6$3.DateTimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
+owlDateTimeIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: owlDateTimeIntl, deps: [{ token: i1.TranslateService }, { token: UserPreferencesService }, { token: i6$2.DateTimeAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
 owlDateTimeIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: owlDateTimeIntl, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: owlDateTimeIntl, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: UserPreferencesService }, { type: i6$3.DateTimeAdapter }]; } });
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: UserPreferencesService }, { type: i6$2.DateTimeAdapter }]; } });
 
 class DepartmentConstants {
 }
@@ -9660,7 +9661,7 @@ class TreeviewSelectComponent {
     }
 }
 TreeviewSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeviewSelectComponent, deps: [{ token: i1$a.TreeviewI18n }, { token: TranslationService }, { token: DepartmentApiService }, { token: DepartmentManagementService$1 }, { token: RolesService }, { token: NuxeoService }, { token: GlobalAdminService }], target: i0.ɵɵFactoryTarget.Component });
-TreeviewSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", selectDepChildren: "selectDepChildren", displayIsAllowRecExternal: "displayIsAllowRecExternal", fixedParentNode: "fixedParentNode", showTreeActions: "showTreeActions" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template\r\n\t#itemTemplate\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n>\r\n\t<!-- single -->\r\n\t<div *ngIf=\"!treeview && !multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label> -->\r\n\t\t\t<label *ngIf=\"item.disabled\" class=\"form-check-label\">{{ item.text }}</label>\r\n\t\t\t<label *ngIf=\"!item.disabled\" class=\"form-check-label\" (click)=\"select(item)\">{{ item.text }}</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- Multiple -->\r\n\t<div *ngIf=\"!treeview && multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <input\r\n        class=\"multiple-checkBox\"\r\n        type=\"checkbox\"\r\n        [checked]=\"multipleSelection.includes(item.value)\"\r\n        (change)=\"selectMultiple($event.target.checked, item)\"\r\n      />\r\n\r\n      <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n\t\t\t<div class=\"multiple-treeview\">\r\n\t\t\t\t<mat-checkbox [checked]=\"isItemSelected(item)\" (change)=\"selectMultiple($event.checked, item)\">\r\n\t\t\t\t\t<span> {{ item.text }} </span>\r\n\t\t\t\t</mat-checkbox>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView -->\r\n\t<div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\t(mouseenter)=\"hoverField.style.display = 'flex'\"\r\n\t\t\t(mouseleave)=\"hoverField.style.display = 'none'\"\r\n\t\t\tclass=\"text-nowrap row-item treeview-row\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\tselected: item.value == selectedItem,\r\n\t\t\t\ttreeParentNode: item.value === fixedParentNode?.value\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value != fixedParentNode?.value\">{{ item.text }}</ng-conteiner>\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value === fixedParentNode?.value\">{{ item.text | translate }}</ng-conteiner>\r\n\t\t\t\t<span #hoverField class=\"hoverField\">\r\n\t\t\t\t\t<ng-container *ngIf=\"showTreeActions\">\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'update', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-pencil\"></li>\r\n\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.toolTip_message' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'add', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-plus\"></li>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</span>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView as form control -->\r\n\t<div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\tclass=\"text-nowrap row-item treeview-row-form-control\"\r\n\t\t\t[ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }} </label>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n<ng-template\r\n\t#headerTemplate\r\n\tlet-config=\"config\"\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n\tlet-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n\t<div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<input\r\n\t\t\t\tclass=\"form-control\"\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\t[placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n\t\t\t\t[(ngModel)]=\"filterText\"\r\n\t\t\t\t(ngModelChange)=\"onFilterTextChange($event)\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n\t\t\t\t<strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n\t\t\t</label>\r\n\t\t\t<label *ngIf=\"config.hasCollapseExpand\" class=\"float-right\" (click)=\"onCollapseExpand()\">\r\n\t\t\t\t<i [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n\t\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-arrows-angle-contract\"></span>\r\n\t\t\t\t</i>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{\r\n\t\t'department_management.selectDefault' | translate\r\n\t}}</a>\r\n\t<div\r\n\t\t*ngIf=\"config.hasDivider\"\r\n\t\tclass=\"dropdown-divider\"\r\n\t\t[ngClass]=\"{ 'dropdown-divider-noMargin': defaultSelect }\"\r\n\t></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n\t<div class=\"dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[headerTemplate]=\"headerTemplate\"\r\n\t\t\t[items]=\"items\"\r\n\t\t\t[itemTemplate]=\"itemTemplate\"\r\n\t\t>\r\n\t\t</ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n\t<div class=\"multiple-tree-view dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview [config]=\"config\" [items]=\"items\" [itemTemplate]=\"itemTemplate\"> </ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n\t<div class=\"tree-view\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n\t<div class=\"tree-view-form-control\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$a.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1$a.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+TreeviewSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", selectDepChildren: "selectDepChildren", displayIsAllowRecExternal: "displayIsAllowRecExternal", fixedParentNode: "fixedParentNode", showTreeActions: "showTreeActions" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template\r\n\t#itemTemplate\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n>\r\n\t<!-- single -->\r\n\t<div *ngIf=\"!treeview && !multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label> -->\r\n\t\t\t<label *ngIf=\"item.disabled\" class=\"form-check-label\">{{ item.text }}</label>\r\n\t\t\t<label *ngIf=\"!item.disabled\" class=\"form-check-label\" (click)=\"select(item)\">{{ item.text }}</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- Multiple -->\r\n\t<div *ngIf=\"!treeview && multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <input\r\n        class=\"multiple-checkBox\"\r\n        type=\"checkbox\"\r\n        [checked]=\"multipleSelection.includes(item.value)\"\r\n        (change)=\"selectMultiple($event.target.checked, item)\"\r\n      />\r\n\r\n      <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n\t\t\t<div class=\"multiple-treeview\">\r\n\t\t\t\t<mat-checkbox [checked]=\"isItemSelected(item)\" (change)=\"selectMultiple($event.checked, item)\">\r\n\t\t\t\t\t<span> {{ item.text }} </span>\r\n\t\t\t\t</mat-checkbox>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView -->\r\n\t<div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\t(mouseenter)=\"hoverField.style.display = 'flex'\"\r\n\t\t\t(mouseleave)=\"hoverField.style.display = 'none'\"\r\n\t\t\tclass=\"text-nowrap row-item treeview-row\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\tselected: item.value == selectedItem,\r\n\t\t\t\ttreeParentNode: item.value === fixedParentNode?.value\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value != fixedParentNode?.value\">{{ item.text }}</ng-conteiner>\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value === fixedParentNode?.value\">{{ item.text | translate }}</ng-conteiner>\r\n\t\t\t\t<span #hoverField class=\"hoverField\">\r\n\t\t\t\t\t<ng-container *ngIf=\"showTreeActions\">\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'update', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-pencil\"></li>\r\n\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.toolTip_message' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'add', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-plus\"></li>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</span>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView as form control -->\r\n\t<div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\tclass=\"text-nowrap row-item treeview-row-form-control\"\r\n\t\t\t[ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }} </label>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n<ng-template\r\n\t#headerTemplate\r\n\tlet-config=\"config\"\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n\tlet-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n\t<div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<input\r\n\t\t\t\tclass=\"form-control\"\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\t[placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n\t\t\t\t[(ngModel)]=\"filterText\"\r\n\t\t\t\t(ngModelChange)=\"onFilterTextChange($event)\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n\t\t\t\t<strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n\t\t\t</label>\r\n\t\t\t<label *ngIf=\"config.hasCollapseExpand\" class=\"float-right\" (click)=\"onCollapseExpand()\">\r\n\t\t\t\t<i [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n\t\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-arrows-angle-contract\"></span>\r\n\t\t\t\t</i>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{\r\n\t\t'department_management.selectDefault' | translate\r\n\t}}</a>\r\n\t<div\r\n\t\t*ngIf=\"config.hasDivider\"\r\n\t\tclass=\"dropdown-divider\"\r\n\t\t[ngClass]=\"{ 'dropdown-divider-noMargin': defaultSelect }\"\r\n\t></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n\t<div class=\"dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[headerTemplate]=\"headerTemplate\"\r\n\t\t\t[items]=\"items\"\r\n\t\t\t[itemTemplate]=\"itemTemplate\"\r\n\t\t>\r\n\t\t</ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n\t<div class=\"multiple-tree-view dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview [config]=\"config\" [items]=\"items\" [itemTemplate]=\"itemTemplate\"> </ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n\t<div class=\"tree-view\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n\t<div class=\"tree-view-form-control\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$a.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1$a.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeviewSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -12526,7 +12527,7 @@ class DepartmentViewerComponent {
     }
 }
 DepartmentViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DepartmentViewerComponent, deps: [{ token: TranslationService }, { token: DepartmentApiService }, { token: DynamicVieweService }], target: i0.ɵɵFactoryTarget.Component });
-DepartmentViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: { label: "label", value: "value", dropdownId: "dropdownId", vertical: "vertical", withOutLabel: "withOutLabel", noStyle: "noStyle" }, ngImport: i0, template: "<ng-container *ngIf=\"!noStyle\">\r\n  <div\r\n    class=\"my-dynamic-viewer\"\r\n    [ngClass]=\"{ vertical: vertical === true, 'with-out-label': withOutLabel }\"\r\n  >\r\n    <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{ label | translate }}</div>\r\n    <div *ngIf=\"departmentName\" class=\"my-value\" matTooltip=\"{{departmentName}}\">\r\n      {{ departmentName }}\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"noStyle\">\r\n  {{ departmentName }}\r\n</ng-container>\r\n", styles: [""], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
+DepartmentViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: { label: "label", value: "value", dropdownId: "dropdownId", vertical: "vertical", withOutLabel: "withOutLabel", noStyle: "noStyle" }, ngImport: i0, template: "<ng-container *ngIf=\"!noStyle\">\r\n  <div\r\n    class=\"my-dynamic-viewer\"\r\n    [ngClass]=\"{ vertical: vertical === true, 'with-out-label': withOutLabel }\"\r\n  >\r\n    <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{ label | translate }}</div>\r\n    <div *ngIf=\"departmentName\" class=\"my-value\" matTooltip=\"{{departmentName}}\">\r\n      {{ departmentName }}\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"noStyle\">\r\n  {{ departmentName }}\r\n</ng-container>\r\n", styles: [""], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DepartmentViewerComponent, decorators: [{
             type: Component,
             args: [{
@@ -12639,7 +12640,7 @@ class DynamicFilterComponent {
     }
 }
 DynamicFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFilterComponent, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: { title: "title", filters: "filters", selections: "selections", id: "id", entityType: "entityType", prefix: "prefix", department: "department", componentType: "componentType", customPageProvider: "customPageProvider", config: "config" }, outputs: { onFilterSelected: "onFilterSelected" }, ngImport: i0, template: "<div class=\"aggregation-container\">\r\n  <div class=\"search-title\">\r\n    {{ prefix + \".\" + title | translate }}\r\n  </div>\r\n  <ng-container *ngIf=\"filters && componentType != 'colorsCodes'\">\r\n    <ng-container *ngFor=\"let group of filters; index as i\">\r\n      <div *ngIf=\"i < 5 || more\" class=\"search-checkbox\">\r\n        <!-- <input\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          type=\"checkbox\"\r\n          (change)=\"onFilterSelect(group.key, $event.target.checked)\"\r\n        /> -->\r\n        <!-- <div class=\"mx-8\">\r\n          <span [ngSwitch]=\"EntityType(group.fetchedKey)\">\r\n            <span *ngSwitchCase=\"'directoryEntry'\">\r\n              {{\r\n                \"vocabulary.\" + group.fetchedKey.directoryName + \".\" + group.key\r\n                  | translate\r\n              }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.fetchedKey.properties.firstName +\r\n                  \" \" +\r\n                  group.fetchedKey.properties.lastName\r\n              }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi>\r\n        </div> -->\r\n        <mat-checkbox\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          (change)=\"onFilterSelect(group.key, $event.checked)\"\r\n        >\r\n          <span [ngSwitch]=\"componentType\" class=\"aggregation-label\">\r\n\r\n            <span *ngSwitchCase=\"'custom-voc'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'vocabulary'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.key === 'system' ? ('SYSTEM_ADMIN' | translate) : (group.fetchedKey.properties.firstName + \" \" + group.fetchedKey.properties.lastName)\r\n              }}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-pp'\">\r\n              <lib-custom-pp-viewer [pageProvider]=\"customPageProvider\" [config]=\"config\" [group]=\"group\"></lib-custom-pp-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-document'\">\r\n              <lib-custom-document-viewer [pageProvider]=\"customPageProvider\" [group]=\"group\"></lib-custom-document-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'department'\">\r\n              <cts-department-viewer\r\n              [noStyle]=\"true\"\r\n              [value]=\"group.key\"\r\n            >\r\n            </cts-department-viewer>\r\n            <!-- {{group.key}} -->\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-department'\">\r\n              {{isArabic ? group.fetchedKey.properties[config.propertyAr] : group.fetchedKey.properties[config.propertyEn]}}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'string'\">\r\n              <span>{{group.key}}</span>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi></mat-checkbox\r\n        >\r\n      </div>\r\n    </ng-container>\r\n    <div *ngIf=\"filters.length > 5\" class=\"more\">\r\n      <button class=\"btn-more\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"filters && componentType == 'colorsCodes'\">\r\n    <div class=\"flex flex-wrap colorsContainer\">\r\n      <ng-container *ngFor=\"let group of filters; index as i\">\r\n          <div *ngIf=\"i < 24 || more\" class=\"color-search-checkbox flex items-end justify-start\" [style.backgroundColor]=\"group.key\"\r\n          matTooltip=\"{{'search.colorInOtherPhotos' | translate :{num:group.docCount} }}\" [matTooltipPosition]=\"'above'\" \r\n          (click)=\"onFilterSelect(group.key, (_selections.includes(group.key)) ? false : true)\">\r\n            <span class=\"checkIcon bi bi-check\" *ngIf=\"_selections.includes(group.key)\" [ngStyle]=\"{color: (isWhiteOrClosetToWhite(group.key)) ? 'black': 'white'}\"></span>\r\n          </div>\r\n        \r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"filters.length > 20\" class=\"more\">\r\n      <button class=\"btn-more mt-1\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n\r\n  \r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.mx-8{margin-left:8px;margin-right:8px}.aggregation-container{border-bottom:1px solid #b4bac6;padding-bottom:8px}.aggregation-container .search-title{margin-bottom:6px;margin-top:6px;border-bottom-width:2px;font-weight:700;--tw-text-opacity: 1;color:rgba(70,85,115,var(--tw-text-opacity))}.aggregation-container .search-checkbox{display:flex;align-items:center;margin-bottom:.5rem}.aggregation-container .colorsContainer{overflow:visible;width:max-content;max-width:252px;grid-gap:4px;gap:4px}.aggregation-container .color-search-checkbox{width:28px;height:28px;box-shadow:#00000059 3px 5px 10px;transition:all .2s ease-in-out;cursor:pointer;border-radius:10%/50%}.aggregation-container .color-search-checkbox .checkIcon{width:1rem;height:1rem;min-width:1rem;min-height:1rem;font-size:1rem;line-height:1rem;color:#fff}.aggregation-container .color-search-checkbox:hover{transform:scale(1.3)}.aggregation-container .mat-checkbox-ripple .mat-ripple-element,.aggregation-container .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.aggregation-container .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.aggregation-container mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.aggregation-container mat-checkbox .mat-checkbox-inner-container{transform:scale(1.1)}.aggregation-container .justify-items-center{justify-items:center}.aggregation-container .more{display:flex;justify-content:center}.aggregation-container .btn-more{border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgba(217,220,226,var(--tw-border-opacity));background:none;border:none;margin:0;padding:0;color:#00f}.rtl mat-checkbox .mat-checkbox-inner-container{margin-right:0!important;margin-left:8px!important}\n"], components: [{ type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: CutomeVocViewerComponent, selector: "lib-cutome-voc-viewer", inputs: ["type", "group"] }, { type: CustomPpViewerComponent, selector: "lib-custom-pp-viewer", inputs: ["pageProvider", "group", "config"] }, { type: CustomDocumentViewerComponent, selector: "lib-custom-document-viewer", inputs: ["pageProvider", "group"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: { title: "title", filters: "filters", selections: "selections", id: "id", entityType: "entityType", prefix: "prefix", department: "department", componentType: "componentType", customPageProvider: "customPageProvider", config: "config" }, outputs: { onFilterSelected: "onFilterSelected" }, ngImport: i0, template: "<div class=\"aggregation-container\">\r\n  <div class=\"search-title\">\r\n    {{ prefix + \".\" + title | translate }}\r\n  </div>\r\n  <ng-container *ngIf=\"filters && componentType != 'colorsCodes'\">\r\n    <ng-container *ngFor=\"let group of filters; index as i\">\r\n      <div *ngIf=\"i < 5 || more\" class=\"search-checkbox\">\r\n        <!-- <input\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          type=\"checkbox\"\r\n          (change)=\"onFilterSelect(group.key, $event.target.checked)\"\r\n        /> -->\r\n        <!-- <div class=\"mx-8\">\r\n          <span [ngSwitch]=\"EntityType(group.fetchedKey)\">\r\n            <span *ngSwitchCase=\"'directoryEntry'\">\r\n              {{\r\n                \"vocabulary.\" + group.fetchedKey.directoryName + \".\" + group.key\r\n                  | translate\r\n              }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.fetchedKey.properties.firstName +\r\n                  \" \" +\r\n                  group.fetchedKey.properties.lastName\r\n              }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi>\r\n        </div> -->\r\n        <mat-checkbox\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          (change)=\"onFilterSelect(group.key, $event.checked)\"\r\n        >\r\n          <span [ngSwitch]=\"componentType\" class=\"aggregation-label\">\r\n\r\n            <span *ngSwitchCase=\"'custom-voc'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'vocabulary'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.key === 'system' ? ('SYSTEM_ADMIN' | translate) : (group.fetchedKey.properties.firstName + \" \" + group.fetchedKey.properties.lastName)\r\n              }}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-pp'\">\r\n              <lib-custom-pp-viewer [pageProvider]=\"customPageProvider\" [config]=\"config\" [group]=\"group\"></lib-custom-pp-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-document'\">\r\n              <lib-custom-document-viewer [pageProvider]=\"customPageProvider\" [group]=\"group\"></lib-custom-document-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'department'\">\r\n              <cts-department-viewer\r\n              [noStyle]=\"true\"\r\n              [value]=\"group.key\"\r\n            >\r\n            </cts-department-viewer>\r\n            <!-- {{group.key}} -->\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-department'\">\r\n              {{isArabic ? group.fetchedKey.properties[config.propertyAr] : group.fetchedKey.properties[config.propertyEn]}}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'string'\">\r\n              <span>{{group.key}}</span>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi></mat-checkbox\r\n        >\r\n      </div>\r\n    </ng-container>\r\n    <div *ngIf=\"filters.length > 5\" class=\"more\">\r\n      <button class=\"btn-more\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"filters && componentType == 'colorsCodes'\">\r\n    <div class=\"flex flex-wrap colorsContainer\">\r\n      <ng-container *ngFor=\"let group of filters; index as i\">\r\n          <div *ngIf=\"i < 24 || more\" class=\"color-search-checkbox flex items-end justify-start\" [style.backgroundColor]=\"group.key\"\r\n          matTooltip=\"{{'search.colorInOtherPhotos' | translate :{num:group.docCount} }}\" [matTooltipPosition]=\"'above'\" \r\n          (click)=\"onFilterSelect(group.key, (_selections.includes(group.key)) ? false : true)\">\r\n            <span class=\"checkIcon bi bi-check\" *ngIf=\"_selections.includes(group.key)\" [ngStyle]=\"{color: (isWhiteOrClosetToWhite(group.key)) ? 'black': 'white'}\"></span>\r\n          </div>\r\n        \r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"filters.length > 20\" class=\"more\">\r\n      <button class=\"btn-more mt-1\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n\r\n  \r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.mx-8{margin-left:8px;margin-right:8px}.aggregation-container{border-bottom:1px solid #b4bac6;padding-bottom:8px}.aggregation-container .search-title{margin-bottom:6px;margin-top:6px;border-bottom-width:2px;font-weight:700;--tw-text-opacity: 1;color:rgba(70,85,115,var(--tw-text-opacity))}.aggregation-container .search-checkbox{display:flex;align-items:center;margin-bottom:.5rem}.aggregation-container .colorsContainer{overflow:visible;width:max-content;max-width:252px;grid-gap:4px;gap:4px}.aggregation-container .color-search-checkbox{width:28px;height:28px;box-shadow:#00000059 3px 5px 10px;transition:all .2s ease-in-out;cursor:pointer;border-radius:10%/50%}.aggregation-container .color-search-checkbox .checkIcon{width:1rem;height:1rem;min-width:1rem;min-height:1rem;font-size:1rem;line-height:1rem;color:#fff}.aggregation-container .color-search-checkbox:hover{transform:scale(1.3)}.aggregation-container .mat-checkbox-ripple .mat-ripple-element,.aggregation-container .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.aggregation-container .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.aggregation-container mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.aggregation-container mat-checkbox .mat-checkbox-inner-container{transform:scale(1.1)}.aggregation-container .justify-items-center{justify-items:center}.aggregation-container .more{display:flex;justify-content:center}.aggregation-container .btn-more{border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgba(217,220,226,var(--tw-border-opacity));background:none;border:none;margin:0;padding:0;color:#00f}.rtl mat-checkbox .mat-checkbox-inner-container{margin-right:0!important;margin-left:8px!important}\n"], components: [{ type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: CutomeVocViewerComponent, selector: "lib-cutome-voc-viewer", inputs: ["type", "group"] }, { type: CustomPpViewerComponent, selector: "lib-custom-pp-viewer", inputs: ["pageProvider", "group", "config"] }, { type: CustomDocumentViewerComponent, selector: "lib-custom-document-viewer", inputs: ["pageProvider", "group"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -12684,7 +12685,7 @@ class DataViewerComponent {
     }
 }
 DataViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DataViewerComponent, selector: "cts-data-viewer", inputs: { label: "label", value: "value", vertical: "vertical", defultValue: "defultValue", customClass: "customClass" }, ngImport: i0, template: "<div class=\"my-dynamic-viewer {{customClass}}\" \r\n[ngClass]=\"{'vertical' : vertical === true}\">\r\n  <div class=\"my-label\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n  <div class=\"my-value\"> \r\n    <span class=\"direction-img\">\r\n      <i class=\"bi bi-box-arrow-down incoming\"></i>\r\n      <i class=\"bi bi-box-arrow-up outgoing\"></i>\r\n      <i class=\"bi bi-box-arrow-right internal\"></i>\r\n    </span>\r\n    <span class=\"text\" matTooltip=\"{{value ? value : '-'}}\">\r\n      {{value ? value : (defultValue ? (defultValue | translate) : '-')}}\r\n    </span>\r\n    \r\n    </div> \r\n</div>\r\n", styles: [""], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DataViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DataViewerComponent, selector: "cts-data-viewer", inputs: { label: "label", value: "value", vertical: "vertical", defultValue: "defultValue", customClass: "customClass" }, ngImport: i0, template: "<div class=\"my-dynamic-viewer {{customClass}}\" \r\n[ngClass]=\"{'vertical' : vertical === true}\">\r\n  <div class=\"my-label\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n  <div class=\"my-value\"> \r\n    <span class=\"direction-img\">\r\n      <i class=\"bi bi-box-arrow-down incoming\"></i>\r\n      <i class=\"bi bi-box-arrow-up outgoing\"></i>\r\n      <i class=\"bi bi-box-arrow-right internal\"></i>\r\n    </span>\r\n    <span class=\"text\" matTooltip=\"{{value ? value : '-'}}\">\r\n      {{value ? value : (defultValue ? (defultValue | translate) : '-')}}\r\n    </span>\r\n    \r\n    </div> \r\n</div>\r\n", styles: [""], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataViewerComponent, decorators: [{
             type: Component,
             args: [{
@@ -12717,7 +12718,7 @@ class BooleanViewerComponent {
     }
 }
 BooleanViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanViewerComponent, selector: "cts-boolean-viewer", inputs: { label: "label", value: "value", trueValue: "trueValue", falseValue: "falseValue", vertical: "vertical" }, ngImport: i0, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true}\">\r\n    <div class=\"my-label\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n    <div class=\"my-value\" matTooltip=\"{{value ?  (trueValue | translate) : (falseValue | translate)}}\"> {{value ?  (trueValue | translate) : (falseValue | translate)}}</div>\r\n</div>", styles: [""], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
+BooleanViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BooleanViewerComponent, selector: "cts-boolean-viewer", inputs: { label: "label", value: "value", trueValue: "trueValue", falseValue: "falseValue", vertical: "vertical" }, ngImport: i0, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true}\">\r\n    <div class=\"my-label\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n    <div class=\"my-value\" matTooltip=\"{{value ?  (trueValue | translate) : (falseValue | translate)}}\"> {{value ?  (trueValue | translate) : (falseValue | translate)}}</div>\r\n</div>", styles: [""], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BooleanViewerComponent, decorators: [{
             type: Component,
             args: [{
@@ -12783,7 +12784,7 @@ class DropdownViewerComponent {
     }
 }
 DropdownViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: { label: "label", value: "value", dropdownId: "dropdownId", vertical: "vertical", withOutLabel: "withOutLabel" }, ngImport: i0, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true , 'with-out-label': withOutLabel}\">\r\n  <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n  <div class=\"my-value\" matTooltip='{{value ? (\"vocabulary.\" + voc_name + \".\" + value| translate ): \"-\"}}'> {{value ? (\"vocabulary.\" + voc_name + \".\" + value| translate ): '-'}}</div>\r\n</div>\r\n", styles: [""], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DropdownViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: { label: "label", value: "value", dropdownId: "dropdownId", vertical: "vertical", withOutLabel: "withOutLabel" }, ngImport: i0, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true , 'with-out-label': withOutLabel}\">\r\n  <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n  <div class=\"my-value\" matTooltip='{{value ? (\"vocabulary.\" + voc_name + \".\" + value| translate ): \"-\"}}'> {{value ? (\"vocabulary.\" + voc_name + \".\" + value| translate ): '-'}}</div>\r\n</div>\r\n", styles: [""], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownViewerComponent, decorators: [{
             type: Component,
             args: [{
@@ -12829,7 +12830,7 @@ class DateViewerComponent {
     }
 }
 DateViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateViewerComponent, deps: [{ token: AppConfigService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-DateViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateViewerComponent, selector: "cts-date-viewer", inputs: { label: "label", value: "value", vertical: "vertical", format: "format", hijri: "hijri", withOutLabel: "withOutLabel" }, ngImport: i0, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true  , 'with-out-label': withOutLabel}\">\r\n    <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n    <div class=\"my-value\" *ngIf=\"!hijri\" matTooltip=\"{{value | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}\"> {{value | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}</div>\r\n    <div class=\"my-value\" *ngIf=\"hijri\" matTooltip=\"{{value | hijriDate}}\">{{value | hijriDate}}</div>\r\n</div>", styles: [""], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe, "hijriDate": HijriDatePipe } });
+DateViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateViewerComponent, selector: "cts-date-viewer", inputs: { label: "label", value: "value", vertical: "vertical", format: "format", hijri: "hijri", withOutLabel: "withOutLabel" }, ngImport: i0, template: "<div class=\"my-dynamic-viewer\" [ngClass]=\"{'vertical' : vertical === true  , 'with-out-label': withOutLabel}\">\r\n    <div class=\"my-label\" *ngIf=\"!withOutLabel\" matTooltip=\"{{label | translate}}\">{{label | translate}}</div>\r\n    <div class=\"my-value\" *ngIf=\"!hijri\" matTooltip=\"{{value | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}\"> {{value | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}</div>\r\n    <div class=\"my-value\" *ngIf=\"hijri\" matTooltip=\"{{value | hijriDate}}\">{{value | hijriDate}}</div>\r\n</div>", styles: [""], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe, "hijriDate": HijriDatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateViewerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13815,7 +13816,7 @@ class TableComponent {
 }
 _TableComponent_resizeObserver = new WeakMap();
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableComponent, deps: [{ token: NuxeoService }, { token: AppConfigService }, { token: TranslationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableComponent, selector: "cts-table", inputs: { rows: "rows", columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", pageCount: "pageCount", totalRecords: "totalRecords", rowCursor: "rowCursor", fullWidth: "fullWidth", vocItemTranslationPrefix: "vocItemTranslationPrefix", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu", messages: "messages", defaultColumnSize: "defaultColumnSize" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: DatatableComponent, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n\t#tableContainer\r\n\tclass=\"iner-table-container\"\r\n\t[style]=\"'width:' + tableWidth\"\r\n\t*ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n\t<ngx-datatable\r\n\t\t[ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n\t\tclass=\"large-table\"\r\n\t\t[rows]=\"rows\"\r\n\t\t[summaryRow]=\"customFirstRow\"\r\n\t\t[columnMode]=\"'standard'\"\r\n\t\t[scrollbarH]=\"true\"\r\n\t\t[style.width.%]=\"100\"\r\n\t\t[externalSorting]=\"true\"\r\n\t\t(activate)=\"rowDetails($event)\"\r\n\t\t(select)=\"onSelect($event)\"\r\n\t\t(sort)=\"onSort($event)\"\r\n\t\t(window:resize)=\"assignTableColumns($event)\"\r\n\t\t[rowHeight]=\"isFixedOptionColumns ? '3rem' : 'auto'\"\r\n\t\t[selected]=\"selected\"\r\n\t\t[selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n\t\t[sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n\t\t[messages]=\"messages\"\r\n\t>\r\n\t\t<ngx-datatable-column\r\n\t\t\t*ngIf=\"multiSelectRows\"\r\n\t\t\t[width]=\"30\"\r\n\t\t\t[sortable]=\"false\"\r\n\t\t\t[prop]=\"''\"\r\n\t\t\t[canAutoResize]=\"false\"\r\n\t\t\t[draggable]=\"false\"\r\n\t\t\t[resizeable]=\"false\"\r\n\t\t>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-header-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-allRowsSelected=\"allRowsSelected\"\r\n\t\t\t\tlet-selectFn=\"selectFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-cell-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-isSelected=\"isSelected\"\r\n\t\t\t\tlet-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t</ngx-datatable-column>\r\n\t\t<!-- | translate -->\r\n\r\n\t\t<ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n\t\t\t<ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n\t\t\t<!-- [frozenRight]=\"column.type === 'actions'\" -->\r\n\t\t\t<ng-container *ngFor=\"let column of columns; let i = index\">\r\n\t\t\t\t<ng-container *permission=\"{ name: column.permission }\">\r\n\t\t\t\t\t<ngx-datatable-column\r\n\t\t\t\t\t\t*ngIf=\"column.display\"\r\n\t\t\t\t\t\t[sortable]=\"column.sortable\"\r\n\t\t\t\t\t\t[name]=\"prefix + column.name | translate\"\r\n\t\t\t\t\t\t[prop]=\"column.prop\"\r\n\t\t\t\t\t\t[resizeable]=\"false\"\r\n\t\t\t\t\t\t[draggable]=\"false\"\r\n\t\t\t\t\t\t[width]=\"column?.size || defaultColumnSize\"\r\n\t\t\t\t\t\t[frozenLeft]=\"isFixedOptionColumns && column.type === 'actions'\"\r\n\t\t\t\t\t\t[headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n\t\t\t\t\t\t[summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<ng-template let-row=\"row\" let-value=\"value\" let-index=\"index\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'text'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" *ngIf=\"!column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" matTooltip=\"{{ value ? value : '--' }}\" *ngIf=\"column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"value\" [dropdownId]=\"column.vocabularyId\">\r\n\t\t\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocCell'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ (value ? column.vocabularyId + '.' + value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocItem'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ vocItemTranslationPrefix + value | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'department'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"value\"> </cts-department-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'status'\">\r\n\t\t\t\t\t\t\t\t<div class=\"status-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"value {{ value }}\">\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"statusIcons && statusIcons !== {}\" class=\"status-icon {{ statusIcons[value] }}\"></span>\r\n\t\t\t\t\t\t\t\t\t\t{{ 'STATS.' + value | translate }}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'role'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ 'role.' + (value ? value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"!showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-pencil-square edit-icon\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'UPDATE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'edit')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-trash\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'delete' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-plus-square\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<span *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"action.type == 'button'; else showIcon\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.class }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"action.icon\" [class]=\"action.iconClass\" [svgIcon]=\"action.icon\"> </mat-icon>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t{{ action.title | translate }}\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<ng-template #showIcon>\r\n\t\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<button class=\"action-menu-trigger\" [matMenuTriggerFor]=\"menu\" [disabled]=\"disabledActions\">\r\n\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-three-dots-vertical\"></i>\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t<mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\">\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-pencil-square edit-icon\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'UPDATE' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-trash\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'delete' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-plus-square\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'USER_MANGMENT.addToDepartment' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<ng-conttainer *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ action.tooltip | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-conttainer>\r\n\t\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'date'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-date-viewer [withOutLabel]=\"true\" [value]=\"value\"></cts-date-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'custom'\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.template\" [column]=\"column\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'direction'\">\r\n\t\t\t\t\t\t\t\t<div (click)=\"iconSelected($event, row)\" class=\"status-wrapper {{ value }} {{ row.state }}\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['incoming'] : 'bi bi-box-arrow-down' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['outgoing'] : 'bi bi-box-arrow-up outgoing' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['internal'] : 'bi bi-box-arrow-right internal' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'InternalCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<ng-template #customRowTemplate let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<div class=\"w-full flex items-center justify-center overflow-visible\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.custom1stCellTemplate\" [column]=\"column\" [context]=\"row\">\r\n\t\t\t\t\t\t\t\t</cts-dynamic-column>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</ngx-datatable-column>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"responsiveView && tableMode !== tableModes.card\" (window:resize)=\"assignTableColumns($event)\">\r\n\t<div class=\"dynamic-cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'owner'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.owner]?.[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'status'\" class=\"value {{ row[property.value] }}\">\r\n\t\t\t\t\t\t\t{{ 'STATS.' + row[property.value] | translate }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'department'\">\r\n\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"row.properties[property.value]\"> </cts-department-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'vocabulary'\" class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t<cts-dropdown-viewer\r\n\t\t\t\t\t\t\t\t[withOutLabel]=\"true\"\r\n\t\t\t\t\t\t\t\t[value]=\"row.properties[property.value]\"\r\n\t\t\t\t\t\t\t\t[dropdownId]=\"property.vocabularyId\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t*ngIf=\"property.type === 'direction'\"\r\n\t\t\t\t\t\t\t(click)=\"iconSelected($event, row)\"\r\n\t\t\t\t\t\t\tclass=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-down\" *ngIf=\"row.type === 'IncomingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-up outgoing\" *ngIf=\"row.type === 'OutgoingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-right internal\" *ngIf=\"row.type === 'InternalCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"property.template\" [column]=\"property\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngFor=\"let row of rows\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'deleteMemo',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'deleteMemo')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'terminateDelegation',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'terminateDelegation')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'memoPublished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'MEMOS.PUBLISHED' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationFinished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.finished' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationActive',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.active' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row); cardFocused(i)\">\r\n\t\t\t\t<div class=\"key\" *ngIf=\"property.type !== 'default'\">\r\n\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"key\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value].fullName }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n\t\t\t\t\t\t{{ (row.properties[property.value] ? 'Yes' : 'No') | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"text\"\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n\t\t\t\t\t\t\t{{ item | translate }} {{ ', ' }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"tableColumns[0].template\" [column]=\"tableColumns[0]\" [context]=\"row\">\r\n\t\t\t\t</cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n\t<app-dynamic-component\r\n\t\tclass=\"table-custom-view__component\"\r\n\t\t*ngFor=\"let row of rows\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[row]=\"row\"\r\n\t\t[rowAction]=\"actionOnRow\"\r\n\t\t[onClick]=\"onRowSelected\"\r\n\t\t(click)=\"cardSelected(row)\"\r\n\t\t[class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n\t></app-dynamic-component>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{display:flex;justify-content:space-between;align-items:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:5px 5px 0;width:16px;height:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:\"\\f127\";display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:normal!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-up.sort-btn:before{content:\"\\f57b\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-down.sort-btn:before{content:\"\\f574\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;white-space:pre-wrap}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:flex}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .checkbox-input{z-index:99}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-scroll{width:100%!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{display:flex!important;min-height:50px!important;overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center .datatable-body-cell{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:50px;font-size:14px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row{min-width:100%!important;height:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center{display:flex;justify-content:space-between;padding:0 20px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell{min-height:50px;display:flex;align-items:center;overflow:hidden}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{width:100%;display:flex;justify-content:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input{z-index:99}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper{position:relative}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator{font-size:12px;position:absolute;top:-5px;right:-10px;color:#ebb98e}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value{display:flex;justify-content:center;align-items:center;border-radius:5px;width:100px;height:25px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon{margin-inline-end:5px;font-size:16px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft{background-color:#596973;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:#06a57e;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision{background:#689be7;color:#e9f1fd}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign{background-color:#dda722;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection{background-color:#28b994;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect{background-color:#e38888;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi{font-size:25px;cursor:pointer;color:#465573;margin:0 5px!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover{color:#2e62df!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button{display:flex;color:#5171a6;font-size:16px;height:45px;align-items:center;padding:0 10px;width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i{font-size:20px;padding:0;display:flex;align-items:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text{padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover{background-color:#e6ebf2}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi{font-size:25px;cursor:not-allowed;color:#465573;margin:0 5px!important;opacity:.7}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(even){background-color:#f4f6f8}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:#eef1f5}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:270px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:bold;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.cards-container .single-card .memo-title .action-wrap .action{margin:0 5px;cursor:pointer}.cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:bold}.cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.cards-container .single-card .memo-body{display:flex;padding:0 10px}.cards-container .single-card .memo-body .key{width:50%;font-size:12px;color:#9aa4ac}.cards-container .single-card .memo-body .value{width:50%;font-size:12px}.cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cards-container .single-card:hover{background-color:#f6f7f8}.cards-container .single-card:focus{background-color:#f6f7f8}.cards-container .selected-card{background-color:#f6f7f8}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.dynamic-cards-container{display:flex;flex-wrap:wrap;justify-content:center}.dynamic-cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:306px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.dynamic-cards-container .single-card .memo-title{font-size:14px;font-weight:bold;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.dynamic-cards-container .single-card .memo-title .action-wrap .action{cursor:pointer}.dynamic-cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.dynamic-cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:bold}.dynamic-cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.dynamic-cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.dynamic-cards-container .single-card .memo-body{display:flex;padding:0 10px}.dynamic-cards-container .single-card .memo-body .key{width:58%;font-size:12px;color:#9aa4ac;margin-bottom:4px}.dynamic-cards-container .single-card .memo-body .value{width:58%;font-size:12px}.dynamic-cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-cards-container .single-card .memo-body .draft{background-color:#596973;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:#06a57e;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;text-align:center}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:#fff;text-align:center}.dynamic-cards-container .single-card:hover{background-color:#f6f7f8}.dynamic-cards-container .single-card:focus{background-color:#f6f7f8}.dynamic-cards-container .selected-card{background-color:#f6f7f8}.overflowVisible{overflow:visible!important}.table-custom-view{display:var(--tcv-display, grid);grid-template-columns:var(--tcv-display-columns, repeat(var(--tcv-columns-count, auto-fit), minmax(350px, 1fr)));grid-gap:var(--tcv-gap, 1rem);gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell{flex-shrink:0}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{flex-shrink:0}.actions-wrapper i{font-size:var(--table-options-font-size, 2rem)!important}.ngx-datatable .datatable-row-left{position:absolute!important;right:0px!important}.ngx-datatable .datatable-row-left .datatable-body-cell{overflow:hidden;background:var(--table-options-body-cell-color, #fff)}.ngx-datatable .datatable-row-left .datatable-header-cell{overflow:hidden;background:var(--table-options-header-cell-color, #fff)}.rtl .ngx-datatable .datatable-row-left{left:0px!important;right:unset!important}\n"], components: [{ type: i4$2.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }, { type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: ["componentName", "row", "rowAction", "onClick"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { type: i4$2.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { type: i4$2.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0.ViewEncapsulation.None });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableComponent, selector: "cts-table", inputs: { rows: "rows", columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", pageCount: "pageCount", totalRecords: "totalRecords", rowCursor: "rowCursor", fullWidth: "fullWidth", vocItemTranslationPrefix: "vocItemTranslationPrefix", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu", messages: "messages", defaultColumnSize: "defaultColumnSize" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: DatatableComponent, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n\t#tableContainer\r\n\tclass=\"iner-table-container\"\r\n\t[style]=\"'width:' + tableWidth\"\r\n\t*ngIf=\"tableMode === tableModes.list && !responsiveView\"\r\n>\r\n\t<ngx-datatable\r\n\t\t[ngClass]=\"{ overflowVisible: customFirstRow }\"\r\n\t\tclass=\"large-table\"\r\n\t\t[rows]=\"rows\"\r\n\t\t[summaryRow]=\"customFirstRow\"\r\n\t\t[columnMode]=\"'standard'\"\r\n\t\t[scrollbarH]=\"true\"\r\n\t\t[style.width.%]=\"100\"\r\n\t\t[externalSorting]=\"true\"\r\n\t\t(activate)=\"rowDetails($event)\"\r\n\t\t(select)=\"onSelect($event)\"\r\n\t\t(sort)=\"onSort($event)\"\r\n\t\t(window:resize)=\"assignTableColumns($event)\"\r\n\t\t[rowHeight]=\"isFixedOptionColumns ? '3rem' : 'auto'\"\r\n\t\t[selected]=\"selected\"\r\n\t\t[selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n\t\t[sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n\t\t[messages]=\"messages\"\r\n\t>\r\n\t\t<ngx-datatable-column\r\n\t\t\t*ngIf=\"multiSelectRows\"\r\n\t\t\t[width]=\"30\"\r\n\t\t\t[sortable]=\"false\"\r\n\t\t\t[prop]=\"''\"\r\n\t\t\t[canAutoResize]=\"false\"\r\n\t\t\t[draggable]=\"false\"\r\n\t\t\t[resizeable]=\"false\"\r\n\t\t>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-header-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-allRowsSelected=\"allRowsSelected\"\r\n\t\t\t\tlet-selectFn=\"selectFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t\t<ng-template\r\n\t\t\t\tngx-datatable-cell-template\r\n\t\t\t\tlet-value=\"value\"\r\n\t\t\t\tlet-isSelected=\"isSelected\"\r\n\t\t\t\tlet-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n\t\t\t>\r\n\t\t\t\t<mat-checkbox color=\"primary\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\"> </mat-checkbox>\r\n\t\t\t</ng-template>\r\n\t\t</ngx-datatable-column>\r\n\t\t<!-- | translate -->\r\n\r\n\t\t<ng-container *ngIf=\"tableColumns$ | async as columns\">\r\n\t\t\t<ngx-datatable-column *ngIf=\"!columns.length\"></ngx-datatable-column>\r\n\r\n\t\t\t<!-- [frozenRight]=\"column.type === 'actions'\" -->\r\n\t\t\t<ng-container *ngFor=\"let column of columns; let i = index\">\r\n\t\t\t\t<ng-container *permission=\"{ name: column.permission }\">\r\n\t\t\t\t\t<ngx-datatable-column\r\n\t\t\t\t\t\t*ngIf=\"column.display\"\r\n\t\t\t\t\t\t[sortable]=\"column.sortable\"\r\n\t\t\t\t\t\t[name]=\"prefix + column.name | translate\"\r\n\t\t\t\t\t\t[prop]=\"column.prop\"\r\n\t\t\t\t\t\t[resizeable]=\"false\"\r\n\t\t\t\t\t\t[draggable]=\"false\"\r\n\t\t\t\t\t\t[width]=\"column?.size || defaultColumnSize\"\r\n\t\t\t\t\t\t[frozenLeft]=\"isFixedOptionColumns && column.type === 'actions'\"\r\n\t\t\t\t\t\t[headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n\t\t\t\t\t\t[summaryTemplate]=\"customFirstRow ? customRowTemplate : null\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<ng-template let-row=\"row\" let-value=\"value\" let-index=\"index\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'text'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" *ngIf=\"!column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\" matTooltip=\"{{ value ? value : '--' }}\" *ngIf=\"column.withTooltip\">\r\n\t\t\t\t\t\t\t\t\t{{ value ? value : '--' }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"value\" [dropdownId]=\"column.vocabularyId\">\r\n\t\t\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocCell'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ (value ? column.vocabularyId + '.' + value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'VocItem'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ vocItemTranslationPrefix + value | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'department'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"value\"> </cts-department-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'status'\">\r\n\t\t\t\t\t\t\t\t<div class=\"status-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"value {{ value }}\">\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"statusIcons && statusIcons !== {}\" class=\"status-icon {{ statusIcons[value] }}\"></span>\r\n\t\t\t\t\t\t\t\t\t\t{{ 'STATS.' + value | translate }}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'role'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t{{ 'role.' + (value ? value : '--') | translate }}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"!showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-pencil-square edit-icon\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'UPDATE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'edit')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-trash\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'delete' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\tclass=\"bi bi-plus-square\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t></i>\r\n\r\n\t\t\t\t\t\t\t\t\t<span *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"action.type == 'button'; else showIcon\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.class }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"action.icon\" [class]=\"action.iconClass\" [svgIcon]=\"action.icon\"> </mat-icon>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t{{ action.title | translate }}\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<ng-template #showIcon>\r\n\t\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t\t\t\t<!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\"\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"showActionsAsMenu\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<button class=\"action-menu-trigger\" [matMenuTriggerFor]=\"menu\" [disabled]=\"disabledActions\">\r\n\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-three-dots-vertical\"></i>\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t<mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\">\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-pencil-square edit-icon\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'UPDATE' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'voc-table' || entityType === 'department' || entityType === 'signers'\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-trash\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'delete' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\tmat-menu-item\r\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, 'delete')\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"entityType === 'users' && row.isInitial\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"bi bi-plus-square\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ 'USER_MANGMENT.addToDepartment' | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t<ng-conttainer *ngFor=\"let action of column.actions\">\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"{{ action.icon }}\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"action-text\">{{ action.tooltip | translate }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</ng-conttainer>\r\n\t\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'date'\">\r\n\t\t\t\t\t\t\t\t<div class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<cts-date-viewer [withOutLabel]=\"true\" [value]=\"value\"></cts-date-viewer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'custom'\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.template\" [column]=\"column\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.type === 'direction'\">\r\n\t\t\t\t\t\t\t\t<div (click)=\"iconSelected($event, row)\" class=\"status-wrapper {{ value }} {{ row.state }}\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['incoming'] : 'bi bi-box-arrow-down' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['outgoing'] : 'bi bi-box-arrow-up outgoing' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"{{ directionIcons ? directionIcons['internal'] : 'bi bi-box-arrow-right internal' }}\"\r\n\t\t\t\t\t\t\t\t\t\t\t*ngIf=\"row.type === 'InternalCorrespondence'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t<!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<ng-template #customRowTemplate let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n\t\t\t\t\t\t\t<div class=\"w-full flex items-center justify-center overflow-visible\">\r\n\t\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"column.custom1stCellTemplate\" [column]=\"column\" [context]=\"row\">\r\n\t\t\t\t\t\t\t\t</cts-dynamic-column>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</ngx-datatable-column>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"responsiveView && tableMode !== tableModes.card\" (window:resize)=\"assignTableColumns($event)\">\r\n\t<div class=\"dynamic-cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'owner'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.owner]?.[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'status'\" class=\"value {{ row[property.value] }}\">\r\n\t\t\t\t\t\t\t{{ 'STATS.' + row[property.value] | translate }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'department'\">\r\n\t\t\t\t\t\t\t<cts-department-viewer [noStyle]=\"true\" [value]=\"row.properties[property.value]\"> </cts-department-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'vocabulary'\" class=\"cell-text-wrapper\">\r\n\t\t\t\t\t\t\t<cts-dropdown-viewer\r\n\t\t\t\t\t\t\t\t[withOutLabel]=\"true\"\r\n\t\t\t\t\t\t\t\t[value]=\"row.properties[property.value]\"\r\n\t\t\t\t\t\t\t\t[dropdownId]=\"property.vocabularyId\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</cts-dropdown-viewer>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t*ngIf=\"property.type === 'direction'\"\r\n\t\t\t\t\t\t\t(click)=\"iconSelected($event, row)\"\r\n\t\t\t\t\t\t\tclass=\"status-wrapper {{ property.value }} {{ row.state }}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n\t\t\t\t\t\t\t\t<ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-down\" *ngIf=\"row.type === 'IncomingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-up outgoing\" *ngIf=\"row.type === 'OutgoingCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t\t<i class=\"bi bi-box-arrow-right internal\" *ngIf=\"row.type === 'InternalCorrespondence'\"></i>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t\t<cts-dynamic-column [id]=\"property.template\" [column]=\"property\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngFor=\"let row of rows\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\"> </cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.card\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n\t\t\t<div class=\"memo-title\">\r\n\t\t\t\t<span>\r\n\t\t\t\t\t{{ row.properties.referenceNumber }}\r\n\t\t\t\t</span>\r\n\t\t\t\t<span class=\"action-wrap\">\r\n\t\t\t\t\t<span class=\"action\" *ngFor=\"let action of tableActions\">\r\n\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: action.permission,\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tclass=\"{{ action.icon }}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ action.tooltip | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"performAction(row, action.actionName)\"\r\n\t\t\t\t\t\t></i>\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'deleteMemo',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'deleteMemo')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'terminateDelegation',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t(click)=\"performAction(row, 'terminateDelegation')\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'memoPublished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'MEMOS.PUBLISHED' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationFinished',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.finished' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<span\r\n\t\t\t\t\t\tclass=\"publish-state\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'delegationActive',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'delegations.active' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row); cardFocused(i)\">\r\n\t\t\t\t<div class=\"key\" *ngIf=\"property.type !== 'default'\">\r\n\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"key\"\r\n\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t}\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ prefix + property.key | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value].fullName }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n\t\t\t\t\t\t{{ (row.properties[property.value] ? 'Yes' : 'No') | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'default'\">\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"text\"\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'internalIsEnabled',\r\n\t\t\t\t\t\t\t\tentity: row,\r\n\t\t\t\t\t\t\t\tuser: nuxeoService.nuxeoClient.user\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-container *ngIf=\"property.type === 'custom'\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n\t\t\t\t\t\t\t{{ item | translate }} {{ ', ' }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.dynamicCard\">\r\n\t<div class=\"cards-container\">\r\n\t\t<div\r\n\t\t\tclass=\"single-card\"\r\n\t\t\t[ngClass]=\"{ 'selected-card': highlightSelectedCard && row?.isSelected }\"\r\n\t\t\t*ngFor=\"let row of rows\"\r\n\t\t>\r\n\t\t\t<div *ngIf=\"tableColumns.length > 1\">\r\n\t\t\t\t<div class=\"memo-body\" *ngFor=\"let property of tableColumns$ | async\" (click)=\"cardSelected(row)\">\r\n\t\t\t\t\t<div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n\t\t\t\t\t<div class=\"value\">\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n\t\t\t\t\t\t\t{{ row.properties[property.value] | localizedDate : format : (isArabic ? 'ar-AR' : 'en-US') }}\r\n\t\t\t\t\t\t\t<!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"iner-card-container {{ entityType }}\" (click)=\"cardSelected(row)\" *ngIf=\"tableColumns.length === 1\">\r\n\t\t\t\t<cts-dynamic-column [id]=\"tableColumns[0].template\" [column]=\"tableColumns[0]\" [context]=\"row\">\r\n\t\t\t\t</cts-dynamic-column>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === tableModes.custom\" class=\"table-custom-view\">\r\n\t<app-dynamic-component\r\n\t\tclass=\"table-custom-view__component\"\r\n\t\t*ngFor=\"let row of rows\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[row]=\"row\"\r\n\t\t[rowAction]=\"actionOnRow\"\r\n\t\t[onClick]=\"onRowSelected\"\r\n\t\t(click)=\"cardSelected(row)\"\r\n\t\t[class.dynamic-selected-card]=\"highlightSelectedCard && row?.isSelected\"\r\n\t></app-dynamic-component>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.iner-table-container{max-width:var(--table-container-max-width, 100%)}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{display:flex;justify-content:space-between;align-items:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:5px 5px 0;width:16px;height:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:\"\\f127\";display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:normal!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-up.sort-btn:before{content:\"\\f57b\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-icon-down.sort-btn:before{content:\"\\f574\";color:#000;font-size:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;white-space:pre-wrap}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper{display:flex}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .datatable-header-cell-wrapper .datatable-header-cell-label{text-align:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .datatable-header-cell-template-wrap .checkbox-input{z-index:99}.ngx-datatable .datatable-body .empty-row{text-align:center}.ngx-datatable .datatable-body .datatable-scroll{width:100%!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{display:flex!important;min-height:50px!important;overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-row-center .datatable-body-cell{overflow:visible!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row{height:50px;font-size:14px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row{min-width:100%!important;height:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center{display:flex;justify-content:space-between;padding:0 20px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell{min-height:50px;display:flex;align-items:center;overflow:hidden}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label{width:100%;display:flex;justify-content:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .checkbox-input{z-index:99}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .datatable-body-cell-label .cell-text-wrapper{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper{position:relative}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .iner-status-wrapper .fav-icon-indicator{font-size:12px;position:absolute;top:-5px;right:-10px;color:#ebb98e}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value{display:flex;justify-content:center;align-items:center;border-radius:5px;width:100px;height:25px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .value .status-icon{margin-inline-end:5px;font-size:16px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .draft{background-color:#596973;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .inProgress{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .registered{background-color:#5a1496;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .archived{background-color:#fbb62c;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .closed{background-color:#00dca5;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .approved{background-color:#06a57e;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .assigned{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .sent{background-color:#3c3cf0;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_revision{background:#689be7;color:#e9f1fd}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .rejected{background-color:#fd6670;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .under_sign{background-color:#dda722;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirectSelection{background-color:#28b994;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper .redirect{background-color:#e38888;color:#fff}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Incoming{color:#00dca5;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Outgoing{color:#fbb62c;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.Internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .status-wrapper.internal{color:#3c3cf0;font-size:30px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi{font-size:25px;cursor:pointer;color:#465573;margin:0 5px!important}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .bi:hover{color:#2e62df!important;font-size:26px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button{display:flex;color:#5171a6;font-size:16px;height:45px;align-items:center;padding:0 10px;width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button i{font-size:20px;padding:0;display:flex;align-items:center}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button .action-text{padding:0 5px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .actions-wrapper .datatable-actions-menu button:hover{background-color:#e6ebf2}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper{width:100%}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi,.ngx-datatable .datatable-body .datatable-scroll .datatable-summary-row .datatable-body-row .datatable-row-center .datatable-body-cell .disabled-actions-wrapper .bi{font-size:25px;cursor:not-allowed;color:#465573;margin:0 5px!important;opacity:.7}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:nth-child(even){background-color:#f4f6f8}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper:hover{background-color:#eef1f5}.cards-container{display:flex;flex-wrap:wrap;justify-content:center}.cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:270px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.cards-container .single-card .memo-title{font-size:14px;font-weight:bold;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.cards-container .single-card .memo-title .action-wrap .action{margin:0 5px;cursor:pointer}.cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:bold}.cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.cards-container .single-card .memo-body{display:flex;padding:0 10px}.cards-container .single-card .memo-body .key{width:50%;font-size:12px;color:#9aa4ac}.cards-container .single-card .memo-body .value{width:50%;font-size:12px}.cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cards-container .single-card:hover{background-color:#f6f7f8}.cards-container .single-card:focus{background-color:#f6f7f8}.cards-container .selected-card{background-color:#f6f7f8}.rtl .ngx-datatable .datatable-body .status-wrapper .fav-icon-indicator{left:-10px;top:15px!important;right:auto!important}.dynamic-cards-container{display:flex;flex-wrap:wrap;justify-content:center}.dynamic-cards-container .single-card{padding:15px;border:1px solid rgba(180,186,198,.2);border-radius:3px;min-width:306px;width:24%;margin:0 5px 10px;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;cursor:pointer}.dynamic-cards-container .single-card .memo-title{font-size:14px;font-weight:bold;color:#465573;border-bottom:1px solid lightgray;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.dynamic-cards-container .single-card .memo-title .action-wrap .action{cursor:pointer}.dynamic-cards-container .single-card .memo-title .action-wrap .action i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap .action i:hover{color:#00f}.dynamic-cards-container .single-card .memo-title .action-wrap .publish-state{font-size:12px;color:#00dca5;font-weight:bold}.dynamic-cards-container .single-card .memo-title .action-wrap button{border:none;color:#465573;background-color:transparent}.dynamic-cards-container .single-card .memo-title .action-wrap button i{font-size:16px}.dynamic-cards-container .single-card .memo-title .action-wrap button i:hover{color:#00f}.dynamic-cards-container .single-card .memo-body{display:flex;padding:0 10px}.dynamic-cards-container .single-card .memo-body .key{width:58%;font-size:12px;color:#9aa4ac;margin-bottom:4px}.dynamic-cards-container .single-card .memo-body .value{width:58%;font-size:12px}.dynamic-cards-container .single-card .memo-body .value .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-cards-container .single-card .memo-body .draft{background-color:#596973;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .approved{background-color:#06a57e;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;text-align:center}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:#fff;text-align:center}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:#fff;text-align:center}.dynamic-cards-container .single-card:hover{background-color:#f6f7f8}.dynamic-cards-container .single-card:focus{background-color:#f6f7f8}.dynamic-cards-container .selected-card{background-color:#f6f7f8}.overflowVisible{overflow:visible!important}.table-custom-view{display:var(--tcv-display, grid);grid-template-columns:var(--tcv-display-columns, repeat(var(--tcv-columns-count, auto-fit), minmax(350px, 1fr)));grid-gap:var(--tcv-gap, 1rem);gap:var(--tcv-gap, 1rem);padding-inline:var(--tcv-padding-inline, 1rem);padding-block:var(--tcv-padding-block, 1rem)}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell{flex-shrink:0}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{flex-shrink:0}.actions-wrapper i{font-size:var(--table-options-font-size, 2rem)!important}.ngx-datatable .datatable-row-left{position:absolute!important;right:0px!important}.ngx-datatable .datatable-row-left .datatable-body-cell{overflow:hidden;background:var(--table-options-body-cell-color, #fff)}.ngx-datatable .datatable-row-left .datatable-header-cell{overflow:hidden;background:var(--table-options-header-cell-color, #fff)}.rtl .ngx-datatable .datatable-row-left{left:0px!important;right:unset!important}\n"], components: [{ type: i4$2.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: DropdownViewerComponent, selector: "cts-dropdown-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }, { type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: ["componentName", "row", "rowAction", "onClick"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { type: i4$2.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { type: i4$2.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{
@@ -14094,7 +14095,7 @@ class TableColumnsTogglerComponent extends BaseComponent {
     }
 }
 TableColumnsTogglerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableColumnsTogglerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TableColumnsTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: { prefix: "prefix", sortable: "sortable", columns: "columns" }, outputs: { columnsChanged: "columnsChanged" }, host: { classAttribute: "columns-toggler" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"columns-toggler__button\">\r\n\t<mat-icon inline> tune </mat-icon>\r\n\t{{ 'TABLE.toggleColumns' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<div\r\n\t\tclass=\"flex justify-between mb-2 border-bottom border-primary-100 top-0 pb-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t>\r\n\t\t<mat-checkbox\r\n\t\t\t*ngIf=\"!!columns?.length && !enableSorting\"\r\n\t\t\t(change)=\"onCheckAllChange($event)\"\r\n\t\t\t[checked]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length === columns?.length\"\r\n\t\t\t[indeterminate]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length < columns?.length\"\r\n\t\t>\r\n\t\t\t{{ 'FILTERS.all' | translate }}\r\n\t\t</mat-checkbox>\r\n\r\n\t\t<button class=\"action-btn apply-sorting-btn\" *ngIf=\"enableSorting\" (click)=\"applySort()\">\r\n\t\t\t{{ 'TABLE.applySorting' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<mat-icon\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleSorting()\"\r\n\t\t\t*ngIf=\"sortEnabled\"\r\n\t\t\t[title]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\t[matTooltip]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\tclass=\"columns-toggler__sort-icon\"\r\n\t\t>\r\n\t\t\t{{ enableSorting ? 'playlist_remove' : 'format_line_spacing' }}\r\n\t\t</mat-icon>\r\n\t</div>\r\n\r\n\t<ul\r\n\t\tclass=\"columns-toggler__columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t[dir]=\"direction\"\r\n\t\tcdkDropList\r\n\t\t[cdkDropListDisabled]=\"!enableSorting && !sortEnabled\"\r\n\t\t(cdkDropListDropped)=\"drop($event)\"\r\n\t>\r\n\t\t<li\r\n\t\t\t*ngFor=\"let col of columns\"\r\n\t\t\tclass=\"mb-2 column-control\"\r\n\t\t\tcdkDrag\r\n\t\t\t[cdkDragDisabled]=\"!enableSorting\"\r\n\t\t\t[class.sorting-enabled]=\"enableSorting\"\r\n\t\t\t[class.column-control__hidden]=\"!columnsSelection.isSelected(col)\"\r\n\t\t>\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n\t<ul\r\n\t\tclass=\"columns-toggler__frozen-columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t*ngIf=\"sortEnabled && frozenColumns?.length\"\r\n\t>\r\n\t\t<li *ngFor=\"let col of frozenColumns\" class=\"column-control\">\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n</mat-menu>\r\n", styles: [".columns-toggler__sort-icon{color:var(--sort-icon-color, #000)}.columns-toggler__columns{max-height:var(--cols-max-height, 275px);overflow-y:auto}.columns-toggler__columns .check-all-box{background:var(--check-background-color, #fff)}.columns-toggler__columns .column-control.sorting-enabled ::ng-deep,.columns-toggler__columns .column-control.sorting-enabled ::ng-deep .mat-checkbox-label{cursor:move}.columns-toggler__columns .column-control.sorting-enabled.cdk-drag-disabled{cursor:not-allowed;background:var(--drag-disabled-background, transparent);box-shadow:0 0 0 3px var(--drag-disabled-background, transparent)}.columns-toggler__columns .column-control__hidden{opacity:.7}.columns-toggler__columns .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}.columns-toggler__columns .cdk-drag-placeholder{opacity:0}.columns-toggler__frozen-columns{border-top:var(--frozen-cols-border-top, 2px solid #ccc);max-height:var(--frozen-cols--max-height, 150px);overflow-y:auto}::ng-deep .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columns-toggler__sort-icon{color:var(--icon-color)!important}.apply-sorting-btn{background-color:var(--logo-button-bg);color:var(--main-text)}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i7$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableColumnsTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: { prefix: "prefix", sortable: "sortable", columns: "columns" }, outputs: { columnsChanged: "columnsChanged" }, host: { classAttribute: "columns-toggler" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"columns-toggler__button\">\r\n\t<mat-icon inline> tune </mat-icon>\r\n\t{{ 'TABLE.toggleColumns' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<div\r\n\t\tclass=\"flex justify-between mb-2 border-bottom border-primary-100 top-0 pb-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t>\r\n\t\t<mat-checkbox\r\n\t\t\t*ngIf=\"!!columns?.length && !enableSorting\"\r\n\t\t\t(change)=\"onCheckAllChange($event)\"\r\n\t\t\t[checked]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length === columns?.length\"\r\n\t\t\t[indeterminate]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length < columns?.length\"\r\n\t\t>\r\n\t\t\t{{ 'FILTERS.all' | translate }}\r\n\t\t</mat-checkbox>\r\n\r\n\t\t<button class=\"action-btn apply-sorting-btn\" *ngIf=\"enableSorting\" (click)=\"applySort()\">\r\n\t\t\t{{ 'TABLE.applySorting' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<mat-icon\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleSorting()\"\r\n\t\t\t*ngIf=\"sortEnabled\"\r\n\t\t\t[title]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\t[matTooltip]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\tclass=\"columns-toggler__sort-icon\"\r\n\t\t>\r\n\t\t\t{{ enableSorting ? 'playlist_remove' : 'format_line_spacing' }}\r\n\t\t</mat-icon>\r\n\t</div>\r\n\r\n\t<ul\r\n\t\tclass=\"columns-toggler__columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t[dir]=\"direction\"\r\n\t\tcdkDropList\r\n\t\t[cdkDropListDisabled]=\"!enableSorting && !sortEnabled\"\r\n\t\t(cdkDropListDropped)=\"drop($event)\"\r\n\t>\r\n\t\t<li\r\n\t\t\t*ngFor=\"let col of columns\"\r\n\t\t\tclass=\"mb-2 column-control\"\r\n\t\t\tcdkDrag\r\n\t\t\t[cdkDragDisabled]=\"!enableSorting\"\r\n\t\t\t[class.sorting-enabled]=\"enableSorting\"\r\n\t\t\t[class.column-control__hidden]=\"!columnsSelection.isSelected(col)\"\r\n\t\t>\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n\t<ul\r\n\t\tclass=\"columns-toggler__frozen-columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t*ngIf=\"sortEnabled && frozenColumns?.length\"\r\n\t>\r\n\t\t<li *ngFor=\"let col of frozenColumns\" class=\"column-control\">\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n</mat-menu>\r\n", styles: [".columns-toggler__sort-icon{color:var(--sort-icon-color, #000)}.columns-toggler__columns{max-height:var(--cols-max-height, 275px);overflow-y:auto}.columns-toggler__columns .check-all-box{background:var(--check-background-color, #fff)}.columns-toggler__columns .column-control.sorting-enabled ::ng-deep,.columns-toggler__columns .column-control.sorting-enabled ::ng-deep .mat-checkbox-label{cursor:move}.columns-toggler__columns .column-control.sorting-enabled.cdk-drag-disabled{cursor:not-allowed;background:var(--drag-disabled-background, transparent);box-shadow:0 0 0 3px var(--drag-disabled-background, transparent)}.columns-toggler__columns .column-control__hidden{opacity:.7}.columns-toggler__columns .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}.columns-toggler__columns .cdk-drag-placeholder{opacity:0}.columns-toggler__frozen-columns{border-top:var(--frozen-cols-border-top, 2px solid #ccc);max-height:var(--frozen-cols--max-height, 150px);overflow-y:auto}::ng-deep .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columns-toggler__sort-icon{color:var(--icon-color)!important}.apply-sorting-btn{background-color:var(--logo-button-bg);color:var(--main-text)}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i7$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableColumnsTogglerComponent, decorators: [{
             type: Component,
             args: [{
@@ -14135,7 +14136,7 @@ class TableExportComponent {
     }
 }
 TableExportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableExportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableExportComponent, selector: "ndf-table-export", inputs: { config: "config" }, outputs: { onExport: "onExport" }, ngImport: i0, template: "<button\r\n\tmat-stroked-button\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t(click)=\"export()\"\r\n\t*ngIf=\"!config?.allowedTypes\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n\r\n<button\r\n\tmat-stroked-button\r\n\t*ngIf=\"config?.allowedTypes\"\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\t[attr.aria-label]=\"'TABLE.EXPORT.export' | translate\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let type of config?.allowedTypes\" (click)=\"export(type.value)\">\r\n\t\t<span>{{ type.label | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: [""], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe } });
+TableExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableExportComponent, selector: "ndf-table-export", inputs: { config: "config" }, outputs: { onExport: "onExport" }, ngImport: i0, template: "<button\r\n\tmat-stroked-button\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t(click)=\"export()\"\r\n\t*ngIf=\"!config?.allowedTypes\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n\r\n<button\r\n\tmat-stroked-button\r\n\t*ngIf=\"config?.allowedTypes\"\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\t[attr.aria-label]=\"'TABLE.EXPORT.export' | translate\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let type of config?.allowedTypes\" (click)=\"export(type.value)\">\r\n\t\t<span>{{ type.label | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: [""], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableExportComponent, decorators: [{
             type: Component,
             args: [{
@@ -14468,7 +14469,7 @@ class FilterOptionTextComponent {
     }
 }
 FilterOptionTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterOptionTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterOptionTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterOptionTextComponent, selector: "filter-option-text", inputs: { option: "option", showCount: "showCount", language: "language" }, host: { classAttribute: "fot" }, ngImport: i0, template: "<span class=\"fot__label\" [matTooltip]=\"option?.tooltip | optionTooltip: language\">\r\n\t{{ option | localizedLabel: language }}\r\n</span>\r\n\r\n<small class=\"fot__count\" *ngIf=\"showCount\">{{ option.count }}</small>\r\n", styles: [".fot{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:.3rem;gap:.3rem;margin-inline:var(--fot-margin-inline, 0);font-size:var(--fot-font-size, .8rem);line-height:var(--fot-line-height, 1.3);width:var(--fot-width, 100%)}.fot__label{color:var(--fot-label-color, currentColor);white-space:var(--fot-label-white-space, pre-wrap);word-break:var(--fot-label-word-break, break-word);max-width:var(--fot-label-width, 100%)}.fot__count{color:var(--fot-count-color, var(--secondary, currentColor));background:var(--fot-count-background, #eee);border-radius:var(--fot-count-radius, 9px);padding:var(--fot-count-padding, .2rem .3rem);min-width:var(--fot-count-min-width, 1.8rem);text-align:center}\n"], directives: [{ type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "optionTooltip": TooltipPipe, "localizedLabel": LocalizedLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FilterOptionTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterOptionTextComponent, selector: "filter-option-text", inputs: { option: "option", showCount: "showCount", language: "language" }, host: { classAttribute: "fot" }, ngImport: i0, template: "<span class=\"fot__label\" [matTooltip]=\"option?.tooltip | optionTooltip: language\">\r\n\t{{ option | localizedLabel: language }}\r\n</span>\r\n\r\n<small class=\"fot__count\" *ngIf=\"showCount\">{{ option.count }}</small>\r\n", styles: [".fot{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:.3rem;gap:.3rem;margin-inline:var(--fot-margin-inline, 0);font-size:var(--fot-font-size, .8rem);line-height:var(--fot-line-height, 1.3);width:var(--fot-width, 100%)}.fot__label{color:var(--fot-label-color, currentColor);white-space:var(--fot-label-white-space, pre-wrap);word-break:var(--fot-label-word-break, break-word);max-width:var(--fot-label-width, 100%)}.fot__count{color:var(--fot-count-color, var(--secondary, currentColor));background:var(--fot-count-background, #eee);border-radius:var(--fot-count-radius, 9px);padding:var(--fot-count-padding, .2rem .3rem);min-width:var(--fot-count-min-width, 1.8rem);text-align:center}\n"], directives: [{ type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "optionTooltip": TooltipPipe, "localizedLabel": LocalizedLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterOptionTextComponent, decorators: [{
             type: Component,
             args: [{
@@ -15962,7 +15963,7 @@ NdfDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             useExisting: forwardRef(() => NdfDatepickerComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"calendarService.dateType$ | async as dateType\" class=\"ndf-datepicker ndf-datepicker--{{ dateType }}\">\r\n\t<label class=\"ndf-datepicker__label\" *ngIf=\"label\">{{ label }}</label>\r\n\t<div>\r\n\t\t<ndf-gregorian-datepicker\r\n\t\t\t*ngIf=\"calendarService.isGregorian\"\r\n\t\t\t[formControl]=\"dateControl\"\r\n\t\t\tclass=\"ndf-datepicker__input\"\r\n\t\t>\r\n\t\t\t<ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\r\n\t\t</ndf-gregorian-datepicker>\r\n\r\n\t\t<ndf-hijri-datepicker *ngIf=\"calendarService.isHijri\" class=\"ndf-datepicker__input\" [formControl]=\"dateControl\"\r\n\t\t\t><ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\r\n\t\t</ndf-hijri-datepicker>\r\n\t</div>\r\n\t<ng-template #actions>\r\n\t\t<mat-icon\r\n      class=\"datepicker-button\"\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleCalendar()\"\r\n\t\t\t[matTooltip]=\"(dateType == dateTypes.Hijri ? 'DATE_PICKER.gregorian' : 'DATE_PICKER.hijri') | translate\"\r\n\t\t>\r\n\t\t\t{{ dateType == dateTypes.Hijri ? 'light_mode' : ' dark_mode' }}\r\n\t\t</mat-icon>\r\n\t</ng-template>\r\n</div>\r\n", components: [{ type: NdfGregorianDatepickerComponent, selector: "ndf-gregorian-datepicker" }, { type: NdfHijriDatepickerComponent, selector: "ndf-hijri-datepicker" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"calendarService.dateType$ | async as dateType\" class=\"ndf-datepicker ndf-datepicker--{{ dateType }}\">\r\n\t<label class=\"ndf-datepicker__label\" *ngIf=\"label\">{{ label }}</label>\r\n\t<div>\r\n\t\t<ndf-gregorian-datepicker\r\n\t\t\t*ngIf=\"calendarService.isGregorian\"\r\n\t\t\t[formControl]=\"dateControl\"\r\n\t\t\tclass=\"ndf-datepicker__input\"\r\n\t\t>\r\n\t\t\t<ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\r\n\t\t</ndf-gregorian-datepicker>\r\n\r\n\t\t<ndf-hijri-datepicker *ngIf=\"calendarService.isHijri\" class=\"ndf-datepicker__input\" [formControl]=\"dateControl\"\r\n\t\t\t><ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\r\n\t\t</ndf-hijri-datepicker>\r\n\t</div>\r\n\t<ng-template #actions>\r\n\t\t<mat-icon\r\n      class=\"datepicker-button\"\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleCalendar()\"\r\n\t\t\t[matTooltip]=\"(dateType == dateTypes.Hijri ? 'DATE_PICKER.gregorian' : 'DATE_PICKER.hijri') | translate\"\r\n\t\t>\r\n\t\t\t{{ dateType == dateTypes.Hijri ? 'light_mode' : ' dark_mode' }}\r\n\t\t</mat-icon>\r\n\t</ng-template>\r\n</div>\r\n", components: [{ type: NdfGregorianDatepickerComponent, selector: "ndf-gregorian-datepicker" }, { type: NdfHijriDatepickerComponent, selector: "ndf-hijri-datepicker" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfDatepickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -16479,6 +16480,57 @@ function shouldIncludeValue(value) {
     return !Array.isArray(value) && (!!value || isBoolean(value) || isNumber(value) || isDate(value));
 }
 
+class NxQlQuery extends NxQL {
+    static preparePayloadItem(value, field) {
+        var _a;
+        const _defaultOperator = field.type == 'aggregation' ? COMPARISON_OPERATOR.in : COMPARISON_OPERATOR.like;
+        const _fieldName = field.config.fieldKey;
+        const _operator = (value === null || value === void 0 ? void 0 : value.operator) || ((_a = field.config) === null || _a === void 0 ? void 0 : _a.operator) || _defaultOperator;
+        return {
+            name: _fieldName,
+            operator: _operator,
+            value: NxQlQuery.prepareValueByOperator(_operator, value)
+        };
+    }
+    static prepareValueByOperator(operator, fieldValue) {
+        const _opr = COMPARISON_OPERATOR;
+        const { value, prefix } = fieldValue;
+        if (operator === _opr.between) {
+            return NxQlQuery._getMinMaxRange(fieldValue, prefix);
+        }
+        const operatorHandlers = {
+            [_opr.equals]: NxQlQuery.equals,
+            [_opr.notEquals]: NxQlQuery.equals,
+            [_opr.lessThan]: NxQlQuery.equals,
+            [_opr.greaterThan]: NxQlQuery.equals,
+            [_opr.in]: NxQlQuery.in,
+            [_opr.notIn]: NxQlQuery.in,
+            [_opr.lessThanOrEqual]: NxQlQuery.equals,
+            [_opr.greaterThanOrEqual]: NxQlQuery.equals,
+            [_opr.like]: NxQlQuery.like,
+            [_opr.iLike]: NxQlQuery.like,
+            [_opr.notLike]: NxQlQuery.like,
+            [_opr.notILike]: NxQlQuery.like,
+            [_opr.startsWith]: NxQlQuery.equals,
+            [_opr.fullText]: NxQlQuery.equals
+        };
+        const _val = Array.isArray(value) ? value.join(',') : value;
+        return operatorHandlers[operator](_val, prefix);
+    }
+    static equals(value, prefix = '') {
+        return `${prefix ? `${prefix} ` : ''}'${value.trim()}'`;
+    }
+    static like(value, prefix = '') {
+        return `${prefix ? `${prefix} ` : ''}'%${value.trim()}%'`;
+    }
+    static in(value, prefix = '') {
+        return `${prefix ? `${prefix} ` : ''}(${value.trim()})`;
+    }
+    static between(value1, value2) {
+        return `${value1} AND ${value2}`;
+    }
+}
+
 class ActiveUserService extends BaseService {
     getCurrentUser() {
         return this.user;
@@ -16707,6 +16759,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class FiltersMapperService {
+    preparePayload(fields, criteria) {
+        return this._preparePayload(fields, criteria);
+    }
+    _preparePayload(fields, criteria) {
+        const params = {};
+        const predicateList = [];
+        const payload = {};
+        for (const field of fields) {
+            const fieldValue = criteria[field.config.fieldKey];
+            const paramKey = field.type == 'aggregation' ? field.config.aggregation : field.config.fieldKey;
+            if (!fieldValue) {
+                continue;
+            }
+            if ((this._sendInPayload(field) || this._sendCustom(field)) && isFieldValueObject(fieldValue)) {
+                const _data = NxQlQuery.preparePayloadItem(fieldValue, field);
+                predicateList.push(_data);
+                continue;
+            }
+            if (this._sendInPayload(field)) {
+                payload[paramKey] = this._stringifyValue(fieldValue);
+            }
+            if (this._sendCustom(field) || this._sendInQueryParams(field)) {
+                params[paramKey] = this._stringifyValue(fieldValue);
+            }
+        }
+        return {
+            params,
+            payload: Object.assign(Object.assign({}, payload), { predicateList })
+        };
+    }
+    _stringifyValue(value) {
+        return Array.isArray(value) ? JSON.stringify(value) : value;
+    }
+    _sendInQueryParams(field) {
+        var _a;
+        return ((_a = field.config) === null || _a === void 0 ? void 0 : _a.sendMode) === FIELD_SEND_MODE.queryParam;
+    }
+    _sendInPayload(field) {
+        var _a;
+        return ((_a = field.config) === null || _a === void 0 ? void 0 : _a.sendMode) === FIELD_SEND_MODE.payload;
+    }
+    _sendCustom(field) {
+        var _a;
+        return ((_a = field.config) === null || _a === void 0 ? void 0 : _a.sendMode) === FIELD_SEND_MODE.custom;
+    }
+}
+FiltersMapperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersMapperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FiltersMapperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersMapperService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersMapperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class BaseAggregationField extends BaseSelector {
     /**
      *
@@ -17882,7 +17990,7 @@ PredicateTextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => PredicateTextInputComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<input\r\n\t*ngIf=\"!maskOptions?.mask\"\r\n\ttype=\"text\"\r\n\tclass=\"text-field__input\"\r\n\t[formControl]=\"internalValue\"\r\n\t[title]=\"field?.label | translate\"\r\n\t[placeholder]=\"renderOptions?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n/>\r\n\r\n<input\r\n\t*ngIf=\"maskOptions?.mask\"\r\n\ttype=\"text\"\r\n\tclass=\"text-field__input\"\r\n\t[formControl]=\"internalValue\"\r\n\t[title]=\"field?.label | translate\"\r\n\t[placeholder]=\"renderOptions?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n\t[mask]=\"maskOptions?.mask\"\r\n\t[dropSpecialCharacters]=\"maskOptions?.dropSpecialCharacters ?? true\"\r\n\t[showMaskTyped]=\"maskOptions?.showMaskTyped ?? true\"\r\n\t[validation]=\"maskOptions?.validation\"\r\n\t[shownMaskExpression]=\"maskOptions?.shownMaskExpression\"\r\n\t[allowNegativeNumbers]=\"maskOptions?.allowNegativeNumbers\"\r\n\t[keepCharacterPositions]=\"maskOptions?.keepCharacterPositions\"\r\n\t[leadZero]=\"maskOptions?.leadZero\"\r\n\t[hiddenInput]=\"maskOptions?.hiddenInput\"\r\n\t[clearIfNotMatch]=\"maskOptions?.clearIfNotMatch\"\r\n\t[prefix]=\"maskOptions?.prefix ?? ''\"\r\n\t[suffix]=\"maskOptions?.suffix ?? ''\"\r\n/>\r\n\r\n<div *ngIf=\"renderOptions?.suffix\" class=\"text-field__suffix\">\r\n\t<mat-icon\r\n\t\t*ngIf=\"tooltip\"\r\n\t\t[matTooltip]=\"tooltip | hashTranslateAsync | async\"\r\n\t\tclass=\"text-field__suffix__item suffix-icon\"\r\n\t>\r\n\t\tinfo\r\n\t</mat-icon>\r\n\r\n\t<span *ngIf=\"renderOptions.suffix?.text\" class=\"text-field__suffix__item text- suffix-text\">\r\n\t\t{{ renderOptions.suffix.text | translate }}\r\n\t</span>\r\n\r\n\t<button *ngIf=\"selectConfig\" class=\"text-field__suffix__item suffix-button\" [matMenuTriggerFor]=\"menu\">\r\n\t\t<mat-icon> edit </mat-icon>\r\n\t</button>\r\n\r\n\t<button *ngIf=\"dialogConfig\" class=\"text-field__suffix__item suffix-button\" (click)=\"openModal()\">\r\n\t\t<mat-icon>help_outline</mat-icon>\r\n\t</button>\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"text-field__suffix__menu\">\r\n\t<span [dir]=\"direction\" class=\"text-field__suffix__menu__wrapper\" *ngIf=\"selectConfig?.items\">\r\n\t\t<button\r\n\t\t\tmat-menu-item\r\n\t\t\t*ngFor=\"let item of selectConfig.items\"\r\n\t\t\t(click)=\"changeOperator(item)\"\r\n\t\t\t[class.selected]=\"item.value === selectValue?.value\"\r\n\t\t>\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".text-field{--text-border-color: var(--tf-border-color, var(--main-hover));display:var(--tf-display, inline-grid);grid-template-columns:var(--tf-columns, 1fr auto);align-items:var(--tf-align-items, center);border:var(--tf-border, 1px solid);border-color:var(--text-border-color);border-radius:var(--tf-radius, 4px);color:var(--tf-background, var(--main-text));background-color:var(--tf-background, transparent);height:var(--tf-height, calc(1.5em + .75rem + 2px));width:var(--tf-width, 100%)}.text-field:focus-within{--text-border-color: var(--tf-focus-border-color, var(--main-color))}.text-field__input{display:block;padding:var(--tf-input-padding, .375rem .75rem);font-size:1rem;font-weight:400;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;border-start-start-radius:var(--tf-radius, 4px);border-end-start-radius:var(--tf-radius, 4px);min-width:0}.text-field__suffix{display:inline-flex;align-items:center;grid-gap:var(--tf-suffix-gap, 0 .2rem);gap:var(--tf-suffix-gap, 0 .2rem);border-inline-start:var(--tf-suffix-start-border, 1px solid var(--text-border-color))}.text-field__suffix__item{padding:var(--tf-item-padding, 0 .1rem);width:auto;height:100%;display:grid;place-items:center}.text-field__suffix__menu .mat-menu-item{line-height:var(--mi-height, 36px);height:var(--mi-height, 36px)}.text-field__suffix__menu .mat-menu-item.selected{background:var(--mi-sel-background, var(--main-color));color:var(--mi-sel-color, var(--main-hover))}.text-field__suffix__menu .mat-menu-item.selected:hover{--mi-sel-color: currentColor}.text-field__suffix__menu__wrapper{max-height:var(--tf-menu-height, 250px);overflow-y:auto;display:block}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$4.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe, "hashTranslateAsync": HashTranslateAsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<input\r\n\t*ngIf=\"!maskOptions?.mask\"\r\n\ttype=\"text\"\r\n\tclass=\"text-field__input\"\r\n\t[formControl]=\"internalValue\"\r\n\t[title]=\"field?.label | translate\"\r\n\t[placeholder]=\"renderOptions?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n/>\r\n\r\n<input\r\n\t*ngIf=\"maskOptions?.mask\"\r\n\ttype=\"text\"\r\n\tclass=\"text-field__input\"\r\n\t[formControl]=\"internalValue\"\r\n\t[title]=\"field?.label | translate\"\r\n\t[placeholder]=\"renderOptions?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n\t[mask]=\"maskOptions?.mask\"\r\n\t[dropSpecialCharacters]=\"maskOptions?.dropSpecialCharacters ?? true\"\r\n\t[showMaskTyped]=\"maskOptions?.showMaskTyped ?? true\"\r\n\t[validation]=\"maskOptions?.validation\"\r\n\t[shownMaskExpression]=\"maskOptions?.shownMaskExpression\"\r\n\t[allowNegativeNumbers]=\"maskOptions?.allowNegativeNumbers\"\r\n\t[keepCharacterPositions]=\"maskOptions?.keepCharacterPositions\"\r\n\t[leadZero]=\"maskOptions?.leadZero\"\r\n\t[hiddenInput]=\"maskOptions?.hiddenInput\"\r\n\t[clearIfNotMatch]=\"maskOptions?.clearIfNotMatch\"\r\n\t[prefix]=\"maskOptions?.prefix ?? ''\"\r\n\t[suffix]=\"maskOptions?.suffix ?? ''\"\r\n/>\r\n\r\n<div *ngIf=\"renderOptions?.suffix\" class=\"text-field__suffix\">\r\n\t<mat-icon\r\n\t\t*ngIf=\"tooltip\"\r\n\t\t[matTooltip]=\"tooltip | hashTranslateAsync | async\"\r\n\t\tclass=\"text-field__suffix__item suffix-icon\"\r\n\t>\r\n\t\tinfo\r\n\t</mat-icon>\r\n\r\n\t<span *ngIf=\"renderOptions.suffix?.text\" class=\"text-field__suffix__item text- suffix-text\">\r\n\t\t{{ renderOptions.suffix.text | translate }}\r\n\t</span>\r\n\r\n\t<button *ngIf=\"selectConfig\" class=\"text-field__suffix__item suffix-button\" [matMenuTriggerFor]=\"menu\">\r\n\t\t<mat-icon> edit </mat-icon>\r\n\t</button>\r\n\r\n\t<button *ngIf=\"dialogConfig\" class=\"text-field__suffix__item suffix-button\" (click)=\"openModal()\">\r\n\t\t<mat-icon>help_outline</mat-icon>\r\n\t</button>\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"text-field__suffix__menu\">\r\n\t<span [dir]=\"direction\" class=\"text-field__suffix__menu__wrapper\" *ngIf=\"selectConfig?.items\">\r\n\t\t<button\r\n\t\t\tmat-menu-item\r\n\t\t\t*ngFor=\"let item of selectConfig.items\"\r\n\t\t\t(click)=\"changeOperator(item)\"\r\n\t\t\t[class.selected]=\"item.value === selectValue?.value\"\r\n\t\t>\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".text-field{--text-border-color: var(--tf-border-color, var(--main-hover));display:var(--tf-display, inline-grid);grid-template-columns:var(--tf-columns, 1fr auto);align-items:var(--tf-align-items, center);border:var(--tf-border, 1px solid);border-color:var(--text-border-color);border-radius:var(--tf-radius, 4px);color:var(--tf-background, var(--main-text));background-color:var(--tf-background, transparent);height:var(--tf-height, calc(1.5em + .75rem + 2px));width:var(--tf-width, 100%)}.text-field:focus-within{--text-border-color: var(--tf-focus-border-color, var(--main-color))}.text-field__input{display:block;padding:var(--tf-input-padding, .375rem .75rem);font-size:1rem;font-weight:400;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;border-start-start-radius:var(--tf-radius, 4px);border-end-start-radius:var(--tf-radius, 4px);min-width:0}.text-field__suffix{display:inline-flex;align-items:center;grid-gap:var(--tf-suffix-gap, 0 .2rem);gap:var(--tf-suffix-gap, 0 .2rem);border-inline-start:var(--tf-suffix-start-border, 1px solid var(--text-border-color))}.text-field__suffix__item{padding:var(--tf-item-padding, 0 .1rem);width:auto;height:100%;display:grid;place-items:center}.text-field__suffix__menu .mat-menu-item{line-height:var(--mi-height, 36px);height:var(--mi-height, 36px)}.text-field__suffix__menu .mat-menu-item.selected{background:var(--mi-sel-background, var(--main-color));color:var(--mi-sel-color, var(--main-hover))}.text-field__suffix__menu .mat-menu-item.selected:hover{--mi-sel-color: currentColor}.text-field__suffix__menu__wrapper{max-height:var(--tf-menu-height, 250px);overflow-y:auto;display:block}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$4.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe, "hashTranslateAsync": HashTranslateAsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PredicateTextInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -18382,11 +18490,357 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: NuxeoService }, { type: RolesService }]; } });
 
+/**
+ * Creates a secure context for function evaluation that prevents access to the window object.
+ * @returns {Record<string, any>} A secure context object with safe properties.
+ */
+function createSecureContext() {
+    // Create a secure context with only safe properties
+    return {
+        // Add any safe globals here that should be accessible
+        console: {
+            log: console.log,
+            warn: console.warn,
+            error: console.error
+        },
+        // Add other safe objects/functions as needed
+        Math,
+        Date,
+        Number,
+        String,
+        Boolean,
+        Array,
+        Object,
+        JSON,
+        // Prevent access to window
+        window: undefined,
+        self: undefined,
+        globalThis: undefined
+    };
+}
+/**
+ * A utility class for evaluating expressions, interpolating strings, and working with templates.
+ * This class provides static methods for dynamic evaluation of code, string interpolation,
+ * and template processing with caching capabilities.
+ */
+class Evaluator {
+    /**
+     * Creates a function from a string or returns the function if already provided.
+     * Uses a secure context to prevent access to the window object by default.
+     * @param {string|Function} func - The function or string to convert to a function.
+     * @param {...any} params - The parameters to pass to the function.
+     * @param {EvaluatorOptions} [options={}] - Optional configuration for the evaluation.
+     * @returns {Function} - The resulting function.
+     */
+    static evaluator(func, ...params) {
+        // Extract options if the last parameter is an options object
+        let options = {};
+        if (params.length > 0 &&
+            params[params.length - 1] &&
+            typeof params[params.length - 1] === 'object' &&
+            'securityMode' in params[params.length - 1]) {
+            options = params.pop();
+        }
+        if (typeof func === 'function') {
+            return func;
+        }
+        if (typeof params[0] === 'object') {
+            params = keys(params[0]);
+        }
+        // Check if we should use secure mode (default) or unsafe mode
+        const securityMode = options.securityMode || 'secure';
+        if (securityMode === 'unsafe') {
+            // In unsafe mode, create a function with access to all globals
+            return new Function(...params, func);
+        }
+        const sandbox = createSecureContext();
+        const sandboxKeys = Object.keys(sandbox);
+        const sandboxAssignments = sandboxKeys.map((key) => `const ${key} = sandbox.${key};`).join('');
+        const wrapper = new Function(...params, 'sandbox', `${sandboxAssignments}${func}`);
+        return (...args) => wrapper(...args, sandbox);
+    }
+    /**
+     * Replaces template expressions in a string with values from data.
+     * Supports function calls within templates and fallback values using || syntax.
+     * By default, ensures evaluation happens in a secure context to prevent access to window object.
+     * @param {string} rawTemplate - The template string containing expressions to interpolate.
+     * @param {Record<string, any>} data - The data object containing values to use for interpolation.
+     * @param {EvaluatorOptions} [options={}] - Optional configuration for the interpolation process.
+     * @returns {string} - The interpolated string with all expressions replaced with actual values.
+     */
+    static interpolateString(rawTemplate, data, options = {}) {
+        if (!rawTemplate) {
+            return '';
+        }
+        if (typeof rawTemplate !== 'string') {
+            return rawTemplate.toString();
+        }
+        // Check if we should use secure mode (default) or unsafe mode
+        const securityMode = options.securityMode || 'secure';
+        // Create a secure data object if needed
+        const secureData = securityMode === 'unsafe'
+            ? data
+            : Object.assign(Object.assign(Object.assign({}, createSecureContext()), data), { 
+                // Ensure these remain undefined
+                window: undefined, self: undefined, globalThis: undefined });
+        return rawTemplate.replace(/({{\s*(.*?)\s*}})/g, (match, $1, expression) => {
+            if (expression.indexOf('(') !== -1) {
+                return expression.replace(/([^(]+)\(([^)]+)\s*\);?/, (_, fnName, argsStr) => {
+                    fnName = trim(fnName);
+                    const func = get(secureData, fnName);
+                    if (func) {
+                        if (argsStr) {
+                            const args = argsStr.split(',').map((arg) => {
+                                const trimmed = trim(arg);
+                                if (/^['"]/.test(trimmed))
+                                    return trimmed.slice(1, -1);
+                                return get(secureData, trimmed);
+                            });
+                            return Evaluator.evaluate(func, args, '', false, secureData, options);
+                        }
+                        return Evaluator.evaluate(func, [], '', false, secureData, options);
+                    }
+                    return '';
+                });
+            }
+            else {
+                let dataPath = expression;
+                if (expression.indexOf('?') !== -1) {
+                    dataPath = expression.replace(/\?\./g, '.');
+                }
+                const parts = dataPath.split('||').map((item) => item.trim());
+                let value = '';
+                let path = '';
+                for (let i = 0; i < parts.length; i++) {
+                    path = parts[i];
+                    if (___default.has(secureData, path)) {
+                        value = ___default.get(secureData, path);
+                        break;
+                    }
+                }
+                if (options.data) {
+                    set(options.data, path, value);
+                }
+                return value;
+            }
+        });
+    }
+    /**
+     * Performs an evaluation using the evaluation context of this component.
+     * By default, ensures evaluation happens in a secure context to prevent access to window object.
+     * @param {string|Function|object} func - The function or string to evaluate.
+     * @param {object} args - The arguments to pass to the evaluation.
+     * @param {string} ret - The name of the variable within the evaluation context to return.
+     * @param {boolean} interpolate - Determines if it should replace all {{ }} token references with actual data.
+     * @param {object} context -   - The evaluation context.
+     * @param {EvaluatorOptions } options - The options to pass to the evaluation.
+     * @returns {*} - The result of the evaluation.
+     */
+    static evaluate(func, args = {}, ret = 'show', interpolate = false, context = {}, options = {}) {
+        let returnVal = null;
+        const field = args.field ? args.field : { key: 'unknown' };
+        const fieldKey = field.key;
+        if (typeof func === 'string') {
+            if (ret) {
+                func = `var ${ret};${func};return ${ret}`;
+            }
+            if (interpolate) {
+                func = Evaluator.interpolate(func, args, options);
+            }
+            try {
+                // Pass the security mode option to the evaluator
+                const evaluatorOptions = { securityMode: options.securityMode || 'secure' };
+                func = Evaluator.evaluator(func, args, context, evaluatorOptions);
+                args = Array.isArray(args) ? args : values(args);
+            }
+            catch (err) {
+                console.warn(`An error occured within the custom function for ${fieldKey}`, err);
+                returnVal = null;
+                func = false;
+            }
+        }
+        if (typeof func === 'function') {
+            try {
+                returnVal = Evaluator.execute(func, args, context, options);
+            }
+            catch (err) {
+                returnVal = null;
+                console.warn(`An error occured within custom function for ${fieldKey}`, err);
+            }
+        }
+        else if (func) {
+            console.warn(`Unknown function type for ${fieldKey}`);
+        }
+        return returnVal;
+    }
+    /**
+     * Executes a function with provided arguments and context.
+     * By default, ensures execution happens in a secure context to prevent access to window object.
+     * @param {Function} func - The function to execute.
+     * @param {any[]|Record<string, any>} args - The arguments to pass to the function, either as an array or object.
+     * @param {Record<string, any>} [context={}] - The context (this) to use when executing the function.
+     * @param {EvaluatorOptions} [options={}] - Optional configuration for the execution.
+     * @returns {any} - The result of the function execution.
+     */
+    static execute(func, args, context = {}, options = {}) {
+        // Check if we should use secure mode (default) or unsafe mode
+        const securityMode = options.securityMode || 'secure';
+        if (securityMode === 'unsafe') {
+            // In unsafe mode, execute with the original context
+            return Array.isArray(args) ? func.apply(context, args) : func.call(context, args);
+        }
+        else {
+            // In secure mode, create a secure context by merging the provided context with our secure context
+            const secureContext = Object.assign(Object.assign(Object.assign({}, createSecureContext()), context), { 
+                // Ensure these remain undefined even if they were in the provided context
+                window: undefined, self: undefined, globalThis: undefined });
+            // Execute the function with the secure context
+            return Array.isArray(args) ? func.apply(secureContext, args) : func.call(secureContext, args);
+        }
+    }
+    /**
+     * Creates a template function from a string with caching for performance.
+     * By default, ensures the template function executes in a secure context.
+     * @param {string} template - The template string to compile into a function.
+     * @param {string} [hash] - Optional hash to use as cache key. If not provided, a hash will be generated from the template.
+     * @param {EvaluatorOptions} [options={}] - Optional configuration for the template.
+     * @returns {Function|undefined} - The compiled template function, or undefined if compilation fails.
+     */
+    static template(template, hash, options = {}) {
+        hash = hash || stringHash(template).toString();
+        // If hash contains options object, extract it
+        if (typeof hash === 'object' && 'securityMode' in hash) {
+            options = hash;
+            hash = stringHash(template).toString();
+        }
+        // Check if we have a cached version
+        const cacheKey = hash + (options.securityMode || 'secure');
+        if (Evaluator.cache[cacheKey]) {
+            return Evaluator.cache[cacheKey];
+        }
+        try {
+            template = template.replace(/ctx\./g, '');
+            // Create the template function using lodash
+            const templateFunc = ___default.template(template, Evaluator.templateSettings);
+            // Check if we should use secure mode (default) or unsafe mode
+            const securityMode = options.securityMode || 'secure';
+            if (securityMode === 'unsafe') {
+                // In unsafe mode, return the original template function
+                return (Evaluator.cache[cacheKey] = templateFunc);
+            }
+            else {
+                // In secure mode, wrap the template function to ensure it runs in a secure context
+                const secureTemplateFunc = (data) => {
+                    // Create a secure context for the template
+                    const secureData = Object.assign(Object.assign(Object.assign({}, createSecureContext()), data), { 
+                        // Ensure these remain undefined
+                        window: undefined, self: undefined, globalThis: undefined });
+                    return templateFunc(secureData);
+                };
+                // Cache and return the secure template function
+                return (Evaluator.cache[cacheKey] = secureTemplateFunc);
+            }
+        }
+        catch (err) {
+            console.warn('Error while processing template', err, template);
+            return undefined;
+        }
+    }
+    /**
+     * Interpolates a template with data, handling both function templates and string templates.
+     * By default, ensures interpolation happens in a secure context to prevent access to window object.
+     * @param {string|Function} rawTemplate - The template to interpolate, either as a string or a function.
+     * @param {Record<string, any>} data - The data object to use for interpolation.
+     * @param {EvaluatorOptions} options - Options for the interpolation process.
+     * @returns {string|any} - The result of the interpolation, typically a string but could be any type depending on the template.
+     */
+    static interpolate(rawTemplate, data, options = {}) {
+        if (typeof rawTemplate === 'function') {
+            try {
+                // If the template is a function, execute it with the data
+                // We can't directly secure a provided function, but we can use execute
+                // to run it in a secure context if needed
+                if (options.securityMode !== 'unsafe') {
+                    const secureData = Object.assign(Object.assign(Object.assign({}, createSecureContext()), data), { window: undefined, self: undefined, globalThis: undefined });
+                    return rawTemplate(secureData);
+                }
+                else {
+                    return rawTemplate(data);
+                }
+            }
+            catch (err) {
+                console.warn('Error interpolating template', err, data);
+                return err.message;
+            }
+        }
+        rawTemplate = String(rawTemplate);
+        // Pass the security mode option to the template method
+        const template = Evaluator.template(rawTemplate, undefined, options);
+        if (typeof template === 'function') {
+            try {
+                return template(data);
+            }
+            catch (err) {
+                console.warn('Error interpolating template', err, rawTemplate, data);
+                return err.message;
+            }
+        }
+        return template;
+    }
+}
+/**
+ * Cache for storing compiled template functions to improve performance.
+ * Keys are string hashes of the template, values are the compiled functions.
+ */
+Evaluator.cache = {};
+/**
+ * Settings for template processing, defining regex patterns for different template operations.
+ * - interpolate: Pattern for variable interpolation ({{ variable }})
+ * - evaluate: Pattern for code evaluation ({% code %})
+ * - escape: Pattern for HTML escaping ({{{ variable }}})
+ */
+Evaluator.templateSettings = {
+    interpolate: /{{([\s\S]+?)}}/g,
+    evaluate: /\{%([\s\S]+?)%\}/g,
+    escape: /\{\{\{([\s\S]+?)\}\}\}/g
+};
+
+class CheckConditionPipe {
+    constructor(nuxeoService) {
+        this.nuxeoService = nuxeoService;
+        this.user = nuxeoService.nuxeoClient.user;
+    }
+    transform(condition, aggregations, language) {
+        if (!condition) {
+            return true;
+        }
+        try {
+            return Evaluator.evaluate(condition, ___default.cloneDeep({ aggregations, language, user: this.user }));
+        }
+        catch (error) {
+            console.error({ error });
+            return false;
+        }
+    }
+}
+CheckConditionPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckConditionPipe, deps: [{ token: NuxeoService }], target: i0.ɵɵFactoryTarget.Pipe });
+CheckConditionPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckConditionPipe, name: "checkCondition" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckConditionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'checkCondition'
+                }]
+        }], ctorParameters: function () { return [{ type: NuxeoService }]; } });
+
 class FiltersPanelComponent extends BaseFiltersPanel {
     constructor(_translateService) {
         super();
         this._translateService = _translateService;
-        this.direction$ = this._translateService.onLangChange.pipe(startWith({ lang: this._translateService.currentLang }), map((lang) => (lang.lang === 'ar' ? 'rtl' : 'ltr')));
+        this.currentLang = this._translateService.currentLang;
+        this.direction$ = this._translateService.onLangChange.pipe(startWith({ lang: this._translateService.currentLang }), map((lang) => {
+            this.currentLang = lang.lang;
+            return lang.lang === 'ar' ? 'rtl' : 'ltr';
+        }));
         this._fieldsSub = new BehaviorSubject([]);
         this._activeQuerySub = new BehaviorSubject(null);
         this.filterChanged = new EventEmitter();
@@ -18466,7 +18920,7 @@ class FiltersPanelComponent extends BaseFiltersPanel {
     }
 }
 FiltersPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersPanelComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-FiltersPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FiltersPanelComponent, selector: "app-filters-panel", inputs: { aggregations: "aggregations", fields: "fields", activeQuery: "activeQuery" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"filters-panel\" [dir]=\"direction$ | async\">\r\n\t<div class=\"reset-filter flex reset-container\">\r\n\t\t<button mat-stroked-button class=\"w-full\" (click)=\"resetFilters()\" [disabled]=\"!hasValues\">\r\n\t\t\t{{ 'BUTTONS.clearFilter' | translate }}\r\n\t\t</button>\r\n\t</div>\r\n\t<ng-container *ngFor=\"let field of fields | filterByRoles; trackBy: trackByFieldKey\">\r\n\t\t<ng-container *permission=\"{ name: field.config?.permission }\">\r\n\t\t\t<app-predicate-field\r\n\t\t\t\t*ngIf=\"field.type == fieldTypes.predicate\"\r\n\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t></app-predicate-field>\r\n\t\t\t<app-aggregation-field\r\n\t\t\t\t*ngIf=\"field.type == fieldTypes.aggregation && !!aggregations\"\r\n\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t[aggregation]=\"aggregations[field.config.aggregation]\"\r\n\t\t\t\t[contentTemplate]=\"getContentTemplate(field.config.render.type)\"\r\n\t\t\t></app-aggregation-field>\r\n\t\t\t<app-custom-field\r\n\t\t\t\t*ngIf=\"field.type == fieldTypes.custom\"\r\n\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t></app-custom-field>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>\r\n", styles: [".filters-panel{display:var(--filters-panel-display, flex);flex-direction:var(--filters-panel-direction, column);grid-gap:var(--filters-panel-gap, .5rem);gap:var(--filters-panel-gap, .5rem);flex-wrap:var(--filters-panel-wrap, wrap);max-width:100%;box-sizing:border-box}.aggregation-field{padding-inline:var(--af-padding-inline, var(--ff-padding-inline, .5rem));padding-block:var(--af-padding-block, var(--ff-padding-block, 0));max-width:100%}.reset-container{padding:.5rem;position:sticky;top:-8px;z-index:4;background:var(--reset-filter-panel-bg, #fff)}.reset-container button.mat-button-base{background-color:var(--reset-filter-panel-btn-bg, transparent);border-color:var(--reset-filter-panel-btn-bg, #e2e8f0);color:var(--reset-filter-panel-btn-color, currentColor)}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: PredicateFieldComponent, selector: "app-predicate-field" }, { type: AggregationFieldComponent, selector: "app-aggregation-field", inputs: ["aggregation", "contentTemplate"] }, { type: CustomFieldComponent, selector: "app-custom-field", inputs: ["aggregations"] }], directives: [{ type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "filterByRoles": FiltersByRolesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FiltersPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FiltersPanelComponent, selector: "app-filters-panel", inputs: { aggregations: "aggregations", fields: "fields", activeQuery: "activeQuery" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"filters-panel\" [dir]=\"direction$ | async\">\r\n\t<div class=\"reset-filter flex reset-container\">\r\n\t\t<button mat-stroked-button class=\"w-full\" (click)=\"resetFilters()\" [disabled]=\"!hasValues\">\r\n\t\t\t{{ 'BUTTONS.clearFilter' | translate }}\r\n\t\t</button>\r\n\t</div>\r\n\t<ng-container *ngFor=\"let field of fields | filterByRoles; trackBy: trackByFieldKey\">\r\n\t\t<ng-container *permission=\"{ name: field.config?.permission }\">\r\n\t\t\t<ng-container *ngIf=\"field.config?.condition | checkCondition: aggregations : currentLang \">\r\n\t\t\t\t<app-predicate-field\r\n\t\t\t\t\t*ngIf=\"field.type == fieldTypes.predicate\"\r\n\t\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t></app-predicate-field>\r\n\t\t\t\t<app-aggregation-field\r\n\t\t\t\t\t*ngIf=\"field.type == fieldTypes.aggregation && !!aggregations\"\r\n\t\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t\t[aggregation]=\"aggregations[field.config.aggregation]\"\r\n\t\t\t\t\t[contentTemplate]=\"getContentTemplate(field.config.render.type)\"\r\n\t\t\t\t></app-aggregation-field>\r\n\t\t\t\t<app-custom-field\r\n\t\t\t\t\t*ngIf=\"field.type == fieldTypes.custom\"\r\n\t\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t\t></app-custom-field>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>\r\n", styles: [".filters-panel{display:var(--filters-panel-display, flex);flex-direction:var(--filters-panel-direction, column);grid-gap:var(--filters-panel-gap, .5rem);gap:var(--filters-panel-gap, .5rem);flex-wrap:var(--filters-panel-wrap, wrap);max-width:100%;box-sizing:border-box}.aggregation-field{padding-inline:var(--af-padding-inline, var(--ff-padding-inline, .5rem));padding-block:var(--af-padding-block, var(--ff-padding-block, 0));max-width:100%}.reset-container{padding:.5rem;position:sticky;top:-8px;z-index:4;background:var(--reset-filter-panel-bg, #fff)}.reset-container button.mat-button-base{background-color:var(--reset-filter-panel-btn-bg, transparent);border-color:var(--reset-filter-panel-btn-bg, #e2e8f0);color:var(--reset-filter-panel-btn-color, currentColor)}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: PredicateFieldComponent, selector: "app-predicate-field" }, { type: AggregationFieldComponent, selector: "app-aggregation-field", inputs: ["aggregation", "contentTemplate"] }, { type: CustomFieldComponent, selector: "app-custom-field", inputs: ["aggregations"] }], directives: [{ type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "filterByRoles": FiltersByRolesPipe, "checkCondition": CheckConditionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -18581,12 +19035,13 @@ const PIPES = [
     SanitizerPipe,
     SortListPipe,
     TooltipPipe,
-    FiltersByRolesPipe
+    FiltersByRolesPipe,
+    CheckConditionPipe
 ];
-class FiltersPanelModule {
+class NdfFiltersPanelModule {
 }
-FiltersPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FiltersPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersPanelModule, declarations: [FiltersPanelComponent, PredicateFieldComponent, AggregationFieldComponent, CustomFieldComponent, AggregationAutocompleteComponent,
+NdfFiltersPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfFiltersPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NdfFiltersPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfFiltersPanelModule, declarations: [FiltersPanelComponent, PredicateFieldComponent, AggregationFieldComponent, CustomFieldComponent, AggregationAutocompleteComponent,
         AggregationSelectComponent,
         AggregationCheckboxComponent,
         AggregationSwitchComponent,
@@ -18610,7 +19065,8 @@ FiltersPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         SanitizerPipe,
         SortListPipe,
         TooltipPipe,
-        FiltersByRolesPipe, FilterOptionTextComponent,
+        FiltersByRolesPipe,
+        CheckConditionPipe, FilterOptionTextComponent,
         FilterSearchInputComponent,
         FilterCollapseControlComponent,
         FieldHeaderComponent,
@@ -18653,7 +19109,7 @@ FiltersPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         DropdownLabelTemplateDirective,
         DropdownMultiLabelTemplateDirective,
         DateListTemplateDirective, HtmlDialogComponent] });
-FiltersPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersPanelModule, providers: [DynamicComponentLoaderService, AggregationFieldService], imports: [[
+NdfFiltersPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfFiltersPanelModule, providers: [DynamicComponentLoaderService, AggregationFieldService], imports: [[
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -18678,7 +19134,7 @@ FiltersPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
                 validation: true
             })
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfFiltersPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CONTAINERS$1, COMPONENTS$4, CUSTOM_ELEMENTS, DIRECTIVES$3, PIPES, PARTS, EXPORTED_PARTS],
@@ -18888,157 +19344,6 @@ const PARAMS_KEYS = {
     KEY: 'key'
 };
 
-class NxQlQuery extends NxQL {
-    static preparePayloadItem(value, field) {
-        var _a;
-        const _defaultOperator = field.type == 'aggregation' ? COMPARISON_OPERATOR.in : COMPARISON_OPERATOR.like;
-        const _fieldName = field.config.fieldKey;
-        const _operator = (value === null || value === void 0 ? void 0 : value.operator) || ((_a = field.config) === null || _a === void 0 ? void 0 : _a.operator) || _defaultOperator;
-        return {
-            name: _fieldName,
-            operator: _operator,
-            value: NxQlQuery.prepareValueByOperator(_operator, value)
-        };
-    }
-    static prepareValueByOperator(operator, fieldValue) {
-        const _opr = COMPARISON_OPERATOR;
-        const { value, prefix } = fieldValue;
-        if (operator === _opr.between) {
-            return NxQlQuery._getMinMaxRange(fieldValue, prefix);
-        }
-        const operatorHandlers = {
-            [_opr.equals]: NxQlQuery.equals,
-            [_opr.notEquals]: NxQlQuery.equals,
-            [_opr.lessThan]: NxQlQuery.equals,
-            [_opr.greaterThan]: NxQlQuery.equals,
-            [_opr.in]: NxQlQuery.in,
-            [_opr.notIn]: NxQlQuery.in,
-            [_opr.lessThanOrEqual]: NxQlQuery.equals,
-            [_opr.greaterThanOrEqual]: NxQlQuery.equals,
-            [_opr.like]: NxQlQuery.like,
-            [_opr.iLike]: NxQlQuery.like,
-            [_opr.notLike]: NxQlQuery.like,
-            [_opr.notILike]: NxQlQuery.like,
-            [_opr.startsWith]: NxQlQuery.equals,
-            [_opr.fullText]: NxQlQuery.equals
-        };
-        const _val = Array.isArray(value) ? value.join(',') : value;
-        return operatorHandlers[operator](_val, prefix);
-    }
-    static equals(value, prefix = '') {
-        return `${prefix ? `${prefix} ` : ''}'${value.trim()}'`;
-    }
-    static like(value, prefix = '') {
-        return `${prefix ? `${prefix} ` : ''}'%${value.trim()}%'`;
-    }
-    static in(value, prefix = '') {
-        return `${prefix ? `${prefix} ` : ''}(${value.trim()})`;
-    }
-    static between(value1, value2) {
-        return `${value1} AND ${value2}`;
-    }
-}
-
-class FiltersMapperService {
-    preparePayload(fields, criteria) {
-        return this._preparePayload(fields, criteria);
-    }
-    _preparePayload(fields, criteria) {
-        const params = {};
-        const predicateList = [];
-        const payload = {};
-        for (const field of fields) {
-            const fieldValue = criteria[field.config.fieldKey];
-            const paramKey = field.type == 'aggregation' ? field.config.aggregation : field.config.fieldKey;
-            if (!fieldValue) {
-                continue;
-            }
-            if ((this._sendInPayload(field) || this._sendCustom(field)) && isFieldValueObject(fieldValue)) {
-                const _data = NxQlQuery.preparePayloadItem(fieldValue, field);
-                predicateList.push(_data);
-                continue;
-            }
-            if (this._sendInPayload(field)) {
-                payload[paramKey] = this._stringifyValue(fieldValue);
-            }
-            if (this._sendCustom(field) || this._sendInQueryParams(field)) {
-                params[paramKey] = this._stringifyValue(fieldValue);
-            }
-        }
-        return {
-            params,
-            payload: Object.assign(Object.assign({}, payload), { predicateList })
-        };
-    }
-    _stringifyValue(value) {
-        return Array.isArray(value) ? JSON.stringify(value) : value;
-    }
-    _sendInQueryParams(field) {
-        var _a;
-        return ((_a = field.config) === null || _a === void 0 ? void 0 : _a.sendMode) === FIELD_SEND_MODE.queryParam;
-    }
-    _sendInPayload(field) {
-        var _a;
-        return ((_a = field.config) === null || _a === void 0 ? void 0 : _a.sendMode) === FIELD_SEND_MODE.payload;
-    }
-    _sendCustom(field) {
-        var _a;
-        return ((_a = field.config) === null || _a === void 0 ? void 0 : _a.sendMode) === FIELD_SEND_MODE.custom;
-    }
-}
-FiltersMapperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersMapperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FiltersMapperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersMapperService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersMapperService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class NdfTableService extends BaseService {
-    constructor(injector) {
-        super(injector);
-    }
-    exportTable(request, payload) {
-        return this.request({
-            type: (`${request.method}`.toLowerCase() || 'post'),
-            endpoint: request.url,
-            headers: request === null || request === void 0 ? void 0 : request.headers,
-            queryParams: request === null || request === void 0 ? void 0 : request.params,
-            payload: payload
-        }).pipe(map((res) => `${res === null || res === void 0 ? void 0 : res.Statue}`.toLowerCase() === 'success'));
-    }
-}
-NdfTableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-NdfTableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
-class NdfTableConfigurationService extends HttpBaseService {
-    constructor(injector) {
-        super(injector);
-        this.injector = injector;
-        this.appConfigService = this.injector.get(AppConfigService);
-        this.configurationsUrl = 'assets/configs/configuration.json';
-    }
-    getTableConfiguration(key, path) {
-        return of(this.appConfigService.myConfiguration).pipe(map((config) => {
-            const base = path ? ___default.get(config, path) : config;
-            return cloneDeep(___default.get(base, key));
-        }));
-    }
-}
-NdfTableConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableConfigurationService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-NdfTableConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableConfigurationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableConfigurationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
 class DynamicTableService {
     constructor() {
         this.refreshData = new EventEmitter();
@@ -19680,6 +19985,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class NdfTableService extends BaseService {
+    constructor(injector) {
+        super(injector);
+    }
+    exportTable(request, payload) {
+        return this.request({
+            type: (`${request.method}`.toLowerCase() || 'post'),
+            endpoint: request.url,
+            headers: request === null || request === void 0 ? void 0 : request.headers,
+            queryParams: request === null || request === void 0 ? void 0 : request.params,
+            payload: payload
+        }).pipe(map((res) => `${res === null || res === void 0 ? void 0 : res.Statue}`.toLowerCase() === 'success'));
+    }
+}
+NdfTableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+NdfTableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+class NdfTableConfigurationService extends HttpBaseService {
+    constructor(injector) {
+        super(injector);
+        this.injector = injector;
+        this.appConfigService = this.injector.get(AppConfigService);
+        this.configurationsUrl = 'assets/configs/configuration.json';
+    }
+    getTableConfiguration(key, path) {
+        return of(this.appConfigService.myConfiguration).pipe(map((config) => {
+            const base = path ? ___default.get(config, path) : config;
+            return cloneDeep(___default.get(base, key));
+        }));
+    }
+}
+NdfTableConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableConfigurationService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+NdfTableConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableConfigurationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableConfigurationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
 const PROJECT_BASE_HREF = new InjectionToken('PROJECT_BASE_HREF');
 
 class EditorButtonComponent {
@@ -19725,7 +20074,7 @@ EditorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 				<mat-icon>edit</mat-icon>
 			</button>
 		</ng-container>
-	`, isInline: true, components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
+	`, isInline: true, components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -20252,7 +20601,7 @@ NdfTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TableColumnsTogglerComponent,
         ModeTogglerComponent,
         TextSearchComponent, ActionsTableTemplateDirective, SearchTableTemplateDirective, FilterCustomTemplateDirective, TableExportComponent], imports: [CommonModule,
-        FiltersPanelModule,
+        NdfFiltersPanelModule,
         DynamicTableModule,
         MatMenuModule,
         MatCheckboxModule,
@@ -20276,7 +20625,7 @@ NdfTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TextSearchComponent, ActionsTableTemplateDirective, SearchTableTemplateDirective, FilterCustomTemplateDirective] });
 NdfTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableModule, imports: [[
             CommonModule,
-            FiltersPanelModule,
+            NdfFiltersPanelModule,
             DynamicTableModule,
             MatMenuModule,
             MatCheckboxModule,
@@ -20301,7 +20650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     declarations: [COMPONENTS$3, DIRECTIVES$2, TableExportComponent],
                     imports: [
                         CommonModule,
-                        FiltersPanelModule,
+                        NdfFiltersPanelModule,
                         DynamicTableModule,
                         MatMenuModule,
                         MatCheckboxModule,
@@ -21159,7 +21508,7 @@ class CorrespondenceTagsComponent {
     }
 }
 CorrespondenceTagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceTagsComponent, deps: [{ token: TagsApiService }, { token: NuxeoService }, { token: EvaluatorsService }], target: i0.ɵɵFactoryTarget.Component });
-CorrespondenceTagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: { alwaysShowRemoveBtn: "alwaysShowRemoveBtn", correspondence: "correspondence", customClass: "customClass", addCustomApiName: "addCustomApiName", deleteCustomApiName: "deleteCustomApiName", useParams: "useParams", accordionMode: "accordionMode", systemTags: "systemTags", accordionOpen: "accordionOpen", title: "title", multiple: "multiple" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"{{customClass}}\">\r\n  <div class=\"tags-header\" [ngClass]=\"{'border-b': !open}\">\r\n    <div class=\"tag-header-title\">{{ title | translate }}</div>\r\n    <div class=\"flex gap-x-2\">\r\n      <ng-container *ngIf=\"!systemTags\">\r\n        <div\r\n      \r\n        class=\"allowEdit-tag-btn\"\r\n        *permission=\"{ name: 'addTag', entity: correspondence, user: nuxeoService.nuxeoClient.user }\"\r\n        (click)=\"removable = !removable\"\r\n        >\r\n          <span class=\"bi bi-plus-lg detailed-menu\" [matTooltip]=\"'Tags.toolTip' | translate\" *ngIf=\"!removable\"></span>\r\n          <span class=\"tags-close-icon bi bi-x detailed-menu\" [matTooltip]=\"'Tags.Close' | translate\" *ngIf=\"removable\"></span>\r\n        </div>\r\n      </ng-container>\r\n      <button (click)=\"toggleAccrdion()\" *ngIf=\"accordionMode\">\r\n        <mat-icon svgIcon=\"mat_solid:keyboard_arrow_up\" *ngIf=\"open\"></mat-icon>\r\n        <mat-icon svgIcon=\"mat_solid:keyboard_arrow_down\" *ngIf=\"!open\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tags-wrapper\" [@collapse]=\"!open\">\r\n    <ng-container *ngIf=\"removable && !systemTags\">\r\n      <div class=\"add-tag-container\">\r\n        <div class=\"tag-form-container\">\r\n          <form [formGroup]=\"tagsFrom\">\r\n            <cts-dynamic-form-select-tag\r\n             formControlName=\"tag\"\r\n             [multiple]=\"multiple\">\r\n            </cts-dynamic-form-select-tag>\r\n          </form>\r\n        </div>\r\n        <div class=\"add-tag-btn\">\r\n          <cts-button\r\n            [disabled]=\"this.tagsFrom.invalid\"\r\n            [loading]=\"loading\"\r\n            (onClick)=\"addTag()\"\r\n            class=\"detailed-menu\"\r\n            >{{ \"BUTTONS.ADD\" | translate }}</cts-button\r\n          >\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"tagsList.length > 0; else noEntry\">\r\n      <div class=\"tags-list-container row\">\r\n        <mat-chip-list *ngFor=\"let tag of tagsList\">\r\n          <mat-chip [removable]=\"removable || (canRemoveTag && alwaysShowRemoveBtn)\" (removed)=\"deleteTag(tag)\"\r\n            >{{ tag }} \r\n            <mat-icon matChipRemove class=\"cancelBtn\" *ngIf=\"(removable && !systemTags) || (canRemoveTag && alwaysShowRemoveBtn)\">cancel</mat-icon>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n</div>\r\n\r\n<ng-template #noEntry>\r\n  <cts-no-data [message]=\"'Tags.noEntry'\" [border]=\"false\"></cts-no-data>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.tags-header{display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:14px}.tags-header .allowEdit-tag-btn{cursor:pointer}.tags-header .allowEdit-tag-btn span{color:#1a96c6;font-size:18px}.tags-header .allowEdit-tag-btn .tags-close-icon{display:flex;font-size:30px}.tags-wrapper{padding:5px 16px;border:1px solid #d9dce2;display:flex;flex-direction:column;grid-row-gap:8px;row-gap:8px}.tags-wrapper .add-tag-container{display:flex;justify-content:space-between;grid-column-gap:6px;column-gap:6px}.tags-wrapper .add-tag-container .tag-form-container{width:80%}.tags-wrapper .add-tag-container .add-tag-btn{width:20%}.tags-wrapper .tags-list-container{display:flex;grid-column-gap:4px;column-gap:4px;grid-row-gap:8px;row-gap:8px;margin:0}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormSelectTagComponent, selector: "cts-dynamic-form-select-tag", inputs: ["label", "multiple", "selectedTagsCustomTemplate"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }, { type: i7.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border", "img"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i7.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "translate": i1.TranslatePipe }, animations: [
+CorrespondenceTagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: { alwaysShowRemoveBtn: "alwaysShowRemoveBtn", correspondence: "correspondence", customClass: "customClass", addCustomApiName: "addCustomApiName", deleteCustomApiName: "deleteCustomApiName", useParams: "useParams", accordionMode: "accordionMode", systemTags: "systemTags", accordionOpen: "accordionOpen", title: "title", multiple: "multiple" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"{{customClass}}\">\r\n  <div class=\"tags-header\" [ngClass]=\"{'border-b': !open}\">\r\n    <div class=\"tag-header-title\">{{ title | translate }}</div>\r\n    <div class=\"flex gap-x-2\">\r\n      <ng-container *ngIf=\"!systemTags\">\r\n        <div\r\n      \r\n        class=\"allowEdit-tag-btn\"\r\n        *permission=\"{ name: 'addTag', entity: correspondence, user: nuxeoService.nuxeoClient.user }\"\r\n        (click)=\"removable = !removable\"\r\n        >\r\n          <span class=\"bi bi-plus-lg detailed-menu\" [matTooltip]=\"'Tags.toolTip' | translate\" *ngIf=\"!removable\"></span>\r\n          <span class=\"tags-close-icon bi bi-x detailed-menu\" [matTooltip]=\"'Tags.Close' | translate\" *ngIf=\"removable\"></span>\r\n        </div>\r\n      </ng-container>\r\n      <button (click)=\"toggleAccrdion()\" *ngIf=\"accordionMode\">\r\n        <mat-icon svgIcon=\"mat_solid:keyboard_arrow_up\" *ngIf=\"open\"></mat-icon>\r\n        <mat-icon svgIcon=\"mat_solid:keyboard_arrow_down\" *ngIf=\"!open\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"tags-wrapper\" [@collapse]=\"!open\">\r\n    <ng-container *ngIf=\"removable && !systemTags\">\r\n      <div class=\"add-tag-container\">\r\n        <div class=\"tag-form-container\">\r\n          <form [formGroup]=\"tagsFrom\">\r\n            <cts-dynamic-form-select-tag\r\n             formControlName=\"tag\"\r\n             [multiple]=\"multiple\">\r\n            </cts-dynamic-form-select-tag>\r\n          </form>\r\n        </div>\r\n        <div class=\"add-tag-btn\">\r\n          <cts-button\r\n            [disabled]=\"this.tagsFrom.invalid\"\r\n            [loading]=\"loading\"\r\n            (onClick)=\"addTag()\"\r\n            class=\"detailed-menu\"\r\n            >{{ \"BUTTONS.ADD\" | translate }}</cts-button\r\n          >\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"tagsList.length > 0; else noEntry\">\r\n      <div class=\"tags-list-container row\">\r\n        <mat-chip-list *ngFor=\"let tag of tagsList\">\r\n          <mat-chip [removable]=\"removable || (canRemoveTag && alwaysShowRemoveBtn)\" (removed)=\"deleteTag(tag)\"\r\n            >{{ tag }} \r\n            <mat-icon matChipRemove class=\"cancelBtn\" *ngIf=\"(removable && !systemTags) || (canRemoveTag && alwaysShowRemoveBtn)\">cancel</mat-icon>\r\n          </mat-chip>\r\n        </mat-chip-list>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n</div>\r\n\r\n<ng-template #noEntry>\r\n  <cts-no-data [message]=\"'Tags.noEntry'\" [border]=\"false\"></cts-no-data>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.tags-header{display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:14px}.tags-header .allowEdit-tag-btn{cursor:pointer}.tags-header .allowEdit-tag-btn span{color:#1a96c6;font-size:18px}.tags-header .allowEdit-tag-btn .tags-close-icon{display:flex;font-size:30px}.tags-wrapper{padding:5px 16px;border:1px solid #d9dce2;display:flex;flex-direction:column;grid-row-gap:8px;row-gap:8px}.tags-wrapper .add-tag-container{display:flex;justify-content:space-between;grid-column-gap:6px;column-gap:6px}.tags-wrapper .add-tag-container .tag-form-container{width:80%}.tags-wrapper .add-tag-container .add-tag-btn{width:20%}.tags-wrapper .tags-list-container{display:flex;grid-column-gap:4px;column-gap:4px;grid-row-gap:8px;row-gap:8px;margin:0}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormSelectTagComponent, selector: "cts-dynamic-form-select-tag", inputs: ["label", "multiple", "selectedTagsCustomTemplate"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }, { type: i7$1.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border", "img"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i7$1.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "translate": i1.TranslatePipe }, animations: [
         trigger('collapse', [
             state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
             state('true', style({ height: '0', visibility: 'hidden' })),
@@ -26113,7 +26462,7 @@ class ClipboardComponent {
     }
 }
 ClipboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClipboardComponent, deps: [{ token: FileManagerService }, { token: UserService }, { token: CustomToastrService }, { token: UserPreferencesService }], target: i0.ɵɵFactoryTarget.Component });
-ClipboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardItems: "clipboardItems", myCurrecntFolderData: "myCurrecntFolderData", preventedGroups: "preventedGroups", directory: "directory" }, outputs: { onClipboardClose: "onClipboardClose", onRefreshFolderTree: "onRefreshFolderTree" }, ngImport: i0, template: "<div class=\"clipboard-side-section relative\">\r\n\r\n    <div class=\"p-3 h-full\">\r\n        <div class=\"clipboard-header flex justify-between items-center border-b-2\">\r\n            <span class=\"flex text-gray-500 font-bold items-center\">\r\n                <span class=\"text-4xl bi bi-clipboard\"></span>\r\n                <span class=\"mx-2 text-xl\">{{'clipboard' | translate}}</span>\r\n            </span>\r\n            <mat-icon class=\"close-icon text-gray-500 cursor-pointer\" (click)=\"closeClipboard()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <!-- <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"clipboardLoading\">\r\n            {{ \"loading\" | translate }}\r\n        </div> -->\r\n        <div class=\"w-full h-px bg-gray-200 mb-3\" *ngIf=\"clipboardLoading\">\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n        <div class=\"clipboard-content flex flex-col justify-between items-between\">\r\n            <div class=\"h-full flex justify-center items-center text-gray-500\"\r\n                *ngIf=\"clipboardDocments.length === 0\">{{'no_clipboard_items' | translate}}</div>\r\n\r\n            <div class=\"px-2 h-5/6 overflow-y-auto\" *ngIf=\"clipboardDocments.length > 0\">\r\n                <div class=\"border-b-2\" *ngFor=\"let document of clipboardDocments\">\r\n                    <div class=\"py-1 w-82 flex  items-center justify-between\">\r\n                        <div class=\"flex items-center w-5/6\">\r\n                            <mat-checkbox [(ngModel)]=\"document.isSelected\" (change)=\"checking()\"> </mat-checkbox>\r\n                            <div class=\"flex w-full\">\r\n                                <!-- <title-with-icon class=\"w-1/6 -my-1.5\" [context]=\"document\"\r\n                                    [showTitle]=\"false\"></title-with-icon> -->\r\n                            <app-display-suitable-icon class=\"mx-1\" [data]=\"document\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                                <!--  -->\r\n                                <div *ngIf=\"document.isFile === 'File'\"\r\n                                    class=\"justify-center flex flex-col flex-1 flex-grow-0 w-5/6\">\r\n                                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                                        [title]=\"document.properties?.['file:content']?.['name']\"\r\n                                        [alt]=\"document.properties?.['file:content']?.['name']\">\r\n                                        {{document['title']}}\r\n                                    </div>\r\n                                    <div class=\"text-gray-500 text-sm text-nowrap\">\r\n                                        {{((document.properties?.['file:content']?.['length']) / (1024 *\r\n                                        1024)).toFixed(2) }}\r\n                                        MB\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"\r\n                                     d-flex\r\n                                     items-center\r\n                                     text-base text-gray-500\r\n                                     font-bold\r\n                                 \" *ngIf=\"document.isFile === 'Folder'\">\r\n                                    {{ document?.title }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <span [matTooltip]=\"'BUTTONS.REMOVE_CLIPBOARD' | translate\"\r\n                            class=\"cursor-pointer w-5 h-5 rounded-full border-2 flex justify-center items-center border-gray-500 \"\r\n                            (click)=\"deletefromClipboard(document)\">\r\n                            <span class=\"text-gray-500 bi bi-x text-lg flex items-center\"></span>\r\n                        </span>\r\n                    </div>\r\n                    <div class=\"text-md text-gray-500 text-center my-2\">\r\n                        <span *ngIf=\"document.canCopyToTarget && !document.canMoveToTarget\">{{'can_copy_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"!document.canCopyToTarget && document.canMoveToTarget\">{{'can_move_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"document.canCopyToTarget && document.canMoveToTarget\">{{'can_copy_and_move' |\r\n                            translate}}</span>\r\n                        <span\r\n                            *ngIf=\"!document.canCopyToTarget && !document.canMoveToTarget\">{{'can_not_copy_and_move'\r\n                            | translate}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"h-1/6 flex w-full justify-center items-center\">\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableCopy\"\r\n                    (click)=\"copyFromInsideClipboard()\">{{'BUTTONS.COPY' | translate}}</button>\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableMove\"\r\n                    (click)=\"moveFromInsideClipboard()\">{{'BUTTONS.MOVE' | translate}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"bg-transparent absolute top-0 bottom-0 left-0 right-0 \" *ngIf=\"clipboardLoading\">\r\n\r\n    </div>\r\n</div>", styles: [".clipboard-side-section{width:0px;overflow-x:hidden;height:91vh;background-color:#fff;overflow:hidden;border:1px solid lightgray;z-index:999;transition:.1s ease-in-out;border-bottom:none}.clipboard-side-section .clipboard-header{height:60px}.clipboard-side-section .clipboard-content{height:calc(100% - 60px)}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }], directives: [{ type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+ClipboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardItems: "clipboardItems", myCurrecntFolderData: "myCurrecntFolderData", preventedGroups: "preventedGroups", directory: "directory" }, outputs: { onClipboardClose: "onClipboardClose", onRefreshFolderTree: "onRefreshFolderTree" }, ngImport: i0, template: "<div class=\"clipboard-side-section relative\">\r\n\r\n    <div class=\"p-3 h-full\">\r\n        <div class=\"clipboard-header flex justify-between items-center border-b-2\">\r\n            <span class=\"flex text-gray-500 font-bold items-center\">\r\n                <span class=\"text-4xl bi bi-clipboard\"></span>\r\n                <span class=\"mx-2 text-xl\">{{'clipboard' | translate}}</span>\r\n            </span>\r\n            <mat-icon class=\"close-icon text-gray-500 cursor-pointer\" (click)=\"closeClipboard()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <!-- <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"clipboardLoading\">\r\n            {{ \"loading\" | translate }}\r\n        </div> -->\r\n        <div class=\"w-full h-px bg-gray-200 mb-3\" *ngIf=\"clipboardLoading\">\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n        <div class=\"clipboard-content flex flex-col justify-between items-between\">\r\n            <div class=\"h-full flex justify-center items-center text-gray-500\"\r\n                *ngIf=\"clipboardDocments.length === 0\">{{'no_clipboard_items' | translate}}</div>\r\n\r\n            <div class=\"px-2 h-5/6 overflow-y-auto\" *ngIf=\"clipboardDocments.length > 0\">\r\n                <div class=\"border-b-2\" *ngFor=\"let document of clipboardDocments\">\r\n                    <div class=\"py-1 w-82 flex  items-center justify-between\">\r\n                        <div class=\"flex items-center w-5/6\">\r\n                            <mat-checkbox [(ngModel)]=\"document.isSelected\" (change)=\"checking()\"> </mat-checkbox>\r\n                            <div class=\"flex w-full\">\r\n                                <!-- <title-with-icon class=\"w-1/6 -my-1.5\" [context]=\"document\"\r\n                                    [showTitle]=\"false\"></title-with-icon> -->\r\n                            <app-display-suitable-icon class=\"mx-1\" [data]=\"document\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                                <!--  -->\r\n                                <div *ngIf=\"document.isFile === 'File'\"\r\n                                    class=\"justify-center flex flex-col flex-1 flex-grow-0 w-5/6\">\r\n                                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                                        [title]=\"document.properties?.['file:content']?.['name']\"\r\n                                        [alt]=\"document.properties?.['file:content']?.['name']\">\r\n                                        {{document['title']}}\r\n                                    </div>\r\n                                    <div class=\"text-gray-500 text-sm text-nowrap\">\r\n                                        {{((document.properties?.['file:content']?.['length']) / (1024 *\r\n                                        1024)).toFixed(2) }}\r\n                                        MB\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"\r\n                                     d-flex\r\n                                     items-center\r\n                                     text-base text-gray-500\r\n                                     font-bold\r\n                                 \" *ngIf=\"document.isFile === 'Folder'\">\r\n                                    {{ document?.title }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <span [matTooltip]=\"'BUTTONS.REMOVE_CLIPBOARD' | translate\"\r\n                            class=\"cursor-pointer w-5 h-5 rounded-full border-2 flex justify-center items-center border-gray-500 \"\r\n                            (click)=\"deletefromClipboard(document)\">\r\n                            <span class=\"text-gray-500 bi bi-x text-lg flex items-center\"></span>\r\n                        </span>\r\n                    </div>\r\n                    <div class=\"text-md text-gray-500 text-center my-2\">\r\n                        <span *ngIf=\"document.canCopyToTarget && !document.canMoveToTarget\">{{'can_copy_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"!document.canCopyToTarget && document.canMoveToTarget\">{{'can_move_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"document.canCopyToTarget && document.canMoveToTarget\">{{'can_copy_and_move' |\r\n                            translate}}</span>\r\n                        <span\r\n                            *ngIf=\"!document.canCopyToTarget && !document.canMoveToTarget\">{{'can_not_copy_and_move'\r\n                            | translate}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"h-1/6 flex w-full justify-center items-center\">\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableCopy\"\r\n                    (click)=\"copyFromInsideClipboard()\">{{'BUTTONS.COPY' | translate}}</button>\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableMove\"\r\n                    (click)=\"moveFromInsideClipboard()\">{{'BUTTONS.MOVE' | translate}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"bg-transparent absolute top-0 bottom-0 left-0 right-0 \" *ngIf=\"clipboardLoading\">\r\n\r\n    </div>\r\n</div>", styles: [".clipboard-side-section{width:0px;overflow-x:hidden;height:91vh;background-color:#fff;overflow:hidden;border:1px solid lightgray;z-index:999;transition:.1s ease-in-out;border-bottom:none}.clipboard-side-section .clipboard-header{height:60px}.clipboard-side-section .clipboard-content{height:calc(100% - 60px)}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }], directives: [{ type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClipboardComponent, decorators: [{
             type: Component,
             args: [{
@@ -27456,7 +27805,7 @@ class AttachmentItemComponent {
     }
 }
 AttachmentItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AttachmentItemComponent, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AttachmentItemComponent, selector: "app-attachment-item", inputs: { item: "item", type: "type", showRemoveButton: "showRemoveButton", source: "source", personImageLink: "personImageLink" }, outputs: { onRemovingItem: "onRemovingItem" }, ngImport: i0, template: "<ng-container *ngIf=\"source != 'faceRecognition'\">\r\n    <div SetRtl class=\"p-2 w-72 h-15 relative border-2 flex items-center text-lg cursor-pointer hover:bg-primary-100\" \r\n    [ngClass]=\"{'border-gray-200': item.progress === undefined , \r\n    'border-primary-300': (item.progress === 'done' && item['generalValidationValid'] !== false) , \r\n    'border-red-500': (item.progress === 'error' || item['generalValidationValid'] === false) }\">\r\n        <mat-icon class=\"cursor-pointer  top-1  absolute text-gray-900 text-xl\" \r\n        [ngClass]=\"{'left-1' : isArabic , 'right-1' : !isArabic}\" (click)=\"removeItem()\" \r\n        *ngIf=\"showRemoveButton\">close</mat-icon>\r\n        <span class=\"my-icon-wrap\">\r\n            <app-display-suitable-icon [data]=\"item\" [dataType]=\"'file'\"></app-display-suitable-icon>\r\n        </span>\r\n        <div class=\"file-title mx-2 whitespace-nowrap overflow-hidden overflow-ellipsis text-lg\" matTooltip=\"{{item.batch.title ? item.batch.title : item.title}}\" *ngIf=\"type === 'batch'\">{{item.batch.title ? item.batch.title : item.title}}</div>\r\n        <div class=\"file-title mx-2 whitespace-nowrap overflow-hidden overflow-ellipsis text-lg\" matTooltip=\"{{item.name}}\" *ngIf=\"type === 'file'\">{{item.name}}</div>\r\n        <div class=\"viewer-loader absolute bottom-0 w-11/12\">\r\n            <mat-progress-bar *ngIf=\"item.progress === 'inProgress'\" mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"source == 'faceRecognition'\">\r\n    <div class=\"w-52 h-52 relative border flex flex-col items-center cursor-pointer hover:bg-primary-100\" \r\n    [ngClass]=\"{'border-gray-200': item.progress === undefined, 'border-primary-300': item.progress === 'done', 'border-red-500': item.progress === 'error'}\">\r\n        \r\n        <div class=\"flex items-center justify-center opacity-70 cursor-pointer bg-accent-100 rounded-full top-1  absolute text-gray-900 text-xl\" \r\n        [ngClass]=\"{'left-1' : isArabic , 'right-1' : !isArabic}\" (click)=\"removeItem()\">\r\n            <mat-icon class=\"icon-size-5\">close</mat-icon>\r\n        </div>\r\n        <span class=\"h-3/4 w-full\">\r\n            <img [src]=\"personImageLink || './assets/images/Photos/loadingImg.png'\" class=\"w-full h-full\" alt=\"personPhoto\">\r\n        </span>\r\n        <div class=\"w-full h-1/4 overflow-hidden text-lg\" [ngClass]=\"{'shortTitle': item.name.length < 25,'longTitle': item.name.length > 25}\">{{item.name}}</div>\r\n        <div class=\"viewer-loader absolute bottom-0 w-full\">\r\n            <mat-progress-bar *ngIf=\"item.progress === 'inProgress'\" mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [".my-icon-wrap{width:40px;height:40px}.file-title{width:calc(100% - 60px)}.shortTitle{display:flex;align-items:center;justify-content:center;text-overflow:ellipsis}.longTitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }, { type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+AttachmentItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AttachmentItemComponent, selector: "app-attachment-item", inputs: { item: "item", type: "type", showRemoveButton: "showRemoveButton", source: "source", personImageLink: "personImageLink" }, outputs: { onRemovingItem: "onRemovingItem" }, ngImport: i0, template: "<ng-container *ngIf=\"source != 'faceRecognition'\">\r\n    <div SetRtl class=\"p-2 w-72 h-15 relative border-2 flex items-center text-lg cursor-pointer hover:bg-primary-100\" \r\n    [ngClass]=\"{'border-gray-200': item.progress === undefined , \r\n    'border-primary-300': (item.progress === 'done' && item['generalValidationValid'] !== false) , \r\n    'border-red-500': (item.progress === 'error' || item['generalValidationValid'] === false) }\">\r\n        <mat-icon class=\"cursor-pointer  top-1  absolute text-gray-900 text-xl\" \r\n        [ngClass]=\"{'left-1' : isArabic , 'right-1' : !isArabic}\" (click)=\"removeItem()\" \r\n        *ngIf=\"showRemoveButton\">close</mat-icon>\r\n        <span class=\"my-icon-wrap\">\r\n            <app-display-suitable-icon [data]=\"item\" [dataType]=\"'file'\"></app-display-suitable-icon>\r\n        </span>\r\n        <div class=\"file-title mx-2 whitespace-nowrap overflow-hidden overflow-ellipsis text-lg\" matTooltip=\"{{item.batch.title ? item.batch.title : item.title}}\" *ngIf=\"type === 'batch'\">{{item.batch.title ? item.batch.title : item.title}}</div>\r\n        <div class=\"file-title mx-2 whitespace-nowrap overflow-hidden overflow-ellipsis text-lg\" matTooltip=\"{{item.name}}\" *ngIf=\"type === 'file'\">{{item.name}}</div>\r\n        <div class=\"viewer-loader absolute bottom-0 w-11/12\">\r\n            <mat-progress-bar *ngIf=\"item.progress === 'inProgress'\" mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"source == 'faceRecognition'\">\r\n    <div class=\"w-52 h-52 relative border flex flex-col items-center cursor-pointer hover:bg-primary-100\" \r\n    [ngClass]=\"{'border-gray-200': item.progress === undefined, 'border-primary-300': item.progress === 'done', 'border-red-500': item.progress === 'error'}\">\r\n        \r\n        <div class=\"flex items-center justify-center opacity-70 cursor-pointer bg-accent-100 rounded-full top-1  absolute text-gray-900 text-xl\" \r\n        [ngClass]=\"{'left-1' : isArabic , 'right-1' : !isArabic}\" (click)=\"removeItem()\">\r\n            <mat-icon class=\"icon-size-5\">close</mat-icon>\r\n        </div>\r\n        <span class=\"h-3/4 w-full\">\r\n            <img [src]=\"personImageLink || './assets/images/Photos/loadingImg.png'\" class=\"w-full h-full\" alt=\"personPhoto\">\r\n        </span>\r\n        <div class=\"w-full h-1/4 overflow-hidden text-lg\" [ngClass]=\"{'shortTitle': item.name.length < 25,'longTitle': item.name.length > 25}\">{{item.name}}</div>\r\n        <div class=\"viewer-loader absolute bottom-0 w-full\">\r\n            <mat-progress-bar *ngIf=\"item.progress === 'inProgress'\" mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n    </div>\r\n</ng-container>", styles: [".my-icon-wrap{width:40px;height:40px}.file-title{width:calc(100% - 60px)}.shortTitle{display:flex;align-items:center;justify-content:center;text-overflow:ellipsis}.longTitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }, { type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AttachmentItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -29853,7 +30202,7 @@ class ShareDialogComponent extends BaseDialogComponent {
     }
 }
 ShareDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ShareDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$3.MatDialogRef }, { token: i1$3.MatDialog }, { token: i2$4.FormBuilder }, { token: SharedDocsService }, { token: CustomToastrService }, { token: NuxeoService }, { token: UserPreferencesService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ShareDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ShareDialogComponent, selector: "app-share-dialog", usesInheritance: true, ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.SHARE' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<form [formGroup]=\"shareForm\" class=\"h-full p-5 overflow-auto\" SetRtl>\r\n\t\t\t<div class=\"flex flex-col justify-between h-full\">\r\n\t\t\t\t<!--Form Section-->\r\n\t\t\t\t<div class=\"add-permsion-wrapper\">\r\n\t\t\t\t\t<span class=\"text-gray-900 text-lg\">\r\n\t\t\t\t\t\t{{ 'share.shareDialogTitle' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<div class=\"mt-5 selectorsWrapper\">\r\n\t\t\t\t\t\t<app-select-users-by-departments\r\n\t\t\t\t\t\t\tformControlName=\"depAnditsUsers\"\r\n\t\t\t\t\t\t\t[allowMultipleUsers]=\"true\"\r\n\t\t\t\t\t\t\t[userLabel]=\"'share.users' | translate\"\r\n\t\t\t\t\t\t\t[depLabel]=\"'share.Dep' | translate\"\r\n\t\t\t\t\t\t\t[display]=\"'column'\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t</app-select-users-by-departments>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"forbiddenUsers.length\" class=\"flex\">\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let p of forbiddenUsers; let i; as: index\">\r\n\t\t\t\t\t\t\t<span class=\"text-red-500 text-base\"> {{ p }}&nbsp; </span>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t<p *ngIf=\"forbiddenUsers.length == 1\">\r\n\t\t\t\t\t\t\t\t{{ 'share.single_forbidden' | translate }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t<p *ngIf=\"forbiddenUsers.length > 1\">\r\n\t\t\t\t\t\t\t\t{{ 'share.multi_forbidden' | translate }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"sameCurrentUser\">\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t{{ 'share.shareWithLoggedInUser' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"isSharedBefore.length\" class=\"flex\">\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t{{ 'share.share_exists' | translate }}\r\n\t\t\t\t\t\t\t<ng-container *ngFor=\"let p of isSharedBefore\">\r\n\t\t\t\t\t\t\t\t{{ p }}\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t{{ 'share.before' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"mt-4 rightsSelector\">\r\n\t\t\t\t\t\t<label class=\"text-base font-bold mb-0\">\r\n\t\t\t\t\t\t\t{{ 'share.Rights' | translate }}\r\n\t\t\t\t\t\t\t<span class=\"text-danger\">*</span>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<ng-select\r\n\t\t\t\t\t\t\t[items]=\"rights\"\r\n\t\t\t\t\t\t\tbindLabel=\"label\"\r\n\t\t\t\t\t\t\tbindValue=\"value\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'permission.rightsPlaceholder' | translate\"\r\n\t\t\t\t\t\t\tformControlName=\"rights\"\r\n\t\t\t\t\t\t\t(change)=\"setRight($event)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t</ng-select>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"sharedList.length\" class=\"mt-4\">\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<label class=\"text-base font-bold mb-0\">\r\n\t\t\t\t\t\t\t\t{{ 'share.fileUrl' | translate }}\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t\t<div class=\"flex relative\">\r\n\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t#fileUrl\r\n\t\t\t\t\t\t\t\t\t[value]=\"shareableUrl\"\r\n\t\t\t\t\t\t\t\t\tdisabled\r\n\t\t\t\t\t\t\t\t\tclass=\"appearance-none block w-full bg-accent-100 text-gray-700 border border-gray-200 rounded py-2.5 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"\r\n\t\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\tclass=\"absolute pt-2.5 bg-accent-100\"\r\n\t\t\t\t\t\t\t\t\t[matTooltip]=\"'BUTTONS.COPY' | translate\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'right-2' : 'left-2'\"\r\n\t\t\t\t\t\t\t\t\t[cdkCopyToClipboard]=\"fileUrl.value\"\r\n\t\t\t\t\t\t\t\t\t(click)=\"copy()\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t\t\t\t\tsvgIcon=\"mat_solid:content_copy\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"icon-size-6\"\r\n\t\t\t\t\t\t\t\t\t></mat-icon>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"copied\"\r\n\t\t\t\t\t\t\t\t\tclass=\"flex absolute justify-around w-24 -mt-10 border border-red-700 h-7 rounded bg-gray-200\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'right-0' : 'left-0'\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclass=\"w-3 h-3 justify-center bg-gray-200 transform rotate-45 border mt-5 borders-color\"\r\n\t\t\t\t\t\t\t\t\t></div>\r\n\t\t\t\t\t\t\t\t\t<span class=\"absolute font-extralight\">{{\r\n\t\t\t\t\t\t\t\t\t\t'share.copied' | translate\r\n\t\t\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!--Shares Section-->\r\n\t\t\t\t<div *ngIf=\"sharedList.length\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"flex flex-row justify-between h-7 border-b-2 border-accent-100 mt-2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span class=\"text-base font-bold\">\r\n\t\t\t\t\t\t\t{{ 'share.shares' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'canRemoveShare',\r\n\t\t\t\t\t\t\t\tentity: selectedItem.entity\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'share.Rm_All_shares' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"openDialog('Rem_ALL_shares')\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t\t\t[svgIcon]=\"'heroicons_outline:trash'\"\r\n\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'mr-2' : 'ml-2'\"\r\n\t\t\t\t\t\t\t></mat-icon>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"h-52 overflow-y-auto\">\r\n\t\t\t\t\t\t<div class=\"flex flex-row justify-between mt-2.5\">\r\n\t\t\t\t\t\t\t<span class=\"w-1/2 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.shareWith' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span class=\"w-1/4 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.share_date' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span class=\"w-1/4 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.permission' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span>&nbsp;</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let d of sharedList\">\r\n\t\t\t\t\t\t\t<div class=\"flex flex-row justify-between mt-2.5\">\r\n\t\t\t\t\t\t\t\t<div class=\"flex flex-row w-1/2\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex-0 w-8 h-8 rounded-full overflow-hidden\">\r\n\t\t\t\t\t\t\t\t\t\t<cts-avatar\r\n\t\t\t\t\t\t\t\t\t\t\t[user]=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\tproperties: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfirstName: d.user.properties?.firstName,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tlastName: d.user.properties?.lastName\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t</cts-avatar>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex flex-col -mt-2 px-2 break-all\">\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ d.user.fullName }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ d.user.properties.email }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"w-1/4 mt-1.5 break-all px-2.5\">\r\n\t\t\t\t\t\t\t\t\t<span>{{\r\n\t\t\t\t\t\t\t\t\t\td.sharedDate\r\n\t\t\t\t\t\t\t\t\t\t\t| localizedDate\r\n\t\t\t\t\t\t\t\t\t\t\t\t: 'dd MMMM yyyy'\r\n\t\t\t\t\t\t\t\t\t\t\t\t: (isArabic ? 'ar-AR' : 'en-US')\r\n\t\t\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"w-1/4 mt-1.5 break-all px-4\">\r\n\t\t\t\t\t\t\t\t\t<span>{{ 'rights.' + d.sharedMode | translate }}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"mt-1.5\">\r\n\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\tname: 'canRemoveShare',\r\n\t\t\t\t\t\t\t\t\t\t\tentity: selectedItem.entity\r\n\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'share.Rm_custom_share' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"\r\n\t\t\t\t\t\t\t\t\t\t\topenDialog(\r\n\t\t\t\t\t\t\t\t\t\t\t\t'Rem_custom_share',\r\n\t\t\t\t\t\t\t\t\t\t\t\td.user.properties.username,\r\n\t\t\t\t\t\t\t\t\t\t\t\td.sharedMode\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"ms-Icon ms-Icon--ChromeClose\"\r\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'mr-2.5' : 'ml-2.5'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<button\r\n\t\t\tclass=\"submission-button\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(click)=\"dialog.executeAction(share)\"\r\n\t\t>\r\n\t\t\t{{ 'share.shareButton' | translate }}\r\n\t\t</button>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".share-dialog-wrapper .mat-dialog-container{overflow:hidden;padding:0!important}.share-dialog-wrapper .borders-color{--tw-border-opacity: 1;border-bottom-color:rgba(185,28,28,var(--tw-border-opacity))!important;border-right-color:rgba(185,28,28,var(--tw-border-opacity))!important}.share-dialog-wrapper .rightsSelector .ng-select-container .ng-value-container .ng-placeholder{font-size:12px;margin-top:3px}.share-dialog-wrapper .selectorsWrapper .dep-label,.share-dialog-wrapper .selectorsWrapper .users-label{@apply text-base font-bold mb-0;}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "loaderMode"] }, { type: SelectUsersByDepartmentsComponent, selector: "app-select-users-by-departments", inputs: ["display", "depLabel", "userLabel", "allowMultipleUsers", "fetchDepUsersByCustomApi", "fetchedUsers"], outputs: ["formChanged", "onDataLoad"] }, { type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0.ViewEncapsulation.None });
+ShareDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ShareDialogComponent, selector: "app-share-dialog", usesInheritance: true, ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.SHARE' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<form [formGroup]=\"shareForm\" class=\"h-full p-5 overflow-auto\" SetRtl>\r\n\t\t\t<div class=\"flex flex-col justify-between h-full\">\r\n\t\t\t\t<!--Form Section-->\r\n\t\t\t\t<div class=\"add-permsion-wrapper\">\r\n\t\t\t\t\t<span class=\"text-gray-900 text-lg\">\r\n\t\t\t\t\t\t{{ 'share.shareDialogTitle' | translate }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t\t<div class=\"mt-5 selectorsWrapper\">\r\n\t\t\t\t\t\t<app-select-users-by-departments\r\n\t\t\t\t\t\t\tformControlName=\"depAnditsUsers\"\r\n\t\t\t\t\t\t\t[allowMultipleUsers]=\"true\"\r\n\t\t\t\t\t\t\t[userLabel]=\"'share.users' | translate\"\r\n\t\t\t\t\t\t\t[depLabel]=\"'share.Dep' | translate\"\r\n\t\t\t\t\t\t\t[display]=\"'column'\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t</app-select-users-by-departments>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"forbiddenUsers.length\" class=\"flex\">\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let p of forbiddenUsers; let i; as: index\">\r\n\t\t\t\t\t\t\t<span class=\"text-red-500 text-base\"> {{ p }}&nbsp; </span>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t<p *ngIf=\"forbiddenUsers.length == 1\">\r\n\t\t\t\t\t\t\t\t{{ 'share.single_forbidden' | translate }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t<p *ngIf=\"forbiddenUsers.length > 1\">\r\n\t\t\t\t\t\t\t\t{{ 'share.multi_forbidden' | translate }}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"sameCurrentUser\">\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t{{ 'share.shareWithLoggedInUser' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"isSharedBefore.length\" class=\"flex\">\r\n\t\t\t\t\t\t<span class=\"text-red-500 text-base\">\r\n\t\t\t\t\t\t\t{{ 'share.share_exists' | translate }}\r\n\t\t\t\t\t\t\t<ng-container *ngFor=\"let p of isSharedBefore\">\r\n\t\t\t\t\t\t\t\t{{ p }}\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t{{ 'share.before' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"mt-4 rightsSelector\">\r\n\t\t\t\t\t\t<label class=\"text-base font-bold mb-0\">\r\n\t\t\t\t\t\t\t{{ 'share.Rights' | translate }}\r\n\t\t\t\t\t\t\t<span class=\"text-danger\">*</span>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<ng-select\r\n\t\t\t\t\t\t\t[items]=\"rights\"\r\n\t\t\t\t\t\t\tbindLabel=\"label\"\r\n\t\t\t\t\t\t\tbindValue=\"value\"\r\n\t\t\t\t\t\t\t[placeholder]=\"'permission.rightsPlaceholder' | translate\"\r\n\t\t\t\t\t\t\tformControlName=\"rights\"\r\n\t\t\t\t\t\t\t(change)=\"setRight($event)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t</ng-select>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div *ngIf=\"sharedList.length\" class=\"mt-4\">\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<label class=\"text-base font-bold mb-0\">\r\n\t\t\t\t\t\t\t\t{{ 'share.fileUrl' | translate }}\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t\t<div class=\"flex relative\">\r\n\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t#fileUrl\r\n\t\t\t\t\t\t\t\t\t[value]=\"shareableUrl\"\r\n\t\t\t\t\t\t\t\t\tdisabled\r\n\t\t\t\t\t\t\t\t\tclass=\"appearance-none block w-full bg-accent-100 text-gray-700 border border-gray-200 rounded py-2.5 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\"\r\n\t\t\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\tclass=\"absolute pt-2.5 bg-accent-100\"\r\n\t\t\t\t\t\t\t\t\t[matTooltip]=\"'BUTTONS.COPY' | translate\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'right-2' : 'left-2'\"\r\n\t\t\t\t\t\t\t\t\t[cdkCopyToClipboard]=\"fileUrl.value\"\r\n\t\t\t\t\t\t\t\t\t(click)=\"copy()\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t\t\t\t\tsvgIcon=\"mat_solid:content_copy\"\r\n\t\t\t\t\t\t\t\t\t\tclass=\"icon-size-6\"\r\n\t\t\t\t\t\t\t\t\t></mat-icon>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t*ngIf=\"copied\"\r\n\t\t\t\t\t\t\t\t\tclass=\"flex absolute justify-around w-24 -mt-10 border border-red-700 h-7 rounded bg-gray-200\"\r\n\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'right-0' : 'left-0'\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclass=\"w-3 h-3 justify-center bg-gray-200 transform rotate-45 border mt-5 borders-color\"\r\n\t\t\t\t\t\t\t\t\t></div>\r\n\t\t\t\t\t\t\t\t\t<span class=\"absolute font-extralight\">{{\r\n\t\t\t\t\t\t\t\t\t\t'share.copied' | translate\r\n\t\t\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!--Shares Section-->\r\n\t\t\t\t<div *ngIf=\"sharedList.length\">\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"flex flex-row justify-between h-7 border-b-2 border-accent-100 mt-2\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span class=\"text-base font-bold\">\r\n\t\t\t\t\t\t\t{{ 'share.shares' | translate }}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\tname: 'canRemoveShare',\r\n\t\t\t\t\t\t\t\tentity: selectedItem.entity\r\n\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'share.Rm_All_shares' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"openDialog('Rem_ALL_shares')\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t\t\t[svgIcon]=\"'heroicons_outline:trash'\"\r\n\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'mr-2' : 'ml-2'\"\r\n\t\t\t\t\t\t\t></mat-icon>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"h-52 overflow-y-auto\">\r\n\t\t\t\t\t\t<div class=\"flex flex-row justify-between mt-2.5\">\r\n\t\t\t\t\t\t\t<span class=\"w-1/2 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.shareWith' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span class=\"w-1/4 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.share_date' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span class=\"w-1/4 text-base font-bold\">{{\r\n\t\t\t\t\t\t\t\t'share.permission' | translate\r\n\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t<span>&nbsp;</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let d of sharedList\">\r\n\t\t\t\t\t\t\t<div class=\"flex flex-row justify-between mt-2.5\">\r\n\t\t\t\t\t\t\t\t<div class=\"flex flex-row w-1/2\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex-0 w-8 h-8 rounded-full overflow-hidden\">\r\n\t\t\t\t\t\t\t\t\t\t<cts-avatar\r\n\t\t\t\t\t\t\t\t\t\t\t[user]=\"{\r\n\t\t\t\t\t\t\t\t\t\t\t\tproperties: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tfirstName: d.user.properties?.firstName,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tlastName: d.user.properties?.lastName\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t</cts-avatar>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"flex flex-col -mt-2 px-2 break-all\">\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ d.user.fullName }}</span>\r\n\t\t\t\t\t\t\t\t\t\t<span>{{ d.user.properties.email }}</span>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"w-1/4 mt-1.5 break-all px-2.5\">\r\n\t\t\t\t\t\t\t\t\t<span>{{\r\n\t\t\t\t\t\t\t\t\t\td.sharedDate\r\n\t\t\t\t\t\t\t\t\t\t\t| localizedDate\r\n\t\t\t\t\t\t\t\t\t\t\t\t: 'dd MMMM yyyy'\r\n\t\t\t\t\t\t\t\t\t\t\t\t: (isArabic ? 'ar-AR' : 'en-US')\r\n\t\t\t\t\t\t\t\t\t}}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"w-1/4 mt-1.5 break-all px-4\">\r\n\t\t\t\t\t\t\t\t\t<span>{{ 'rights.' + d.sharedMode | translate }}</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"mt-1.5\">\r\n\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\tmat-icon-button\r\n\t\t\t\t\t\t\t\t\t\t*permission=\"{\r\n\t\t\t\t\t\t\t\t\t\t\tname: 'canRemoveShare',\r\n\t\t\t\t\t\t\t\t\t\t\tentity: selectedItem.entity\r\n\t\t\t\t\t\t\t\t\t\t}\"\r\n\t\t\t\t\t\t\t\t\t\tmatTooltip=\"{{ 'share.Rm_custom_share' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t(click)=\"\r\n\t\t\t\t\t\t\t\t\t\t\topenDialog(\r\n\t\t\t\t\t\t\t\t\t\t\t\t'Rem_custom_share',\r\n\t\t\t\t\t\t\t\t\t\t\t\td.user.properties.username,\r\n\t\t\t\t\t\t\t\t\t\t\t\td.sharedMode\r\n\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"ms-Icon ms-Icon--ChromeClose\"\r\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t\t\t\t[ngClass]=\"locale === 'en' ? 'mr-2.5' : 'ml-2.5'\"\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<button\r\n\t\t\tclass=\"submission-button\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(click)=\"dialog.executeAction(share)\"\r\n\t\t>\r\n\t\t\t{{ 'share.shareButton' | translate }}\r\n\t\t</button>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".share-dialog-wrapper .mat-dialog-container{overflow:hidden;padding:0!important}.share-dialog-wrapper .borders-color{--tw-border-opacity: 1;border-bottom-color:rgba(185,28,28,var(--tw-border-opacity))!important;border-right-color:rgba(185,28,28,var(--tw-border-opacity))!important}.share-dialog-wrapper .rightsSelector .ng-select-container .ng-value-container .ng-placeholder{font-size:12px;margin-top:3px}.share-dialog-wrapper .selectorsWrapper .dep-label,.share-dialog-wrapper .selectorsWrapper .users-label{@apply text-base font-bold mb-0;}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "loaderMode"] }, { type: SelectUsersByDepartmentsComponent, selector: "app-select-users-by-departments", inputs: ["display", "depLabel", "userLabel", "allowMultipleUsers", "fetchDepUsersByCustomApi", "fetchedUsers"], outputs: ["formChanged", "onDataLoad"] }, { type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ShareDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -31459,7 +31808,7 @@ class SidepanelComponent {
     }
 }
 SidepanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidepanelComponent, deps: [{ token: i4$1.DatePipe }, { token: UserPreferencesService }, { token: DialogMangmentService }, { token: DynamicFormService }, { token: DocumentsService }, { token: TagsApiService }, { token: TranslationService }, { token: i1$3.MatDialog }, { token: SharedDocsService }], target: i0.ɵɵFactoryTarget.Component });
-SidepanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidepanelComponent, selector: "app-sidepanel", inputs: { selectedItem: "selectedItem", menuOpen: "menuOpen", sourcePage: "sourcePage", allowAddAndBlock: "allowAddAndBlock" }, outputs: { onCloseSideMenu: "onCloseSideMenu" }, viewQueries: [{ propertyName: "detailsTemplate", first: true, predicate: ["detailsTemplate"], descendants: true, static: true }, { propertyName: "commentsTemplate", first: true, predicate: ["commentsTemplate"], descendants: true, static: true }, { propertyName: "activityTemplate", first: true, predicate: ["activityTemplate"], descendants: true, static: true }, { propertyName: "permissionsTemplate", first: true, predicate: ["permissionsTemplate"], descendants: true, static: true }, { propertyName: "filesTemplate", first: true, predicate: ["filesTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"side-menu-details\" SetRtl>\r\n    <div class=\"h-full\" *ngIf=\"selectedItem && showDetails && !sideMenuLoading\">\r\n        <div class=\"\">\r\n            <div class=\"mb-3 px-5 py-1 w-100 flex border-b-2 items-center\">\r\n                <!-- <title-with-icon class=\"-my-1.5\" [context]=\"selectedItem.entity\" [showTitle]=\"false\"></title-with-icon> -->\r\n                <app-display-suitable-icon [data]=\"selectedItem\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                <div class=\"justify-center flex flex-col   flex-1 flex-grow-0 w-7/12\" *ngIf=\"!selectedItem.isDirectory\">\r\n                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                        [title]=\"selectedItem.entity?.properties?.['file:content']?.['name']\"\r\n                        [alt]=\"selectedItem.entity?.properties?.['file:content']?.['name']\">\r\n                        {{selectedItem.entity?.properties?.['file:content']?.['name']}}\r\n                    </div>\r\n                    <div class=\"text-gray-500 text-sm\">\r\n                        {{((selectedItem.entity?.properties?.['file:content']?.['length']) / (1024 *\r\n                        1024)).toFixed(2) }}\r\n                        MB\r\n                    </div>\r\n                </div>\r\n                <div class=\"\r\n                         d-flex\r\n                         items-center\r\n                         text-base text-gray-500\r\n                         font-bold\r\n                     \" *ngIf=\"selectedItem.isDirectory\">\r\n                    {{ selectedItem?.name }}\r\n                </div>\r\n                <ng-container *permission=\"{name: 'lockOwnerIfLocked', entity: selectedItem.entity}\">\r\n                    <mat-icon class=\"text-gray-500 cursor-pointer  mx-3\"\r\n                        *permission=\"{name: 'canUpdate', entity: selectedItem.entity}\"\r\n                        matTooltip=\"{{ 'FOLDERS.UPDATE_DETAILS' | translate }}\"\r\n                        (click)=\"openUpdateFromSideMenu()\">edit</mat-icon>\r\n                </ng-container>\r\n            </div>\r\n            <mat-icon class=\"close-icon text-gray-500\" (click)=\"closeDetailsMenu()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <div class=\"dynamic-section\">\r\n            <div class=\"mx-2 h-full\">\r\n                <app-dynamic-tabs [tabs]=\"myTabs\"></app-dynamic-tabs>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"sideMenuLoading\">\r\n        {{ \"loading\" | translate }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Comments -->\r\n<ng-template #commentsTemplate>\r\n    <div class=\"overflow-auto h-full\">\r\n        <app-comments-dashlet [correspondence]=\"sideMenuFileDetails\" [entityId]=\"selectedItem.entity.uid\"\r\n            [showaddcomment]=\"true\" [row]=\"false\">\r\n        </app-comments-dashlet>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- myLogFile -->\r\n<ng-template #activityTemplate>\r\n    <!-- <cts-viewer-log [correspondence]=\"selectedItem.entity\"></cts-viewer-log> -->\r\n    <div class=\"h-full mt-3\">\r\n        <app-activities-log [documentId]=\"selectedItem.entity.uid\" [documentTitle]=\"selectedItem.entity.title\"\r\n            [file]=\"sideMenuFileDetails\"></app-activities-log>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #permissionsTemplate>\r\n    <div class=\"h-full overflow-auto px-2 mt-3\">\r\n        <app-permissions [sourcePage]=\"sourcePage\"\r\n        [allowAddAndBlock]=\"allowAddAndBlock\"  [document]=\"sideMenuFileDetails\"\r\n            [documentId]=\"selectedItem.entity.uid\"></app-permissions>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Files Tab -->\r\n<ng-template #filesTemplate>\r\n    <div class=\"h-full overflow-auto px-2 mt-3\">\r\n        <cts-versions [file]=\"selectedItem.entity\"></cts-versions>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Details -->\r\n<ng-template #detailsTemplate>\r\n    <div class=\"pb-2 mt-3 h-full px-2 overflow-auto\">\r\n        <div class=\"static-data\">\r\n            <div class=\"mt-5\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.TITLE_ONLY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{ dynamicFormData[\"dc:title\"] }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.DESCRIPTION_ONLY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{ dynamicFormData[\"dc:description\"] }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.CREATED_AT\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{\r\n                    dynamicFormData[\"dc:created\"]\r\n                    | localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')\r\n                    }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.LAST_MODIFIED\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{\r\n                    dynamicFormData[\"dc:modified\"]\r\n                    | localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')\r\n                    }}\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"super-document-fields\">\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentSubject\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_SUBJECT\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:documentSubject\"] ? dynamicFormData[\"gdoc:documentSubject\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentNumber\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_NUMBER\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:documentNumber\"] ? dynamicFormData[\"gdoc:documentNumber\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentReferenceNumber\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_REF_NUMBER\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\" dir=\"ltr\">\r\n                        {{ dynamicFormData[\"gdoc:documentReferenceNumber\"] ?\r\n                        dynamicFormData[\"gdoc:documentReferenceNumber\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:gDocumentDate\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_DATE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:gDocumentDate\"] ? (dynamicFormData[\"gdoc:gDocumentDate\"] |\r\n                        localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')) : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='(selectedItem.entity.category && selectedItem.entity.category !== {})'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.CATEGORY\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.category && selectedItem.entity.category !== {}) ?\r\n                        (isArabic ? selectedItem.entity.category.arabicName : selectedItem.entity.category.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\"\r\n                    *ngIf='(selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.CATEGORY_TYPE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.categoryType.arabicName :\r\n                        selectedItem.entity.categoryType.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf='(selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.MAIN_TOPIC\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.mainTopic.arabicName :\r\n                        selectedItem.entity.mainTopic.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\"\r\n                    *ngIf='(selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_TYPE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.documentType.arabicName :\r\n                        selectedItem.entity.documentType.englishTitle)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:secrecyLevel\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.SCRECY_LEVEL\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ 'vocabulary.VOC_SecrecyLevel.' + dynamicFormData[\"gdoc:secrecyLevel\"] | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:importance\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.IMPORTANCE_LEVEL\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ 'vocabulary.VOC_Importance.' + dynamicFormData[\"gdoc:importance\"] | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='selectedItem.entity.department'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DEPARTMENT_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ selectedItem.entity.department ?\r\n                        (isArabic ? selectedItem.entity.department.arabicName :\r\n                        selectedItem.entity.department.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:departmentCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DEPARTMENT_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:departmentCode\"] ? dynamicFormData[\"gdoc:departmentCode\"] : '--'}}\r\n                    </div>\r\n                </div> -->\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:agencyCategoryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.AGENCY_CATEGORY_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:agencyCategoryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:agencyCategoryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:agencyCategoryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:agencyNameCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.AGENCY_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:agencyNameCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:agencyNameCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:agencyNameCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:countryCategoryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.COUNTRY_CATEGORY_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:countryCategoryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:countryCategoryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:countryCategoryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:countryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.COUNTRY_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:countryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:countryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:countryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:remarks\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.REMARKS\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:remarks\"] ? dynamicFormData[\"gdoc:remarks\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.BY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm d-flex\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl\">\r\n                        <app-user [user]=\"dynamicFormData['dc:creator']\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\" *ngIf=\"dynamicFormData['dc:contributors'].length > 0\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.CONTRUBITORS\" | translate }}\r\n                </div>\r\n                <div class=\"d-flex flex-wrap\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl mb-2\"\r\n                        *ngFor=\"let user of dynamicFormData['dc:contributors']\">\r\n                        <app-user [user]=\"user\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\" *ngIf=\"sharedListUser.length > 0\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{\"share.shareWith\" | translate}}\r\n                </div>\r\n                <div class=\"d-flex flex-wrap\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl mb-2\" *ngFor=\"let user of sharedListUser\">\r\n                        <app-user [user]=\"user\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-5\" *ngIf=\"dynamicForm && dynamicFormData\">\r\n            <app-multiple-dynamic-form-viewer [form]=\"dynamicForm\"\r\n                [data]=\"dynamicFormData\"></app-multiple-dynamic-form-viewer>\r\n        </div>\r\n        <div class=\"tags-wrappers relative px-0 py-3\">\r\n            <cts-correspondence-tags [correspondence]=\"sideMenuFileDetails\" [customClass]=\"'tags-dms-wrapper'\"\r\n                [useParams]=\"true\" [addCustomApiName]=\"'Services.TagDocument'\"\r\n                [deleteCustomApiName]=\"'Services.UntagDocument'\">\r\n            </cts-correspondence-tags>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [""], components: [{ type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicTabsComponent, selector: "app-dynamic-tabs", inputs: ["tabs", "selectedIndex"] }, { type: CommentsDashletComponent, selector: "app-comments-dashlet", inputs: ["entityId", "correspondence", "row", "showaddcomment", "showCommentActions"] }, { type: ActivitiesLogComponent, selector: "app-activities-log", inputs: ["documentId", "file", "documentTitle"], outputs: ["success"] }, { type: PermissionsComponent, selector: "app-permissions", inputs: ["documentId", "document", "allowAddAndBlock", "sourcePage"] }, { type: VersionsComponent, selector: "cts-versions", inputs: ["selectedVersion", "file", "actions", "currentTranslation", "originTranslation", "historyTranslation", "showUserCard"], outputs: ["handleActions"] }, { type: UserComponent, selector: "app-user", inputs: ["user", "type", "textColor"] }, { type: MultipleDynamicFormViewerComponent, selector: "app-multiple-dynamic-form-viewer", inputs: ["form", "data"] }, { type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: ["alwaysShowRemoveBtn", "correspondence", "customClass", "addCustomApiName", "deleteCustomApiName", "useParams", "accordionMode", "systemTags", "accordionOpen", "title", "multiple"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0.ViewEncapsulation.None });
+SidepanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SidepanelComponent, selector: "app-sidepanel", inputs: { selectedItem: "selectedItem", menuOpen: "menuOpen", sourcePage: "sourcePage", allowAddAndBlock: "allowAddAndBlock" }, outputs: { onCloseSideMenu: "onCloseSideMenu" }, viewQueries: [{ propertyName: "detailsTemplate", first: true, predicate: ["detailsTemplate"], descendants: true, static: true }, { propertyName: "commentsTemplate", first: true, predicate: ["commentsTemplate"], descendants: true, static: true }, { propertyName: "activityTemplate", first: true, predicate: ["activityTemplate"], descendants: true, static: true }, { propertyName: "permissionsTemplate", first: true, predicate: ["permissionsTemplate"], descendants: true, static: true }, { propertyName: "filesTemplate", first: true, predicate: ["filesTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"side-menu-details\" SetRtl>\r\n    <div class=\"h-full\" *ngIf=\"selectedItem && showDetails && !sideMenuLoading\">\r\n        <div class=\"\">\r\n            <div class=\"mb-3 px-5 py-1 w-100 flex border-b-2 items-center\">\r\n                <!-- <title-with-icon class=\"-my-1.5\" [context]=\"selectedItem.entity\" [showTitle]=\"false\"></title-with-icon> -->\r\n                <app-display-suitable-icon [data]=\"selectedItem\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                <div class=\"justify-center flex flex-col   flex-1 flex-grow-0 w-7/12\" *ngIf=\"!selectedItem.isDirectory\">\r\n                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                        [title]=\"selectedItem.entity?.properties?.['file:content']?.['name']\"\r\n                        [alt]=\"selectedItem.entity?.properties?.['file:content']?.['name']\">\r\n                        {{selectedItem.entity?.properties?.['file:content']?.['name']}}\r\n                    </div>\r\n                    <div class=\"text-gray-500 text-sm\">\r\n                        {{((selectedItem.entity?.properties?.['file:content']?.['length']) / (1024 *\r\n                        1024)).toFixed(2) }}\r\n                        MB\r\n                    </div>\r\n                </div>\r\n                <div class=\"\r\n                         d-flex\r\n                         items-center\r\n                         text-base text-gray-500\r\n                         font-bold\r\n                     \" *ngIf=\"selectedItem.isDirectory\">\r\n                    {{ selectedItem?.name }}\r\n                </div>\r\n                <ng-container *permission=\"{name: 'lockOwnerIfLocked', entity: selectedItem.entity}\">\r\n                    <mat-icon class=\"text-gray-500 cursor-pointer  mx-3\"\r\n                        *permission=\"{name: 'canUpdate', entity: selectedItem.entity}\"\r\n                        matTooltip=\"{{ 'FOLDERS.UPDATE_DETAILS' | translate }}\"\r\n                        (click)=\"openUpdateFromSideMenu()\">edit</mat-icon>\r\n                </ng-container>\r\n            </div>\r\n            <mat-icon class=\"close-icon text-gray-500\" (click)=\"closeDetailsMenu()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <div class=\"dynamic-section\">\r\n            <div class=\"mx-2 h-full\">\r\n                <app-dynamic-tabs [tabs]=\"myTabs\"></app-dynamic-tabs>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"sideMenuLoading\">\r\n        {{ \"loading\" | translate }}\r\n    </div>\r\n</div>\r\n\r\n<!-- Comments -->\r\n<ng-template #commentsTemplate>\r\n    <div class=\"overflow-auto h-full\">\r\n        <app-comments-dashlet [correspondence]=\"sideMenuFileDetails\" [entityId]=\"selectedItem.entity.uid\"\r\n            [showaddcomment]=\"true\" [row]=\"false\">\r\n        </app-comments-dashlet>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- myLogFile -->\r\n<ng-template #activityTemplate>\r\n    <!-- <cts-viewer-log [correspondence]=\"selectedItem.entity\"></cts-viewer-log> -->\r\n    <div class=\"h-full mt-3\">\r\n        <app-activities-log [documentId]=\"selectedItem.entity.uid\" [documentTitle]=\"selectedItem.entity.title\"\r\n            [file]=\"sideMenuFileDetails\"></app-activities-log>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #permissionsTemplate>\r\n    <div class=\"h-full overflow-auto px-2 mt-3\">\r\n        <app-permissions [sourcePage]=\"sourcePage\"\r\n        [allowAddAndBlock]=\"allowAddAndBlock\"  [document]=\"sideMenuFileDetails\"\r\n            [documentId]=\"selectedItem.entity.uid\"></app-permissions>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Files Tab -->\r\n<ng-template #filesTemplate>\r\n    <div class=\"h-full overflow-auto px-2 mt-3\">\r\n        <cts-versions [file]=\"selectedItem.entity\"></cts-versions>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Details -->\r\n<ng-template #detailsTemplate>\r\n    <div class=\"pb-2 mt-3 h-full px-2 overflow-auto\">\r\n        <div class=\"static-data\">\r\n            <div class=\"mt-5\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.TITLE_ONLY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{ dynamicFormData[\"dc:title\"] }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.DESCRIPTION_ONLY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{ dynamicFormData[\"dc:description\"] }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.CREATED_AT\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{\r\n                    dynamicFormData[\"dc:created\"]\r\n                    | localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')\r\n                    }}\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.LAST_MODIFIED\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm\">\r\n                    {{\r\n                    dynamicFormData[\"dc:modified\"]\r\n                    | localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')\r\n                    }}\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"super-document-fields\">\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentSubject\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_SUBJECT\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:documentSubject\"] ? dynamicFormData[\"gdoc:documentSubject\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentNumber\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_NUMBER\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:documentNumber\"] ? dynamicFormData[\"gdoc:documentNumber\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:documentReferenceNumber\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_REF_NUMBER\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\" dir=\"ltr\">\r\n                        {{ dynamicFormData[\"gdoc:documentReferenceNumber\"] ?\r\n                        dynamicFormData[\"gdoc:documentReferenceNumber\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:gDocumentDate\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_DATE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:gDocumentDate\"] ? (dynamicFormData[\"gdoc:gDocumentDate\"] |\r\n                        localizedDate: \"dd MMMM yyyy\":(isArabic? 'ar-AR' : 'en-US')) : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='(selectedItem.entity.category && selectedItem.entity.category !== {})'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.CATEGORY\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.category && selectedItem.entity.category !== {}) ?\r\n                        (isArabic ? selectedItem.entity.category.arabicName : selectedItem.entity.category.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\"\r\n                    *ngIf='(selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.CATEGORY_TYPE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.categoryType && selectedItem.entity.categoryType.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.categoryType.arabicName :\r\n                        selectedItem.entity.categoryType.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf='(selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.MAIN_TOPIC\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.mainTopic && selectedItem.entity.mainTopic.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.mainTopic.arabicName :\r\n                        selectedItem.entity.mainTopic.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\"\r\n                    *ngIf='(selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName)'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DOCUMENT_TYPE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ (selectedItem.entity.documentType && selectedItem.entity.documentType.arabicName) ?\r\n                        (isArabic ? selectedItem.entity.documentType.arabicName :\r\n                        selectedItem.entity.documentType.englishTitle)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:secrecyLevel\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.SCRECY_LEVEL\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ 'vocabulary.VOC_SecrecyLevel.' + dynamicFormData[\"gdoc:secrecyLevel\"] | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:importance\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.IMPORTANCE_LEVEL\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ 'vocabulary.VOC_Importance.' + dynamicFormData[\"gdoc:importance\"] | translate}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='selectedItem.entity.department'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DEPARTMENT_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ selectedItem.entity.department ?\r\n                        (isArabic ? selectedItem.entity.department.arabicName :\r\n                        selectedItem.entity.department.englishName)\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:departmentCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.DEPARTMENT_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:departmentCode\"] ? dynamicFormData[\"gdoc:departmentCode\"] : '--'}}\r\n                    </div>\r\n                </div> -->\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:agencyCategoryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.AGENCY_CATEGORY_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:agencyCategoryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:agencyCategoryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:agencyCategoryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:agencyNameCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.AGENCY_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:agencyNameCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:agencyNameCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:agencyNameCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:countryCategoryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.COUNTRY_CATEGORY_CODE\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:countryCategoryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:countryCategoryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:countryCategoryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:countryCode\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.COUNTRY_NAME\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:countryCode\"] ?\r\n                        (isArabic ? dynamicFormData[\"gdoc:countryCode\"]['properties']['label_ar']\r\n                        : dynamicFormData[\"gdoc:countryCode\"]['properties']['label_en'])\r\n                        : '--'}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\" *ngIf='dynamicFormData[\"gdoc:remarks\"]'>\r\n                    <div class=\"text-gray-500 font-bold text-base\">\r\n                        {{ \"CREATE.REMARKS\" | translate }}\r\n                    </div>\r\n                    <div class=\"text-gray-900 text-sm\">\r\n                        {{ dynamicFormData[\"gdoc:remarks\"] ? dynamicFormData[\"gdoc:remarks\"] : '--'}}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-3\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.BY\" | translate }}\r\n                </div>\r\n                <div class=\"text-gray-900 text-sm d-flex\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl\">\r\n                        <app-user [user]=\"dynamicFormData['dc:creator']\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\" *ngIf=\"dynamicFormData['dc:contributors'].length > 0\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{ \"FOLDERS.CONTRUBITORS\" | translate }}\r\n                </div>\r\n                <div class=\"d-flex flex-wrap\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl mb-2\"\r\n                        *ngFor=\"let user of dynamicFormData['dc:contributors']\">\r\n                        <app-user [user]=\"user\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"mt-3\" *ngIf=\"sharedListUser.length > 0\">\r\n                <div class=\"text-gray-500 font-bold text-base\">\r\n                    {{\"share.shareWith\" | translate}}\r\n                </div>\r\n                <div class=\"d-flex flex-wrap\">\r\n                    <div class=\"d-flex items-center bg-gray-100 rounded-xl mb-2\" *ngFor=\"let user of sharedListUser\">\r\n                        <app-user [user]=\"user\"></app-user>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-5\" *ngIf=\"dynamicForm && dynamicFormData\">\r\n            <app-multiple-dynamic-form-viewer [form]=\"dynamicForm\"\r\n                [data]=\"dynamicFormData\"></app-multiple-dynamic-form-viewer>\r\n        </div>\r\n        <div class=\"tags-wrappers relative px-0 py-3\">\r\n            <cts-correspondence-tags [correspondence]=\"sideMenuFileDetails\" [customClass]=\"'tags-dms-wrapper'\"\r\n                [useParams]=\"true\" [addCustomApiName]=\"'Services.TagDocument'\"\r\n                [deleteCustomApiName]=\"'Services.UntagDocument'\">\r\n            </cts-correspondence-tags>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [""], components: [{ type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicTabsComponent, selector: "app-dynamic-tabs", inputs: ["tabs", "selectedIndex"] }, { type: CommentsDashletComponent, selector: "app-comments-dashlet", inputs: ["entityId", "correspondence", "row", "showaddcomment", "showCommentActions"] }, { type: ActivitiesLogComponent, selector: "app-activities-log", inputs: ["documentId", "file", "documentTitle"], outputs: ["success"] }, { type: PermissionsComponent, selector: "app-permissions", inputs: ["documentId", "document", "allowAddAndBlock", "sourcePage"] }, { type: VersionsComponent, selector: "cts-versions", inputs: ["selectedVersion", "file", "actions", "currentTranslation", "originTranslation", "historyTranslation", "showUserCard"], outputs: ["handleActions"] }, { type: UserComponent, selector: "app-user", inputs: ["user", "type", "textColor"] }, { type: MultipleDynamicFormViewerComponent, selector: "app-multiple-dynamic-form-viewer", inputs: ["form", "data"] }, { type: CorrespondenceTagsComponent, selector: "cts-correspondence-tags", inputs: ["alwaysShowRemoveBtn", "correspondence", "customClass", "addCustomApiName", "deleteCustomApiName", "useParams", "accordionMode", "systemTags", "accordionOpen", "title", "multiple"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SidepanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -35222,7 +35571,7 @@ class UsersCardComponent {
     }
 }
 UsersCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UsersCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UsersCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: UsersCardComponent, selector: "app-users-card", inputs: { members: "members", title: "title" }, ngImport: i0, template: "<app-card>\r\n  <h3 class=\"title\">\r\n    {{ title | translate }}\r\n  </h3>\r\n\r\n  <div class=\"body\">\r\n    <div class=\"images-container\">\r\n      <ng-container *ngFor=\"let member of members\">\r\n        <cts-avatar\r\n          class=\"member-avatar\"\r\n          matTooltip=\"{{ member.properties.user.properties.firstName }} {{\r\n            member.properties.user.properties.lastName\r\n          }} - {{ member.properties.role }}\" matTooltipClass=\"tdf-tooltip\" [user]=\"member?.properties?.user\"\r\n          *ngIf=\"member?.properties?.user\"\r\n          [routerLink]=\"['/users', 'profile', member?.properties.user?.properties.username]\">\r\n        </cts-avatar>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</app-card>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.member-avatar{display:inline-block;width:64px;height:64px;border-radius:100%;border:2px solid white;box-shadow:0 1px 5px 2px #00000021;margin:16px -8px;cursor:pointer;overflow:hidden}.images-container{overflow:hidden;padding:0 8px}\n"], components: [{ type: CardComponent, selector: "app-card", inputs: ["noBody", "dark"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "translate": i1.TranslatePipe } });
+UsersCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: UsersCardComponent, selector: "app-users-card", inputs: { members: "members", title: "title" }, ngImport: i0, template: "<app-card>\r\n  <h3 class=\"title\">\r\n    {{ title | translate }}\r\n  </h3>\r\n\r\n  <div class=\"body\">\r\n    <div class=\"images-container\">\r\n      <ng-container *ngFor=\"let member of members\">\r\n        <cts-avatar\r\n          class=\"member-avatar\"\r\n          matTooltip=\"{{ member.properties.user.properties.firstName }} {{\r\n            member.properties.user.properties.lastName\r\n          }} - {{ member.properties.role }}\" matTooltipClass=\"tdf-tooltip\" [user]=\"member?.properties?.user\"\r\n          *ngIf=\"member?.properties?.user\"\r\n          [routerLink]=\"['/users', 'profile', member?.properties.user?.properties.username]\">\r\n        </cts-avatar>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</app-card>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.member-avatar{display:inline-block;width:64px;height:64px;border-radius:100%;border:2px solid white;box-shadow:0 1px 5px 2px #00000021;margin:16px -8px;cursor:pointer;overflow:hidden}.images-container{overflow:hidden;padding:0 8px}\n"], components: [{ type: CardComponent, selector: "app-card", inputs: ["noBody", "dark"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: UsersCardComponent, decorators: [{
             type: Component,
             args: [{
@@ -38679,7 +39028,7 @@ class NotificationsButtonComponent extends BaseNotification {
     }
 }
 NotificationsButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsButtonComponent, deps: [{ token: i0.Injector }, { token: TranslationService }, { token: CustomToastrService }, { token: i0.ChangeDetectorRef }, { token: NOTIFICATIONS_LIST_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsButtonComponent, selector: "app-notifications-button", inputs: { styleClass: "styleClass", badgeOptions: "badgeOptions", shouldMarkAsUnread: "shouldMarkAsUnread", ignoredToastEvents: "ignoredToastEvents" }, outputs: { listItemClick: "listItemClick", openSettings: "openSettings", openNotifications: "openNotifications", onNotification: "onNotification" }, host: { classAttribute: "inline-flex justify-center items-center notification-button" }, queries: [{ propertyName: "customIconTemplate", first: true, predicate: NOTIFICATION_ICON, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n\t*ngIf=\"panelMode === panelModeEnum.panel\"\r\n\t[matMenuTriggerFor]=\"notifications\"\r\n\t[matBadge]=\"newNotificationCount$ | async\"\r\n\t[matBadgeHidden]=\"!(showBadge$ | async)\"\r\n\t[matBadgeSize]=\"badgeOptions.size\"\r\n\t[matBadgeColor]=\"badgeOptions.color\"\r\n\t[matBadgePosition]=\"badgeOptions.position\"\r\n\t[class]=\"styleClass\"\r\n>\r\n\t<ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\"> </ng-container>\r\n</button>\r\n\r\n<mat-menu #notifications=\"matMenu\" class=\"notification-list-panel\">\r\n\t<ng-template matMenuContent>\r\n\t\t<app-notifications-list\r\n\t\t\t(itemClicked)=\"listItemClick.emit($event); notifications.closed.emit()\"\r\n\t\t\t(openSettings)=\"openSettings.emit($event); notifications.closed.emit()\"\r\n\t\t\t(openNotifications)=\"openNotifications.emit($event); notifications.closed.emit()\"\r\n\t\t\t(markAllRead)=\"refreshUnreadCount()\"\r\n\t\t></app-notifications-list>\r\n\t</ng-template>\r\n\t<div class=\"notification-list-panel__footer flex justify-center\">\r\n\t\t<ng-content select=\"[notifications-footer]\"></ng-content>\r\n\t</div>\r\n</mat-menu>\r\n\r\n<ng-container *ngIf=\"panelMode === panelModeEnum.sidebar\">\r\n\t<button\r\n\t\t[matBadge]=\"newNotificationCount$ | async\"\r\n\t\t[matBadgeHidden]=\"!(showBadge$ | async)\"\r\n\t\t[matBadgeSize]=\"badgeOptions.size\"\r\n\t\t[matBadgeColor]=\"badgeOptions.color\"\r\n\t\t[matBadgePosition]=\"badgeOptions.position\"\r\n\t\t[class]=\"styleClass\"\r\n\t\t(click)=\"toggleSideBar()\"\r\n\t>\r\n\t\t<ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\"> </ng-container>\r\n\t</button>\r\n\t<app-notifications-sidebar\r\n\t\t[(visible)]=\"isSidebarOpened\"\r\n\t\t(visibleChange)=\"refreshUnreadCount()\"\r\n\t\t[position]=\"sidebarPosition$ | async\"\r\n\t>\r\n\t\t<ng-template appNotificationSidebarContent>\r\n\t\t\t<app-notifications-list\r\n\t\t\t\tclass=\"notifications-sidebar\"\r\n\t\t\t\t(itemClicked)=\"listItemClick.emit($event); toggleSideBar(false); refreshUnreadCount()\"\r\n\t\t\t\t(openSettings)=\"openSettings.emit($event); toggleSideBar(false)\"\r\n\t\t\t\t(openNotifications)=\"openNotifications.emit($event); toggleSideBar(false)\"\r\n\t\t\t\t(markAllRead)=\"refreshUnreadCount()\"\r\n\t\t\t></app-notifications-list>\r\n\t\t</ng-template>\r\n\t</app-notifications-sidebar>\r\n</ng-container>\r\n\r\n<ng-template #defaultIconTemplate>\r\n\t<i class=\"bi bi-bell bell\"></i>\r\n</ng-template>\r\n", styles: [".notification-button{font-size:var(--not-btn-font-size, 1.5rem);width:var(--not-btn-width, 40px)}.notification-button .mat-badge-content{text-overflow:unset;width:18px;height:18px;line-height:18px}.notification-list-panel{--width: var(--nos-panel-width, min(80vw, 450px));width:var(--width);border-radius:var(--nos-panel-radius, 5px);overflow:hidden;-webkit-overflow-scrolling:touch;outline:0;background:var(--nos-panel-background, #fff)}.notification-list-panel.mat-menu-panel{max-width:var(--width);max-height:var(--nos-panel-max-height, var(--height))}.notification-list-panel__navigate-btn{background:var(--not-btn-background, transparent);border-radius:var(--not-btn-radius, 5px);padding:var(--not-btn-padding, .5rem 1rem);margin:var(--not-btn-margin, .5rem 0);color:var(--not-btn-color, currentColor);width:var(--not-btn-width, 90%)}.notification-list-panel__navigate-btn:hover{--not-btn-background: var(--not-btn-hover-background, #f0f0f0);--not-btn-color: var(--not-btn-hover-color);-webkit-text-decoration:var(--not-btn-decoration, none);text-decoration:var(--not-btn-decoration, none)}.notification-list-panel__navigate-btn:active{--not-btn-background: var(--not-btn-active-background, #e2e2e2);--not-btn-color: var(--not-btn-active-color)}.notifications-sidebar{--nto-list-header-padding: var(--sidebar-list-header-padding, 1rem);--nto-list-height: var(--sidebar-list-height, calc(100vh - 100px))}\n"], components: [{ type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationsListComponent, selector: "app-notifications-list", outputs: ["openSettings", "openNotifications"] }, { type: NotificationsSidebarComponent, selector: "app-notifications-sidebar", inputs: ["appendToBody", "clearOnCLose", "visible", "position"], outputs: ["visibleChange", "onShow", "onHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i7$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { type: NotificationSidebarContentDirective, selector: "[appNotificationSidebarContent]" }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NotificationsButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsButtonComponent, selector: "app-notifications-button", inputs: { styleClass: "styleClass", badgeOptions: "badgeOptions", shouldMarkAsUnread: "shouldMarkAsUnread", ignoredToastEvents: "ignoredToastEvents" }, outputs: { listItemClick: "listItemClick", openSettings: "openSettings", openNotifications: "openNotifications", onNotification: "onNotification" }, host: { classAttribute: "inline-flex justify-center items-center notification-button" }, queries: [{ propertyName: "customIconTemplate", first: true, predicate: NOTIFICATION_ICON, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n\t*ngIf=\"panelMode === panelModeEnum.panel\"\r\n\t[matMenuTriggerFor]=\"notifications\"\r\n\t[matBadge]=\"newNotificationCount$ | async\"\r\n\t[matBadgeHidden]=\"!(showBadge$ | async)\"\r\n\t[matBadgeSize]=\"badgeOptions.size\"\r\n\t[matBadgeColor]=\"badgeOptions.color\"\r\n\t[matBadgePosition]=\"badgeOptions.position\"\r\n\t[class]=\"styleClass\"\r\n>\r\n\t<ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\"> </ng-container>\r\n</button>\r\n\r\n<mat-menu #notifications=\"matMenu\" class=\"notification-list-panel\">\r\n\t<ng-template matMenuContent>\r\n\t\t<app-notifications-list\r\n\t\t\t(itemClicked)=\"listItemClick.emit($event); notifications.closed.emit()\"\r\n\t\t\t(openSettings)=\"openSettings.emit($event); notifications.closed.emit()\"\r\n\t\t\t(openNotifications)=\"openNotifications.emit($event); notifications.closed.emit()\"\r\n\t\t\t(markAllRead)=\"refreshUnreadCount()\"\r\n\t\t></app-notifications-list>\r\n\t</ng-template>\r\n\t<div class=\"notification-list-panel__footer flex justify-center\">\r\n\t\t<ng-content select=\"[notifications-footer]\"></ng-content>\r\n\t</div>\r\n</mat-menu>\r\n\r\n<ng-container *ngIf=\"panelMode === panelModeEnum.sidebar\">\r\n\t<button\r\n\t\t[matBadge]=\"newNotificationCount$ | async\"\r\n\t\t[matBadgeHidden]=\"!(showBadge$ | async)\"\r\n\t\t[matBadgeSize]=\"badgeOptions.size\"\r\n\t\t[matBadgeColor]=\"badgeOptions.color\"\r\n\t\t[matBadgePosition]=\"badgeOptions.position\"\r\n\t\t[class]=\"styleClass\"\r\n\t\t(click)=\"toggleSideBar()\"\r\n\t>\r\n\t\t<ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\"> </ng-container>\r\n\t</button>\r\n\t<app-notifications-sidebar\r\n\t\t[(visible)]=\"isSidebarOpened\"\r\n\t\t(visibleChange)=\"refreshUnreadCount()\"\r\n\t\t[position]=\"sidebarPosition$ | async\"\r\n\t>\r\n\t\t<ng-template appNotificationSidebarContent>\r\n\t\t\t<app-notifications-list\r\n\t\t\t\tclass=\"notifications-sidebar\"\r\n\t\t\t\t(itemClicked)=\"listItemClick.emit($event); toggleSideBar(false); refreshUnreadCount()\"\r\n\t\t\t\t(openSettings)=\"openSettings.emit($event); toggleSideBar(false)\"\r\n\t\t\t\t(openNotifications)=\"openNotifications.emit($event); toggleSideBar(false)\"\r\n\t\t\t\t(markAllRead)=\"refreshUnreadCount()\"\r\n\t\t\t></app-notifications-list>\r\n\t\t</ng-template>\r\n\t</app-notifications-sidebar>\r\n</ng-container>\r\n\r\n<ng-template #defaultIconTemplate>\r\n\t<i class=\"bi bi-bell bell\"></i>\r\n</ng-template>\r\n", styles: [".notification-button{font-size:var(--not-btn-font-size, 1.5rem);width:var(--not-btn-width, 40px)}.notification-button .mat-badge-content{text-overflow:unset;width:18px;height:18px;line-height:18px}.notification-list-panel{--width: var(--nos-panel-width, min(80vw, 450px));width:var(--width);border-radius:var(--nos-panel-radius, 5px);overflow:hidden;-webkit-overflow-scrolling:touch;outline:0;background:var(--nos-panel-background, #fff)}.notification-list-panel.mat-menu-panel{max-width:var(--width);max-height:var(--nos-panel-max-height, var(--height))}.notification-list-panel__navigate-btn{background:var(--not-btn-background, transparent);border-radius:var(--not-btn-radius, 5px);padding:var(--not-btn-padding, .5rem 1rem);margin:var(--not-btn-margin, .5rem 0);color:var(--not-btn-color, currentColor);width:var(--not-btn-width, 90%)}.notification-list-panel__navigate-btn:hover{--not-btn-background: var(--not-btn-hover-background, #f0f0f0);--not-btn-color: var(--not-btn-hover-color);-webkit-text-decoration:var(--not-btn-decoration, none);text-decoration:var(--not-btn-decoration, none)}.notification-list-panel__navigate-btn:active{--not-btn-background: var(--not-btn-active-background, #e2e2e2);--not-btn-color: var(--not-btn-active-color)}.notifications-sidebar{--nto-list-header-padding: var(--sidebar-list-header-padding, 1rem);--nto-list-height: var(--sidebar-list-height, calc(100vh - 100px))}\n"], components: [{ type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationsListComponent, selector: "app-notifications-list", outputs: ["openSettings", "openNotifications"] }, { type: NotificationsSidebarComponent, selector: "app-notifications-sidebar", inputs: ["appendToBody", "clearOnCLose", "visible", "position"], outputs: ["visibleChange", "onShow", "onHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i7$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { type: NotificationSidebarContentDirective, selector: "[appNotificationSidebarContent]" }], pipes: { "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -41864,11 +42213,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Output
             }] } });
 
-class ChartPanelComponent {
+class ChartPanel {
 }
-ChartPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChartPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChartPanelComponent, selector: "chart-panel", host: { classAttribute: "chart-panel" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["\n\t\t\t:host {\n\t\t\t\tbackground: var(--cp-background, rgba(0, 0, 0, 0.068));\n\t\t\t\tcolor: var(--cp-color);\n\t\t\t\tpadding: var(--cp-padding, 1rem);\n\t\t\t\tborder-radius: var(--cp-radius, 1rem);\n\t\t\t\tmin-height: var(--cp-min-height, 260px);\n\t\t\t\t@media print {\n\t\t\t\t\t--cp-min-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartPanelComponent, decorators: [{
+ChartPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChartPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChartPanel, selector: "chart-panel", host: { classAttribute: "chart-panel" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["\n\t\t\t:host {\n\t\t\t\tbackground: var(--cp-background, rgba(0, 0, 0, 0.068));\n\t\t\t\tcolor: var(--cp-color);\n\t\t\t\tpadding: var(--cp-padding, 1rem);\n\t\t\t\tborder-radius: var(--cp-radius, 1rem);\n\t\t\t\tmin-height: var(--cp-min-height, 260px);\n\t\t\t\t@media print {\n\t\t\t\t\t--cp-min-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'chart-panel',
@@ -41921,12 +42270,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         class: 'chart-panel-footer flex justify-between items-center print:hidden'
                     }
                 }]
+        }] });
+class ChartPanelModule {
+}
+ChartPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChartPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartPanelModule, declarations: [ChartPanel, ChartPanelHeaderComponent, ChartPanelFooterComponent], imports: [CommonModule], exports: [ChartPanel, ChartPanelHeaderComponent, ChartPanelFooterComponent] });
+ChartPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartPanelModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ChartPanel, ChartPanelHeaderComponent, ChartPanelFooterComponent],
+                    exports: [ChartPanel, ChartPanelHeaderComponent, ChartPanelFooterComponent],
+                    imports: [CommonModule]
+                }]
         }] });
 
+class ReportActionsComponent {
+    constructor() {
+        this.config = null;
+        this.navigate = new EventEmitter();
+        this.open = new EventEmitter();
+        this.print = new EventEmitter();
+        this.modes = REPORT_MODE;
+    }
+    get isPrintAllowed() {
+        var _a, _b;
+        if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.mode) === REPORT_MODE.digit) {
+            return false;
+        }
+        return (_b = this.config) === null || _b === void 0 ? void 0 : _b.print;
+    }
+}
+ReportActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ReportActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ReportActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ReportActionsComponent, selector: "app-report-actions", inputs: { config: "config" }, outputs: { navigate: "navigate", open: "open", print: "print" }, host: { classAttribute: "chart-actions flex items-center rounded-lg gap-2 p-1" }, ngImport: i0, template: "<button\r\n\tclass=\"print-button chart-actions__item\"\r\n\t(click)=\"print.emit()\"\r\n\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t*ngIf=\"isPrintAllowed\"\r\n>\r\n\t<mat-icon>print</mat-icon>\r\n</button>\r\n\r\n<button\r\n\tclass=\"navigate-button chart-actions__item\"\r\n\t(click)=\"navigate.emit()\"\r\n\t*ngIf=\"config?.navigate?.enabled\"\r\n\t[matTooltip]=\"'REPORTS.navigate' | translate\"\r\n>\r\n\t<mat-icon>send</mat-icon>\r\n</button>\r\n<button\r\n\tclass=\"navigate-button chart-actions__item\"\r\n\t(click)=\"open.emit(null)\"\r\n\t*ngIf=\"config?.details?.enabled\"\r\n\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n>\r\n\t<mat-icon>info</mat-icon>\r\n</button>\r\n", styles: [""], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ReportActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-report-actions',
+                    templateUrl: './report-actions.component.html',
+                    styleUrls: ['./report-actions.component.scss'],
+                    host: {
+                        class: 'chart-actions flex items-center rounded-lg gap-2 p-1'
+                    }
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], navigate: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], print: [{
+                type: Output
+            }] } });
+
 class DigitReportComponent extends BaseReport {
 }
 DigitReportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DigitReportComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DigitReportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DigitReportComponent, selector: "app-digit-report", host: { classAttribute: "digit-report flex flex-col flex-grow" }, usesInheritance: true, ngImport: i0, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t{{ config.label | translate }}\r\n\t</chart-panel-header>\r\n\r\n\t<app-digit-chart class=\"ndf-report__content digit-chart\" [config]=\"config\" [data]=\"data\"></app-digit-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer\">\r\n\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 flex-wrap p-1\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"navigate()\"\r\n\t\t\t\t*ngIf=\"config?.navigate?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.navigate' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>send</mat-icon>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"onOpen.emit(null)\"\r\n\t\t\t\t*ngIf=\"config?.details?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>info</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}.digit-chart{display:var(--ndf-report-display, flex);flex-direction:var(--ndf-report-direction, column);justify-content:var(--ndf-report-justify-content, center);align-items:var(--ndf-report-align-items, center)}\n"], components: [{ type: ChartPanelComponent, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: DigitChartComponent, selector: "app-digit-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe } });
+DigitReportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DigitReportComponent, selector: "app-digit-report", host: { classAttribute: "digit-report flex flex-col flex-grow" }, usesInheritance: true, ngImport: i0, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t{{ config.label | translate }}\r\n\t</chart-panel-header>\r\n\r\n\t<app-digit-chart class=\"ndf-report__content digit-chart\" [config]=\"config\" [data]=\"data\"></app-digit-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer flex-wrap\">\r\n\t\t<app-report-actions\r\n\t\t\t[config]=\"config\"\r\n\t\t\t(navigate)=\"navigate()\"\r\n\t\t\t(open)=\"onOpen.emit(null)\"\r\n\t\t></app-report-actions>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}.digit-chart{display:var(--ndf-report-display, flex);flex-direction:var(--ndf-report-direction, column);justify-content:var(--ndf-report-justify-content, center);align-items:var(--ndf-report-align-items, center)}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: DigitChartComponent, selector: "app-digit-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DigitReportComponent, decorators: [{
             type: Component,
             args: [{
@@ -41941,10 +42341,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 
 class ChartTypeSelectorComponent {
     constructor() {
-        this.types = this._prepareTypes();
+        this.types = this._prepareTypes(this._getTypes());
         this.selectedType = null;
+        this.isEnabled = true;
         this.typeChange = new EventEmitter();
     }
+    set config(config) {
+        var _a;
+        if (___default.isBoolean(config === null || config === void 0 ? void 0 : config.enabled)) {
+            this.isEnabled = config === null || config === void 0 ? void 0 : config.enabled;
+        }
+        if (Array.isArray(config === null || config === void 0 ? void 0 : config.allowedTypes) && ((_a = config === null || config === void 0 ? void 0 : config.allowedTypes) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+            this.types = this._prepareTypes(config === null || config === void 0 ? void 0 : config.allowedTypes);
+        }
+    }
     set type(type) {
         this.selectedType = {
             icon: this._getIcon(type),
@@ -41959,10 +42369,8 @@ class ChartTypeSelectorComponent {
         this.selectedType = type;
         this.typeChange.emit(type.type);
     }
-    _prepareTypes() {
-        return Object.values(CHARTS_TYPES)
-            .filter((type) => ![CHARTS_TYPES.line].includes(type))
-            .map((type) => ({
+    _prepareTypes(types = []) {
+        return types.map((type) => ({
             icon: this._getIcon(type),
             type: type,
             label: `CHARTS.${type}`
@@ -41979,9 +42387,12 @@ class ChartTypeSelectorComponent {
         };
         return (_a = icons[type]) !== null && _a !== void 0 ? _a : '';
     }
+    _getTypes() {
+        return Object.values(CHARTS_TYPES).filter((type) => ![CHARTS_TYPES.line].includes(type));
+    }
 }
 ChartTypeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartTypeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChartTypeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: { direction: "direction", type: "type" }, outputs: { typeChange: "typeChange" }, host: { properties: { "attr.dir": "direction" }, classAttribute: "chart-type-selector" }, ngImport: i0, template: "<div [dir]=\"direction\" class=\"font-light flex items-center rounded-lg gap-2 chart-type-selector__wrapper p-1\">\r\n\t<button\r\n\t\tclass=\"chart-type-selector__item rounded\"\r\n\t\t*ngFor=\"let type of types\"\r\n\t\t(click)=\"changeType(type)\"\r\n\t\t[class.selected]=\"type.type === selectedType?.type\"\r\n\t\t[matTooltip]=\"type.label | translate\"\r\n\t>\r\n\t\t<mat-icon>{{ type.icon }}</mat-icon>\r\n\t</button>\r\n</div>\r\n", styles: [".chart-type-selector__wrapper{border:var(--chart-type-border, 1px solid var(--border-color))}.chart-type-selector__item{background:var(--chart-type-background, transparent);color:var(--chart-type-color, currentColor);box-shadow:var(--chart-type-shadow, unset);width:var(--chart-type-width, 35px);height:var(--chart-type-height, 35px);flex-grow:1;display:grid;place-items:center}.chart-type-selector__item .mat-icon{color:var(--main-color, currentColor)}.chart-type-selector__item:hover{--chart-type-shadow: var(--chart-type-hover-shadow, 0 0 0 1px var(--main-color))}.chart-type-selector__item.selected{--chart-type-background: var(--chart-type-active-background, var(--main-color));--chart-type-color: var(--chart-type-active-color, var(--main-hover))}.chart-type-selector__item.selected .mat-icon{color:currentColor!important}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+ChartTypeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: { direction: "direction", config: "config", type: "type" }, outputs: { typeChange: "typeChange" }, host: { properties: { "attr.dir": "direction" }, classAttribute: "chart-type-selector" }, ngImport: i0, template: "<div\r\n\t[dir]=\"direction\"\r\n\tclass=\"font-light flex items-center rounded-lg gap-2 chart-type-selector__wrapper p-1\"\r\n\t*ngIf=\"isEnabled\"\r\n>\r\n\t<button\r\n\t\tclass=\"chart-type-selector__item rounded\"\r\n\t\t*ngFor=\"let type of types\"\r\n\t\t(click)=\"changeType(type)\"\r\n\t\t[class.selected]=\"type.type === selectedType?.type\"\r\n\t\t[matTooltip]=\"type.label | translate\"\r\n\t>\r\n\t\t<mat-icon>{{ type.icon }}</mat-icon>\r\n\t</button>\r\n</div>\r\n", styles: [".chart-type-selector__wrapper{border:var(--chart-type-border, 1px solid var(--border-color))}.chart-type-selector__item{background:var(--chart-type-background, transparent);color:var(--chart-type-color, currentColor);box-shadow:var(--chart-type-shadow, unset);width:var(--chart-type-width, 35px);height:var(--chart-type-height, 35px);flex-grow:1;display:grid;place-items:center}.chart-type-selector__item .mat-icon{color:var(--main-color, currentColor)}.chart-type-selector__item:hover{--chart-type-shadow: var(--chart-type-hover-shadow, 0 0 0 1px var(--main-color))}.chart-type-selector__item.selected{--chart-type-background: var(--chart-type-active-background, var(--main-color));--chart-type-color: var(--chart-type-active-color, var(--main-hover))}.chart-type-selector__item.selected .mat-icon{color:currentColor!important}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChartTypeSelectorComponent, decorators: [{
             type: Component,
             args: [{
@@ -41996,6 +42407,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], propDecorators: { direction: [{
                 type: Input
+            }], config: [{
+                type: Input
             }], type: [{
                 type: Input
             }], typeChange: [{
@@ -42088,7 +42501,7 @@ class GraphDialogComponent {
     }
 }
 GraphDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GraphDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-GraphDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphDialogComponent, selector: "app-graph-dialog", viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-graph-chart\r\n\t\t\t#graphChart\r\n\t\t\tclass=\"ndf-report__content ndf-report__content--graph-char\"\r\n\t\t\t[config]=\"chart.config\"\r\n\t\t\t[data]=\"chart.data\"\r\n\t\t></app-graph-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<chart-type-selector\r\n\t\t\t\t[direction]=\"chart.direction\"\r\n\t\t\t\t[type]=\"chartType\"\r\n\t\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t\t></chart-type-selector>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [":host{--graph-chart-height: 100%;--app-chart-height: 100%;--dialog-body-max-height: 100%}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "loaderMode"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "type"], outputs: ["typeChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
+GraphDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphDialogComponent, selector: "app-graph-dialog", viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-graph-chart\r\n\t\t\t#graphChart\r\n\t\t\tclass=\"ndf-report__content ndf-report__content--graph-char\"\r\n\t\t\t[config]=\"chart.config\"\r\n\t\t\t[data]=\"chart.data\"\r\n\t\t></app-graph-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<chart-type-selector\r\n\t\t\t\t[direction]=\"chart.direction\"\r\n\t\t\t\t[type]=\"chartType\"\r\n\t\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t\t></chart-type-selector>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [":host{--graph-chart-height: 100%;--app-chart-height: 100%;--dialog-body-max-height: 100%}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "loaderMode"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "config", "type"], outputs: ["typeChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GraphDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -42122,7 +42535,7 @@ class TimelineDialogComponent {
     }
 }
 TimelineDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: DynamicTimelineReportService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimelineDialogComponent, selector: "app-timeline-dialog", viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\" *ngIf=\"report$ | async as report\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-graph-chart\r\n\t\t\t#graphChart\r\n\t\t\t*ngIf=\"report.data\"\r\n\t\t\tclass=\"ndf-report__content ndf-report__content graph-chart\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[data]=\"report.data\"\r\n\t\t></app-graph-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\r\n\t\t\t<time-group-selector\r\n\t\t\t\t*ngIf=\"report.config?.group?.active ?? true\"\r\n\t\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t\t></time-group-selector>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [":host{--graph-chart-height: 100%;--app-chart-height: 100%;--dialog-body-max-height: 100%}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "loaderMode"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe } });
+TimelineDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimelineDialogComponent, selector: "app-timeline-dialog", viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\" *ngIf=\"report$ | async as report\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-graph-chart\r\n\t\t\t#graphChart\r\n\t\t\t*ngIf=\"report.data\"\r\n\t\t\tclass=\"ndf-report__content ndf-report__content graph-chart\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[data]=\"report.data\"\r\n\t\t></app-graph-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\r\n\t\t\t<time-group-selector\r\n\t\t\t\t*ngIf=\"report.config?.group?.active ?? true\"\r\n\t\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t\t></time-group-selector>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [":host{--graph-chart-height: 100%;--app-chart-height: 100%;--dialog-body-max-height: 100%}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "loaderMode"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimelineDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -42200,7 +42613,7 @@ class GraphReportComponent extends BaseGraphReport {
     }
 }
 GraphReportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GraphReportComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-GraphReportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphReportComponent, selector: "app-graph-report", host: { classAttribute: "graph-report flex flex-col flex-grow" }, viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report chart-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button\"\r\n\t\t\t(click)=\"openGraphDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t[config]=\"config\"\r\n\t\t[data]=\"data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer flex-wrap\">\r\n\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"print-button chart-actions__item\"\r\n\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t*ngIf=\"config?.print\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"navigate()\"\r\n\t\t\t\t*ngIf=\"config?.navigate?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.navigate' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>send</mat-icon>\r\n\t\t\t</button>\r\n      <button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n        (click)=\"onOpen.emit(null)\"\r\n\t\t\t\t*ngIf=\"config?.details?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>info</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\r\n\t\t<chart-type-selector\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t[type]=\"chartType$ | async\"\r\n\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t></chart-type-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}:host{min-width:0;max-width:100%}\n"], components: [{ type: ChartPanelComponent, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "type"], outputs: ["typeChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe } });
+GraphReportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphReportComponent, selector: "app-graph-report", host: { classAttribute: "graph-report flex flex-col flex-grow" }, viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report chart-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button\"\r\n\t\t\t(click)=\"openGraphDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t[config]=\"config\"\r\n\t\t[data]=\"data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer flex-wrap\">\r\n\t\t<app-report-actions\r\n\t\t\t[config]=\"config\"\r\n\t\t\t(print)=\"printChart()\"\r\n\t\t\t(navigate)=\"navigate()\"\r\n\t\t\t(open)=\"onOpen.emit(null)\"\r\n\t\t></app-report-actions>\r\n\r\n\t\t<chart-type-selector\r\n      [config]=\"config?.typeConfig\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t[type]=\"chartType$ | async\"\r\n\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t></chart-type-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}:host{min-width:0;max-width:100%}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "config", "type"], outputs: ["typeChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GraphReportComponent, decorators: [{
             type: Component,
             args: [{
@@ -42256,7 +42669,7 @@ class DynamicTimelineReportComponent extends BaseGraphReport {
     }
 }
 DynamicTimelineReportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicTimelineReportComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DynamicTimelineReportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTimelineReportComponent, selector: "app-dynamic-timeline-report", host: { classAttribute: "timeline-report flex flex-col flex-grow" }, providers: [DynamicTimelineReportService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<chart-panel *ngIf=\"report$ | async as report; else noData\" class=\"ndf-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button\"\r\n\t\t\t(click)=\"openTimelineDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t[config]=\"report.config\"\r\n\t\t[data]=\"report.data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer\">\r\n\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 flex-wrap p-1\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"print-button chart-actions__item\"\r\n\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t*ngIf=\"config?.print\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"navigate()\"\r\n\t\t\t\t*ngIf=\"config?.navigate?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.enabled' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>send</mat-icon>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"openDetails()\"\r\n\t\t\t\t*ngIf=\"config?.details?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>info</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<time-group-selector\r\n\t\t\t*ngIf=\"config?.group?.active ?? true\"\r\n\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t></time-group-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n\r\n<ng-template #noData>\r\n\t<chart-panel class=\"ndf-report\">\r\n\t\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</chart-panel-header>\r\n\t\t<app-skeleton\r\n\t\t\tanimation=\"opacity\"\r\n\t\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t\theight=\"220px\"\r\n\t\t></app-skeleton>\r\n\t</chart-panel>\r\n</ng-template>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}:host{min-width:0;max-width:100%}.timeline-chart{display:var(--ndf-report-display, flex);flex-direction:var(--ndf-report-direction, column);justify-content:var(--ndf-report-justify-content, center);align-items:var(--ndf-report-align-items, center)}\n"], components: [{ type: ChartPanelComponent, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicTimelineReportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTimelineReportComponent, selector: "app-dynamic-timeline-report", host: { classAttribute: "timeline-report flex flex-col flex-grow" }, providers: [DynamicTimelineReportService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<chart-panel *ngIf=\"report$ | async as report; else noData\" class=\"ndf-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button\"\r\n\t\t\t(click)=\"openTimelineDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t[config]=\"report.config\"\r\n\t\t[data]=\"report.data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer\">\r\n\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 flex-wrap p-1\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"print-button chart-actions__item\"\r\n\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t*ngIf=\"config?.print\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"navigate()\"\r\n\t\t\t\t*ngIf=\"config?.navigate?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.enabled' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>send</mat-icon>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"openDetails()\"\r\n\t\t\t\t*ngIf=\"config?.details?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>info</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<time-group-selector\r\n\t\t\t*ngIf=\"config?.group?.active ?? true\"\r\n\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t></time-group-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n\r\n<ng-template #noData>\r\n\t<chart-panel class=\"ndf-report\">\r\n\t\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</chart-panel-header>\r\n\t\t<app-skeleton\r\n\t\t\tanimation=\"opacity\"\r\n\t\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t\theight=\"220px\"\r\n\t\t></app-skeleton>\r\n\t</chart-panel>\r\n</ng-template>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}:host{min-width:0;max-width:100%}.timeline-chart{display:var(--ndf-report-display, flex);flex-direction:var(--ndf-report-direction, column);justify-content:var(--ndf-report-justify-content, center);align-items:var(--ndf-report-align-items, center)}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicTimelineReportComponent, decorators: [{
             type: Component,
             args: [{
@@ -42614,7 +43027,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 const CONTAINERS = [NdfReportsComponent, NdfReportComponent];
 const DIRECTIVES = [ScrollableDivDirective];
 const CHARTS = [GraphChartComponent, DigitChartComponent];
-const PANEL_COMPONENTS = [ChartPanelComponent, ChartPanelHeaderComponent, ChartPanelFooterComponent];
 const COMPONENTS = [
     ChartTypeSelectorComponent,
     DigitReportComponent,
@@ -42633,7 +43045,7 @@ NdfReportsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         DynamicTimelineReportComponent,
         TimeGroupSelectorComponent,
         GraphDialogComponent,
-        TimelineDialogComponent, ChartPanelComponent, ChartPanelHeaderComponent, ChartPanelFooterComponent, ScrollableDivDirective, GraphChartComponent, DigitChartComponent], imports: [CommonModule,
+        TimelineDialogComponent, ScrollableDivDirective, GraphChartComponent, DigitChartComponent, ReportActionsComponent], imports: [CommonModule,
         TranslateModule,
         MatMenuModule,
         MatIconModule,
@@ -42645,12 +43057,13 @@ NdfReportsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         NgSelectModule,
         MatTooltipModule,
         FluidHeightModule,
-        FiltersPanelModule,
+        NdfFiltersPanelModule,
         MatProgressSpinnerModule,
         NuxeoDialogModule,
         NdfTableModule,
         DirectiveModule,
-        EditorNavigateButton], exports: [NdfReportsComponent, NdfReportComponent] });
+        EditorNavigateButton,
+        ChartPanelModule], exports: [NdfReportsComponent, NdfReportComponent] });
 NdfReportsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfReportsModule, imports: [[
             CommonModule,
             TranslateModule,
@@ -42664,17 +43077,18 @@ NdfReportsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             NgSelectModule,
             MatTooltipModule,
             FluidHeightModule,
-            FiltersPanelModule,
+            NdfFiltersPanelModule,
             MatProgressSpinnerModule,
             NuxeoDialogModule,
             NdfTableModule,
             DirectiveModule,
-            EditorNavigateButton
+            EditorNavigateButton,
+            ChartPanelModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfReportsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CONTAINERS, COMPONENTS, PANEL_COMPONENTS, DIRECTIVES, CHARTS],
+                    declarations: [CONTAINERS, COMPONENTS, DIRECTIVES, CHARTS, ReportActionsComponent],
                     imports: [
                         CommonModule,
                         TranslateModule,
@@ -42688,12 +43102,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         NgSelectModule,
                         MatTooltipModule,
                         FluidHeightModule,
-                        FiltersPanelModule,
+                        NdfFiltersPanelModule,
                         MatProgressSpinnerModule,
                         NuxeoDialogModule,
                         NdfTableModule,
                         DirectiveModule,
-                        EditorNavigateButton
+                        EditorNavigateButton,
+                        ChartPanelModule
                     ],
                     exports: [CONTAINERS]
                 }]
@@ -44263,7 +44678,7 @@ class EditorSettingsComponent {
     }
 }
 EditorSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorSettingsComponent, deps: [{ token: ComponentRegisterService, optional: true }, { token: EvaluatorsService, optional: true }, { token: NdfTransformService, optional: true }, { token: ChartDataTransformers, optional: true }, { token: ChartPluginsRegistry, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-EditorSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorSettingsComponent, selector: "app-editor-settings", ngImport: i0, template: "<cdk-accordion class=\"settings-list\">\r\n\t<cdk-accordion-item\r\n\t\t*ngFor=\"let item of settingsList; let index = index\"\r\n\t\t#accordionItem=\"cdkAccordionItem\"\r\n\t\tclass=\"settings-list__item\"\r\n\t\trole=\"button\"\r\n\t\ttabindex=\"0\"\r\n\t\t[attr.id]=\"'accordion-header-' + index\"\r\n\t\t[attr.aria-expanded]=\"accordionItem.expanded\"\r\n\t\t[attr.aria-controls]=\"'accordion-body-' + index\"\r\n\t>\r\n\t\t<div class=\"settings-list__item__header\" (click)=\"accordionItem.toggle()\">\r\n\t\t\t<span class=\"settings-list__item__header__title truncate\">\r\n\t\t\t\t{{ item.name | translate }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<mat-icon class=\"settings-list__item__header__icon\">\r\n\t\t\t\t{{ accordionItem.expanded ? 'expand_less' : 'expand_more' }}\r\n\t\t\t</mat-icon>\r\n\t\t</div>\r\n\t\t<div\r\n\t\t\tclass=\"settings-list__item__body\"\r\n\t\t\trole=\"region\"\r\n\t\t\t[style.display]=\"accordionItem.expanded ? '' : 'none'\"\r\n\t\t\t[attr.id]=\"'accordion-body-' + index\"\r\n\t\t\t[attr.aria-labelledby]=\"'accordion-header-' + index\"\r\n\t\t>\r\n\t\t\t<ul class=\"keys-list\">\r\n\t\t\t\t<li\r\n\t\t\t\t\t*ngFor=\"let key of item.keys\"\r\n\t\t\t\t\tclass=\"keys-list__key\"\r\n\t\t\t\t\t[appCopyToClipboard]=\"key\"\r\n\t\t\t\t\t[matTooltip]=\"'JSON_EDITOR.clickToCopy' | translate\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ key }}\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t</cdk-accordion-item>\r\n</cdk-accordion>\r\n", styles: [".settings-list{padding:var(--esl-padding, .5rem);color:var(--esl-color, inherit)}.settings-list__item__header{display:flex;justify-content:space-between;align-items:center;min-width:0;padding:var(--esl-header-padding, .5rem);border-bottom:var(--esl-header-border, 1px solid var(--border-color))}.settings-list__item__header__title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.keys-list{font-family:var(--keys-list-font-family, system-ui);font-size:var(--keys-list-font-size, .9rem);margin-block:var(--keys-list-margin, .5rem)}.keys-list__key{margin-bottom:.2rem;color:var(--keys-text-color, inherit);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-block:.15rem}.keys-list__key:hover{background:var(--keys-hover-background, #f5f5f5)}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$4.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { type: CopyToClipboardDirective, selector: "[appCopyToClipboard]", inputs: ["appCopyToClipboard"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
+EditorSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorSettingsComponent, selector: "app-editor-settings", ngImport: i0, template: "<cdk-accordion class=\"settings-list\">\r\n\t<cdk-accordion-item\r\n\t\t*ngFor=\"let item of settingsList; let index = index\"\r\n\t\t#accordionItem=\"cdkAccordionItem\"\r\n\t\tclass=\"settings-list__item\"\r\n\t\trole=\"button\"\r\n\t\ttabindex=\"0\"\r\n\t\t[attr.id]=\"'accordion-header-' + index\"\r\n\t\t[attr.aria-expanded]=\"accordionItem.expanded\"\r\n\t\t[attr.aria-controls]=\"'accordion-body-' + index\"\r\n\t>\r\n\t\t<div class=\"settings-list__item__header\" (click)=\"accordionItem.toggle()\">\r\n\t\t\t<span class=\"settings-list__item__header__title truncate\">\r\n\t\t\t\t{{ item.name | translate }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<mat-icon class=\"settings-list__item__header__icon\">\r\n\t\t\t\t{{ accordionItem.expanded ? 'expand_less' : 'expand_more' }}\r\n\t\t\t</mat-icon>\r\n\t\t</div>\r\n\t\t<div\r\n\t\t\tclass=\"settings-list__item__body\"\r\n\t\t\trole=\"region\"\r\n\t\t\t[style.display]=\"accordionItem.expanded ? '' : 'none'\"\r\n\t\t\t[attr.id]=\"'accordion-body-' + index\"\r\n\t\t\t[attr.aria-labelledby]=\"'accordion-header-' + index\"\r\n\t\t>\r\n\t\t\t<ul class=\"keys-list\">\r\n\t\t\t\t<li\r\n\t\t\t\t\t*ngFor=\"let key of item.keys\"\r\n\t\t\t\t\tclass=\"keys-list__key\"\r\n\t\t\t\t\t[appCopyToClipboard]=\"key\"\r\n\t\t\t\t\t[matTooltip]=\"'JSON_EDITOR.clickToCopy' | translate\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ key }}\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t</cdk-accordion-item>\r\n</cdk-accordion>\r\n", styles: [".settings-list{padding:var(--esl-padding, .5rem);color:var(--esl-color, inherit)}.settings-list__item__header{display:flex;justify-content:space-between;align-items:center;min-width:0;padding:var(--esl-header-padding, .5rem);border-bottom:var(--esl-header-border, 1px solid var(--border-color))}.settings-list__item__header__title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.keys-list{font-family:var(--keys-list-font-family, system-ui);font-size:var(--keys-list-font-size, .9rem);margin-block:var(--keys-list-margin, .5rem)}.keys-list__key{margin-bottom:.2rem;color:var(--keys-text-color, inherit);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-block:.15rem}.keys-list__key:hover{background:var(--keys-hover-background, #f5f5f5)}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$3.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$3.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { type: CopyToClipboardDirective, selector: "[appCopyToClipboard]", inputs: ["appCopyToClipboard"] }, { type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorSettingsComponent, decorators: [{
             type: Component,
             args: [{
@@ -44347,7 +44762,6 @@ class MonacoEditorComponent {
         return this._value;
     }
     set options(options) {
-        console.log(options);
         this._options = Object.assign({}, this.config.defaultOptions, options);
         if (this._editor) {
             this._editor.dispose();
@@ -44746,5 +45160,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS_TABLE_TEMPLATE, AGGREGATION_FIELD_TYPES, AUTOCOMPLETE_TEMPLATE, ActionsTableTemplateDirective, ActiveUserSwitchComponent, ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AggregationAutocompleteComponent, AggregationCheckboxComponent, AggregationCustomComponent, AggregationDateListComponent, AggregationFieldComponent, AggregationRadioComponent, AggregationSelectComponent, AggregationSwitchComponent, ApisErrorsMessagesService, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AutocompleteFilterPipe, AutocompleteTemplateDirective, AvatarComponent, AvatarModule, BaseChartBuilderService, BaseChartComponent, BaseColumnComponent, BaseComponent, BaseDatePicker, BaseDateValueAccessor, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CHART_DEFAULTS_OPTIONS, CHART_MAIN_COLOR, CHECKBOX_TEMPLATE, COLORS_COUNT, COMPARISON_OPERATOR, CONFIG_EDITOR_MODE, CUSTOM_FIELD_TYPES, CUSTOM_TEMPLATE, CachingExpiryUnit, CalendarService, CallApiService, CardComponent, CardModule, ChartComponent, ChartDataService, ChartDataTransformers, index$1 as ChartDefaults, ChartManagerService, index as ChartPlugins, ChartPluginsRegistry, index$2 as ChartUtils, ChartsModule, CheckboxTemplateDirective, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfigEditorActionsComponent, ConfigPreviewComponent, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ConnectionLabelComponent, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CopyToClipboardDirective, CopyToClipboardModule, CorrespondenceRelationComponent, CorrespondenceRelationCreateFormComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomFieldComponent, CustomMomentDateAdapter, CustomPpViewerComponent, CustomSocketComponent, CustomTemplateDirective, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DATE_LIST_TEMPLATE, DATE_LIST_VIEW, DATE_LOCALE_KEYS, DATE_TYPE, DEFAULT_DEBOUNCE_TIME, DEFAULT_VIEW, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DROPDOWN_LABEL_TEMPLATE, DROPDOWN_MULTI_LABEL_TEMPLATE, DROPDOWN_TEMPLATE, DataChartComponent, DataViewerComponent, DateFormatterService, DateHelperService, DateListTemplateDirective, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramUtils, DiagramsModule, DialogMangmentService, DigitChartService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownLabelTemplateDirective, DropdownMultiLabelTemplateDirective, DropdownTemplateDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicCustomComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicTimelineReportService, DynamicViewModule, EMPTY_TEMPLATE, ENTITY_TYPE, EXTENSION_JSONS, EditDeleteModalComponent, EditorModeSwitchComponent, EditorSettingsComponent, ElementHeightDirective, ElementHeightModule, EmptyTemplateDirective, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FIELD_SEND_MODE, FIELD_TYPE, FILTER_CUSTOM_TEMPLATE, FILTER_DATES_TYPE, FieldHeaderComponent, FieldValueObject, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterAutocompleteInputComponent, FilterCollapseControlComponent, FilterComponent, FilterCustomTemplateDirective, FilterDateRangeComponent, FilterEmptyMessageComponent, FilterModule, FilterOptionTextComponent, FilterOptionsSortComponent, FilterPipe, FilterQueryService, FilterSearchInputComponent, FiltersByRolesPipe, FiltersMapperService, FiltersPanelComponent, FiltersPanelModule, FluidHeightDirective, FluidHeightModule, FolderModalComponent, FolderishType, FormBuilderService, GREGORIAN_DATE_FORMATS, GREGORIAN_FORMAT, GatewayNodeComponent, GatewayPortsComponent, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HIJRI_DATE_ARABIC_NAMES, HIJRI_DATE_ENGLISH_NAMES, HIJRI_DATE_FORMATS, HIJRI_FORMAT, HashTranslateAsyncPipe, HashTranslatePipe, HijriAdapterService, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, HtmlDialogComponent, IN_OUT_DIRECTION, IconService, InfoDialogComponent, InitializationService, InputDateComponent, InputPort, InputRangeDateComponent, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizeState, LocalizedDatePipe, LocalizedLabelPipe, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY, MESSAGE_TYPE, MIN_VISIBLE_COUNT, MONACO_EDITOR_CONFIG, MY_MOMENT_FORMATS, MainfolderService, MessageService, ModeTogglerComponent, MomentDateAdapter, MonacoEditorComponent, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NDF_EDITOR_TYPE, NODE_CIRCLE_SIZE, NODE_GATEWAY_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfigEditorComponent, NdfConfigEditorModule, NdfConfirmationDialogComponent, NdfDatepickerComponent, NdfDatepickerModule, NdfGregorianDatepickerComponent, NdfHijriDatepickerComponent, NdfNuxeoDialog, NdfPanelComponent, NdfPanelModule, NdfReportComponent, NdfReportsComponent, NdfReportsModule, NdfReportsService, NdfTableComponent, NdfTableConfigurationService, NdfTableModule, NdfTableService, NdfTabsComponent, NdfTabsModule, NdfTransformService, NgxHijriGregorianDatepickerModule, NoDataComponent, NoDataFoundComponent, NoDataModule, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NodePortsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, NxQL, OutputPort, PAGINATION_MODE, PANEL_MODE, PARAMS_KEYS, PREDICATE_FIELD_TYPES, PROJECT_BASE_HREF, PageSizesListComponent, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PredicateDateInputComponent, PredicateFieldComponent, PredicateTextInputComponent, PublishDialogComponent, PublishingDocumentService, RADIO_TEMPLATE, RadioTemplateDirective, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, ReportConfigMapperService, ReportTransformService, ReportsStateService, RolesService, SEARCH_TABLE_TEMPLATE, SOCKET_WIDTH, SUBSCRIPTION_STATE, SWITCH_TEMPLATE, SafeHtmlPipe, SanitizerPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SearchTableTemplateDirective, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SilentPdfTronService, SingleActivityComponent, SkeletonComponent, SkeletonModule, Socket, SortListPipe, SortingListComponent, SpellCheckerFieldModule, SpellCheckerTextFieldComponent, SpinnerComponent, StatisticService, StatusIconComponent, SwitchTemplateDirective, TRANSLATION_PROVIDER, TableColumnsTogglerComponent, TableComponent, TableExportComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TextSearchComponent, TimeAgoPipe, ToastsModule, TooltipPipe, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VALUE_OBJECT, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getChartsOptions, getConnections, getDoughnutOptions, getHorizontalBarOptions, getLineOptions, getPieOptions, getRandomNumber, getValue, getVerticalBarOptions, isDateObject, isFieldValueObject, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeEmptyKeys, removeNode, removeNodeAndConnections, serializeControl, serializePort, slideAnimation, sortByOrder };
+export { ACTIONS_TABLE_TEMPLATE, AGGREGATION_FIELD_TYPES, AUTOCOMPLETE_TEMPLATE, ActionsTableTemplateDirective, ActiveUserSwitchComponent, ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AggregationAutocompleteComponent, AggregationCheckboxComponent, AggregationCustomComponent, AggregationDateListComponent, AggregationFieldComponent, AggregationRadioComponent, AggregationSelectComponent, AggregationSwitchComponent, ApisErrorsMessagesService, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AutocompleteFilterPipe, AutocompleteTemplateDirective, AvatarComponent, AvatarModule, BaseChartBuilderService, BaseChartComponent, BaseColumnComponent, BaseComponent, BaseDatePicker, BaseDateValueAccessor, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CHART_DEFAULTS_OPTIONS, CHART_MAIN_COLOR, CHECKBOX_TEMPLATE, COLORS_COUNT, COMPARISON_OPERATOR, CONFIG_EDITOR_MODE, CUSTOM_FIELD_TYPES, CUSTOM_TEMPLATE, CachingExpiryUnit, CalendarService, CallApiService, CardComponent, CardModule, ChartComponent, ChartDataService, ChartDataTransformers, index$1 as ChartDefaults, ChartManagerService, ChartPanel, ChartPanelFooterComponent, ChartPanelHeaderComponent, ChartPanelModule, index as ChartPlugins, ChartPluginsRegistry, index$2 as ChartUtils, ChartsModule, CheckConditionPipe, CheckboxTemplateDirective, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfigEditorActionsComponent, ConfigPreviewComponent, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ConnectionLabelComponent, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CopyToClipboardDirective, CopyToClipboardModule, CorrespondenceRelationComponent, CorrespondenceRelationCreateFormComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomFieldComponent, CustomMomentDateAdapter, CustomPpViewerComponent, CustomSocketComponent, CustomTemplateDirective, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DATE_LIST_TEMPLATE, DATE_LIST_VIEW, DATE_LOCALE_KEYS, DATE_TYPE, DEFAULT_DEBOUNCE_TIME, DEFAULT_VIEW, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DROPDOWN_LABEL_TEMPLATE, DROPDOWN_MULTI_LABEL_TEMPLATE, DROPDOWN_TEMPLATE, DataChartComponent, DataViewerComponent, DateFormatterService, DateHelperService, DateListTemplateDirective, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramUtils, DiagramsModule, DialogMangmentService, DigitChartService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownLabelTemplateDirective, DropdownMultiLabelTemplateDirective, DropdownTemplateDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicCustomComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicTimelineReportService, DynamicViewModule, EMPTY_TEMPLATE, ENTITY_TYPE, EXTENSION_JSONS, EditDeleteModalComponent, EditorModeSwitchComponent, EditorSettingsComponent, ElementHeightDirective, ElementHeightModule, EmptyTemplateDirective, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FIELD_SEND_MODE, FIELD_TYPE, FILTER_CUSTOM_TEMPLATE, FILTER_DATES_TYPE, FieldHeaderComponent, FieldValueObject, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterAutocompleteInputComponent, FilterCollapseControlComponent, FilterComponent, FilterCustomTemplateDirective, FilterDateRangeComponent, FilterEmptyMessageComponent, FilterModule, FilterOptionTextComponent, FilterOptionsSortComponent, FilterPipe, FilterQueryService, FilterSearchInputComponent, FiltersByRolesPipe, FiltersMapperService, FiltersPanelComponent, FluidHeightDirective, FluidHeightModule, FolderModalComponent, FolderishType, FormBuilderService, GREGORIAN_DATE_FORMATS, GREGORIAN_FORMAT, GatewayNodeComponent, GatewayPortsComponent, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HIJRI_DATE_ARABIC_NAMES, HIJRI_DATE_ENGLISH_NAMES, HIJRI_DATE_FORMATS, HIJRI_FORMAT, HashTranslateAsyncPipe, HashTranslatePipe, HijriAdapterService, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, HtmlDialogComponent, IN_OUT_DIRECTION, IconService, InfoDialogComponent, InitializationService, InputDateComponent, InputPort, InputRangeDateComponent, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizeState, LocalizedDatePipe, LocalizedLabelPipe, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY, MESSAGE_TYPE, MIN_VISIBLE_COUNT, MONACO_EDITOR_CONFIG, MY_MOMENT_FORMATS, MainfolderService, MessageService, ModeTogglerComponent, MomentDateAdapter, MonacoEditorComponent, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NDF_EDITOR_TYPE, NODE_CIRCLE_SIZE, NODE_GATEWAY_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfigEditorComponent, NdfConfigEditorModule, NdfConfirmationDialogComponent, NdfDatepickerComponent, NdfDatepickerModule, NdfFiltersPanelModule, NdfGregorianDatepickerComponent, NdfHijriDatepickerComponent, NdfNuxeoDialog, NdfPanelComponent, NdfPanelModule, NdfReportComponent, NdfReportsComponent, NdfReportsModule, NdfReportsService, NdfTableComponent, NdfTableConfigurationService, NdfTableModule, NdfTableService, NdfTabsComponent, NdfTabsModule, NdfTransformService, NgxHijriGregorianDatepickerModule, NoDataComponent, NoDataFoundComponent, NoDataModule, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NodePortsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, NxQL, NxQlQuery, OutputPort, PAGINATION_MODE, PANEL_MODE, PARAMS_KEYS, PREDICATE_FIELD_TYPES, PROJECT_BASE_HREF, PageSizesListComponent, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PredicateDateInputComponent, PredicateFieldComponent, PredicateTextInputComponent, PublishDialogComponent, PublishingDocumentService, RADIO_TEMPLATE, RadioTemplateDirective, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, ReportConfigMapperService, ReportTransformService, ReportsStateService, RolesService, SEARCH_TABLE_TEMPLATE, SOCKET_WIDTH, SUBSCRIPTION_STATE, SWITCH_TEMPLATE, SafeHtmlPipe, SanitizerPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SearchTableTemplateDirective, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SilentPdfTronService, SingleActivityComponent, SkeletonComponent, SkeletonModule, Socket, SortListPipe, SortingListComponent, SpellCheckerFieldModule, SpellCheckerTextFieldComponent, SpinnerComponent, StatisticService, StatusIconComponent, SwitchTemplateDirective, TRANSLATION_PROVIDER, TableColumnsTogglerComponent, TableComponent, TableExportComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TextSearchComponent, TimeAgoPipe, ToastsModule, TooltipPipe, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VALUE_OBJECT, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getChartsOptions, getConnections, getDoughnutOptions, getHorizontalBarOptions, getLineOptions, getPieOptions, getRandomNumber, getValue, getVerticalBarOptions, isDateObject, isFieldValueObject, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeEmptyKeys, removeNode, removeNodeAndConnections, serializeControl, serializePort, slideAnimation, sortByOrder };
 //# sourceMappingURL=nuxeo-development-framework.js.map