nuxeo-development-framework 5.8.0 → 5.8.2

package/fesm2015/nuxeo-development-framework.js

@@ -11,7 +11,7 @@ import * as i1$5 from '@angular/router';
 import { ActivatedRoute, Router, RouterModule, NavigationStart, RoutesRecognized } from '@angular/router';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule, TranslateStore, TranslateLoader } from '@ngx-translate/core';
-import { map, distinctUntilChanged, takeUntil, catchError, take, tap, switchMap, first, delay, retry, expand, last, debounceTime, filter as filter$1, finalize, startWith, mergeMap, toArray, reduce, concatMap } from 'rxjs/operators';
+import { map, distinctUntilChanged, takeUntil, catchError, take, tap, switchMap, first, delay, retry, expand, last, debounceTime, filter as filter$1, finalize, startWith, mergeMap, toArray, reduce, concatMap, retryWhen } from 'rxjs/operators';
 import { BehaviorSubject, Subject, ReplaySubject, iif, of, combineLatest, Observable, from, forkJoin, isObservable, pipe, EMPTY, concat, fromEvent, interval, throwError } from 'rxjs';
 import { trigger, state, style, transition, animate, AUTO_STYLE, animation, useAnimation } from '@angular/animations';
 import * as i1$1 from 'ngx-toastr';
@@ -26,7 +26,7 @@ import * as i3 from 'ngx-cookie-service';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3$1 from '@angular/material/progress-spinner';
+import * as i6 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -47,9 +47,9 @@ import * as i9 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i3$2 from '@angular/material/menu';
+import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i6 from 'angular-ng-autocomplete';
+import * as i6$1 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';
@@ -61,7 +61,7 @@ import * as i1$7 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i7$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i6$1 from '@angular/material/expansion';
+import * as i6$2 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,11 +75,11 @@ 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$2 from '@busacca/ng-pick-datetime';
+import * as i6$3 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';
-import { Components, FormBuilderComponent, registerCustomFormioComponent, FormioModule } from 'angular-formio';
+import * as i3$2 from 'angular-formio';
+import { Components, FormBuilderComponent, registerCustomFormioComponent, FormioModule, FormioUtils } from 'angular-formio';
 import * as i1$a from 'ngx-treeview';
 import { TreeviewItem, DefaultTreeviewI18n, TreeviewConfig, TreeviewHelper, TreeviewI18n, DropdownTreeviewComponent, TreeviewModule } from 'ngx-treeview';
 import * as i1$8 from '@ng-bootstrap/ng-bootstrap';
@@ -139,8 +139,11 @@ 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$3 from '@angular/cdk/accordion';
+import * as i6$4 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
+import _flatMap from 'lodash/flatMap';
+import * as i1$e from '@angular/material/bottom-sheet';
+import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetModule } from '@angular/material/bottom-sheet';
 
 class NuxeoDevelopmentFrameworkComponent {
     constructor() { }
@@ -1866,7 +1869,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", bodyClass: "bodyClass", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div SetDirRtl class=\"ndf-dialog-wrapper flex flex-col h-full\" [class]=\"data?.dialogConfig?.panelClass ?? panelClass\">\r\n\t<div\r\n\t\tclass=\"dialog-header flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7\"\r\n\t>\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\">{{ data?.dialogConfig?.subTitle || subTitle }}</span>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\"> </mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div\r\n\t\t#dialogBody\r\n\t\tclass=\"dialog-body flex flex-col {{bodyClass}} overflow-y-auto relative z-99\"\r\n\t\t[ngClass]=\"{'overflow-hidden': loading}\"\r\n\t>\r\n\t\t<ng-container *ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate ; context: { dialog: this }\"></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div class=\"ndf-dialog-overlay z-999\" [ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"ndf-dialog-loader z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner [value]=\"90\" [strokeWidth]=\"4\" overlay=\"true\" [diameter]=\"40\" color=\"primary\"> </mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"block w-full h-px absolute inset-0 z-9999\" *ngIf=\"loaderMode === 'progressBar'\">\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-between p-6 pt-0 gap-x-4\">\r\n\t\t<span>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"footerTemplate; context: { dialog: this }\"></ng-container>\r\n\t\t</span>\r\n\t\t<span class=\"flex gap-x-4\">\r\n\t\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">{{\"BUTTONS.CANCEL\" | translate}}</button>\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t\t></ng-container>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper .dialog-body{height:100%;max-height:var(--dialog-body-max-height, calc(100vh - 208px))}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay,.ndf-dialog-wrapper .dialog-body .ndf-dialog-loader{display:flex;width:100%;height:100%;align-items:center;justify-content:center;position:absolute;left:0px;bottom:0px;right:0px}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay{background-color:#cbd5e166}:host{height:100%;display:block}\n"], components: [{ type: i2$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 } });
+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", bodyClass: "bodyClass", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div SetDirRtl class=\"ndf-dialog-wrapper flex flex-col h-full\" [class]=\"data?.dialogConfig?.panelClass ?? panelClass\">\r\n\t<div\r\n\t\tclass=\"dialog-header flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7\"\r\n\t>\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\">{{ data?.dialogConfig?.subTitle || subTitle }}</span>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\"> </mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div\r\n\t\t#dialogBody\r\n\t\tclass=\"dialog-body flex flex-col {{bodyClass}} overflow-y-auto relative z-99\"\r\n\t\t[ngClass]=\"{'overflow-hidden': loading}\"\r\n\t>\r\n\t\t<ng-container *ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate ; context: { dialog: this }\"></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div class=\"ndf-dialog-overlay z-999\" [ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"ndf-dialog-loader z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner [value]=\"90\" [strokeWidth]=\"4\" overlay=\"true\" [diameter]=\"40\" color=\"primary\"> </mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"block w-full h-px absolute inset-0 z-9999\" *ngIf=\"loaderMode === 'progressBar'\">\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-between p-6 pt-0 gap-x-4\">\r\n\t\t<span>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"footerTemplate; context: { dialog: this }\"></ng-container>\r\n\t\t</span>\r\n\t\t<span class=\"flex gap-x-4\">\r\n\t\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">{{\"BUTTONS.CANCEL\" | translate}}</button>\r\n\t\t\t<ng-container\r\n\t\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t\t></ng-container>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper .dialog-body{height:100%;max-height:var(--dialog-body-max-height, calc(100vh - 208px))}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay,.ndf-dialog-wrapper .dialog-body .ndf-dialog-loader{display:flex;width:100%;height:100%;align-items:center;justify-content:center;position:absolute;left:0px;bottom:0px;right:0px}.ndf-dialog-wrapper .dialog-body .ndf-dialog-overlay{background-color:#cbd5e166}:host{height:100%;display:block}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.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: [{
@@ -3919,7 +3922,7 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonComponent, selector: "cts-button", inputs: { disabled: "disabled", loading: "loading", size: "size", theme: "theme", spinnerTheming: "spinnerTheming" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<button\r\ntype=\"button\"\r\nclass=\"btn\"\r\n  mat-button\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"emitClick()\"\r\n  [ngClass]=\"this.classes\"\r\n>\r\n  <ng-content *ngIf=\"!loading; else spinner\"></ng-content>\r\n  <ng-template #spinner>\r\n    <mat-spinner class=\"spinner\" [diameter]=\"25\" [color]=\"spinnerTheming\"></mat-spinner>\r\n  </ng-template>\r\n</button>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.btn.submitting,.btn.outline-dark,.btn.light-gray,.btn.gray,.btn.dark,.btn.danger,.btn.green,.btn.blue,.btn.primary,.my-base-class{color:#fff;width:100%;border:1px solid transparent;padding:6px 12px;overflow:hidden;min-width:max-content;border-radius:5px}.btn.submitting:hover,.btn.outline-dark:hover,.btn.light-gray:hover,.btn.gray:hover,.btn.dark:hover,.btn.danger:hover,.btn.green:hover,.btn.blue:hover,.btn.primary:hover,.my-base-class:hover{filter:brightness(92%)}.btn.primary{background-image:linear-gradient(to right,#0dbab5,#1a96c6)}.btn.rtl.primary{background-image:linear-gradient(to left,#0dbab5,#1a96c6)}.btn.blue{background-color:#3c3cf0}.btn.green{background-color:#00dca5}.btn.danger{background-color:#fd6670}.btn.dark{background-color:#465573}.btn.gray{background-color:#6a768e;border:none}.btn.light-gray{background-color:#d9dce2;color:#465573;border:none}.btn.outline-dark{background-color:#fff;border:1px solid #8f98aa;color:#465573}.btn.outline-dark:hover{background-color:#8f98aa;color:#fff}.btn.large{height:50px}.btn.regular{height:40px}.btn.small{height:30px}.btn.submitting{background:#d7d7d7!important;border:1px solid #b4bac6}.btn.spinner{margin:auto}.btn.disabled{opacity:.5}.btn:focus{background:#2cbddd}\n"], components: [{ type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ButtonComponent, selector: "cts-button", inputs: { disabled: "disabled", loading: "loading", size: "size", theme: "theme", spinnerTheming: "spinnerTheming" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<button\r\ntype=\"button\"\r\nclass=\"btn\"\r\n  mat-button\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"emitClick()\"\r\n  [ngClass]=\"this.classes\"\r\n>\r\n  <ng-content *ngIf=\"!loading; else spinner\"></ng-content>\r\n  <ng-template #spinner>\r\n    <mat-spinner class=\"spinner\" [diameter]=\"25\" [color]=\"spinnerTheming\"></mat-spinner>\r\n  </ng-template>\r\n</button>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.btn.submitting,.btn.outline-dark,.btn.light-gray,.btn.gray,.btn.dark,.btn.danger,.btn.green,.btn.blue,.btn.primary,.my-base-class{color:#fff;width:100%;border:1px solid transparent;padding:6px 12px;overflow:hidden;min-width:max-content;border-radius:5px}.btn.submitting:hover,.btn.outline-dark:hover,.btn.light-gray:hover,.btn.gray:hover,.btn.dark:hover,.btn.danger:hover,.btn.green:hover,.btn.blue:hover,.btn.primary:hover,.my-base-class:hover{filter:brightness(92%)}.btn.primary{background-image:linear-gradient(to right,#0dbab5,#1a96c6)}.btn.rtl.primary{background-image:linear-gradient(to left,#0dbab5,#1a96c6)}.btn.blue{background-color:#3c3cf0}.btn.green{background-color:#00dca5}.btn.danger{background-color:#fd6670}.btn.dark{background-color:#465573}.btn.gray{background-color:#6a768e;border:none}.btn.light-gray{background-color:#d9dce2;color:#465573;border:none}.btn.outline-dark{background-color:#fff;border:1px solid #8f98aa;color:#465573}.btn.outline-dark:hover{background-color:#8f98aa;color:#fff}.btn.large{height:50px}.btn.regular{height:40px}.btn.small{height:30px}.btn.submitting{background:#d7d7d7!important;border:1px solid #b4bac6}.btn.spinner{margin:auto}.btn.disabled{opacity:.5}.btn:focus{background:#2cbddd}\n"], components: [{ type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -3997,7 +4000,7 @@ class SpinnerComponent {
     }
 }
 SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SpinnerComponent, selector: "cts-spinner", ngImport: i0, template: "<div class=\"spiner-container\">\r\n  <mat-spinner\r\n    [value]=\"90\"\r\n    [strokeWidth]=\"3\"\r\n    overlay=\"true\"\r\n    [diameter]=\"25\"\r\n    color=\"warn\"\r\n  >\r\n  </mat-spinner>\r\n</div>\r\n", styles: [".spiner-container{position:absolute;bottom:12px;width:100%;display:flex;justify-content:flex-start}.spiner-container mat-spinner{position:relative}\n"], components: [{ type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }] });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SpinnerComponent, selector: "cts-spinner", ngImport: i0, template: "<div class=\"spiner-container\">\r\n  <mat-spinner\r\n    [value]=\"90\"\r\n    [strokeWidth]=\"3\"\r\n    overlay=\"true\"\r\n    [diameter]=\"25\"\r\n    color=\"warn\"\r\n  >\r\n  </mat-spinner>\r\n</div>\r\n", styles: [".spiner-container{position:absolute;bottom:12px;width:100%;display:flex;justify-content:flex-start}.spiner-container mat-spinner{position:relative}\n"], components: [{ type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{
@@ -4093,7 +4096,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: 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 });
+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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$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: [{
@@ -4692,7 +4695,7 @@ class CommentsListComponent {
     }
 }
 CommentsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentsListComponent, deps: [{ token: CommentApiService }], target: i0.ɵɵFactoryTarget.Component });
-CommentsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentsListComponent, selector: "app-comments-list", inputs: { entityId: "entityId", pageSize: "pageSize", loaderType: "loaderType", showCommentActions: "showCommentActions" }, viewQueries: [{ propertyName: "scrollDiv", first: true, predicate: ["scrollDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"comments.length !== 0\"\r\n  class=\"scroll-div overflow-auto dark-scroll\"\r\n  #scrollDiv\r\n  infinite-scroll\r\n  [scrollWindow]=\"false\"\r\n  [infiniteScrollDistance]=\"distance\"\r\n  [infiniteScrollDisabled]=\"infiniteScrollDisabled\"\r\n  [infiniteScrollThrottle]=\"throttle\"\r\n  (scrolled)=\"onScroll($event)\"\r\n>\r\n  <app-comment-item\r\n    [loaderType]=\"loaderType\"\r\n    class=\"mb-2\"\r\n    *ngFor=\"let comment of comments\"\r\n    [comment]=\"comment\"\r\n    [showCommentActions]=\"showCommentActions\"\r\n    (refreshCommentList)=\"refreshList()\"\r\n  >\r\n  </app-comment-item>\r\n  <div *ngIf=\"fetching && loaderType === 'scroll'\">\r\n    <mat-spinner [diameter]=\"30\"></mat-spinner>\r\n  </div>\r\n  <div\r\n    class=\"button-wrapper\"\r\n    *ngIf=\"!infiniteScrollDisabled && loaderType === 'button'\"\r\n  >\r\n    <cts-button\r\n      [theme]=\"'outline-dark'\"\r\n      [size]=\"'regular'\"\r\n      (onClick)=\"onScroll($event)\"\r\n      [loading]=\"fetching\"\r\n    >\r\n      {{ \"comment.loadMore\" | translate }}\r\n    </cts-button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"comments.length === 0 && !fetching\"\r\n  class=\"No-Items flex justify-center\"\r\n>\r\n  <cts-no-data img=\"assets/images/empty-state/empty-comments.png\" [message]=\"'comment.nocomment'\"></cts-no-data>\r\n</div>\r\n", styles: [".text-style{color:#fff}.containerHeight{min-height:400px;max-height:auto}.titleStyle{font-size:24px}.padding-50{padding:50px}.p-20px{padding:20px}.mt-33{margin-top:33px}.mt-24px{margin-top:24px}.mb-20px{margin-bottom:20px}.mb-30{margin-bottom:30px}.mt-30{margin-top:30px}.avatar{width:40px;height:40px;border-radius:50%}.btn{width:123px;height:40px}.submibtn{width:171px;height:40px}.btnText{font-size:14px;color:#fff}.CardFont{font-size:14px}.border{border-width:1px}.gridContainer{display:grid;grid-template-columns:40px auto;grid-column-gap:5px;column-gap:5px;margin-bottom:20px}.container{height:110px}.mat-grid-tile{background-color:#00f}.avatarContainer{height:40px;width:40px}.col .containerHeight{min-height:260px;max-height:auto}.gap-40px{grid-row-gap:40px;row-gap:40px}.scroll-div{max-height:100%;display:flex;flex-direction:column;flex:1}.button-wrapper{width:150px}.comment-spinner{width:100%;display:grid;place-items:center}\n"], components: [{ type: CommentItemComponent, selector: "app-comment-item", inputs: ["comment", "loaderType", "showCommentActions"], outputs: ["refreshCommentList"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border", "img"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+CommentsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentsListComponent, selector: "app-comments-list", inputs: { entityId: "entityId", pageSize: "pageSize", loaderType: "loaderType", showCommentActions: "showCommentActions" }, viewQueries: [{ propertyName: "scrollDiv", first: true, predicate: ["scrollDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"comments.length !== 0\"\r\n  class=\"scroll-div overflow-auto dark-scroll\"\r\n  #scrollDiv\r\n  infinite-scroll\r\n  [scrollWindow]=\"false\"\r\n  [infiniteScrollDistance]=\"distance\"\r\n  [infiniteScrollDisabled]=\"infiniteScrollDisabled\"\r\n  [infiniteScrollThrottle]=\"throttle\"\r\n  (scrolled)=\"onScroll($event)\"\r\n>\r\n  <app-comment-item\r\n    [loaderType]=\"loaderType\"\r\n    class=\"mb-2\"\r\n    *ngFor=\"let comment of comments\"\r\n    [comment]=\"comment\"\r\n    [showCommentActions]=\"showCommentActions\"\r\n    (refreshCommentList)=\"refreshList()\"\r\n  >\r\n  </app-comment-item>\r\n  <div *ngIf=\"fetching && loaderType === 'scroll'\">\r\n    <mat-spinner [diameter]=\"30\"></mat-spinner>\r\n  </div>\r\n  <div\r\n    class=\"button-wrapper\"\r\n    *ngIf=\"!infiniteScrollDisabled && loaderType === 'button'\"\r\n  >\r\n    <cts-button\r\n      [theme]=\"'outline-dark'\"\r\n      [size]=\"'regular'\"\r\n      (onClick)=\"onScroll($event)\"\r\n      [loading]=\"fetching\"\r\n    >\r\n      {{ \"comment.loadMore\" | translate }}\r\n    </cts-button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"comments.length === 0 && !fetching\"\r\n  class=\"No-Items flex justify-center\"\r\n>\r\n  <cts-no-data img=\"assets/images/empty-state/empty-comments.png\" [message]=\"'comment.nocomment'\"></cts-no-data>\r\n</div>\r\n", styles: [".text-style{color:#fff}.containerHeight{min-height:400px;max-height:auto}.titleStyle{font-size:24px}.padding-50{padding:50px}.p-20px{padding:20px}.mt-33{margin-top:33px}.mt-24px{margin-top:24px}.mb-20px{margin-bottom:20px}.mb-30{margin-bottom:30px}.mt-30{margin-top:30px}.avatar{width:40px;height:40px;border-radius:50%}.btn{width:123px;height:40px}.submibtn{width:171px;height:40px}.btnText{font-size:14px;color:#fff}.CardFont{font-size:14px}.border{border-width:1px}.gridContainer{display:grid;grid-template-columns:40px auto;grid-column-gap:5px;column-gap:5px;margin-bottom:20px}.container{height:110px}.mat-grid-tile{background-color:#00f}.avatarContainer{height:40px;width:40px}.col .containerHeight{min-height:260px;max-height:auto}.gap-40px{grid-row-gap:40px;row-gap:40px}.scroll-div{max-height:100%;display:flex;flex-direction:column;flex:1}.button-wrapper{width:150px}.comment-spinner{width:100%;display:grid;place-items:center}\n"], components: [{ type: CommentItemComponent, selector: "app-comment-item", inputs: ["comment", "loaderType", "showCommentActions"], outputs: ["refreshCommentList"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border", "img"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { 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: CommentsListComponent, decorators: [{
             type: Component,
             args: [{
@@ -4906,7 +4909,7 @@ class ConfirmCallerDialogComponent {
     }
 }
 ConfirmCallerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConfirmCallerDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$3.MatDialogRef }, { token: CustomToastrService }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmCallerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConfirmCallerDialogComponent, selector: "ng-component", host: { classAttribute: "confirm-caller" }, ngImport: i0, template: "<div class=\"iner-dialog-wraper\" [dir]=\"'dir' | translate\">\r\n  <h1 class=\"dialog-title\">{{data.title | translate}}</h1>\r\n  <div class=\"dialog-message\">\r\n    <div>{{data.message | translate}}</div>\r\n  </div>\r\n\r\n  <div mat-dialog-actions>\r\n  <!--   <cts-button\r\n      [theme]=\"'primary'\"\r\n      [size]=\"'regular'\"\r\n      [disabled]=\"calling\"\r\n      (onClick)=\"makeCall()\"\r\n    >\r\n      {{ 'Yes' | translate}}\r\n    </cts-button> -->\r\n\r\n    <button class=\"btn confirm centering-element\" [disabled]=\"calling\"\r\n    (click)=\"makeCall()\">\r\n    <span *ngIf=\"!calling\">\r\n      {{ 'Yes' | translate}}\r\n    </span>\r\n    <mat-spinner class=\"spinner\" color=\"warn\" [diameter]=\"25\" *ngIf=\"calling\"></mat-spinner>\r\n    </button>\r\n\r\n    <button class=\"btn btn-light\" [mat-dialog-close]=\"false\">\r\n      {{'Cancel' | translate}}\r\n    </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}.aca-file-version-upload-dialog{overflow:unset}.aca-file-version-upload-dialog .dialog-actions{justify-content:flex-end}.aca-file-version-upload-dialog .dialog-actions button{text-transform:uppercase}.aca-file-version-upload-dialog .file-version-dialog__title{padding-left:8px}.dialog-title{font-size:20px;text-align:center}.mat-dialog-actions{display:flex;justify-content:center}.mat-dialog-actions .btn{width:90px;margin:0 5px;min-width:70px}.mat-dialog-actions .confirm{background-image:linear-gradient(to bottom,#0dbab5,#2e62df);color:#fff}.mat-dialog-actions .centering-element{display:flex;justify-content:center}\n"], components: [{ type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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 });
+ConfirmCallerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConfirmCallerDialogComponent, selector: "ng-component", host: { classAttribute: "confirm-caller" }, ngImport: i0, template: "<div class=\"iner-dialog-wraper\" [dir]=\"'dir' | translate\">\r\n  <h1 class=\"dialog-title\">{{data.title | translate}}</h1>\r\n  <div class=\"dialog-message\">\r\n    <div>{{data.message | translate}}</div>\r\n  </div>\r\n\r\n  <div mat-dialog-actions>\r\n  <!--   <cts-button\r\n      [theme]=\"'primary'\"\r\n      [size]=\"'regular'\"\r\n      [disabled]=\"calling\"\r\n      (onClick)=\"makeCall()\"\r\n    >\r\n      {{ 'Yes' | translate}}\r\n    </cts-button> -->\r\n\r\n    <button class=\"btn confirm centering-element\" [disabled]=\"calling\"\r\n    (click)=\"makeCall()\">\r\n    <span *ngIf=\"!calling\">\r\n      {{ 'Yes' | translate}}\r\n    </span>\r\n    <mat-spinner class=\"spinner\" color=\"warn\" [diameter]=\"25\" *ngIf=\"calling\"></mat-spinner>\r\n    </button>\r\n\r\n    <button class=\"btn btn-light\" [mat-dialog-close]=\"false\">\r\n      {{'Cancel' | translate}}\r\n    </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}.aca-file-version-upload-dialog{overflow:unset}.aca-file-version-upload-dialog .dialog-actions{justify-content:flex-end}.aca-file-version-upload-dialog .dialog-actions button{text-transform:uppercase}.aca-file-version-upload-dialog .file-version-dialog__title{padding-left:8px}.dialog-title{font-size:20px;text-align:center}.mat-dialog-actions{display:flex;justify-content:center}.mat-dialog-actions .btn{width:90px;margin:0 5px;min-width:70px}.mat-dialog-actions .confirm{background-image:linear-gradient(to bottom,#0dbab5,#2e62df);color:#fff}.mat-dialog-actions .centering-element{display:flex;justify-content:center}\n"], components: [{ type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ConfirmCallerDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -5672,7 +5675,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", "emitVocabulryRecordOnSelect"], 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 });
+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", "emitVocabulryRecordOnSelect"], 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$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: [{
@@ -6157,7 +6160,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$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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationListComponent, decorators: [{
             type: Component,
             args: [{
@@ -6382,7 +6385,7 @@ class VersionsComponent {
     }
 }
 VersionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: VersionsComponent, deps: [{ token: ViewerFilesService }, { token: TranslationService }, { token: DocumentsService }], target: i0.ɵɵFactoryTarget.Component });
-VersionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: VersionsComponent, selector: "cts-versions", inputs: { selectedVersion: "selectedVersion", file: "file", actions: "actions", currentTranslation: "currentTranslation", originTranslation: "originTranslation", historyTranslation: "historyTranslation", showUserCard: "showUserCard" }, outputs: { handleActions: "handleActions" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col\">\r\n<div class=\"viewer-attachments\">\r\n  <div class=\"subheader\">\r\n    <div> {{ currentTranslation | translate }}</div>\r\n\r\n  </div>\r\n  <div class=\"attachments-list\">\r\n    <mat-list>\r\n      <div class=\"mat-list-items\">\r\n        <cts-item-list [item]=\"file\" [title]=\"file.title\" [iconname]=\"'description'\" [moreclasses]=\"'text-danger'\"\r\n          [actions]=\"actions\" (itemClicked)=\"showVersion(file)\" (actionclicked)=\"handleAction($event)\">\r\n          <div class=\"description\">\r\n            <div class=\"file-size\">\r\n              {{ getFileSize(file)}}\r\n             </div>\r\n            {{getVersion(file)}}\r\n            -\r\n            {{ file.lastModified | localizedDate : '' : (isArabic? 'ar-AR' : 'en-US') }}\r\n          </div>\r\n        </cts-item-list>\r\n      </div>\r\n    </mat-list>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"viewer-attachments original-section\" *ngIf=\"versions.length > 0\" >\r\n  <div class=\"subheader\">\r\n    <div>{{ originTranslation | translate }}</div>\r\n  </div>\r\n  <div class=\"attachments-list\">\r\n    <mat-list>\r\n      <div class=\"mat-list-items\">\r\n        <cts-item-list [item]=\"versions[versions.length -1]\" [title]=\"versions[versions.length -1].title\"\r\n          [iconname]=\"'description'\" [moreclasses]=\"'text-danger'\" [actions]=\"actions\"\r\n          (itemClicked)=\"showVersion(versions[versions.length -1])\" (actionclicked)=\"handleAction($event)\">\r\n\r\n        </cts-item-list>\r\n      </div>\r\n    </mat-list>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"viewer-attachments\" [ngClass]=\"{'viewer-attachment-with-user-card' : showUserCard}\" *permission=\"{name: 'viewVersions', entity: file}\">\r\n  <div class=\"subheader\">\r\n    <div> {{ historyTranslation | translate }}</div>\r\n\r\n  </div>\r\n  <div class=\"attachments-list\" *ngIf=\"versions.length > 0\">\r\n    <ng-container>\r\n     <mat-list>\r\n        <div class=\"mat-list-items\" *ngFor=\"let version of versions ;let cnt = count; let i = index\">\r\n          <cts-item-list [item]=\"version\" [title]=\"version.title + '-' + getVersion(version)\" [iconname]=\"'description'\"\r\n            [moreclasses]=\"'text-danger'\" (itemClicked)=\"showVersion(version)\" [actions]=\"actions\" (actionclicked)=\"handleAction($event)\">\r\n            <div class=\"description\">\r\n              <div class=\"file-size\">\r\n                {{ getFileSize(version)}}\r\n               </div>\r\n              {{getVersion(version)}}\r\n              -\r\n              {{ version.lastModified | localizedDate : '' : (isArabic? 'ar-AR' : 'en-US') }}\r\n              <span class=\"version-contributor font-weight-bold\">\r\n\r\n                {{\r\n                version.properties.lastContributor.id === 'system' ?\r\n                ('SYSTEM_ADMIN' | translate) : (\r\n                  isArabic ? (version.properties.lastContributor.fullNameAr ? version.properties.lastContributor.fullNameAr : (version.properties.lastContributor.properties.firstName + \" \" + version.properties.lastContributor.properties.lastName)) : \r\n                  ( version.properties.lastContributor.properties.firstName + \" \" + version.properties.lastContributor.properties.lastName)\r\n                )\r\n                }}\r\n                <div class=\"contributor-card-details\" (click)=\"$event.stopPropagation()\" *ngIf=\"showUserCard\">\r\n                  <div class=\"user-img\">\r\n                      <img class=\"user-avatar\" [src]=\"version.properties.lastContributor.avatar\">\r\n                  </div>\r\n                  <div class=\"user-details\">\r\n                      <div class=\"user-name\">{{isArabic  ? version.properties.lastContributor.fullNameAr : version.properties.lastContributor.fullName}}</div>\r\n                      <div class=\"user-position\">{{(isArabic && version.properties.lastContributor.jobGradeAr) ? version.properties.lastContributor.jobGradeAr : (version.properties.lastContributor.jobGrade ? version.properties.lastContributor.jobGrade : '--')}}</div>\r\n                  </div>\r\n              </div>\r\n              </span>\r\n            </div>\r\n          </cts-item-list>\r\n        </div>\r\n      </mat-list>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"version-loading\" *ngIf=\"fetching\">\r\n    <mat-spinner color=\"warn\" [diameter]=\"25\"></mat-spinner>\r\n  </div>\r\n  <div  *ngIf=\"(!fetching && versions.length === 0)\">\r\n    <cts-no-data></cts-no-data>\r\n  </div>\r\n</div>\r\n</div>\r\n<ng-template #noEntry>\r\n\r\n</ng-template>", styles: [".viewer-attachments .attachments-list .version-contributor{position:relative}.viewer-attachments .attachments-list .version-contributor .contributor-card-details{position:absolute;z-index:99999;display:none;min-width:250px;padding:28px 16px;align-items:center;grid-gap:8px;gap:8px;border-radius:4px;background:#FFF;cursor:default;box-shadow:0 -1px 4px #1c34541a,0 1px 4px -1px #1c345426}.viewer-attachments .attachments-list .version-contributor .contributor-card-details .user-img img{width:40px;height:40px;min-width:40px;border-radius:48px;border:1px solid var(--Outline-Card, #DCDCE4)}.viewer-attachments .attachments-list .version-contributor .contributor-card-details .user-details{text-align:start}.viewer-attachments .attachments-list .version-contributor .contributor-card-details .user-details .user-name{color:#234990;font-size:14px;font-family:\"semiBoldPoppins\";font-weight:bold}.viewer-attachments .attachments-list .version-contributor .contributor-card-details .user-details .user-position{color:#5d6481;font-size:12px}.viewer-attachments .attachments-list .version-contributor:hover .contributor-card-details{display:flex}.viewer-attachments .attachments-list .mat-list-items .description .file-size{display:none}.viewer-attachments .version-loading{display:flex;justify-content:center;padding:10px 0}\n"], components: [{ 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"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border", "img"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe } });
+VersionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: VersionsComponent, selector: "cts-versions", inputs: { selectedVersion: "selectedVersion", file: "file", actions: "actions", currentTranslation: "currentTranslation", originTranslation: "originTranslation", historyTranslation: "historyTranslation", showUserCard: "showUserCard" }, outputs: { handleActions: "handleActions" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col\">\r\n<div class=\"viewer-attachments\">\r\n  <div class=\"subheader\">\r\n    <div> {{ currentTranslation | translate }}</div>\r\n\r\n  </div>\r\n  <div class=\"attachments-list\">\r\n    <mat-list>\r\n      <div class=\"mat-list-items\">\r\n        <cts-item-list [item]=\"file\" [title]=\"file.title\" [iconname]=\"'description'\" [moreclasses]=\"'text-danger'\"\r\n          [actions]=\"actions\" (itemClicked)=\"showVersion(file)\" (actionclicked)=\"handleAction($event)\">\r\n          <div class=\"description\">\r\n            <div class=\"file-size\">\r\n              {{ getFileSize(file)}}\r\n             </div>\r\n            {{getVersion(file)}}\r\n            -\r\n            {{ file.lastModified | localizedDate : '' : (isArabic? 'ar-AR' : 'en-US') }}\r\n          </div>\r\n        </cts-item-list>\r\n      </div>\r\n    </mat-list>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"viewer-attachments original-section\" *ngIf=\"versions.length > 0\" >\r\n  <div class=\"subheader\">\r\n    <div>{{ originTranslation | translate }}</div>\r\n  </div>\r\n  <div class=\"attachments-list\">\r\n    <mat-list>\r\n      <div class=\"mat-list-items\">\r\n        <cts-item-list [item]=\"versions[versions.length -1]\" [title]=\"versions[versions.length -1].title\"\r\n          [iconname]=\"'description'\" [moreclasses]=\"'text-danger'\" [actions]=\"actions\"\r\n          (itemClicked)=\"showVersion(versions[versions.length -1])\" (actionclicked)=\"handleAction($event)\">\r\n\r\n        </cts-item-list>\r\n      </div>\r\n    </mat-list>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"viewer-attachments\" [ngClass]=\"{'viewer-attachment-with-user-card' : showUserCard}\" *permission=\"{name: 'viewVersions', entity: file}\">\r\n  <div class=\"subheader\">\r\n    <div> {{ historyTranslation | translate }}</div>\r\n\r\n  </div>\r\n  <div class=\"attachments-list\" *ngIf=\"versions.length > 0\">\r\n    <ng-container>\r\n     <mat-list>\r\n        <div class=\"mat-list-items\" *ngFor=\"let version of versions ;let cnt = count; let i = index\">\r\n          <cts-item-list [item]=\"version\" [title]=\"version.title + '-' + getVersion(version)\" [iconname]=\"'description'\"\r\n            [moreclasses]=\"'text-danger'\" (itemClicked)=\"showVersion(version)\" [actions]=\"actions\" (actionclicked)=\"handleAction($event)\">\r\n            <div class=\"description\">\r\n              <div class=\"file-size\">\r\n                {{ getFileSize(version)}}\r\n               </div>\r\n              {{getVersion(version)}}\r\n              -\r\n              {{ version.lastModified | localizedDate : '' : (isArabic? 'ar-AR' : 'en-US') }}\r\n              <span class=\"version-contributor font-weight-bold\">\r\n\r\n                {{\r\n                version.properties.lastContributor.id === 'system' ?\r\n                ('SYSTEM_ADMIN' | translate) : (\r\n                  isArabic ? (version.properties.lastContributor.fullNameAr ? version.properties.lastContributor.fullNameAr : (version.properties.lastContributor.properties.firstName + \" \" + version.properties.lastContributor.properties.lastName)) : \r\n                  ( version.properties.lastContributor.properties.firstName + \" \" + version.properties.lastContributor.properties.lastName)\r\n                )\r\n                }}\r\n                <div class=\"contributor-card-details\" (click)=\"$event.stopPropagation()\" *ngIf=\"showUserCard\">\r\n                  <div class=\"user-img\">\r\n                      <img class=\"user-avatar\" [src]=\"version.properties.lastContributor.avatar\">\r\n                  </div>\r\n                  <div class=\"user-details\">\r\n                      <div class=\"user-name\">{{isArabic  ? version.properties.lastContributor.fullNameAr : version.properties.lastContributor.fullName}}</div>\r\n                      <div class=\"user-position\">{{(isArabic && version.properties.lastContributor.jobGradeAr) ? version.properties.lastContributor.jobGradeAr : (version.properties.lastContributor.jobGrade ? version.properties.lastContributor.jobGrade : '--')}}</div>\r\n                  </div>\r\n              </div>\r\n              </span>\r\n            </div>\r\n          </cts-item-list>\r\n        </div>\r\n      </mat-list>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"version-loading\" *ngIf=\"fetching\">\r\n    <mat-spinner color=\"warn\" [diameter]=\"25\"></mat-spinner>\r\n  </div>\r\n  <div  *ngIf=\"(!fetching && versions.length === 0)\">\r\n    <cts-no-data></cts-no-data>\r\n  </div>\r\n</div>\r\n</div>\r\n<ng-template #noEntry>\r\n\r\n</ng-template>", styles: [".viewer-attachments .attachments-list .version-contributor{position:relative}.viewer-attachments .attachments-list .version-contributor .contributor-card-details{position:absolute;z-index:99999;display:none;min-width:250px;padding:28px 16px;align-items:center;grid-gap:8px;gap:8px;border-radius:4px;background:#FFF;cursor:default;box-shadow:0 -1px 4px #1c34541a,0 1px 4px -1px #1c345426}.viewer-attachments .attachments-list .version-contributor .contributor-card-details .user-img img{width:40px;height:40px;min-width:40px;border-radius:48px;border:1px solid var(--Outline-Card, #DCDCE4)}.viewer-attachments .attachments-list .version-contributor .contributor-card-details .user-details{text-align:start}.viewer-attachments .attachments-list .version-contributor .contributor-card-details .user-details .user-name{color:#234990;font-size:14px;font-family:\"semiBoldPoppins\";font-weight:bold}.viewer-attachments .attachments-list .version-contributor .contributor-card-details .user-details .user-position{color:#5d6481;font-size:12px}.viewer-attachments .attachments-list .version-contributor:hover .contributor-card-details{display:flex}.viewer-attachments .attachments-list .mat-list-items .description .file-size{display:none}.viewer-attachments .version-loading{display:flex;justify-content:center;padding:10px 0}\n"], components: [{ 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"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NoDataComponent, selector: "cts-no-data", inputs: ["message", "border", "img"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: VersionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -6517,7 +6520,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.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$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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SearchAutocompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -8198,7 +8201,7 @@ class DynamicFormBuilderComponent {
     }
 }
 DynamicFormBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormBuilderComponent, selector: "app-dynamic-form-builder", inputs: { form: "form", builder: "builder", builderComponents: "builderComponents" }, outputs: { formUpdated: "formUpdated" }, viewQueries: [{ propertyName: "jsonElement", first: true, predicate: ["json"], descendants: true }, { propertyName: "FormBuilderComponent", first: true, predicate: FormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\" dir=\"ltr\">\r\n  <form-builder [form]=\"form\" [options]=\"builderOptions\" [rebuild]=\"refresher\" (change)=\"onChange($event)\"></form-builder>\r\n  <!-- <button class=\"save-form\" (click)=\"save()\">SAVE</button> -->\r\n  <div class=\"mx-2 save-form\">\r\n    <cts-button\r\n    [loading]=\"saving\"\r\n    [theme]=\"'primary'\"\r\n    [size]=\"'regular'\"\r\n    (onClick)=\"save()\"\r\n    \r\n  >\r\n    {{ \"BUTTONS.SAVE\" | translate }}\r\n  </cts-button>\r\n  </div>\r\n</div>\r\n", styles: [".formio-dialog{direction:ltr;text-align:left}.formio-dialog .card-title{border:0px!important}.builder{text-align:left}.builder div[ref=copyComponent],.builder div[ref=pasteComponent],.builder div[ref=editJson]{display:none;visibility:hidden}.builder .formarea{flex:0 0 75%}.builder .formarea .formio-component .formio-form .builder-component .form-group label{color:#646f85;font-size:13px}.builder .formarea .formio-component .formio-form .builder-component .form-group input{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.builder .formarea .formio-component .formio-form .builder-component .formio-component-vocabulary input{border:none;background:no-repeat;height:40px}.builder .formcomponents{flex:0 0 25%;max-width:25%}.builder .formcomponents .builder-sidebar .form-builder-panel .show .card-body{width:80%}.builder .formcomponents .builder-sidebar .form-builder-panel .show .card-body .formcomponent{width:100%;overflow:hidden;white-space:nowrap!important;text-overflow:ellipsis}.container-fluid .save-form{margin-top:15px;width:200px}\n"], components: [{ type: i3$3.FormBuilderComponent, selector: "form-builder", inputs: ["noeval", "form", "options", "formbuilder", "refresh", "rebuild"], outputs: ["change"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormBuilderComponent, selector: "app-dynamic-form-builder", inputs: { form: "form", builder: "builder", builderComponents: "builderComponents" }, outputs: { formUpdated: "formUpdated" }, viewQueries: [{ propertyName: "jsonElement", first: true, predicate: ["json"], descendants: true }, { propertyName: "FormBuilderComponent", first: true, predicate: FormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\" dir=\"ltr\">\r\n  <form-builder [form]=\"form\" [options]=\"builderOptions\" [rebuild]=\"refresher\" (change)=\"onChange($event)\"></form-builder>\r\n  <!-- <button class=\"save-form\" (click)=\"save()\">SAVE</button> -->\r\n  <div class=\"mx-2 save-form\">\r\n    <cts-button\r\n    [loading]=\"saving\"\r\n    [theme]=\"'primary'\"\r\n    [size]=\"'regular'\"\r\n    (onClick)=\"save()\"\r\n    \r\n  >\r\n    {{ \"BUTTONS.SAVE\" | translate }}\r\n  </cts-button>\r\n  </div>\r\n</div>\r\n", styles: [".formio-dialog{direction:ltr;text-align:left}.formio-dialog .card-title{border:0px!important}.builder{text-align:left}.builder div[ref=copyComponent],.builder div[ref=pasteComponent],.builder div[ref=editJson]{display:none;visibility:hidden}.builder .formarea{flex:0 0 75%}.builder .formarea .formio-component .formio-form .builder-component .form-group label{color:#646f85;font-size:13px}.builder .formarea .formio-component .formio-form .builder-component .form-group input{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.builder .formarea .formio-component .formio-form .builder-component .formio-component-vocabulary input{border:none;background:no-repeat;height:40px}.builder .formcomponents{flex:0 0 25%;max-width:25%}.builder .formcomponents .builder-sidebar .form-builder-panel .show .card-body{width:80%}.builder .formcomponents .builder-sidebar .form-builder-panel .show .card-body .formcomponent{width:100%;overflow:hidden;white-space:nowrap!important;text-overflow:ellipsis}.container-fluid .save-form{margin-top:15px;width:200px}\n"], components: [{ type: i3$2.FormBuilderComponent, selector: "form-builder", inputs: ["noeval", "form", "options", "formbuilder", "refresh", "rebuild"], outputs: ["change"] }, { type: ButtonComponent, selector: "cts-button", inputs: ["disabled", "loading", "size", "theme", "spinnerTheming"], outputs: ["onClick"] }], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormBuilderComponent, decorators: [{
             type: Component,
             args: [{
@@ -8441,7 +8444,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$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 });
+    ], 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormDateItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -8551,14 +8554,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$2.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$3.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$2.DateTimeAdapter }]; } });
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: UserPreferencesService }, { type: i6$3.DateTimeAdapter }]; } });
 
 class DepartmentConstants {
 }
@@ -11782,7 +11785,7 @@ class DynamicFormComponent {
     }
 }
 DynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormComponent, deps: [{ token: FormBuilderService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: { form: "form", data: "data", readOnly: "readOnly" }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\">\r\n    <formio [form]=\"form\" (change)=\"excuteFunction($event)\" [renderOptions]=\"renderOptions\" [language]=\"refresher\" [submission]=\"submission\"></formio>\r\n</div>\r\n", styles: [".app-property-list{padding:0 16px}.app-property-list.no-padding{padding:0}.app-property-list.no-padding .app-property-label{font-size:12px;word-wrap:break-word}.formio-component .formio-form .form-group .col-form-label{color:#646f85;font-size:13px}.formio-component .formio-form .form-group .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}\n"], components: [{ type: i3$3.FormioComponent, selector: "formio" }], encapsulation: i0.ViewEncapsulation.None });
+DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: { form: "form", data: "data", readOnly: "readOnly" }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\">\r\n    <formio [form]=\"form\" (change)=\"excuteFunction($event)\" [renderOptions]=\"renderOptions\" [language]=\"refresher\" [submission]=\"submission\"></formio>\r\n</div>\r\n", styles: [".app-property-list{padding:0 16px}.app-property-list.no-padding{padding:0}.app-property-list.no-padding .app-property-label{font-size:12px;word-wrap:break-word}.formio-component .formio-form .form-group .col-form-label{color:#646f85;font-size:13px}.formio-component .formio-form .form-group .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}\n"], components: [{ type: i3$2.FormioComponent, selector: "formio" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
             args: [{
@@ -11960,7 +11963,7 @@ class DynamicFormFieldComponent {
     }
 }
 DynamicFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormFieldComponent, deps: [{ token: i1.TranslateService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormFieldComponent, selector: "cts-dynamic-form-field", inputs: { disabled: "disabled", field: "field" }, ngImport: i0, template: "<formio [form]=\"field\" (change)=\"onChanged($event)\"></formio>\r\n", styles: [""], components: [{ type: i3$3.FormioComponent, selector: "formio" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormFieldComponent, selector: "cts-dynamic-form-field", inputs: { disabled: "disabled", field: "field" }, ngImport: i0, template: "<formio [form]=\"field\" (change)=\"onChanged($event)\"></formio>\r\n", styles: [""], components: [{ type: i3$2.FormioComponent, selector: "formio" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
             args: [{
@@ -14103,7 +14106,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: 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 });
+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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: DateViewerComponent, selector: "cts-date-viewer", inputs: ["label", "value", "vertical", "format", "hijri", "withOutLabel"] }, { type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: ["id", "context", "column"] }, { type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: ["componentName", "row", "rowAction", "onClick"] }], directives: [{ type: i4$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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "async": i4$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: [{
@@ -14280,7 +14283,7 @@ class SortingListComponent extends BaseComponent {
     }
 }
 SortingListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortingListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SortingListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SortingListComponent, selector: "table-sorting-list", inputs: { sortList: "sortList" }, outputs: { sortChanged: "sortChanged" }, host: { classAttribute: "sort-list" }, usesInheritance: true, ngImport: i0, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"sort-list__button\">\r\n\t<mat-icon inline> sort </mat-icon>\r\n\t{{ 'TABLE.sortBy' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<span [dir]=\"direction\" class=\"sort-list__menu\">\r\n\t\t<button mat-menu-item *ngFor=\"let item of sortList\" (click)=\"changeSort(item)\" [class.selected]=\"item.selected\">\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".sort-list__menu{max-height:var(--sort-max-height, 250px);overflow-y:auto}.sort-list__menu .mat-menu-item{line-height:var(--sort-item-height, 36px);height:var(--sort-item-height, 36px)}\n"], components: [{ type: i1$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: 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 }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SortingListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SortingListComponent, selector: "table-sorting-list", inputs: { sortList: "sortList" }, outputs: { sortChanged: "sortChanged" }, host: { classAttribute: "sort-list" }, usesInheritance: true, ngImport: i0, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"sort-list__button\">\r\n\t<mat-icon inline> sort </mat-icon>\r\n\t{{ 'TABLE.sortBy' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<span [dir]=\"direction\" class=\"sort-list__menu\">\r\n\t\t<button mat-menu-item *ngFor=\"let item of sortList\" (click)=\"changeSort(item)\" [class.selected]=\"item.selected\">\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".sort-list__menu{max-height:var(--sort-max-height, 250px);overflow-y:auto}.sort-list__menu .mat-menu-item{line-height:var(--sort-item-height, 36px);height:var(--sort-item-height, 36px)}\n"], components: [{ type: i1$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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortingListComponent, decorators: [{
             type: Component,
             args: [{
@@ -14382,7 +14385,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 columns-toggler__all top-0 pb-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t>\r\n\t\t<mat-checkbox\r\n\t\t\t*ngIf=\"!!columns?.length && !enableSorting\"\r\n\t\t\t(change)=\"onCheckAllChange($event)\"\r\n\t\t\t[checked]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length === columns?.length\"\r\n\t\t\t[indeterminate]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length < columns?.length\"\r\n\t\t>\r\n\t\t\t{{ 'FILTERS.all' | translate }}\r\n\t\t</mat-checkbox>\r\n\r\n\t\t<button class=\"action-btn apply-sorting-btn\" *ngIf=\"enableSorting\" (click)=\"applySort()\">\r\n\t\t\t{{ 'TABLE.applySorting' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<mat-icon\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleSorting()\"\r\n\t\t\t*ngIf=\"sortEnabled\"\r\n\t\t\t[title]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\t[matTooltip]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\tclass=\"columns-toggler__sort-icon\"\r\n\t\t>\r\n\t\t\t{{ enableSorting ? 'playlist_remove' : 'format_line_spacing' }}\r\n\t\t</mat-icon>\r\n\t</div>\r\n\r\n\t<ul\r\n\t\tclass=\"columns-toggler__columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t[dir]=\"direction\"\r\n\t\tcdkDropList\r\n\t\t[cdkDropListDisabled]=\"!enableSorting && !sortEnabled\"\r\n\t\t(cdkDropListDropped)=\"drop($event)\"\r\n\t>\r\n\t\t<li\r\n\t\t\t*ngFor=\"let col of columns\"\r\n\t\t\tclass=\"mb-2 column-control\"\r\n\t\t\tcdkDrag\r\n\t\t\t[cdkDragDisabled]=\"!enableSorting\"\r\n\t\t\t[class.sorting-enabled]=\"enableSorting\"\r\n\t\t\t[class.column-control__hidden]=\"!columnsSelection.isSelected(col)\"\r\n\t\t>\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n\t<ul\r\n\t\tclass=\"columns-toggler__frozen-columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t*ngIf=\"sortEnabled && frozenColumns?.length\"\r\n\t>\r\n\t\t<li *ngFor=\"let col of frozenColumns\" class=\"column-control\">\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n</mat-menu>\r\n", styles: [".columns-toggler__all{border-bottom:var(--columns-toggler-border, solid #f0f0f0)}.columns-toggler__sort-icon{color:var(--sort-icon-color, #000)}.columns-toggler__columns{max-height:var(--cols-max-height, 275px);overflow-y:auto}.columns-toggler__columns .check-all-box{background:var(--check-background-color, #fff)}.columns-toggler__columns .column-control.sorting-enabled ::ng-deep,.columns-toggler__columns .column-control.sorting-enabled ::ng-deep .mat-checkbox-label{cursor:move}.columns-toggler__columns .column-control.sorting-enabled.cdk-drag-disabled{cursor:not-allowed;background:var(--drag-disabled-background, transparent);box-shadow:0 0 0 3px var(--drag-disabled-background, transparent)}.columns-toggler__columns .column-control__hidden{opacity:.7}.columns-toggler__columns .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}.columns-toggler__columns .cdk-drag-placeholder{opacity:0}.columns-toggler__frozen-columns{border-top:var(--frozen-cols-border-top, 2px solid #ccc);max-height:var(--frozen-cols--max-height, 150px);overflow-y:auto}::ng-deep .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columns-toggler__sort-icon{color:var(--icon-color)!important}.apply-sorting-btn{background-color:var(--logo-button-bg);color:var(--main-text)}\n"], components: [{ type: i1$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 });
+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 columns-toggler__all top-0 pb-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t>\r\n\t\t<mat-checkbox\r\n\t\t\t*ngIf=\"!!columns?.length && !enableSorting\"\r\n\t\t\t(change)=\"onCheckAllChange($event)\"\r\n\t\t\t[checked]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length === columns?.length\"\r\n\t\t\t[indeterminate]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length < columns?.length\"\r\n\t\t>\r\n\t\t\t{{ 'FILTERS.all' | translate }}\r\n\t\t</mat-checkbox>\r\n\r\n\t\t<button class=\"action-btn apply-sorting-btn\" *ngIf=\"enableSorting\" (click)=\"applySort()\">\r\n\t\t\t{{ 'TABLE.applySorting' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<mat-icon\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleSorting()\"\r\n\t\t\t*ngIf=\"sortEnabled\"\r\n\t\t\t[title]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\t[matTooltip]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\tclass=\"columns-toggler__sort-icon\"\r\n\t\t>\r\n\t\t\t{{ enableSorting ? 'playlist_remove' : 'format_line_spacing' }}\r\n\t\t</mat-icon>\r\n\t</div>\r\n\r\n\t<ul\r\n\t\tclass=\"columns-toggler__columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t[dir]=\"direction\"\r\n\t\tcdkDropList\r\n\t\t[cdkDropListDisabled]=\"!enableSorting && !sortEnabled\"\r\n\t\t(cdkDropListDropped)=\"drop($event)\"\r\n\t>\r\n\t\t<li\r\n\t\t\t*ngFor=\"let col of columns\"\r\n\t\t\tclass=\"mb-2 column-control\"\r\n\t\t\tcdkDrag\r\n\t\t\t[cdkDragDisabled]=\"!enableSorting\"\r\n\t\t\t[class.sorting-enabled]=\"enableSorting\"\r\n\t\t\t[class.column-control__hidden]=\"!columnsSelection.isSelected(col)\"\r\n\t\t>\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n\t<ul\r\n\t\tclass=\"columns-toggler__frozen-columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t*ngIf=\"sortEnabled && frozenColumns?.length\"\r\n\t>\r\n\t\t<li *ngFor=\"let col of frozenColumns\" class=\"column-control\">\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n</mat-menu>\r\n", styles: [".columns-toggler__all{border-bottom:var(--columns-toggler-border, solid #f0f0f0)}.columns-toggler__sort-icon{color:var(--sort-icon-color, #000)}.columns-toggler__columns{max-height:var(--cols-max-height, 275px);overflow-y:auto}.columns-toggler__columns .check-all-box{background:var(--check-background-color, #fff)}.columns-toggler__columns .column-control.sorting-enabled ::ng-deep,.columns-toggler__columns .column-control.sorting-enabled ::ng-deep .mat-checkbox-label{cursor:move}.columns-toggler__columns .column-control.sorting-enabled.cdk-drag-disabled{cursor:not-allowed;background:var(--drag-disabled-background, transparent);box-shadow:0 0 0 3px var(--drag-disabled-background, transparent)}.columns-toggler__columns .column-control__hidden{opacity:.7}.columns-toggler__columns .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}.columns-toggler__columns .cdk-drag-placeholder{opacity:0}.columns-toggler__frozen-columns{border-top:var(--frozen-cols-border-top, 2px solid #ccc);max-height:var(--frozen-cols--max-height, 150px);overflow-y:auto}::ng-deep .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columns-toggler__sort-icon{color:var(--icon-color)!important}.apply-sorting-btn{background-color:var(--logo-button-bg);color:var(--main-text)}\n"], components: [{ type: i1$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$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$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: [{
@@ -14423,7 +14426,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: 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 } });
+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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$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: [{
@@ -14837,7 +14840,7 @@ class FilterAutocompleteInputComponent extends DestroySubject {
     }
 }
 FilterAutocompleteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterAutocompleteInputComponent, deps: [{ token: FilterAutocompleteService }, { token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-FilterAutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterAutocompleteInputComponent, selector: "filter-autocomplete-input", inputs: { direction: "direction", language: "language", fieldConfig: "fieldConfig" }, outputs: { searchChange: "searchChange" }, host: { classAttribute: "fac-input" }, usesInheritance: true, ngImport: i0, template: "<div class=\"position-relative\">\r\n\t<input\r\n\t\ttype=\"text\"\r\n\t\tclass=\"fac-input__input form-control\"\r\n\t\t[matAutocomplete]=\"autocomplete\"\r\n\t\t[dir]=\"direction\"\r\n\t\t[formControl]=\"searchCtrl\"\r\n\t\t[placeholder]=\"searchConfig?.placeholder || 'FILTERS.typeToSearch' | translate\"\r\n\t/>\r\n\t<div class=\"input-suffix\">\r\n\t\t<mat-icon *ngIf=\"!(isLoadingResult$ | async) && !selectedOption\" svgIcon=\"icons:search\" class=\"w-5 h-5\"></mat-icon>\r\n\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult$ | async\" [diameter]=\"20\"></mat-spinner>\r\n\r\n\t\t<i *ngIf=\"selectedOption\" class=\"bi icon-size-5 text-auroMetalSaurus bi-x-lg cursor-pointer\" (click)=\"reset()\"></i>\r\n\t</div>\r\n</div>\r\n<mat-autocomplete #autocomplete=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event)\">\r\n\t<mat-option *ngFor=\"let option of options$ | async\" [value]=\"option\">\r\n\t\t<filter-option-text\r\n\t\t\t[option]=\"option\"\r\n\t\t\t[language]=\"language\"\r\n\t\t\t[showCount]=\"fieldConfig.render?.showTotal\"\r\n\t\t></filter-option-text>\r\n\t</mat-option>\r\n</mat-autocomplete>\r\n", styles: [":host{display:var(--fac-input-display, block);padding-block:var(--fac-input-block, 0 .5rem);padding-inline:var(--fac-input-inline, .5rem);margin-block:var(--fac-input-margin-block, .5rem)}:host .input-suffix{position:absolute;inset-block-start:9px;inset-inline-end:10px}\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"] }, { type: i5$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: FilterOptionTextComponent, selector: "filter-option-text", inputs: ["option", "showCount", "language"] }], directives: [{ type: i5$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { 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: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilterAutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterAutocompleteInputComponent, selector: "filter-autocomplete-input", inputs: { direction: "direction", language: "language", fieldConfig: "fieldConfig" }, outputs: { searchChange: "searchChange" }, host: { classAttribute: "fac-input" }, usesInheritance: true, ngImport: i0, template: "<div class=\"position-relative\">\r\n\t<input\r\n\t\ttype=\"text\"\r\n\t\tclass=\"fac-input__input form-control\"\r\n\t\t[matAutocomplete]=\"autocomplete\"\r\n\t\t[dir]=\"direction\"\r\n\t\t[formControl]=\"searchCtrl\"\r\n\t\t[placeholder]=\"searchConfig?.placeholder || 'FILTERS.typeToSearch' | translate\"\r\n\t/>\r\n\t<div class=\"input-suffix\">\r\n\t\t<mat-icon *ngIf=\"!(isLoadingResult$ | async) && !selectedOption\" svgIcon=\"icons:search\" class=\"w-5 h-5\"></mat-icon>\r\n\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult$ | async\" [diameter]=\"20\"></mat-spinner>\r\n\r\n\t\t<i *ngIf=\"selectedOption\" class=\"bi icon-size-5 text-auroMetalSaurus bi-x-lg cursor-pointer\" (click)=\"reset()\"></i>\r\n\t</div>\r\n</div>\r\n<mat-autocomplete #autocomplete=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event)\">\r\n\t<mat-option *ngFor=\"let option of options$ | async\" [value]=\"option\">\r\n\t\t<filter-option-text\r\n\t\t\t[option]=\"option\"\r\n\t\t\t[language]=\"language\"\r\n\t\t\t[showCount]=\"fieldConfig.render?.showTotal\"\r\n\t\t></filter-option-text>\r\n\t</mat-option>\r\n</mat-autocomplete>\r\n", styles: [":host{display:var(--fac-input-display, block);padding-block:var(--fac-input-block, 0 .5rem);padding-inline:var(--fac-input-inline, .5rem);margin-block:var(--fac-input-margin-block, .5rem)}:host .input-suffix{position:absolute;inset-block-start:9px;inset-inline-end:10px}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i5$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: FilterOptionTextComponent, selector: "filter-option-text", inputs: ["option", "showCount", "language"] }], directives: [{ type: i5$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { 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: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterAutocompleteInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -16584,7 +16587,7 @@ class FilterOptionsSortComponent {
     }
 }
 FilterOptionsSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterOptionsSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterOptionsSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterOptionsSortComponent, selector: "filter-options-sort", inputs: { options: "options", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<mat-icon [matMenuTriggerFor]=\"menu\" role=\"button\" class=\"cursor-pointer\">sort</mat-icon>\r\n\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let option of options\" (click)=\"onSortChange(option)\">\r\n\t\t<span>{{ 'FILTERS.SORT.' + option.key | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-menu-item{height:40px;line-height:40px}:host{height:24px}\n"], components: [{ type: i2$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: 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 } });
+FilterOptionsSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterOptionsSortComponent, selector: "filter-options-sort", inputs: { options: "options", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<mat-icon [matMenuTriggerFor]=\"menu\" role=\"button\" class=\"cursor-pointer\">sort</mat-icon>\r\n\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let option of options\" (click)=\"onSortChange(option)\">\r\n\t\t<span>{{ 'FILTERS.SORT.' + option.key | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-menu-item{height:40px;line-height:40px}:host{height:24px}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$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: FilterOptionsSortComponent, decorators: [{
             type: Component,
             args: [{
@@ -18208,7 +18211,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: 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 });
+    ], 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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4.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: [{
@@ -20309,7 +20312,7 @@ class DynamicTableComponent {
     }
 }
 DynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicTableComponent, deps: [{ token: AdapterService }, { token: CallApiService }, { token: DynamicTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", isLegacyMode: "isLegacyMode", showTotalRecord: "showTotalRecord", pageNumber: "pageNumber", sortingBy: "sortingBy", queryParam: "queryParam", customFilters: "customFilters", quickFilter: "quickFilter", report: "report", rowCursor: "rowCursor", fullWidth: "fullWidth", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", defultSort: "defultSort", range: "range", isSearchPage: "isSearchPage", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", highlightSelectedCard: "highlightSelectedCard", showActionsAsMenu: "showActionsAsMenu", filterParams: "filterParams", skipAggregation: "skipAggregation", customUrl: "customUrl", format: "format", requestActions: "requestActions", pageSizes: "pageSizes" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", sortChanged: "sortChanged", onPageChange: "onPageChange", onPage: "onPage", onLoad: "onLoad", onInitialize: "onInitialize" }, host: { properties: { "class.loading-results": "loading", "class.no-data": "rows.length <= 0" } }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: EMPTY_TEMPLATE, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapping table-wrapping\">\r\n\t<ng-container *ngIf=\"isLegacyMode\">\r\n\t\t<div class=\"table-reposition\">\r\n\t\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<cts-spinner></cts-spinner>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<div class=\"table-reposition\" *ngIf=\"!isLegacyMode\">\r\n\t\t<ng-container  [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized\"\r\n\t\t\t[ngTemplateOutlet]=\"skeleton\"\r\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: 10 }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<div\r\n\t\tclass=\"pagination-iner-wraper my-3\"\r\n\t\t[ngClass]=\"{ relative: pageSizes?.length }\"\r\n\t\t*ngIf=\"rows.length \"\r\n\t>\r\n\t\t<cts-pagination\r\n      *ngIf=\"totalRecords > pageSize\"\r\n\t\t\t[page]=\"pageNum\"\r\n\t\t\t(change)=\"paginationChange($event)\"\r\n\t\t\t[size]=\"pageSize\"\r\n\t\t\t[count]=\"totalRecords\"\r\n\t\t></cts-pagination>\r\n\t\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t\t<ndf-page-sizes-list\r\n\t\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t\t>\r\n\t\t\t</ndf-page-sizes-list>\r\n\r\n\t\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || legacyDefaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\r\n\t></ng-container>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"!isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || defaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\r\n\t></ng-container>\r\n</div>\r\n\r\n<ng-template #table>\r\n\t<cts-table\r\n\t\t[rows]=\"rows\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[responsiveColumns]=\"responsiveColumns\"\r\n\t\t[rowCursor]=\"rowCursor\"\r\n\t\t[fullWidth]=\"fullWidth\"\r\n\t\t[entityType]=\"entityType\"\r\n\t\t[prefix]=\"prefix\"\r\n\t\t[totalRecords]=\"totalRecords\"\r\n\t\t[tableMode]=\"tableMode\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[multiSelectRows]=\"multiSelectRows\"\r\n\t\t[tableActions]=\"tableActions\"\r\n\t\t[showActionsAsMenu]=\"showActionsAsMenu\"\r\n\t\t[defultSort]=\"defultSort\"\r\n\t\t[format]=\"format\"\r\n\t\t[highlightSelectedCard]=\"highlightSelectedCard\"\r\n\t\t[customFirstRow]=\"customFirstRow\"\r\n\t\t(onRowSelected)=\"rowDetails($event)\"\r\n\t\t(onRowIndexSelected)=\"indexDetails($event)\"\r\n\t\t(onMultiRowSelected)=\"onMultiRowSelectValue($event)\"\r\n\t\t(actionOnRow)=\"performAction($event)\"\r\n\t\t(onSorting)=\"onSort($event)\"\r\n\t></cts-table>\r\n</ng-template>\r\n\r\n<ng-template #legacyDefaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"empty-state\" *ngIf=\"loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'gettingData' : 'gettingData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"loading && initialized\" class=\"loading-content\">\r\n\t\t<mat-spinner [diameter]=\"100\"></mat-spinner>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #skeleton let-rows>\r\n\t<table class=\"w-full\">\r\n\t\t<thead *ngIf=\"false\">\r\n\t\t\t<tr class=\"border-b border-green-900\">\r\n\t\t\t\t<th *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 60px\">\r\n\t\t\t\t\t<app-skeleton width=\"60px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngFor=\"let num of [].constructor(columns?.length || 4); let i = index\" class=\"px-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.7rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</thead>\r\n\t\t<tbody>\r\n\t\t\t<tr *ngFor=\"let row of [].constructor(rows || 10); let index = index\" class=\"border-b border-gray-200\">\r\n\t\t\t\t<td *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 50px\">\r\n\t\t\t\t\t<app-skeleton width=\"50px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngFor=\"let col of [].constructor(columns?.length || 4); let i = index\" class=\"p-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</tbody>\r\n\t</table>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:var(--table-reposition-overflow-y, hidden);scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:hidden}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:bold}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}.ndfPageSizes{right:0;left:unset}.rtl .ndfPageSizes{right:unset;left:0}.loading-content{position:var(--loading-content-position, absolute);inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-content-backdrop-filter, blur(3px));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}.pagination-iner-wraper{display:var(--pagination-inner-display, flex);justify-content:var(--pagination-inner-justify, center);align-items:var(--pagination-inner-align, center)}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: ["pageSizes", "selectedPageSize"], outputs: ["onChangePageSize"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", isLegacyMode: "isLegacyMode", showTotalRecord: "showTotalRecord", pageNumber: "pageNumber", sortingBy: "sortingBy", queryParam: "queryParam", customFilters: "customFilters", quickFilter: "quickFilter", report: "report", rowCursor: "rowCursor", fullWidth: "fullWidth", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", defultSort: "defultSort", range: "range", isSearchPage: "isSearchPage", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", highlightSelectedCard: "highlightSelectedCard", showActionsAsMenu: "showActionsAsMenu", filterParams: "filterParams", skipAggregation: "skipAggregation", customUrl: "customUrl", format: "format", requestActions: "requestActions", pageSizes: "pageSizes" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", sortChanged: "sortChanged", onPageChange: "onPageChange", onPage: "onPage", onLoad: "onLoad", onInitialize: "onInitialize" }, host: { properties: { "class.loading-results": "loading", "class.no-data": "rows.length <= 0" } }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: EMPTY_TEMPLATE, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapping table-wrapping\">\r\n\t<ng-container *ngIf=\"isLegacyMode\">\r\n\t\t<div class=\"table-reposition\">\r\n\t\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<cts-spinner></cts-spinner>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<div class=\"table-reposition\" *ngIf=\"!isLegacyMode\">\r\n\t\t<ng-container  [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized\"\r\n\t\t\t[ngTemplateOutlet]=\"skeleton\"\r\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: 10 }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<div\r\n\t\tclass=\"pagination-iner-wraper my-3\"\r\n\t\t[ngClass]=\"{ relative: pageSizes?.length }\"\r\n\t\t*ngIf=\"rows.length \"\r\n\t>\r\n\t\t<cts-pagination\r\n      *ngIf=\"totalRecords > pageSize\"\r\n\t\t\t[page]=\"pageNum\"\r\n\t\t\t(change)=\"paginationChange($event)\"\r\n\t\t\t[size]=\"pageSize\"\r\n\t\t\t[count]=\"totalRecords\"\r\n\t\t></cts-pagination>\r\n\t\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t\t<ndf-page-sizes-list\r\n\t\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t\t>\r\n\t\t\t</ndf-page-sizes-list>\r\n\r\n\t\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || legacyDefaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\r\n\t></ng-container>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"!isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || defaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\r\n\t></ng-container>\r\n</div>\r\n\r\n<ng-template #table>\r\n\t<cts-table\r\n\t\t[rows]=\"rows\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[responsiveColumns]=\"responsiveColumns\"\r\n\t\t[rowCursor]=\"rowCursor\"\r\n\t\t[fullWidth]=\"fullWidth\"\r\n\t\t[entityType]=\"entityType\"\r\n\t\t[prefix]=\"prefix\"\r\n\t\t[totalRecords]=\"totalRecords\"\r\n\t\t[tableMode]=\"tableMode\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[multiSelectRows]=\"multiSelectRows\"\r\n\t\t[tableActions]=\"tableActions\"\r\n\t\t[showActionsAsMenu]=\"showActionsAsMenu\"\r\n\t\t[defultSort]=\"defultSort\"\r\n\t\t[format]=\"format\"\r\n\t\t[highlightSelectedCard]=\"highlightSelectedCard\"\r\n\t\t[customFirstRow]=\"customFirstRow\"\r\n\t\t(onRowSelected)=\"rowDetails($event)\"\r\n\t\t(onRowIndexSelected)=\"indexDetails($event)\"\r\n\t\t(onMultiRowSelected)=\"onMultiRowSelectValue($event)\"\r\n\t\t(actionOnRow)=\"performAction($event)\"\r\n\t\t(onSorting)=\"onSort($event)\"\r\n\t></cts-table>\r\n</ng-template>\r\n\r\n<ng-template #legacyDefaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"empty-state\" *ngIf=\"loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'gettingData' : 'gettingData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"loading && initialized\" class=\"loading-content\">\r\n\t\t<mat-spinner [diameter]=\"100\"></mat-spinner>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #skeleton let-rows>\r\n\t<table class=\"w-full\">\r\n\t\t<thead *ngIf=\"false\">\r\n\t\t\t<tr class=\"border-b border-green-900\">\r\n\t\t\t\t<th *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 60px\">\r\n\t\t\t\t\t<app-skeleton width=\"60px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngFor=\"let num of [].constructor(columns?.length || 4); let i = index\" class=\"px-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.7rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</thead>\r\n\t\t<tbody>\r\n\t\t\t<tr *ngFor=\"let row of [].constructor(rows || 10); let index = index\" class=\"border-b border-gray-200\">\r\n\t\t\t\t<td *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 50px\">\r\n\t\t\t\t\t<app-skeleton width=\"50px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngFor=\"let col of [].constructor(columns?.length || 4); let i = index\" class=\"p-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</tbody>\r\n\t</table>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:var(--table-reposition-overflow-y, hidden);scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:hidden}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:bold}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}.ndfPageSizes{right:0;left:unset}.rtl .ndfPageSizes{right:unset;left:0}.loading-content{position:var(--loading-content-position, absolute);inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-content-backdrop-filter, blur(3px));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}.pagination-iner-wraper{display:var(--pagination-inner-display, flex);justify-content:var(--pagination-inner-justify, center);align-items:var(--pagination-inner-align, center)}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: ["pageSizes", "selectedPageSize"], outputs: ["onChangePageSize"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: DynamicTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -21134,7 +21137,7 @@ class NdfTableComponent extends DestroySubject {
     }
 }
 NdfTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableComponent, deps: [{ token: FiltersMapperService }, { token: DynamicTableService }, { token: i1.TranslateService }, { token: NdfTableService }, { token: CustomToastrService }, { token: NdfTableConfigurationService }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NdfTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfTableComponent, selector: "app-ndf-table", inputs: { rows: "rows", totalRecords: "totalRecords", autoCalculateHeight: "autoCalculateHeight", emptyMessage: "emptyMessage", activeQuery: "activeQuery", configPath: "configPath", styleClass: "styleClass", configTransformer: "configTransformer", tableKey: "tableKey", jsonEditorEnabled: "jsonEditorEnabled", config: "config", customCriteria: "customCriteria", searchTerm: "searchTerm" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", onPage: "onPage", onInitialized: "onInitialized", onLoaded: "onLoaded", onQueryChange: "onQueryChange", onSort: "onSort" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-table" }, queries: [{ propertyName: "actionsTableTemplate", first: true, predicate: ACTIONS_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "searchTableTemplate", first: true, predicate: SEARCH_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "filterCustomTemplate", first: true, predicate: FILTER_CUSTOM_TEMPLATE, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  *ngIf=\"tableConfig\"\r\n  class=\"ndf-table__container\"\r\n  [class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n  [dir]=\"direction\"\r\n  ndfFluidHeight\r\n  cssVar=\"--ndf-table-height\"\r\n  [calculate]=\"autoCalculateHeight\"\r\n>\r\n  <div class=\"ndf-table__panel\" *ngIf=\"filtersConfig?.fields\">\r\n    <app-filters-panel\r\n      [fields]=\"filtersConfig.fields\"\r\n      [aggregations]=\"aggregations$ | async\"\r\n      (filterChanged)=\"filterChanged($event)\"\r\n      [activeQuery]=\"activeQuery\"\r\n      class=\"ndf-table__filters\"\r\n      [customTemplateRef]=\"filterCustomTemplate\"\r\n    ></app-filters-panel>\r\n  </div>\r\n  <div class=\"ndf-table__content\">\r\n    <div class=\"ndf-table__header flex\">\r\n      <div class=\"ndf-table__header__custom-actions flex gap-x-4 items-center\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"searchTableTemplate || defaultActionTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch\r\n          }\"\r\n        ></ng-container>\r\n\r\n        <ng-template #defaultActionTemplate>\r\n          <button\r\n            mat-stroked-button\r\n            *ngIf=\"isPanelToggleAvailable\"\r\n            class=\"toggle-button\"\r\n            (click)=\"togglePanel()\"\r\n          >\r\n            <mat-icon> filter_alt</mat-icon>\r\n          </button>\r\n          <app-text-search\r\n            *ngIf=\"textSearchConfig\"\r\n            [searchConfig]=\"textSearchConfig\"\r\n            (openModal)=\"openSearchModal()\"\r\n            [search]=\"textSearch$ | async\"\r\n            (searchChange)=\"onTextSearch($event)\"\r\n            (clear)=\"onClearSearch()\"\r\n          ></app-text-search>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"ndf-table__header__actions flex gap-x-4 items-center\">\r\n        <app-editor-button\r\n          *ngIf=\"jsonEditorEnabled && (tableKey || tableConfig?.key)\"\r\n          [key]=\"tableKey || tableConfig?.key\"\r\n          [type]=\"editorType\"\r\n        ></app-editor-button>\r\n        <ndf-table-export\r\n          *ngIf=\"exportTableConfig?.enabled\"\r\n          [config]=\"exportTableConfig\"\r\n          (onExport)=\"exportTable($event)\"\r\n        ></ndf-table-export>\r\n\r\n        <table-sorting-list\r\n          *ngIf=\"!!sortList?.length\"\r\n          [sortList]=\"sortList\"\r\n          (sortChanged)=\"sortChanged($event)\"\r\n        ></table-sorting-list>\r\n        <table-columns-toggler\r\n          *ngIf=\"columnToggle\"\r\n          [columns]=\"tableConfig.columns\"\r\n          [prefix]=\"tableConfig.prefix\"\r\n          [sortable]=\"columnsOptions?.sortable\"\r\n          (columnsChanged)=\"columnsChanged($event)\"\r\n        ></table-columns-toggler>\r\n        <mode-toggler\r\n          *ngIf=\"tableMode?.toggleMode\"\r\n          [mode]=\"tableMode.mode || 'list'\"\r\n          [modesList]=\"tableMode?.availableMode\"\r\n          (modeChanged)=\"modeChanged($event)\"\r\n        ></mode-toggler>\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"actionsTableTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch\r\n          }\"\r\n        ></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <cts-dynamic-table\r\n      *ngIf=\"!tableConfig.isDataProvided\"\r\n      class=\"ndf-table__table table-style\"\r\n      [ngClass]=\"styleClass\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [pageSize]=\"tableConfig.pageSize || 10\"\r\n      [pageNumber]=\"tableConfig.pageNumber || 1\"\r\n      [pageProvider]=\"tableConfig.pageProvider\"\r\n      [customUrl]=\"tableConfig.customUrl\"\r\n      [quickFilter]=\"\r\n        tableConfig.quickFilters\r\n          ? { quickFilters: tableConfig.quickFilters }\r\n          : undefined\r\n      \"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [sortingBy]=\"sortOption$ | async\"\r\n      [entityType]=\"'all'\"\r\n      [fields]=\"tableConfig.fields\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [range]=\"tableConfig?.range\"\r\n      [isSearchPage]=\"tableConfig?.isSearchPage\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [filterParams]=\"tableConfig?.filterParams\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [pageSizes]=\"tableConfig?.pageSizes || defaultPageSizes\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [rowCursor]=\"true\"\r\n      [queryParam]=\"tableConfig.queryParam\"\r\n      [customFilters]=\"searchAndFilters$ | async\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [requestActions]=\"tableConfig?.requestActions\"\r\n      [headers]=\"tableConfig.headers\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onGettingData)=\"onGettingData.emit($event)\"\r\n      (onLoad)=\"onLoad($event)\"\r\n      (onInitialize)=\"onInitialize($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (onLoading)=\"onLoading.emit($event)\"\r\n      (onPage)=\"onPageChanged($event)\"\r\n      [isLegacyMode]=\"false\"\r\n      [showTotalRecord]=\"true\"\r\n      (sortChanged)=\"onSortChanged($event)\"\r\n    >\r\n      <ng-template\r\n        emptyTemplate\r\n        let-isLoading\r\n        let-rows=\"rows\"\r\n        let-initialized=\"initialized\"\r\n      >\r\n        <div class=\"loading-data\" *ngIf=\"isLoading && initialized\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n\r\n        <div\r\n          class=\"flex items-center justify-center h-5/6\"\r\n          *ngIf=\"!isLoading && !rows.length\"\r\n        >\r\n          <app-no-data-found\r\n            class=\"mt-4\"\r\n            [message]=\"emptyMessage\"\r\n          ></app-no-data-found>\r\n        </div>\r\n      </ng-template>\r\n    </cts-dynamic-table>\r\n\r\n    <cts-table\r\n      *ngIf=\"tableConfig.isDataProvided\"\r\n      [ngClass]=\"styleClass\"\r\n      [rows]=\"rows\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [rowCursor]=\"true\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [entityType]=\"'all'\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onSorting)=\"onSortChanged($event)\"\r\n    ></cts-table>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-tbl-inline-padding, 1rem);padding-block:var(--ndf-tbl-block-padding, 1rem);border:var(--ndf-tbl-border, solid transparent);border-width:var(--ndf-table-border-width, 0);border-radius:var(--ndf-tbl-border-radius, 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-tbl-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host [dir=ltr]{--ndf-tbl-panel-translateX: -100%}:host:before,:host:after{box-sizing:border-box}::ng-deep .wrapping,::ng-deep .wrapping .table-reposition{overflow:visible}.ndf-table__container{--table-div-height: auto;--table-reposition-overflow-y: visible;--table-div-overflow: visible;--panel-width: var(--ndf-tbl-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-tbl-height, calc(var(--ndf-table-height, auto) - calc(var(--ndf-tbl-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-table__container.panel-opened{--ndf-tbl-panel-translateX: 0;--ndf-tbl-content-pis: var(--panel-width)}.ndf-table__panel,.ndf-table__content{overflow:auto;transition:all .2s}.ndf-table__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-tbl-panel-translateX, 100%));padding-inline:var(--ndf-tbl-panel-inline-padding, .5rem);padding-block:var(--ndf-tbl-panel-block-padding, .5rem);background:var(--ndf-tbl-panel-background, #fff);z-index:1}.ndf-table__content{flex-grow:1;padding-inline-start:var(--ndf-tbl-content-pis, 0);padding-block-end:var(--ndf-tbl-content-pbe, 1rem);overflow-y:var(--ndf-tbl-content-overflow-y, auto);max-height:var(--ndf-tbl-content-max-height, var(--ndf-table-height));display:flex;flex-direction:column;height:var(--ndf-tbl-content-height, auto)}.ndf-table__header{background-color:var(--ndf-tbl-background, #fff);flex-direction:var(--ndf-tbl-header-direction, row);justify-content:var(--ndf-tbl-header-justify, space-between);align-items:var(--ndf-tbl-header-items, center);padding-inline:var(--ndf-tbl-header-padding-inline, .5rem);padding-block:var(--ndf-tbl-header-padding-block, 0 .5rem);position:var(--ndf-tbl-header-position, sticky);top:0;z-index:1}.ndf-table__header__actions{justify-content:var(--ndf-tbl-actions-justify, flex-end)}.ndf-table__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-table__table{flex-grow:1;display:flex;flex-direction:column}.ndf-table__table.no-data{--table-div-height: auto}.loading-data{position:absolute;inset:0;display:grid;place-items:center;background:var(--loading-data-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-data-backdrop-filter, blur(3px));backdrop-filter:var(--loading-data-backdrop-filter, blur(3px))}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1$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: TextSearchComponent, selector: "app-text-search", inputs: ["searchConfig", "search"], outputs: ["searchChange", "openModal", "clear"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: TableExportComponent, selector: "ndf-table-export", inputs: ["config"], outputs: ["onExport"] }, { type: SortingListComponent, selector: "table-sorting-list", inputs: ["sortList"], outputs: ["sortChanged"] }, { type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: ["prefix", "sortable", "columns"], outputs: ["columnsChanged"] }, { type: ModeTogglerComponent, selector: "mode-toggler", inputs: ["modesList", "mode"], outputs: ["modeChanged"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "isLegacyMode", "showTotalRecord", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: EmptyTemplateDirective, selector: "[emptyTemplate]" }], pipes: { "async": i4$1.AsyncPipe } });
+NdfTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfTableComponent, selector: "app-ndf-table", inputs: { rows: "rows", totalRecords: "totalRecords", autoCalculateHeight: "autoCalculateHeight", emptyMessage: "emptyMessage", activeQuery: "activeQuery", configPath: "configPath", styleClass: "styleClass", configTransformer: "configTransformer", tableKey: "tableKey", jsonEditorEnabled: "jsonEditorEnabled", config: "config", customCriteria: "customCriteria", searchTerm: "searchTerm" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", onPage: "onPage", onInitialized: "onInitialized", onLoaded: "onLoaded", onQueryChange: "onQueryChange", onSort: "onSort" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-table" }, queries: [{ propertyName: "actionsTableTemplate", first: true, predicate: ACTIONS_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "searchTableTemplate", first: true, predicate: SEARCH_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "filterCustomTemplate", first: true, predicate: FILTER_CUSTOM_TEMPLATE, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  *ngIf=\"tableConfig\"\r\n  class=\"ndf-table__container\"\r\n  [class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n  [dir]=\"direction\"\r\n  ndfFluidHeight\r\n  cssVar=\"--ndf-table-height\"\r\n  [calculate]=\"autoCalculateHeight\"\r\n>\r\n  <div class=\"ndf-table__panel\" *ngIf=\"filtersConfig?.fields\">\r\n    <app-filters-panel\r\n      [fields]=\"filtersConfig.fields\"\r\n      [aggregations]=\"aggregations$ | async\"\r\n      (filterChanged)=\"filterChanged($event)\"\r\n      [activeQuery]=\"activeQuery\"\r\n      class=\"ndf-table__filters\"\r\n      [customTemplateRef]=\"filterCustomTemplate\"\r\n    ></app-filters-panel>\r\n  </div>\r\n  <div class=\"ndf-table__content\">\r\n    <div class=\"ndf-table__header flex\">\r\n      <div class=\"ndf-table__header__custom-actions flex gap-x-4 items-center\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"searchTableTemplate || defaultActionTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch\r\n          }\"\r\n        ></ng-container>\r\n\r\n        <ng-template #defaultActionTemplate>\r\n          <button\r\n            mat-stroked-button\r\n            *ngIf=\"isPanelToggleAvailable\"\r\n            class=\"toggle-button\"\r\n            (click)=\"togglePanel()\"\r\n          >\r\n            <mat-icon> filter_alt</mat-icon>\r\n          </button>\r\n          <app-text-search\r\n            *ngIf=\"textSearchConfig\"\r\n            [searchConfig]=\"textSearchConfig\"\r\n            (openModal)=\"openSearchModal()\"\r\n            [search]=\"textSearch$ | async\"\r\n            (searchChange)=\"onTextSearch($event)\"\r\n            (clear)=\"onClearSearch()\"\r\n          ></app-text-search>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"ndf-table__header__actions flex gap-x-4 items-center\">\r\n        <app-editor-button\r\n          *ngIf=\"jsonEditorEnabled && (tableKey || tableConfig?.key)\"\r\n          [key]=\"tableKey || tableConfig?.key\"\r\n          [type]=\"editorType\"\r\n        ></app-editor-button>\r\n        <ndf-table-export\r\n          *ngIf=\"exportTableConfig?.enabled\"\r\n          [config]=\"exportTableConfig\"\r\n          (onExport)=\"exportTable($event)\"\r\n        ></ndf-table-export>\r\n\r\n        <table-sorting-list\r\n          *ngIf=\"!!sortList?.length\"\r\n          [sortList]=\"sortList\"\r\n          (sortChanged)=\"sortChanged($event)\"\r\n        ></table-sorting-list>\r\n        <table-columns-toggler\r\n          *ngIf=\"columnToggle\"\r\n          [columns]=\"tableConfig.columns\"\r\n          [prefix]=\"tableConfig.prefix\"\r\n          [sortable]=\"columnsOptions?.sortable\"\r\n          (columnsChanged)=\"columnsChanged($event)\"\r\n        ></table-columns-toggler>\r\n        <mode-toggler\r\n          *ngIf=\"tableMode?.toggleMode\"\r\n          [mode]=\"tableMode.mode || 'list'\"\r\n          [modesList]=\"tableMode?.availableMode\"\r\n          (modeChanged)=\"modeChanged($event)\"\r\n        ></mode-toggler>\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"actionsTableTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch\r\n          }\"\r\n        ></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <cts-dynamic-table\r\n      *ngIf=\"!tableConfig.isDataProvided\"\r\n      class=\"ndf-table__table table-style\"\r\n      [ngClass]=\"styleClass\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [pageSize]=\"tableConfig.pageSize || 10\"\r\n      [pageNumber]=\"tableConfig.pageNumber || 1\"\r\n      [pageProvider]=\"tableConfig.pageProvider\"\r\n      [customUrl]=\"tableConfig.customUrl\"\r\n      [quickFilter]=\"\r\n        tableConfig.quickFilters\r\n          ? { quickFilters: tableConfig.quickFilters }\r\n          : undefined\r\n      \"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [sortingBy]=\"sortOption$ | async\"\r\n      [entityType]=\"'all'\"\r\n      [fields]=\"tableConfig.fields\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [range]=\"tableConfig?.range\"\r\n      [isSearchPage]=\"tableConfig?.isSearchPage\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [filterParams]=\"tableConfig?.filterParams\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [pageSizes]=\"tableConfig?.pageSizes || defaultPageSizes\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [rowCursor]=\"true\"\r\n      [queryParam]=\"tableConfig.queryParam\"\r\n      [customFilters]=\"searchAndFilters$ | async\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [requestActions]=\"tableConfig?.requestActions\"\r\n      [headers]=\"tableConfig.headers\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onGettingData)=\"onGettingData.emit($event)\"\r\n      (onLoad)=\"onLoad($event)\"\r\n      (onInitialize)=\"onInitialize($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (onLoading)=\"onLoading.emit($event)\"\r\n      (onPage)=\"onPageChanged($event)\"\r\n      [isLegacyMode]=\"false\"\r\n      [showTotalRecord]=\"true\"\r\n      (sortChanged)=\"onSortChanged($event)\"\r\n    >\r\n      <ng-template\r\n        emptyTemplate\r\n        let-isLoading\r\n        let-rows=\"rows\"\r\n        let-initialized=\"initialized\"\r\n      >\r\n        <div class=\"loading-data\" *ngIf=\"isLoading && initialized\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n\r\n        <div\r\n          class=\"flex items-center justify-center h-5/6\"\r\n          *ngIf=\"!isLoading && !rows.length\"\r\n        >\r\n          <app-no-data-found\r\n            class=\"mt-4\"\r\n            [message]=\"emptyMessage\"\r\n          ></app-no-data-found>\r\n        </div>\r\n      </ng-template>\r\n    </cts-dynamic-table>\r\n\r\n    <cts-table\r\n      *ngIf=\"tableConfig.isDataProvided\"\r\n      [ngClass]=\"styleClass\"\r\n      [rows]=\"rows\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [rowCursor]=\"true\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [entityType]=\"'all'\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onSorting)=\"onSortChanged($event)\"\r\n    ></cts-table>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-tbl-inline-padding, 1rem);padding-block:var(--ndf-tbl-block-padding, 1rem);border:var(--ndf-tbl-border, solid transparent);border-width:var(--ndf-table-border-width, 0);border-radius:var(--ndf-tbl-border-radius, 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-tbl-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host [dir=ltr]{--ndf-tbl-panel-translateX: -100%}:host:before,:host:after{box-sizing:border-box}::ng-deep .wrapping,::ng-deep .wrapping .table-reposition{overflow:visible}.ndf-table__container{--table-div-height: auto;--table-reposition-overflow-y: visible;--table-div-overflow: visible;--panel-width: var(--ndf-tbl-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-tbl-height, calc(var(--ndf-table-height, auto) - calc(var(--ndf-tbl-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-table__container.panel-opened{--ndf-tbl-panel-translateX: 0;--ndf-tbl-content-pis: var(--panel-width)}.ndf-table__panel,.ndf-table__content{overflow:auto;transition:all .2s}.ndf-table__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-tbl-panel-translateX, 100%));padding-inline:var(--ndf-tbl-panel-inline-padding, .5rem);padding-block:var(--ndf-tbl-panel-block-padding, .5rem);background:var(--ndf-tbl-panel-background, #fff);z-index:1}.ndf-table__content{flex-grow:1;padding-inline-start:var(--ndf-tbl-content-pis, 0);padding-block-end:var(--ndf-tbl-content-pbe, 1rem);overflow-y:var(--ndf-tbl-content-overflow-y, auto);max-height:var(--ndf-tbl-content-max-height, var(--ndf-table-height));display:flex;flex-direction:column;height:var(--ndf-tbl-content-height, auto)}.ndf-table__header{background-color:var(--ndf-tbl-background, #fff);flex-direction:var(--ndf-tbl-header-direction, row);justify-content:var(--ndf-tbl-header-justify, space-between);align-items:var(--ndf-tbl-header-items, center);padding-inline:var(--ndf-tbl-header-padding-inline, .5rem);padding-block:var(--ndf-tbl-header-padding-block, 0 .5rem);position:var(--ndf-tbl-header-position, sticky);top:0;z-index:1}.ndf-table__header__actions{justify-content:var(--ndf-tbl-actions-justify, flex-end)}.ndf-table__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-table__table{flex-grow:1;display:flex;flex-direction:column}.ndf-table__table.no-data{--table-div-height: auto}.loading-data{position:absolute;inset:0;display:grid;place-items:center;background:var(--loading-data-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-data-backdrop-filter, blur(3px));backdrop-filter:var(--loading-data-backdrop-filter, blur(3px))}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1$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: TextSearchComponent, selector: "app-text-search", inputs: ["searchConfig", "search"], outputs: ["searchChange", "openModal", "clear"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: TableExportComponent, selector: "ndf-table-export", inputs: ["config"], outputs: ["onExport"] }, { type: SortingListComponent, selector: "table-sorting-list", inputs: ["sortList"], outputs: ["sortChanged"] }, { type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: ["prefix", "sortable", "columns"], outputs: ["columnsChanged"] }, { type: ModeTogglerComponent, selector: "mode-toggler", inputs: ["modesList", "mode"], outputs: ["modeChanged"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "isLegacyMode", "showTotalRecord", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: EmptyTemplateDirective, selector: "[emptyTemplate]" }], pipes: { "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -21576,7 +21579,7 @@ class DynamicSearchComponent {
     }
 }
 DynamicSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicSearchComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: EvaluatorsService }, { token: NuxeoService }, { token: GlobalAdminService }, { token: 'environment' }, { token: i5$5.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-DynamicSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicSearchComponent, selector: "cts-dynamic-search", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", sortingBy: "sortingBy", fullTextParamName: "fullTextParamName", filter: "filter", suggesterApi: "suggesterApi", onRowSelected: "onRowSelected", sortingArray: "sortingArray", customResponsiveStyle: "customResponsiveStyle", openCloseFilterFromOutside: "openCloseFilterFromOutside", theme: "theme" }, outputs: { actionOnRow: "actionOnRow" }, viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: ["dynamicTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!customResponsiveStyle\">\r\n  <div class=\"search-toolbar d-md-flex d-xl-none mx-3\">\r\n    <button (click)=\"onOpenFilter()\" class=\"my-button\">\r\n      <span> {{ \"FILTER\" | translate }}</span>\r\n      <i class=\"bi bi-filter\" *ngIf=\"!openFilter\"></i>\r\n      <i class=\"bi bi-x\" *ngIf=\"openFilter\"></i>\r\n    </button>\r\n    <div *ngIf=\"openFilter\">\r\n      <i class=\"bi bi-caret-up-fill arrow-up\"></i>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"customResponsiveStyle\">\r\n  <div class=\"customStyle -mt-12 px-8 flex flex-col\"\r\n    [ngClass]=\"{'bg-accent-200': theme === 'dgda','bg-accent-100': theme === 'ksreleif' || theme === 'comptechco'}\"\r\n    [@collapse]=\"!openFilter\">\r\n    <!-- <form\r\n        [formGroup]=\"searchForm\"\r\n        class=\"search-form\"\r\n        (ngSubmit)=\"submitForm()\"\r\n      >\r\n        <input\r\n          class=\"search-input\"\r\n          type=\"text\"\r\n          formControlName=\"text\"\r\n          [placeholder]=\"'search.search' | translate\"\r\n        />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form> -->\r\n    <div class=\"flex gap-x-18 flex-row mt-5 pb-3 overflow-x-auto\">\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <ng-container *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter [entityType]=\"entityType\" [filters]=\"aggregation.buckets\" [id]=\"aggregation.id\"\r\n                [selections]=\"aggregation.selection\" [title]=\"aggregation.field\" [prefix]=\"'search'\" [department]=\"\r\n                    aggregation.field === 'corr:to' ||\r\n                    aggregation.field === 'corr:from'\r\n                  \" [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n                [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\" (onFilterSelected)=\"FilterSelected($event)\">\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<div class=\"row wrapper\">\r\n  <div class=\"wrapper-overlay\" *ngIf=\"loading\"></div>\r\n  \r\n  <ng-container *ngIf=\"!customResponsiveStyle\">\r\n    <div class=\"popup-filter px-3 d-flex d-xl-none\" *ngIf=\"openFilter\">\r\n      <form [formGroup]=\"searchForm\" class=\"search-form\" (ngSubmit)=\"submitForm()\">\r\n        <input class=\"search-input\" type=\"text\" formControlName=\"text\" [matAutocomplete]=\"matAutocomplete1\" [placeholder]=\"'search.search' | translate\" />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form>\r\n      <mat-autocomplete\r\n      class=\"\r\n         auto-complete-iner-wrapper\r\n          auto-complete-wrapper\r\n      \"\r\n      [disableRipple]=\"true\"\r\n      #matAutocomplete1=\"matAutocomplete\"\r\n  >\r\n      <mat-option\r\n          class=\"no-text\"\r\n          *ngIf=\"resultSets && !resultSets.length\"\r\n      >\r\n          {{'no_result_found' | translate}}\r\n      </mat-option>\r\n      <ng-container *ngFor=\"let resultSet of resultSets\">\r\n          <mat-option  (click)=\"setOptionValue(resultSet.label)\">\r\n              <span\r\n                  class=\"option-iner-text\"\r\n                  >{{ resultSet.label }}</span\r\n              >\r\n          </mat-option >\r\n      </ng-container>\r\n      </mat-autocomplete>\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <div *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter [entityType]=\"entityType\" [filters]=\"aggregation.buckets\" [id]=\"aggregation.id\"\r\n                [selections]=\"aggregation.selection\" [title]=\"aggregation.field\" [prefix]=\"'search'\" [department]=\"\r\n                aggregation.field === 'corr:to' ||\r\n                aggregation.field === 'corr:from'\r\n              \" [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n                [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\" (onFilterSelected)=\"FilterSelected($event)\">\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"col-xl-3 search-sideMenu d-none d-xl-block\">\r\n    <form [formGroup]=\"searchForm\" class=\"search-form\" (ngSubmit)=\"submitForm()\">\r\n      <input class=\"search-input\" type=\"text\" formControlName=\"text\" [matAutocomplete]=\"matAutocomplete2\"\r\n        [placeholder]=\"'search.search' | translate\" />\r\n      <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n    </form>\r\n    <mat-autocomplete class=\"\r\n       auto-complete-iner-wrapper\r\n        auto-complete-wrapper\r\n    \" [disableRipple]=\"true\" #matAutocomplete2=\"matAutocomplete\">\r\n      <mat-option class=\"no-text\" *ngIf=\"resultSets && !resultSets.length\">\r\n        {{'no_result_found' | translate}}\r\n      </mat-option>\r\n      <ng-container *ngFor=\"let resultSet of resultSets\">\r\n        <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n          <span class=\"option-iner-text\">{{ resultSet.label }}</span>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n    <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n      <div *ngFor=\"let aggregation of aggregations\">\r\n        <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n          <cts-dynamic-filter [entityType]=\"entityType\" [filters]=\"aggregation.buckets\" [id]=\"aggregation.id\"\r\n            [selections]=\"aggregation.selection\" [title]=\"aggregation.field\" [prefix]=\"'search'\" [department]=\"\r\n              aggregation.field === 'corr:to' ||\r\n              aggregation.field === 'corr:from'\r\n            \" [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n            [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n            [config]=\"aggregation.config ? aggregation.config : {}\" (onFilterSelected)=\"FilterSelected($event)\">\r\n          </cts-dynamic-filter>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"col-12 col-xl-9\">\r\n    <app-card>\r\n      <div class=\"title\">\r\n        <h3>\r\n          {{ \"search.header\" | translate }}\r\n        </h3>\r\n      </div>\r\n      <div class=\"body\">\r\n        <div *ngIf=\"aggregations\" class=\"table-toolbar\">\r\n          <div class=\"result-count\">\r\n            <span>\r\n              {{\r\n              \"search.\" + \"resultsNumber\"\r\n              | translate: { value: totalRecords ? totalRecords : 0 }\r\n              }}\r\n            </span>\r\n          </div>\r\n          <div>\r\n            <form class=\"d-flex justify-between\" [formGroup]=\"searchForm\" (ngSubmit)=\"submitForm()\">\r\n              <div *ngIf=\"useToggleFilters && !customResponsiveStyle\"></div>\r\n              <div *ngIf=\"customResponsiveStyle\">\r\n                <div class=\"search-form custom-responsive-search\">\r\n                  <input class=\"search-input\" type=\"text\" formControlName=\"text\" [matAutocomplete]=\"matAutocomplete\"\r\n                    [placeholder]=\"'search.search' | translate\" />\r\n                  <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n                </div>\r\n                <mat-autocomplete\r\n                class=\"\r\n                   auto-complete-iner-wrapper\r\n                    auto-complete-wrapper\r\n                \"\r\n                [disableRipple]=\"true\"\r\n                #matAutocomplete=\"matAutocomplete\"\r\n            >\r\n                <mat-option\r\n                    class=\"no-text\"\r\n                    *ngIf=\"resultSets && !resultSets.length\"\r\n                >\r\n                    {{no_result_found | translate}}\r\n                </mat-option>\r\n                <ng-container *ngFor=\"let resultSet of resultSets\">\r\n                    <mat-option  (click)=\"setOptionValue(resultSet.label)\">\r\n                        <span\r\n                            class=\"option-iner-text\"\r\n                            >{{ resultSet.label }}</span\r\n                        >\r\n                    </mat-option >\r\n                </ng-container>\r\n                </mat-autocomplete>\r\n              </div>\r\n              <div class=\"d-flex\" *ngIf=\"useToggleFilters\">\r\n                <cts-dynamic-form-slide-toggleitem class=\"mx-2 small-font\" [label]=\"'search.PERSONAL_FILES'\"\r\n                  (onToggle)=\"submitForm()\" formControlName=\"personalFiles\">\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem class=\"mx-2 small-font\" [label]=\"'search.DEP_FILES'\"\r\n                  formControlName=\"depFiles\" (onToggle)=\"submitForm()\">\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem class=\"mx-2 small-font\" [label]=\"'search.WORKSPACE_FILES'\"\r\n                formControlName=\"workSpaceFiles\" (onToggle)=\"submitForm()\">\r\n              </cts-dynamic-form-slide-toggleitem>\r\n              </div>\r\n            </form>\r\n          </div>\r\n        </div>\r\n        <cts-dynamic-table #dynamicTable [pageSize]=\"pageSize\" [columns]=\"columns\" [responsiveColumns]=\"responsiveColumns\"\r\n          [pageProvider]=\"pageProvider\" [quickFilter]=\"filter\" [entityType]=\"entityType\" [fields]=\"fields\"\r\n          [queryParam]=\"queryParams\" [headers]=\"headers\" [prefix]=\"prefix\" [sortingBy]=\"sortingBy\" [isSearchPage]=\"true\"\r\n          (onRowSelected)=\"onRowSelected($event)\" (actionOnRow)=\"performAction($event)\"\r\n          (onGettingData)=\"getTableData($event)\"></cts-dynamic-table>\r\n      </div>\r\n    </app-card>\r\n  </div>\r\n\r\n  <ng-template #progressSpinner>\r\n    <div class=\"progress-spinner\">\r\n      <mat-spinner color=\"warn\" [diameter]=\"25\"></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #noAggregations>\r\n    <div class=\"progress-spinner\">\r\n      {{ \"search.noAggregations\" | translate }}\r\n    </div>\r\n  </ng-template>\r\n</div>", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.result-count{color:#8f98aa;font-size:14px}.search-sideMenu{background-color:#fff;padding-top:22px;padding-bottom:22px;border-radius:5px}.auto-complete-iner-wrapper{max-height:350px;border-radius:4px}.auto-complete-iner-wrapper .no-text{font-size:14px;color:#465573}.auto-complete-iner-wrapper .mat-option{text-align:start;color:#465573;font-weight:bold;font-size:14px}.auto-complete-iner-wrapper .mat-option .mat-option-text{text-align:flex-start}.search-form{display:flex;color:#6a768e;width:100%}.search-form .search-input{width:100%;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.search-form .search-input::-webkit-input-placeholder{font-size:14px}.search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.search-form .search-icon{background:#465573;color:#fff;width:12%;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}.small-font{font-size:14px}.custom-responsive-search{width:300px!important;margin:0 35px}.search-toolbar{position:relative;display:flex;justify-content:flex-end;margin-bottom:16px}.search-toolbar .my-button{width:90px}.search-toolbar .arrow-up{position:absolute;top:26px;right:28px;font-size:25px;color:#8f98aab3}.wrapper{position:relative}.wrapper .popup-filter{flex-direction:column;position:absolute;right:0;z-index:9999;max-height:70vh;max-width:400px;background-color:#fff;overflow:scroll;box-shadow:0 1px 10px 2px #00000054;top:-4px;border-radius:5px}.wrapper .popup-filter .search-form{margin-top:10px!important}.wrapper .popup-filter .search-input{width:100%!important}.wrapper .search-container{background-color:#fff;border-radius:5px;border:0px;padding:16px;height:max-content}.wrapper .search-container .table-toolbar{display:flex;align-items:center;margin-bottom:8px;justify-content:space-between}.wrapper .wrapper-overlay{position:absolute;top:0;bottom:0;right:0;left:0;z-index:9}.progress-spinner{margin-top:10px;margin-block-end:0;display:grid;place-items:center;width:100%}.rtl .popup-filter{left:0px;right:unset!important}.rtl .arrow-up{position:absolute;top:33px;left:28px;right:unset!important}@media (width: 1180px),(width: 820px){.customStyle cts-dynamic-filter .aggregation-container{width:176px!important}}.customStyle .search-form{display:flex;color:#6a768e;width:100%}.customStyle .search-form .search-input{width:288px;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.customStyle .search-form .search-input::-webkit-input-placeholder{font-size:14px}.customStyle .search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.customStyle .search-form .search-icon{background:#465573;color:#fff;width:40px;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}\n"], components: [{ type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: ["title", "filters", "selections", "id", "entityType", "prefix", "department", "componentType", "customPageProvider", "config"], outputs: ["onFilterSelected"] }, { type: i5$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: CardComponent, selector: "app-card", inputs: ["noBody", "dark"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"], outputs: ["onToggle"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "isLegacyMode", "showTotalRecord", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe }, animations: [
+DynamicSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicSearchComponent, selector: "cts-dynamic-search", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", sortingBy: "sortingBy", fullTextParamName: "fullTextParamName", filter: "filter", suggesterApi: "suggesterApi", onRowSelected: "onRowSelected", sortingArray: "sortingArray", customResponsiveStyle: "customResponsiveStyle", openCloseFilterFromOutside: "openCloseFilterFromOutside", theme: "theme" }, outputs: { actionOnRow: "actionOnRow" }, viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: ["dynamicTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!customResponsiveStyle\">\r\n  <div class=\"search-toolbar d-md-flex d-xl-none mx-3\">\r\n    <button (click)=\"onOpenFilter()\" class=\"my-button\">\r\n      <span> {{ \"FILTER\" | translate }}</span>\r\n      <i class=\"bi bi-filter\" *ngIf=\"!openFilter\"></i>\r\n      <i class=\"bi bi-x\" *ngIf=\"openFilter\"></i>\r\n    </button>\r\n    <div *ngIf=\"openFilter\">\r\n      <i class=\"bi bi-caret-up-fill arrow-up\"></i>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"customResponsiveStyle\">\r\n  <div class=\"customStyle -mt-12 px-8 flex flex-col\"\r\n    [ngClass]=\"{'bg-accent-200': theme === 'dgda','bg-accent-100': theme === 'ksreleif' || theme === 'comptechco'}\"\r\n    [@collapse]=\"!openFilter\">\r\n    <!-- <form\r\n        [formGroup]=\"searchForm\"\r\n        class=\"search-form\"\r\n        (ngSubmit)=\"submitForm()\"\r\n      >\r\n        <input\r\n          class=\"search-input\"\r\n          type=\"text\"\r\n          formControlName=\"text\"\r\n          [placeholder]=\"'search.search' | translate\"\r\n        />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form> -->\r\n    <div class=\"flex gap-x-18 flex-row mt-5 pb-3 overflow-x-auto\">\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <ng-container *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter [entityType]=\"entityType\" [filters]=\"aggregation.buckets\" [id]=\"aggregation.id\"\r\n                [selections]=\"aggregation.selection\" [title]=\"aggregation.field\" [prefix]=\"'search'\" [department]=\"\r\n                    aggregation.field === 'corr:to' ||\r\n                    aggregation.field === 'corr:from'\r\n                  \" [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n                [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\" (onFilterSelected)=\"FilterSelected($event)\">\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<div class=\"row wrapper\">\r\n  <div class=\"wrapper-overlay\" *ngIf=\"loading\"></div>\r\n  \r\n  <ng-container *ngIf=\"!customResponsiveStyle\">\r\n    <div class=\"popup-filter px-3 d-flex d-xl-none\" *ngIf=\"openFilter\">\r\n      <form [formGroup]=\"searchForm\" class=\"search-form\" (ngSubmit)=\"submitForm()\">\r\n        <input class=\"search-input\" type=\"text\" formControlName=\"text\" [matAutocomplete]=\"matAutocomplete1\" [placeholder]=\"'search.search' | translate\" />\r\n        <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n      </form>\r\n      <mat-autocomplete\r\n      class=\"\r\n         auto-complete-iner-wrapper\r\n          auto-complete-wrapper\r\n      \"\r\n      [disableRipple]=\"true\"\r\n      #matAutocomplete1=\"matAutocomplete\"\r\n  >\r\n      <mat-option\r\n          class=\"no-text\"\r\n          *ngIf=\"resultSets && !resultSets.length\"\r\n      >\r\n          {{'no_result_found' | translate}}\r\n      </mat-option>\r\n      <ng-container *ngFor=\"let resultSet of resultSets\">\r\n          <mat-option  (click)=\"setOptionValue(resultSet.label)\">\r\n              <span\r\n                  class=\"option-iner-text\"\r\n                  >{{ resultSet.label }}</span\r\n              >\r\n          </mat-option >\r\n      </ng-container>\r\n      </mat-autocomplete>\r\n      <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n        <ng-container *ngIf=\"aggregations.length; else noAggregations\">\r\n          <div *ngFor=\"let aggregation of aggregations\">\r\n            <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n              <cts-dynamic-filter [entityType]=\"entityType\" [filters]=\"aggregation.buckets\" [id]=\"aggregation.id\"\r\n                [selections]=\"aggregation.selection\" [title]=\"aggregation.field\" [prefix]=\"'search'\" [department]=\"\r\n                aggregation.field === 'corr:to' ||\r\n                aggregation.field === 'corr:from'\r\n              \" [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n                [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n                [config]=\"aggregation.config ? aggregation.config : {}\" (onFilterSelected)=\"FilterSelected($event)\">\r\n              </cts-dynamic-filter>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"col-xl-3 search-sideMenu d-none d-xl-block\">\r\n    <form [formGroup]=\"searchForm\" class=\"search-form\" (ngSubmit)=\"submitForm()\">\r\n      <input class=\"search-input\" type=\"text\" formControlName=\"text\" [matAutocomplete]=\"matAutocomplete2\"\r\n        [placeholder]=\"'search.search' | translate\" />\r\n      <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n    </form>\r\n    <mat-autocomplete class=\"\r\n       auto-complete-iner-wrapper\r\n        auto-complete-wrapper\r\n    \" [disableRipple]=\"true\" #matAutocomplete2=\"matAutocomplete\">\r\n      <mat-option class=\"no-text\" *ngIf=\"resultSets && !resultSets.length\">\r\n        {{'no_result_found' | translate}}\r\n      </mat-option>\r\n      <ng-container *ngFor=\"let resultSet of resultSets\">\r\n        <mat-option (click)=\"setOptionValue(resultSet.label)\">\r\n          <span class=\"option-iner-text\">{{ resultSet.label }}</span>\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n    <ng-container *ngIf=\"aggregations; else progressSpinner\">\r\n      <div *ngFor=\"let aggregation of aggregations\">\r\n        <ng-container *ngIf=\"aggregation.buckets.length > 0\">\r\n          <cts-dynamic-filter [entityType]=\"entityType\" [filters]=\"aggregation.buckets\" [id]=\"aggregation.id\"\r\n            [selections]=\"aggregation.selection\" [title]=\"aggregation.field\" [prefix]=\"'search'\" [department]=\"\r\n              aggregation.field === 'corr:to' ||\r\n              aggregation.field === 'corr:from'\r\n            \" [componentType]=\"aggregation.componentType ? aggregation.componentType : 'defult'\"\r\n            [customPageProvider]=\"aggregation.customPageProvider ? aggregation.customPageProvider : ''\"\r\n            [config]=\"aggregation.config ? aggregation.config : {}\" (onFilterSelected)=\"FilterSelected($event)\">\r\n          </cts-dynamic-filter>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"col-12 col-xl-9\">\r\n    <app-card>\r\n      <div class=\"title\">\r\n        <h3>\r\n          {{ \"search.header\" | translate }}\r\n        </h3>\r\n      </div>\r\n      <div class=\"body\">\r\n        <div *ngIf=\"aggregations\" class=\"table-toolbar\">\r\n          <div class=\"result-count\">\r\n            <span>\r\n              {{\r\n              \"search.\" + \"resultsNumber\"\r\n              | translate: { value: totalRecords ? totalRecords : 0 }\r\n              }}\r\n            </span>\r\n          </div>\r\n          <div>\r\n            <form class=\"d-flex justify-between\" [formGroup]=\"searchForm\" (ngSubmit)=\"submitForm()\">\r\n              <div *ngIf=\"useToggleFilters && !customResponsiveStyle\"></div>\r\n              <div *ngIf=\"customResponsiveStyle\">\r\n                <div class=\"search-form custom-responsive-search\">\r\n                  <input class=\"search-input\" type=\"text\" formControlName=\"text\" [matAutocomplete]=\"matAutocomplete\"\r\n                    [placeholder]=\"'search.search' | translate\" />\r\n                  <div (click)=\"submitForm()\" class=\"search-icon bi bi-search\"></div>\r\n                </div>\r\n                <mat-autocomplete\r\n                class=\"\r\n                   auto-complete-iner-wrapper\r\n                    auto-complete-wrapper\r\n                \"\r\n                [disableRipple]=\"true\"\r\n                #matAutocomplete=\"matAutocomplete\"\r\n            >\r\n                <mat-option\r\n                    class=\"no-text\"\r\n                    *ngIf=\"resultSets && !resultSets.length\"\r\n                >\r\n                    {{no_result_found | translate}}\r\n                </mat-option>\r\n                <ng-container *ngFor=\"let resultSet of resultSets\">\r\n                    <mat-option  (click)=\"setOptionValue(resultSet.label)\">\r\n                        <span\r\n                            class=\"option-iner-text\"\r\n                            >{{ resultSet.label }}</span\r\n                        >\r\n                    </mat-option >\r\n                </ng-container>\r\n                </mat-autocomplete>\r\n              </div>\r\n              <div class=\"d-flex\" *ngIf=\"useToggleFilters\">\r\n                <cts-dynamic-form-slide-toggleitem class=\"mx-2 small-font\" [label]=\"'search.PERSONAL_FILES'\"\r\n                  (onToggle)=\"submitForm()\" formControlName=\"personalFiles\">\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem class=\"mx-2 small-font\" [label]=\"'search.DEP_FILES'\"\r\n                  formControlName=\"depFiles\" (onToggle)=\"submitForm()\">\r\n                </cts-dynamic-form-slide-toggleitem>\r\n                <cts-dynamic-form-slide-toggleitem class=\"mx-2 small-font\" [label]=\"'search.WORKSPACE_FILES'\"\r\n                formControlName=\"workSpaceFiles\" (onToggle)=\"submitForm()\">\r\n              </cts-dynamic-form-slide-toggleitem>\r\n              </div>\r\n            </form>\r\n          </div>\r\n        </div>\r\n        <cts-dynamic-table #dynamicTable [pageSize]=\"pageSize\" [columns]=\"columns\" [responsiveColumns]=\"responsiveColumns\"\r\n          [pageProvider]=\"pageProvider\" [quickFilter]=\"filter\" [entityType]=\"entityType\" [fields]=\"fields\"\r\n          [queryParam]=\"queryParams\" [headers]=\"headers\" [prefix]=\"prefix\" [sortingBy]=\"sortingBy\" [isSearchPage]=\"true\"\r\n          (onRowSelected)=\"onRowSelected($event)\" (actionOnRow)=\"performAction($event)\"\r\n          (onGettingData)=\"getTableData($event)\"></cts-dynamic-table>\r\n      </div>\r\n    </app-card>\r\n  </div>\r\n\r\n  <ng-template #progressSpinner>\r\n    <div class=\"progress-spinner\">\r\n      <mat-spinner color=\"warn\" [diameter]=\"25\"></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #noAggregations>\r\n    <div class=\"progress-spinner\">\r\n      {{ \"search.noAggregations\" | translate }}\r\n    </div>\r\n  </ng-template>\r\n</div>", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.result-count{color:#8f98aa;font-size:14px}.search-sideMenu{background-color:#fff;padding-top:22px;padding-bottom:22px;border-radius:5px}.auto-complete-iner-wrapper{max-height:350px;border-radius:4px}.auto-complete-iner-wrapper .no-text{font-size:14px;color:#465573}.auto-complete-iner-wrapper .mat-option{text-align:start;color:#465573;font-weight:bold;font-size:14px}.auto-complete-iner-wrapper .mat-option .mat-option-text{text-align:flex-start}.search-form{display:flex;color:#6a768e;width:100%}.search-form .search-input{width:100%;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.search-form .search-input::-webkit-input-placeholder{font-size:14px}.search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.search-form .search-icon{background:#465573;color:#fff;width:12%;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}.small-font{font-size:14px}.custom-responsive-search{width:300px!important;margin:0 35px}.search-toolbar{position:relative;display:flex;justify-content:flex-end;margin-bottom:16px}.search-toolbar .my-button{width:90px}.search-toolbar .arrow-up{position:absolute;top:26px;right:28px;font-size:25px;color:#8f98aab3}.wrapper{position:relative}.wrapper .popup-filter{flex-direction:column;position:absolute;right:0;z-index:9999;max-height:70vh;max-width:400px;background-color:#fff;overflow:scroll;box-shadow:0 1px 10px 2px #00000054;top:-4px;border-radius:5px}.wrapper .popup-filter .search-form{margin-top:10px!important}.wrapper .popup-filter .search-input{width:100%!important}.wrapper .search-container{background-color:#fff;border-radius:5px;border:0px;padding:16px;height:max-content}.wrapper .search-container .table-toolbar{display:flex;align-items:center;margin-bottom:8px;justify-content:space-between}.wrapper .wrapper-overlay{position:absolute;top:0;bottom:0;right:0;left:0;z-index:9}.progress-spinner{margin-top:10px;margin-block-end:0;display:grid;place-items:center;width:100%}.rtl .popup-filter{left:0px;right:unset!important}.rtl .arrow-up{position:absolute;top:33px;left:28px;right:unset!important}@media (width: 1180px),(width: 820px){.customStyle cts-dynamic-filter .aggregation-container{width:176px!important}}.customStyle .search-form{display:flex;color:#6a768e;width:100%}.customStyle .search-form .search-input{width:288px;border:1px solid #d9dce2;border-inline-end:0;border-start-start-radius:5px;border-end-start-radius:5px;border:1px solid #ccc;height:32px;font-size:16px;padding-inline-start:4px}.customStyle .search-form .search-input::-webkit-input-placeholder{font-size:14px}.customStyle .search-form .search-input:focus-visible{border:2px solid #465573;outline:transparent}.customStyle .search-form .search-icon{background:#465573;color:#fff;width:40px;display:flex;align-items:center;justify-content:center;border-radius:0;cursor:pointer;border:1px solid #d9dce2;border-start-end-radius:6px;border-end-end-radius:6px;border-inline-start:0}\n"], components: [{ type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: ["title", "filters", "selections", "id", "entityType", "prefix", "department", "componentType", "customPageProvider", "config"], outputs: ["onFilterSelected"] }, { type: i5$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: CardComponent, selector: "app-card", inputs: ["noBody", "dark"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"], outputs: ["onToggle"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "isLegacyMode", "showTotalRecord", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe }, animations: [
         trigger('collapse', [
             state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
             state('true', style({ height: '0', visibility: 'hidden' })),
@@ -22388,7 +22391,7 @@ class AttachmentsListComponent {
     }
 }
 AttachmentsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AttachmentsListComponent, deps: [{ token: NuxeoService }], target: i0.ɵɵFactoryTarget.Component });
-AttachmentsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AttachmentsListComponent, selector: "cts-attachments-list", inputs: { ancestorId: "ancestorId", provider: "provider", items: "items", batchList: "batchList", dontDelete: "dontDelete", canDelete: "canDelete", item: "item", keepFileExtension: "keepFileExtension" }, outputs: { deleteSuccess: "deleteSuccess", documentsCount: "documentsCount", documentSelect: "documentSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\r\n  <div class=\"doc-list\">\r\n    <ng-container>\r\n      <form [formGroup]=\"attachmentForm\">\r\n        <div formArrayName=\"attachmentCard\">\r\n          <div\r\n            class=\"doc-item\"\r\n            *ngFor=\"\r\n              let attachmentCardControl of attachmentForm.get('attachmentCard')[\r\n                'controls'\r\n              ];\r\n              let i = index\r\n            \"\r\n          >\r\n            <!-- (click)=\"preview(item.uid)\" -->\r\n            <div class=\"file-icon\">\r\n              <mat-icon>file_copy</mat-icon>\r\n            </div>\r\n            <div\r\n              [formGroupName]=\"i\"\r\n              class=\"attachmentForm-container row no-gutters\"\r\n            >\r\n              <div class=\"formControl-wrapper col-12 col-xl-6\">\r\n                <app-dynamic-form-textitem\r\n                  placeholder=\"{{ 'Title' | translate }}\"\r\n                  class=\"textitem\"\r\n                  formControlName=\"title\"\r\n                  \r\n                >\r\n                </app-dynamic-form-textitem>\r\n                <app-dynamic-form-textitem\r\n                  placeholder=\"{{\r\n                    'CREATE.ATTACHMENTS.REMARKS_PLACE_HOLDER' | translate\r\n                  }}\"\r\n                  class=\"textitem\"\r\n                  formControlName=\"remarks\"\r\n                >\r\n                </app-dynamic-form-textitem>\r\n              </div>\r\n              <div class=\"formControl-wrapper col-12 col-xl-6\">\r\n                <app-dynamic-form-vocabulary-item\r\n                  class=\"voc-form-control\"\r\n                  [bindLabel]=\"'label'\"\r\n                  [bindValue]=\"'id'\"\r\n                  placeholder=\"{{ 'VOCABULARY.TYPE' | translate }}\"\r\n                  [multiple]=\"false\"\r\n                  [searchable]=\"false\"\r\n                  [closeOnSelect]=\"true\"\r\n                  [hideSelectedItems]=\"false\"\r\n                  [vocabularyType]=\"'VOC_CorrespondenceAttachmentType'\"\r\n                  formControlName=\"category\"\r\n                >\r\n                </app-dynamic-form-vocabulary-item>\r\n                <app-dynamic-form-vocabulary-item\r\n                  class=\"voc-form-control\"\r\n                  [bindLabel]=\"'label'\"\r\n                  [bindValue]=\"'id'\"\r\n                  placeholder=\"{{ 'VOCABULARY.CLASSIFICATION' | translate }}\"\r\n                  [multiple]=\"false\"\r\n                  [searchable]=\"false\"\r\n                  [closeOnSelect]=\"true\"\r\n                  [hideSelectedItems]=\"false\"\r\n                  [vocabularyType]=\"'VOC_CorrespondenceAttachClassification'\"\r\n                  formControlName=\"classification\"\r\n                >\r\n                </app-dynamic-form-vocabulary-item>\r\n              </div>\r\n              <!-- <div class=\"formControl-toggleitem col-2 col-xl-2\">\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  label=\"{{ 'CREATE.ATTACHMENTS.ISOBJECT' | translate }}\"\r\n                  formControlName=\"isObject\"\r\n                ></cts-dynamic-form-slide-toggleitem>\r\n              </div> -->\r\n            </div>\r\n            <div class=\"btn-wrapper\">\r\n              <button\r\n                (click)=\"delInput(i)\"\r\n                class=\"btn btn-outline-danger btn-no-border\"\r\n              >\r\n                <!-- deleteDocument($event, attachmentCardControl.value.item) -->\r\n                <mat-icon>delete</mat-icon>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <mat-spinner class=\"centered-spinner\"></mat-spinner>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.doc-item{display:flex;flex:1;padding-top:6px;padding-bottom:6px;justify-content:space-between;align-items:center;padding-inline-end:4px;cursor:pointer;border:1px solid;border-color:#d9dce2}.doc-item .item-content{display:flex;align-items:center;justify-content:space-between}.doc-item .file-icon{margin:4px;color:#465573;display:flex;align-items:center}.attachmentForm-container{width:100%;grid-row-gap:6px;row-gap:6px}.attachmentForm-container .formControl-wrapper{display:flex;align-items:center;justify-content:space-between;grid-column-gap:10px;column-gap:10px;padding-inline-end:5px;padding-inline-start:5px}.attachmentForm-container .formControl-wrapper .voc-form-control{width:50%}.attachmentForm-container .formControl-wrapper .textitem{width:100%}.attachmentForm-container .formControl-toggleitem{display:flex;align-items:center;justify-content:center}.btn-wrapper{display:flex;justify-content:flex-end}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "nativeAutoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "autoCompleteType", "tenantId", "emitFullObject", "outsideParams", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id", "maxCharsNum"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["onlyIds", "bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "vocabularyType", "label", "cacheable", "shwoAllValues", "emitVocabulryRecordOnSelect"], outputs: ["onSelecting"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], 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: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
+AttachmentsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AttachmentsListComponent, selector: "cts-attachments-list", inputs: { ancestorId: "ancestorId", provider: "provider", items: "items", batchList: "batchList", dontDelete: "dontDelete", canDelete: "canDelete", item: "item", keepFileExtension: "keepFileExtension" }, outputs: { deleteSuccess: "deleteSuccess", documentsCount: "documentsCount", documentSelect: "documentSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\r\n  <div class=\"doc-list\">\r\n    <ng-container>\r\n      <form [formGroup]=\"attachmentForm\">\r\n        <div formArrayName=\"attachmentCard\">\r\n          <div\r\n            class=\"doc-item\"\r\n            *ngFor=\"\r\n              let attachmentCardControl of attachmentForm.get('attachmentCard')[\r\n                'controls'\r\n              ];\r\n              let i = index\r\n            \"\r\n          >\r\n            <!-- (click)=\"preview(item.uid)\" -->\r\n            <div class=\"file-icon\">\r\n              <mat-icon>file_copy</mat-icon>\r\n            </div>\r\n            <div\r\n              [formGroupName]=\"i\"\r\n              class=\"attachmentForm-container row no-gutters\"\r\n            >\r\n              <div class=\"formControl-wrapper col-12 col-xl-6\">\r\n                <app-dynamic-form-textitem\r\n                  placeholder=\"{{ 'Title' | translate }}\"\r\n                  class=\"textitem\"\r\n                  formControlName=\"title\"\r\n                  \r\n                >\r\n                </app-dynamic-form-textitem>\r\n                <app-dynamic-form-textitem\r\n                  placeholder=\"{{\r\n                    'CREATE.ATTACHMENTS.REMARKS_PLACE_HOLDER' | translate\r\n                  }}\"\r\n                  class=\"textitem\"\r\n                  formControlName=\"remarks\"\r\n                >\r\n                </app-dynamic-form-textitem>\r\n              </div>\r\n              <div class=\"formControl-wrapper col-12 col-xl-6\">\r\n                <app-dynamic-form-vocabulary-item\r\n                  class=\"voc-form-control\"\r\n                  [bindLabel]=\"'label'\"\r\n                  [bindValue]=\"'id'\"\r\n                  placeholder=\"{{ 'VOCABULARY.TYPE' | translate }}\"\r\n                  [multiple]=\"false\"\r\n                  [searchable]=\"false\"\r\n                  [closeOnSelect]=\"true\"\r\n                  [hideSelectedItems]=\"false\"\r\n                  [vocabularyType]=\"'VOC_CorrespondenceAttachmentType'\"\r\n                  formControlName=\"category\"\r\n                >\r\n                </app-dynamic-form-vocabulary-item>\r\n                <app-dynamic-form-vocabulary-item\r\n                  class=\"voc-form-control\"\r\n                  [bindLabel]=\"'label'\"\r\n                  [bindValue]=\"'id'\"\r\n                  placeholder=\"{{ 'VOCABULARY.CLASSIFICATION' | translate }}\"\r\n                  [multiple]=\"false\"\r\n                  [searchable]=\"false\"\r\n                  [closeOnSelect]=\"true\"\r\n                  [hideSelectedItems]=\"false\"\r\n                  [vocabularyType]=\"'VOC_CorrespondenceAttachClassification'\"\r\n                  formControlName=\"classification\"\r\n                >\r\n                </app-dynamic-form-vocabulary-item>\r\n              </div>\r\n              <!-- <div class=\"formControl-toggleitem col-2 col-xl-2\">\r\n                <cts-dynamic-form-slide-toggleitem\r\n                  label=\"{{ 'CREATE.ATTACHMENTS.ISOBJECT' | translate }}\"\r\n                  formControlName=\"isObject\"\r\n                ></cts-dynamic-form-slide-toggleitem>\r\n              </div> -->\r\n            </div>\r\n            <div class=\"btn-wrapper\">\r\n              <button\r\n                (click)=\"delInput(i)\"\r\n                class=\"btn btn-outline-danger btn-no-border\"\r\n              >\r\n                <!-- deleteDocument($event, attachmentCardControl.value.item) -->\r\n                <mat-icon>delete</mat-icon>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <mat-spinner class=\"centered-spinner\"></mat-spinner>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.doc-item{display:flex;flex:1;padding-top:6px;padding-bottom:6px;justify-content:space-between;align-items:center;padding-inline-end:4px;cursor:pointer;border:1px solid;border-color:#d9dce2}.doc-item .item-content{display:flex;align-items:center;justify-content:space-between}.doc-item .file-icon{margin:4px;color:#465573;display:flex;align-items:center}.attachmentForm-container{width:100%;grid-row-gap:6px;row-gap:6px}.attachmentForm-container .formControl-wrapper{display:flex;align-items:center;justify-content:space-between;grid-column-gap:10px;column-gap:10px;padding-inline-end:5px;padding-inline-start:5px}.attachmentForm-container .formControl-wrapper .voc-form-control{width:50%}.attachmentForm-container .formControl-wrapper .textitem{width:100%}.attachmentForm-container .formControl-toggleitem{display:flex;align-items:center;justify-content:center}.btn-wrapper{display:flex;justify-content:flex-end}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "nativeAutoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "autoCompleteType", "tenantId", "emitFullObject", "outsideParams", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id", "maxCharsNum"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["onlyIds", "bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "vocabularyType", "label", "cacheable", "shwoAllValues", "emitVocabulryRecordOnSelect"], outputs: ["onSelecting"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], 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: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AttachmentsListComponent, decorators: [{
             type: Component,
             args: [{
@@ -22680,7 +22683,7 @@ class DocumentsListComponent {
     }
 }
 DocumentsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DocumentsListComponent, deps: [{ token: DocumentsService }, { token: NuxeoService }, { token: CustomToastrService }, { token: i1$3.MatDialog }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component });
-DocumentsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DocumentsListComponent, selector: "app-documents-list", inputs: { ancestorId: "ancestorId", provider: "provider", disablePagination: "disablePagination", containerClasses: "containerClasses", itemsClasses: "itemsClasses", items: "items", notifier: "notifier", canPreview: "canPreview", batchList: "batchList", dontDelete: "dontDelete", canDelete: "canDelete", quickFilters: "quickFilters", memoView: "memoView" }, outputs: { deleteSuccess: "deleteSuccess", documentsCount: "documentsCount", documentSelect: "documentSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isFetching; else spinner\">\r\n  <div *ngIf=\"items.length; else noEntry\">\r\n    <div class=\"doc-list\">\r\n      <div class=\"doc-item\" (click)=\"preview(item.uid)\" *ngFor=\"\r\n          let item of items\r\n          ;\r\n          let last = last\r\n        \">\r\n        <div class=\"item-content\">\r\n          <mat-icon class=\"file-icon\">file_copy</mat-icon>\r\n          {{ item.title }}\r\n        </div>\r\n        <button *ngIf=\"canDelete && isCreator(item)\" (click)=\"deleteDocument($event, item)\"\r\n          class=\"btn btn-outline-danger btn-no-border\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div  [ngClass]=\"{ 'hidden': disablePagination }\" class=\"wrapping-pagination my-3\">\r\n      <cts-pagination [page]=\"p\" (change)=\"onChange($event)\"\r\n      [size]=\"count\" [count]=\"totalRecords\">\r\n      </cts-pagination>\r\n    </div>\r\n  </div>\r\n  <ng-template #noEntry>\r\n    <!-- <app-no-entry [msg]=\"'documents.noEntry'\"></app-no-entry> -->\r\n    <!-- <cts-no-data\r\n      [message]=\"'documents.noEntry'\"\r\n ></cts-no-data> -->\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <mat-spinner class=\"centered-spinner\"></mat-spinner>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.doc-list{flex:1;justify-content:space-between;cursor:pointer;margin-bottom:14px;border:2px solid #d9dce2;margin-top:2px;border-radius:5px}.wrapping-pagination{display:flex;justify-content:center;align-items:center}.doc-item{display:flex;flex:1;justify-content:space-between;cursor:pointer;padding:8px;border-bottom:1px solid;border-color:#d9dce2}.doc-item:last-child{border-width:0px}.doc-item .item-content{display:flex;align-items:center;justify-content:space-between}.doc-item .file-icon{margin:8px;color:#465573}.pagination{justify-self:center}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+DocumentsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DocumentsListComponent, selector: "app-documents-list", inputs: { ancestorId: "ancestorId", provider: "provider", disablePagination: "disablePagination", containerClasses: "containerClasses", itemsClasses: "itemsClasses", items: "items", notifier: "notifier", canPreview: "canPreview", batchList: "batchList", dontDelete: "dontDelete", canDelete: "canDelete", quickFilters: "quickFilters", memoView: "memoView" }, outputs: { deleteSuccess: "deleteSuccess", documentsCount: "documentsCount", documentSelect: "documentSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isFetching; else spinner\">\r\n  <div *ngIf=\"items.length; else noEntry\">\r\n    <div class=\"doc-list\">\r\n      <div class=\"doc-item\" (click)=\"preview(item.uid)\" *ngFor=\"\r\n          let item of items\r\n          ;\r\n          let last = last\r\n        \">\r\n        <div class=\"item-content\">\r\n          <mat-icon class=\"file-icon\">file_copy</mat-icon>\r\n          {{ item.title }}\r\n        </div>\r\n        <button *ngIf=\"canDelete && isCreator(item)\" (click)=\"deleteDocument($event, item)\"\r\n          class=\"btn btn-outline-danger btn-no-border\">\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div  [ngClass]=\"{ 'hidden': disablePagination }\" class=\"wrapping-pagination my-3\">\r\n      <cts-pagination [page]=\"p\" (change)=\"onChange($event)\"\r\n      [size]=\"count\" [count]=\"totalRecords\">\r\n      </cts-pagination>\r\n    </div>\r\n  </div>\r\n  <ng-template #noEntry>\r\n    <!-- <app-no-entry [msg]=\"'documents.noEntry'\"></app-no-entry> -->\r\n    <!-- <cts-no-data\r\n      [message]=\"'documents.noEntry'\"\r\n ></cts-no-data> -->\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <mat-spinner class=\"centered-spinner\"></mat-spinner>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.doc-list{flex:1;justify-content:space-between;cursor:pointer;margin-bottom:14px;border:2px solid #d9dce2;margin-top:2px;border-radius:5px}.wrapping-pagination{display:flex;justify-content:center;align-items:center}.doc-item{display:flex;flex:1;justify-content:space-between;cursor:pointer;padding:8px;border-bottom:1px solid;border-color:#d9dce2}.doc-item:last-child{border-width:0px}.doc-item .item-content{display:flex;align-items:center;justify-content:space-between}.doc-item .file-icon{margin:8px;color:#465573}.pagination{justify-self:center}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DocumentsListComponent, decorators: [{
             type: Component,
             args: [{
@@ -23694,7 +23697,7 @@ class ScanComponent {
     }
 }
 ScanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ScanComponent, deps: [{ token: i1.TranslateService }, { token: DocumentsService }, { token: i4$1.DatePipe }, { token: DocumentScanService }, { token: 'environment' }, { token: APP_BASE_HREF }], target: i0.ɵɵFactoryTarget.Component });
-ScanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ScanComponent, selector: "app-document-scan", inputs: { useStoredFile: "useStoredFile", hideUploadButton: "hideUploadButton" }, outputs: { file: "file" }, host: { classAttribute: "scanner" }, ngImport: i0, template: "<div id=\"DWTcontainer\">\r\n  <div id=\"DWTcontainerTop\">\r\n    <div id=\"divEdit\">\r\n      <ul class=\"operateGrp\">\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/ShowEditor.png\" [title]=\"'scanner.showImageEditor' | translate\"\r\n            [alt]=\"'scanner.showImageEditor' | translate\" id=\"btnEditor\" (click)=\"btnShowImageEditor_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/RotateLeft.png\" [title]=\"'scanner.rotateLeft' | translate\"\r\n            [alt]=\"'scanner.rotateLeft' | translate\" id=\"btnRotateL\" (click)=\"btnRotateLeft_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/RotateRight.png\" [title]=\"'scanner.rotateRight' | translate\"\r\n            [alt]=\"'scanner.rotateRight' | translate\" id=\"btnRotateR\" (click)=\"btnRotateRight_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/Rotate180.png\" [alt]=\"'scanner.rotate180' | translate\"\r\n            [title]=\"'scanner.rotate180' | translate\" (click)=\"btnRotate180_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/Mirror.png\" [title]=\"'scanner.mirror' | translate\"\r\n            [alt]=\"'scanner.mirror' | translate\" id=\"btnMirror\" (click)=\"btnMirror_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/Flip.png\" [title]=\"'scanner.flip' | translate\"\r\n            [alt]=\"'scanner.flip' | translate\" id=\"btnFlip\" (click)=\"btnFlip_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/RemoveSelectedImages.png\"\r\n            [title]=\"'scanner.removeSelected' | translate\" [alt]=\"'scanner.removeSelected' | translate\"\r\n            id=\"DW_btnRemoveCurrentImage\" (click)=\"btnRemoveCurrentImage_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/RemoveAllImages.png\" [title]=\"'scanner.removeAll' | translate\"\r\n            [alt]=\"'scanner.removeAll' | translate\" id=\"DW_btnRemoveAllImages\" (click)=\"btnRemoveAllImages_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/ChangeSize.png\" [title]=\"'scanner.resize' | translate\"\r\n            [alt]=\"'scanner.resize' | translate\" id=\"btnChangeImageSize\" (click)=\"btnChangeImageSize_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/Crop.png\" [title]=\"'scanner.crop' | translate\"\r\n            [alt]=\"'scanner.crop' | translate\" id=\"btnCrop\" (click)=\"btnCrop_onclick()\" />\r\n        </li>\r\n      </ul>\r\n      <div id=\"ImgSizeEditor\" style=\"visibility:hidden\">\r\n        <ul>\r\n          <li>\r\n            <label for=\"img_height\">{{ 'scanner.newHeight' | translate }} :\r\n              <input type=\"text\" id=\"img_height\" style=\"width:50%;\" size=\"10\" />\r\n              {{ 'scanner.pixel' | translate }}</label>\r\n          </li>\r\n          <li>\r\n            <label for=\"img_width\">{{ 'scanner.newWidth' | translate }} :&nbsp;\r\n              <input type=\"text\" id=\"img_width\" style=\"width:50%;\" size=\"10\" />\r\n              {{ 'scanner.pixel' | translate }}</label>\r\n          </li>\r\n          <li>\r\n            {{ 'scanner.InterpolationMethod' | translate }}:\r\n            <select size=\"1\" id=\"InterpolationMethod\">\r\n              <option value=\"\"></option>\r\n            </select>\r\n          </li>\r\n          <li style=\"text-align:center;\">\r\n            <input type=\"button\" value=\"   OK   \" id=\"btnChangeImageSizeOK\" (click)=\"btnChangeImageSizeOK_onclick()\" />\r\n            <input type=\"button\" value=\" Cancel \" id=\"btnCancelChange\" (click)=\"btnCancelChange_onclick()\" />\r\n          </li>\r\n        </ul>\r\n      </div>\r\n    </div>\r\n    <div id=\"dwtcontrolContainer\"></div>\r\n    <div id=\"btnGroupBtm\">\r\n      <div class=\"ct-lt\">\r\n        {{ 'scanner.page' | translate }}:\r\n        <input id=\"DW_btnFirstImage\" (click)=\"btnFirstImage_onclick()\" type=\"button\" value=\" |< \" />&nbsp;\r\n        <input id=\"DW_btnPreImage\" (click)=\"btnPreImage_onclick()\" type=\"button\" value=\" < \" />&nbsp;&nbsp;\r\n        <input type=\"text\" size=\"2\" id=\"DW_CurrentImage\" readonly=\"readonly\" />\r\n        /\r\n        <input type=\"text\" size=\"2\" id=\"DW_TotalImage\" readonly=\"readonly\" />&nbsp;&nbsp;\r\n        <input id=\"DW_btnNextImage\" (click)=\"btnNextImage_onclick()\" type=\"button\" value=\"> \" />&nbsp;\r\n        <input id=\"DW_btnLastImage\" (click)=\"btnLastImage_onclick()\" type=\"button\" value=\">| \" />\r\n      </div>\r\n      <div class=\"ct-rt\">\r\n        {{ 'scanner.preview' | translate }}:\r\n        <select size=\"1\" id=\"DW_PreviewMode\" (change)=\"setlPreviewMode()\">\r\n          <option value=\"0\">1X1</option>\r\n          <option value=\"1\">2X2</option>\r\n          <option value=\"2\">3X3</option>\r\n          <option value=\"3\">4X4</option>\r\n          <option value=\"4\">5X5</option>\r\n        </select><br />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div id=\"ScanWrapper\">\r\n    <div id=\"divScanner\" class=\"divinput\">\r\n      <div id=\"div_ScanImage\" class=\"divTableStyle\">\r\n        <ul id=\"ulScaneImageHIDE\">\r\n          <li>\r\n            <label for=\"source\">\r\n              <p>{{ 'scanner.source' | translate }}:</p>\r\n            </label>\r\n            <select size=\"1\" id=\"source\" style=\"position:relative;\" (change)=\"source_onchange()\">\r\n              <option value=\"\"></option>\r\n            </select>\r\n          </li>\r\n          <li style=\"display:none;\" id=\"pNoScanner\">\r\n            <a href=\"javascript: void(0)\" class=\"ShowtblLoadImage\" style=\"color:#fe8e14\" id=\"aNoScanner\">(No TWAIN\r\n              compatible drivers detected)</a>\r\n          </li>\r\n          <li id=\"divProductDetail\">\r\n            <ul id=\"divTwainType\">\r\n              <li>\r\n                <label id=\"lblShowUI\" for=\"ShowUI\">\r\n                  <input type=\"checkbox\" id=\"ShowUI\" />{{\r\n                  'scanner.ShowUI' | translate\r\n                  }}&nbsp;</label>\r\n                <label for=\"ADF\">\r\n                  <input type=\"checkbox\" id=\"ADF\" />{{\r\n                  'scanner.AutoFeeder' | translate\r\n                  }}&nbsp;</label>\r\n                <label for=\"Duplex\">\r\n                  <input type=\"checkbox\" id=\"Duplex\" />{{\r\n                  'scanner.Duplex' | translate\r\n                  }}</label>\r\n              </li>\r\n              <li>\r\n                {{ 'scanner.PixelType' | translate }}:\r\n                <label for=\"BW\" style=\"margin-left:5px;\">\r\n                  <input type=\"radio\" id=\"BW\" name=\"PixelType\" />{{\r\n                  'scanner.B&W' | translate\r\n                  }}</label>\r\n                <label for=\"Gray\">\r\n                  <input type=\"radio\" id=\"Gray\" name=\"PixelType\" />{{\r\n                  'scanner.Gray' | translate\r\n                  }}</label>\r\n                <label for=\"RGB\">\r\n                  <input type=\"radio\" id=\"RGB\" name=\"PixelType\" />{{\r\n                  'scanner.Color' | translate\r\n                  }}</label>\r\n              </li>\r\n              <li>\r\n                <span>{{ 'scanner.Resolution' | translate }}:&nbsp;</span><select size=\"1\" id=\"Resolution\">\r\n                  <option value=\"100\">100</option>\r\n                  <option value=\"150\">150</option>\r\n                  <option value=\"200\">200</option>\r\n                  <option value=\"300\" selected>300</option>\r\n                </select>\r\n              </li>\r\n            </ul>\r\n          </li>\r\n\r\n          <button id=\"btnScan\" disabled=\"disabled\" (click)=\"acquireImage()\" type=\"button\" class=\"btn mx-2\">\r\n            <i class=\"bi bi-upc-upload icon\"></i>\r\n            <span> {{ 'scanner.scan' | translate }}</span>\r\n          </button>\r\n          <button (click)=\"btnLoadImagesOrPDFs_onclick()\" type=\"button\" class=\"btn\">\r\n            <i class=\"bi bi-upload icon\"></i>\r\n            <span> {{ 'scanner.load' | translate }}</span>\r\n          </button>\r\n          \r\n        </ul>\r\n      </div>\r\n\r\n      <div class=\"row gap\">\r\n        <div class=\"col-12 mt-2\">\r\n          <button class=\"btn\" [ngClass]=\"{'hide-upload-button' : hideUploadButton}\" #scannerUploadButton id=\"scannerUploadButton\" [disabled]=\"DWObject?.HowManyImagesInBuffer === 0\" color=\"primary\"\r\n            (click)=\"convertToBlob()\">\r\n            {{ 'scanner.save' | translate }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".scanner img{vertical-align:middle;border:0}.scanner p{margin:0;padding:0}.scanner a:link,.scanner a:visited{color:#606060;text-decoration:none}.scanner a:hover{color:#fe8e14}.scanner input{font:normal 12px verdana;color:#444}.scanner input.invalid{background-color:#ff9;border:2px red inset}.scanner a img{border:none}.scanner a img:hover{border:none}.scanner ul{list-style:none;padding-left:0;margin:0}.scanner .container{width:980px;margin:0 auto}.scanner .container:after,.scanner .clearfix:after{content:\"\";display:table;clear:both}.scanner .tc{text-align:center}.scanner .btnOrg{padding:0 15px;height:30px;line-height:28px;font-size:14px;color:#fff;background:#50a8e1;border:none;outline:none;cursor:pointer;border-radius:5px;-webkit-border-radius:5px;-moz-border-right-colors:5px;transition:all .2s ease-in-out}.scanner .btnOrg:hover{background:#61c2ec}.scanner .d-btn{display:inline-block;padding:0 25px;height:36px;line-height:30px;color:#fe8e14;font-size:14px;text-align:center;cursor:pointer;border:solid 2px #fe8e14;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;transition:all .2s ease-in-out}.scanner .d-btn:link,.scanner .d-btn:visited{color:#fe8e14}.scanner .d-btn:hover{color:#ffae38;border:solid 2px #ffae38}.scanner .d-btn.lgBtn{height:46px;line-height:40px}.scanner .d-btn.mdBtn{height:42px;line-height:36px}.scanner .d-btn.smBtn{height:38px;line-height:32px}.scanner .d-btn.bgOrange{background:#fe8e14;color:#fff}.scanner .d-btn.bgOrange:hover{background:#ffae38}.scanner .d-btn.bgBlue{border-color:#50a8e1;background:#50a8e1;color:#fff}.scanner .d-btn.bgBlue:hover{border-color:#61c2ec;background:#61c2ec}.scanner #dwtScanDemo{width:980px;margin:0 auto}.scanner #dwtScanDemo .ct-top{padding:0 0 15px}.scanner #dwtScanDemo .ct-top .title{font-size:18px;line-height:27px;color:#444}.scanner #dwtScanDemo .ct-top .desc{margin:0 15px 0 30px;font-size:14px;line-height:24px;color:#aaa}.scanner #DWTcontainer{display:flex;justify-content:space-between;flex-direction:row}.scanner #DWTcontainerTop{position:relative;float:left;flex:1;margin:0 10px;height:auto;border:1px solid #ccc;display:flex;justify-content:space-between;flex-direction:row}.scanner .ds-dwt-container-box>div{border:none!important}.scanner #divEdit{float:left;margin:0;padding:0;width:60px;background:#fff;border-right:1px solid #ccc}.scanner #divEdit .operateGrp li{margin:0;width:60px;height:57px;line-height:52px;border-bottom:solid 1px #ccc;text-align:center}.scanner #divEdit .operateGrp li:nth-last-child(2){height:58px}.scanner #divEdit .operateGrp li:last-child{height:56px;border-bottom:none}.scanner #divEdit .operateGrp li>img{cursor:pointer}.scanner #Crop{padding:10px 5px 5px;text-align:center;border-collapse:collapse;border:3px solid #ce5e04;position:absolute;height:80px;z-index:1;background-color:#f0f0f0;width:250px}.scanner #ImgSizeEditor{padding:10px 15px;position:absolute;z-index:1;top:513px;left:-1px;height:auto;width:320px;font-size:14px;color:#606060;text-align:left;background-color:#f5f5f5;border-collapse:collapse;border:1px solid #ccc;box-shadow:4px 4px 18px #ccc;-webkit-box-shadow:4px 4px 18px #ccc;-moz-box-shadow:4px 4px 18px #ccc}.scanner #ImgSizeEditor li{margin-bottom:5px}.scanner #ImgSizeEditor input{background:#fff;border:solid 1px #ccc}.scanner #ImgSizeEditor input[type=text]{padding-left:3px}.scanner #ImgSizeEditor input[type=button]{padding:5px;margin:6px 5px 0}.scanner #dwtcontrolContainer{float:left;width:100%;height:calc(100% - 58px)}.scanner #dwtcontrolContainer .dynamsoft-dwt-container-box>div{border:none!important}.scanner #dwt-NonInstallContainerID{float:left;width:560px;height:590px}.scanner #DWTcontainerTop #btnGroupBtm{position:absolute;bottom:0;padding:15px;width:calc(100% - 60px);height:58px;background:#f5f5f5;border-top:1px solid #ccc;font-size:14px;color:#606060;vertical-align:bottom;display:flex;justify-content:space-between;flex-direction:row;align-items:center;box-sizing:border-box;left:60px}.scanner #btnGroupBtm .ct-lt{float:left}.scanner #btnGroupBtm .ct-lt input{padding:0;margin-right:6px;width:25px;height:20px;font-size:10px;background:#f5f5f5;border:solid 1px #bbbcc0;outline:none;cursor:pointer}.scanner #btnGroupBtm .ct-lt input[type=text]{height:20px;font-size:12px;border:none;cursor:default}.scanner #btnGroupBtm .ct-lt #DW_btnFirstImage{margin-left:5px}.scanner #btnGroupBtm .ct-lt #DW_CurrentImage{margin:0 0 0 -13px;text-align:right}.scanner #btnGroupBtm .ct-lt #DW_TotalImage{margin:0 -7px 0 0;text-align:left}.scanner #btnGroupBtm .ct-rt{float:right}.scanner #DW_PreviewMode{padding:0 5px;margin-left:5px;height:26px;border:solid 1px #d8d8d8;color:#444;outline:none;border-radius:5px;cursor:pointer}.scanner #ScanWrapper{width:315px;height:570px;box-sizing:border-box}.scanner div.divinput{font-size:14px;color:#606060;line-height:24px;margin-bottom:20px}.scanner .divType,.scanner #ScanWrapper .toggle{padding-left:20px;height:38px;line-height:36px;font-size:14px;color:#444;border-bottom:solid 1px #ccc;background:#eee;cursor:pointer}.scanner #ScanWrapper .toggle{cursor:default}.scanner .mark_arrow{display:block;float:right;margin:15px 20px 0 0;width:12px;height:8px}.scanner .divTableStyle{border:3px solid #ccc;border-radius:5px;padding:10px;border-bottom:solid 1px #ccc}.scanner .divTableStyle input[type=radio],.scanner .divTableStyle input[type=checkbox]{margin:0 5px!important;height:13px;display:inline-block}.scanner #ScanWrapper select,.scanner #divUpload input[type=text]{margin-top:3px;margin-bottom:6px;height:26px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.scanner #ScanWrapper input[type=checkbox],.scanner #ScanWrapper input[type=radio]{margin:0 3px 0 0}.scanner #divScanner{border-bottom:none}.scanner #PCollapse{list-style:none inside none;margin-left:0;padding-left:0}.scanner select#source{margin-top:3px;padding-left:3px;width:100%;font-size:12px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.scanner select#Resolution{margin-left:3px;width:192px;height:26px}.scanner #divProductDetail li{margin-top:8px}.scanner #divProductDetail li:first-child{margin-top:3px}.scanner #divProductDetail li label{display:inline-block;margin:0 4px;font-size:12px}.scanner #divProductDetail li label:last-child{margin:0}.scanner #divProductDetail li label input{width:15px;height:15px;vertical-align:middle}.scanner #btnScan{margin-top:10px;margin-bottom:5px}.scanner #div_LoadLocalImage input[type=button]{margin:15px 0;width:90px;height:30px}.scanner #div_ScanImage{position:relative}.scanner #tblLoadImage{position:absolute;top:102px;z-index:1;padding:30px 22px;width:275px;height:128px;font-size:14px;line-height:30px;text-align:left;border:1px solid #fe8e14;background-color:#f5f5f5}.scanner #tblLoadImage>a{position:absolute;top:15px;right:15px;line-height:normal;text-decoration:none}.scanner #tblLoadImage a{color:#50a8e1}.scanner #tblLoadImage a:hover{color:#61c2ec}.scanner #divUpload input[type=text]{width:100%;padding-left:5px}.scanner #divUpload li label{display:inline-block;margin:0 8px 0 0;font-size:12px}.scanner #divUpload li img{margin-right:2px}.scanner #divUpload li label:last-child{margin-right:0}.scanner #divUpload li input{width:15px;height:15px;vertical-align:middle}.scanner #divUpload li:nth-child(3){margin:5px 0 8px}.scanner #divUpload li{padding:0 20px}.scanner #divUpload li:nth-child(2){padding-top:12px}.scanner #divUpload input[type=button]{margin:14px 0 20px}.scanner #divUpload #btnSave,.scanner #divUpload #btnUpload{padding:0;width:115px;height:30px;margin-right:15px;cursor:pointer}.scanner #divUpload #btnUpload{width:138px;margin-right:0}.scanner #DWTcontainerBtm{position:relative;float:left;width:980px}.scanner #DWTemessageContainer{float:left}.scanner #DWTemessageContainer input[type=text]{border:solid 1px #ccc;padding-left:3px}.scanner #DWTemessageContainer input[type=button]{cursor:pointer;margin:0 3px;outline:none}.scanner #DWTdivMsg{padding:5px 0 0;font-size:14px;color:#444}.scanner #DWTemessage{padding:6px 0 0 8px;margin-top:3px;width:632px;height:160px;border:solid 1px #ccc;overflow-y:scroll;background:#fff}.scanner #divNoteMessage{float:right;padding:10px 15px;margin-top:34px;width:315px;height:160px;font-size:12px;line-height:20px;border:1px solid #ccc;background:#e7f2fd;color:#606060}.scanner #divNoteMessage p{margin:0;color:#444}.scanner .ds-dialog-wrap,.scanner .ds-dialog-wrap div{box-sizing:content-box!important}.scanner .ds-dialog-wrap:before,.scanner .ds-dialog-wrap div:before,.scanner .ds-dialog-wrap:after,.scanner .ds-dialog-wrap div:after{box-sizing:content-box!important}.scanner .ks-overlay{position:absolute;left:-9999px;top:-9999px}.scanner .ks-ext-close{padding:0 20px;position:absolute;right:-5px;top:5px}.scanner .ks-ext-close,.scanner .ks-ext-close:link{color:#22a;text-decoration:none;cursor:pointer}.scanner .ks-ext-mask{background:#999;filter:alpha(opacity=70);-moz-opacity:.7;opacity:.7}.scanner .D-dailog .ks-ext-close .ks-ext-close-x{height:8px}.scanner .D-dailog .ks-ext-close,.scanner .D-dailog .ks-ext-close:hover{background:none;border:none}.scanner .D-dailog{position:absolute;left:-9999px;top:-99999px;margin:100px auto;padding:0;width:392px;height:262px;background-color:#f1f2f2}.scanner .D-dailog .D-dailog-body{width:350px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.scanner .D-dailog .D-dailog-body-Mac{width:350px;height:235px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.scanner .D-dailog .D-dailog-body-NotAllowed{color:#444;line-height:1.8;width:350px;height:185px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.scanner .D-dailog .D-dailog-body-Scan{width:380px;height:240px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.scanner .D-dailog .D-dailog-body-Scan-sample{width:380px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.scanner .D-dailog a{text-decoration:none}.scanner .link{text-decoration:underline}.scanner .D-dailog ul{margin:10px 0 10px 20px;list-style-type:disc}.scanner .red{color:red;margin-left:5px}.scanner #message{position:fixed;top:0px;left:0px;width:100%;z-index:105;text-align:center;font-weight:bold;font-size:100%;padding:10px 0;color:#239210;background-color:#e0f0d6;border:1px solid #54d33f;box-shadow:0 0 10px #3a3a3a}.scanner #MessageBody a{color:#6a9962;font-size:14px}.scanner #message span{text-align:center;width:95%;float:left}.scanner #MessageBoy a:hover{text-decoration:underline}.scanner .close-notify{white-space:nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}.scanner .close-notify a{color:#fff}.scanner .DWTPage{margin:0 auto}.hide-upload-button{opacity:0!important}\n"], directives: [{ type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+ScanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ScanComponent, selector: "app-document-scan", inputs: { useStoredFile: "useStoredFile", hideUploadButton: "hideUploadButton" }, outputs: { file: "file" }, host: { classAttribute: "scanner" }, ngImport: i0, template: "<div id=\"DWTcontainer\">\r\n  <div id=\"DWTcontainerTop\">\r\n    <div id=\"divEdit\">\r\n      <ul class=\"operateGrp\">\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/ShowEditor.png\" [title]=\"'scanner.showImageEditor' | translate\"\r\n            [alt]=\"'scanner.showImageEditor' | translate\" id=\"btnEditor\" (click)=\"btnShowImageEditor_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/RotateLeft.png\" [title]=\"'scanner.rotateLeft' | translate\"\r\n            [alt]=\"'scanner.rotateLeft' | translate\" id=\"btnRotateL\" (click)=\"btnRotateLeft_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/RotateRight.png\" [title]=\"'scanner.rotateRight' | translate\"\r\n            [alt]=\"'scanner.rotateRight' | translate\" id=\"btnRotateR\" (click)=\"btnRotateRight_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/Rotate180.png\" [alt]=\"'scanner.rotate180' | translate\"\r\n            [title]=\"'scanner.rotate180' | translate\" (click)=\"btnRotate180_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/Mirror.png\" [title]=\"'scanner.mirror' | translate\"\r\n            [alt]=\"'scanner.mirror' | translate\" id=\"btnMirror\" (click)=\"btnMirror_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/Flip.png\" [title]=\"'scanner.flip' | translate\"\r\n            [alt]=\"'scanner.flip' | translate\" id=\"btnFlip\" (click)=\"btnFlip_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/RemoveSelectedImages.png\"\r\n            [title]=\"'scanner.removeSelected' | translate\" [alt]=\"'scanner.removeSelected' | translate\"\r\n            id=\"DW_btnRemoveCurrentImage\" (click)=\"btnRemoveCurrentImage_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/RemoveAllImages.png\" [title]=\"'scanner.removeAll' | translate\"\r\n            [alt]=\"'scanner.removeAll' | translate\" id=\"DW_btnRemoveAllImages\" (click)=\"btnRemoveAllImages_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/ChangeSize.png\" [title]=\"'scanner.resize' | translate\"\r\n            [alt]=\"'scanner.resize' | translate\" id=\"btnChangeImageSize\" (click)=\"btnChangeImageSize_onclick()\" />\r\n        </li>\r\n        <li>\r\n          <img src=\"./assets/dwt-resources/Images/Crop.png\" [title]=\"'scanner.crop' | translate\"\r\n            [alt]=\"'scanner.crop' | translate\" id=\"btnCrop\" (click)=\"btnCrop_onclick()\" />\r\n        </li>\r\n      </ul>\r\n      <div id=\"ImgSizeEditor\" style=\"visibility:hidden\">\r\n        <ul>\r\n          <li>\r\n            <label for=\"img_height\">{{ 'scanner.newHeight' | translate }} :\r\n              <input type=\"text\" id=\"img_height\" style=\"width:50%;\" size=\"10\" />\r\n              {{ 'scanner.pixel' | translate }}</label>\r\n          </li>\r\n          <li>\r\n            <label for=\"img_width\">{{ 'scanner.newWidth' | translate }} :&nbsp;\r\n              <input type=\"text\" id=\"img_width\" style=\"width:50%;\" size=\"10\" />\r\n              {{ 'scanner.pixel' | translate }}</label>\r\n          </li>\r\n          <li>\r\n            {{ 'scanner.InterpolationMethod' | translate }}:\r\n            <select size=\"1\" id=\"InterpolationMethod\">\r\n              <option value=\"\"></option>\r\n            </select>\r\n          </li>\r\n          <li style=\"text-align:center;\">\r\n            <input type=\"button\" value=\"   OK   \" id=\"btnChangeImageSizeOK\" (click)=\"btnChangeImageSizeOK_onclick()\" />\r\n            <input type=\"button\" value=\" Cancel \" id=\"btnCancelChange\" (click)=\"btnCancelChange_onclick()\" />\r\n          </li>\r\n        </ul>\r\n      </div>\r\n    </div>\r\n    <div id=\"dwtcontrolContainer\"></div>\r\n    <div id=\"btnGroupBtm\">\r\n      <div class=\"ct-lt\">\r\n        {{ 'scanner.page' | translate }}:\r\n        <input id=\"DW_btnFirstImage\" (click)=\"btnFirstImage_onclick()\" type=\"button\" value=\" |< \" />&nbsp;\r\n        <input id=\"DW_btnPreImage\" (click)=\"btnPreImage_onclick()\" type=\"button\" value=\" < \" />&nbsp;&nbsp;\r\n        <input type=\"text\" size=\"2\" id=\"DW_CurrentImage\" readonly=\"readonly\" />\r\n        /\r\n        <input type=\"text\" size=\"2\" id=\"DW_TotalImage\" readonly=\"readonly\" />&nbsp;&nbsp;\r\n        <input id=\"DW_btnNextImage\" (click)=\"btnNextImage_onclick()\" type=\"button\" value=\"> \" />&nbsp;\r\n        <input id=\"DW_btnLastImage\" (click)=\"btnLastImage_onclick()\" type=\"button\" value=\">| \" />\r\n      </div>\r\n      <div class=\"ct-rt\">\r\n        {{ 'scanner.preview' | translate }}:\r\n        <select size=\"1\" id=\"DW_PreviewMode\" (change)=\"setlPreviewMode()\">\r\n          <option value=\"0\">1X1</option>\r\n          <option value=\"1\">2X2</option>\r\n          <option value=\"2\">3X3</option>\r\n          <option value=\"3\">4X4</option>\r\n          <option value=\"4\">5X5</option>\r\n        </select><br />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div id=\"ScanWrapper\">\r\n    <div id=\"divScanner\" class=\"divinput\">\r\n      <div id=\"div_ScanImage\" class=\"divTableStyle\">\r\n        <ul id=\"ulScaneImageHIDE\">\r\n          <li>\r\n            <label for=\"source\">\r\n              <p>{{ 'scanner.source' | translate }}:</p>\r\n            </label>\r\n            <select size=\"1\" id=\"source\" style=\"position:relative;\" (change)=\"source_onchange()\">\r\n              <option value=\"\"></option>\r\n            </select>\r\n          </li>\r\n          <li style=\"display:none;\" id=\"pNoScanner\">\r\n            <a href=\"javascript: void(0)\" class=\"ShowtblLoadImage\" style=\"color:#fe8e14\" id=\"aNoScanner\">(No TWAIN\r\n              compatible drivers detected)</a>\r\n          </li>\r\n          <li id=\"divProductDetail\">\r\n            <ul id=\"divTwainType\">\r\n              <li>\r\n                <label id=\"lblShowUI\" for=\"ShowUI\">\r\n                  <input type=\"checkbox\" id=\"ShowUI\" />{{\r\n                  'scanner.ShowUI' | translate\r\n                  }}&nbsp;</label>\r\n                <label for=\"ADF\">\r\n                  <input type=\"checkbox\" id=\"ADF\" />{{\r\n                  'scanner.AutoFeeder' | translate\r\n                  }}&nbsp;</label>\r\n                <label for=\"Duplex\">\r\n                  <input type=\"checkbox\" id=\"Duplex\" />{{\r\n                  'scanner.Duplex' | translate\r\n                  }}</label>\r\n              </li>\r\n              <li>\r\n                {{ 'scanner.PixelType' | translate }}:\r\n                <label for=\"BW\" style=\"margin-left:5px;\">\r\n                  <input type=\"radio\" id=\"BW\" name=\"PixelType\" />{{\r\n                  'scanner.B&W' | translate\r\n                  }}</label>\r\n                <label for=\"Gray\">\r\n                  <input type=\"radio\" id=\"Gray\" name=\"PixelType\" />{{\r\n                  'scanner.Gray' | translate\r\n                  }}</label>\r\n                <label for=\"RGB\">\r\n                  <input type=\"radio\" id=\"RGB\" name=\"PixelType\" />{{\r\n                  'scanner.Color' | translate\r\n                  }}</label>\r\n              </li>\r\n              <li>\r\n                <span>{{ 'scanner.Resolution' | translate }}:&nbsp;</span><select size=\"1\" id=\"Resolution\">\r\n                  <option value=\"100\">100</option>\r\n                  <option value=\"150\">150</option>\r\n                  <option value=\"200\">200</option>\r\n                  <option value=\"300\" selected>300</option>\r\n                </select>\r\n              </li>\r\n            </ul>\r\n          </li>\r\n\r\n          <button id=\"btnScan\" disabled=\"disabled\" (click)=\"acquireImage()\" type=\"button\" class=\"btn mx-2\">\r\n            <i class=\"bi bi-upc-upload icon\"></i>\r\n            <span> {{ 'scanner.scan' | translate }}</span>\r\n          </button>\r\n          <button (click)=\"btnLoadImagesOrPDFs_onclick()\" type=\"button\" class=\"btn\">\r\n            <i class=\"bi bi-upload icon\"></i>\r\n            <span> {{ 'scanner.load' | translate }}</span>\r\n          </button>\r\n          \r\n        </ul>\r\n      </div>\r\n\r\n      <div class=\"row gap\">\r\n        <div class=\"col-12 mt-2\">\r\n          <button class=\"btn\" [ngClass]=\"{'hide-upload-button' : hideUploadButton}\" #scannerUploadButton id=\"scannerUploadButton\" [disabled]=\"DWObject?.HowManyImagesInBuffer === 0\" color=\"primary\"\r\n            (click)=\"convertToBlob()\">\r\n            {{ 'scanner.save' | translate }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ndf-scanner img{vertical-align:middle;border:0}.ndf-scanner p{margin:0;padding:0}.ndf-scanner a:link,.ndf-scanner a:visited{color:#606060;text-decoration:none}.ndf-scanner a:hover{color:#fe8e14}.ndf-scanner input{font:normal 12px verdana;color:#444}.ndf-scanner input.invalid{background-color:#ff9;border:2px red inset}.ndf-scanner a img{border:none}.ndf-scanner a img:hover{border:none}.ndf-scanner ul{list-style:none;padding-left:0;margin:0}.ndf-scanner .container{width:980px;margin:0 auto}.ndf-scanner .container:after,.ndf-scanner .clearfix:after{content:\"\";display:table;clear:both}.ndf-scanner .tc{text-align:center}.ndf-scanner .btnOrg{padding:0 15px;height:30px;line-height:28px;font-size:14px;color:#fff;background:#50a8e1;border:none;outline:none;cursor:pointer;border-radius:5px;-webkit-border-radius:5px;-moz-border-right-colors:5px;transition:all .2s ease-in-out}.ndf-scanner .btnOrg:hover{background:#61c2ec}.ndf-scanner .d-btn{display:inline-block;padding:0 25px;height:36px;line-height:30px;color:#fe8e14;font-size:14px;text-align:center;cursor:pointer;border:solid 2px #fe8e14;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;transition:all .2s ease-in-out}.ndf-scanner .d-btn:link,.ndf-scanner .d-btn:visited{color:#fe8e14}.ndf-scanner .d-btn:hover{color:#ffae38;border:solid 2px #ffae38}.ndf-scanner .d-btn.lgBtn{height:46px;line-height:40px}.ndf-scanner .d-btn.mdBtn{height:42px;line-height:36px}.ndf-scanner .d-btn.smBtn{height:38px;line-height:32px}.ndf-scanner .d-btn.bgOrange{background:#fe8e14;color:#fff}.ndf-scanner .d-btn.bgOrange:hover{background:#ffae38}.ndf-scanner .d-btn.bgBlue{border-color:#50a8e1;background:#50a8e1;color:#fff}.ndf-scanner .d-btn.bgBlue:hover{border-color:#61c2ec;background:#61c2ec}.ndf-scanner #dwtScanDemo{width:980px;margin:0 auto}.ndf-scanner #dwtScanDemo .ct-top{padding:0 0 15px}.ndf-scanner #dwtScanDemo .ct-top .title{font-size:18px;line-height:27px;color:#444}.ndf-scanner #dwtScanDemo .ct-top .desc{margin:0 15px 0 30px;font-size:14px;line-height:24px;color:#aaa}.ndf-scanner #DWTcontainer{display:flex;justify-content:space-between;flex-direction:row}.ndf-scanner #DWTcontainerTop{position:relative;float:left;flex:1;margin:0 10px;height:auto;border:1px solid #ccc;display:flex;justify-content:space-between;flex-direction:row}.ndf-scanner .ds-dwt-container-box>div{border:none!important}.ndf-scanner #divEdit{float:left;margin:0;padding:0;width:60px;background:#fff;border-right:1px solid #ccc}.ndf-scanner #divEdit .operateGrp li{margin:0;width:60px;height:57px;line-height:52px;border-bottom:solid 1px #ccc;text-align:center}.ndf-scanner #divEdit .operateGrp li:nth-last-child(2){height:58px}.ndf-scanner #divEdit .operateGrp li:last-child{height:56px;border-bottom:none}.ndf-scanner #divEdit .operateGrp li>img{cursor:pointer}.ndf-scanner #Crop{padding:10px 5px 5px;text-align:center;border-collapse:collapse;border:3px solid #ce5e04;position:absolute;height:80px;z-index:1;background-color:#f0f0f0;width:250px}.ndf-scanner #ImgSizeEditor{padding:10px 15px;position:absolute;z-index:1;top:513px;left:-1px;height:auto;width:320px;font-size:14px;color:#606060;text-align:left;background-color:#f5f5f5;border-collapse:collapse;border:1px solid #ccc;box-shadow:4px 4px 18px #ccc;-webkit-box-shadow:4px 4px 18px #ccc;-moz-box-shadow:4px 4px 18px #ccc}.ndf-scanner #ImgSizeEditor li{margin-bottom:5px}.ndf-scanner #ImgSizeEditor input{background:#fff;border:solid 1px #ccc}.ndf-scanner #ImgSizeEditor input[type=text]{padding-left:3px}.ndf-scanner #ImgSizeEditor input[type=button]{padding:5px;margin:6px 5px 0}.ndf-scanner #dwtcontrolContainer{float:left;width:100%;height:calc(100% - 58px)}.ndf-scanner #dwtcontrolContainer .dynamsoft-dwt-container-box>div{border:none!important}.ndf-scanner #dwt-NonInstallContainerID{float:left;width:560px;height:590px}.ndf-scanner #DWTcontainerTop #btnGroupBtm{position:absolute;bottom:0;padding:15px;width:calc(100% - 60px);height:58px;background:#f5f5f5;border-top:1px solid #ccc;font-size:14px;color:#606060;vertical-align:bottom;display:flex;justify-content:space-between;flex-direction:row;align-items:center;box-sizing:border-box;left:60px}.ndf-scanner #btnGroupBtm .ct-lt{float:left}.ndf-scanner #btnGroupBtm .ct-lt input{padding:0;margin-right:6px;width:25px;height:20px;font-size:10px;background:#f5f5f5;border:solid 1px #bbbcc0;outline:none;cursor:pointer}.ndf-scanner #btnGroupBtm .ct-lt input[type=text]{height:20px;font-size:12px;border:none;cursor:default}.ndf-scanner #btnGroupBtm .ct-lt #DW_btnFirstImage{margin-left:5px}.ndf-scanner #btnGroupBtm .ct-lt #DW_CurrentImage{margin:0 0 0 -13px;text-align:right}.ndf-scanner #btnGroupBtm .ct-lt #DW_TotalImage{margin:0 -7px 0 0;text-align:left}.ndf-scanner #btnGroupBtm .ct-rt{float:right}.ndf-scanner #DW_PreviewMode{padding:0 5px;margin-left:5px;height:26px;border:solid 1px #d8d8d8;color:#444;outline:none;border-radius:5px;cursor:pointer}.ndf-scanner #ScanWrapper{width:315px;height:570px;box-sizing:border-box}.ndf-scanner div.divinput{font-size:14px;color:#606060;line-height:24px;margin-bottom:20px}.ndf-scanner .divType,.ndf-scanner #ScanWrapper .toggle{padding-left:20px;height:38px;line-height:36px;font-size:14px;color:#444;border-bottom:solid 1px #ccc;background:#eee;cursor:pointer}.ndf-scanner #ScanWrapper .toggle{cursor:default}.ndf-scanner .mark_arrow{display:block;float:right;margin:15px 20px 0 0;width:12px;height:8px}.ndf-scanner .divTableStyle{border:3px solid #ccc;border-radius:5px;padding:10px;border-bottom:solid 1px #ccc}.ndf-scanner .divTableStyle input[type=radio],.ndf-scanner .divTableStyle input[type=checkbox]{margin:0 5px!important;height:13px;display:inline-block}.ndf-scanner #ScanWrapper select,.ndf-scanner #divUpload input[type=text]{margin-top:3px;margin-bottom:6px;height:26px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.ndf-scanner #ScanWrapper input[type=checkbox],.ndf-scanner #ScanWrapper input[type=radio]{margin:0 3px 0 0}.ndf-scanner #divScanner{border-bottom:none}.ndf-scanner #PCollapse{list-style:none inside none;margin-left:0;padding-left:0}.ndf-scanner select#source{margin-top:3px;padding-left:3px;width:100%;font-size:12px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.ndf-scanner select#Resolution{margin-left:3px;width:192px;height:26px}.ndf-scanner #divProductDetail li{margin-top:8px}.ndf-scanner #divProductDetail li:first-child{margin-top:3px}.ndf-scanner #divProductDetail li label{display:inline-block;margin:0 4px;font-size:12px}.ndf-scanner #divProductDetail li label:last-child{margin:0}.ndf-scanner #divProductDetail li label input{width:15px;height:15px;vertical-align:middle}.ndf-scanner #btnScan{margin-top:10px;margin-bottom:5px}.ndf-scanner #div_LoadLocalImage input[type=button]{margin:15px 0;width:90px;height:30px}.ndf-scanner #div_ScanImage{position:relative}.ndf-scanner #tblLoadImage{position:absolute;top:102px;z-index:1;padding:30px 22px;width:275px;height:128px;font-size:14px;line-height:30px;text-align:left;border:1px solid #fe8e14;background-color:#f5f5f5}.ndf-scanner #tblLoadImage>a{position:absolute;top:15px;right:15px;line-height:normal;text-decoration:none}.ndf-scanner #tblLoadImage a{color:#50a8e1}.ndf-scanner #tblLoadImage a:hover{color:#61c2ec}.ndf-scanner #divUpload input[type=text]{width:100%;padding-left:5px}.ndf-scanner #divUpload li label{display:inline-block;margin:0 8px 0 0;font-size:12px}.ndf-scanner #divUpload li img{margin-right:2px}.ndf-scanner #divUpload li label:last-child{margin-right:0}.ndf-scanner #divUpload li input{width:15px;height:15px;vertical-align:middle}.ndf-scanner #divUpload li:nth-child(3){margin:5px 0 8px}.ndf-scanner #divUpload li{padding:0 20px}.ndf-scanner #divUpload li:nth-child(2){padding-top:12px}.ndf-scanner #divUpload input[type=button]{margin:14px 0 20px}.ndf-scanner #divUpload #btnSave,.ndf-scanner #divUpload #btnUpload{padding:0;width:115px;height:30px;margin-right:15px;cursor:pointer}.ndf-scanner #divUpload #btnUpload{width:138px;margin-right:0}.ndf-scanner #DWTcontainerBtm{position:relative;float:left;width:980px}.ndf-scanner #DWTemessageContainer{float:left}.ndf-scanner #DWTemessageContainer input[type=text]{border:solid 1px #ccc;padding-left:3px}.ndf-scanner #DWTemessageContainer input[type=button]{cursor:pointer;margin:0 3px;outline:none}.ndf-scanner #DWTdivMsg{padding:5px 0 0;font-size:14px;color:#444}.ndf-scanner #DWTemessage{padding:6px 0 0 8px;margin-top:3px;width:632px;height:160px;border:solid 1px #ccc;overflow-y:scroll;background:#fff}.ndf-scanner #divNoteMessage{float:right;padding:10px 15px;margin-top:34px;width:315px;height:160px;font-size:12px;line-height:20px;border:1px solid #ccc;background:#e7f2fd;color:#606060}.ndf-scanner #divNoteMessage p{margin:0;color:#444}.ndf-scanner .ds-dialog-wrap,.ndf-scanner .ds-dialog-wrap div{box-sizing:content-box!important}.ndf-scanner .ds-dialog-wrap:before,.ndf-scanner .ds-dialog-wrap div:before,.ndf-scanner .ds-dialog-wrap:after,.ndf-scanner .ds-dialog-wrap div:after{box-sizing:content-box!important}.ndf-scanner .ks-overlay{position:absolute;left:-9999px;top:-9999px}.ndf-scanner .ks-ext-close{padding:0 20px;position:absolute;right:-5px;top:5px}.ndf-scanner .ks-ext-close,.ndf-scanner .ks-ext-close:link{color:#22a;text-decoration:none;cursor:pointer}.ndf-scanner .ks-ext-mask{background:#999;filter:alpha(opacity=70);-moz-opacity:.7;opacity:.7}.ndf-scanner .D-dailog .ks-ext-close .ks-ext-close-x{height:8px}.ndf-scanner .D-dailog .ks-ext-close,.ndf-scanner .D-dailog .ks-ext-close:hover{background:none;border:none}.ndf-scanner .D-dailog{position:absolute;left:-9999px;top:-99999px;margin:100px auto;padding:0;width:392px;height:262px;background-color:#f1f2f2}.ndf-scanner .D-dailog .D-dailog-body{width:350px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Mac{width:350px;height:235px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-NotAllowed{color:#444;line-height:1.8;width:350px;height:185px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Scan{width:380px;height:240px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Scan-sample{width:380px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog a{text-decoration:none}.ndf-scanner .link{text-decoration:underline}.ndf-scanner .D-dailog ul{margin:10px 0 10px 20px;list-style-type:disc}.ndf-scanner .red{color:red;margin-left:5px}.ndf-scanner #message{position:fixed;top:0px;left:0px;width:100%;z-index:105;text-align:center;font-weight:bold;font-size:100%;padding:10px 0;color:#239210;background-color:#e0f0d6;border:1px solid #54d33f;box-shadow:0 0 10px #3a3a3a}.ndf-scanner #MessageBody a{color:#6a9962;font-size:14px}.ndf-scanner #message span{text-align:center;width:95%;float:left}.ndf-scanner #MessageBoy a:hover{text-decoration:underline}.ndf-scanner .close-notify{white-space:nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}.ndf-scanner .close-notify a{color:#fff}.ndf-scanner .DWTPage{margin:0 auto}.hide-upload-button{opacity:0!important}\n"], directives: [{ type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ScanComponent, decorators: [{
             type: Component,
             args: [{
@@ -29097,7 +29100,7 @@ class CreateModalComponent extends BaseDialogComponent {
     }
 }
 CreateModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateModalComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: UploadManagmentService }, { token: DialogMangmentService }, { token: FileManagerService }, { token: CustomToastrService }, { token: i2$4.FormBuilder }, { token: AdapterService }, { token: FileManagerService }, { token: AppConfigService }, { token: DateHelperService }, { token: UserService }, { token: 'environment' }, { token: i0.Injector }, { token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
-CreateModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateModalComponent, selector: "app-create-modal", host: { listeners: { "document:keyup.enter": "KeyUpEvent($event)" } }, usesInheritance: true, ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.createFile' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<div class=\"relative w-full h-full\">\r\n\t\t\t<div class=\"iner-wrapper\" [ngClass]=\"{ 'd-flex': addingProperties }\">\r\n\t\t\t\t<div\r\n\t\t\t\t\t*ngIf=\"addingProperties\"\r\n\t\t\t\t\tclass=\"properties-section p-3 overflow-x-hidden overflow-y-auto\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"\"\r\n\t\t\t\t\t\t*ngIf=\"selectedFile && source === 'fileManger' && showStaticForm\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div class=\"mb-5\">\r\n\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t{{ 'CREATE.FILE_TYPE' | translate }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"text-base text-gray-900\">\r\n\t\t\t\t\t\t\t\t{{ isArabic ? fileType.arabicText : fileType.englishText }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"file-fields mt-3\" SetRtl>\r\n\t\t\t\t\t\t\t<form [formGroup]=\"fileForm\">\r\n\t\t\t\t\t\t\t\t<!-- -----------------old static form ---------------------- -->\r\n\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.TITLE' | translate\r\n\t\t\t\t\t\t\t\t\t\t\t}}<span class=\"text-red-500\">*</span>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"title\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.TITLE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.DESCRIPTION' | translate }}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"description\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.DESCRIPTION' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<!-- ---------------------------------- -->\r\n\r\n\t\t\t\t\t\t\t\t<!------------------ new statis form  ---------------------------->\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"usingExtraFields\">\r\n\t\t\t\t\t\t\t\t\t<app-dynamic-fields-renderer\r\n\t\t\t\t\t\t\t\t\t\t[form]=\"fileForm\"\r\n\t\t\t\t\t\t\t\t\t\t[agencyNameFilter]=\"agencyNameFilter\"\r\n\t\t\t\t\t\t\t\t\t\t[countryNameFilter]=\"countryNameFilter\"\r\n\t\t\t\t\t\t\t\t\t></app-dynamic-fields-renderer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</form>\r\n\r\n\t\t\t\t\t\t\t<div class=\"dynamic-part\" *ngIf=\"showRenderer\">\r\n\t\t\t\t\t\t\t\t<app-dynamic-form\r\n\t\t\t\t\t\t\t\t\t[form]=\"selectedFile.dynamicForm\"\r\n\t\t\t\t\t\t\t\t\t[data]=\"temporaryDyanmicData\"\r\n\t\t\t\t\t\t\t\t\t(change)=\"ondynamicFormChange($event)\"\r\n\t\t\t\t\t\t\t\t></app-dynamic-form>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"w-full h-full p-3 flex justify-center items-center text-lg text-gray-900\"\r\n\t\t\t\t\t\t*ngIf=\"!selectedFile\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'CREATE.SELECT_TOSTART_ADDING' | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"attachment-tab-body overflow-hidden\"\r\n\t\t\t\t\t[ngClass]=\"{ 'attachment-iner-small-body': addingProperties }\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<app-attachments\r\n\t\t\t\t\t\t[multiple]=\"true\"\r\n\t\t\t\t\t\t(onSelectingItem)=\"selectFile($event)\"\r\n\t\t\t\t\t></app-attachments>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"w-full text-red-500 text-base text-start px-3\"\r\n\t\t\t\t*ngIf=\"!uploadMangmentService.GeneralFormValidation\"\r\n\t\t\t>\r\n\t\t\t\t{{ 'CREATE.FILL_REQUIRED_FIELD' | translate }}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\t(uploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length > 0) &&\r\n\t\t\t\t!addingProperties\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(startAddingProperties)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.ADD_PROPERTIES' | translate }}\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length +\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.allfiles.length >\r\n\t\t\t\t\t1\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(ApplyChangesToAll)\"\r\n\t\t\t[disabled]=\"!selectedFile || !selectedFile.staticFormValid\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\t'opacity-30 cursor-not-allowed':\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid,\r\n\t\t\t\t'cursor-pointer hover:text-white hover:bg-gray-900': !(\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid\r\n\t\t\t\t)\r\n\t\t\t}\"\r\n\t\t\tclass=\"submission-button mx-2\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.APPLY_TO_ALL' | translate }}\r\n\t\t</button>\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length === 0\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t(click)=\"dialog.executeAction(createDocument)\"\r\n\t\t\t\tclass=\"submission-button relative\"\r\n\t\t\t\t[disabled]=\"creating\"\r\n\t\t\t>\r\n\t\t\t\t<span *ngIf=\"!creating; else loader\">{{\r\n\t\t\t\t\t'BUTTONS.CREATE' | translate\r\n\t\t\t\t}}</span>\r\n\t\t\t</button>\r\n\t\t\t<ng-template #loader>\r\n\t\t\t\t<mat-spinner\r\n\t\t\t\t\t[value]=\"90\"\r\n\t\t\t\t\t[strokeWidth]=\"3\"\r\n\t\t\t\t\toverlay=\"true\"\r\n\t\t\t\t\t[diameter]=\"25\"\r\n\t\t\t\t\tcolor=\"warn\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-spinner>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length > 0\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(tryAgainCreateDocument)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.TRY_AGAIN' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<button\r\n\t\t\t[disabled]=\"!fileForm?.valid || disableCreateWhenFinishBtn\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(createWhenFinish)\"\r\n\t\t\tclass=\"submission-button w-44\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.CREATE_WHEN_FINSH' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\tclass=\"cancelation-button mx-2\"\r\n\t\t\t(click)=\"dialog.executeAction(minimizDialog)\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.numberOfUploadedFiles !== 0 ||\r\n\t\t\t\taddingProperties\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.MINIMIZED' | translate }}\r\n\t\t</button>\r\n\t\t<!-- <button class=\"cancelation-button\" (click)=\" dialog.executeAction(closeDialog)\">\r\n{{ 'BUTTONS.CANCEL' | translate }}\r\n</button> -->\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".dynamic-part{margin-left:-15px;margin-right:-15px}.iner-wrapper{height:calc(100% - 70px)}.iner-wrapper .properties-section{width:calc(100% - 270px);height:calc(100% - 15px)}.iner-wrapper .attachment-tab-body{height:calc(100% - -20px);overflow-y:auto;overflow-x:hidden}.iner-wrapper .attachment-iner-small-body{width:350px}.rtl .actions-iner-wrapper{direction:ltr}.actions-iner-wrapper{direction:rtl}:host{height:100%;display:block}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: DynamicFieldsRendererComponent, selector: "app-dynamic-fields-renderer", inputs: ["form", "agencyNameFilter", "countryNameFilter", "orgNameFilter", "ngoNameFilter", "disableInitSecrecyLevel", "mode", "fields"], outputs: ["checkTextSpellCheckerField"] }, { type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["form", "data", "readOnly"], outputs: ["change"] }, { type: AttachmentsComponent, selector: "app-attachments", inputs: ["allowedTypes", "params", "path", "maxSize", "docParams", "multiple", "createDocument", "allowedMaxNumberOfFiles", "source"], outputs: ["uploadSuccess", "uploadError", "onSelectingItem", "itemRemoved"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { 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.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.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
+CreateModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateModalComponent, selector: "app-create-modal", host: { listeners: { "document:keyup.enter": "KeyUpEvent($event)" } }, usesInheritance: true, ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ 'CREATE.createFile' | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<div class=\"relative w-full h-full\">\r\n\t\t\t<div class=\"iner-wrapper\" [ngClass]=\"{ 'd-flex': addingProperties }\">\r\n\t\t\t\t<div\r\n\t\t\t\t\t*ngIf=\"addingProperties\"\r\n\t\t\t\t\tclass=\"properties-section p-3 overflow-x-hidden overflow-y-auto\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"\"\r\n\t\t\t\t\t\t*ngIf=\"selectedFile && source === 'fileManger' && showStaticForm\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div class=\"mb-5\">\r\n\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t{{ 'CREATE.FILE_TYPE' | translate }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"text-base text-gray-900\">\r\n\t\t\t\t\t\t\t\t{{ isArabic ? fileType.arabicText : fileType.englishText }}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div class=\"file-fields mt-3\" SetRtl>\r\n\t\t\t\t\t\t\t<form [formGroup]=\"fileForm\">\r\n\t\t\t\t\t\t\t\t<!-- -----------------old static form ---------------------- -->\r\n\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.TITLE' | translate\r\n\t\t\t\t\t\t\t\t\t\t\t}}<span class=\"text-red-500\">*</span>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"title\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.TITLE' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"single-field mb-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"label-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t{{ 'CREATE.DESCRIPTION' | translate }}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\t\t\tclass=\"field-style\"\r\n\t\t\t\t\t\t\t\t\t\t\tformControlName=\"description\"\r\n\t\t\t\t\t\t\t\t\t\t\tplaceholder=\" {{ 'CREATE.DESCRIPTION' | translate }}\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<!-- ---------------------------------- -->\r\n\r\n\t\t\t\t\t\t\t\t<!------------------ new statis form  ---------------------------->\r\n\t\t\t\t\t\t\t\t<div *ngIf=\"usingExtraFields\">\r\n\t\t\t\t\t\t\t\t\t<app-dynamic-fields-renderer\r\n\t\t\t\t\t\t\t\t\t\t[form]=\"fileForm\"\r\n\t\t\t\t\t\t\t\t\t\t[agencyNameFilter]=\"agencyNameFilter\"\r\n\t\t\t\t\t\t\t\t\t\t[countryNameFilter]=\"countryNameFilter\"\r\n\t\t\t\t\t\t\t\t\t></app-dynamic-fields-renderer>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</form>\r\n\r\n\t\t\t\t\t\t\t<div class=\"dynamic-part\" *ngIf=\"showRenderer\">\r\n\t\t\t\t\t\t\t\t<app-dynamic-form\r\n\t\t\t\t\t\t\t\t\t[form]=\"selectedFile.dynamicForm\"\r\n\t\t\t\t\t\t\t\t\t[data]=\"temporaryDyanmicData\"\r\n\t\t\t\t\t\t\t\t\t(change)=\"ondynamicFormChange($event)\"\r\n\t\t\t\t\t\t\t\t></app-dynamic-form>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"w-full h-full p-3 flex justify-center items-center text-lg text-gray-900\"\r\n\t\t\t\t\t\t*ngIf=\"!selectedFile\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ 'CREATE.SELECT_TOSTART_ADDING' | translate }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"attachment-tab-body overflow-hidden\"\r\n\t\t\t\t\t[ngClass]=\"{ 'attachment-iner-small-body': addingProperties }\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<app-attachments\r\n\t\t\t\t\t\t[multiple]=\"true\"\r\n\t\t\t\t\t\t(onSelectingItem)=\"selectFile($event)\"\r\n\t\t\t\t\t></app-attachments>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"w-full text-red-500 text-base text-start px-3\"\r\n\t\t\t\t*ngIf=\"!uploadMangmentService.GeneralFormValidation\"\r\n\t\t\t>\r\n\t\t\t\t{{ 'CREATE.FILL_REQUIRED_FIELD' | translate }}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\t(uploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length > 0) &&\r\n\t\t\t\t!addingProperties\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(startAddingProperties)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.ADD_PROPERTIES' | translate }}\r\n\t\t</button>\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadedFiles.length +\r\n\t\t\t\t\tuploadMangmentService.uploadedFilesStatus.allfiles.length >\r\n\t\t\t\t\t1\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(ApplyChangesToAll)\"\r\n\t\t\t[disabled]=\"!selectedFile || !selectedFile.staticFormValid\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\t'opacity-30 cursor-not-allowed':\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid,\r\n\t\t\t\t'cursor-pointer hover:text-white hover:bg-gray-900': !(\r\n\t\t\t\t\t!selectedFile || !selectedFile.staticFormValid\r\n\t\t\t\t)\r\n\t\t\t}\"\r\n\t\t\tclass=\"submission-button mx-2\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.APPLY_TO_ALL' | translate }}\r\n\t\t</button>\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length === 0\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t(click)=\"dialog.executeAction(createDocument)\"\r\n\t\t\t\tclass=\"submission-button relative\"\r\n\t\t\t\t[disabled]=\"creating\"\r\n\t\t\t>\r\n\t\t\t\t<span *ngIf=\"!creating; else loader\">{{\r\n\t\t\t\t\t'BUTTONS.CREATE' | translate\r\n\t\t\t\t}}</span>\r\n\t\t\t</button>\r\n\t\t\t<ng-template #loader>\r\n\t\t\t\t<mat-spinner\r\n\t\t\t\t\t[value]=\"90\"\r\n\t\t\t\t\t[strokeWidth]=\"3\"\r\n\t\t\t\t\toverlay=\"true\"\r\n\t\t\t\t\t[diameter]=\"25\"\r\n\t\t\t\t\tcolor=\"warn\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-spinner>\r\n\t\t\t</ng-template>\r\n\t\t</ng-container>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\t!uploadMangmentService.uploadedFilesStatus.uploadInProgress &&\r\n\t\t\t\tuploadMangmentService.failedFiles.length > 0\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(tryAgainCreateDocument)\"\r\n\t\t\tclass=\"submission-button\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.TRY_AGAIN' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<button\r\n\t\t\t[disabled]=\"!fileForm?.valid || disableCreateWhenFinishBtn\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\taddingProperties &&\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress\r\n\t\t\t\"\r\n\t\t\t(click)=\"dialog.executeAction(createWhenFinish)\"\r\n\t\t\tclass=\"submission-button w-44\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.CREATE_WHEN_FINSH' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<!-- WAS_IN_FLEX_DIV -->\r\n\t\t<button\r\n\t\t\tclass=\"cancelation-button mx-2\"\r\n\t\t\t(click)=\"dialog.executeAction(minimizDialog)\"\r\n\t\t\t*ngIf=\"\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.uploadInProgress ||\r\n\t\t\t\tuploadMangmentService.uploadedFilesStatus.numberOfUploadedFiles !== 0 ||\r\n\t\t\t\taddingProperties\r\n\t\t\t\"\r\n\t\t>\r\n\t\t\t{{ 'BUTTONS.MINIMIZED' | translate }}\r\n\t\t</button>\r\n\t\t<!-- <button class=\"cancelation-button\" (click)=\" dialog.executeAction(closeDialog)\">\r\n{{ 'BUTTONS.CANCEL' | translate }}\r\n</button> -->\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".dynamic-part{margin-left:-15px;margin-right:-15px}.iner-wrapper{height:calc(100% - 70px)}.iner-wrapper .properties-section{width:calc(100% - 270px);height:calc(100% - 15px)}.iner-wrapper .attachment-tab-body{height:calc(100% - -20px);overflow-y:auto;overflow-x:hidden}.iner-wrapper .attachment-iner-small-body{width:350px}.rtl .actions-iner-wrapper{direction:ltr}.actions-iner-wrapper{direction:rtl}:host{height:100%;display:block}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "bodyClass", "loaderMode"] }, { type: DynamicFieldsRendererComponent, selector: "app-dynamic-fields-renderer", inputs: ["form", "agencyNameFilter", "countryNameFilter", "orgNameFilter", "ngoNameFilter", "disableInitSecrecyLevel", "mode", "fields"], outputs: ["checkTextSpellCheckerField"] }, { type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["form", "data", "readOnly"], outputs: ["change"] }, { type: AttachmentsComponent, selector: "app-attachments", inputs: ["allowedTypes", "params", "path", "maxSize", "docParams", "multiple", "createDocument", "allowedMaxNumberOfFiles", "source"], outputs: ["uploadSuccess", "uploadError", "onSelectingItem", "itemRemoved"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { 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.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.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateModalComponent, decorators: [{
             type: Component,
             args: [{
@@ -32174,7 +32177,7 @@ class PermissionsComponent {
     }
 }
 PermissionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PermissionsComponent, deps: [{ token: PermissionService }, { token: i1$3.MatDialog }, { token: CustomToastrService }, { token: TranslationService }, { token: NuxeoService }, { token: UserService }, { token: EvaluatorsService }, { token: NuxeoDialogService }], target: i0.ɵɵFactoryTarget.Component });
-PermissionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PermissionsComponent, selector: "app-permissions", inputs: { documentId: "documentId", document: "document", allowAddAndBlock: "allowAddAndBlock", sourcePage: "sourcePage" }, ngImport: i0, template: "<div class=\"h-auto mt-3 px-0 pb-4\" *ngIf=\"!loading; else loader\">\r\n    <!--LocalPermission List Items-->\r\n    <div *ngIf=\"sourcePage != 'myFiles'\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.local\" | translate\r\n            }}</span>\r\n            <span *ngIf=\"allowAdd_Block_DeletePermission && !inheritedPermissions.length\">\r\n                <button\r\n                    *ngIf=\"allowAddAndBlock\"\r\n                    class=\"hover:text-blue-700 text-blue-500 mb-1 text-base\"\r\n                    (click)=\"addNewLocalPermissions()\"\r\n                    [disabled]=\"!permissionsType\"\r\n                >\r\n                    {{ \"permission.new\" | translate }}\r\n                </button>\r\n            </span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [allowDeleteAndEdit]=\"allowAdd_Block_DeletePermission\"\r\n            [permissionsArray]=\"localPermissions\"\r\n            *ngIf=\"localPermissions.length > 0; else nolocalPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <ng-template #nolocalPermissions>\r\n        <div class=\"single-permssion p-3 text-center\">\r\n            {{ \"permission.noLocal\" | translate }}\r\n        </div>\r\n    </ng-template>\r\n    <!--InheritedPermission List Items-->\r\n    <div>\r\n        <div class=\"flex flex-row justify-between mt-3\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.inherited\" | translate\r\n            }}</span>\r\n            <span *ngIf=\"allowAdd_Block_DeletePermission\">\r\n                <button\r\n                    class=\"hover:text-blue-700 text-blue-500 mb-1 text-base\"\r\n                    *ngIf=\"status != null && allowAddAndBlock\"\r\n                >\r\n                    <span\r\n                        *ngIf=\"status == 'block'; else unblock\"\r\n                        (click)=\"unblockPermissionInheritance()\"\r\n                    >\r\n                        {{ \"permission.unblock\" | translate }}\r\n                    </span>\r\n                    <ng-template #unblock>\r\n                        <span (click)=\"blockPermissionInheritance()\">\r\n                            {{ \"permission.block\" | translate }}\r\n                        </span>\r\n                    </ng-template>\r\n                </button>\r\n            </span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\" *ngIf=\"!blockOrUnblock\"></mat-divider>\r\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"blockOrUnblock\"></mat-progress-bar>\r\n        <app-permissions-template\r\n            *ngIf=\"inheritedPermissions.length > 0; else noinheritedPermissions\"\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            [permissionsArray]=\"inheritedPermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <ng-template #noinheritedPermissions>\r\n        <div class=\"single-permssion p-3 text-center\">\r\n            {{\"permission.noInherited\" | translate }}</div>\r\n    </ng-template>\r\n    <!--departmentPermissions List Items-->\r\n    <div *ngIf=\"departmentPermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.departmentPermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"departmentPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <!--sharePermissions List Items-->\r\n    <div *ngIf=\"sharePermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.sharePermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"sharePermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <!--workflowPermissions List Items-->\r\n    <div *ngIf=\"workflowPermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.workflowPermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"workflowPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #loader>\r\n    <div class=\"flex items-center justify-center w-full h-full\">\r\n        <mat-spinner [value]=\"90\" [strokeWidth]=\"6\" overlay=\"true\" [diameter]=\"75\"></mat-spinner>\r\n    </div>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: PermissionsTemplateComponent, selector: "app-permissions-template", inputs: ["allowDeleteAndEdit", "documentId", "userVisiblePermissions", "permissionsArray"], outputs: ["getPermissions"] }, { type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
+PermissionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PermissionsComponent, selector: "app-permissions", inputs: { documentId: "documentId", document: "document", allowAddAndBlock: "allowAddAndBlock", sourcePage: "sourcePage" }, ngImport: i0, template: "<div class=\"h-auto mt-3 px-0 pb-4\" *ngIf=\"!loading; else loader\">\r\n    <!--LocalPermission List Items-->\r\n    <div *ngIf=\"sourcePage != 'myFiles'\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.local\" | translate\r\n            }}</span>\r\n            <span *ngIf=\"allowAdd_Block_DeletePermission && !inheritedPermissions.length\">\r\n                <button\r\n                    *ngIf=\"allowAddAndBlock\"\r\n                    class=\"hover:text-blue-700 text-blue-500 mb-1 text-base\"\r\n                    (click)=\"addNewLocalPermissions()\"\r\n                    [disabled]=\"!permissionsType\"\r\n                >\r\n                    {{ \"permission.new\" | translate }}\r\n                </button>\r\n            </span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [allowDeleteAndEdit]=\"allowAdd_Block_DeletePermission\"\r\n            [permissionsArray]=\"localPermissions\"\r\n            *ngIf=\"localPermissions.length > 0; else nolocalPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <ng-template #nolocalPermissions>\r\n        <div class=\"single-permssion p-3 text-center\">\r\n            {{ \"permission.noLocal\" | translate }}\r\n        </div>\r\n    </ng-template>\r\n    <!--InheritedPermission List Items-->\r\n    <div>\r\n        <div class=\"flex flex-row justify-between mt-3\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.inherited\" | translate\r\n            }}</span>\r\n            <span *ngIf=\"allowAdd_Block_DeletePermission\">\r\n                <button\r\n                    class=\"hover:text-blue-700 text-blue-500 mb-1 text-base\"\r\n                    *ngIf=\"status != null && allowAddAndBlock\"\r\n                >\r\n                    <span\r\n                        *ngIf=\"status == 'block'; else unblock\"\r\n                        (click)=\"unblockPermissionInheritance()\"\r\n                    >\r\n                        {{ \"permission.unblock\" | translate }}\r\n                    </span>\r\n                    <ng-template #unblock>\r\n                        <span (click)=\"blockPermissionInheritance()\">\r\n                            {{ \"permission.block\" | translate }}\r\n                        </span>\r\n                    </ng-template>\r\n                </button>\r\n            </span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\" *ngIf=\"!blockOrUnblock\"></mat-divider>\r\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"blockOrUnblock\"></mat-progress-bar>\r\n        <app-permissions-template\r\n            *ngIf=\"inheritedPermissions.length > 0; else noinheritedPermissions\"\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            [permissionsArray]=\"inheritedPermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <ng-template #noinheritedPermissions>\r\n        <div class=\"single-permssion p-3 text-center\">\r\n            {{\"permission.noInherited\" | translate }}</div>\r\n    </ng-template>\r\n    <!--departmentPermissions List Items-->\r\n    <div *ngIf=\"departmentPermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.departmentPermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"departmentPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <!--sharePermissions List Items-->\r\n    <div *ngIf=\"sharePermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.sharePermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"sharePermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n    <!--workflowPermissions List Items-->\r\n    <div *ngIf=\"workflowPermissions.length > 0\">\r\n        <div class=\"flex flex-row justify-between\">\r\n            <span class=\"font-bold text-gray-500 text-base\">{{\r\n                \"permission.workflowPermissions\" | translate\r\n            }}</span>\r\n        </div>\r\n        <mat-divider class=\"mat-divider\"></mat-divider>\r\n        <app-permissions-template\r\n            [documentId]=\"documentId\"\r\n            [userVisiblePermissions]=\"userVisiblePermissions\"\r\n            (getPermissions)=\"getPermissions()\"\r\n            [permissionsArray]=\"workflowPermissions\"\r\n        >\r\n        </app-permissions-template>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #loader>\r\n    <div class=\"flex items-center justify-center w-full h-full\">\r\n        <mat-spinner [value]=\"90\" [strokeWidth]=\"6\" overlay=\"true\" [diameter]=\"75\"></mat-spinner>\r\n    </div>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: PermissionsTemplateComponent, selector: "app-permissions-template", inputs: ["allowDeleteAndEdit", "documentId", "userVisiblePermissions", "permissionsArray"], outputs: ["getPermissions"] }, { type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PermissionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -38779,7 +38782,7 @@ class NotificationItemComponent extends DestroySubject {
     }
 }
 NotificationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationItemComponent, selector: "app-notification-item", inputs: { iconOptions: "iconOptions", currentLang: "currentLang", notification: "notification" }, outputs: { markAsUnread: "markAsUnread", markAsRead: "markAsRead", markAsDeleted: "markAsDeleted" }, usesInheritance: true, ngImport: i0, template: "<div\r\n\t*ngIf=\"notification?.properties as properties\"\r\n\tclass=\"notification-item\"\r\n\t[class.new-item]=\"properties['notif_cnt:status'] == status.new\"\r\n\t[class.unread-item]=\"properties['notif_cnt:status'] == status.unRead\"\r\n>\r\n\t<div class=\"notification-item__icon\">\r\n\t\t<div class=\"notification-item__icon__wrapper\" *ngIf=\"iconOptions?.active\">\r\n\t\t\t<i [class]=\"notification | getIcon : iconOptions\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"notification-item__content\">\r\n\t\t<p class=\"notification-item__message line-clamp-2\">\r\n\t\t\t{{\r\n\t\t\t\tcurrentLang === 'ar-AR'\r\n\t\t\t\t\t? properties['notif_cnt:arMessage']\r\n\t\t\t\t\t: properties['notif_cnt:enMessage']\r\n\t\t\t}}\r\n\t\t</p>\r\n\t\t<button\r\n\t\t\tclass=\"mat-icon-button\"\r\n\t\t\t[matMenuTriggerFor]=\"appMenu\"\r\n\t\t\tmat-icon-button\r\n\t\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"mat-24\">more_horiz</mat-icon>\r\n\t\t</button>\r\n\t\t<span class=\"notification-item__date\">{{\r\n\t\t\tproperties['dc:created'] | timeAgo : currentLang\r\n\t\t}}</span>\r\n\t</div>\r\n\r\n\t<mat-menu\r\n\t\tclass=\"notification-item__actions\"\r\n\t\t#appMenu=\"matMenu\"\r\n\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t>\r\n\t\t<span\r\n\t\t\t(click)=\"closeMenu($event, appMenu)\"\r\n\t\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"properties['notif_cnt:status'] == status.read\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsUnread.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsUnread' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.new ||\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.unRead\r\n\t\t\t\t\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsRead.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsRead' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\t(click)=\"markAsDeleted.emit(notification)\"\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t>\r\n\t\t\t\t<span>{{ 'notifications.delete' | translate }}</span>\r\n\t\t\t</button>\r\n\t\t</span>\r\n\t</mat-menu>\r\n</div>\r\n", styles: [".notification-item{display:var(--n-item-display, grid);grid-template-columns:var(--n-item-columns, auto 1fr);grid-gap:var(--n-item-gap, .5rem);gap:var(--n-item-gap, .5rem);padding:var(--n-items-padding, .5rem 1rem);border:var(--n-item-border, solid #eee);border-width:var(--n-item-border-width, 0 0 1px 0);background:var(--n-item-background, transparent);min-height:var(--n-item-height, 85px);position:relative}.notification-item.new-item{--n-item-background: var(--n-status-new-color, #ecf8fe)}.notification-item.unread-item{--n-item-background: var(--n-status-unread-color, #ecf8fe)}.notification-item.unread-item:before{content:\"\";position:absolute;inset-inline-start:var(--n-item-unread-inline, 6px);inset-block-start:var(--n-item-unread-block, 6px);width:var(--n-item-unread-width, 8px);height:var(--n-item-unread-height, 8px);background:var(--n-item-unread-background, #39559d);border-radius:50%}.notification-item__icon{display:var(--n-item-icon-display, flex);align-items:var(--n-item-icon-align-items, center)}.notification-item__icon__wrapper{width:var(--n-item-icon-width, 56px);height:var(--n-item-icon-height, 56px);background:var(--n-item-icon-background, rgba(0, 0, 0, .025));color:var(--n-item-icon-color, #636363);font-size:var(--n-item-icon-size, 1.5rem);border-radius:var(--n-item-icon-radius, 50%);display:grid;place-items:center}.notification-item__content{display:var(--n-item-content-display, grid);grid-template-columns:var(--n-item-content-columns, 1fr auto);grid-gap:var(--n-item-gap, .2rem);gap:var(--n-item-gap, .2rem)}.notification-item__message{margin-bottom:0;font-size:var(--n-item-font-size, .9rem);color:var(--n-item-message-color)}.notification-item__date{font-size:var(--n-item-date-size, .8rem);text-align:var(--n-item-date-align, end);grid-column:var(--n-item-date-column, span 2);padding:var(--n-item-date-padding, 0 11px);color:var(--n-item-date-color)}.notification-item__actions{border-radius:var(--n-actions-radius, 4px);background:var(--n-actions-background, #fff);box-shadow:var(--n-actions-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notification-item__actions .mat-menu-content:not(:empty){padding:var(--n-actions--menu-padding, .5rem)}.notification-item__actions__item{text-align:var(--action-item-align, start)!important;background:var(--action-item-background, transparent)!important;color:var(--action-item-color, #28282d);padding:var(--action-item-padding, .4rem);height:var(--action-item-height, 38px);line-height:var(--action-item-line, 38px);border-radius:var(--action-item-radius, 4px);font-size:var(--action-item-size, 14px)}.notification-item__actions__item:hover{--action-item-background: var(--action-hover-background, #e6f7ff);--action-item-color: var(--action-hover-color, #005fdb)}\n"], components: [{ type: i1$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: 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: { "getIcon": GetIconPipe, "timeAgo": TimeAgoPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NotificationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationItemComponent, selector: "app-notification-item", inputs: { iconOptions: "iconOptions", currentLang: "currentLang", notification: "notification" }, outputs: { markAsUnread: "markAsUnread", markAsRead: "markAsRead", markAsDeleted: "markAsDeleted" }, usesInheritance: true, ngImport: i0, template: "<div\r\n\t*ngIf=\"notification?.properties as properties\"\r\n\tclass=\"notification-item\"\r\n\t[class.new-item]=\"properties['notif_cnt:status'] == status.new\"\r\n\t[class.unread-item]=\"properties['notif_cnt:status'] == status.unRead\"\r\n>\r\n\t<div class=\"notification-item__icon\">\r\n\t\t<div class=\"notification-item__icon__wrapper\" *ngIf=\"iconOptions?.active\">\r\n\t\t\t<i [class]=\"notification | getIcon : iconOptions\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"notification-item__content\">\r\n\t\t<p class=\"notification-item__message line-clamp-2\">\r\n\t\t\t{{\r\n\t\t\t\tcurrentLang === 'ar-AR'\r\n\t\t\t\t\t? properties['notif_cnt:arMessage']\r\n\t\t\t\t\t: properties['notif_cnt:enMessage']\r\n\t\t\t}}\r\n\t\t</p>\r\n\t\t<button\r\n\t\t\tclass=\"mat-icon-button\"\r\n\t\t\t[matMenuTriggerFor]=\"appMenu\"\r\n\t\t\tmat-icon-button\r\n\t\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"mat-24\">more_horiz</mat-icon>\r\n\t\t</button>\r\n\t\t<span class=\"notification-item__date\">{{\r\n\t\t\tproperties['dc:created'] | timeAgo : currentLang\r\n\t\t}}</span>\r\n\t</div>\r\n\r\n\t<mat-menu\r\n\t\tclass=\"notification-item__actions\"\r\n\t\t#appMenu=\"matMenu\"\r\n\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t>\r\n\t\t<span\r\n\t\t\t(click)=\"closeMenu($event, appMenu)\"\r\n\t\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"properties['notif_cnt:status'] == status.read\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsUnread.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsUnread' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.new ||\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.unRead\r\n\t\t\t\t\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsRead.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsRead' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\t(click)=\"markAsDeleted.emit(notification)\"\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t>\r\n\t\t\t\t<span>{{ 'notifications.delete' | translate }}</span>\r\n\t\t\t</button>\r\n\t\t</span>\r\n\t</mat-menu>\r\n</div>\r\n", styles: [".notification-item{display:var(--n-item-display, grid);grid-template-columns:var(--n-item-columns, auto 1fr);grid-gap:var(--n-item-gap, .5rem);gap:var(--n-item-gap, .5rem);padding:var(--n-items-padding, .5rem 1rem);border:var(--n-item-border, solid #eee);border-width:var(--n-item-border-width, 0 0 1px 0);background:var(--n-item-background, transparent);min-height:var(--n-item-height, 85px);position:relative}.notification-item.new-item{--n-item-background: var(--n-status-new-color, #ecf8fe)}.notification-item.unread-item{--n-item-background: var(--n-status-unread-color, #ecf8fe)}.notification-item.unread-item:before{content:\"\";position:absolute;inset-inline-start:var(--n-item-unread-inline, 6px);inset-block-start:var(--n-item-unread-block, 6px);width:var(--n-item-unread-width, 8px);height:var(--n-item-unread-height, 8px);background:var(--n-item-unread-background, #39559d);border-radius:50%}.notification-item__icon{display:var(--n-item-icon-display, flex);align-items:var(--n-item-icon-align-items, center)}.notification-item__icon__wrapper{width:var(--n-item-icon-width, 56px);height:var(--n-item-icon-height, 56px);background:var(--n-item-icon-background, rgba(0, 0, 0, .025));color:var(--n-item-icon-color, #636363);font-size:var(--n-item-icon-size, 1.5rem);border-radius:var(--n-item-icon-radius, 50%);display:grid;place-items:center}.notification-item__content{display:var(--n-item-content-display, grid);grid-template-columns:var(--n-item-content-columns, 1fr auto);grid-gap:var(--n-item-gap, .2rem);gap:var(--n-item-gap, .2rem)}.notification-item__message{margin-bottom:0;font-size:var(--n-item-font-size, .9rem);color:var(--n-item-message-color)}.notification-item__date{font-size:var(--n-item-date-size, .8rem);text-align:var(--n-item-date-align, end);grid-column:var(--n-item-date-column, span 2);padding:var(--n-item-date-padding, 0 11px);color:var(--n-item-date-color)}.notification-item__actions{border-radius:var(--n-actions-radius, 4px);background:var(--n-actions-background, #fff);box-shadow:var(--n-actions-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notification-item__actions .mat-menu-content:not(:empty){padding:var(--n-actions--menu-padding, .5rem)}.notification-item__actions__item{text-align:var(--action-item-align, start)!important;background:var(--action-item-background, transparent)!important;color:var(--action-item-color, #28282d);padding:var(--action-item-padding, .4rem);height:var(--action-item-height, 38px);line-height:var(--action-item-line, 38px);border-radius:var(--action-item-radius, 4px);font-size:var(--action-item-size, 14px)}.notification-item__actions__item:hover{--action-item-background: var(--action-hover-background, #e6f7ff);--action-item-color: var(--action-hover-color, #005fdb)}\n"], components: [{ type: i1$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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "getIcon": GetIconPipe, "timeAgo": TimeAgoPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -39089,7 +39092,7 @@ class NotificationSourceSelectComponent extends BaseNotification {
     }
 }
 NotificationSourceSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationSourceSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NotificationSourceSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: { typeChanged: "typeChanged" }, usesInheritance: true, ngImport: i0, template: "<span [dir]=\"direction$ | async\" *ngIf=\"sourceTypes$ | async as sourceTypes\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger px-2\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n    mat-stroked-button\r\n  >\r\n    <span>{{\r\n      (selectedFilterType\r\n        ? 'vocabulary.VOC_Notf_SourceTypes.' + selectedFilterType.properties.id\r\n        : 'notifications.allTypes'\r\n      ) | translate\r\n    }}</span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"source-type-select-menu\" #filterTypeMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        (click)=\"selectFilterType(null); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        *ngFor=\"let type of sourceTypes\"\r\n        (click)=\"selectFilterType(type); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{\r\n          'vocabulary.VOC_Notf_SourceTypes.' + type?.properties.id | translate\r\n        }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".source-type-select-menu{box-shadow:var(--source-type-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.source-type-select-menu .mat-menu-content:not(:empty){padding:var(--source-type-menu-padding, .5rem)}.source-type-select-menu__option{background:var(--source-type-option-background, transparent)!important;border-radius:var(--source-type-option-radius, 4px);font-size:var(--source-type-option-size, 14px);color:var(--source-type-option-color, #28282d);height:var(--source-type-option-height, 38px);line-height:var(--source-type-option-line-height, 38px)}.source-type-select-menu__option:hover{--source-type-option-background: var(--source-type-option-hover-background, #e6f7ff);--source-type-option-color: var(--source-type-option-hover-color, #005fdb)}.source-type-select-menu__option .mat-icon{color:currentColor}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$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: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NotificationSourceSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: { typeChanged: "typeChanged" }, usesInheritance: true, ngImport: i0, template: "<span [dir]=\"direction$ | async\" *ngIf=\"sourceTypes$ | async as sourceTypes\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger px-2\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n    mat-stroked-button\r\n  >\r\n    <span>{{\r\n      (selectedFilterType\r\n        ? 'vocabulary.VOC_Notf_SourceTypes.' + selectedFilterType.properties.id\r\n        : 'notifications.allTypes'\r\n      ) | translate\r\n    }}</span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"source-type-select-menu\" #filterTypeMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        (click)=\"selectFilterType(null); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        *ngFor=\"let type of sourceTypes\"\r\n        (click)=\"selectFilterType(type); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{\r\n          'vocabulary.VOC_Notf_SourceTypes.' + type?.properties.id | translate\r\n        }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".source-type-select-menu{box-shadow:var(--source-type-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.source-type-select-menu .mat-menu-content:not(:empty){padding:var(--source-type-menu-padding, .5rem)}.source-type-select-menu__option{background:var(--source-type-option-background, transparent)!important;border-radius:var(--source-type-option-radius, 4px);font-size:var(--source-type-option-size, 14px);color:var(--source-type-option-color, #28282d);height:var(--source-type-option-height, 38px);line-height:var(--source-type-option-line-height, 38px)}.source-type-select-menu__option:hover{--source-type-option-background: var(--source-type-option-hover-background, #e6f7ff);--source-type-option-color: var(--source-type-option-hover-color, #005fdb)}.source-type-select-menu__option .mat-icon{color:currentColor}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationSourceSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -39492,7 +39495,7 @@ class NotificationsDateSelectComponent extends BaseNotification {
     }
 }
 NotificationsDateSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsDateSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NotificationsDateSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: { dateChanged: "dateChanged" }, usesInheritance: true, ngImport: i0, template: "<span [dir]=\"direction$ | async\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"date-select-button\"\r\n    mat-stroked-button\r\n    [matMenuTriggerFor]=\"datesMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    <span>\r\n      {{\r\n        (selectedDate\r\n          ? 'notifications.dates.' + selectedDate.key\r\n          : 'notifications.dates.all'\r\n        ) | translate\r\n      }}\r\n    </span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"dates-select-menu\" #datesMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(null); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        *ngFor=\"let date of dates\"\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(date); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.' + date.key | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".dates-select-menu{box-shadow:var(--dates-select-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.dates-select-menu .mat-menu-content:not(:empty){padding:var(--dates-select-menu-padding, .5rem)}.dates-select-menu__option{background:var(--dates-select-option-background, transparent)!important;border-radius:var(--dates-select-option-radius, 4px);font-size:var(--dates-select-option-size, 14px);color:var(--dates-select-option-color, #28282d);height:var(--dates-select-option-height, 38px);line-height:var(--dates-select-option-line-height, 38px)}.dates-select-menu__option:hover{--dates-select-option-background: var(--dates-select-option-hover-background, #e6f7ff);--dates-select-option-color: var(--dates-select-option-hover-color, #005fdb)}.dates-select-menu__option .mat-icon{color:currentColor}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NotificationsDateSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: { dateChanged: "dateChanged" }, usesInheritance: true, ngImport: i0, template: "<span [dir]=\"direction$ | async\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"date-select-button\"\r\n    mat-stroked-button\r\n    [matMenuTriggerFor]=\"datesMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    <span>\r\n      {{\r\n        (selectedDate\r\n          ? 'notifications.dates.' + selectedDate.key\r\n          : 'notifications.dates.all'\r\n        ) | translate\r\n      }}\r\n    </span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"dates-select-menu\" #datesMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(null); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        *ngFor=\"let date of dates\"\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(date); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.' + date.key | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".dates-select-menu{box-shadow:var(--dates-select-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.dates-select-menu .mat-menu-content:not(:empty){padding:var(--dates-select-menu-padding, .5rem)}.dates-select-menu__option{background:var(--dates-select-option-background, transparent)!important;border-radius:var(--dates-select-option-radius, 4px);font-size:var(--dates-select-option-size, 14px);color:var(--dates-select-option-color, #28282d);height:var(--dates-select-option-height, 38px);line-height:var(--dates-select-option-line-height, 38px)}.dates-select-menu__option:hover{--dates-select-option-background: var(--dates-select-option-hover-background, #e6f7ff);--dates-select-option-color: var(--dates-select-option-hover-color, #005fdb)}.dates-select-menu__option .mat-icon{color:currentColor}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsDateSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -39519,7 +39522,7 @@ class NotificationsListActionsComponent {
     }
 }
 NotificationsListActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationsListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: { options: "options", direction: "direction" }, outputs: { markAllAsRead: "markAllAsRead", openSettings: "openSettings", openNotifications: "openNotifications" }, ngImport: i0, template: "<span [dir]=\"direction\" *ngIf=\"options?.active\">\r\n  <button\r\n    [matMenuTriggerFor]=\"actions\"\r\n    mat-icon-button\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <mat-icon>more_horiz</mat-icon>\r\n  </button>\r\n  <mat-menu #actions=\"matMenu\" class=\"notifications-actions-menu\">\r\n    <span (click)=\"closeMenu($event, actions)\">\r\n      <button\r\n        *ngIf=\"options.updateState\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"markAllAsRead.emit($event)\"\r\n      >\r\n        <mat-icon>done_all</mat-icon>\r\n        <span>{{ 'notifications.markAllAsRead' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openSetting\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openSettings.emit($event)\"\r\n      >\r\n        <mat-icon>tune</mat-icon>\r\n        <span>{{ 'notifications.notificationSettings' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openNotification\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openNotifications.emit($event)\"\r\n      >\r\n        <mat-icon>open_in_browser</mat-icon>\r\n        <span>{{ 'notifications.openNotifications' | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".notifications-actions-menu{box-shadow:var(--n-actions-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notifications-actions-menu .mat-menu-content:not(:empty){padding:var(--n-actions-menu-padding, .5rem)}.notifications-actions-menu__action{background:var(--n-menu-action-background, transparent)!important;border-radius:var(--n-menu-action-radius, 4px);font-size:var(--n-menu-action-size, 14px);color:var(--n-menu-action-color, #28282d);height:var(--n-menu-action-height, 40px);line-height:var(--n-menu-action-line-height, 40px)}.notifications-actions-menu__action:hover{--n-menu-action-background: var(--n-menu-action-hover-background, #e6f7ff);--n-menu-action-color: var(--n-menu-action-hover-color, #005fdb)}.notifications-actions-menu__action .mat-icon{color:currentColor}\n"], components: [{ type: i1$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: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NotificationsListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: { options: "options", direction: "direction" }, outputs: { markAllAsRead: "markAllAsRead", openSettings: "openSettings", openNotifications: "openNotifications" }, ngImport: i0, template: "<span [dir]=\"direction\" *ngIf=\"options?.active\">\r\n  <button\r\n    [matMenuTriggerFor]=\"actions\"\r\n    mat-icon-button\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <mat-icon>more_horiz</mat-icon>\r\n  </button>\r\n  <mat-menu #actions=\"matMenu\" class=\"notifications-actions-menu\">\r\n    <span (click)=\"closeMenu($event, actions)\">\r\n      <button\r\n        *ngIf=\"options.updateState\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"markAllAsRead.emit($event)\"\r\n      >\r\n        <mat-icon>done_all</mat-icon>\r\n        <span>{{ 'notifications.markAllAsRead' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openSetting\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openSettings.emit($event)\"\r\n      >\r\n        <mat-icon>tune</mat-icon>\r\n        <span>{{ 'notifications.notificationSettings' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openNotification\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openNotifications.emit($event)\"\r\n      >\r\n        <mat-icon>open_in_browser</mat-icon>\r\n        <span>{{ 'notifications.openNotifications' | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".notifications-actions-menu{box-shadow:var(--n-actions-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notifications-actions-menu .mat-menu-content:not(:empty){padding:var(--n-actions-menu-padding, .5rem)}.notifications-actions-menu__action{background:var(--n-menu-action-background, transparent)!important;border-radius:var(--n-menu-action-radius, 4px);font-size:var(--n-menu-action-size, 14px);color:var(--n-menu-action-color, #28282d);height:var(--n-menu-action-height, 40px);line-height:var(--n-menu-action-line-height, 40px)}.notifications-actions-menu__action:hover{--n-menu-action-background: var(--n-menu-action-hover-background, #e6f7ff);--n-menu-action-color: var(--n-menu-action-hover-color, #005fdb)}.notifications-actions-menu__action .mat-icon{color:currentColor}\n"], components: [{ type: i1$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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsListActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -39570,7 +39573,7 @@ class NotificationsListComponent extends BaseListNotifications {
     }
 }
 NotificationsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsListComponent, deps: [{ token: i0.Injector }, { token: NOTIFICATIONS_LIST_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListComponent, selector: "app-notifications-list", outputs: { openSettings: "openSettings", openNotifications: "openNotifications" }, providers: [ParamsService, ResponseService], usesInheritance: true, ngImport: i0, template: "<div class=\"notifications-list\">\r\n  <div class=\"notifications-list__header\">\r\n    <span *ngIf=\"options.title\">\r\n      <strong class=\"notifications-list__title\">{{ options.title | translate }}</strong>\r\n    </span>\r\n    <div class=\"notifications-list__actions\">\r\n      <ng-container *ngIf=\"options?.filters?.active\">\r\n        <app-notification-source-select\r\n          *ngIf=\"options?.filters?.type\"\r\n\r\n          (typeChanged)=\"typeChanged($event)\"\r\n        ></app-notification-source-select>\r\n        <app-notifications-date-select\r\n          *ngIf=\"options?.filters?.date\"\r\n\r\n          (dateChanged)=\"dateChanged($event)\"\r\n        ></app-notifications-date-select>\r\n        <app-notification-status-toggle\r\n          *ngIf=\"options?.filters?.state\"\r\n          (statusChanged)=\"statusChanged($event)\"\r\n        ></app-notification-status-toggle>\r\n      </ng-container>\r\n\r\n      <app-notifications-list-actions\r\n        [options]=\"options.actions\"\r\n        [direction]=\"direction$ | async\"\r\n        (markAllAsRead)=\"markAllAsRead($event)\"\r\n        (openNotifications)=\"openNotifications.emit($event)\"\r\n        (openSettings)=\"openSettings.emit($event)\"\r\n      ></app-notifications-list-actions>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"response$ | async as response; else loading\"\r\n    class=\"notifications-list__body\"\r\n    infiniteScroll\r\n    [scrollWindow]=\"false\"\r\n    [infiniteScrollDistance]=\"options.scroll?.distance || 2\"\r\n    [infiniteScrollThrottle]=\"options.scroll?.throttle || 300\"\r\n    (scrolled)=\"onScrollDown()\"\r\n  >\r\n    <ng-container *ngIf=\"response.data?.length; else noData\">\r\n      <app-notification-item\r\n        *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n        [iconOptions]=\"options?.icons\"\r\n        [notification]=\"item\"\r\n        [currentLang]=\"currentLang\"\r\n        [class.cursor-pointer]=\"item.properties?.['notf_nt:isClickable']\"\r\n        (click)=\"onItemClick(item)\"\r\n        (markAsUnread)=\"markAsUnread(item)\"\r\n        (markAsRead)=\"markAsRead(item)\"\r\n        (markAsDeleted)=\"markAsDeleted(item)\"\r\n      ></app-notification-item>\r\n    </ng-container>\r\n    <mat-spinner\r\n      *ngIf=\"isLoadingResult\"\r\n      class=\"notifications-list__loader mt-2 mx-auto\"\r\n      [diameter]=\"48\"\r\n    ></mat-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #filters>\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    {{ 'notifications.all' | translate }}\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"new-menu-design\" #filterTypeMenu=\"matMenu\">\r\n    <div (click)=\"$event.stopPropagation()\">\r\n      <div class=\"single-menu-action notification-filter-menu-item\">\r\n        {{ 'notifications.' + type.name | translate }}\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>\r\n      {{ 'notifications.noNotifications' | translate }}\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #loading>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>{{ 'notifications.loading_notification' | translate }}</p>\r\n  </div>\r\n</ng-template>\r\n", styles: [".notifications-list{padding:var(--nto-list-padding, 0)}.notifications-list__header{padding:var(--nto-list-header-padding, .5rem);display:var(--nto-list-header-display, flex);justify-content:var(--nto-list-header-justify, space-between);align-items:var(--nto-list-header-align-items, center);box-sizing:border-box;background:var(--nto-list-header-background, transparent);color:var(--nto-list-header-color, currentColor)}.notifications-list__title{color:var(--nto-list-title-color, #234990);font-size:var(--nto-list-title-size, 1rem);font-weight:var(--nto-list-title-weight, 600)}.notifications-list__actions{display:var(--nto-container-filters-display, flex);grid-gap:var(--nto-container-filters-gap, .5rem);gap:var(--nto-container-filters-gap, .5rem)}.notifications-list__loader{display:grid;place-items:center}.notifications-list__body{height:var(--nto-list-height, 60vh);overflow-y:auto}.no-notifications{color:var(--no-notifications-color, #b4bac6);font-size:var(--no-notifications-size, 1rem)}\n"], components: [{ type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: ["typeChanged"] }, { type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: ["dateChanged"] }, { type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: ["status"], outputs: ["statusChanged"] }, { type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: ["options", "direction"], outputs: ["markAllAsRead", "openSettings", "openNotifications"] }, { type: NotificationItemComponent, selector: "app-notification-item", inputs: ["iconOptions", "currentLang", "notification"], outputs: ["markAsUnread", "markAsRead", "markAsDeleted"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListComponent, selector: "app-notifications-list", outputs: { openSettings: "openSettings", openNotifications: "openNotifications" }, providers: [ParamsService, ResponseService], usesInheritance: true, ngImport: i0, template: "<div class=\"notifications-list\">\r\n  <div class=\"notifications-list__header\">\r\n    <span *ngIf=\"options.title\">\r\n      <strong class=\"notifications-list__title\">{{ options.title | translate }}</strong>\r\n    </span>\r\n    <div class=\"notifications-list__actions\">\r\n      <ng-container *ngIf=\"options?.filters?.active\">\r\n        <app-notification-source-select\r\n          *ngIf=\"options?.filters?.type\"\r\n\r\n          (typeChanged)=\"typeChanged($event)\"\r\n        ></app-notification-source-select>\r\n        <app-notifications-date-select\r\n          *ngIf=\"options?.filters?.date\"\r\n\r\n          (dateChanged)=\"dateChanged($event)\"\r\n        ></app-notifications-date-select>\r\n        <app-notification-status-toggle\r\n          *ngIf=\"options?.filters?.state\"\r\n          (statusChanged)=\"statusChanged($event)\"\r\n        ></app-notification-status-toggle>\r\n      </ng-container>\r\n\r\n      <app-notifications-list-actions\r\n        [options]=\"options.actions\"\r\n        [direction]=\"direction$ | async\"\r\n        (markAllAsRead)=\"markAllAsRead($event)\"\r\n        (openNotifications)=\"openNotifications.emit($event)\"\r\n        (openSettings)=\"openSettings.emit($event)\"\r\n      ></app-notifications-list-actions>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"response$ | async as response; else loading\"\r\n    class=\"notifications-list__body\"\r\n    infiniteScroll\r\n    [scrollWindow]=\"false\"\r\n    [infiniteScrollDistance]=\"options.scroll?.distance || 2\"\r\n    [infiniteScrollThrottle]=\"options.scroll?.throttle || 300\"\r\n    (scrolled)=\"onScrollDown()\"\r\n  >\r\n    <ng-container *ngIf=\"response.data?.length; else noData\">\r\n      <app-notification-item\r\n        *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n        [iconOptions]=\"options?.icons\"\r\n        [notification]=\"item\"\r\n        [currentLang]=\"currentLang\"\r\n        [class.cursor-pointer]=\"item.properties?.['notf_nt:isClickable']\"\r\n        (click)=\"onItemClick(item)\"\r\n        (markAsUnread)=\"markAsUnread(item)\"\r\n        (markAsRead)=\"markAsRead(item)\"\r\n        (markAsDeleted)=\"markAsDeleted(item)\"\r\n      ></app-notification-item>\r\n    </ng-container>\r\n    <mat-spinner\r\n      *ngIf=\"isLoadingResult\"\r\n      class=\"notifications-list__loader mt-2 mx-auto\"\r\n      [diameter]=\"48\"\r\n    ></mat-spinner>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #filters>\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    {{ 'notifications.all' | translate }}\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"new-menu-design\" #filterTypeMenu=\"matMenu\">\r\n    <div (click)=\"$event.stopPropagation()\">\r\n      <div class=\"single-menu-action notification-filter-menu-item\">\r\n        {{ 'notifications.' + type.name | translate }}\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>\r\n      {{ 'notifications.noNotifications' | translate }}\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #loading>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>{{ 'notifications.loading_notification' | translate }}</p>\r\n  </div>\r\n</ng-template>\r\n", styles: [".notifications-list{padding:var(--nto-list-padding, 0)}.notifications-list__header{padding:var(--nto-list-header-padding, .5rem);display:var(--nto-list-header-display, flex);justify-content:var(--nto-list-header-justify, space-between);align-items:var(--nto-list-header-align-items, center);box-sizing:border-box;background:var(--nto-list-header-background, transparent);color:var(--nto-list-header-color, currentColor)}.notifications-list__title{color:var(--nto-list-title-color, #234990);font-size:var(--nto-list-title-size, 1rem);font-weight:var(--nto-list-title-weight, 600)}.notifications-list__actions{display:var(--nto-container-filters-display, flex);grid-gap:var(--nto-container-filters-gap, .5rem);gap:var(--nto-container-filters-gap, .5rem)}.notifications-list__loader{display:grid;place-items:center}.notifications-list__body{height:var(--nto-list-height, 60vh);overflow-y:auto}.no-notifications{color:var(--no-notifications-color, #b4bac6);font-size:var(--no-notifications-size, 1rem)}\n"], components: [{ type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: ["typeChanged"] }, { type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: ["dateChanged"] }, { type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: ["status"], outputs: ["statusChanged"] }, { type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: ["options", "direction"], outputs: ["markAllAsRead", "openSettings", "openNotifications"] }, { type: NotificationItemComponent, selector: "app-notification-item", inputs: ["iconOptions", "currentLang", "notification"], outputs: ["markAsUnread", "markAsRead", "markAsDeleted"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsListComponent, decorators: [{
             type: Component,
             args: [{
@@ -39862,7 +39865,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$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 });
+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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationsListComponent, selector: "app-notifications-list", outputs: ["openSettings", "openNotifications"] }, { type: NotificationsSidebarComponent, selector: "app-notifications-sidebar", inputs: ["appendToBody", "clearOnCLose", "visible", "position"], outputs: ["visibleChange", "onShow", "onHide"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i7$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.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: [{
@@ -39970,7 +39973,7 @@ class NotificationsListContainerComponent extends BaseListNotifications {
     }
 }
 NotificationsListContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsListContainerComponent, deps: [{ token: i0.Injector }, { token: NOTIFICATIONS_LIST_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsListContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListContainerComponent, selector: "app-notifications-list-container", inputs: { styleClass: "styleClass", showFilters: "showFilters", criteria: "criteria" }, providers: [ParamsService, ResponseService], queries: [{ propertyName: "customItemTemplate", first: true, predicate: NOTIFICATION_ITEM, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"notifications-container {{ styleClass }}\">\r\n  <div class=\"notifications-container__header\">\r\n    <span class=\"notifications-container__title\">\r\n      <span *ngIf=\"options.title\"> {{ options.title | translate }}</span>\r\n    </span>\r\n    <div class=\"notifications-container__filters\" *ngIf=\"showFilters\">\r\n      <app-notification-source-select\r\n        *ngIf=\"options?.filters?.type\"\r\n        (typeChanged)=\"typeChanged($event)\"\r\n      ></app-notification-source-select>\r\n      <app-notifications-date-select\r\n        *ngIf=\"options?.filters?.date\"\r\n        (dateChanged)=\"dateChanged($event)\"\r\n      ></app-notifications-date-select>\r\n      <app-notification-status-toggle\r\n        *ngIf=\"options?.filters?.state\"\r\n        (statusChanged)=\"statusChanged($event)\"\r\n      ></app-notification-status-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"response$ | async as response\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"\r\n        paginationMode == paginationModeEnum.scroll\r\n          ? scrollModeTemplate\r\n          : paginationModeTemplate\r\n      \"\r\n      [ngTemplateOutletContext]=\"{ $implicit: response }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #scrollModeTemplate let-response>\r\n    <div\r\n      class=\"notifications-container__body\"\r\n      infiniteScroll\r\n      [scrollWindow]=\"options.scroll?.scrollWindow\"\r\n      [infiniteScrollDistance]=\"options.scroll?.distance || 2\"\r\n      [infiniteScrollThrottle]=\"options.scroll?.throttle || 300\"\r\n      (scrolled)=\"onScrollDown()\"\r\n    >\r\n      <ng-container *ngIf=\"response.data?.length; else noData\">\r\n        <ng-container\r\n          *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n          [ngTemplateOutlet]=\"customItemTemplate || defaultItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: item,\r\n            markAsUnread: markAsUnread,\r\n            markAsRead: markAsRead,\r\n            markAsDeleted: markAsDeleted\r\n          }\"\r\n        >\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <mat-spinner\r\n        [diameter]=\"48\"\r\n        class=\"notifications-container__loader mt-2 mx-auto\"\r\n        *ngIf=\"isLoadingResult\"\r\n      ></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #paginationModeTemplate let-response>\r\n    <div\r\n      class=\"notifications-container__body--pagination mb-3\"\r\n      *ngIf=\"response.data?.length; else noData\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n        [ngTemplateOutlet]=\"customItemTemplate || defaultItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          $implicit: item,\r\n          markAsUnread: markAsUnread,\r\n          markAsRead: markAsRead,\r\n          markAsDeleted: markAsDeleted\r\n        }\"\r\n      >\r\n      </ng-container>\r\n      <div class=\"notifications-container__pagination-loader\" *ngIf=\"isLoadingResult\">\r\n        <mat-spinner [diameter]=\"48\"></mat-spinner>\r\n      </div>\r\n    </div>\r\n\r\n    <cts-pagination\r\n      [page]=\"selectedPage + 1\"\r\n      (change)=\"changePage($event - 1)\"\r\n      [size]=\"options.pageSize\"\r\n      [count]=\"response.totalItems\"\r\n    >\r\n    </cts-pagination>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #filters>\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    {{ 'notifications.all' | translate }}\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"new-menu-design\" #filterTypeMenu=\"matMenu\">\r\n    <div (click)=\"$event.stopPropagation()\">\r\n      <div class=\"single-menu-action notification-filter-menu-item\">\r\n        {{ 'notifications.' + type.name | translate }}\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>\r\n      {{ 'notifications.noNotifications' | translate }}\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate let-item>\r\n  <app-notification-item\r\n    [iconOptions]=\"options?.icons\"\r\n    [notification]=\"item\"\r\n    [currentLang]=\"currentLang\"\r\n    [class.cursor-pointer]=\"item.properties?.['notf_nt:isClickable']\"\r\n    (click)=\"onItemClick(item)\"\r\n    (markAsUnread)=\"markAsUnread(item)\"\r\n    (markAsRead)=\"markAsRead(item)\"\r\n    (markAsDeleted)=\"markAsDeleted(item)\"\r\n  ></app-notification-item>\r\n</ng-template>\r\n", styles: [".notifications-container{padding:var(--nto-container-padding, 0)}.notifications-container__header{padding:var(--nto-container-header-padding, .5rem);display:var(--nto-container-header-display, flex);justify-content:var(--nto-container-header-justify, space-between);align-items:var(--nto-container-header-align-items, center);box-sizing:border-box}.notifications-container__title{color:var(--nto-container-title-color, #2f258a);font-size:var(--nto-container-title-size, 1.1rem);font-weight:var(--nto-container-title-weight, normal)}.notifications-container__filters{display:var(--nto-container-filters-display, flex);grid-gap:var(--nto-container-filters-gap, .5rem);gap:var(--nto-container-filters-gap, .5rem)}.notifications-container__body{position:relative;height:var(--nto-container-height, 74vh);overflow-y:auto}.notifications-container__body--pagination{--nto-container-height: var(--nto-container-pagination-height, auto)}.notifications-container__loader{display:grid;place-items:center}.notifications-container__pagination-loader{display:grid;place-items:center;position:absolute;inset:0 0;width:100%;height:100%;background:var(--nto-pagination-background, rgba(255, 255, 255, .4))}.no-notifications{min-height:var(--no-notifications-min-height, 0);display:var(--no-notifications-display, flex);flex-direction:var(--no-notifications-direction, column);justify-content:var(--no-notifications-justify, center);align-items:var(--no-notifications-items, center);color:var(--no-notifications-color, #b4bac6);font-size:var(--no-notifications-size, 1rem)}\n"], components: [{ type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: ["typeChanged"] }, { type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: ["dateChanged"] }, { type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: ["status"], outputs: ["statusChanged"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationItemComponent, selector: "app-notification-item", inputs: ["iconOptions", "currentLang", "notification"], outputs: ["markAsUnread", "markAsRead", "markAsDeleted"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationsListContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListContainerComponent, selector: "app-notifications-list-container", inputs: { styleClass: "styleClass", showFilters: "showFilters", criteria: "criteria" }, providers: [ParamsService, ResponseService], queries: [{ propertyName: "customItemTemplate", first: true, predicate: NOTIFICATION_ITEM, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"notifications-container {{ styleClass }}\">\r\n  <div class=\"notifications-container__header\">\r\n    <span class=\"notifications-container__title\">\r\n      <span *ngIf=\"options.title\"> {{ options.title | translate }}</span>\r\n    </span>\r\n    <div class=\"notifications-container__filters\" *ngIf=\"showFilters\">\r\n      <app-notification-source-select\r\n        *ngIf=\"options?.filters?.type\"\r\n        (typeChanged)=\"typeChanged($event)\"\r\n      ></app-notification-source-select>\r\n      <app-notifications-date-select\r\n        *ngIf=\"options?.filters?.date\"\r\n        (dateChanged)=\"dateChanged($event)\"\r\n      ></app-notifications-date-select>\r\n      <app-notification-status-toggle\r\n        *ngIf=\"options?.filters?.state\"\r\n        (statusChanged)=\"statusChanged($event)\"\r\n      ></app-notification-status-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"response$ | async as response\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"\r\n        paginationMode == paginationModeEnum.scroll\r\n          ? scrollModeTemplate\r\n          : paginationModeTemplate\r\n      \"\r\n      [ngTemplateOutletContext]=\"{ $implicit: response }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #scrollModeTemplate let-response>\r\n    <div\r\n      class=\"notifications-container__body\"\r\n      infiniteScroll\r\n      [scrollWindow]=\"options.scroll?.scrollWindow\"\r\n      [infiniteScrollDistance]=\"options.scroll?.distance || 2\"\r\n      [infiniteScrollThrottle]=\"options.scroll?.throttle || 300\"\r\n      (scrolled)=\"onScrollDown()\"\r\n    >\r\n      <ng-container *ngIf=\"response.data?.length; else noData\">\r\n        <ng-container\r\n          *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n          [ngTemplateOutlet]=\"customItemTemplate || defaultItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: item,\r\n            markAsUnread: markAsUnread,\r\n            markAsRead: markAsRead,\r\n            markAsDeleted: markAsDeleted\r\n          }\"\r\n        >\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <mat-spinner\r\n        [diameter]=\"48\"\r\n        class=\"notifications-container__loader mt-2 mx-auto\"\r\n        *ngIf=\"isLoadingResult\"\r\n      ></mat-spinner>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #paginationModeTemplate let-response>\r\n    <div\r\n      class=\"notifications-container__body--pagination mb-3\"\r\n      *ngIf=\"response.data?.length; else noData\"\r\n    >\r\n      <ng-container\r\n        *ngFor=\"let item of response.data; trackBy: trackByFn\"\r\n        [ngTemplateOutlet]=\"customItemTemplate || defaultItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          $implicit: item,\r\n          markAsUnread: markAsUnread,\r\n          markAsRead: markAsRead,\r\n          markAsDeleted: markAsDeleted\r\n        }\"\r\n      >\r\n      </ng-container>\r\n      <div class=\"notifications-container__pagination-loader\" *ngIf=\"isLoadingResult\">\r\n        <mat-spinner [diameter]=\"48\"></mat-spinner>\r\n      </div>\r\n    </div>\r\n\r\n    <cts-pagination\r\n      [page]=\"selectedPage + 1\"\r\n      (change)=\"changePage($event - 1)\"\r\n      [size]=\"options.pageSize\"\r\n      [count]=\"response.totalItems\"\r\n    >\r\n    </cts-pagination>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #filters>\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    {{ 'notifications.all' | translate }}\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"new-menu-design\" #filterTypeMenu=\"matMenu\">\r\n    <div (click)=\"$event.stopPropagation()\">\r\n      <div class=\"single-menu-action notification-filter-menu-item\">\r\n        {{ 'notifications.' + type.name | translate }}\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-notifications text-center p-3\">\r\n    <p>\r\n      {{ 'notifications.noNotifications' | translate }}\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate let-item>\r\n  <app-notification-item\r\n    [iconOptions]=\"options?.icons\"\r\n    [notification]=\"item\"\r\n    [currentLang]=\"currentLang\"\r\n    [class.cursor-pointer]=\"item.properties?.['notf_nt:isClickable']\"\r\n    (click)=\"onItemClick(item)\"\r\n    (markAsUnread)=\"markAsUnread(item)\"\r\n    (markAsRead)=\"markAsRead(item)\"\r\n    (markAsDeleted)=\"markAsDeleted(item)\"\r\n  ></app-notification-item>\r\n</ng-template>\r\n", styles: [".notifications-container{padding:var(--nto-container-padding, 0)}.notifications-container__header{padding:var(--nto-container-header-padding, .5rem);display:var(--nto-container-header-display, flex);justify-content:var(--nto-container-header-justify, space-between);align-items:var(--nto-container-header-align-items, center);box-sizing:border-box}.notifications-container__title{color:var(--nto-container-title-color, #2f258a);font-size:var(--nto-container-title-size, 1.1rem);font-weight:var(--nto-container-title-weight, normal)}.notifications-container__filters{display:var(--nto-container-filters-display, flex);grid-gap:var(--nto-container-filters-gap, .5rem);gap:var(--nto-container-filters-gap, .5rem)}.notifications-container__body{position:relative;height:var(--nto-container-height, 74vh);overflow-y:auto}.notifications-container__body--pagination{--nto-container-height: var(--nto-container-pagination-height, auto)}.notifications-container__loader{display:grid;place-items:center}.notifications-container__pagination-loader{display:grid;place-items:center;position:absolute;inset:0 0;width:100%;height:100%;background:var(--nto-pagination-background, rgba(255, 255, 255, .4))}.no-notifications{min-height:var(--no-notifications-min-height, 0);display:var(--no-notifications-display, flex);flex-direction:var(--no-notifications-direction, column);justify-content:var(--no-notifications-justify, center);align-items:var(--no-notifications-items, center);color:var(--no-notifications-color, #b4bac6);font-size:var(--no-notifications-size, 1rem)}\n"], components: [{ type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: ["typeChanged"] }, { type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: ["dateChanged"] }, { type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: ["status"], outputs: ["statusChanged"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: NotificationItemComponent, selector: "app-notification-item", inputs: ["iconOptions", "currentLang", "notification"], outputs: ["markAsUnread", "markAsRead", "markAsDeleted"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1.TranslatePipe, "async": i4$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsListContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -40181,7 +40184,7 @@ class NotificationsSettingsComponent extends BaseNotification {
     }
 }
 NotificationsSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsSettingsComponent, deps: [{ token: i0.Injector }, { token: TranslationService }, { token: i0.ChangeDetectorRef }, { token: CustomToastrService }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsSettingsComponent, selector: "app-notifications-settings", inputs: { channel: "channel" }, outputs: { onSubscribe: "onSubscribe", onUnsubscribe: "onUnsubscribe" }, usesInheritance: true, ngImport: i0, template: "<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-4 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n<div *ngIf=\"settings$ | async as settings\" class=\"notifications-settings\">\r\n  <ng-container *ngIf=\"!isLoadingResult && settings.definitions\">\r\n    <div\r\n      *ngFor=\"let group of settings.definitions | keyvalue\"\r\n      class=\"notifications-settings__section notifications-settings__section--{{\r\n        group.key\r\n      }}\"\r\n    >\r\n      <div class=\"notifications-settings__section__title\">\r\n        <mat-icon> tune </mat-icon>\r\n        <strong> {{ 'vocabulary.VOC_Notf_SourceTypes.' + group.key | translate }}</strong>\r\n      </div>\r\n      <div class=\"notifications-settings__section__content\">\r\n        <div *ngFor=\"let definition of group.value\" class=\"notifications-settings__group\">\r\n          <mat-slide-toggle\r\n            [name]=\"definition.title\"\r\n            [checked]=\"\r\n              definition.autoSubscription\r\n                ? true\r\n                : (definition | checkIfSubscribed : settings.subscriptions)\r\n            \"\r\n            class=\"notifications-settings__group__toggle\"\r\n            [class.is-loading]=\"changingItemId === definition.uid\"\r\n            [disabled]=\"definition.autoSubscription\"\r\n            (change)=\"settingChanged(definition, $event)\"\r\n          >\r\n          </mat-slide-toggle>\r\n          <span class=\"notifications-settings__group__title\"\r\n            >{{ currentLang == 'ar' ? definition?.arTitle : definition?.enTitle }}\r\n          </span>\r\n\r\n          <p class=\"notifications-settings__group__description\">\r\n            {{\r\n              currentLang == 'ar' ? definition?.arDescription : definition?.enDescription\r\n            }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".notifications-settings{padding:var(--notifications-settings-padding, 1rem 0)}.notifications-settings__section{border:var(--setting-section-border, 1px solid #f0f0f0);border-radius:var(--setting-section-radius, 6px);padding:var(--settings-section-padding, 1rem);margin-block:var(--settings-section-margin-block, 0 1.5rem);margin-inline:var(--settings-section-margin-inline, 0)}.notifications-settings__section__title{display:var(--setting-section-title-display, flex);align-items:var(--setting-section-title-items, center);grid-gap:var(--setting-section-title-gap, .5rem);gap:var(--setting-section-title-gap, .5rem);padding-block:var(--setting-section-title-padding-block, .5rem);border-bottom:var(--setting-section-title-border-bottom, 1px solid #f0f0f0);background:var(--setting-section-title-background, transparent);color:var(--setting-section-title-color, #2f258a)}.notifications-settings__section__content{padding-block:var(--setting-section-content-padding-block, 1rem 0);display:var(--setting-section-content-display, grid);grid-template-columns:var(--setting-section-content-columns, repeat(auto-fit, minmax(490px, 1fr)));grid-gap:var(--setting-section-content-gap, 1rem);gap:var(--setting-section-content-gap, 1rem)}.notifications-settings__group{display:var(--setting-group-display, grid);grid-template-columns:var(--setting-group-columns, auto 1fr);background:var(--setting-group-background, transparent);padding:var(--setting-group-padding, .2rem 0);grid-gap:var(--setting-group-gap, .1rem 1rem);gap:var(--setting-group-gap, .1rem 1rem)}.notifications-settings__group__toggle{order:var(--setting-toggle-order)}.notifications-settings__group__toggle.is-loading{--loading-color: var(--setting-toggle-loader-color, #9189dd36);opacity:.5}.notifications-settings__group__toggle.is-loading ::ng-deep{pointer-events:none}.notifications-settings__group__toggle.is-loading ::ng-deep .mat-slide-toggle-thumb{animation:animateLoader 1.5s linear infinite}.notifications-settings__group__toggle.is-loading ::ng-deep label{margin-bottom:0}.notifications-settings__group__description{color:var(--setting-option-description-color, #666);font-size:var(--setting-option-description-size, .8rem);grid-column:var(--setting-option-description-column, 2)}@keyframes animateLoader{0%{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}50%{box-shadow:0 0 0 1px var(--loading-color),0 0 0 3px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 5px var(--loading-color),0 0 0 6px var(--loading-color)}to{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}}\n"], components: [{ type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "keyvalue": i4$1.KeyValuePipe, "translate": i1.TranslatePipe, "checkIfSubscribed": CheckIfSubscribedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationsSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsSettingsComponent, selector: "app-notifications-settings", inputs: { channel: "channel" }, outputs: { onSubscribe: "onSubscribe", onUnsubscribe: "onUnsubscribe" }, usesInheritance: true, ngImport: i0, template: "<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-4 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n<div *ngIf=\"settings$ | async as settings\" class=\"notifications-settings\">\r\n  <ng-container *ngIf=\"!isLoadingResult && settings.definitions\">\r\n    <div\r\n      *ngFor=\"let group of settings.definitions | keyvalue\"\r\n      class=\"notifications-settings__section notifications-settings__section--{{\r\n        group.key\r\n      }}\"\r\n    >\r\n      <div class=\"notifications-settings__section__title\">\r\n        <mat-icon> tune </mat-icon>\r\n        <strong> {{ 'vocabulary.VOC_Notf_SourceTypes.' + group.key | translate }}</strong>\r\n      </div>\r\n      <div class=\"notifications-settings__section__content\">\r\n        <div *ngFor=\"let definition of group.value\" class=\"notifications-settings__group\">\r\n          <mat-slide-toggle\r\n            [name]=\"definition.title\"\r\n            [checked]=\"\r\n              definition.autoSubscription\r\n                ? true\r\n                : (definition | checkIfSubscribed : settings.subscriptions)\r\n            \"\r\n            class=\"notifications-settings__group__toggle\"\r\n            [class.is-loading]=\"changingItemId === definition.uid\"\r\n            [disabled]=\"definition.autoSubscription\"\r\n            (change)=\"settingChanged(definition, $event)\"\r\n          >\r\n          </mat-slide-toggle>\r\n          <span class=\"notifications-settings__group__title\"\r\n            >{{ currentLang == 'ar' ? definition?.arTitle : definition?.enTitle }}\r\n          </span>\r\n\r\n          <p class=\"notifications-settings__group__description\">\r\n            {{\r\n              currentLang == 'ar' ? definition?.arDescription : definition?.enDescription\r\n            }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".notifications-settings{padding:var(--notifications-settings-padding, 1rem 0)}.notifications-settings__section{border:var(--setting-section-border, 1px solid #f0f0f0);border-radius:var(--setting-section-radius, 6px);padding:var(--settings-section-padding, 1rem);margin-block:var(--settings-section-margin-block, 0 1.5rem);margin-inline:var(--settings-section-margin-inline, 0)}.notifications-settings__section__title{display:var(--setting-section-title-display, flex);align-items:var(--setting-section-title-items, center);grid-gap:var(--setting-section-title-gap, .5rem);gap:var(--setting-section-title-gap, .5rem);padding-block:var(--setting-section-title-padding-block, .5rem);border-bottom:var(--setting-section-title-border-bottom, 1px solid #f0f0f0);background:var(--setting-section-title-background, transparent);color:var(--setting-section-title-color, #2f258a)}.notifications-settings__section__content{padding-block:var(--setting-section-content-padding-block, 1rem 0);display:var(--setting-section-content-display, grid);grid-template-columns:var(--setting-section-content-columns, repeat(auto-fit, minmax(490px, 1fr)));grid-gap:var(--setting-section-content-gap, 1rem);gap:var(--setting-section-content-gap, 1rem)}.notifications-settings__group{display:var(--setting-group-display, grid);grid-template-columns:var(--setting-group-columns, auto 1fr);background:var(--setting-group-background, transparent);padding:var(--setting-group-padding, .2rem 0);grid-gap:var(--setting-group-gap, .1rem 1rem);gap:var(--setting-group-gap, .1rem 1rem)}.notifications-settings__group__toggle{order:var(--setting-toggle-order)}.notifications-settings__group__toggle.is-loading{--loading-color: var(--setting-toggle-loader-color, #9189dd36);opacity:.5}.notifications-settings__group__toggle.is-loading ::ng-deep{pointer-events:none}.notifications-settings__group__toggle.is-loading ::ng-deep .mat-slide-toggle-thumb{animation:animateLoader 1.5s linear infinite}.notifications-settings__group__toggle.is-loading ::ng-deep label{margin-bottom:0}.notifications-settings__group__description{color:var(--setting-option-description-color, #666);font-size:var(--setting-option-description-size, .8rem);grid-column:var(--setting-option-description-column, 2)}@keyframes animateLoader{0%{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}50%{box-shadow:0 0 0 1px var(--loading-color),0 0 0 3px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 5px var(--loading-color),0 0 0 6px var(--loading-color)}to{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}}\n"], components: [{ type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "keyvalue": i4$1.KeyValuePipe, "translate": i1.TranslatePipe, "checkIfSubscribed": CheckIfSubscribedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsSettingsComponent, decorators: [{
             type: Component,
             args: [{
@@ -44816,7 +44819,7 @@ class NdfReportsComponent extends DestroySubject {
     }
 }
 NdfReportsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfReportsComponent, deps: [{ token: i1.TranslateService }, { token: FiltersMapperService }, { token: NdfReportsService }, { token: ChartManagerService }, { token: ReportTransformService }, { token: i0.ChangeDetectorRef }, { token: FilterQueryService }, { token: ReportsStateService }, { token: ReportConfigurationService }, { token: i1$5.Router }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-NdfReportsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportsComponent, selector: "app-ndf-reports", inputs: { jsonEditorEnabled: "jsonEditorEnabled", reportsKey: "reportsKey", navigateRoute: "navigateRoute", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n\t*ngIf=\"reportsData$ | async as reports\"\r\n\tclass=\"ndf-reports__container\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tndfFluidHeight\r\n>\r\n\t<div class=\"ndf-reports__panel print:hidden\" *ngIf=\"!!filtersConfig?.fields?.length\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig?.fields\"\r\n\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\tclass=\"ndf-reports__filters\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\r\n\t<div class=\"ndf-reports__content\" (scrolled)=\"onContentScroll($event)\">\r\n\t\t<div class=\"ndf-reports__header flex pt-4 print:hidden\">\r\n\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<app-editor-button\r\n\t\t\t\t*ngIf=\"jsonEditorEnabled && reportsKey\"\r\n\t\t\t\t[key]=\"reportsKey\"\r\n\t\t\t\t[type]=\"editorType\"\r\n\t\t\t></app-editor-button>\r\n\t\t\t<button mat-stroked-button *ngIf=\"config?.options?.print\" class=\"print-button\" (click)=\"printAll()\">\r\n\t\t\t\t<mat-icon> print</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n\r\n\t\t<div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n\t\t\t<app-ndf-report\r\n\t\t\t\t*ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n\t\t\t\t[config]=\"config\"\r\n\t\t\t\t[data]=\"reports?.response\"\r\n\t\t\t\t[criteria]=\"filtersParams$ | async\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\t[attr.data-width]=\"config?.layout?.width || 4\"\r\n\t\t\t\t[attr.data-height]=\"config?.layout?.height || 'auto'\"\r\n\t\t\t\t[attr.data-start-column]=\"config?.layout?.columnPosition || 'auto'\"\r\n\t\t\t\t[attr.data-start-row]=\"config?.layout?.rowPosition || 'auto'\"\r\n\t\t\t\t[class.wide]=\"config?.layout?.width >= 6\"\r\n\t\t\t\tclass=\"reports-grid__item {{ config?.layout?.styleClass }} \"\r\n\t\t\t\t(onNavigate)=\"onNavigate($event)\"\r\n\t\t\t\t(onOpen)=\"openReportDetails($event, config)\"\r\n\t\t\t></app-ndf-report>\r\n\t\t</div>\r\n\t</div>\r\n\t<div\r\n\t\tclass=\"ndf-reports__details print:hidden\"\r\n\t\t[class.opened]=\"showDetails\"\r\n\t\t[@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n\t\t(@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n\t>\r\n\t\t<app-ndf-table\r\n\t\t\t*ngIf=\"reportDetails$ | async as report\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\t[customCriteria]=\"filtersParams$ | async\"\r\n\t\t>\r\n\t\t\t<ng-template searchTableTemplate>\r\n\t\t\t\t<div class=\"ndf-reports__details__header flex gap-2\">\r\n\t\t\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-stroked-button class=\"close-button\" (click)=\"closeDetailsPanel()\">\r\n\t\t\t\t\t\t<mat-icon> close</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t{{ report.label | translate }}\r\n\t\t\t\t</h3>\r\n\t\t\t</ng-template>\r\n\t\t</app-ndf-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{--table-dev-height: var(--ndf-reports-table-dev-height, auto);padding-inline:var(--ndf-reports-inline-padding, 0);padding-block:var(--ndf-reports-block-padding, .5rem 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-reports-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host:before,:host:after{box-sizing:border-box}:host[dir=ltr]{--ndf-reports-panel-translateX: -100%;--ndf-reports-details-translateX: 100%}.ndf-reports__header{background-color:var(--ndf-reports-background, #fff);flex-direction:var(--ndf-reports-header-direction, row);justify-content:var(--ndf-reports-header-justify, space-between);align-items:var(--ndf-reports-header-items, center);padding-inline:var(--ndf-reports-header-padding-inline, .5rem);padding-block:var(--ndf-reports-header-padding-block, 0 .5rem);position:var(--ndf-reports-header-position, sticky);top:0;z-index:1}.ndf-reports__header__actions{justify-content:var(--ndf-reports-actions-justify, flex-end)}.ndf-reports__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-reports__container{--panel-width: var(--ndf-reports-panel-width, 18rem);position:relative;overflow:var(--ndf-reports-container-overflow, hidden);display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-reports-height, calc(var(--ndf-fluid-height) - calc(var(--ndf-reports-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-reports__container.panel-opened{--ndf-details-margin: var(--panel-width);--ndf-reports-panel-translateX: 0;--ndf-reports-content-margin: var(--panel-width)}@media print{.ndf-reports__container{--ndf-reports-container-overflow: visible;height:100%}}.ndf-reports__panel,.ndf-reports__content .ndf-reports__details{overflow:auto;transition:all .2s}.ndf-reports__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-reports-panel-translateX, 100%));padding-inline:var(--ndf-reports-panel-inline-padding, .5rem);padding-block:var(--ndf-reports-panel-block-padding, .5rem);background:var(--ndf-reports-panel-background, #fff);z-index:1}.ndf-reports__content{flex-grow:1;padding-inline-start:var(--ndf-reports-content-margin, 1rem);padding-inline-end:var(--ndf-reports-content-pie, 1rem);padding-block:var(--ndf-reports-content-pb, 0 1rem);overflow-y:var(--ndf-reports-content-overflow-y, auto);position:relative;display:flex;flex-direction:column}@media print{.ndf-reports__content{--ndf-reports-content-overflow-y: visible}}.ndf-reports__details{position:absolute;inset-inline-end:0;width:calc(100% - var(--ndf-details-margin, 0px));height:100%;transform:translate(var(--ndf-reports-details-translateX, -100%));padding-inline:var(--ndf-reports-details-inline-padding, 0rem);flex-grow:1;padding-block:var(--ndf-reports-details-block-padding, 0rem);background:var(--ndf-reports-details-background, #fff);z-index:1;transition:all .2s}.reports-grid{--grid-columns: 12;--column-width: calc(100% / var(--grid-columns));display:grid;grid-gap:var(--reports-grid-gap, 1.5rem);gap:var(--reports-grid-gap, 1.5rem);grid-template-columns:var(--rg-columns, repeat(var(--grid-columns), 1fr));margin-block:var(--reports-grid-margin-block, 1.25rem 0);padding-inline:var(--reports-grid-padding-inline, .5rem)}.reports-grid__item{display:grid;grid-gap:.3rem;gap:.3rem;min-width:0;text-align:center;vertical-align:middle}.reports-grid__item[data-width=\"1\"]{--col-span: span 1}.reports-grid__item[data-start-column=\"1\"]{--col-start: 1}.reports-grid__item[data-start-row=\"1\"]{--row-start: 1}.reports-grid__item[data-height=\"1\"]{--row-span: 1}.reports-grid__item[data-width=\"2\"]{--col-span: span 2}.reports-grid__item[data-start-column=\"2\"]{--col-start: 2}.reports-grid__item[data-start-row=\"2\"]{--row-start: 2}.reports-grid__item[data-height=\"2\"]{--row-span: 2}.reports-grid__item[data-width=\"3\"]{--col-span: span 3}.reports-grid__item[data-start-column=\"3\"]{--col-start: 3}.reports-grid__item[data-start-row=\"3\"]{--row-start: 3}.reports-grid__item[data-height=\"3\"]{--row-span: 3}.reports-grid__item[data-width=\"4\"]{--col-span: span 4}.reports-grid__item[data-start-column=\"4\"]{--col-start: 4}.reports-grid__item[data-start-row=\"4\"]{--row-start: 4}.reports-grid__item[data-height=\"4\"]{--row-span: 4}.reports-grid__item[data-width=\"5\"]{--col-span: span 5}.reports-grid__item[data-start-column=\"5\"]{--col-start: 5}.reports-grid__item[data-start-row=\"5\"]{--row-start: 5}.reports-grid__item[data-height=\"5\"]{--row-span: 5}.reports-grid__item[data-width=\"6\"]{--col-span: span 6}.reports-grid__item[data-start-column=\"6\"]{--col-start: 6}.reports-grid__item[data-start-row=\"6\"]{--row-start: 6}.reports-grid__item[data-height=\"6\"]{--row-span: 6}.reports-grid__item[data-width=\"7\"]{--col-span: span 7}.reports-grid__item[data-start-column=\"7\"]{--col-start: 7}.reports-grid__item[data-start-row=\"7\"]{--row-start: 7}.reports-grid__item[data-height=\"7\"]{--row-span: 7}.reports-grid__item[data-width=\"8\"]{--col-span: span 8}.reports-grid__item[data-start-column=\"8\"]{--col-start: 8}.reports-grid__item[data-start-row=\"8\"]{--row-start: 8}.reports-grid__item[data-height=\"8\"]{--row-span: 8}.reports-grid__item[data-width=\"9\"]{--col-span: span 9}.reports-grid__item[data-start-column=\"9\"]{--col-start: 9}.reports-grid__item[data-start-row=\"9\"]{--row-start: 9}.reports-grid__item[data-height=\"9\"]{--row-span: 9}.reports-grid__item[data-width=\"10\"]{--col-span: span 10}.reports-grid__item[data-start-column=\"10\"]{--col-start: 10}.reports-grid__item[data-start-row=\"10\"]{--row-start: 10}.reports-grid__item[data-height=\"10\"]{--row-span: 10}.reports-grid__item[data-width=\"11\"]{--col-span: span 11}.reports-grid__item[data-start-column=\"11\"]{--col-start: 11}.reports-grid__item[data-start-row=\"11\"]{--row-start: 11}.reports-grid__item[data-height=\"11\"]{--row-span: 11}.reports-grid__item[data-width=\"12\"]{--col-span: span 12}.reports-grid__item[data-start-column=\"12\"]{--col-start: 12}.reports-grid__item[data-start-row=\"12\"]{--row-start: 12}.reports-grid__item[data-height=\"12\"]{--row-span: 12}@media screen{.reports-grid__item{grid-column:var(--col-start, auto)/var(--col-span, span var(--grid-column, 2));grid-row:var(--row-start, auto)/span var(--row-span, 1);grid-template-rows:subgrid}}@media print{.reports-grid{--reports-grid-gap: 11mm;--reports-grid-margin-top: 9mm;--rg-columns: repeat(2, 1fr)}.reports-grid__item{--col-start: auto;--col-span: span 1;border:1px solid #f5f5f5;border-radius:var(--cp-radius, 1rem);page-break-inside:avoid;break-inside:avoid-page}}@media screen and (max-width: 1199px){.reports-grid__item[data-width=\"1\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"2\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"3\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"4\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"5\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"6\"]{--col-start: auto;--col-span: span 6}.reports-grid__item.wide{--col-start: 1;--col-span: -1}}@media screen and (max-width: 767px){.reports-grid__item[data-width]{--col-start: 1;--col-span: -1}}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { 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: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NdfReportComponent, selector: "app-ndf-report", inputs: ["config", "direction", "data", "criteria"], outputs: ["onNavigate", "onOpen"] }, { type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "styleClass", "configTransformer", "tableKey", "jsonEditorEnabled", "config", "customCriteria", "searchTerm"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "onPage", "onInitialized", "onLoaded", "onQueryChange", "onSort"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: ScrollableDivDirective, selector: "[scrolled]", inputs: ["scrollTop"], outputs: ["scrolled"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: SearchTableTemplateDirective, selector: "[searchTableTemplate]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, animations: [slideAnimation] });
+NdfReportsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportsComponent, selector: "app-ndf-reports", inputs: { jsonEditorEnabled: "jsonEditorEnabled", reportsKey: "reportsKey", navigateRoute: "navigateRoute", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n\t*ngIf=\"reportsData$ | async as reports\"\r\n\tclass=\"ndf-reports__container\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tndfFluidHeight\r\n>\r\n\t<div class=\"ndf-reports__panel print:hidden\" *ngIf=\"!!filtersConfig?.fields?.length\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig?.fields\"\r\n\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\tclass=\"ndf-reports__filters\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\r\n\t<div class=\"ndf-reports__content\" (scrolled)=\"onContentScroll($event)\">\r\n\t\t<div class=\"ndf-reports__header flex pt-4 print:hidden\">\r\n\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<app-editor-button\r\n\t\t\t\t*ngIf=\"jsonEditorEnabled && reportsKey\"\r\n\t\t\t\t[key]=\"reportsKey\"\r\n\t\t\t\t[type]=\"editorType\"\r\n\t\t\t></app-editor-button>\r\n\t\t\t<button mat-stroked-button *ngIf=\"config?.options?.print\" class=\"print-button\" (click)=\"printAll()\">\r\n\t\t\t\t<mat-icon> print</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n\r\n\t\t<div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n\t\t\t<app-ndf-report\r\n\t\t\t\t*ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n\t\t\t\t[config]=\"config\"\r\n\t\t\t\t[data]=\"reports?.response\"\r\n\t\t\t\t[criteria]=\"filtersParams$ | async\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\t[attr.data-width]=\"config?.layout?.width || 4\"\r\n\t\t\t\t[attr.data-height]=\"config?.layout?.height || 'auto'\"\r\n\t\t\t\t[attr.data-start-column]=\"config?.layout?.columnPosition || 'auto'\"\r\n\t\t\t\t[attr.data-start-row]=\"config?.layout?.rowPosition || 'auto'\"\r\n\t\t\t\t[class.wide]=\"config?.layout?.width >= 6\"\r\n\t\t\t\tclass=\"reports-grid__item {{ config?.layout?.styleClass }} \"\r\n\t\t\t\t(onNavigate)=\"onNavigate($event)\"\r\n\t\t\t\t(onOpen)=\"openReportDetails($event, config)\"\r\n\t\t\t></app-ndf-report>\r\n\t\t</div>\r\n\t</div>\r\n\t<div\r\n\t\tclass=\"ndf-reports__details print:hidden\"\r\n\t\t[class.opened]=\"showDetails\"\r\n\t\t[@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n\t\t(@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n\t>\r\n\t\t<app-ndf-table\r\n\t\t\t*ngIf=\"reportDetails$ | async as report\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\t[customCriteria]=\"filtersParams$ | async\"\r\n\t\t>\r\n\t\t\t<ng-template searchTableTemplate>\r\n\t\t\t\t<div class=\"ndf-reports__details__header flex gap-2\">\r\n\t\t\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-stroked-button class=\"close-button\" (click)=\"closeDetailsPanel()\">\r\n\t\t\t\t\t\t<mat-icon> close</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t{{ report.label | translate }}\r\n\t\t\t\t</h3>\r\n\t\t\t</ng-template>\r\n\t\t</app-ndf-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{--table-dev-height: var(--ndf-reports-table-dev-height, auto);padding-inline:var(--ndf-reports-inline-padding, 0);padding-block:var(--ndf-reports-block-padding, .5rem 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-reports-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host:before,:host:after{box-sizing:border-box}:host[dir=ltr]{--ndf-reports-panel-translateX: -100%;--ndf-reports-details-translateX: 100%}.ndf-reports__header{background-color:var(--ndf-reports-background, #fff);flex-direction:var(--ndf-reports-header-direction, row);justify-content:var(--ndf-reports-header-justify, space-between);align-items:var(--ndf-reports-header-items, center);padding-inline:var(--ndf-reports-header-padding-inline, .5rem);padding-block:var(--ndf-reports-header-padding-block, 0 .5rem);position:var(--ndf-reports-header-position, sticky);top:0;z-index:1}.ndf-reports__header__actions{justify-content:var(--ndf-reports-actions-justify, flex-end)}.ndf-reports__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-reports__container{--panel-width: var(--ndf-reports-panel-width, 18rem);position:relative;overflow:var(--ndf-reports-container-overflow, hidden);display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-reports-height, calc(var(--ndf-fluid-height) - calc(var(--ndf-reports-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-reports__container.panel-opened{--ndf-details-margin: var(--panel-width);--ndf-reports-panel-translateX: 0;--ndf-reports-content-margin: var(--panel-width)}@media print{.ndf-reports__container{--ndf-reports-container-overflow: visible;height:100%}}.ndf-reports__panel,.ndf-reports__content .ndf-reports__details{overflow:auto;transition:all .2s}.ndf-reports__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-reports-panel-translateX, 100%));padding-inline:var(--ndf-reports-panel-inline-padding, .5rem);padding-block:var(--ndf-reports-panel-block-padding, .5rem);background:var(--ndf-reports-panel-background, #fff);z-index:1}.ndf-reports__content{flex-grow:1;padding-inline-start:var(--ndf-reports-content-margin, 1rem);padding-inline-end:var(--ndf-reports-content-pie, 1rem);padding-block:var(--ndf-reports-content-pb, 0 1rem);overflow-y:var(--ndf-reports-content-overflow-y, auto);position:relative;display:flex;flex-direction:column}@media print{.ndf-reports__content{--ndf-reports-content-overflow-y: visible}}.ndf-reports__details{position:absolute;inset-inline-end:0;width:calc(100% - var(--ndf-details-margin, 0px));height:100%;transform:translate(var(--ndf-reports-details-translateX, -100%));padding-inline:var(--ndf-reports-details-inline-padding, 0rem);flex-grow:1;padding-block:var(--ndf-reports-details-block-padding, 0rem);background:var(--ndf-reports-details-background, #fff);z-index:1;transition:all .2s}.reports-grid{--grid-columns: 12;--column-width: calc(100% / var(--grid-columns));display:grid;grid-gap:var(--reports-grid-gap, 1.5rem);gap:var(--reports-grid-gap, 1.5rem);grid-template-columns:var(--rg-columns, repeat(var(--grid-columns), 1fr));margin-block:var(--reports-grid-margin-block, 1.25rem 0);padding-inline:var(--reports-grid-padding-inline, .5rem)}.reports-grid__item{display:grid;grid-gap:.3rem;gap:.3rem;min-width:0;text-align:center;vertical-align:middle}.reports-grid__item[data-width=\"1\"]{--col-span: span 1}.reports-grid__item[data-start-column=\"1\"]{--col-start: 1}.reports-grid__item[data-start-row=\"1\"]{--row-start: 1}.reports-grid__item[data-height=\"1\"]{--row-span: 1}.reports-grid__item[data-width=\"2\"]{--col-span: span 2}.reports-grid__item[data-start-column=\"2\"]{--col-start: 2}.reports-grid__item[data-start-row=\"2\"]{--row-start: 2}.reports-grid__item[data-height=\"2\"]{--row-span: 2}.reports-grid__item[data-width=\"3\"]{--col-span: span 3}.reports-grid__item[data-start-column=\"3\"]{--col-start: 3}.reports-grid__item[data-start-row=\"3\"]{--row-start: 3}.reports-grid__item[data-height=\"3\"]{--row-span: 3}.reports-grid__item[data-width=\"4\"]{--col-span: span 4}.reports-grid__item[data-start-column=\"4\"]{--col-start: 4}.reports-grid__item[data-start-row=\"4\"]{--row-start: 4}.reports-grid__item[data-height=\"4\"]{--row-span: 4}.reports-grid__item[data-width=\"5\"]{--col-span: span 5}.reports-grid__item[data-start-column=\"5\"]{--col-start: 5}.reports-grid__item[data-start-row=\"5\"]{--row-start: 5}.reports-grid__item[data-height=\"5\"]{--row-span: 5}.reports-grid__item[data-width=\"6\"]{--col-span: span 6}.reports-grid__item[data-start-column=\"6\"]{--col-start: 6}.reports-grid__item[data-start-row=\"6\"]{--row-start: 6}.reports-grid__item[data-height=\"6\"]{--row-span: 6}.reports-grid__item[data-width=\"7\"]{--col-span: span 7}.reports-grid__item[data-start-column=\"7\"]{--col-start: 7}.reports-grid__item[data-start-row=\"7\"]{--row-start: 7}.reports-grid__item[data-height=\"7\"]{--row-span: 7}.reports-grid__item[data-width=\"8\"]{--col-span: span 8}.reports-grid__item[data-start-column=\"8\"]{--col-start: 8}.reports-grid__item[data-start-row=\"8\"]{--row-start: 8}.reports-grid__item[data-height=\"8\"]{--row-span: 8}.reports-grid__item[data-width=\"9\"]{--col-span: span 9}.reports-grid__item[data-start-column=\"9\"]{--col-start: 9}.reports-grid__item[data-start-row=\"9\"]{--row-start: 9}.reports-grid__item[data-height=\"9\"]{--row-span: 9}.reports-grid__item[data-width=\"10\"]{--col-span: span 10}.reports-grid__item[data-start-column=\"10\"]{--col-start: 10}.reports-grid__item[data-start-row=\"10\"]{--row-start: 10}.reports-grid__item[data-height=\"10\"]{--row-span: 10}.reports-grid__item[data-width=\"11\"]{--col-span: span 11}.reports-grid__item[data-start-column=\"11\"]{--col-start: 11}.reports-grid__item[data-start-row=\"11\"]{--row-start: 11}.reports-grid__item[data-height=\"11\"]{--row-span: 11}.reports-grid__item[data-width=\"12\"]{--col-span: span 12}.reports-grid__item[data-start-column=\"12\"]{--col-start: 12}.reports-grid__item[data-start-row=\"12\"]{--row-start: 12}.reports-grid__item[data-height=\"12\"]{--row-span: 12}@media screen{.reports-grid__item{grid-column:var(--col-start, auto)/var(--col-span, span var(--grid-column, 2));grid-row:var(--row-start, auto)/span var(--row-span, 1);grid-template-rows:subgrid}}@media print{.reports-grid{--reports-grid-gap: 11mm;--reports-grid-margin-top: 9mm;--rg-columns: repeat(2, 1fr)}.reports-grid__item{--col-start: auto;--col-span: span 1;border:1px solid #f5f5f5;border-radius:var(--cp-radius, 1rem);page-break-inside:avoid;break-inside:avoid-page}}@media screen and (max-width: 1199px){.reports-grid__item[data-width=\"1\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"2\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"3\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"4\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"5\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"6\"]{--col-start: auto;--col-span: span 6}.reports-grid__item.wide{--col-start: 1;--col-span: -1}}@media screen and (max-width: 767px){.reports-grid__item[data-width]{--col-start: 1;--col-span: -1}}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { 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: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NdfReportComponent, selector: "app-ndf-report", inputs: ["config", "direction", "data", "criteria"], outputs: ["onNavigate", "onOpen"] }, { type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "styleClass", "configTransformer", "tableKey", "jsonEditorEnabled", "config", "customCriteria", "searchTerm"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "onPage", "onInitialized", "onLoaded", "onQueryChange", "onSort"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: ScrollableDivDirective, selector: "[scrolled]", inputs: ["scrollTop"], outputs: ["scrolled"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: SearchTableTemplateDirective, selector: "[searchTableTemplate]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, animations: [slideAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfReportsComponent, decorators: [{
             type: Component,
             args: [{
@@ -45226,7 +45229,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$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 } });
+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: 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: [{
@@ -45711,6 +45714,1585 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+var FileStatus;
+(function (FileStatus) {
+    FileStatus[FileStatus["Pending"] = 0] = "Pending";
+    FileStatus[FileStatus["InProgress"] = 1] = "InProgress";
+    FileStatus[FileStatus["Canceled"] = 2] = "Canceled";
+    FileStatus[FileStatus["Error"] = 3] = "Error";
+    FileStatus[FileStatus["Completed"] = 4] = "Completed";
+})(FileStatus || (FileStatus = {}));
+var UploadProvider;
+(function (UploadProvider) {
+    UploadProvider["Nuxeo"] = "nuxeo";
+    UploadProvider["S3"] = "s3";
+})(UploadProvider || (UploadProvider = {}));
+var FileEventType;
+(function (FileEventType) {
+    FileEventType[FileEventType["Changes"] = 0] = "Changes";
+    FileEventType[FileEventType["Complete"] = 1] = "Complete";
+    FileEventType[FileEventType["Reset"] = 2] = "Reset";
+})(FileEventType || (FileEventType = {}));
+
+const UPLOADER_CONFIG = {
+    DEFAULT_PROVIDER: 'nuxeo',
+    MAX_CONCURRENT_REQUESTS: 5,
+    IS_CHUNKED_ENABLED: true,
+    MIN_File_SIZE: 1024 * 1024 * 5,
+    CHUNK_SIZE: 1024 * 1024 * 5,
+    DELAY_RETRY_ATTEMPTS: 500,
+    MAX_RETRY_ATTEMPTS: 3 // maximum number of retry attempts if an upload request fails
+};
+
+var _a, _UploaderHelper_prepareChunks;
+class UploaderHelper {
+    static catchError() {
+        return catchError((error) => {
+            if (error.status === 308 /* PermanentRedirect */) {
+                return of(error === null || error === void 0 ? void 0 : error.error);
+            }
+            else {
+                return EMPTY;
+            }
+        });
+    }
+    static retryWhen() {
+        return retryWhen((errors) => errors.pipe(concatMap((error, index) => {
+            if (index >= UPLOADER_CONFIG.MAX_RETRY_ATTEMPTS - 1) {
+                return throwError(() => new Error('Failed after retries'));
+            }
+            return of(error).pipe(delay(UPLOADER_CONFIG.DELAY_RETRY_ATTEMPTS));
+        })));
+    }
+    static createFileHeader(file, chunk) {
+        const headers = {
+            'Cache-Control': 'no-cache',
+            'X-File-Name': encodeURIComponent(file.data.name),
+            'X-File-Type': file.data.type,
+            'Content-Type': 'application/octet-stream',
+            'Content-Length': file.data.size,
+            'X-File-Size': file.data.size.toString()
+        };
+        if (file.chunks.length > 1) {
+            Object.assign(headers, {
+                'X-Upload-Type': 'chunked',
+                'X-Upload-Chunk-Index': file.chunks.findIndex((c) => c.index == chunk.index).toString(),
+                'X-Upload-Chunk-Count': file.chunks.length.toString(),
+                'Content-Length': chunk.blob.size
+            });
+        }
+        return headers;
+    }
+    static prepareConfig() {
+        var _b, _c, _d, _e, _f, _g, _h;
+        UPLOADER_CONFIG.DEFAULT_PROVIDER =
+            ((_b = EnvManager.environment.uploader) === null || _b === void 0 ? void 0 : _b.defaultUploader) || UPLOADER_CONFIG.DEFAULT_PROVIDER;
+        UPLOADER_CONFIG.MAX_CONCURRENT_REQUESTS =
+            ((_c = EnvManager.environment.uploader) === null || _c === void 0 ? void 0 : _c.maxConcurrentRequests) || UPLOADER_CONFIG.MAX_CONCURRENT_REQUESTS;
+        UPLOADER_CONFIG.IS_CHUNKED_ENABLED = ((_d = EnvManager.environment.uploader) === null || _d === void 0 ? void 0 : _d.isChunkedEnabled) == 'YES';
+        UPLOADER_CONFIG.MIN_File_SIZE = ((_e = EnvManager.environment.uploader) === null || _e === void 0 ? void 0 : _e.minFileSize) || UPLOADER_CONFIG.MIN_File_SIZE;
+        UPLOADER_CONFIG.CHUNK_SIZE = ((_f = EnvManager.environment.uploader) === null || _f === void 0 ? void 0 : _f.chunkSize) || UPLOADER_CONFIG.CHUNK_SIZE;
+        UPLOADER_CONFIG.DELAY_RETRY_ATTEMPTS =
+            ((_g = EnvManager.environment.uploader) === null || _g === void 0 ? void 0 : _g.delayRetryAttempts) || UPLOADER_CONFIG.DELAY_RETRY_ATTEMPTS;
+        UPLOADER_CONFIG.MAX_RETRY_ATTEMPTS =
+            ((_h = EnvManager.environment.uploader) === null || _h === void 0 ? void 0 : _h.maxRetryAttempts) || UPLOADER_CONFIG.MAX_RETRY_ATTEMPTS;
+    }
+    static prepareFiles(options, startFromIndex = 0) {
+        const batchsFile = options.files.map((file, index) => {
+            const id = FormioUtils.guid();
+            const batchFile = {
+                id,
+                index: startFromIndex + index,
+                data: file,
+                progress: 0,
+                status: FileStatus.Pending,
+                provider: (options.provider || UPLOADER_CONFIG.DEFAULT_PROVIDER),
+                chunks: __classPrivateFieldGet(this, _a, "m", _UploaderHelper_prepareChunks).call(this, id, file),
+                metadata: options.metadata
+            };
+            return batchFile;
+        });
+        return batchsFile;
+    }
+}
+_a = UploaderHelper, _UploaderHelper_prepareChunks = function _UploaderHelper_prepareChunks(fileId, file) {
+    const { CHUNK_SIZE, MIN_File_SIZE } = UPLOADER_CONFIG;
+    if (file.size <= MIN_File_SIZE) {
+        return [
+            {
+                fileId,
+                index: 0,
+                start: 0,
+                end: file.size,
+                status: FileStatus.Pending
+            }
+        ];
+    }
+    return Array.from({ length: Math.ceil(file.size / CHUNK_SIZE) }, (_, index) => ({
+        fileId,
+        index,
+        start: index * CHUNK_SIZE,
+        end: Math.min((index + 1) * CHUNK_SIZE, file.size),
+        status: FileStatus.Pending
+    }));
+};
+
+class NuxeoProvider extends BaseService {
+    constructor(injector) {
+        super(injector);
+    }
+    upload(file, chunk) {
+        chunk.blob = file.data.slice(chunk.start, chunk.end);
+        const headers = UploaderHelper.createFileHeader(file, chunk);
+        return this.post({
+            endpoint: `${nuxeoBaseUrl()}upload/${file.batchId}/${file.index}`,
+            headers,
+            payload: chunk.blob
+        }).pipe(UploaderHelper.catchError(), UploaderHelper.retryWhen());
+    }
+    complete(file) {
+        return of(null);
+    }
+}
+NuxeoProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoProvider, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+NuxeoProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoProvider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+class S3Provider extends BaseService {
+    constructor(injector) {
+        super(injector);
+    }
+    upload(file, chunk) {
+        throw new Error('Method not implemented.');
+    }
+    complete(file) {
+        return iif(() => file.chunks.length > 1, this.post(`${nuxeoBaseUrl()}upload/${file.batchId}/${file.index}/complete`).pipe(UploaderHelper.catchError(), UploaderHelper.retryWhen()), of(null));
+    }
+}
+S3Provider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: S3Provider, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+S3Provider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: S3Provider, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: S3Provider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+var _NdfUploaderService_instances, _NdfUploaderService_cancelRequests, _NdfUploaderService_filesInfo, _NdfUploaderService_batchFiles, _NdfUploaderService_startExecution, _NdfUploaderService_generateBatch, _NdfUploaderService_uploadChunk, _NdfUploaderService_onUploadDone, _NdfUploaderService_onUploadError, _NdfUploaderService_complete, _NdfUploaderService_getProvider, _NdfUploaderService_updateFiles, _NdfUploaderService_prepareEvent, _NdfUploaderService_getFile, _NdfUploaderService_getFiles, _NdfUploaderService_createBatch, _NdfUploaderService_deleteBatch, _NdfUploaderService_deleteFile, _NdfUploaderService_getFileInfo;
+function nuxeoBaseUrl() {
+    return `${EnvManager.environment.nuxeo}/api/v1/`;
+}
+class NdfUploaderService extends BaseService {
+    constructor(injector, nuxeoProvider, s3Provider, iconService) {
+        super(injector);
+        this.nuxeoProvider = nuxeoProvider;
+        this.s3Provider = s3Provider;
+        this.iconService = iconService;
+        _NdfUploaderService_instances.add(this);
+        _NdfUploaderService_cancelRequests.set(this, new Subject());
+        _NdfUploaderService_filesInfo.set(this, new Subject());
+        _NdfUploaderService_batchFiles.set(this, new BehaviorSubject([]));
+        this.events$ = __classPrivateFieldGet(this, _NdfUploaderService_filesInfo, "f").asObservable();
+        UploaderHelper.prepareConfig();
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_startExecution).call(this);
+    }
+    upload(filesOrOptions) {
+        const options = Array.isArray(filesOrOptions) ? { files: filesOrOptions } : Object.assign({}, filesOrOptions);
+        const batchsFile = UploaderHelper.prepareFiles(options, 0);
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...__classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this), ...batchsFile]);
+        return __classPrivateFieldGet(this, _NdfUploaderService_filesInfo, "f").asObservable();
+    }
+    submit(options) {
+        return this.customAutomation({
+            operation: options.operation,
+            context: options.context,
+            headers: options.headers,
+            input: options.input,
+            params: options.params
+        }).pipe(UploaderHelper.catchError(), UploaderHelper.retryWhen());
+    }
+    cancel(batchId) {
+        return __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_deleteBatch).call(this, batchId);
+    }
+    reset() {
+        __classPrivateFieldSet(this, _NdfUploaderService_batchFiles, new BehaviorSubject([]), "f");
+        __classPrivateFieldGet(this, _NdfUploaderService_filesInfo, "f").next({ data: [], type: FileEventType.Reset });
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_startExecution).call(this);
+    }
+    stop(fileId) {
+        const files = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this);
+        const file = files.find((f) => f.id == fileId);
+        if (file.status == FileStatus.InProgress) {
+            __classPrivateFieldGet(this, _NdfUploaderService_cancelRequests, "f").next();
+            __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_startExecution).call(this);
+        }
+        file.chunks.filter((c) => c.status != FileStatus.Completed).forEach((c) => (c.status = FileStatus.Canceled));
+        file.status = FileStatus.Canceled;
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files]);
+    }
+    remove(fileId) {
+        return __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_deleteFile).call(this, fileId);
+    }
+    resume(fileId) {
+        const files = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this);
+        const file = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFile).call(this, fileId);
+        if (file.status == FileStatus.Pending)
+            return;
+        file.status = FileStatus.Pending;
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files]);
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFileInfo).call(this, fileId)
+            .pipe(first())
+            .subscribe((uploaded) => {
+            file.chunks
+                .filter((c) => !uploaded.uploadedChunkIds.includes(c.index))
+                .forEach((c) => (c.status = FileStatus.Pending));
+            __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files]);
+        });
+    }
+}
+_NdfUploaderService_cancelRequests = new WeakMap(), _NdfUploaderService_filesInfo = new WeakMap(), _NdfUploaderService_batchFiles = new WeakMap(), _NdfUploaderService_instances = new WeakSet(), _NdfUploaderService_startExecution = function _NdfUploaderService_startExecution() {
+    __classPrivateFieldGet(this, _NdfUploaderService_batchFiles, "f")
+        .pipe(distinctUntilChanged(), debounceTime(100), switchMap((batchFiles) => {
+        const filesWithBatchId = batchFiles.filter((file) => file.batchId);
+        const filesWithoutBatchId = batchFiles.filter((file) => !file.batchId);
+        const chunkRequests = _flatMap(filesWithBatchId, (file) => file.chunks).filter((chunk) => chunk.status === FileStatus.Pending);
+        const fileRequests = filesWithoutBatchId.filter((file) => file.status === FileStatus.Pending);
+        return from([...chunkRequests, ...fileRequests]);
+    }), mergeMap((entity) => {
+        const file = entity;
+        if (file === null || file === void 0 ? void 0 : file.batchId) {
+            return __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_uploadChunk).call(this, entity);
+        }
+        else {
+            return __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_generateBatch).call(this, file === null || file === void 0 ? void 0 : file.id);
+        }
+    }, UPLOADER_CONFIG.MAX_CONCURRENT_REQUESTS), takeUntil(__classPrivateFieldGet(this, _NdfUploaderService_cancelRequests, "f")), finalize(() => console.log('All requests processed')))
+        .subscribe({
+        complete: () => {
+            console.log('Processing of requests completed');
+        }
+    });
+}, _NdfUploaderService_generateBatch = function _NdfUploaderService_generateBatch(fileId) {
+    const files = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this);
+    const file = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFile).call(this, fileId);
+    if (file.status === FileStatus.Pending) {
+        file.status = FileStatus.InProgress;
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files]);
+        return __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_createBatch).call(this).pipe(UploaderHelper.catchError(), tap((batchId) => {
+            file.batchId = batchId;
+            file.chunks.forEach((c) => (c.batchId = batchId));
+        }), tap(() => __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files])), catchError((error) => {
+            __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_onUploadError).call(this, fileId);
+            return EMPTY;
+        }));
+    }
+    return EMPTY;
+}, _NdfUploaderService_uploadChunk = function _NdfUploaderService_uploadChunk(chunk) {
+    if (chunk.status === FileStatus.Pending) {
+        chunk.status = FileStatus.InProgress;
+        const files = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this);
+        const file = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFile).call(this, chunk.fileId);
+        if (file.status != FileStatus.InProgress) {
+            file.status = FileStatus.InProgress;
+            __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files]);
+        }
+        return __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getProvider).call(this, file)
+            .upload(file, chunk)
+            .pipe(UploaderHelper.catchError(), tap(() => __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_onUploadDone).call(this, chunk)), catchError((error) => {
+            if (error.status === 308 /* PermanentRedirect */) {
+                __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_onUploadDone).call(this, chunk);
+            }
+            else {
+                __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_onUploadError).call(this, chunk.fileId);
+            }
+            return EMPTY;
+        }));
+    }
+    return EMPTY;
+}, _NdfUploaderService_onUploadDone = function _NdfUploaderService_onUploadDone(chunk) {
+    const files = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this);
+    const file = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFile).call(this, chunk.fileId);
+    file.chunks.find((c) => c.index == chunk.index).status = FileStatus.Completed;
+    const totalChunks = file.chunks.length;
+    const completedChunks = file.chunks.filter((c) => c.status === FileStatus.Completed).length;
+    if (completedChunks === totalChunks) {
+        file.status = FileStatus.Completed;
+        file.progress = 100;
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_complete).call(this, file);
+    }
+    else {
+        const progress = (completedChunks / totalChunks) * 100;
+        if (file.progress != progress) {
+            file.progress = progress;
+            __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files]);
+        }
+    }
+}, _NdfUploaderService_onUploadError = function _NdfUploaderService_onUploadError(fileId) {
+    const files = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this);
+    const file = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFile).call(this, fileId);
+    file.chunks.forEach((c) => (c.status = FileStatus.Error));
+    if (file.status != FileStatus.Error) {
+        file.status = FileStatus.Error;
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files]);
+    }
+}, _NdfUploaderService_complete = function _NdfUploaderService_complete(batchFile) {
+    __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getProvider).call(this, batchFile)
+        .complete(batchFile)
+        .pipe(first())
+        .subscribe(() => {
+        const files = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this);
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files]);
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_prepareEvent).call(this, files, batchFile.id);
+    });
+}, _NdfUploaderService_getProvider = function _NdfUploaderService_getProvider(batchFile) {
+    switch (batchFile.provider) {
+        case UploadProvider.Nuxeo:
+            return this.nuxeoProvider;
+        case UploadProvider.S3:
+            return this.s3Provider;
+        default:
+            throw new Error('Invalid upload provider. Please contact with NDF developers.');
+    }
+}, _NdfUploaderService_updateFiles = function _NdfUploaderService_updateFiles(files) {
+    __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_prepareEvent).call(this, files);
+    __classPrivateFieldGet(this, _NdfUploaderService_batchFiles, "f").next([...files]);
+}, _NdfUploaderService_prepareEvent = function _NdfUploaderService_prepareEvent(files, fileId = null) {
+    const filteredFiles = fileId ? files.filter((f) => f.id === fileId) : files;
+    __classPrivateFieldGet(this, _NdfUploaderService_filesInfo, "f").next({
+        type: fileId ? FileEventType.Complete : FileEventType.Changes,
+        data: filteredFiles.map(({ batchId, id, index, progress, status, provider, data, metadata }) => ({
+            batchId,
+            id,
+            index,
+            progress,
+            status,
+            provider,
+            data,
+            metadata,
+            icon: this.iconService.getFileIcon(data)
+        }))
+    });
+}, _NdfUploaderService_getFile = function _NdfUploaderService_getFile(fileId) {
+    const files = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this);
+    return files.find((f) => f.id == fileId);
+}, _NdfUploaderService_getFiles = function _NdfUploaderService_getFiles() {
+    return [...__classPrivateFieldGet(this, _NdfUploaderService_batchFiles, "f").getValue()];
+}, _NdfUploaderService_createBatch = function _NdfUploaderService_createBatch() {
+    return this.post(`${nuxeoBaseUrl()}upload`).pipe(UploaderHelper.catchError(), UploaderHelper.retryWhen(), map((batch) => {
+        return batch.batchId;
+    }));
+}, _NdfUploaderService_deleteBatch = function _NdfUploaderService_deleteBatch(batchId) {
+    return this.delete(`${nuxeoBaseUrl()}upload/${batchId}`).pipe(UploaderHelper.catchError(), UploaderHelper.retryWhen(), finalize(() => {
+        this.reset();
+    }));
+}, _NdfUploaderService_deleteFile = function _NdfUploaderService_deleteFile(fileId) {
+    const files = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFiles).call(this);
+    const file = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFile).call(this, fileId);
+    file.status = FileStatus.Pending;
+    __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files]);
+    return this.delete(`${nuxeoBaseUrl()}upload/${file.batchId}/${file.index}`).pipe(UploaderHelper.catchError(), UploaderHelper.retryWhen(), finalize(() => {
+        __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_updateFiles).call(this, [...files.filter((f) => f.id != fileId)]);
+    }));
+}, _NdfUploaderService_getFileInfo = function _NdfUploaderService_getFileInfo(fileId) {
+    const file = __classPrivateFieldGet(this, _NdfUploaderService_instances, "m", _NdfUploaderService_getFile).call(this, fileId);
+    return this.get(`${nuxeoBaseUrl()}upload/${file.batchId}/${file.index}`).pipe(UploaderHelper.catchError(), UploaderHelper.retryWhen());
+};
+NdfUploaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderService, deps: [{ token: i0.Injector }, { token: NuxeoProvider }, { token: S3Provider }, { token: IconService }], target: i0.ɵɵFactoryTarget.Injectable });
+NdfUploaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NuxeoProvider }, { type: S3Provider }, { type: IconService }]; } });
+
+class NdfUploaderBottomSheetComponent extends BaseComponent {
+    constructor(injector, nuxeoDialogService, uploaderService, uploaderBottomSheetService, files) {
+        super(injector);
+        this.nuxeoDialogService = nuxeoDialogService;
+        this.uploaderService = uploaderService;
+        this.uploaderBottomSheetService = uploaderBottomSheetService;
+        this.files = files;
+        this.expanded = true;
+        this.completed$ = new Subject();
+        this.fileStatus = FileStatus;
+        this.uploaderBottomSheetService.filesInfo$ = new BehaviorSubject([]);
+        this.uploaderService.reset();
+    }
+    ngOnInit() {
+        if (this.files.length) {
+            this.uploaderService
+                .upload(this.files)
+                .pipe(takeUntil(this.destroy$), distinctUntilChanged())
+                .subscribe((event) => {
+                if (event.type == FileEventType.Changes) {
+                    const data = event.data;
+                    this.uploaderBottomSheetService.filesInfo$.value.forEach((item) => {
+                        const updatedFile = data.find((q) => q.batchId == item.batchId);
+                        if (updatedFile) {
+                            updatedFile.documentId = item.documentId;
+                        }
+                    });
+                    this.uploaderBottomSheetService.filesInfo$.next(data);
+                    this.completed$.next(data.filter((q) => q.status == FileStatus.Completed).length);
+                }
+                else if (event.type == FileEventType.Complete) {
+                    this.uploaderBottomSheetService.notify({
+                        type: NdfUploaderSheetEventType.Submit,
+                        data: event.data[0]
+                    });
+                }
+            });
+        }
+    }
+    open(fileInfo) {
+        const ids = fileInfo
+            ? [fileInfo.documentId]
+            : this.uploaderBottomSheetService.filesInfo$.value
+                .filter((f) => f.status == FileStatus.Completed)
+                .map((f) => f.documentId);
+        this.uploaderBottomSheetService.notify({
+            type: NdfUploaderSheetEventType.Open,
+            data: ids
+        });
+    }
+    add(event) {
+        const input = event.target;
+        this.uploaderBottomSheetService.open(Array.from(input.files));
+        this.expanded = true;
+    }
+    dismiss() {
+        const allFilesCompleted = this.uploaderBottomSheetService.filesInfo$.value.every((f) => f.status === FileStatus.Completed);
+        if (allFilesCompleted) {
+            this.uploaderService.reset();
+            return this.uploaderBottomSheetService.close();
+        }
+        this.nuxeoDialogService.showConfirm({
+            message: 'confirmDialog.closeUploading',
+            actions: {
+                confirm: {
+                    label: 'BUTTONS.confirm',
+                    fn: () => {
+                        this.uploaderBottomSheetService.close();
+                        // const hasNotCompleted = this.filesInfo$.value.every(
+                        // 	(f) => f.status != FileStatus.Completed
+                        // );
+                        // if (hasNotCompleted) {
+                        // 	// will delete all not completed batches or not
+                        // 	return this.uploaderService.cancel();
+                        // }
+                        this.uploaderService.reset();
+                        return of(true);
+                    }
+                }
+            }
+        });
+    }
+    retry(fileInfo) {
+        this.uploaderService.resume(fileInfo.id);
+    }
+    cancel(fileInfo) {
+        this.uploaderService.stop(fileInfo.id);
+    }
+    trackFile(index, item) {
+        return item.id;
+    }
+}
+NdfUploaderBottomSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderBottomSheetComponent, deps: [{ token: i0.Injector }, { token: NuxeoDialogService }, { token: NdfUploaderService }, { token: NdfUploaderBottomSheetService }, { token: MAT_BOTTOM_SHEET_DATA }], target: i0.ɵɵFactoryTarget.Component });
+NdfUploaderBottomSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfUploaderBottomSheetComponent, selector: "ndf-uploader-bottom-sheet", usesInheritance: true, ngImport: i0, template: "<mat-expansion-panel [expanded]=\"expanded\" hideToggle>\r\n\t<mat-expansion-panel-header #panelH (click)=\"panelH._toggle()\">\r\n\t\t<div class=\"w-full d-flex justify-content-between\">\r\n\t\t\t<ng-container *ngIf=\"completed$ | async as completed; else generalMsg\">\r\n\t\t\t\t<ng-container *ngIf=\"completed > 1; else single\">\r\n\t\t\t\t\t<div class=\"flex items-center justify-center font-weight-bold\">\r\n\t\t\t\t\t\t{{ 'UploaderBottomSheet.MultiUploadsComplete' | translate : { completed: completed } }}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-template #single>\r\n\t\t\t\t\t<div class=\"flex items-center justify-center font-weight-bold\">\r\n\t\t\t\t\t\t{{ 'UploaderBottomSheet.SingleUploadsComplete' | translate }}\r\n\t\t\t\t\t</div></ng-template\r\n\t\t\t\t>\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-template #generalMsg>\r\n\t\t\t\t<div class=\"flex items-center justify-center font-weight-bold\">\r\n\t\t\t\t\t{{ 'UploaderBottomSheet.UploadingData' | translate }}\r\n\t\t\t\t</div>\r\n\t\t\t</ng-template>\r\n\r\n\t\t\t<div>\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 mx-2\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:plus'\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); fileInput.click()\"\r\n\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.CREATE' | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\t\t\t\t<input type=\"file\" hidden #fileInput (change)=\"add($event)\" multiple />\r\n\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 mx-2\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:open-folder'\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); open()\"\r\n\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.ShowUploadedFiles' | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 mx-2\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:expand'\"\r\n\t\t\t\t\t[ngClass]=\"{\r\n\t\t\t\t\t\tcontainerOpened: !expanded,\r\n\t\t\t\t\t\tcontainerClosed: expanded\r\n\t\t\t\t\t}\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); expanded = !expanded\"\r\n\t\t\t\t\tmatTooltip=\"{{ (expanded ? 'UploaderBottomSheet.MINIMIZED' : 'UploaderBottomSheet.MAXIMIZED') | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t<mat-icon\r\n\t\t\t\t\tclass=\"icon-size-3.5 close-sheet\"\r\n\t\t\t\t\t[svgIcon]=\"'icons:cancel-icon'\"\r\n\t\t\t\t\t(click)=\"$event.stopPropagation(); dismiss()\"\r\n\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.CLOSE' | translate }}\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-icon>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</mat-expansion-panel-header>\r\n\r\n\t<div>\r\n\t\t<div\r\n\t\t\tclass=\"file-item d-flex justify-content-between align-items-center py-2 px-5\"\r\n\t\t\t*ngFor=\"let fileInfo of uploaderBottomSheetService.filesInfo$ | async; trackBy: trackFile\"\r\n\t\t>\r\n\t\t\t<div class=\"d-flex align-items-center truncate\">\r\n\t\t\t\t<img src=\"{{ fileInfo.icon }}\" class=\"file-icon\" alt=\"{{ fileInfo.data.name }}\" />\r\n\t\t\t\t<span class=\"truncate file-name\">{{ fileInfo.data.name }}</span>\r\n\t\t\t</div>\r\n\t\t\t<div>\r\n\t\t\t\t<!-- only if user hover the row -->\r\n\t\t\t\t<span class=\"more-upload-actions align-items-center\">\r\n\t\t\t\t\t<!-- cancel if file : pending or uploading + hover -->\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"icon-size-3.5\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:cancel-icon'\"\r\n\t\t\t\t\t\t(click)=\"$event.stopPropagation(); cancel(fileInfo)\"\r\n\t\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.CANCEL' | translate }}\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Pending || fileInfo.status == fileStatus.InProgress\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- retry if file : canceled or error + hover -->\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"icon-size-4.5\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:retry'\"\r\n\t\t\t\t\t\t(click)=\"$event.stopPropagation(); retry(fileInfo)\"\r\n\t\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.RETRY' | translate }}\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Canceled || fileInfo.status == fileStatus.Error\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- open file : hover + completed -->\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"icon-size-4.5\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:open-folder'\"\r\n\t\t\t\t\t\t(click)=\"$event.stopPropagation(); open(fileInfo)\"\r\n\t\t\t\t\t\tmatTooltip=\"{{ 'UploaderBottomSheet.OPEN' | translate }}\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Completed\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t</mat-icon>\r\n\t\t\t\t</span>\r\n\r\n\t\t\t\t<span class=\"base-upload-actions align-items-center\">\r\n\t\t\t\t\t<!-- file completed -->\r\n\t\t\t\t\t<mat-icon class=\"icon-size-4.5\" [svgIcon]=\"'icons:complete'\" *ngIf=\"fileInfo.status == fileStatus.Completed\">\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- file has error -->\r\n\t\t\t\t\t<mat-icon class=\"icon-size-4.5\" [svgIcon]=\"'icons:error'\" *ngIf=\"fileInfo.status == fileStatus.Error\">\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<!-- user cancle the file -->\r\n\t\t\t\t\t<mat-icon class=\"icon-size-4.5\" [svgIcon]=\"'icons:error'\" *ngIf=\"fileInfo.status == fileStatus.Canceled\">\r\n\t\t\t\t\t</mat-icon>\r\n\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"spinner-container\"\r\n\t\t\t\t\t\t*ngIf=\"fileInfo.status == fileStatus.Pending || fileInfo.status == fileStatus.InProgress\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<mat-spinner [value]=\"fileInfo.progress\" diameter=\"20\" strokeWidth=\"2\" color=\"primary\"></mat-spinner>\r\n\t\t\t\t\t\t<div class=\"spinner-percentage\" *ngIf=\"fileInfo.status == fileStatus.InProgress\">\r\n\t\t\t\t\t\t\t{{ fileInfo.progress | number : '1.0-0' }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</mat-expansion-panel>\r\n", styles: [".upload-bottom-sheet{width:var(--upload-bottom-sheet-width, 30vw)!important;padding:var(--upload-bottom-sheet-padding, 0)!important;border-width:var(--upload-bottom-sheet-border-width, 1px);border-radius:var(--upload-bottom-sheet-border-radius, 16px 16px 0 0)!important;position:fixed!important;bottom:var(--upload-bottom-sheet-bottom, 0)!important}.upload-bottom-sheet .mat-icon-button{height:var(--upload-bottom-sheet-mat-icon-button-height, 1.125rem)!important;line-height:var(--upload-bottom-sheet-mat-icon-button-line-height, 1.125rem)!important}.upload-bottom-sheet .mat-expansion-panel-content{overflow-y:auto!important;max-height:var(--upload-bottom-sheet-mat-expansion-panel-max-height, 20vh)!important}.upload-bottom-sheet .mat-expansion-panel-body{padding:var(--upload-bottom-sheet-mat-expansion-panel-body-padding, 0)!important}.upload-bottom-sheet .file-icon{width:var(--upload-bottom-sheet-file-icon-width, 24px);margin-inline-end:var(--upload-bottom-sheet-file-icon-margin-inline-end, 6px);padding:var(--upload-bottom-sheet-file-icon-padding, 2px)}.upload-bottom-sheet .spinner-container{position:relative;display:inline-flex;align-items:center;justify-content:center}.upload-bottom-sheet .spinner-percentage{position:absolute;font-size:var(--upload-bottom-sheet-spinner-percentage-font-size, 10px)}.upload-bottom-sheet .file-name{height:var(--upload-bottom-sheet-file-name-height, 24px)}.upload-bottom-sheet .base-upload-actions{display:inline-block}.upload-bottom-sheet .more-upload-actions{display:none}.upload-bottom-sheet .file-item:hover{cursor:pointer;background:var(--upload-bottom-sheet-file-item-hover-background, #f5f5f5)}.upload-bottom-sheet .file-item:hover .base-upload-actions{display:none}.upload-bottom-sheet .file-item:hover .more-upload-actions{display:flex}.upload-bottom-sheet .close-sheet{margin-inline-start:var(--upload-bottom-sheet-close-sheet-margin-inline-start, .5rem)}[lang=ar] .upload-bottom-sheet{left:1rem!important}[lang=en] .upload-bottom-sheet{right:1rem!important}\n"], components: [{ type: i6$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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], 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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "number": i4$1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderBottomSheetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndf-uploader-bottom-sheet',
+                    styleUrls: ['./ndf-uploader-bottom-sheet.component.scss'],
+                    templateUrl: './ndf-uploader-bottom-sheet.component.html',
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: NuxeoDialogService }, { type: NdfUploaderService }, { type: NdfUploaderBottomSheetService }, { type: Array, decorators: [{
+                    type: Inject,
+                    args: [MAT_BOTTOM_SHEET_DATA]
+                }] }]; } });
+
+var _NdfUploaderBottomSheetService_instances, _NdfUploaderBottomSheetService_events, _NdfUploaderBottomSheetService_isBottomSheetOpen_get;
+const CUSTOM_PANEL_CLASS = 'upload-bottom-sheet';
+var NdfUploaderSheetEventType;
+(function (NdfUploaderSheetEventType) {
+    NdfUploaderSheetEventType["Open"] = "Open";
+    NdfUploaderSheetEventType["Submit"] = "Submit";
+})(NdfUploaderSheetEventType || (NdfUploaderSheetEventType = {}));
+class NdfUploaderBottomSheetService {
+    constructor(bottomSheetService, uploaderService, translateService) {
+        this.bottomSheetService = bottomSheetService;
+        this.uploaderService = uploaderService;
+        this.translateService = translateService;
+        _NdfUploaderBottomSheetService_instances.add(this);
+        this.filesInfo$ = new BehaviorSubject([]);
+        _NdfUploaderBottomSheetService_events.set(this, new Subject());
+        this.events$ = __classPrivateFieldGet(this, _NdfUploaderBottomSheetService_events, "f").asObservable();
+    }
+    open(files) {
+        if (__classPrivateFieldGet(this, _NdfUploaderBottomSheetService_instances, "a", _NdfUploaderBottomSheetService_isBottomSheetOpen_get)) {
+            this.uploaderService.upload(files);
+            return this.events$;
+        }
+        else {
+            this.bottomSheetService.open(NdfUploaderBottomSheetComponent, {
+                panelClass: CUSTOM_PANEL_CLASS,
+                direction: this.translateService.currentLang == 'ar' ? 'rtl' : 'ltr',
+                disableClose: true,
+                hasBackdrop: false,
+                data: files
+            });
+            return this.events$;
+        }
+    }
+    close() {
+        if (!__classPrivateFieldGet(this, _NdfUploaderBottomSheetService_instances, "a", _NdfUploaderBottomSheetService_isBottomSheetOpen_get))
+            return;
+        this.uploaderService.reset();
+        this.bottomSheetService.dismiss();
+    }
+    notify(event) {
+        __classPrivateFieldGet(this, _NdfUploaderBottomSheetService_events, "f").next(event);
+    }
+    submit(batchId, options) {
+        return this.uploaderService.submit(options).pipe(tap((data) => {
+            var _a;
+            const files = this.filesInfo$.getValue();
+            files.find((f) => f.batchId == batchId).documentId = (_a = data.entries[0]) === null || _a === void 0 ? void 0 : _a.uid;
+            this.filesInfo$.next(files);
+        }));
+    }
+}
+_NdfUploaderBottomSheetService_events = new WeakMap(), _NdfUploaderBottomSheetService_instances = new WeakSet(), _NdfUploaderBottomSheetService_isBottomSheetOpen_get = function _NdfUploaderBottomSheetService_isBottomSheetOpen_get() {
+    return this.bottomSheetService._openedBottomSheetRef !== null;
+};
+NdfUploaderBottomSheetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderBottomSheetService, deps: [{ token: i1$e.MatBottomSheet }, { token: NdfUploaderService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+NdfUploaderBottomSheetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderBottomSheetService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderBottomSheetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$e.MatBottomSheet }, { type: NdfUploaderService }, { type: i1.TranslateService }]; } });
+
+const FILE_CONTENT = {
+    CONTENT: 'file:content',
+    BATCH: 'upload-batch',
+    FILE_INDEX: 'upload-fileId'
+};
+
+class NdfUploaderModule {
+}
+NdfUploaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NdfUploaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderModule, declarations: [NdfUploaderBottomSheetComponent], imports: [CommonModule,
+        TranslateModule,
+        MatDialogModule,
+        MatIconModule,
+        MatButtonModule,
+        MatBottomSheetModule,
+        MatExpansionModule,
+        MatTooltipModule,
+        MatProgressSpinnerModule] });
+NdfUploaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderModule, imports: [[
+            CommonModule,
+            TranslateModule,
+            MatDialogModule,
+            MatIconModule,
+            MatButtonModule,
+            MatBottomSheetModule,
+            MatExpansionModule,
+            MatTooltipModule,
+            MatProgressSpinnerModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfUploaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
+                        MatDialogModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatBottomSheetModule,
+                        MatExpansionModule,
+                        MatTooltipModule,
+                        MatProgressSpinnerModule
+                    ],
+                    declarations: [NdfUploaderBottomSheetComponent]
+                }]
+        }] });
+
+class NdfScannerComponent {
+    constructor(translate, documentsService, uploaderService, datePipe, baseHref) {
+        this.translate = translate;
+        this.documentsService = documentsService;
+        this.uploaderService = uploaderService;
+        this.datePipe = datePipe;
+        this.baseHref = baseHref;
+        this.useStoredFile = false;
+        this.hideUploadButton = false;
+        this.loading = false;
+        /** Event emitted when a batch is uploaded */
+        this.file = new EventEmitter();
+        this.destroy$ = new Subject();
+        this.DWTSourceCount = 0;
+        this.filename = '';
+        this.containerId = 'dwtcontrolContainer';
+        this.bWASM = Dynamsoft.Lib.env.bMobile || Dynamsoft.DWT.UseLocalService;
+        this._strTempStr = '';
+        this.re = /^\d+$/;
+        this.strre = /^[\s\w]+$/;
+        this.refloat = /^\d+\.*\d*$/i;
+        // --------------------------------------------------------------------------------------
+        // ************************** Dynamic Web TWAIN Events***********************************
+        // --------------------------------------------------------------------------------------
+        this.Dynamsoft_OnPostTransfer = () => {
+            this.updatePageInfo();
+        };
+        this.Dynamsoft_OnPostLoadfunction = (path, name, type) => {
+            this.updatePageInfo();
+        };
+        this.Dynamsoft_OnPostAllTransfers = () => {
+            this.DWObject.CloseSource();
+            this.updatePageInfo();
+            this.checkErrorString();
+        };
+        this.Dynamsoft_OnMouseClick = (index) => {
+            this.updatePageInfo();
+        };
+        this.Dynamsoft_OnMouseRightClick = (index) => {
+            // To add
+        };
+        this.Dynamsoft_OnImageAreaSelected = (index, left, top, right, bottom) => {
+            this._iLeft = left;
+            this._iTop = top;
+            this._iRight = right;
+            this._iBottom = bottom;
+        };
+        this.Dynamsoft_OnImageAreaDeselected = (index) => {
+            this._iLeft = 0;
+            this._iTop = 0;
+            this._iRight = 0;
+            this._iBottom = 0;
+        };
+        this.Dynamsoft_OnTopImageInTheViewChanged = (index) => {
+            this._iLeft = 0;
+            this._iTop = 0;
+            this._iRight = 0;
+            this._iBottom = 0;
+            this.DWObject.CurrentImageIndexInBuffer = index;
+            this.updatePageInfo();
+        };
+        this.Dynamsoft_OnGetFilePath = (bSave, count, index, path, name) => { };
+    }
+    ngOnChanges() {
+        if (this.loading) {
+            this.showLoader();
+        }
+        else {
+            this.hideLoader();
+        }
+    }
+    showLoader() {
+        document.getElementById('dwtcontrolContainer').style.display = 'none';
+        document.getElementById('loader').style.display = '';
+    }
+    hideLoader() {
+        document.getElementById('loader').style.display = 'none';
+        document.getElementById('dwtcontrolContainer').style.display = '';
+    }
+    ngOnInit() {
+        this.hideLoader();
+        Dynamsoft.DWT.ResourcesPath = this.baseHref + '/assets/dwt-resources';
+        ///
+        Dynamsoft.DWT.AutoLoad = true;
+        ///
+        // const width = window.outerWidth * 0.3;
+        // const height = window.outerHeight * 0.3;
+        Dynamsoft.DWT.Containers = [
+            {
+                WebTwainId: 'DWTObject',
+                ContainerId: 'dwtcontrolContainer',
+                Width: '100%',
+                Height: '100%'
+            }
+        ];
+        Dynamsoft.DWT.ProductKey = EnvManager.environment.dynamsoftProductKey;
+        // Dynamsoft.DWT.Trial = false;
+        // Dynamsoft.DWT.Debug = false; // only for debugger output
+        ///
+        Dynamsoft.DWT.IfAddMD5InUploadHeader = false;
+        ///
+        Dynamsoft.DWT.IfConfineMaskWithinTheViewer = false;
+        Dynamsoft.MSG = {
+            ConvertingToBase64: this.translate.instant('scanner.ConvertingToBase64'),
+            ConvertingToBlob: this.translate.instant('scanner.ConvertingToBlob'),
+            Downloading: this.translate.instant('scanner.Downloading'),
+            Encoding: this.translate.instant('scanner.Encoding'),
+            Err_BrowserNotSupportWasm: this.translate.instant('scanner.Err_BrowserNotSupportWasm'),
+            Init_AllJsLoaded: Dynamsoft.MSG.Init_AllJsLoaded,
+            Init_CheckDWT: Dynamsoft.MSG.Init_CheckDWT,
+            Init_CheckDWTVersion: Dynamsoft.MSG.Init_CheckDWTVersion,
+            Init_CheckingLicense: Dynamsoft.MSG.Init_CheckingLicense,
+            Init_CompilingWasm: Dynamsoft.MSG.Init_CompilingWasm,
+            Init_ConfiguringDWT: Dynamsoft.MSG.Init_ConfiguringDWT,
+            Init_CreatingDWT: Dynamsoft.MSG.Init_CreatingDWT,
+            Init_DownloadingWasm: Dynamsoft.MSG.Init_DownloadingWasm,
+            Init_FireBeforeInitEvt: Dynamsoft.MSG.Init_FireBeforeInitEvt,
+            Init_GetLicenseInfoForDWT: Dynamsoft.MSG.Init_GetLicenseInfoForDWT,
+            Init_InitActiveX: Dynamsoft.MSG.Init_InitActiveX,
+            Init_InitDynamsoftService: Dynamsoft.MSG.Init_InitDynamsoftService,
+            Init_InitH5: Dynamsoft.MSG.Init_InitH5,
+            Init_InitWasm: Dynamsoft.MSG.Init_InitWasm,
+            Init_LoadingViewerJs: Dynamsoft.MSG.Init_LoadingViewerJs,
+            Init_LookingLicense: Dynamsoft.MSG.Init_LookingLicense,
+            Init_SetLicenseForDWT: Dynamsoft.MSG.Init_SetLicenseForDWT,
+            Loading: this.translate.instant('scanner.Loading'),
+            LoadingPdf: this.translate.instant('scanner.LoadingPdf'),
+            LoadingTiff: this.translate.instant('scanner.LoadingTiff'),
+            SavingPdf: this.translate.instant('scanner.SavingPdf'),
+            SavingTiff: this.translate.instant('scanner.SavingTiff'),
+            Uploading: this.translate.instant('scanner.Uploading')
+        };
+        Dynamsoft.DWT.CustomizableDisplayInfo = {
+            errorMessages: this.translate.instant('scanner.errorMessages'),
+            // launch
+            generalMessages: this.translate.instant('scanner.generalMessages'),
+            customProgressText: this.translate.instant('scanner.customProgressText'),
+            // image editor
+            buttons: this.translate.instant('scanner.buttons'),
+            dialogText: this.translate.instant('scanner.dialogText')
+        };
+        Dynamsoft.DWT.OnWebTwainReady = () => {
+            this.pageonload();
+            this.Dynamsoft_OnReady();
+        };
+        Dynamsoft.DWT.Load();
+        // this.onMinimizingSubscription = this.DocumentScanService.onMinimizing.subscribe((res) => {
+        // 	this.convertToBlobForSaving();
+        // });
+    }
+    ngAfterViewInit() {
+        this.pageonload();
+        // if (this.useStoredFile) {
+        // 	if (this.DocumentScanService.storedFile) {
+        // 		setTimeout(() => {
+        // 			this.setStoredFileToScanner(this.DocumentScanService.storedFile);
+        // 		}, 2000);
+        // 	}
+        // }
+    }
+    setStoredFileToScanner(result) {
+        this.DWObject.LoadImageFromBinary(result, function () {
+            console.log('success');
+        }, function (errorCode, errorString) {
+            console.log(errorString);
+        });
+    }
+    pageonload() {
+        this.HideLoadImageForLinux();
+        const twainsource = document.getElementById('source');
+        if (twainsource) {
+            twainsource.options.length = 0;
+            twainsource.options.add(new Option(this.translate.instant('scanner.pleaseWait'), '0'));
+            twainsource.options[0].selected = true;
+        }
+        this.initiateInputs();
+    }
+    HideLoadImageForLinux() {
+        const o = document.getElementById('liLoadImage');
+        if (o) {
+            if (Dynamsoft.Lib.env.bLinux) {
+                o.style.display = 'none';
+            }
+            else {
+                o.style.display = '';
+            }
+        }
+    }
+    initiateInputs() {
+        const allinputs = document.getElementsByTagName('input');
+        for (let i = 0; i < allinputs.length; i++) {
+            if (allinputs[i].type === 'checkbox') {
+                allinputs[i].checked = false;
+            }
+            else if (allinputs[i].type === 'text') {
+                allinputs[i].value = '';
+            }
+        }
+        if (Dynamsoft.Lib.env.bIE === true && this.isWin64()) {
+            let o = document.getElementById('samplesource64bit');
+            if (o) {
+                o.style.display = 'inline';
+            }
+            o = document.getElementById('samplesource32bit');
+            if (o) {
+                o.style.display = 'none';
+            }
+        }
+    }
+    isWin64() {
+        // return (
+        // 	navigator.platform.indexOf('Win') !== -1 &&
+        // 	navigator.userAgent.indexOf('x64') !== -1
+        // );
+        return /Windows NT.*x64/.test(navigator.userAgent);
+    }
+    initDllForChangeImageSize() {
+        const vInterpolationMethod = document.getElementById('InterpolationMethod');
+        vInterpolationMethod.options.length = 0;
+        vInterpolationMethod.options.add(new Option('NearestNeighbor', '1'));
+        vInterpolationMethod.options.add(new Option('Bilinear', '2'));
+        vInterpolationMethod.options.add(new Option('Bicubic', '3'));
+    }
+    setDefaultValue() {
+        const vGray = document.getElementById('Gray');
+        if (vGray) {
+            vGray.checked = true;
+        }
+        const varImgTypepng2 = document.getElementById('imgTypepng2');
+        if (varImgTypepng2) {
+            varImgTypepng2.checked = true;
+        }
+        const varImgTypepng = document.getElementById('imgTypepng');
+        if (varImgTypepng) {
+            varImgTypepng.checked = true;
+        }
+        const _strDefaultSaveImageName = 'WebTWAINImage';
+        const _txtFileNameforSave = document.getElementById('txt_fileNameforSave');
+        if (_txtFileNameforSave) {
+            _txtFileNameforSave.value = _strDefaultSaveImageName;
+        }
+        const _txtFileName = document.getElementById('txt_fileName');
+        if (_txtFileName) {
+            _txtFileName.value = _strDefaultSaveImageName;
+        }
+        const _chkMultiPageTIFF_save = document.getElementById('MultiPageTIFF_save');
+        if (_chkMultiPageTIFF_save) {
+            _chkMultiPageTIFF_save.disabled = true;
+        }
+        const _chkMultiPagePDF_save = document.getElementById('MultiPagePDF_save');
+        if (_chkMultiPagePDF_save) {
+            _chkMultiPagePDF_save.disabled = true;
+        }
+        const _chkMultiPageTIFF = document.getElementById('MultiPageTIFF');
+        if (_chkMultiPageTIFF) {
+            _chkMultiPageTIFF.disabled = true;
+        }
+        const _chkMultiPagePDF = document.getElementById('MultiPagePDF');
+        if (_chkMultiPagePDF) {
+            _chkMultiPagePDF.disabled = true;
+        }
+    }
+    // Check if the control is fully loaded.
+    Dynamsoft_OnReady() {
+        const liNoScanner = document.getElementById('pNoScanner');
+        // If the ErrorCode is 0, it means everything is fine for the control. It is fully loaded.
+        this.DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
+        if (this.DWObject) {
+            if (this.DWObject.ErrorCode === 0) {
+                this.DWObject.LogLevel = 0;
+                this.DWObject.IfAllowLocalCache = true;
+                this.DWObject.ImageCaptureDriverType = 4;
+                this.setDefaultValue();
+                this.DWObject.RegisterEvent('OnTopImageInTheViewChanged', this.Dynamsoft_OnTopImageInTheViewChanged);
+                this.DWObject.RegisterEvent('OnMouseClick', this.Dynamsoft_OnMouseClick);
+                let twainsource = document.getElementById('source');
+                if (!twainsource) {
+                    twainsource = document.getElementById('webcamsource');
+                }
+                const vCount = this.DWObject.SourceCount;
+                this.DWTSourceCount = vCount;
+                if (twainsource) {
+                    twainsource.options.length = 0;
+                    for (let i = 0; i < vCount; i++) {
+                        twainsource.options.add(new Option(this.DWObject.GetSourceNameItems(i), i.toString()));
+                    }
+                }
+                // If source list need to be displayed, fill in the source items.
+                if (vCount === 0) {
+                    if (liNoScanner) {
+                        if (Dynamsoft.Lib.env.bWin) {
+                            liNoScanner.style.display = 'block';
+                            liNoScanner.style.textAlign = 'center';
+                        }
+                        else {
+                            liNoScanner.style.display = 'none';
+                        }
+                    }
+                }
+                if (vCount > 0) {
+                    this.source_onchange();
+                }
+                if (Dynamsoft.Lib.env.bWin) {
+                    this.DWObject.MouseShape = false;
+                }
+                const btnScan = document.getElementById('btnScan');
+                if (btnScan) {
+                    if (vCount === 0) {
+                        btnScan.disabled = true;
+                    }
+                    else {
+                        btnScan.disabled = false;
+                    }
+                }
+                if (!Dynamsoft.Lib.env.bWin && vCount > 0) {
+                    if (document.getElementById('lblShowUI')) {
+                        document.getElementById('lblShowUI').style.display = 'none';
+                    }
+                    if (document.getElementById('ShowUI')) {
+                        document.getElementById('ShowUI').style.display = 'none';
+                    }
+                }
+                else {
+                    if (document.getElementById('lblShowUI')) {
+                        document.getElementById('lblShowUI').style.display = '';
+                    }
+                    if (document.getElementById('ShowUI')) {
+                        document.getElementById('ShowUI').style.display = '';
+                    }
+                }
+                this.initDllForChangeImageSize();
+                this._iLeft = 0;
+                this._iTop = 0;
+                this._iRight = 0;
+                this._iBottom = 0;
+                for (let i = 0; i < document.links.length; i++) {
+                    if (document.links[i].className === 'ShowtblLoadImage') {
+                        document.links[i].onclick = this.showtblLoadImage_onclick;
+                    }
+                    if (document.links[i].className === 'ClosetblLoadImage') {
+                        document.links[i].onclick = this.closetblLoadImage_onclick;
+                    }
+                }
+                if (vCount === 0) {
+                    if (Dynamsoft.Lib.env.bWin) {
+                        if (document.getElementById('aNoScanner') && window['bDWTOnlineDemo']) {
+                            if (document.getElementById('div_ScanImage').style.display === '') {
+                                this.showtblLoadImage_onclick();
+                            }
+                        }
+                        if (document.getElementById('Resolution')) {
+                            document.getElementById('Resolution').style.display = 'none';
+                        }
+                    }
+                }
+                else {
+                    const divBlank = document.getElementById('divBlank');
+                    if (divBlank) {
+                        divBlank.style.display = 'none';
+                    }
+                }
+                this.updatePageInfo();
+                const ua = navigator.userAgent.toLowerCase();
+                if (!ua.indexOf('msie 6.0')) {
+                }
+                this.DWObject.RegisterEvent('OnPostTransfer', this.Dynamsoft_OnPostTransfer);
+                this.DWObject.RegisterEvent('OnPostLoad', this.Dynamsoft_OnPostLoadfunction);
+                this.DWObject.RegisterEvent('OnPostAllTransfers', this.Dynamsoft_OnPostAllTransfers);
+                this.DWObject.RegisterEvent('OnImageAreaSelected', this.Dynamsoft_OnImageAreaSelected);
+                this.DWObject.RegisterEvent('OnImageAreaDeSelected', this.Dynamsoft_OnImageAreaDeselected);
+                this.DWObject.RegisterEvent('OnGetFilePath', this.Dynamsoft_OnGetFilePath);
+            }
+        }
+    }
+    showtblLoadImage_onclick() {
+        switch (document.getElementById('tblLoadImage').style.visibility) {
+            case 'hidden':
+                document.getElementById('tblLoadImage').style.visibility = 'visible';
+                document.getElementById('Resolution').style.visibility = 'hidden';
+                break;
+            case 'visible':
+                document.getElementById('tblLoadImage').style.visibility = 'hidden';
+                document.getElementById('Resolution').style.visibility = 'visible';
+                break;
+            default:
+                break;
+        }
+        if (document.getElementById('pNoScanner')) {
+            // document.getElementById("tblLoadImage").style.top = ds_gettop(document.getElementById("pNoScanner")) + pNoScanner.offsetHeight + "px";
+            // document.getElementById("tblLoadImage").style.left = ds_getleft(document.getElementById("pNoScanner")) + 0 + "px";
+        }
+        return false;
+    }
+    closetblLoadImage_onclick() {
+        document.getElementById('tblLoadImage').style.visibility = 'hidden';
+        document.getElementById('Resolution').style.visibility = 'visible';
+        return false;
+    }
+    // --------------------------------------------------------------------------------------
+    // ************************** Used a lot *****************************
+    // --------------------------------------------------------------------------------------
+    updatePageInfo() {
+        const totalImage = document.getElementById('DW_TotalImage');
+        const currentImage = document.getElementById('DW_CurrentImage');
+        if (totalImage) {
+            totalImage.value = this.DWObject.HowManyImagesInBuffer;
+        }
+        if (currentImage) {
+            currentImage.value = this.DWObject.CurrentImageIndexInBuffer + 1;
+        }
+    }
+    appendMessage(strMessage) {
+        this._strTempStr += strMessage;
+        const _divMessageContainer = document.getElementById('DWTemessage');
+        if (_divMessageContainer) {
+            _divMessageContainer.innerHTML = this._strTempStr;
+            _divMessageContainer.scrollTop = _divMessageContainer.scrollHeight;
+        }
+    }
+    checkIfImagesInBuffer() {
+        if (this.DWObject.HowManyImagesInBuffer === 0) {
+            this.appendMessage('There is no image in buffer.<br />');
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    checkErrorString() {
+        return this.checkErrorStringWithErrorCode(this.DWObject.ErrorCode, this.DWObject.ErrorString);
+    }
+    checkErrorStringWithErrorCode(errorCode, errorString, responseString = null) {
+        if (errorCode === 0) {
+            this.appendMessage("<span style='color:#cE5E04'><b>" + errorString + '</b></span><br />');
+            return true;
+        }
+        if (errorCode === -2115) {
+            // Cancel file dialog
+            return true;
+        }
+        else {
+            if (errorCode === -2003) {
+                const ErrorMessageWin = window.open('', 'ErrorMessage', 'height=500,width=750,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
+                ErrorMessageWin.document.writeln(responseString); // this.DWObject.HTTPPostResponseString);
+            }
+            this.appendMessage("<span style='color:#cE5E04'><b>" + errorString + '</b></span><br />');
+            return false;
+        }
+    }
+    // --------------------------------------------------------------------------------------
+    // ************************** Used a lot *****************************
+    // --------------------------------------------------------------------------------------
+    ds_getleft(el) {
+        let tmp = el.offsetLeft;
+        el = el.offsetParent;
+        while (el) {
+            tmp += el.offsetLeft;
+            el = el.offsetParent;
+        }
+        return tmp;
+    }
+    ds_gettop(el) {
+        let tmp = el.offsetTop;
+        el = el.offsetParent;
+        while (el) {
+            tmp += el.offsetTop;
+            el = el.offsetParent;
+        }
+        return tmp;
+    }
+    Over_Out_DemoImage(obj, url) {
+        obj.src = url;
+    }
+    source_onchange() {
+        if (document.getElementById('divTwainType')) {
+            document.getElementById('divTwainType').style.display = '';
+        }
+        if (document.getElementById('source')) {
+            const cIndex = document.getElementById('source').selectedIndex;
+            if (Dynamsoft.Lib.env.bMac) {
+                const strSourceName = this.DWObject.GetSourceNameItems(cIndex);
+                if (strSourceName.indexOf('ICA') === 0) {
+                    if (document.getElementById('lblShowUI')) {
+                        document.getElementById('lblShowUI').style.display = 'none';
+                    }
+                    if (document.getElementById('ShowUI')) {
+                        document.getElementById('ShowUI').style.display = 'none';
+                    }
+                }
+                else {
+                    if (document.getElementById('lblShowUI')) {
+                        document.getElementById('lblShowUI').style.display = '';
+                    }
+                    if (document.getElementById('ShowUI')) {
+                        document.getElementById('ShowUI').style.display = '';
+                    }
+                }
+            }
+            else {
+                this.DWObject.SelectSourceByIndex(cIndex);
+            }
+        }
+    }
+    mediaType_onchange() {
+        const MediaType = document.getElementById('MediaType');
+        if (MediaType && MediaType.options.length > 0) {
+            const valueMediaType = MediaType.options[MediaType.selectedIndex].text;
+            if (valueMediaType !== '') {
+                if (!this.DWObject.Addon.Webcam.SetMediaType(valueMediaType)) {
+                    this.appendMessage('<b>Error setting MediaType value: </b>');
+                    this.appendMessage("<span style='color:#cE5E04'><b>" + this.DWObject.ErrorString + '</b></span><br />');
+                    return;
+                }
+            }
+        }
+        const ResolutionWebcam = document.getElementById('ResolutionWebcam');
+        if (ResolutionWebcam) {
+            ResolutionWebcam.options.length = 0;
+            const aryResolution = this.DWObject.Addon.Webcam.GetResolution();
+            const countResolution = aryResolution.GetCount();
+            for (let i = 0; i < countResolution; i++) {
+                const value = aryResolution.Get(i);
+                ResolutionWebcam.options.add(new Option(value, value));
+            }
+        }
+    }
+    /*-----------------Acquire Image---------------------*/
+    acquireImage() {
+        const cIndex = document.getElementById('source').selectedIndex;
+        if (cIndex < 0) {
+            return;
+        }
+        this.DWObject.SelectSourceByIndex(cIndex);
+        this.DWObject.CloseSource();
+        this.DWObject.OpenSource();
+        this.DWObject.IfShowUI = document.getElementById('ShowUI').checked;
+        let i;
+        for (i = 0; i < 3; i++) {
+            if (document.getElementsByName('PixelType').item(i).checked === true) {
+                this.DWObject.PixelType = i;
+            }
+        }
+        if (this.DWObject.ErrorCode !== 0) {
+            this.appendMessage('<b>Error setting PixelType value: </b>');
+            this.appendMessage("<span style='color:#cE5E04'><b>" + this.DWObject.ErrorString + '</b></span><br />');
+        }
+        this.DWObject.Resolution = document.getElementById('Resolution').value;
+        if (this.DWObject.ErrorCode !== 0) {
+            this.appendMessage('<b>Error setting Resolution value: </b>');
+            this.appendMessage("<span style='color:#cE5E04'><b>" + this.DWObject.ErrorString + '</b></span><br />');
+        }
+        const bADFChecked = document.getElementById('ADF').checked;
+        this.DWObject.IfFeederEnabled = bADFChecked;
+        if (bADFChecked === true && this.DWObject.ErrorCode !== 0) {
+            this.appendMessage('<b>Error setting ADF value: </b>');
+            this.appendMessage("<span style='color:#cE5E04'><b>" + this.DWObject.ErrorString + '</b></span><br />');
+        }
+        const bDuplexChecked = document.getElementById('Duplex').checked;
+        this.DWObject.IfDuplexEnabled = bDuplexChecked;
+        if (bDuplexChecked === true && this.DWObject.ErrorCode !== 0) {
+            this.appendMessage('<b>Error setting Duplex value: </b>');
+            this.appendMessage("<span style='color:#cE5E04'><b>" + this.DWObject.ErrorString + '</b></span><br />');
+        }
+        if (Dynamsoft.Lib.env.bWin || (!Dynamsoft.Lib.env.bWin && this.DWObject.ImageCaptureDriverType === 0)) {
+            this.appendMessage('Pixel Type: ' + this.DWObject.PixelType + '<br />Resolution: ' + this.DWObject.Resolution + '<br />');
+        }
+        this.DWObject.IfDisableSourceAfterAcquire = true;
+        this.DWObject.AcquireImage();
+    }
+    /*-----------------Load Image---------------------*/
+    btnLoadImagesOrPDFs_onclick() {
+        const OnPDFSuccess = () => {
+            this.appendMessage('Loaded an image successfully.<br/>');
+            this.updatePageInfo();
+        };
+        const OnPDFFailure = (errorCode, errorString) => {
+            this.checkErrorStringWithErrorCode(errorCode, errorString);
+        };
+        this.DWObject.IfShowFileDialog = true;
+        this.DWObject.Addon.PDF.SetResolution(200);
+        this.DWObject.Addon.PDF.SetConvertMode(Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL);
+        this.DWObject.LoadImageEx('', Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL, OnPDFSuccess, OnPDFFailure);
+    }
+    // --------------------------------------------------------------------------------------
+    // ************************** Edit Image ******************************
+    // --------------------------------------------------------------------------------------
+    btnShowImageEditor_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.ShowImageEditor();
+    }
+    btnRotateRight_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.RotateRight(this.DWObject.CurrentImageIndexInBuffer);
+        this.appendMessage('<b>Rotate right: </b>');
+        if (this.checkErrorString()) {
+            return;
+        }
+    }
+    btnRotateLeft_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.RotateLeft(this.DWObject.CurrentImageIndexInBuffer);
+        this.appendMessage('<b>Rotate left: </b>');
+        if (this.checkErrorString()) {
+            return;
+        }
+    }
+    btnRotate180_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.Rotate(this.DWObject.CurrentImageIndexInBuffer, 180, true);
+        this.appendMessage('<b>Rotate 180: </b>');
+        if (this.checkErrorString()) {
+            return;
+        }
+    }
+    btnMirror_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.Mirror(this.DWObject.CurrentImageIndexInBuffer);
+        this.appendMessage('<b>Mirror: </b>');
+        if (this.checkErrorString()) {
+            return;
+        }
+    }
+    btnFlip_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.Flip(this.DWObject.CurrentImageIndexInBuffer);
+        this.appendMessage('<b>Flip: </b>');
+        if (this.checkErrorString()) {
+            return;
+        }
+    }
+    /*----------------------Crop Method---------------------*/
+    btnCrop_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        if (this._iLeft !== 0 || this._iTop !== 0 || this._iRight !== 0 || this._iBottom !== 0) {
+            this.DWObject.Crop(this.DWObject.CurrentImageIndexInBuffer, this._iLeft, this._iTop, this._iRight, this._iBottom);
+            this._iLeft = 0;
+            this._iTop = 0;
+            this._iRight = 0;
+            this._iBottom = 0;
+            this.appendMessage('<b>Crop: </b>');
+            if (this.checkErrorString()) {
+                return;
+            }
+            return;
+        }
+        else {
+            this.appendMessage("<b>Crop: </b>failed. Please first select the area you'd like to crop.<br />");
+        }
+    }
+    /*----------------Change Image Size--------------------*/
+    btnChangeImageSize_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        switch (document.getElementById('ImgSizeEditor').style.visibility) {
+            case 'visible':
+                document.getElementById('ImgSizeEditor').style.visibility = 'hidden';
+                break;
+            case 'hidden':
+                document.getElementById('ImgSizeEditor').style.visibility = 'visible';
+                break;
+            default:
+                break;
+        }
+        // document.getElementById("ImgSizeEditor").style.top = ds_gettop(document.getElementById("btnChangeImageSize")) + document.getElementById("btnChangeImageSize").offsetHeight + 15 + "px";
+        // document.getElementById("ImgSizeEditor").style.left = ds_getleft(document.getElementById("btnChangeImageSize")) - 14 + "px";
+        const iWidth = this.DWObject.GetImageWidth(this.DWObject.CurrentImageIndexInBuffer);
+        if (iWidth !== -1) {
+            document.getElementById('img_width').value = iWidth;
+        }
+        const iHeight = this.DWObject.GetImageHeight(this.DWObject.CurrentImageIndexInBuffer);
+        if (iHeight !== -1) {
+            document.getElementById('img_height').value = iHeight;
+        }
+    }
+    btnCancelChange_onclick() {
+        document.getElementById('ImgSizeEditor').style.visibility = 'hidden';
+    }
+    btnChangeImageSizeOK_onclick() {
+        document.getElementById('img_height').className = '';
+        document.getElementById('img_width').className = '';
+        if (!this.re.test(document.getElementById('img_height').value)) {
+            document.getElementById('img_height').className += ' invalid';
+            document.getElementById('img_height').focus();
+            this.appendMessage('Please input a valid <b>height</b>.<br />');
+            return;
+        }
+        if (!this.re.test(document.getElementById('img_width').value)) {
+            document.getElementById('img_width').className += ' invalid';
+            document.getElementById('img_width').focus();
+            this.appendMessage('Please input a valid <b>width</b>.<br />');
+            return;
+        }
+        this.DWObject.ChangeImageSize(this.DWObject.CurrentImageIndexInBuffer, document.getElementById('img_width').value, document.getElementById('img_height').value, document.getElementById('InterpolationMethod').selectedIndex + 1);
+        this.appendMessage('<b>Change Image Size: </b>');
+        if (this.checkErrorString()) {
+            document.getElementById('ImgSizeEditor').style.visibility = 'hidden';
+            return;
+        }
+    }
+    // --------------------------------------------------------------------------------------
+    // ************************** Save Image***********************************
+    // --------------------------------------------------------------------------------------
+    btnSave_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        const strimgType_save = 'pdf';
+        this.DWObject.IfShowFileDialog = true;
+        const _txtFileNameforSave = document.getElementById('txt_fileName');
+        if (_txtFileNameforSave) {
+            _txtFileNameforSave.className = '';
+        }
+        let bSave = false;
+        const strFilePath = _txtFileNameforSave.value + '.' + strimgType_save;
+        const OnSuccess = () => {
+            this.appendMessage('<b>Save Image: </b>');
+            this.checkErrorStringWithErrorCode(0, 'Successful.');
+        };
+        const OnFailure = (errorCode, errorString) => {
+            this.checkErrorStringWithErrorCode(errorCode, errorString);
+        };
+        bSave = this.DWObject.SaveAllAsPDF(strFilePath, OnSuccess, OnFailure);
+        if (bSave) {
+            this.appendMessage('<b>Save Image: </b>');
+        }
+        if (this.checkErrorString()) {
+            return;
+        }
+    }
+    // --------------------------------------------------------------------------------------
+    // ************************** Upload Image***********************************
+    // --------------------------------------------------------------------------------------
+    makeid(length) {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        for (let i = 0; i < length; i++) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        }
+        return result;
+    }
+    convertToBlob() {
+        var _a;
+        // this.DocumentScanService.uploadStart.emit(true);
+        const pages = [];
+        for (let index = 0; index < ((_a = this.DWObject) === null || _a === void 0 ? void 0 : _a.HowManyImagesInBuffer); index++) {
+            pages.push(index);
+        }
+        this.DWObject.ConvertToBlob(pages, Dynamsoft.DWT.EnumDWT_ImageType.IT_PDF, (result, indices, type) => {
+            result.lastModifiedDate = new Date();
+            result.name = 'scan-' + this.datePipe.transform(result.lastModifiedDate, 'dd-MM-yyyy') + '.pdf';
+            this.uploaderService
+                .upload([result])
+                .pipe(takeUntil(this.destroy$), distinctUntilChanged())
+                .subscribe((event) => {
+                if (event.type == FileEventType.Complete) {
+                    this.file.next(event.data[0]);
+                }
+            });
+        }, (errorCode, errorString) => {
+            console.log(errorString);
+            // this.DocumentScanService.uploadStart.emit(false);
+        });
+    }
+    convertToBlobForSaving() {
+        var _a;
+        const pages = [];
+        for (let index = 0; index < ((_a = this.DWObject) === null || _a === void 0 ? void 0 : _a.HowManyImagesInBuffer); index++) {
+            pages.push(index);
+        }
+        this.DWObject.ConvertToBlob(pages, Dynamsoft.DWT.EnumDWT_ImageType.IT_PDF, (result, indices, type) => {
+            result.lastModifiedDate = new Date();
+            result.name = 'scan-' + this.datePipe.transform(result.lastModifiedDate, 'dd-MM-yyyy') + '.pdf';
+            // this.DocumentScanService.storedFile = result;
+            this.onMinimizingSubscription ? this.onMinimizingSubscription.unsubscribe() : '';
+        }, (errorCode, errorString) => {
+            console.log(errorString);
+        });
+    }
+    // --------------------------------------------------------------------------------------
+    // ************************** Navigator functions***********************************
+    // --------------------------------------------------------------------------------------
+    btnFirstImage_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.CurrentImageIndexInBuffer = 0;
+        this.updatePageInfo();
+    }
+    btnPreImage_wheel() {
+        if (this.DWObject.HowManyImagesInBuffer !== 0) {
+            this.btnPreImage_onclick();
+        }
+    }
+    btnNextImage_wheel() {
+        if (this.DWObject.HowManyImagesInBuffer !== 0) {
+            this.btnNextImage_onclick();
+        }
+    }
+    btnPreImage_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        else if (this.DWObject.CurrentImageIndexInBuffer === 0) {
+            return;
+        }
+        this.DWObject.CurrentImageIndexInBuffer = this.DWObject.CurrentImageIndexInBuffer - 1;
+        this.updatePageInfo();
+    }
+    btnNextImage_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        else if (this.DWObject.CurrentImageIndexInBuffer === this.DWObject.HowManyImagesInBuffer - 1) {
+            return;
+        }
+        this.DWObject.CurrentImageIndexInBuffer = this.DWObject.CurrentImageIndexInBuffer + 1;
+        this.updatePageInfo();
+    }
+    btnLastImage_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.CurrentImageIndexInBuffer = this.DWObject.HowManyImagesInBuffer - 1;
+        this.updatePageInfo();
+    }
+    btnRemoveCurrentImage_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.RemoveAllSelectedImages();
+        if (this.DWObject.HowManyImagesInBuffer === 0) {
+            document.getElementById('DW_TotalImage').value = this.DWObject.HowManyImagesInBuffer;
+            document.getElementById('DW_CurrentImage').value = '';
+            return;
+        }
+        else {
+            this.updatePageInfo();
+        }
+    }
+    btnRemoveAllImages_onclick() {
+        if (!this.checkIfImagesInBuffer()) {
+            return;
+        }
+        this.DWObject.RemoveAllImages();
+        document.getElementById('DW_TotalImage').value = '0';
+        document.getElementById('DW_CurrentImage').value = '';
+    }
+    setlPreviewMode() {
+        const varNum = parseInt((document.getElementById('DW_PreviewMode').selectedIndex + 1).toString(), 10);
+        const btnCrop = document.getElementById('btnCrop');
+        if (btnCrop) {
+            let tmpstr = btnCrop.src;
+            if (varNum > 1) {
+                tmpstr = tmpstr.replace('Crop.', 'Crop_gray.');
+                btnCrop.src = tmpstr;
+                btnCrop.onclick = function () { };
+            }
+            else {
+                tmpstr = tmpstr.replace('Crop_gray.', 'Crop.');
+                btnCrop.src = tmpstr;
+                btnCrop.onclick = () => {
+                    this.btnCrop_onclick();
+                };
+            }
+        }
+        this.DWObject.SetViewMode(varNum, varNum);
+        if (Dynamsoft.Lib.env.bMac || Dynamsoft.Lib.env.bLinux) {
+            return;
+        }
+        else if (document.getElementById('DW_PreviewMode').selectedIndex !== 0) {
+            this.DWObject.MouseShape = true;
+        }
+        else {
+            this.DWObject.MouseShape = false;
+        }
+    }
+    // --------------------------------------------------------------------------------------
+    // *********************************radio response***************************************
+    // --------------------------------------------------------------------------------------
+    rdTIFF_onclick() {
+        const _chkMultiPageTIFF = document.getElementById('MultiPageTIFF');
+        _chkMultiPageTIFF.disabled = false;
+        _chkMultiPageTIFF.checked = false;
+        const _chkMultiPagePDF = document.getElementById('MultiPagePDF');
+        _chkMultiPagePDF.checked = false;
+        _chkMultiPagePDF.disabled = true;
+    }
+    rdPDF_onclick() {
+        const _chkMultiPageTIFF = document.getElementById('MultiPageTIFF');
+        _chkMultiPageTIFF.checked = false;
+        _chkMultiPageTIFF.disabled = true;
+        const _chkMultiPagePDF = document.getElementById('MultiPagePDF');
+        _chkMultiPagePDF.disabled = false;
+        _chkMultiPagePDF.checked = true;
+    }
+    rd_onclick() {
+        const _chkMultiPageTIFF = document.getElementById('MultiPageTIFF');
+        _chkMultiPageTIFF.checked = false;
+        _chkMultiPageTIFF.disabled = true;
+        const _chkMultiPagePDF = document.getElementById('MultiPagePDF');
+        _chkMultiPagePDF.checked = false;
+        _chkMultiPagePDF.disabled = true;
+    }
+    Dynamsoft_OnMouseDoubleClick() {
+        return;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+NdfScannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfScannerComponent, deps: [{ token: i1.TranslateService }, { token: DocumentsService }, { token: NdfUploaderService }, { token: i4$1.DatePipe }, { token: APP_BASE_HREF }], target: i0.ɵɵFactoryTarget.Component });
+NdfScannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfScannerComponent, selector: "ndf-scanner", inputs: { useStoredFile: "useStoredFile", hideUploadButton: "hideUploadButton", loading: "loading" }, outputs: { file: "file" }, host: { classAttribute: "ndf-scanner" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"DWTcontainer\" class=\"h-full\">\r\n\t<div id=\"DWTcontainerTop\">\r\n\t\t<div id=\"divEdit\">\r\n\t\t\t<ul class=\"operateGrp\">\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.showImageEditor' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnShowImageEditor_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Editor'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.rotateLeft' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRotateLeft_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Rotate-Left'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.rotateRight' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRotateRight_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Rotate-Right'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.rotate180' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRotate180_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:Rotate-180'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.mirror' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnMirror_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:flip-horizontal'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.flip' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnFlip_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:flip-vertical'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.removeSelected' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRemoveCurrentImage_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:RemoveImages'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.removeAll' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnRemoveAllImages_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:RemoveAllImages'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.resize' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnChangeImageSize_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:changeSize'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li clss=\"flex items-center justify-center leading-none w-15 h-15\">\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\t[matTooltip]=\"'scanner.crop' | translate\"\r\n\t\t\t\t\t\t(click)=\"btnCrop_onclick()\"\r\n\t\t\t\t\t\tclass=\"filter-icon cursor-pointer\"\r\n\t\t\t\t\t\t[svgIcon]=\"'icons:crop'\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t\t<div id=\"ImgSizeEditor\" style=\"visibility: hidden\">\r\n\t\t\t\t<ul>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<label for=\"img_height\"\r\n\t\t\t\t\t\t\t>{{ 'scanner.newHeight' | translate }} :\r\n\t\t\t\t\t\t\t<input type=\"text\" id=\"img_height\" style=\"width: 50%\" size=\"10\" />\r\n\t\t\t\t\t\t\t{{ 'scanner.pixel' | translate }}</label\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<label for=\"img_width\"\r\n\t\t\t\t\t\t\t>{{ 'scanner.newWidth' | translate }} :&nbsp;\r\n\t\t\t\t\t\t\t<input type=\"text\" id=\"img_width\" style=\"width: 50%\" size=\"10\" />\r\n\t\t\t\t\t\t\t{{ 'scanner.pixel' | translate }}</label\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t{{ 'scanner.InterpolationMethod' | translate }}:\r\n\t\t\t\t\t\t<select size=\"1\" id=\"InterpolationMethod\">\r\n\t\t\t\t\t\t\t<option value=\"\"></option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li style=\"text-align: center\">\r\n\t\t\t\t\t\t<input type=\"button\" value=\"   OK   \" id=\"btnChangeImageSizeOK\" (click)=\"btnChangeImageSizeOK_onclick()\" />\r\n\t\t\t\t\t\t<input type=\"button\" value=\" Cancel \" id=\"btnCancelChange\" (click)=\"btnCancelChange_onclick()\" />\r\n\t\t\t\t\t</li>\r\n\t\t\t\t</ul>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div id=\"dwtcontrolContainer\"></div>\r\n\t\t<div class=\"w-full\" id=\"loader\">\r\n\t\t\t<div class=\"flex items-center justify-center h-full\">\r\n\t\t\t\t<mat-spinner></mat-spinner>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div id=\"btnGroupBtm\">\r\n\t\t\t<div class=\"ct-lt\">\r\n\t\t\t\t{{ 'scanner.page' | translate }}:\r\n\t\t\t\t<input id=\"DW_btnFirstImage\" (click)=\"btnFirstImage_onclick()\" type=\"button\" value=\" |< \" />&nbsp;\r\n\t\t\t\t<input id=\"DW_btnPreImage\" (click)=\"btnPreImage_onclick()\" type=\"button\" value=\" < \" />&nbsp;&nbsp;\r\n\t\t\t\t<input type=\"text\" size=\"2\" id=\"DW_CurrentImage\" readonly=\"readonly\" />\r\n\t\t\t\t/\r\n\t\t\t\t<input type=\"text\" size=\"2\" id=\"DW_TotalImage\" readonly=\"readonly\" />&nbsp;&nbsp;\r\n\t\t\t\t<input id=\"DW_btnNextImage\" (click)=\"btnNextImage_onclick()\" type=\"button\" value=\"> \" />&nbsp;\r\n\t\t\t\t<input id=\"DW_btnLastImage\" (click)=\"btnLastImage_onclick()\" type=\"button\" value=\">| \" />\r\n\t\t\t</div>\r\n\t\t\t<div class=\"ct-rt\">\r\n\t\t\t\t{{ 'scanner.preview' | translate }}:\r\n\t\t\t\t<select size=\"1\" id=\"DW_PreviewMode\" (change)=\"setlPreviewMode()\">\r\n\t\t\t\t\t<option value=\"0\">1X1</option>\r\n\t\t\t\t\t<option value=\"1\">2X2</option>\r\n\t\t\t\t\t<option value=\"2\">3X3</option>\r\n\t\t\t\t\t<option value=\"3\">4X4</option>\r\n\t\t\t\t\t<option value=\"4\">5X5</option></select\r\n\t\t\t\t><br />\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<div id=\"ScanWrapper\">\r\n\t\t<div id=\"divScanner\" class=\"divinput\">\r\n\t\t\t<div id=\"div_ScanImage\" class=\"divTableStyle\">\r\n\t\t\t\t<ul id=\"ulScaneImageHIDE\">\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<label for=\"source\">\r\n\t\t\t\t\t\t\t<p>{{ 'scanner.source' | translate }}:</p>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t<select size=\"1\" id=\"source\" style=\"position: relative\" (change)=\"source_onchange()\">\r\n\t\t\t\t\t\t\t<option value=\"\"></option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li style=\"display: none\" id=\"pNoScanner\">\r\n\t\t\t\t\t\t<a href=\"javascript: void(0)\" class=\"ShowtblLoadImage\" style=\"color: #fe8e14\" id=\"aNoScanner\"\r\n\t\t\t\t\t\t\t>(No TWAIN compatible drivers detected)</a\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t\t<li id=\"divProductDetail\">\r\n\t\t\t\t\t\t<ul id=\"divTwainType\">\r\n\t\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t\t<label id=\"lblShowUI\" for=\"ShowUI\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"checkbox\" id=\"ShowUI\" />{{ 'scanner.ShowUI' | translate }}&nbsp;</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<label for=\"ADF\"> <input type=\"checkbox\" id=\"ADF\" />{{ 'scanner.AutoFeeder' | translate }}&nbsp;</label>\r\n\t\t\t\t\t\t\t\t<label for=\"Duplex\"> <input type=\"checkbox\" id=\"Duplex\" />{{ 'scanner.Duplex' | translate }}</label>\r\n\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t\t{{ 'scanner.PixelType' | translate }}:\r\n\t\t\t\t\t\t\t\t<label for=\"BW\" style=\"margin-left: 5px\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"BW\" name=\"PixelType\" />{{ 'scanner.B&W' | translate }}</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<label for=\"Gray\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"Gray\" name=\"PixelType\" />{{ 'scanner.Gray' | translate }}</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<label for=\"RGB\">\r\n\t\t\t\t\t\t\t\t\t<input type=\"radio\" id=\"RGB\" name=\"PixelType\" />{{ 'scanner.Color' | translate }}</label\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t\t<li>\r\n\t\t\t\t\t\t\t\t<span>{{ 'scanner.Resolution' | translate }}:&nbsp;</span\r\n\t\t\t\t\t\t\t\t><select size=\"1\" id=\"Resolution\">\r\n\t\t\t\t\t\t\t\t\t<option value=\"100\">100</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"150\">150</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"200\">200</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"300\" selected>300</option>\r\n\t\t\t\t\t\t\t\t</select>\r\n\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t</ul>\r\n\t\t\t\t\t</li>\r\n\r\n\t\t\t\t\t<div class=\"flex justify-between items-center\">\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\tid=\"btnScan\"\r\n\t\t\t\t\t\t\tdisabled=\"disabled\"\r\n\t\t\t\t\t\t\t(click)=\"acquireImage()\"\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tclass=\"action-btn action-btn_2\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<i class=\"bi bi-upc-upload icon\"></i>\r\n\t\t\t\t\t\t\t<span> {{ 'scanner.scanFile' | translate }}</span>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t(click)=\"btnLoadImagesOrPDFs_onclick()\"\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tclass=\"action-btn action-btn_1 flex items-center justify-center gap-x-2\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<i class=\"bi bi-upload icon\"></i>\r\n\t\t\t\t\t\t\t<span> {{ 'scanner.loadFile' | translate }}</span>\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ul>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"flex justify-end mx-3\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"btn save-button\"\r\n\t\t\t\t[ngClass]=\"{ 'hide-upload-button': hideUploadButton }\"\r\n\t\t\t\t#scannerUploadButton\r\n\t\t\t\tid=\"scannerUploadButton\"\r\n\t\t\t\t[disabled]=\"DWObject?.HowManyImagesInBuffer === 0\"\r\n\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t(click)=\"convertToBlob()\"\r\n\t\t\t>\r\n\t\t\t\t{{ 'scanner.saveFile' | translate }}\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".ndf-scanner img{vertical-align:middle;border:0}.ndf-scanner p{margin:0;padding:0}.ndf-scanner a:link,.ndf-scanner a:visited{color:#606060;text-decoration:none}.ndf-scanner a:hover{color:#fe8e14}.ndf-scanner input{font:normal 12px verdana;color:#444}.ndf-scanner input.invalid{background-color:#ff9;border:2px red inset}.ndf-scanner a img{border:none}.ndf-scanner a img:hover{border:none}.ndf-scanner ul{list-style:none;padding-left:0;margin:0}.ndf-scanner .container{width:980px;margin:0 auto}.ndf-scanner .container:after,.ndf-scanner .clearfix:after{content:\"\";display:table;clear:both}.ndf-scanner .tc{text-align:center}.ndf-scanner .btnOrg{padding:0 15px;height:30px;line-height:28px;font-size:14px;color:#fff;background:#50a8e1;border:none;outline:none;cursor:pointer;border-radius:5px;-webkit-border-radius:5px;-moz-border-right-colors:5px;transition:all .2s ease-in-out}.ndf-scanner .btnOrg:hover{background:#61c2ec}.ndf-scanner .d-btn{display:inline-block;padding:0 25px;height:36px;line-height:30px;color:#fe8e14;font-size:14px;text-align:center;cursor:pointer;border:solid 2px #fe8e14;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;transition:all .2s ease-in-out}.ndf-scanner .d-btn:link,.ndf-scanner .d-btn:visited{color:#fe8e14}.ndf-scanner .d-btn:hover{color:#ffae38;border:solid 2px #ffae38}.ndf-scanner .d-btn.lgBtn{height:46px;line-height:40px}.ndf-scanner .d-btn.mdBtn{height:42px;line-height:36px}.ndf-scanner .d-btn.smBtn{height:38px;line-height:32px}.ndf-scanner .d-btn.bgOrange{background:#fe8e14;color:#fff}.ndf-scanner .d-btn.bgOrange:hover{background:#ffae38}.ndf-scanner .d-btn.bgBlue{border-color:#50a8e1;background:#50a8e1;color:#fff}.ndf-scanner .d-btn.bgBlue:hover{border-color:#61c2ec;background:#61c2ec}.ndf-scanner #dwtScanDemo{width:980px;margin:0 auto}.ndf-scanner #dwtScanDemo .ct-top{padding:0 0 15px}.ndf-scanner #dwtScanDemo .ct-top .title{font-size:18px;line-height:27px;color:#444}.ndf-scanner #dwtScanDemo .ct-top .desc{margin:0 15px 0 30px;font-size:14px;line-height:24px;color:#aaa}.ndf-scanner #DWTcontainer{display:flex;justify-content:space-between;flex-direction:row}.ndf-scanner #DWTcontainerTop{position:relative;float:left;flex:1;margin:0 10px;height:auto;border-radius:4px;border:3px solid #ccc;display:flex;justify-content:space-between;flex-direction:row;overflow:hidden}.ndf-scanner .ds-dwt-container-box>div{border:none!important}.ndf-scanner #divEdit{float:left;margin:0;padding:0;width:60px;background:#fff;border-right:1px solid #ccc}.ndf-scanner #divEdit .operateGrp li{margin:0;width:60px;height:57px;line-height:52px;border-bottom:solid 1px #ccc;text-align:center}.ndf-scanner #divEdit .operateGrp li:nth-last-child(2){height:58px}.ndf-scanner #divEdit .operateGrp li:last-child{height:56px}.ndf-scanner #divEdit .operateGrp li>img{cursor:pointer}.ndf-scanner #Crop{padding:10px 5px 5px;text-align:center;border-collapse:collapse;border:3px solid #ce5e04;position:absolute;height:80px;z-index:1;background-color:#f0f0f0;width:250px}.ndf-scanner #ImgSizeEditor{padding:10px 15px;position:absolute;z-index:1;top:513px;left:-1px;height:auto;width:320px;font-size:14px;color:#606060;text-align:left;background-color:#f5f5f5;border-collapse:collapse;border:1px solid #ccc;box-shadow:4px 4px 18px #ccc;-webkit-box-shadow:4px 4px 18px #ccc;-moz-box-shadow:4px 4px 18px #ccc}.ndf-scanner #ImgSizeEditor li{margin-bottom:5px}.ndf-scanner #ImgSizeEditor input{background:#fff;border:solid 1px #ccc}.ndf-scanner #ImgSizeEditor input[type=text]{padding-left:3px}.ndf-scanner #ImgSizeEditor input[type=button]{padding:5px;margin:6px 5px 0}.ndf-scanner #dwtcontrolContainer{float:left;width:100%;height:calc(100% - 58px)}.ndf-scanner #dwtcontrolContainer .dynamsoft-dwt-container-box>div{border:none!important}.ndf-scanner #dwt-NonInstallContainerID{float:left;width:560px;height:590px}.ndf-scanner #DWTcontainerTop #btnGroupBtm{position:absolute;bottom:0;padding:15px;width:calc(100% - 60px);height:58px;background:#f5f5f5;border-top:1px solid #ccc;font-size:14px;color:#606060;vertical-align:bottom;display:flex;justify-content:space-between;flex-direction:row;align-items:center;box-sizing:border-box;left:60px}.ndf-scanner #btnGroupBtm .ct-lt{float:left}.ndf-scanner #btnGroupBtm .ct-lt input{padding:0;margin-right:6px;width:25px;height:20px;font-size:10px;background:var(--input-field-bg, #f5f5f5);border:solid 1px var(--border-color, #bbbcc0);color:var(--input-field-color, #606060);outline:none;cursor:pointer}.ndf-scanner #btnGroupBtm .ct-lt input[type=text]{height:20px;font-size:12px;border:none;cursor:default}.ndf-scanner #btnGroupBtm .ct-lt #DW_btnFirstImage{margin-left:5px}.ndf-scanner #btnGroupBtm .ct-lt #DW_CurrentImage{margin:0 0 0 -13px;text-align:right}.ndf-scanner #btnGroupBtm .ct-lt #DW_TotalImage{margin:0 -7px 0 0;text-align:left}.ndf-scanner #btnGroupBtm .ct-rt{float:right}.ndf-scanner #DW_PreviewMode{padding:0 5px;margin-left:5px;height:26px;border:solid 1px #d8d8d8;color:#444;outline:none;border-radius:5px;cursor:pointer}.ndf-scanner #ScanWrapper{border-radius:4px;width:315px;height:570px;box-sizing:border-box}.ndf-scanner div.divinput{font-size:14px;color:#606060;line-height:24px;margin-bottom:20px}.ndf-scanner .divType,.ndf-scanner #ScanWrapper .toggle{padding-left:20px;height:38px;line-height:36px;font-size:14px;color:#444;background:#eee;border-bottom:1px solid #ccc;cursor:pointer}.ndf-scanner #ScanWrapper .toggle{cursor:default}.ndf-scanner .mark_arrow{display:block;float:right;margin:15px 20px 0 0;width:12px;height:8px}.ndf-scanner .divTableStyle{border:3px solid #ccc;border-radius:5px;padding:10px}.ndf-scanner .divTableStyle input[type=radio],.ndf-scanner .divTableStyle input[type=checkbox]{margin:0 5px!important;height:13px;display:inline-block}.ndf-scanner #ScanWrapper select,.ndf-scanner #divUpload input[type=text]{margin-top:3px;margin-bottom:6px;height:26px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.ndf-scanner #ScanWrapper input[type=checkbox],.ndf-scanner #ScanWrapper input[type=radio]{margin:0 3px 0 0}.ndf-scanner #divScanner{border-bottom:none}.ndf-scanner #PCollapse{list-style:none inside none;margin-left:0;padding-left:0}.ndf-scanner select#source{margin-top:3px;padding-left:3px;width:100%;font-size:12px;border:solid 1px #ccc;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;outline:none}.ndf-scanner select#Resolution{margin-left:3px;width:192px;height:26px}.ndf-scanner #divProductDetail li{margin-top:8px}.ndf-scanner #divProductDetail li:first-child{margin-top:3px}.ndf-scanner #divProductDetail li label{display:inline-block;margin:0 4px;font-size:12px}.ndf-scanner #divProductDetail li label:last-child{margin:0}.ndf-scanner #divProductDetail li label input{width:15px;height:15px;vertical-align:middle}.ndf-scanner #div_LoadLocalImage input[type=button]{margin:15px 0;width:90px;height:30px}.ndf-scanner #div_ScanImage{position:relative}.ndf-scanner #tblLoadImage{position:absolute;top:102px;z-index:1;padding:30px 22px;width:275px;height:128px;font-size:14px;line-height:30px;text-align:left;border:1px solid #fe8e14;background-color:#f5f5f5}.ndf-scanner #tblLoadImage>a{position:absolute;top:15px;right:15px;line-height:normal;text-decoration:none}.ndf-scanner #tblLoadImage a{color:#50a8e1}.ndf-scanner #tblLoadImage a:hover{color:#61c2ec}.ndf-scanner #divUpload input[type=text]{width:100%;padding-left:5px}.ndf-scanner #divUpload li label{display:inline-block;margin:0 8px 0 0;font-size:12px}.ndf-scanner #divUpload li img{margin-right:2px}.ndf-scanner #divUpload li label:last-child{margin-right:0}.ndf-scanner #divUpload li input{width:15px;height:15px;vertical-align:middle}.ndf-scanner #divUpload li:nth-child(3){margin:5px 0 8px}.ndf-scanner #divUpload li{padding:0 20px}.ndf-scanner #divUpload li:nth-child(2){padding-top:12px}.ndf-scanner #divUpload input[type=button]{margin:14px 0 20px}.ndf-scanner #divUpload #btnSave,.ndf-scanner #divUpload #btnUpload{padding:0;width:115px;height:30px;margin-right:15px;cursor:pointer}.ndf-scanner #divUpload #btnUpload{width:138px;margin-right:0}.ndf-scanner #DWTcontainerBtm{position:relative;float:left;width:980px}.ndf-scanner #DWTemessageContainer{float:left}.ndf-scanner #DWTemessageContainer input[type=text]{border:solid 1px #ccc;padding-left:3px}.ndf-scanner #DWTemessageContainer input[type=button]{cursor:pointer;margin:0 3px;outline:none}.ndf-scanner #DWTdivMsg{padding:5px 0 0;font-size:14px;color:#444}.ndf-scanner #DWTemessage{padding:6px 0 0 8px;margin-top:3px;width:632px;height:160px;border:solid 1px #ccc;overflow-y:scroll;background:#fff}.ndf-scanner #divNoteMessage{float:right;padding:10px 15px;margin-top:34px;width:315px;height:160px;font-size:12px;line-height:20px;border:1px solid #ccc;background:#e7f2fd;color:#606060}.ndf-scanner #divNoteMessage p{margin:0;color:#444}.ndf-scanner .ds-dialog-wrap,.ndf-scanner .ds-dialog-wrap div{box-sizing:content-box!important}.ndf-scanner .ds-dialog-wrap:before,.ndf-scanner .ds-dialog-wrap div:before,.ndf-scanner .ds-dialog-wrap:after,.ndf-scanner .ds-dialog-wrap div:after{box-sizing:content-box!important}.ndf-scanner .ks-overlay{position:absolute;left:-9999px;top:-9999px}.ndf-scanner .ks-ext-close{padding:0 20px;position:absolute;right:-5px;top:5px}.ndf-scanner .ks-ext-close,.ndf-scanner .ks-ext-close:link{color:#22a;text-decoration:none;cursor:pointer}.ndf-scanner .ks-ext-mask{background:#999;filter:alpha(opacity=70);-moz-opacity:.7;opacity:.7}.ndf-scanner .D-dailog .ks-ext-close .ks-ext-close-x{height:8px}.ndf-scanner .D-dailog .ks-ext-close,.ndf-scanner .D-dailog .ks-ext-close:hover{background:none;border:none}.ndf-scanner .D-dailog{position:absolute;left:-9999px;top:-99999px;margin:100px auto;padding:0;width:392px;height:262px;background-color:#f1f2f2}.ndf-scanner .D-dailog .D-dailog-body{width:350px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Mac{width:350px;height:235px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-NotAllowed{color:#444;line-height:1.8;width:350px;height:185px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Scan{width:380px;height:240px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog .D-dailog-body-Scan-sample{width:380px;height:200px;position:relative;top:5px;left:5px;margin:0;background-color:#fff;border:1px solid #e7e7e7;padding:15px}.ndf-scanner .D-dailog a{text-decoration:none}.ndf-scanner .link{text-decoration:underline}.ndf-scanner .D-dailog ul{margin:10px 0 10px 20px;list-style-type:disc}.ndf-scanner .red{color:red;margin-left:5px}.ndf-scanner #message{position:fixed;top:0px;left:0px;width:100%;z-index:105;text-align:center;font-weight:bold;font-size:100%;padding:10px 0;color:#239210;background-color:#e0f0d6;border:1px solid #54d33f;box-shadow:0 0 10px #3a3a3a}.ndf-scanner #MessageBody a{color:#6a9962;font-size:14px}.ndf-scanner #message span{text-align:center;width:95%;float:left}.ndf-scanner #MessageBoy a:hover{text-decoration:underline}.ndf-scanner .close-notify{white-space:nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}.ndf-scanner .close-notify a{color:#fff}.ndf-scanner .DWTPage{margin:0 auto}.hide-upload-button{opacity:0!important}app-scanner input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px!important;height:20px!important;border:2px solid var(--main-color)!important;background-color:var(--wrapper-bg)!important;cursor:pointer;border-radius:4px;position:relative;transition:background-color .3s}app-scanner input[type=checkbox]:checked{background-color:var(--main-color)!important;border-color:var(--main-color)!important}app-scanner input[type=checkbox]:checked:after{content:\"\";position:absolute;top:2px;left:6px;width:5px;border:solid var(--checkbox-inner-color, #fff);height:10px;border-width:0 2px 2px 0;transform:rotate(45deg)}app-scanner input[type=radio]{appearance:none;-webkit-appearance:none;width:20px!important;height:20px!important;border:2px solid var(--radio-border, var(--main-color))!important;background-color:var(--radio-bg, var(--wrapper-bg))!important;border-radius:50%;cursor:pointer;position:relative;transition:background-color .3s ease}app-scanner input[type=radio]:checked{background-color:var(--main-color)!important;border-color:var(--main-color)!important}app-scanner input[type=radio]:checked:after{content:\"\";position:absolute;top:4px;left:4px;width:8px;height:8px;background-color:var(--radio-inner-color, #fff)!important;border-radius:50%}app-scanner .mat-icon{color:var(--scanner-icon-color, #161616)}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfScannerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndf-scanner',
+                    templateUrl: './ndf-scanner.component.html',
+                    styleUrls: ['./ndf-scanner.component.scss'],
+                    host: { class: 'ndf-scanner' },
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: DocumentsService }, { type: NdfUploaderService }, { type: i4$1.DatePipe }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_BASE_HREF]
+                }] }]; }, propDecorators: { useStoredFile: [{
+                type: Input
+            }], hideUploadButton: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], file: [{
+                type: Output
+            }] } });
+
+class NdfScannerModule {
+}
+NdfScannerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfScannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NdfScannerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfScannerModule, declarations: [NdfScannerComponent], imports: [CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatTooltipModule, MatProgressSpinnerModule], exports: [NdfScannerComponent] });
+NdfScannerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfScannerModule, imports: [[CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatTooltipModule, MatProgressSpinnerModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfScannerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TranslateModule, MatIconModule, MatButtonModule, MatTooltipModule, MatProgressSpinnerModule],
+                    declarations: [NdfScannerComponent],
+                    exports: [NdfScannerComponent]
+                }]
+        }] });
+
 /*
  * Public API Surface of nuxeo-development-framework
  */
@@ -45719,5 +47301,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, AggregationGroupComponent, AggregationRadioComponent, AggregationSelectComponent, AggregationSwitchComponent, ApisErrorsMessagesService, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AutocompleteFilterPipe, AutocompleteTemplateDirective, AvatarComponent, AvatarModule, BaseChartBuilderService, BaseChartComponent, BaseColumnComponent, BaseComponent, BaseCustomReport, BaseDatePicker, BaseDateValueAccessor, BaseDialogComponent, BaseEditorConfigService, 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, ChartCallbacksRegisterService, ChartComponent, ChartDataService, ChartDataTransformers, index$1 as ChartDefaults, ChartManagerService, ChartPanel, ChartPanelFooterComponent, ChartPanelHeaderComponent, ChartPanelModule, index as ChartPlugins, ChartPluginsRegistry, ChartThemeService, index$2 as ChartUtils, ChartsModule, CheckConditionPipe, CheckboxTemplateDirective, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, ColumnRendererRegistryService, 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, CustomReportsRegistry, 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, Evaluator, 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, METADATA_EDITOR_OPTIONS, MIN_VISIBLE_COUNT, MONACO_EDITOR_CONFIG, MY_MOMENT_FORMATS, MainfolderService, MapToAggregationConfigPipe, 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, NdfTronExtractText, 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, ReportConfigurationService, ReportTransformService, ReportsDataTransformers, 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, TableSkeletonComponent, 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, 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, AggregationGroupComponent, AggregationRadioComponent, AggregationSelectComponent, AggregationSwitchComponent, ApisErrorsMessagesService, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AutocompleteFilterPipe, AutocompleteTemplateDirective, AvatarComponent, AvatarModule, BaseChartBuilderService, BaseChartComponent, BaseColumnComponent, BaseComponent, BaseCustomReport, BaseDatePicker, BaseDateValueAccessor, BaseDialogComponent, BaseEditorConfigService, 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, ChartCallbacksRegisterService, ChartComponent, ChartDataService, ChartDataTransformers, index$1 as ChartDefaults, ChartManagerService, ChartPanel, ChartPanelFooterComponent, ChartPanelHeaderComponent, ChartPanelModule, index as ChartPlugins, ChartPluginsRegistry, ChartThemeService, index$2 as ChartUtils, ChartsModule, CheckConditionPipe, CheckboxTemplateDirective, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, ColumnRendererRegistryService, 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, CustomReportsRegistry, 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, Evaluator, EvaluatorsService, ExtensionLoaderService, ExtensionService, FIELD_SEND_MODE, FIELD_TYPE, FILE_CONTENT, FILTER_CUSTOM_TEMPLATE, FILTER_DATES_TYPE, FieldHeaderComponent, FieldValueObject, FileEventType, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FileStatus, 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, METADATA_EDITOR_OPTIONS, MIN_VISIBLE_COUNT, MONACO_EDITOR_CONFIG, MY_MOMENT_FORMATS, MainfolderService, MapToAggregationConfigPipe, 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, NdfScannerComponent, NdfScannerModule, NdfTableComponent, NdfTableConfigurationService, NdfTableModule, NdfTableService, NdfTabsComponent, NdfTabsModule, NdfTransformService, NdfTronExtractText, NdfUploaderBottomSheetService, NdfUploaderModule, NdfUploaderService, NdfUploaderSheetEventType, 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, ReportConfigurationService, ReportTransformService, ReportsDataTransformers, 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, TableSkeletonComponent, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TextSearchComponent, TimeAgoPipe, ToastsModule, TooltipPipe, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UploadProvider, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VALUE_OBJECT, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getConnections, getDoughnutOptions, getHorizontalBarOptions, getLineOptions, getPieOptions, getRandomNumber, getValue, getVerticalBarOptions, isDateObject, isFieldValueObject, mergeArrays, mergeObjects, minute$1 as minute, nuxeoBaseUrl, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeEmptyKeys, removeNode, removeNodeAndConnections, serializeControl, serializePort, slideAnimation, sortByOrder };
 //# sourceMappingURL=nuxeo-development-framework.js.map