nuxeo-development-framework 4.2.2 → 4.2.4

package/fesm2015/nuxeo-development-framework.js

@@ -56,11 +56,11 @@ import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 import * as i6 from '@angular/material/form-field';
 import * as i8 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i6$1 from '@angular/material/expansion';
+import * as i7$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i1$9 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i7$1 from '@angular/material/checkbox';
+import * as i7$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i5 from '@angular/material/input';
@@ -69,7 +69,7 @@ import * as i2$8 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i2$7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i6$2 from '@busacca/ng-pick-datetime';
+import * as i6$1 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';
@@ -87,7 +87,7 @@ import * as i4$2 from '@swimlane/ngx-datatable';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import * as i5$1 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
-import * as i7$2 from '@angular/material/autocomplete';
+import * as i7$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import Dynamsoft from 'dwt';
 import * as i4$3 from '@angular/material/progress-bar';
@@ -103,7 +103,7 @@ import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested';
 import WebViewer from '@pdftron/webviewer';
 import * as i1$8 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i8$1 from '@angular/material/divider';
+import * as i9$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import localeAr from '@angular/common/locales/ar';
 import localeEn from '@angular/common/locales/en';
@@ -120,7 +120,7 @@ import { MinimapPlugin } from 'rete-minimap-plugin';
 import { curveLinear } from 'd3-shape';
 import { ConnectionPathPlugin, Transformers } from 'rete-connection-path-plugin';
 import { getDOMSocketPosition } from 'rete-render-utils';
-import * as i7$3 from '@angular/material/badge';
+import * as i7$4 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import colorLib from '@kurkle/color';
@@ -4123,47 +4123,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * @ignore
  */
 class CommentItemComponent {
-    constructor(translationSrvice, dialog) {
+    constructor(translationSrvice, dialog, nuxeoDialogService) {
         this.translationSrvice = translationSrvice;
         this.dialog = dialog;
+        this.nuxeoDialogService = nuxeoDialogService;
         this.loaderType = 'scroll';
         this.showCommentActions = true;
         this.lang = 'en';
         this.refreshCommentList = new EventEmitter();
     }
     ngOnInit() {
-        console.log("comment comment", this.comment);
+        console.log('comment comment', this.comment);
         let date = new Date(this.comment.creationDate);
         date.setSeconds(date.getSeconds() - 5);
         this.comment.creationDate = date.toISOString();
-        this.comment.Commenter.fullName = this.comment.Commenter.properties.firstName + ' ' + this.comment.Commenter.properties.lastName;
-        this.langSubscription = this.translationSrvice.isArabic.subscribe(res => {
+        this.comment.Commenter.fullName =
+            this.comment.Commenter.properties.firstName +
+                ' ' +
+                this.comment.Commenter.properties.lastName;
+        this.langSubscription = this.translationSrvice.isArabic.subscribe((res) => {
             this.lang = res ? 'ar' : 'en';
         });
     }
     executeFunction(type) {
         if (type === 'edit') {
-            this.dialogRef = this.dialog.open(EditDeleteModalComponent, {
+            this.dialogRef = this.nuxeoDialogService.open({
+                component: EditDeleteModalComponent,
                 width: '500px',
                 height: '220px',
                 panelClass: 'watcher-dialog-container',
                 data: {
                     type: 'edit',
                     comment: Object.assign({}, this.comment)
-                },
-                disableClose: true,
+                }
+                //disableClose: true,
             });
         }
         else if (type === 'delete') {
-            this.dialogRef = this.dialog.open(EditDeleteModalComponent, {
+            this.dialogRef = this.nuxeoDialogService.open({
+                component: EditDeleteModalComponent,
                 width: '500px',
                 height: '150px',
                 panelClass: 'watcher-dialog-container',
                 data: {
                     type: 'delete',
                     comment: Object.assign({}, this.comment)
-                },
-                disableClose: true,
+                }
+                //disableClose: true,
             });
         }
         this.dialogRef.afterClosed().subscribe((res) => {
@@ -4173,7 +4179,7 @@ class CommentItemComponent {
         });
     }
 }
-CommentItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentItemComponent, deps: [{ token: TranslationService }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+CommentItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentItemComponent, deps: [{ token: TranslationService }, { token: i1$3.MatDialog }, { token: NuxeoDialogService }], target: i0.ɵɵFactoryTarget.Component });
 CommentItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CommentItemComponent, selector: "app-comment-item", inputs: { comment: "comment", loaderType: "loaderType", showCommentActions: "showCommentActions" }, outputs: { refreshCommentList: "refreshCommentList" }, ngImport: i0, template: "<div class=\"comment-item\" SetRtl>\r\n\r\n  <div class=\"comment-controls\" *ngIf=\"showCommentActions\">\r\n    <span class=\"bi bi-pencil contril-icon\" \r\n    *permission=\"{name: 'updateComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.EDIT' | translate }}\"\r\n     (click)=\"executeFunction('edit')\"\r\n     ></span>\r\n\r\n    <span class=\"bi bi-trash contril-icon\" \r\n    *permission=\"{name: 'deleteComment', entity: comment}\"\r\n    matTooltip=\"{{ 'BUTTONS.Delete' | translate }}\"\r\n    (click)=\"executeFunction('delete')\"\r\n    ></span>\r\n  </div>\r\n\r\n  <app-user-card [user]=\"comment.Commenter\" [diameter]=\"12\">\r\n    <div class=\"lineOne\">\r\n      {{lang === 'en' ? (comment.Commenter.fullName) : (comment.Commenter.fullNameAr ? comment.Commenter.fullNameAr : comment.Commenter.fullName)}}\r\n    </div>\r\n    <div class=\"lineOnePart2\">\r\n      <span class=\"date\" matTooltip='{{ comment?.creationDate | localizedDate:\r\n        \"fullDate\"}}' matTooltipClass=\"tdf-tooltip\" TooltipPosition='below'>\r\n        <span class=\"date-sperator px-1\">|</span>{{ comment?.creationDate | timeAgo : lang }}</span>\r\n    </div>\r\n    <div class=\"lineTwo\">\r\n      <app-read-more class=\"comment-text\" [text]=\"comment?.text\" [wordCount]=\"loaderType === 'scroll' ? 20 : 60\">\r\n      </app-read-more>\r\n    </div>\r\n  </app-user-card>\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.comment-item{border:1px solid #d9dce2;padding:8px 4px;display:flex;position:relative}.comment-item:hover{background:#f5f6f8}.comment-item .comment-controls{position:absolute;right:5px}.comment-item .comment-controls .contril-icon{padding:0 5px;cursor:pointer}.date{color:#3c3cf0}.comment-text{color:#8f98aa}.comment-avatar{align-items:top;padding:0 4px;display:flex}.comment-avatar .avatar{width:40px;height:40px;display:block}.rtl .comment-controls{left:5px;right:auto}\n"], components: [{ type: UserCardComponent, selector: "app-user-card", inputs: ["user", "diameter"] }, { type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "charCount", "wordCount", "lineBreaks"] }], directives: [{ type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe, "localizedDate": LocalizedDatePipe, "timeAgo": TimeAgoPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CommentItemComponent, decorators: [{
             type: Component,
@@ -4182,7 +4188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './comment-item.component.html',
                     styleUrls: ['./comment-item.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: TranslationService }, { type: i1$3.MatDialog }]; }, propDecorators: { comment: [{
+        }], ctorParameters: function () { return [{ type: TranslationService }, { type: i1$3.MatDialog }, { type: NuxeoDialogService }]; }, propDecorators: { comment: [{
                 type: Input
             }], loaderType: [{
                 type: Input
@@ -5470,12 +5476,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 
 class CorrespondenceRelationListComponent {
-    constructor(relationsvc, dialog, viewerFilesService, documentsApi, adapter) {
+    constructor(relationsvc, dialog, viewerFilesService, documentsApi, adapter, nuxeoDialogService) {
         this.relationsvc = relationsvc;
         this.dialog = dialog;
         this.viewerFilesService = viewerFilesService;
         this.documentsApi = documentsApi;
         this.adapter = adapter;
+        this.nuxeoDialogService = nuxeoDialogService;
         this.reload = false;
         this.relateddoc = [];
         this.menu_actions = [
@@ -5508,30 +5515,24 @@ class CorrespondenceRelationListComponent {
         let functionToPerform = () => {
             return this.relationsvc.Delete_Named_Relation(this.correspondence_id, relateddoc.relationId, relateddoc.uid);
         };
-        let title = '';
-        let msg = '';
-        this.openDialog(functionToPerform, 'Success', 'correspondence-relation.deleted_success').subscribe((data) => {
-            if (data) {
-                this.relationsvc.getUpdatedRelation.next();
+        this.openDialog(functionToPerform);
+    }
+    openDialog(functionToPerform) {
+        this.nuxeoDialogService.showConfirm({
+            message: 'genericConfirm',
+            actions: {
+                confirm: {
+                    fn: () => {
+                        return functionToPerform().pipe(tap((data) => {
+                            if (data) {
+                                this.relationsvc.getUpdatedRelation.next();
+                            }
+                        }));
+                    }
+                }
             }
         });
     }
-    openDialog(functionToPerform, title, msg) {
-        return this.dialog
-            .open(NdfConfirmationDialogComponent, {
-            width: '400px',
-            panelClass: 'relation-confirm-dialog',
-            data: {
-                title: 'genericConfirm',
-                toastrTitle: title,
-                toastrMsg: msg
-            }
-        })
-            .afterClosed()
-            .pipe(tap((res) => {
-            functionToPerform();
-        }));
-    }
     view_Corres(relation) {
         let url = window.location.href;
         window.open(url.replace(this.correspondence_id, relation.uid), '_blank');
@@ -5551,8 +5552,8 @@ 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              {{('vocabulary.VOC_CorrespondenceRelationsNames.' + group[0]) | translate }}\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$4.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.ɵ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 }, { token: NuxeoDialogService }], 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              {{('vocabulary.VOC_CorrespondenceRelationsNames.' + group[0]) | translate }}\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: i7$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i7$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight"] }, { type: i2$4.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: i7$1.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i7$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i7$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5561,14 +5562,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     styleUrls: ['./correspondence-relation-list.component.scss'],
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return [{ type: CorrespondenceRelationService }, { type: i1$3.MatDialog }, { type: ViewerFilesService }, { type: DocumentsService }, { type: AdapterService }]; }, propDecorators: { correspondence_id: [{
+        }], ctorParameters: function () { return [{ type: CorrespondenceRelationService }, { type: i1$3.MatDialog }, { type: ViewerFilesService }, { type: DocumentsService }, { type: AdapterService }, { type: NuxeoDialogService }]; }, propDecorators: { correspondence_id: [{
                 type: Input
             }], reload: [{
                 type: Input
             }] } });
 
 class CorrespondenceRelationComponent {
-    constructor(dialog, corrrelationsvc, toastr, viewerFilesService, documentsApi, userPreference, nuxeoService) {
+    constructor(dialog, corrrelationsvc, toastr, viewerFilesService, documentsApi, userPreference, nuxeoService, nuxeoDialogService) {
         this.dialog = dialog;
         this.corrrelationsvc = corrrelationsvc;
         this.toastr = toastr;
@@ -5576,6 +5577,7 @@ class CorrespondenceRelationComponent {
         this.documentsApi = documentsApi;
         this.userPreference = userPreference;
         this.nuxeoService = nuxeoService;
+        this.nuxeoDialogService = nuxeoDialogService;
         this.reload = false;
     }
     ngOnInit() {
@@ -5654,36 +5656,30 @@ class CorrespondenceRelationComponent {
             this.viewerFilesService.updateViewer.next(file);
         });
     }
-    openConfirmDialog(functionToPerform, title, msg) {
-        return this.dialog
-            .open(NdfConfirmationDialogComponent, {
-            width: '400px',
-            panelClass: 'relation-confirm-dialog',
-            data: {
-                title: 'genericConfirm',
-                toastrTitle: title,
-                toastrMsg: msg
+    openConfirmDialog(functionToPerform) {
+        this.nuxeoDialogService.showConfirm({
+            message: 'genericConfirm',
+            actions: {
+                confirm: {
+                    fn: () => {
+                        return functionToPerform().pipe(tap((data) => {
+                            if (data) {
+                                this.corrrelationsvc.getUpdatedRelation.next();
+                            }
+                        }));
+                    }
+                }
             }
-        })
-            .afterClosed()
-            .pipe(tap((res) => {
-            functionToPerform();
-        }));
+        });
     }
     deleteRelation(relateddoc) {
         let functionToPerform = () => {
             return this.corrrelationsvc.Delete_Named_Relation(this.corr_id, relateddoc.relationId, relateddoc.uid);
         };
-        let title = '';
-        let msg = '';
-        this.openConfirmDialog(functionToPerform, 'Success', 'correspondence-relation.deleted_success').subscribe((data) => {
-            if (data) {
-                this.corrrelationsvc.getUpdatedRelation.next();
-            }
-        });
+        this.openConfirmDialog(functionToPerform);
     }
 }
-CorrespondenceRelationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationComponent, deps: [{ token: i1$3.MatDialog }, { token: CorrespondenceRelationService }, { token: CustomToastrService }, { token: ViewerFilesService }, { token: DocumentsService }, { token: UserPreferencesService }, { token: NuxeoService }], target: i0.ɵɵFactoryTarget.Component });
+CorrespondenceRelationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationComponent, deps: [{ token: i1$3.MatDialog }, { token: CorrespondenceRelationService }, { token: CustomToastrService }, { token: ViewerFilesService }, { token: DocumentsService }, { token: UserPreferencesService }, { token: NuxeoService }, { token: NuxeoDialogService }], target: i0.ɵɵFactoryTarget.Component });
 CorrespondenceRelationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CorrespondenceRelationComponent, selector: "cts-correspondence-relation", inputs: { corr_id: "corr_id", correspondance: "correspondance" }, ngImport: i0, template: "<div class=\"relations-container\">\r\n  <div  class=\"mb-3 relations-reply\">\r\n    <div class=\"subheader\">\r\n      <div>{{ \"correspondence-relation.reply_relation\" | translate }}</div>\r\n    </div>\r\n    <cts-correspondence-relation-reply\r\n      [correspondence_id]=\"corr_id\"\r\n      (actionclicked)=\"handleActions($event)\"\r\n    ></cts-correspondence-relation-reply>\r\n  </div>\r\n\r\n  <div class=\"mb-2 relations-listing\">\r\n    <div class=\"subheader\">\r\n      <div>{{ \"correspondence-relation.title\" | translate }}</div>\r\n      <div class=\"\" *permission=\"{\r\n        name: 'AddRelatedCorrespondence',\r\n        entity: correspondance , user: nuxeoService.nuxeoClient.user\r\n      }\" (click)=\"openDialog()\"><mat-icon>add</mat-icon></div>\r\n    </div>\r\n    <cts-correspondence-relation-list\r\n      [correspondence_id]=\"corr_id\"\r\n      [reload]=\"reload\"\r\n    ></cts-correspondence-relation-list>\r\n  </div>\r\n\r\n\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.relations-container .subheader{padding:10px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:bold}.relations-container .subheader mat-icon{font-size:25px;cursor:pointer;color:#465573}.relations-container .relations-title{display:flex;justify-content:space-between;align-items:center}.relations-container .relations-title a{font-size:30px;color:#789}.relations-container .relations-list{border:1px solid #00000026}.relations-container .relations-list .relation-item{display:flex;justify-content:space-between;align-items:center}\n"], components: [{ type: CorrespondenceRelationReplyComponent, selector: "cts-correspondence-relation-reply", inputs: ["correspondence_id"], outputs: ["actionclicked"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CorrespondenceRelationListComponent, selector: "cts-correspondence-relation-list", inputs: ["correspondence_id", "reload"] }], directives: [{ type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CorrespondenceRelationComponent, decorators: [{
             type: Component,
@@ -5692,7 +5688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './correspondence-relation.component.html',
                     styleUrls: ['./correspondence-relation.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: CorrespondenceRelationService }, { type: CustomToastrService }, { type: ViewerFilesService }, { type: DocumentsService }, { type: UserPreferencesService }, { type: NuxeoService }]; }, propDecorators: { corr_id: [{
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: CorrespondenceRelationService }, { type: CustomToastrService }, { type: ViewerFilesService }, { type: DocumentsService }, { type: UserPreferencesService }, { type: NuxeoService }, { type: NuxeoDialogService }]; }, propDecorators: { corr_id: [{
                 type: Input
             }], correspondance: [{
                 type: Input
@@ -6611,7 +6607,7 @@ class DynamicFormBoolItemComponent {
     }
 }
 DynamicFormBoolItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormBoolItemComponent, deps: [{ token: DynamicFormUpdateService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormBoolItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormBoolItemComponent, selector: "app-dynamic-form-boolitem", inputs: { property: "property", editable: "editable" }, ngImport: i0, template: "<ng-container *ngIf=\"!property.isEmpty() || isEditable()\">\r\n  <div class=\"row gap\">\r\n\r\n    <label class=\"col-sm-3\" for=\"formGroupInputSmall\">{{\r\n      property.label | translate\r\n      }}<span *ngIf=\"property.mandatory\" class=\"text-danger\">*</span></label>\r\n    <div class=\"col-sm-9\">\r\n      <mat-checkbox [required]=\"property.mandatory\" [attr.data-automation-id]=\"'card-boolean-' + property.key\"\r\n        [attr.title]=\"'CORE.METADATA.ACTIONS.TOGGLE' | translate\" [checked]=\"property.displayValue\"\r\n        [disabled]=\"!isEditable()\" (change)=\"changed($event)\">\r\n      </mat-checkbox>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], components: [{ type: i7$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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
+DynamicFormBoolItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormBoolItemComponent, selector: "app-dynamic-form-boolitem", inputs: { property: "property", editable: "editable" }, ngImport: i0, template: "<ng-container *ngIf=\"!property.isEmpty() || isEditable()\">\r\n  <div class=\"row gap\">\r\n\r\n    <label class=\"col-sm-3\" for=\"formGroupInputSmall\">{{\r\n      property.label | translate\r\n      }}<span *ngIf=\"property.mandatory\" class=\"text-danger\">*</span></label>\r\n    <div class=\"col-sm-9\">\r\n      <mat-checkbox [required]=\"property.mandatory\" [attr.data-automation-id]=\"'card-boolean-' + property.key\"\r\n        [attr.title]=\"'CORE.METADATA.ACTIONS.TOGGLE' | translate\" [checked]=\"property.displayValue\"\r\n        [disabled]=\"!isEditable()\" (change)=\"changed($event)\">\r\n      </mat-checkbox>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], components: [{ type: i7$2.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: 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: DynamicFormBoolItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -7765,7 +7761,7 @@ class DynamicFormDateItemComponent {
 DynamicFormDateItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormDateItemComponent, deps: [{ token: DynamicFormUpdateService }, { token: i2$5.DateAdapter }, { token: UserPreferencesService }, { token: i1.TranslateService }, { token: i2$6.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 m-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$6.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$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.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: i6.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 m-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$1.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$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { type: i2$6.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$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "value", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: i2$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.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: i6.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: [{
@@ -7875,14 +7871,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$1.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$1.DateTimeAdapter }]; } });
 
 class DepartmentConstants {
 }
@@ -9075,7 +9071,7 @@ class TreeviewSelectComponent {
     }
 }
 TreeviewSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeviewSelectComponent, deps: [{ token: i1$7.TreeviewI18n }, { token: TranslationService }, { token: DepartmentApiService }, { token: DepartmentManagementService$1 }, { token: RolesService }, { token: NuxeoService }, { token: GlobalAdminService }], target: i0.ɵɵFactoryTarget.Component });
-TreeviewSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", displayIsAllowRecExternal: "displayIsAllowRecExternal" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemTemplate let-item=\"item\" let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\">\r\n  <!-- single -->\r\n  <div *ngIf=\"!treeview && !multiple\">\r\n    <div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n      <i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n        <span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n        <span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n      </i>\r\n      <!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label> -->\r\n      <label *ngIf=\"item.disabled\" class=\"form-check-label\">{{\r\n        item.text\r\n        }}</label>\r\n      <label *ngIf=\"!item.disabled\" class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n        }}</label>\r\n    </div>\r\n  </div>\r\n  <!-- Multiple -->\r\n  <div *ngIf=\"!treeview && multiple\">\r\n    <div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n      <i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n        <span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n        <span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n      </i>\r\n      <!-- <input\r\n        class=\"multiple-checkBox\"\r\n        type=\"checkbox\"\r\n        [checked]=\"multipleSelection.includes(item.value)\"\r\n        (change)=\"selectMultiple($event.target.checked, item)\"\r\n      />\r\n\r\n      <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n      <div class=\"multiple-treeview\">\r\n        <mat-checkbox [checked]=\"isItemSelected(item)\" (change)=\"selectMultiple($event.checked, item)\">\r\n          <span> {{ item.text }} </span>\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- treeView -->\r\n  <div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n    <div (mouseenter)=\"hoverField.style.display = 'flex'\" (mouseleave)=\"hoverField.style.display = 'none'\"\r\n      class=\"text-nowrap row-item treeview-row\" [ngClass]=\"{ selected: item.value == selectedItem }\">\r\n      <i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n        <span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n        <span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n      </i>\r\n      <label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }}\r\n        <span #hoverField class=\"hoverField\">\r\n          <span type=\"button\" matTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n            (click)=\"onAction($event, 'update', item)\">\r\n            <li class=\"bi bi-pencil\"></li>\r\n          </span>\r\n\r\n          <span type=\"button\" matTooltip=\"{{\r\n              'department_management.form.toolTip_message' | translate\r\n            }}\" (click)=\"onAction($event, 'add', item)\">\r\n            <li class=\"bi bi-plus\"></li>\r\n          </span>\r\n        </span>\r\n      </label>\r\n    </div>\r\n  </div>\r\n  <!-- treeView as form control -->\r\n  <div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n    <div class=\"text-nowrap row-item treeview-row-form-control\"\r\n      [ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\">\r\n      <i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n        <span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n        <span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n      </i>\r\n      <label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }}\r\n      </label>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #headerTemplate let-config=\"config\" let-item=\"item\" let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\" let-onFilterTextChange=\"onFilterTextChange\">\r\n  <div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n    <div class=\"col-12\">\r\n      <input class=\"form-control\" type=\"text\" [placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n        [(ngModel)]=\"filterText\" (ngModelChange)=\"onFilterTextChange($event)\" />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n    <div class=\"col-12\">\r\n      <label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n        <strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n      </label>\r\n      <label *ngIf=\"config.hasCollapseExpand\" class=\"float-right\" (click)=\"onCollapseExpand()\">\r\n        <i [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n          <span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n          <span *ngSwitchCase=\"false\" class=\"bi bi-arrows-angle-contract\"></span>\r\n        </i>\r\n      </label>\r\n    </div>\r\n  </div>\r\n  <a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{'department_management.selectDefault'|\r\n    translate}}</a>\r\n  <div *ngIf=\"config.hasDivider\" class=\"dropdown-divider\" [ngClass]=\"{'dropdown-divider-noMargin': defaultSelect}\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n  <div class=\"dropdown-wrapper\">\r\n    <ngx-dropdown-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\">\r\n    </ngx-dropdown-treeview>\r\n    <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n  <div class=\"multiple-tree-view dropdown-wrapper\">\r\n    <ngx-dropdown-treeview [config]=\"config\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n    </ngx-dropdown-treeview>\r\n    <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n  <div class=\"tree-view\">\r\n    <ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n    </ngx-treeview>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n  <div class=\"tree-view-form-control\">\r\n    <ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n    </ngx-treeview>\r\n  </div>\r\n</ng-container>", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$7.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1$7.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+TreeviewSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", displayIsAllowRecExternal: "displayIsAllowRecExternal" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemTemplate let-item=\"item\" let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\">\r\n  <!-- single -->\r\n  <div *ngIf=\"!treeview && !multiple\">\r\n    <div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n      <i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n        <span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n        <span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n      </i>\r\n      <!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label> -->\r\n      <label *ngIf=\"item.disabled\" class=\"form-check-label\">{{\r\n        item.text\r\n        }}</label>\r\n      <label *ngIf=\"!item.disabled\" class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n        }}</label>\r\n    </div>\r\n  </div>\r\n  <!-- Multiple -->\r\n  <div *ngIf=\"!treeview && multiple\">\r\n    <div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n      <i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n        <span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n        <span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n      </i>\r\n      <!-- <input\r\n        class=\"multiple-checkBox\"\r\n        type=\"checkbox\"\r\n        [checked]=\"multipleSelection.includes(item.value)\"\r\n        (change)=\"selectMultiple($event.target.checked, item)\"\r\n      />\r\n\r\n      <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n      <div class=\"multiple-treeview\">\r\n        <mat-checkbox [checked]=\"isItemSelected(item)\" (change)=\"selectMultiple($event.checked, item)\">\r\n          <span> {{ item.text }} </span>\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- treeView -->\r\n  <div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n    <div (mouseenter)=\"hoverField.style.display = 'flex'\" (mouseleave)=\"hoverField.style.display = 'none'\"\r\n      class=\"text-nowrap row-item treeview-row\" [ngClass]=\"{ selected: item.value == selectedItem }\">\r\n      <i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n        <span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n        <span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n      </i>\r\n      <label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }}\r\n        <span #hoverField class=\"hoverField\">\r\n          <span type=\"button\" matTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n            (click)=\"onAction($event, 'update', item)\">\r\n            <li class=\"bi bi-pencil\"></li>\r\n          </span>\r\n\r\n          <span type=\"button\" matTooltip=\"{{\r\n              'department_management.form.toolTip_message' | translate\r\n            }}\" (click)=\"onAction($event, 'add', item)\">\r\n            <li class=\"bi bi-plus\"></li>\r\n          </span>\r\n        </span>\r\n      </label>\r\n    </div>\r\n  </div>\r\n  <!-- treeView as form control -->\r\n  <div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n    <div class=\"text-nowrap row-item treeview-row-form-control\"\r\n      [ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\">\r\n      <i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n        <span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n        <span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n      </i>\r\n      <label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }}\r\n      </label>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #headerTemplate let-config=\"config\" let-item=\"item\" let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\" let-onFilterTextChange=\"onFilterTextChange\">\r\n  <div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n    <div class=\"col-12\">\r\n      <input class=\"form-control\" type=\"text\" [placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n        [(ngModel)]=\"filterText\" (ngModelChange)=\"onFilterTextChange($event)\" />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n    <div class=\"col-12\">\r\n      <label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n        <strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n      </label>\r\n      <label *ngIf=\"config.hasCollapseExpand\" class=\"float-right\" (click)=\"onCollapseExpand()\">\r\n        <i [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n          <span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n          <span *ngSwitchCase=\"false\" class=\"bi bi-arrows-angle-contract\"></span>\r\n        </i>\r\n      </label>\r\n    </div>\r\n  </div>\r\n  <a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{'department_management.selectDefault'|\r\n    translate}}</a>\r\n  <div *ngIf=\"config.hasDivider\" class=\"dropdown-divider\" [ngClass]=\"{'dropdown-divider-noMargin': defaultSelect}\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n  <div class=\"dropdown-wrapper\">\r\n    <ngx-dropdown-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\">\r\n    </ngx-dropdown-treeview>\r\n    <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n  <div class=\"multiple-tree-view dropdown-wrapper\">\r\n    <ngx-dropdown-treeview [config]=\"config\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n    </ngx-dropdown-treeview>\r\n    <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n  <div class=\"tree-view\">\r\n    <ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n    </ngx-treeview>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n  <div class=\"tree-view-form-control\">\r\n    <ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n    </ngx-treeview>\r\n  </div>\r\n</ng-container>", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$7.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1$7.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeviewSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -10475,7 +10471,7 @@ class DynamicFormSelectUsersComponent {
     }
 }
 DynamicFormSelectUsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormSelectUsersComponent, deps: [{ token: UsersInDepartmentsApiService }, { token: i1.TranslateService }, { token: TranslationService }, { token: i2$6.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormSelectUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectUsersComponent, selector: "cts-dynamic-form-select-users", inputs: { deptTitle: "deptTitle", groupName: "groupName", label: "label", bindValue: "bindValue", bindLabel: "bindLabel", arabicBindLabel: "arabicBindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", preSelectedValues: "preSelectedValues", usePreSelectedValue: "usePreSelectedValue", disabled: "disabled", filter: "filter", useArabicName: "useArabicName" }, outputs: { onSelectItems: "onSelectItems" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger m-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<div class=\"user-select\" [ngClass]=\"{ 'multiple-wrapper': multiple }\" SetRtl>\r\n  <ng-select\r\n    #ngSelectComponent\r\n    [items]=\"buffer\"\r\n    [bindLabel]=\"useArabicName ? (isArabic ? arabicBindLabel : bindLabel)  : bindLabel\"\r\n    [placeholder]=\"\r\n      multiple && (selection && selection.length > 0) ? selectionstrg : placeholder\r\n    \"\r\n    [multiple]=\"multiple\"\r\n    [searchable]=\"searchable\"\r\n    [closeOnSelect]=\"closeOnSelect\"\r\n    [hideSelected]=\"hideSelectedItems\"\r\n    [loading]=\"loading\"\r\n    (scrollToEnd)=\"onScrollToEnd()\"\r\n    [disabled]=\"disabled\"\r\n    [typeahead]=\"userNameInput$\"\r\n    [compareWith]=\"compareFn\"\r\n    [(ngModel)]=\"selection\"\r\n    (change)=\"emitSelection($event)\"\r\n  >\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div class=\"user-name\">\r\n          {{ item?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : \r\n          (useArabicName ? (isArabic ? (item?.fullNameAr ? item?.fullNameAr : item?.fullName) : item?.fullName) : \r\n          (item?.properties?.firstName + \" \" +item?.properties?.lastName)) }}\r\n\r\n\r\n        </div>\r\n        <div>\r\n          <span\r\n            class=\"ng-value-icon right\"\r\n            (click)=\"clear(item)\"\r\n            aria-hidden=\"true\"\r\n            >\u00D7</span\r\n          >\r\n        </div>\r\n      </span>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      ng-option-tmp\r\n      let-item=\"item\"\r\n      let-item$=\"item$\"\r\n      let-index=\"index\"\r\n    >\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <mat-checkbox\r\n          *ngIf=\"multiple\"\r\n          id=\"item-{{ index }}\"\r\n          [ngModel]=\"item$.selected\"\r\n          (click)=\"(false)\"\r\n        ></mat-checkbox>\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div>\r\n          {{ item?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : \r\n          (useArabicName ? (isArabic ? (item?.fullNameAr ? item?.fullNameAr : item?.fullName) : item?.fullName) : \r\n          (item?.properties?.firstName + \" \" +item?.properties?.lastName)) }}\r\n        </div>\r\n\r\n        <div></div>\r\n      </span>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\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      {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\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}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important}.user-select .ng-select-container .ng-value-container{padding:5px 7px 0!important}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.user-select .mat-checkbox-ripple .mat-ripple-element,.user-select .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.user-select .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.user-select mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.multiple-wrapper .ng-select-container{overflow:visible!important}.multiple-wrapper .ng-select-container.ng-has-value{margin-bottom:65px}.multiple-wrapper .ng-select-container .ng-value-container{position:absolute;top:40px;width:100%;max-height:65px;overflow-y:auto}.multiple-wrapper .ng-select-container .ng-value-container .ng-placeholder{display:block;position:absolute;top:-26px!important}.multiple-wrapper .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper .ng-select-container .ng-value-container .ng-value .user-name{font-size:12px}.multiple-wrapper .ng-select-container .ng-value-container .ng-input{position:absolute;top:-35px!important}.multiple-wrapper .ng-select-container .ng-clear-wrapper{display:none}.multiple-wrapper .ng-select-container .ng-arrow-wrapper{position:absolute;right:5px}.multiple-wrapper .ng-select-filtered .ng-value-container .ng-placeholder{display:none!important}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value .ng-value-icon{border-left:none!important;border-right:1px solid #b8dbff}.multiple-wrapper.rtl .ng-select-container .ng-arrow-wrapper{left:5px;right:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}\n"], components: [{ type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }, { type: i7$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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$2.ɵh, selector: "[ng-label-tmp]" }, { type: i3$2.ɵf, selector: "[ng-option-tmp]" }, { type: i6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormSelectUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectUsersComponent, selector: "cts-dynamic-form-select-users", inputs: { deptTitle: "deptTitle", groupName: "groupName", label: "label", bindValue: "bindValue", bindLabel: "bindLabel", arabicBindLabel: "arabicBindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", preSelectedValues: "preSelectedValues", usePreSelectedValue: "usePreSelectedValue", disabled: "disabled", filter: "filter", useArabicName: "useArabicName" }, outputs: { onSelectItems: "onSelectItems" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger m-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<div class=\"user-select\" [ngClass]=\"{ 'multiple-wrapper': multiple }\" SetRtl>\r\n  <ng-select\r\n    #ngSelectComponent\r\n    [items]=\"buffer\"\r\n    [bindLabel]=\"useArabicName ? (isArabic ? arabicBindLabel : bindLabel)  : bindLabel\"\r\n    [placeholder]=\"\r\n      multiple && (selection && selection.length > 0) ? selectionstrg : placeholder\r\n    \"\r\n    [multiple]=\"multiple\"\r\n    [searchable]=\"searchable\"\r\n    [closeOnSelect]=\"closeOnSelect\"\r\n    [hideSelected]=\"hideSelectedItems\"\r\n    [loading]=\"loading\"\r\n    (scrollToEnd)=\"onScrollToEnd()\"\r\n    [disabled]=\"disabled\"\r\n    [typeahead]=\"userNameInput$\"\r\n    [compareWith]=\"compareFn\"\r\n    [(ngModel)]=\"selection\"\r\n    (change)=\"emitSelection($event)\"\r\n  >\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div class=\"user-name\">\r\n          {{ item?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : \r\n          (useArabicName ? (isArabic ? (item?.fullNameAr ? item?.fullNameAr : item?.fullName) : item?.fullName) : \r\n          (item?.properties?.firstName + \" \" +item?.properties?.lastName)) }}\r\n\r\n\r\n        </div>\r\n        <div>\r\n          <span\r\n            class=\"ng-value-icon right\"\r\n            (click)=\"clear(item)\"\r\n            aria-hidden=\"true\"\r\n            >\u00D7</span\r\n          >\r\n        </div>\r\n      </span>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      ng-option-tmp\r\n      let-item=\"item\"\r\n      let-item$=\"item$\"\r\n      let-index=\"index\"\r\n    >\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <mat-checkbox\r\n          *ngIf=\"multiple\"\r\n          id=\"item-{{ index }}\"\r\n          [ngModel]=\"item$.selected\"\r\n          (click)=\"(false)\"\r\n        ></mat-checkbox>\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div>\r\n          {{ item?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : \r\n          (useArabicName ? (isArabic ? (item?.fullNameAr ? item?.fullNameAr : item?.fullName) : item?.fullName) : \r\n          (item?.properties?.firstName + \" \" +item?.properties?.lastName)) }}\r\n        </div>\r\n\r\n        <div></div>\r\n      </span>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\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      {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\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}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important}.user-select .ng-select-container .ng-value-container{padding:5px 7px 0!important}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.user-select .mat-checkbox-ripple .mat-ripple-element,.user-select .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.user-select .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.user-select mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.multiple-wrapper .ng-select-container{overflow:visible!important}.multiple-wrapper .ng-select-container.ng-has-value{margin-bottom:65px}.multiple-wrapper .ng-select-container .ng-value-container{position:absolute;top:40px;width:100%;max-height:65px;overflow-y:auto}.multiple-wrapper .ng-select-container .ng-value-container .ng-placeholder{display:block;position:absolute;top:-26px!important}.multiple-wrapper .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper .ng-select-container .ng-value-container .ng-value .user-name{font-size:12px}.multiple-wrapper .ng-select-container .ng-value-container .ng-input{position:absolute;top:-35px!important}.multiple-wrapper .ng-select-container .ng-clear-wrapper{display:none}.multiple-wrapper .ng-select-container .ng-arrow-wrapper{position:absolute;right:5px}.multiple-wrapper .ng-select-filtered .ng-value-container .ng-placeholder{display:none!important}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value .ng-value-icon{border-left:none!important;border-right:1px solid #b8dbff}.multiple-wrapper.rtl .ng-select-container .ng-arrow-wrapper{left:5px;right:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}\n"], components: [{ type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }, { type: i7$2.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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$2.ɵh, selector: "[ng-label-tmp]" }, { type: i3$2.ɵf, selector: "[ng-option-tmp]" }, { type: i6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     Cacheable({
         maxCacheCount: 1000,
@@ -12013,7 +12009,7 @@ class DynamicFilterComponent {
     }
 }
 DynamicFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFilterComponent, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: { title: "title", filters: "filters", selections: "selections", id: "id", entityType: "entityType", prefix: "prefix", department: "department", componentType: "componentType", customPageProvider: "customPageProvider", config: "config" }, outputs: { onFilterSelected: "onFilterSelected" }, ngImport: i0, template: "<div class=\"aggregation-container\">\r\n  <div class=\"search-title\">\r\n    {{ prefix + \".\" + title | translate }}\r\n  </div>\r\n  <ng-container *ngIf=\"filters && componentType != 'colorsCodes'\">\r\n    <ng-container *ngFor=\"let group of filters; index as i\">\r\n      <div *ngIf=\"i < 5 || more\" class=\"search-checkbox\">\r\n        <!-- <input\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          type=\"checkbox\"\r\n          (change)=\"onFilterSelect(group.key, $event.target.checked)\"\r\n        /> -->\r\n        <!-- <div class=\"mx-8\">\r\n          <span [ngSwitch]=\"EntityType(group.fetchedKey)\">\r\n            <span *ngSwitchCase=\"'directoryEntry'\">\r\n              {{\r\n                \"vocabulary.\" + group.fetchedKey.directoryName + \".\" + group.key\r\n                  | translate\r\n              }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.fetchedKey.properties.firstName +\r\n                  \" \" +\r\n                  group.fetchedKey.properties.lastName\r\n              }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi>\r\n        </div> -->\r\n        <mat-checkbox\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          (change)=\"onFilterSelect(group.key, $event.checked)\"\r\n        >\r\n          <span [ngSwitch]=\"componentType\" class=\"aggregation-label\">\r\n\r\n            <span *ngSwitchCase=\"'custom-voc'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'vocabulary'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.key === 'system' ? ('SYSTEM_ADMIN' | translate) : (group.fetchedKey.properties.firstName + \" \" + group.fetchedKey.properties.lastName)\r\n              }}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-pp'\">\r\n              <lib-custom-pp-viewer [pageProvider]=\"customPageProvider\" [config]=\"config\" [group]=\"group\"></lib-custom-pp-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-document'\">\r\n              <lib-custom-document-viewer [pageProvider]=\"customPageProvider\" [group]=\"group\"></lib-custom-document-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'department'\">\r\n              <cts-department-viewer\r\n              [noStyle]=\"true\"\r\n              [value]=\"group.key\"\r\n            >\r\n            </cts-department-viewer>\r\n            <!-- {{group.key}} -->\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-department'\">\r\n              {{isArabic ? group.fetchedKey.properties[config.propertyAr] : group.fetchedKey.properties[config.propertyEn]}}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'string'\">\r\n              <span>{{group.key}}</span>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi></mat-checkbox\r\n        >\r\n      </div>\r\n    </ng-container>\r\n    <div *ngIf=\"filters.length > 5\" class=\"more\">\r\n      <button class=\"btn-more\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"filters && componentType == 'colorsCodes'\">\r\n    <div class=\"flex flex-wrap colorsContainer\">\r\n      <ng-container *ngFor=\"let group of filters; index as i\">\r\n          <div *ngIf=\"i < 24 || more\" class=\"color-search-checkbox flex items-end justify-start\" [style.backgroundColor]=\"group.key\"\r\n          matTooltip=\"{{'search.colorInOtherPhotos' | translate :{num:group.docCount} }}\" [matTooltipPosition]=\"'above'\" \r\n          (click)=\"onFilterSelect(group.key, (_selections.includes(group.key)) ? false : true)\">\r\n            <span class=\"checkIcon bi bi-check\" *ngIf=\"_selections.includes(group.key)\" [ngStyle]=\"{color: (isWhiteOrClosetToWhite(group.key)) ? 'black': 'white'}\"></span>\r\n          </div>\r\n        \r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"filters.length > 20\" class=\"more\">\r\n      <button class=\"btn-more mt-1\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n\r\n  \r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.mx-8{margin-left:8px;margin-right:8px}.aggregation-container{border-bottom:1px solid #b4bac6;padding-bottom:8px}.aggregation-container .search-title{margin-bottom:6px;margin-top:6px;border-bottom-width:2px;font-weight:700;--tw-text-opacity: 1;color:rgba(70,85,115,var(--tw-text-opacity))}.aggregation-container .search-checkbox{display:flex;align-items:center;margin-bottom:.5rem}.aggregation-container .colorsContainer{overflow:visible;width:max-content;max-width:252px;grid-gap:4px;gap:4px}.aggregation-container .color-search-checkbox{width:28px;height:28px;box-shadow:#00000059 3px 5px 10px;transition:all .2s ease-in-out;cursor:pointer;border-radius:10%/50%}.aggregation-container .color-search-checkbox .checkIcon{width:1rem;height:1rem;min-width:1rem;min-height:1rem;font-size:1rem;line-height:1rem;color:#fff}.aggregation-container .color-search-checkbox:hover{transform:scale(1.3)}.aggregation-container .mat-checkbox-ripple .mat-ripple-element,.aggregation-container .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.aggregation-container .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.aggregation-container mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.aggregation-container mat-checkbox .mat-checkbox-inner-container{transform:scale(1.1)}.aggregation-container .justify-items-center{justify-items:center}.aggregation-container .more{display:flex;justify-content:center}.aggregation-container .btn-more{border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgba(217,220,226,var(--tw-border-opacity));background:none;border:none;margin:0;padding:0;color:#00f}.rtl mat-checkbox .mat-checkbox-inner-container{margin-right:0!important;margin-left:8px!important}\n"], components: [{ type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: CutomeVocViewerComponent, selector: "lib-cutome-voc-viewer", inputs: ["type", "group"] }, { type: CustomPpViewerComponent, selector: "lib-custom-pp-viewer", inputs: ["pageProvider", "group", "config"] }, { type: CustomDocumentViewerComponent, selector: "lib-custom-document-viewer", inputs: ["pageProvider", "group"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFilterComponent, selector: "cts-dynamic-filter", inputs: { title: "title", filters: "filters", selections: "selections", id: "id", entityType: "entityType", prefix: "prefix", department: "department", componentType: "componentType", customPageProvider: "customPageProvider", config: "config" }, outputs: { onFilterSelected: "onFilterSelected" }, ngImport: i0, template: "<div class=\"aggregation-container\">\r\n  <div class=\"search-title\">\r\n    {{ prefix + \".\" + title | translate }}\r\n  </div>\r\n  <ng-container *ngIf=\"filters && componentType != 'colorsCodes'\">\r\n    <ng-container *ngFor=\"let group of filters; index as i\">\r\n      <div *ngIf=\"i < 5 || more\" class=\"search-checkbox\">\r\n        <!-- <input\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          type=\"checkbox\"\r\n          (change)=\"onFilterSelect(group.key, $event.target.checked)\"\r\n        /> -->\r\n        <!-- <div class=\"mx-8\">\r\n          <span [ngSwitch]=\"EntityType(group.fetchedKey)\">\r\n            <span *ngSwitchCase=\"'directoryEntry'\">\r\n              {{\r\n                \"vocabulary.\" + group.fetchedKey.directoryName + \".\" + group.key\r\n                  | translate\r\n              }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.fetchedKey.properties.firstName +\r\n                  \" \" +\r\n                  group.fetchedKey.properties.lastName\r\n              }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi>\r\n        </div> -->\r\n        <mat-checkbox\r\n          [checked]=\"_selections.includes(group.key)\"\r\n          (change)=\"onFilterSelect(group.key, $event.checked)\"\r\n        >\r\n          <span [ngSwitch]=\"componentType\" class=\"aggregation-label\">\r\n\r\n            <span *ngSwitchCase=\"'custom-voc'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'vocabulary'\">\r\n              <lib-cutome-voc-viewer [type]=\"componentType\" [group]=\"group\"></lib-cutome-voc-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'user'\">\r\n              {{\r\n                group.key === 'system' ? ('SYSTEM_ADMIN' | translate) : (group.fetchedKey.properties.firstName + \" \" + group.fetchedKey.properties.lastName)\r\n              }}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-pp'\">\r\n              <lib-custom-pp-viewer [pageProvider]=\"customPageProvider\" [config]=\"config\" [group]=\"group\"></lib-custom-pp-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-document'\">\r\n              <lib-custom-document-viewer [pageProvider]=\"customPageProvider\" [group]=\"group\"></lib-custom-document-viewer>\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'department'\">\r\n              <cts-department-viewer\r\n              [noStyle]=\"true\"\r\n              [value]=\"group.key\"\r\n            >\r\n            </cts-department-viewer>\r\n            <!-- {{group.key}} -->\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'custom-department'\">\r\n              {{isArabic ? group.fetchedKey.properties[config.propertyAr] : group.fetchedKey.properties[config.propertyEn]}}\r\n            </span>\r\n\r\n            <span *ngSwitchCase=\"'string'\">\r\n              <span>{{group.key}}</span>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ prefix + \".\" + \"buckets.\" + group.key | translate }}\r\n            </span>\r\n          </span>\r\n          <bdi>({{ group.docCount }})</bdi></mat-checkbox\r\n        >\r\n      </div>\r\n    </ng-container>\r\n    <div *ngIf=\"filters.length > 5\" class=\"more\">\r\n      <button class=\"btn-more\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"filters && componentType == 'colorsCodes'\">\r\n    <div class=\"flex flex-wrap colorsContainer\">\r\n      <ng-container *ngFor=\"let group of filters; index as i\">\r\n          <div *ngIf=\"i < 24 || more\" class=\"color-search-checkbox flex items-end justify-start\" [style.backgroundColor]=\"group.key\"\r\n          matTooltip=\"{{'search.colorInOtherPhotos' | translate :{num:group.docCount} }}\" [matTooltipPosition]=\"'above'\" \r\n          (click)=\"onFilterSelect(group.key, (_selections.includes(group.key)) ? false : true)\">\r\n            <span class=\"checkIcon bi bi-check\" *ngIf=\"_selections.includes(group.key)\" [ngStyle]=\"{color: (isWhiteOrClosetToWhite(group.key)) ? 'black': 'white'}\"></span>\r\n          </div>\r\n        \r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"filters.length > 20\" class=\"more\">\r\n      <button class=\"btn-more mt-1\" (click)=\"more = !more\">\r\n        {{\r\n          more\r\n            ? (prefix + \".\" + \"viewless\" | translate)\r\n            : (prefix + \".\" + \"viewmore\" | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n\r\n  \r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.mx-8{margin-left:8px;margin-right:8px}.aggregation-container{border-bottom:1px solid #b4bac6;padding-bottom:8px}.aggregation-container .search-title{margin-bottom:6px;margin-top:6px;border-bottom-width:2px;font-weight:700;--tw-text-opacity: 1;color:rgba(70,85,115,var(--tw-text-opacity))}.aggregation-container .search-checkbox{display:flex;align-items:center;margin-bottom:.5rem}.aggregation-container .colorsContainer{overflow:visible;width:max-content;max-width:252px;grid-gap:4px;gap:4px}.aggregation-container .color-search-checkbox{width:28px;height:28px;box-shadow:#00000059 3px 5px 10px;transition:all .2s ease-in-out;cursor:pointer;border-radius:10%/50%}.aggregation-container .color-search-checkbox .checkIcon{width:1rem;height:1rem;min-width:1rem;min-height:1rem;font-size:1rem;line-height:1rem;color:#fff}.aggregation-container .color-search-checkbox:hover{transform:scale(1.3)}.aggregation-container .mat-checkbox-ripple .mat-ripple-element,.aggregation-container .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.aggregation-container .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.aggregation-container mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.aggregation-container mat-checkbox .mat-checkbox-inner-container{transform:scale(1.1)}.aggregation-container .justify-items-center{justify-items:center}.aggregation-container .more{display:flex;justify-content:center}.aggregation-container .btn-more{border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgba(217,220,226,var(--tw-border-opacity));background:none;border:none;margin:0;padding:0;color:#00f}.rtl mat-checkbox .mat-checkbox-inner-container{margin-right:0!important;margin-left:8px!important}\n"], components: [{ type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: CutomeVocViewerComponent, selector: "lib-cutome-voc-viewer", inputs: ["type", "group"] }, { type: CustomPpViewerComponent, selector: "lib-custom-pp-viewer", inputs: ["pageProvider", "group", "config"] }, { type: CustomDocumentViewerComponent, selector: "lib-custom-document-viewer", inputs: ["pageProvider", "group"] }, { type: DepartmentViewerComponent, selector: "cts-department-viewer", inputs: ["label", "value", "dropdownId", "vertical", "withOutLabel", "noStyle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -12953,7 +12949,7 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableComponent, deps: [{ token: NuxeoService }, { token: AppConfigService }, { token: TranslationService }], 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", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, ngImport: i0, template: "<div class=\"iner-table-container\" [style]=\"'width:' + tableWidth\" *ngIf=\"tableMode === 'list' && !responsiveView\">\r\n  <ngx-datatable\r\n    [ngClass]=\"{'overflowVisible': customFirstRow}\"\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [summaryRow]=\"customFirstRow\"\r\n    [columnMode]=\"'force'\"\r\n    [externalSorting]=\"true\"\r\n    (activate)=\"rowDetails($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    (sort)=\"onSort($event)\"\r\n    (window:resize)=\"assignTableColumns($event)\"\r\n    [rowHeight]=\"'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n  >\r\n\r\n  <ngx-datatable-column\r\n  *ngIf=\"multiSelectRows\"\r\n  [width]=\"30\"\r\n  [sortable]=\"false\"\r\n  [prop]=\"''\"\r\n  [canAutoResize]=\"false\"\r\n  [draggable]=\"false\"\r\n  [resizeable]=\"false\"\r\n>\r\n  <ng-template\r\n    ngx-datatable-header-template\r\n    let-value=\"value\"\r\n    let-allRowsSelected=\"allRowsSelected\"\r\n    let-selectFn=\"selectFn\"\r\n  >\r\n    <!-- <input class=\"checkbox-input\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\" /> -->\r\n    <mat-checkbox color=\"primary\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\">\r\n  </mat-checkbox>\r\n  </ng-template>\r\n  <ng-template\r\n    ngx-datatable-cell-template\r\n    let-value=\"value\"\r\n    let-isSelected=\"isSelected\"\r\n    let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n  >\r\n    <!-- <input class=\"checkbox-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" /> -->\r\n    <mat-checkbox color=\"primary\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn(!allRowsSelected)\">\r\n    </mat-checkbox>\r\n  </ng-template>\r\n</ngx-datatable-column>\r\n    <!-- | translate -->\r\n    <ng-container *ngFor=\"let column of tableColumns; let i = index\">\r\n      <ng-container *permission=\"{name: column.permission}\">\r\n        <ngx-datatable-column *ngIf=\"column.display\" [sortable]=\"column.sortable\"\r\n          [name]=\"prefix + column.name | translate\" [prop]=\"column.prop\" [resizeable]=\"false\" [draggable]=\"false\"\r\n          [maxWidth]=\"column.size\" [headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n          [summaryTemplate]=\"(customFirstRow) ? customRowTemplate : null\">\r\n          <ng-template let-row=\"row\" let-value=\"value\" let-index=\"index\" ngx-datatable-cell-template>\r\n            <ng-container *ngIf=\"column.type === 'text'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                {{ value ? value : \"--\" }}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                <cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"value\" [dropdownId]=\"column.vocabularyId\">\r\n                </cts-dropdown-viewer>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                {{ (value ? column.vocabularyId + '.' + value : \"--\") | translate }}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                {{ vocItemTranslationPrefix + value | translate }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"column.type === 'department'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                <cts-department-viewer [noStyle]=\"true\" [value]=\"value\">\r\n                </cts-department-viewer>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'status'\">\r\n              <div class=\"status-wrapper\">\r\n                <span class=\"value {{ value }}\">\r\n                  <span *ngIf=\"statusIcons && statusIcons !== {}\" class=\"status-icon {{statusIcons[value]}}\"></span>\r\n                  {{\"STATS.\" + value | translate }}\r\n                </span>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'role'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                {{ \"role.\" + (value ? value : \"--\") | translate }}\r\n              </div>\r\n            </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n            <div [ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\" *ngIf=\"!showActionsAsMenu\">\r\n              <!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n              <i\r\n                class=\"bi bi-pencil-square edit-icon\"\r\n                matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n                (click)=\"performAction(row, 'edit')\"\r\n                *ngIf=\"entityType === 'voc-table'\"\r\n              ></i>\r\n              <i\r\n                class=\"bi bi-trash\"\r\n                matTooltip=\"{{ 'delete' | translate }}\"\r\n                (click)=\"performAction(row, 'delete')\"\r\n                *ngIf=\"\r\n                  entityType === 'voc-table' || entityType === 'department' ||\r\n                  entityType === 'signers'\r\n                \"></i>\r\n\r\n                <i class=\"bi bi-plus-square\" matTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n                  (click)=\"performAction(row, 'delete')\" *ngIf=\"entityType === 'users' && row.isInitial\"></i>\r\n\r\n                <span *ngFor=\"let action of column.actions\">\r\n                  <i *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n                    class=\"{{ action.icon }}\" matTooltip=\"{{ action.tooltip | translate }}\"\r\n                    (click)=\"performAction(row, action.actionName)\"></i>\r\n                </span>\r\n\r\n                <!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n              </div>\r\n              <div [ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\" *ngIf=\"showActionsAsMenu\">\r\n                <button class=\"action-menu-trigger\" [matMenuTriggerFor]=\"menu\" [disabled]=\"disabledActions\">\r\n                  <i class=\"bi bi-three-dots-vertical\"></i>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n                  <button mat-menu-item (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\">\r\n                    <i class=\"bi bi-pencil-square edit-icon\"></i>\r\n                    <span class=\"action-text\">{{ 'UPDATE' | translate }}</span>\r\n                  </button>\r\n                  <button mat-menu-item (click)=\"performAction(row, 'delete')\" *ngIf=\"\r\n                  entityType === 'voc-table' || entityType === 'department' ||\r\n                  entityType === 'signers'\r\n                \">\r\n                    <i class=\"bi bi-trash\"></i>\r\n                    <span class=\"action-text\">{{ 'delete' | translate }}</span>\r\n                  </button>\r\n                  <button mat-menu-item (click)=\"performAction(row, 'delete')\" *ngIf=\"entityType === 'users' && row.isInitial\">\r\n                    <i class=\"bi bi-plus-square\"></i>\r\n                    <span class=\"action-text\">{{ 'USER_MANGMENT.addToDepartment' | translate }}</span>\r\n                  </button>\r\n                  <ng-conttainer *ngFor=\"let action of column.actions\">\r\n                    <button (click)=\"performAction(row, action.actionName)\" *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n                      <i class=\"{{ action.icon }}\"></i>\r\n                      <span class=\"action-text\">{{ action.tooltip | translate }}</span>\r\n                    </button>\r\n                  </ng-conttainer>\r\n                </mat-menu>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'date'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                <cts-date-viewer [withOutLabel]=\"true\" [value]=\"value\"></cts-date-viewer>\r\n              </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"column.type === 'custom'\">\r\n              <cts-dynamic-column [id]=\"column.template\" [column]=\"column\" [context]=\"row\">\r\n              </cts-dynamic-column>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'direction'\">\r\n              <div\r\n                (click)=\"iconSelected($event, row)\"\r\n                class=\"status-wrapper {{ value }} {{ row.state }}\"\r\n              >\r\n                <span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n                  <ng-container *permission=\"{ name: 'isFavorite', entity: row }\" >\r\n                    <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                  </ng-container>\r\n                  <i\r\n                    class=\"{{directionIcons ? directionIcons['incoming'] : 'bi bi-box-arrow-down'}}\"\r\n                    *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                  ></i>\r\n                  <i\r\n                    class=\"{{directionIcons ? directionIcons['outgoing'] : 'bi bi-box-arrow-up outgoing'}}\"\r\n                    *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                  ></i>\r\n                  <i\r\n                    class=\"{{directionIcons ? directionIcons['internal'] : 'bi bi-box-arrow-right internal'}}\"\r\n                    *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                  ></i>\r\n                </span>\r\n                <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n              </div>\r\n            </ng-container>\r\n            \r\n          </ng-template>\r\n          <ng-template #customRowTemplate let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n            <div class=\"w-full flex items-center justify-center overflow-visible\">\r\n              <cts-dynamic-column [id]=\"column.custom1stCellTemplate\" [column]=\"column\" [context]=\"row\">\r\n              </cts-dynamic-column>\r\n            </div>\r\n          </ng-template>\r\n        </ngx-datatable-column>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"responsiveView && tableMode !== 'card'\" (window:resize)=\"assignTableColumns($event)\">\r\n  <div class=\"dynamic-cards-container\">\r\n    <div class=\"single-card\" [ngClass]=\"{'selected-card': highlightSelectedCard && row?.isSelected}\"\r\n      *ngFor=\"let row of rows\">\r\n      <div class=\"memo-title\">\r\n        <span>\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <!-- <div *ngIf=\"property.type === 'actions' && rows.length !== 0\" class=\"actions-wrapper\">\r\n            <i class=\"bi bi-pencil-square edit-icon\" matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n              (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\"></i>\r\n            <i class=\"bi bi-trash\" matTooltip=\"{{ 'delete' | translate }}\" (click)=\"performAction(row, 'delete')\"\r\n              *ngIf=\"\r\n                entityType === 'voc-table' || entityType === 'department' ||\r\n                entityType === 'signers'\r\n              \"></i>\r\n\r\n            <i class=\"bi bi-plus-square\" matTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n              (click)=\"performAction(row, 'delete')\" *ngIf=\"entityType === 'users' && row.isInitial\"></i>\r\n\r\n            <span *ngFor=\"let action of property.actions\">\r\n              <i *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n                class=\"{{ action.icon }}\" matTooltip=\"{{ action.tooltip | translate }}\"\r\n                (click)=\"performAction(row, action.actionName)\"></i>\r\n            </span>\r\n          </div> -->\r\n          <span  class=\"action\"  *ngFor=\"let action of tableActions\">\r\n            <i *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n              class=\"{{ action.icon }}\" matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"></i>\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div class=\"memo-body\" *ngFor=\"let property of tableColumns\" (click)=\"cardSelected(row)\">\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n              {{ row.properties[property.value]}}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'owner'\">\r\n              {{ row.properties[property.owner]?.[property.value] }}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n              {{ row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US') }}\r\n              <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n            </div>\r\n            <div *ngIf=\"property.type === 'status'\" class=\"value {{ row[property.value]}}\">{{\r\n              \"STATS.\" + row[property.value] | translate\r\n              }}</div>\r\n            <div *ngIf=\"property.type === 'vocabulary'\" class=\"cell-text-wrapper\">\r\n              <cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\"\r\n                [dropdownId]=\"property.vocabularyId\">\r\n              </cts-dropdown-viewer>\r\n            </div>\r\n            <div *ngIf=\"property.type === 'direction'\" (click)=\"iconSelected($event, row)\"\r\n              class=\"status-wrapper {{ property.value }} {{ row.state }}\">\r\n              <span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n                <ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n                  <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                </ng-container>\r\n                <i class=\"bi bi-box-arrow-down\" *ngIf=\"row.type === 'IncomingCorrespondence'\"></i>\r\n                <i class=\"bi bi-box-arrow-up outgoing\" *ngIf=\"row.type === 'OutgoingCorrespondence'\"></i>\r\n                <i class=\"bi bi-box-arrow-right internal\" *ngIf=\"row.type === 'InternalCorrespondence'\"></i>\r\n              </span>\r\n            </div>\r\n            <div *ngIf=\"property.type === 'custom'\">\r\n              <cts-dynamic-column [id]=\"property.template\" [column]=\"property\" [context]=\"row\">\r\n              </cts-dynamic-column>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"iner-card-container {{entityType}}\" (click)=\"cardSelected(row)\" *ngIf=\"tableColumns.length === 1\">\r\n      <cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\">\r\n      </cts-dynamic-column>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'card'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n      <div class=\"memo-title\">\r\n        <span>\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n              class=\"{{ action.icon }}\" matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"></i>\r\n          </span>\r\n          <button *permission=\"{ name: 'deleteMemo', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n            (click)=\"performAction(row, 'deleteMemo')\">\r\n            <i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"></i>\r\n          </button>\r\n          <button *permission=\"{ name: 'terminateDelegation', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n            (click)=\"performAction(row, 'terminateDelegation')\">\r\n            <i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"></i>\r\n          </button>\r\n          <span class=\"publish-state\"\r\n            *permission=\"{ name: 'memoPublished', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationFinished', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n          <span class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationActive', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ \"delegations.active\" | translate }}\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div class=\"memo-body\" *ngFor=\"let property of columns\" (click)=\"cardSelected(row);cardFocused(i)\">\r\n        <div class=\"key\" *ngIf=\"property.type !== 'default'\">{{ prefix + property.key | translate }}</div>\r\n        <ng-container *ngIf=\"property.type === 'default'\">\r\n          <div class=\"key\"\r\n            *permission=\"{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ prefix + property.key | translate }}\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"value\">\r\n          <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n            {{ row.properties[property.value] }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n            {{ row.properties[property.value].fullName }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n            {{row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}\r\n            <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n            {{ (row.properties[property.value] ? 'Yes':'No') | translate }}\r\n          </div>\r\n          <ng-container *ngIf=\"property.type === 'default'\">\r\n            <div class=\"text\"\r\n              *permission=\"{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"property.type === 'custom'\">\r\n            <div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n              {{ item | translate }} {{\", \" }}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'dynamicCard'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" [ngClass]=\"{'selected-card': highlightSelectedCard && row?.isSelected}\"\r\n      *ngFor=\"let row of rows\">\r\n      <div *ngIf=\"columns.length > 1\">\r\n        <div class=\"memo-body\" *ngFor=\"let property of columns\" (click)=\"cardSelected(row)\">\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n              {{ row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US') }}\r\n              <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"iner-card-container {{entityType}}\" (click)=\"cardSelected(row)\" *ngIf=\"columns.length === 1\">\r\n        <cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\">\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;width:100%!important;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{width:100%!important;height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{width:100%!important;display:flex;justify-content:space-between;align-items:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:5px 5px 0;width:16px;height:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:\"\\f127\";display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:normal!important;font-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{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{width:100%!important;display:flex;justify-content:space-between;padding:0 20px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.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;width:24%}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:#fff;width:51%}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:#fff;width:51%}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:#fff;width:40%}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:#fff;width:31%}.dynamic-cards-container .single-card .memo-body .approved{background-color:#06a57e;color:#fff;width:43%}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:#fff;width:43%}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:#fff;width:23%}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;width:65%}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:#fff;width:37%}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:#fff;width:51%}.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}\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: i7$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"] }], 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: i2$2.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: { "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", tableActions: "tableActions", format: "format", defultSort: "defultSort", highlightSelectedCard: "highlightSelectedCard", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", showActionsAsMenu: "showActionsAsMenu" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", onIconSelected: "onIconSelected", actionOnRow: "actionOnRow", onSorting: "onSorting", onMultiRowSelected: "onMultiRowSelected" }, ngImport: i0, template: "<div class=\"iner-table-container\" [style]=\"'width:' + tableWidth\" *ngIf=\"tableMode === 'list' && !responsiveView\">\r\n  <ngx-datatable\r\n    [ngClass]=\"{'overflowVisible': customFirstRow}\"\r\n    class=\"large-table\"\r\n    [rows]=\"rows\"\r\n    [summaryRow]=\"customFirstRow\"\r\n    [columnMode]=\"'force'\"\r\n    [externalSorting]=\"true\"\r\n    (activate)=\"rowDetails($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    (sort)=\"onSort($event)\"\r\n    (window:resize)=\"assignTableColumns($event)\"\r\n    [rowHeight]=\"'auto'\"\r\n    [selected]=\"selected\"\r\n    [selectionType]=\"multiSelectRows ? 'checkbox' : 'single'\"\r\n    [sorts]=\"[{ prop: defultSort?.name, dir: defultSort?.dir }]\"\r\n  >\r\n\r\n  <ngx-datatable-column\r\n  *ngIf=\"multiSelectRows\"\r\n  [width]=\"30\"\r\n  [sortable]=\"false\"\r\n  [prop]=\"''\"\r\n  [canAutoResize]=\"false\"\r\n  [draggable]=\"false\"\r\n  [resizeable]=\"false\"\r\n>\r\n  <ng-template\r\n    ngx-datatable-header-template\r\n    let-value=\"value\"\r\n    let-allRowsSelected=\"allRowsSelected\"\r\n    let-selectFn=\"selectFn\"\r\n  >\r\n    <!-- <input class=\"checkbox-input\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\" /> -->\r\n    <mat-checkbox color=\"primary\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\">\r\n  </mat-checkbox>\r\n  </ng-template>\r\n  <ng-template\r\n    ngx-datatable-cell-template\r\n    let-value=\"value\"\r\n    let-isSelected=\"isSelected\"\r\n    let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n  >\r\n    <!-- <input class=\"checkbox-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" /> -->\r\n    <mat-checkbox color=\"primary\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn(!allRowsSelected)\">\r\n    </mat-checkbox>\r\n  </ng-template>\r\n</ngx-datatable-column>\r\n    <!-- | translate -->\r\n    <ng-container *ngFor=\"let column of tableColumns; let i = index\">\r\n      <ng-container *permission=\"{name: column.permission}\">\r\n        <ngx-datatable-column *ngIf=\"column.display\" [sortable]=\"column.sortable\"\r\n          [name]=\"prefix + column.name | translate\" [prop]=\"column.prop\" [resizeable]=\"false\" [draggable]=\"false\"\r\n          [maxWidth]=\"column.size\" [headerClass]=\"column.headerClass ? column.headerClass : ''\"\r\n          [summaryTemplate]=\"(customFirstRow) ? customRowTemplate : null\">\r\n          <ng-template let-row=\"row\" let-value=\"value\" let-index=\"index\" ngx-datatable-cell-template>\r\n            <ng-container *ngIf=\"column.type === 'text'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                {{ value ? value : \"--\" }}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'vocabulary'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                <cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"value\" [dropdownId]=\"column.vocabularyId\">\r\n                </cts-dropdown-viewer>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'VocCell'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                {{ (value ? column.vocabularyId + '.' + value : \"--\") | translate }}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'VocItem'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                {{ vocItemTranslationPrefix + value | translate }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"column.type === 'department'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                <cts-department-viewer [noStyle]=\"true\" [value]=\"value\">\r\n                </cts-department-viewer>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'status'\">\r\n              <div class=\"status-wrapper\">\r\n                <span class=\"value {{ value }}\">\r\n                  <span *ngIf=\"statusIcons && statusIcons !== {}\" class=\"status-icon {{statusIcons[value]}}\"></span>\r\n                  {{\"STATS.\" + value | translate }}\r\n                </span>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'role'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                {{ \"role.\" + (value ? value : \"--\") | translate }}\r\n              </div>\r\n            </ng-container>\r\n\r\n          <ng-container *ngIf=\"column.type === 'actions' && rows.length !== 0\">\r\n            <div [ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\" *ngIf=\"!showActionsAsMenu\">\r\n              <!-- <span class=\"bi bi-trash delete-icon\" (click)=\"performAction(row , 'delete')\"></span> -->\r\n              <i\r\n                class=\"bi bi-pencil-square edit-icon\"\r\n                matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n                (click)=\"performAction(row, 'edit')\"\r\n                *ngIf=\"entityType === 'voc-table'\"\r\n              ></i>\r\n              <i\r\n                class=\"bi bi-trash\"\r\n                matTooltip=\"{{ 'delete' | translate }}\"\r\n                (click)=\"performAction(row, 'delete')\"\r\n                *ngIf=\"\r\n                  entityType === 'voc-table' || entityType === 'department' ||\r\n                  entityType === 'signers'\r\n                \"></i>\r\n\r\n                <i class=\"bi bi-plus-square\" matTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n                  (click)=\"performAction(row, 'delete')\" *ngIf=\"entityType === 'users' && row.isInitial\"></i>\r\n\r\n                <span *ngFor=\"let action of column.actions\">\r\n                  <i *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n                    class=\"{{ action.icon }}\" matTooltip=\"{{ action.tooltip | translate }}\"\r\n                    (click)=\"performAction(row, action.actionName)\"></i>\r\n                </span>\r\n\r\n                <!-- <i\r\n                *permission=\"{ name: 'registerCorrespondance', entity: row }\"\r\n                class=\"bi bi-box-arrow-in-right\"\r\n                matTooltip=\"{{ 'LISTING.REGISTER' | translate }}\"\r\n                (click)=\"performAction(row, 'register')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'sendCorrespondance', entity: row }\"\r\n                class=\"bi bi-envelope\"\r\n                matTooltip=\"{{ 'LISTING.SEND' | translate }}\"\r\n                (click)=\"performAction(row, 'send')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'closeCorrespondance', entity: row }\"\r\n                class=\"bi bi-x-circle\"\r\n                matTooltip=\"{{ 'LISTING.CLOSE' | translate }}\"\r\n                (click)=\"performAction(row, 'close')\"\r\n              ></i>\r\n              <i\r\n                *permission=\"{ name: 'archiveCorrespondance', entity: row }\"\r\n                class=\"bi bi-folder-symlink\"\r\n                matTooltip=\"{{ 'LISTING.ARCHIVE' | translate }}\"\r\n                (click)=\"performAction(row, 'archive')\"\r\n              ></i> -->\r\n              </div>\r\n              <div [ngClass]=\"disabledActions ? 'disabled-actions-wrapper' : 'actions-wrapper'\" *ngIf=\"showActionsAsMenu\">\r\n                <button class=\"action-menu-trigger\" [matMenuTriggerFor]=\"menu\" [disabled]=\"disabledActions\">\r\n                  <i class=\"bi bi-three-dots-vertical\"></i>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\" class=\"datatable-actions-menu\">\r\n                  <button mat-menu-item (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\">\r\n                    <i class=\"bi bi-pencil-square edit-icon\"></i>\r\n                    <span class=\"action-text\">{{ 'UPDATE' | translate }}</span>\r\n                  </button>\r\n                  <button mat-menu-item (click)=\"performAction(row, 'delete')\" *ngIf=\"\r\n                  entityType === 'voc-table' || entityType === 'department' ||\r\n                  entityType === 'signers'\r\n                \">\r\n                    <i class=\"bi bi-trash\"></i>\r\n                    <span class=\"action-text\">{{ 'delete' | translate }}</span>\r\n                  </button>\r\n                  <button mat-menu-item (click)=\"performAction(row, 'delete')\" *ngIf=\"entityType === 'users' && row.isInitial\">\r\n                    <i class=\"bi bi-plus-square\"></i>\r\n                    <span class=\"action-text\">{{ 'USER_MANGMENT.addToDepartment' | translate }}</span>\r\n                  </button>\r\n                  <ng-conttainer *ngFor=\"let action of column.actions\">\r\n                    <button (click)=\"performAction(row, action.actionName)\" *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n                      <i class=\"{{ action.icon }}\"></i>\r\n                      <span class=\"action-text\">{{ action.tooltip | translate }}</span>\r\n                    </button>\r\n                  </ng-conttainer>\r\n                </mat-menu>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'date'\">\r\n              <div class=\"cell-text-wrapper\">\r\n                <cts-date-viewer [withOutLabel]=\"true\" [value]=\"value\"></cts-date-viewer>\r\n              </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"column.type === 'custom'\">\r\n              <cts-dynamic-column [id]=\"column.template\" [column]=\"column\" [context]=\"row\">\r\n              </cts-dynamic-column>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"column.type === 'direction'\">\r\n              <div\r\n                (click)=\"iconSelected($event, row)\"\r\n                class=\"status-wrapper {{ value }} {{ row.state }}\"\r\n              >\r\n                <span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n                  <ng-container *permission=\"{ name: 'isFavorite', entity: row }\" >\r\n                    <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                  </ng-container>\r\n                  <i\r\n                    class=\"{{directionIcons ? directionIcons['incoming'] : 'bi bi-box-arrow-down'}}\"\r\n                    *ngIf=\"row.type === 'IncomingCorrespondence'\"\r\n                  ></i>\r\n                  <i\r\n                    class=\"{{directionIcons ? directionIcons['outgoing'] : 'bi bi-box-arrow-up outgoing'}}\"\r\n                    *ngIf=\"row.type === 'OutgoingCorrespondence'\"\r\n                  ></i>\r\n                  <i\r\n                    class=\"{{directionIcons ? directionIcons['internal'] : 'bi bi-box-arrow-right internal'}}\"\r\n                    *ngIf=\"row.type === 'InternalCorrespondence'\"\r\n                  ></i>\r\n                </span>\r\n                <!-- <span class=\"value {{ value }}\">{{ \"STATS.\" + value | translate }}</span> -->\r\n              </div>\r\n            </ng-container>\r\n            \r\n          </ng-template>\r\n          <ng-template #customRowTemplate let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n            <div class=\"w-full flex items-center justify-center overflow-visible\">\r\n              <cts-dynamic-column [id]=\"column.custom1stCellTemplate\" [column]=\"column\" [context]=\"row\">\r\n              </cts-dynamic-column>\r\n            </div>\r\n          </ng-template>\r\n        </ngx-datatable-column>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ngx-datatable>\r\n</div>\r\n\r\n<div *ngIf=\"responsiveView && tableMode !== 'card'\" (window:resize)=\"assignTableColumns($event)\">\r\n  <div class=\"dynamic-cards-container\">\r\n    <div class=\"single-card\" [ngClass]=\"{'selected-card': highlightSelectedCard && row?.isSelected}\"\r\n      *ngFor=\"let row of rows\">\r\n      <div class=\"memo-title\">\r\n        <span>\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <!-- <div *ngIf=\"property.type === 'actions' && rows.length !== 0\" class=\"actions-wrapper\">\r\n            <i class=\"bi bi-pencil-square edit-icon\" matTooltip=\"{{ 'UPDATE' | translate }}\"\r\n              (click)=\"performAction(row, 'edit')\" *ngIf=\"entityType === 'voc-table'\"></i>\r\n            <i class=\"bi bi-trash\" matTooltip=\"{{ 'delete' | translate }}\" (click)=\"performAction(row, 'delete')\"\r\n              *ngIf=\"\r\n                entityType === 'voc-table' || entityType === 'department' ||\r\n                entityType === 'signers'\r\n              \"></i>\r\n\r\n            <i class=\"bi bi-plus-square\" matTooltip=\"{{ 'USER_MANGMENT.addToDepartment' | translate }}\"\r\n              (click)=\"performAction(row, 'delete')\" *ngIf=\"entityType === 'users' && row.isInitial\"></i>\r\n\r\n            <span *ngFor=\"let action of property.actions\">\r\n              <i *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n                class=\"{{ action.icon }}\" matTooltip=\"{{ action.tooltip | translate }}\"\r\n                (click)=\"performAction(row, action.actionName)\"></i>\r\n            </span>\r\n          </div> -->\r\n          <span  class=\"action\"  *ngFor=\"let action of tableActions\">\r\n            <i *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n              class=\"{{ action.icon }}\" matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"></i>\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div *ngIf=\"tableColumns.length > 1\">\r\n        <div class=\"memo-body\" *ngFor=\"let property of tableColumns\" (click)=\"cardSelected(row)\">\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n              {{ row.properties[property.value]}}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'owner'\">\r\n              {{ row.properties[property.owner]?.[property.value] }}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n              {{ row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US') }}\r\n              <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n            </div>\r\n            <div *ngIf=\"property.type === 'status'\" class=\"value {{ row[property.value]}}\">{{\r\n              \"STATS.\" + row[property.value] | translate\r\n              }}</div>\r\n            <div *ngIf=\"property.type === 'vocabulary'\" class=\"cell-text-wrapper\">\r\n              <cts-dropdown-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\"\r\n                [dropdownId]=\"property.vocabularyId\">\r\n              </cts-dropdown-viewer>\r\n            </div>\r\n            <div *ngIf=\"property.type === 'direction'\" (click)=\"iconSelected($event, row)\"\r\n              class=\"status-wrapper {{ property.value }} {{ row.state }}\">\r\n              <span class=\"iner-status-wrapper\" matTooltip=\"{{ 'STATS.' + row.state | translate }}\">\r\n                <ng-container *permission=\"{ name: 'isFavorite', entity: row }\">\r\n                  <span class=\"fav-icon-indicator bi bi-star-fill\"></span>\r\n                </ng-container>\r\n                <i class=\"bi bi-box-arrow-down\" *ngIf=\"row.type === 'IncomingCorrespondence'\"></i>\r\n                <i class=\"bi bi-box-arrow-up outgoing\" *ngIf=\"row.type === 'OutgoingCorrespondence'\"></i>\r\n                <i class=\"bi bi-box-arrow-right internal\" *ngIf=\"row.type === 'InternalCorrespondence'\"></i>\r\n              </span>\r\n            </div>\r\n            <div *ngIf=\"property.type === 'custom'\">\r\n              <cts-dynamic-column [id]=\"property.template\" [column]=\"property\" [context]=\"row\">\r\n              </cts-dynamic-column>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"iner-card-container {{entityType}}\" (click)=\"cardSelected(row)\" *ngIf=\"tableColumns.length === 1\">\r\n      <cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\">\r\n      </cts-dynamic-column>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'card'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" *ngFor=\"let row of rows; let i = index\">\r\n      <div class=\"memo-title\">\r\n        <span>\r\n          {{ row.properties.referenceNumber }}\r\n        </span>\r\n        <span class=\"action-wrap\">\r\n          <span class=\"action\" *ngFor=\"let action of tableActions\">\r\n            <i *permission=\"{ name: action.permission, entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n              class=\"{{ action.icon }}\" matTooltip=\"{{ action.tooltip | translate }}\"\r\n              (click)=\"performAction(row, action.actionName)\"></i>\r\n          </span>\r\n          <button *permission=\"{ name: 'deleteMemo', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n            (click)=\"performAction(row, 'deleteMemo')\">\r\n            <i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.ONLY_DELETE' | translate }}\"></i>\r\n          </button>\r\n          <button *permission=\"{ name: 'terminateDelegation', entity: row , user: nuxeoService.nuxeoClient.user}\"\r\n            (click)=\"performAction(row, 'terminateDelegation')\">\r\n            <i class=\"bi bi-trash\" matTooltip=\"{{ 'LISTING.CANCEL' | translate }}\"></i>\r\n          </button>\r\n          <span class=\"publish-state\"\r\n            *permission=\"{ name: 'memoPublished', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ \"MEMOS.PUBLISHED\" | translate }}\r\n          </span>\r\n          <span class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationFinished', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ \"delegations.finished\" | translate }}\r\n          </span>\r\n          <span class=\"publish-state\"\r\n            *permission=\"{ name: 'delegationActive', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ \"delegations.active\" | translate }}\r\n          </span>\r\n        </span>\r\n      </div>\r\n      <div class=\"memo-body\" *ngFor=\"let property of columns\" (click)=\"cardSelected(row);cardFocused(i)\">\r\n        <div class=\"key\" *ngIf=\"property.type !== 'default'\">{{ prefix + property.key | translate }}</div>\r\n        <ng-container *ngIf=\"property.type === 'default'\">\r\n          <div class=\"key\"\r\n            *permission=\"{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n            {{ prefix + property.key | translate }}\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"value\">\r\n          <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n            {{ row.properties[property.value] }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'user'\">\r\n            {{ row.properties[property.value].fullName }}\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n            {{row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US')}}\r\n            <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n          </div>\r\n          <div class=\"text\" *ngIf=\"property.type === 'boolean'\">\r\n            {{ (row.properties[property.value] ? 'Yes':'No') | translate }}\r\n          </div>\r\n          <ng-container *ngIf=\"property.type === 'default'\">\r\n            <div class=\"text\"\r\n              *permission=\"{ name: 'internalIsEnabled', entity: row , user: nuxeoService.nuxeoClient.user}\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"property.type === 'custom'\">\r\n            <div class=\"text\" *ngFor=\"let item of row.properties[property.value]\">\r\n              {{ item | translate }} {{\", \" }}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"tableMode === 'dynamicCard'\">\r\n  <div class=\"cards-container\">\r\n    <div class=\"single-card\" [ngClass]=\"{'selected-card': highlightSelectedCard && row?.isSelected}\"\r\n      *ngFor=\"let row of rows\">\r\n      <div *ngIf=\"columns.length > 1\">\r\n        <div class=\"memo-body\" *ngFor=\"let property of columns\" (click)=\"cardSelected(row)\">\r\n          <div class=\"key\">{{ prefix + property.key | translate }}</div>\r\n          <div class=\"value\">\r\n            <div class=\"text\" *ngIf=\"property.type === 'text'\">\r\n              {{ row.properties[property.value] }}\r\n            </div>\r\n            <div class=\"text\" *ngIf=\"property.type === 'date'\">\r\n              {{ row.properties[property.value] | localizedDate:format:(isArabic? 'ar-AR' : 'en-US') }}\r\n              <!-- <cts-date-viewer [withOutLabel]=\"true\" [value]=\"row.properties[property.value]\" ></cts-date-viewer> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"iner-card-container {{entityType}}\" (click)=\"cardSelected(row)\" *ngIf=\"columns.length === 1\">\r\n        <cts-dynamic-column [id]=\"columns[0].template\" [column]=\"columns[0]\" [context]=\"row\">\r\n        </cts-dynamic-column>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.ngx-datatable{border:1px solid #eef1f5;border-radius:5px}.ngx-datatable .datatable-header{font-weight:bold;width:100%!important;height:50px!important;background-color:#eef1f5;color:#9aa4ac;font-size:14px}.ngx-datatable .datatable-header .datatable-header-inner{width:100%!important;height:100%;padding:0 20px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center{width:100%!important;display:flex;justify-content:space-between;align-items:center}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn{margin:5px 5px 0;width:16px;height:16px}.ngx-datatable .datatable-header .datatable-header-inner .datatable-row-center .datatable-header-cell .sort-btn:before{content:\"\\f127\";display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:normal!important;font-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{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{width:100%!important;display:flex;justify-content:space-between;padding:0 20px}.ngx-datatable .datatable-body .datatable-scroll .datatable-row-wrapper .datatable-body-row .datatable-row-center .datatable-body-cell,.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;width:24%}.dynamic-cards-container .single-card .memo-body .inProgress{background-color:#3c3cf0;color:#fff;width:51%}.dynamic-cards-container .single-card .memo-body .registered{background-color:#5a1496;color:#fff;width:51%}.dynamic-cards-container .single-card .memo-body .archived{background-color:#fbb62c;color:#fff;width:40%}.dynamic-cards-container .single-card .memo-body .closed{background-color:#00dca5;color:#fff;width:31%}.dynamic-cards-container .single-card .memo-body .approved{background-color:#06a57e;color:#fff;width:43%}.dynamic-cards-container .single-card .memo-body .assigned{background-color:#fd6670;color:#fff;width:43%}.dynamic-cards-container .single-card .memo-body .sent{background-color:#3c3cf0;color:#fff;width:23%}.dynamic-cards-container .single-card .memo-body .under_revision{background:#689be7;color:#e9f1fd;width:65%}.dynamic-cards-container .single-card .memo-body .rejected{background-color:#fd6670;color:#fff;width:37%}.dynamic-cards-container .single-card .memo-body .under_sign{background-color:#dda722;color:#fff;width:51%}.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}\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: i7$2.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"] }], 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: i2$2.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: { "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: [{
@@ -13737,7 +13733,7 @@ class DynamicSearchComponent {
     }
 }
 DynamicSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicSearchComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i1$4.Router }, { token: EvaluatorsService }, { token: NuxeoService }, { token: GlobalAdminService }, { token: 'environment' }, { token: i5$1.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  <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}.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: i7$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$5.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", "sortingBy", "queryParam", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "format"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading"] }, { type: i1$5.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$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$6.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: i7$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.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  <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}.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: i7$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$5.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", "sortingBy", "queryParam", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "format"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading"] }, { type: i1$5.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$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$6.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: i7$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.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' })),
@@ -14667,12 +14663,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * ></app-documents-list>
  */
 class DocumentsListComponent {
-    constructor(documentsApi, nuxeoApi, toastr, dialog, router) {
+    constructor(documentsApi, nuxeoApi, toastr, dialog, router, nuxeoDialogService) {
         this.documentsApi = documentsApi;
         this.nuxeoApi = nuxeoApi;
         this.toastr = toastr;
         this.dialog = dialog;
         this.router = router;
+        this.nuxeoDialogService = nuxeoDialogService;
         /** Should disable Pagination */
         this.disablePagination = false;
         /** documents or batch items array */
@@ -14732,14 +14729,16 @@ class DocumentsListComponent {
         event.stopPropagation();
         if (this.canDelete) {
             if (!this.batchList) {
-                this.dialog
-                    .open(NdfConfirmationDialogComponent, {
-                    width: '400px',
-                    panelClass: 'relation-confirm-dialog',
-                    data: {
-                        title: 'genericConfirm',
-                        toastrTitle: '',
-                        toastrMsg: 'documents.deleteSuccess'
+                this.nuxeoDialogService
+                    .showConfirm({
+                    message: 'genericConfirm',
+                    actions: {
+                        confirm: {
+                            fn: () => {
+                                return of(true);
+                            },
+                            show: true
+                        }
                     }
                 })
                     .afterClosed()
@@ -14839,7 +14838,7 @@ class DocumentsListComponent {
         this.onDestroy$.complete();
     }
 }
-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$4.Router }], target: i0.ɵɵFactoryTarget.Component });
+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$4.Router }, { token: NuxeoDialogService }], 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: i1$5.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,
@@ -14848,7 +14847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './documents-list.component.html',
                     styleUrls: ['./documents-list.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: DocumentsService }, { type: NuxeoService }, { type: CustomToastrService }, { type: i1$3.MatDialog }, { type: i1$4.Router }]; }, propDecorators: { ancestorId: [{
+        }], ctorParameters: function () { return [{ type: DocumentsService }, { type: NuxeoService }, { type: CustomToastrService }, { type: i1$3.MatDialog }, { type: i1$4.Router }, { type: NuxeoDialogService }]; }, propDecorators: { ancestorId: [{
                 type: Input
             }], provider: [{
                 type: Input
@@ -18828,7 +18827,7 @@ class AddToCollectionComponent extends BaseComponent {
     }
 }
 AddToCollectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddToCollectionComponent, deps: [{ token: FileManagerService }, { token: CustomToastrService }, { token: NuxeoDialogService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-AddToCollectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddToCollectionComponent, selector: "app-add-to-collection", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItems: "selectedItems" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <dx-popup class=\"popUpParent\" [rtlEnabled]=\"rtlEnabled\" id=\"photo-popup\" [width]=\"500\" [height]=\"200\"\r\n    (onShown)=\"loadItems()\" closeOnOutsideClick=\"true\" title=\"{{ '' | translate }}\"\r\n    [(visible)]=\"visible\">\r\n\r\n</dx-popup>\r\n\r\n\r\n -->\r\n<ng-template #contentTemplate>\r\n\t<form>\r\n\t\t<dx-form\r\n\t\t\tclass=\"collection-form-wrapper\"\r\n\t\t\t#createForm\r\n\t\t\t[formData]=\"formData\"\r\n\t\t\t[disabled]=\"loading\"\r\n\t\t>\r\n\t\t\t<dxi-item editorType=\"dxTextBox\">\r\n\t\t\t\t<ng-select\r\n\t\t\t\t\t[items]=\"items$ | async\"\r\n\t\t\t\t\tbindLabel=\"displayLabel\"\r\n\t\t\t\t\t[addTag]=\"true\"\r\n\t\t\t\t\taddTagText=\"Add collection\"\r\n\t\t\t\t\t[multiple]=\"false\"\r\n\t\t\t\t\t[hideSelected]=\"true\"\r\n\t\t\t\t\t[minTermLength]=\"0\"\r\n\t\t\t\t\t[loading]=\"tagsLoading\"\r\n\t\t\t\t\ttypeToSearchText=\"search\"\r\n\t\t\t\t\t[typeahead]=\"tagsInput$\"\r\n\t\t\t\t\t[(ngModel)]=\"selectedTags\"\r\n\t\t\t\t\trequired\r\n\t\t\t\t\tplaceholder=\"{{ 'VOCABULARY.SELECT_ITEM' | translate }}\"\r\n\t\t\t\t\tname=\"selectedItem\"\r\n\t\t\t\t\t(change)=\"emitSelection($event)\"\r\n\t\t\t\t>\r\n\t\t\t\t</ng-select>\r\n\t\t\t</dxi-item>\r\n\t\t</dx-form>\r\n\t</form>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(onFormCollectionSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.ADD' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5$2.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i2$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe } });
+AddToCollectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddToCollectionComponent, selector: "app-add-to-collection", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItems: "selectedItems" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\r\n\t<form>\r\n\t\t<dx-form\r\n\t\t\tclass=\"collection-form-wrapper\"\r\n\t\t\t#createForm\r\n\t\t\t[formData]=\"formData\"\r\n\t\t\t[disabled]=\"loading\"\r\n\t\t>\r\n\t\t\t<dxi-item editorType=\"dxTextBox\">\r\n\t\t\t\t<ng-select\r\n\t\t\t\t\t[items]=\"items$ | async\"\r\n\t\t\t\t\tbindLabel=\"displayLabel\"\r\n\t\t\t\t\t[addTag]=\"true\"\r\n\t\t\t\t\taddTagText=\"Add collection\"\r\n\t\t\t\t\t[multiple]=\"false\"\r\n\t\t\t\t\t[hideSelected]=\"true\"\r\n\t\t\t\t\t[minTermLength]=\"0\"\r\n\t\t\t\t\t[loading]=\"tagsLoading\"\r\n\t\t\t\t\ttypeToSearchText=\"search\"\r\n\t\t\t\t\t[typeahead]=\"tagsInput$\"\r\n\t\t\t\t\t[(ngModel)]=\"selectedTags\"\r\n\t\t\t\t\trequired\r\n\t\t\t\t\tplaceholder=\"{{ 'VOCABULARY.SELECT_ITEM' | translate }}\"\r\n\t\t\t\t\tname=\"selectedItem\"\r\n\t\t\t\t\t(change)=\"emitSelection($event)\"\r\n\t\t\t\t>\r\n\t\t\t\t</ng-select>\r\n\t\t\t</dxi-item>\r\n\t\t</dx-form>\r\n\t</form>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(onFormCollectionSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.ADD' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5$2.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i2$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddToCollectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -19183,7 +19182,7 @@ class ClipboardComponent {
     }
 }
 ClipboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClipboardComponent, deps: [{ token: FileManagerService }, { token: UserService }, { token: CustomToastrService }, { token: UserPreferencesService }], target: i0.ɵɵFactoryTarget.Component });
-ClipboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardItems: "clipboardItems", myCurrecntFolderData: "myCurrecntFolderData", preventedGroups: "preventedGroups", directory: "directory" }, outputs: { onClipboardClose: "onClipboardClose", onRefreshFolderTree: "onRefreshFolderTree" }, ngImport: i0, template: "<div class=\"clipboard-side-section relative\">\r\n\r\n    <div class=\"p-3 h-full\">\r\n        <div class=\"clipboard-header flex justify-between items-center border-b-2\">\r\n            <span class=\"flex text-gray-500 font-bold items-center\">\r\n                <span class=\"text-4xl bi bi-clipboard\"></span>\r\n                <span class=\"mx-2 text-xl\">{{'clipboard' | translate}}</span>\r\n            </span>\r\n            <mat-icon class=\"close-icon text-gray-500 cursor-pointer\" (click)=\"closeClipboard()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <!-- <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"clipboardLoading\">\r\n            {{ \"loading\" | translate }}\r\n        </div> -->\r\n        <div class=\"w-full h-px bg-gray-200 mb-3\" *ngIf=\"clipboardLoading\">\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n        <div class=\"clipboard-content flex flex-col justify-between items-between\">\r\n            <div class=\"h-full flex justify-center items-center text-gray-500\"\r\n                *ngIf=\"clipboardDocments.length === 0\">{{'no_clipboard_items' | translate}}</div>\r\n\r\n            <div class=\"px-2 h-5/6 overflow-y-auto\" *ngIf=\"clipboardDocments.length > 0\">\r\n                <div class=\"border-b-2\" *ngFor=\"let document of clipboardDocments\">\r\n                    <div class=\"py-1 w-82 flex  items-center justify-between\">\r\n                        <div class=\"flex items-center w-5/6\">\r\n                            <mat-checkbox [(ngModel)]=\"document.isSelected\" (change)=\"checking()\"> </mat-checkbox>\r\n                            <div class=\"flex w-full\">\r\n                                <!-- <title-with-icon class=\"w-1/6 -my-1.5\" [context]=\"document\"\r\n                                    [showTitle]=\"false\"></title-with-icon> -->\r\n                            <app-display-suitable-icon class=\"mx-1\" [data]=\"document\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                                <!--  -->\r\n                                <div *ngIf=\"document.isFile === 'File'\"\r\n                                    class=\"justify-center flex flex-col flex-1 flex-grow-0 w-5/6\">\r\n                                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                                        [title]=\"document.properties?.['file:content']?.['name']\"\r\n                                        [alt]=\"document.properties?.['file:content']?.['name']\">\r\n                                        {{document['title']}}\r\n                                    </div>\r\n                                    <div class=\"text-gray-500 text-sm text-nowrap\">\r\n                                        {{((document.properties?.['file:content']?.['length']) / (1024 *\r\n                                        1024)).toFixed(2) }}\r\n                                        MB\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"\r\n                                     d-flex\r\n                                     items-center\r\n                                     text-base text-gray-500\r\n                                     font-bold\r\n                                 \" *ngIf=\"document.isFile === 'Folder'\">\r\n                                    {{ document?.title }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <span [matTooltip]=\"'BUTTONS.REMOVE_CLIPBOARD' | translate\"\r\n                            class=\"cursor-pointer w-5 h-5 rounded-full border-2 flex justify-center items-center border-gray-500 \"\r\n                            (click)=\"deletefromClipboard(document)\">\r\n                            <span class=\"text-gray-500 bi bi-x text-lg flex items-center\"></span>\r\n                        </span>\r\n                    </div>\r\n                    <div class=\"text-md text-gray-500 text-center my-2\">\r\n                        <span *ngIf=\"document.canCopyToTarget && !document.canMoveToTarget\">{{'can_copy_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"!document.canCopyToTarget && document.canMoveToTarget\">{{'can_move_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"document.canCopyToTarget && document.canMoveToTarget\">{{'can_copy_and_move' |\r\n                            translate}}</span>\r\n                        <span\r\n                            *ngIf=\"!document.canCopyToTarget && !document.canMoveToTarget\">{{'can_not_copy_and_move'\r\n                            | translate}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"h-1/6 flex w-full justify-center items-center\">\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableCopy\"\r\n                    (click)=\"copyFromInsideClipboard()\">{{'BUTTONS.COPY' | translate}}</button>\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableMove\"\r\n                    (click)=\"moveFromInsideClipboard()\">{{'BUTTONS.MOVE' | translate}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"bg-transparent absolute top-0 bottom-0 left-0 right-0 \" *ngIf=\"clipboardLoading\">\r\n\r\n    </div>\r\n</div>", styles: [".clipboard-side-section{width:0px;overflow-x:hidden;height:91vh;background-color:#fff;overflow:hidden;border:1px solid lightgray;z-index:999;transition:.1s ease-in-out;border-bottom:none}.clipboard-side-section .clipboard-header{height:60px}.clipboard-side-section .clipboard-content{height:calc(100% - 60px)}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }], directives: [{ type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+ClipboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ClipboardComponent, selector: "lib-clipboard", inputs: { clipboardItems: "clipboardItems", myCurrecntFolderData: "myCurrecntFolderData", preventedGroups: "preventedGroups", directory: "directory" }, outputs: { onClipboardClose: "onClipboardClose", onRefreshFolderTree: "onRefreshFolderTree" }, ngImport: i0, template: "<div class=\"clipboard-side-section relative\">\r\n\r\n    <div class=\"p-3 h-full\">\r\n        <div class=\"clipboard-header flex justify-between items-center border-b-2\">\r\n            <span class=\"flex text-gray-500 font-bold items-center\">\r\n                <span class=\"text-4xl bi bi-clipboard\"></span>\r\n                <span class=\"mx-2 text-xl\">{{'clipboard' | translate}}</span>\r\n            </span>\r\n            <mat-icon class=\"close-icon text-gray-500 cursor-pointer\" (click)=\"closeClipboard()\"\r\n                [matTooltip]=\"'BUTTONS.CLOSE' | translate\">close</mat-icon>\r\n        </div>\r\n        <!-- <div class=\"h-full font-bold d-flex justify-center items-center\" *ngIf=\"clipboardLoading\">\r\n            {{ \"loading\" | translate }}\r\n        </div> -->\r\n        <div class=\"w-full h-px bg-gray-200 mb-3\" *ngIf=\"clipboardLoading\">\r\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n        </div>\r\n        <div class=\"clipboard-content flex flex-col justify-between items-between\">\r\n            <div class=\"h-full flex justify-center items-center text-gray-500\"\r\n                *ngIf=\"clipboardDocments.length === 0\">{{'no_clipboard_items' | translate}}</div>\r\n\r\n            <div class=\"px-2 h-5/6 overflow-y-auto\" *ngIf=\"clipboardDocments.length > 0\">\r\n                <div class=\"border-b-2\" *ngFor=\"let document of clipboardDocments\">\r\n                    <div class=\"py-1 w-82 flex  items-center justify-between\">\r\n                        <div class=\"flex items-center w-5/6\">\r\n                            <mat-checkbox [(ngModel)]=\"document.isSelected\" (change)=\"checking()\"> </mat-checkbox>\r\n                            <div class=\"flex w-full\">\r\n                                <!-- <title-with-icon class=\"w-1/6 -my-1.5\" [context]=\"document\"\r\n                                    [showTitle]=\"false\"></title-with-icon> -->\r\n                            <app-display-suitable-icon class=\"mx-1\" [data]=\"document\" [size]=\"'40px'\"></app-display-suitable-icon>\r\n\r\n                                <!--  -->\r\n                                <div *ngIf=\"document.isFile === 'File'\"\r\n                                    class=\"justify-center flex flex-col flex-1 flex-grow-0 w-5/6\">\r\n                                    <div class=\"text-base text-gray-500 font-bold truncate\"\r\n                                        [title]=\"document.properties?.['file:content']?.['name']\"\r\n                                        [alt]=\"document.properties?.['file:content']?.['name']\">\r\n                                        {{document['title']}}\r\n                                    </div>\r\n                                    <div class=\"text-gray-500 text-sm text-nowrap\">\r\n                                        {{((document.properties?.['file:content']?.['length']) / (1024 *\r\n                                        1024)).toFixed(2) }}\r\n                                        MB\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"\r\n                                     d-flex\r\n                                     items-center\r\n                                     text-base text-gray-500\r\n                                     font-bold\r\n                                 \" *ngIf=\"document.isFile === 'Folder'\">\r\n                                    {{ document?.title }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <span [matTooltip]=\"'BUTTONS.REMOVE_CLIPBOARD' | translate\"\r\n                            class=\"cursor-pointer w-5 h-5 rounded-full border-2 flex justify-center items-center border-gray-500 \"\r\n                            (click)=\"deletefromClipboard(document)\">\r\n                            <span class=\"text-gray-500 bi bi-x text-lg flex items-center\"></span>\r\n                        </span>\r\n                    </div>\r\n                    <div class=\"text-md text-gray-500 text-center my-2\">\r\n                        <span *ngIf=\"document.canCopyToTarget && !document.canMoveToTarget\">{{'can_copy_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"!document.canCopyToTarget && document.canMoveToTarget\">{{'can_move_only' |\r\n                            translate}}</span>\r\n                        <span *ngIf=\"document.canCopyToTarget && document.canMoveToTarget\">{{'can_copy_and_move' |\r\n                            translate}}</span>\r\n                        <span\r\n                            *ngIf=\"!document.canCopyToTarget && !document.canMoveToTarget\">{{'can_not_copy_and_move'\r\n                            | translate}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"h-1/6 flex w-full justify-center items-center\">\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableCopy\"\r\n                    (click)=\"copyFromInsideClipboard()\">{{'BUTTONS.COPY' | translate}}</button>\r\n                <button class=\"submission-button mx-2\" [disabled]=\"!enableMove\"\r\n                    (click)=\"moveFromInsideClipboard()\">{{'BUTTONS.MOVE' | translate}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"bg-transparent absolute top-0 bottom-0 left-0 right-0 \" *ngIf=\"clipboardLoading\">\r\n\r\n    </div>\r\n</div>", styles: [".clipboard-side-section{width:0px;overflow-x:hidden;height:91vh;background-color:#fff;overflow:hidden;border:1px solid lightgray;z-index:999;transition:.1s ease-in-out;border-bottom:none}.clipboard-side-section .clipboard-header{height:60px}.clipboard-side-section .clipboard-content{height:calc(100% - 60px)}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: DisplaySuitableIconComponent, selector: "app-display-suitable-icon", inputs: ["data", "size", "dataType", "archive"] }], directives: [{ type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClipboardComponent, decorators: [{
             type: Component,
             args: [{
@@ -19420,7 +19419,7 @@ class CreateDirectoryComponent extends BaseComponent {
     }
 }
 CreateDirectoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateDirectoryComponent, deps: [{ token: FileManagerService }, { token: CustomToastrService }, { token: NuxeoDialogService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-CreateDirectoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateDirectoryComponent, selector: "app-create-directory", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItem: "selectedItem" }, outputs: { visibleChange: "visibleChange", refresh: "refresh" }, viewQueries: [{ propertyName: "form", first: true, predicate: DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <dx-popup class=\"popUpParent\" [rtlEnabled]=\"rtlEnabled\" [width]=\"500\" [height]=\"230\" [dragEnabled]=\"false\"\r\n[closeOnOutsideClick]=\"true\" [(visible)]=\"visible\"\r\ntitle=\"{{ 'FILE_MANAGER.NEW_DIRECTORY' | translate }}\">\r\n<div *dxTemplate=\"let data of 'content'\">\r\n    <form (submit)=\"onSubmit($event)\">\r\n        <dx-form class=\"form-wrapper\" #form [formData]=\"formData\" [disabled]=\"loading\">\r\n            <dxi-item dataField=\"title\" editorType=\"dxTextBox\">\r\n                <dxo-label text=\"{{ 'CREATE.TITLE' | translate }}\"></dxo-label>\r\n                <dxi-validation-rule type=\"required\" message=\"Title is required\"></dxi-validation-rule>\r\n            </dxi-item>\r\n            <dxi-item name=\"description\" editorType=\"dxTextBox\">\r\n                <dxo-label text=\"{{ 'CREATE.DESCRIPTION' | translate }}\"></dxo-label>\r\n            </dxi-item>\r\n            <dxi-item itemType=\"button\">\r\n                <dxo-button-options width=\"30%\" type=\"danger\" [useSubmitBehavior]=\"true\"\r\n                    [template]=\"'createTemplate'\">\r\n                </dxo-button-options>\r\n            </dxi-item>\r\n            <ng-container *dxTemplate=\"let item of 'createTemplate'\">\r\n                <span class=\"dx-button-text\">\r\n                    <ng-container *ngIf=\"loading; else notLoading\">\r\n                        <dx-load-indicator width=\"24px\" height=\"24px\" [visible]=\"true\"></dx-load-indicator>\r\n                    </ng-container>\r\n                    <ng-template #notLoading>{{\r\n                        \"FILE_MANAGER.CREATE\" | translate\r\n                        }}</ng-template>\r\n                </span>\r\n            </ng-container>\r\n        </dx-form>\r\n    </form>\r\n</div>\r\n</dx-popup> -->\r\n\r\n<ng-template #contentTemplate>\r\n\t<div>\r\n\t\t<form>\r\n\t\t\t<dx-form\r\n\t\t\t\tclass=\"form-wrapper\"\r\n\t\t\t\t#form\r\n\t\t\t\t[formData]=\"formData\"\r\n\t\t\t\t[disabled]=\"loading\"\r\n\t\t\t>\r\n\t\t\t\t<dxi-item dataField=\"title\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label text=\"{{ 'CREATE.TITLE' | translate }}\"></dxo-label>\r\n\t\t\t\t\t<dxi-validation-rule\r\n\t\t\t\t\t\ttype=\"required\"\r\n\t\t\t\t\t\tmessage=\"Title is required\"\r\n\t\t\t\t\t></dxi-validation-rule>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t\t<dxi-item name=\"description\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label text=\"{{ 'CREATE.DESCRIPTION' | translate }}\"></dxo-label>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t</dx-form>\r\n\t\t</form>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(onSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.CREATE' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5$2.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i5$2.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { type: i5$2.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }], directives: [{ type: i2$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "translate": i1.TranslatePipe } });
+CreateDirectoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CreateDirectoryComponent, selector: "app-create-directory", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItem: "selectedItem" }, outputs: { visibleChange: "visibleChange", refresh: "refresh" }, viewQueries: [{ propertyName: "form", first: true, predicate: DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\r\n\t<div>\r\n\t\t<form>\r\n\t\t\t<dx-form\r\n\t\t\t\tclass=\"form-wrapper\"\r\n\t\t\t\t#form\r\n\t\t\t\t[formData]=\"formData\"\r\n\t\t\t\t[disabled]=\"loading\"\r\n\t\t\t>\r\n\t\t\t\t<dxi-item dataField=\"title\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label text=\"{{ 'CREATE.TITLE' | translate }}\"></dxo-label>\r\n\t\t\t\t\t<dxi-validation-rule\r\n\t\t\t\t\t\ttype=\"required\"\r\n\t\t\t\t\t\tmessage=\"Title is required\"\r\n\t\t\t\t\t></dxi-validation-rule>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t\t<dxi-item name=\"description\" editorType=\"dxTextBox\">\r\n\t\t\t\t\t<dxo-label text=\"{{ 'CREATE.DESCRIPTION' | translate }}\"></dxo-label>\r\n\t\t\t\t</dxi-item>\r\n\t\t\t</dx-form>\r\n\t\t</form>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(onSubmit, [$event])\"\r\n\t>\r\n\t\t{{ 'FILE_MANAGER.CREATE' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4$4.DxFormComponent, selector: "dx-form", inputs: ["accessKey", "activeStateEnabled", "alignItemLabels", "alignItemLabelsInAllGroups", "colCount", "colCountByScreen", "customizeItem", "disabled", "elementAttr", "focusStateEnabled", "formData", "height", "hint", "hoverStateEnabled", "items", "labelLocation", "labelMode", "minColWidth", "optionalMark", "readOnly", "requiredMark", "requiredMessage", "rtlEnabled", "screenByWidth", "scrollingEnabled", "showColonAfterLabel", "showOptionalMark", "showRequiredMark", "showValidationSummary", "tabIndex", "validationGroup", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onEditorEnterKey", "onFieldDataChanged", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "alignItemLabelsChange", "alignItemLabelsInAllGroupsChange", "colCountChange", "colCountByScreenChange", "customizeItemChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "formDataChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemsChange", "labelLocationChange", "labelModeChange", "minColWidthChange", "optionalMarkChange", "readOnlyChange", "requiredMarkChange", "requiredMessageChange", "rtlEnabledChange", "screenByWidthChange", "scrollingEnabledChange", "showColonAfterLabelChange", "showOptionalMarkChange", "showRequiredMarkChange", "showValidationSummaryChange", "tabIndexChange", "validationGroupChange", "visibleChange", "widthChange"] }, { type: i5$2.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "titleTemplate", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "linkAttr", "url", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { type: i5$2.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { type: i5$2.DxiValidationRuleComponent, selector: "dxi-validation-rule", inputs: ["message", "trim", "type", "ignoreEmptyValue", "max", "min", "reevaluate", "validationCallback", "comparisonTarget", "comparisonType", "pattern"] }], directives: [{ type: i2$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CreateDirectoryComponent, decorators: [{
             type: Component,
             args: [{
@@ -19474,8 +19473,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: NuxeoService }]; } });
 
 class DialogMangmentService {
-    constructor(dialog) {
-        this.dialog = dialog;
+    constructor(nuxeoDialogService) {
+        this.nuxeoDialogService = nuxeoDialogService;
         this.minizedModal = false;
         this.creationMode = '';
         this.fileType = '';
@@ -19486,46 +19485,50 @@ class DialogMangmentService {
         this.fileType = type;
         this.addingFrom = source;
         this.creationMode = creationMode;
-        let dialogRef = this.dialog.open(component, {
-            width: width,
-            height: height,
-            maxWidth: 'auto',
-            panelClass: 'watcher-dialog-container',
+        const options = {
+            component,
+            width,
+            height,
             data: Object.assign({}, data),
-            disableClose: true
-        });
-        dialogRef.afterClosed().subscribe(res => {
+            panelClass: 'watcher-dialog-container'
+        };
+        this.nuxeoDialogService
+            .open(options)
+            .afterClosed()
+            .subscribe((res) => {
             if (res) {
-                //console.log('open minismed');
                 this.minizedModal = true;
             }
         });
     }
     openMinimzedModal(component, width, height, data = {}) {
         this.minizedModal = false;
-        let dialogRef = this.dialog.open(component, {
-            width: width,
-            height: height,
-            panelClass: 'watcher-dialog-container',
+        //TODO Find a way for disablie closing
+        const options = {
+            component,
+            width,
+            height,
             data: Object.assign({}, data),
-            disableClose: true
-        });
-        dialogRef.afterClosed().subscribe(res => {
+            panelClass: 'watcher-dialog-container'
+        };
+        this.nuxeoDialogService
+            .open(options)
+            .afterClosed()
+            .subscribe((res) => {
             if (res) {
-                //console.log('open minismed');
                 this.minizedModal = true;
             }
         });
     }
 }
-DialogMangmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogMangmentService, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogMangmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogMangmentService, deps: [{ token: NuxeoDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
 DialogMangmentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogMangmentService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DialogMangmentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: NuxeoDialogService }]; } });
 
 class GlobalPdfTron {
     constructor(baseHref) {
@@ -21464,7 +21467,7 @@ class MoveComponent extends BaseComponent {
     }
 }
 MoveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MoveComponent, deps: [{ token: FileManagerService }, { token: CustomToastrService }, { token: NuxeoDialogService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-MoveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MoveComponent, selector: "app-move", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItem: "selectedItem", rootFolder: "rootFolder", rootEntries: "rootEntries", selectedItems: "selectedItems", directory: "directory", pageConfigurations: "pageConfigurations" }, outputs: { visibleChange: "visibleChange", getSelectedFolder: "getSelectedFolder" }, viewQueries: [{ propertyName: "form", first: true, predicate: DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <dx-popup class=\"popUpParent\" [rtlEnabled]=\"rtlEnabled\" id=\"photo-popup\" [width]=\"500\" [height]=\"500\"\r\n    title=\"{{ 'FILE_MANAGER.COPY_OR_MOVE' | translate }}\" [(visible)]=\"visible\" [showTitle]=\"true\"\r\n    [closeOnOutsideClick]=\"true\">\r\n    <div class=\"p-4\" *dxTemplate=\"let data of 'content'\">\r\n        <dx-scroll-view width=\"100%\" height=\"100%\">\r\n            <div class=\"form\">\r\n                <dx-tree-view [rtlEnabled]=\"rtlEnabled\" id=\"treeList\" [rootValue]=\"rootFolder\" keyExpr=\"id\"\r\n                    displayExpr=\"name\" hasItemsExpr=\"isExpanded\" dataStructure=\"plain\"\r\n                    [createChildren]=\"createTreeNodeChildren\" [width]=\"465\" (onItemClick)=\"selectItem($event)\">\r\n                </dx-tree-view>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n    <dxi-toolbar-item toolbar=\"bottom\" [disabled]=\"disable\">\r\n        <button class=\"submission-button px-5\" (click)=\"move(false)\">\r\n            {{ \"BUTTONS.MOVE\" | translate }}\r\n        </button>\r\n    </dxi-toolbar-item>\r\n    <dxi-toolbar-item toolbar=\"bottom\">\r\n        <button class=\"cancelation-button px-5\" (click)=\"cancel()\">\r\n            {{ \"BUTTONS.CANCEL\" | translate }}\r\n        </button>\r\n    </dxi-toolbar-item>\r\n</dx-popup> -->\r\n\r\n<ng-template #contentTemplate>\r\n\t<div class=\"p-4\">\r\n\t\t<dx-scroll-view width=\"100%\" height=\"100%\">\r\n\t\t\t<div class=\"form\">\r\n\t\t\t\t<dx-tree-view\r\n\t\t\t\t\t[rtlEnabled]=\"rtlEnabled\"\r\n\t\t\t\t\tid=\"treeList\"\r\n\t\t\t\t\t[rootValue]=\"rootFolder\"\r\n\t\t\t\t\tkeyExpr=\"id\"\r\n\t\t\t\t\tdisplayExpr=\"name\"\r\n\t\t\t\t\thasItemsExpr=\"isExpanded\"\r\n\t\t\t\t\tdataStructure=\"plain\"\r\n\t\t\t\t\t[createChildren]=\"createTreeNodeChildren\"\r\n\t\t\t\t\t[width]=\"465\"\r\n\t\t\t\t\t(onItemClick)=\"selectItem($event)\"\r\n\t\t\t\t>\r\n\t\t\t\t</dx-tree-view>\r\n\t\t\t</div>\r\n\t\t</dx-scroll-view>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\t[disabled]=\"disable\"\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(move, [false])\"\r\n\t>\r\n\t\t{{ 'BUTTONS.MOVE' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4$4.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i4$4.DxTreeViewComponent, selector: "dx-tree-view", inputs: ["accessKey", "activeStateEnabled", "animationEnabled", "collapseIcon", "createChildren", "dataSource", "dataStructure", "disabled", "disabledExpr", "displayExpr", "elementAttr", "expandAllEnabled", "expandedExpr", "expandEvent", "expandIcon", "expandNodesRecursive", "focusStateEnabled", "hasItemsExpr", "height", "hint", "hoverStateEnabled", "itemHoldTimeout", "items", "itemsExpr", "itemTemplate", "keyExpr", "noDataText", "parentIdExpr", "rootValue", "rtlEnabled", "scrollDirection", "searchEditorOptions", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "searchValue", "selectAllText", "selectByClick", "selectedExpr", "selectionMode", "selectNodesRecursive", "showCheckBoxesMode", "tabIndex", "useNativeScrolling", "virtualModeEnabled", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemCollapsed", "onItemContextMenu", "onItemExpanded", "onItemHold", "onItemRendered", "onItemSelectionChanged", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "animationEnabledChange", "collapseIconChange", "createChildrenChange", "dataSourceChange", "dataStructureChange", "disabledChange", "disabledExprChange", "displayExprChange", "elementAttrChange", "expandAllEnabledChange", "expandedExprChange", "expandEventChange", "expandIconChange", "expandNodesRecursiveChange", "focusStateEnabledChange", "hasItemsExprChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemHoldTimeoutChange", "itemsChange", "itemsExprChange", "itemTemplateChange", "keyExprChange", "noDataTextChange", "parentIdExprChange", "rootValueChange", "rtlEnabledChange", "scrollDirectionChange", "searchEditorOptionsChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "searchValueChange", "selectAllTextChange", "selectByClickChange", "selectedExprChange", "selectionModeChange", "selectNodesRecursiveChange", "showCheckBoxesModeChange", "tabIndexChange", "useNativeScrollingChange", "virtualModeEnabledChange", "visibleChange", "widthChange"] }], pipes: { "translate": i1.TranslatePipe } });
+MoveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MoveComponent, selector: "app-move", inputs: { visible: "visible", rtlEnabled: "rtlEnabled", selectedItem: "selectedItem", rootFolder: "rootFolder", rootEntries: "rootEntries", selectedItems: "selectedItems", directory: "directory", pageConfigurations: "pageConfigurations" }, outputs: { visibleChange: "visibleChange", getSelectedFolder: "getSelectedFolder" }, viewQueries: [{ propertyName: "form", first: true, predicate: DxFormComponent, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\r\n\t<div class=\"p-4\">\r\n\t\t<dx-scroll-view width=\"100%\" height=\"100%\">\r\n\t\t\t<div class=\"form\">\r\n\t\t\t\t<dx-tree-view\r\n\t\t\t\t\t[rtlEnabled]=\"rtlEnabled\"\r\n\t\t\t\t\tid=\"treeList\"\r\n\t\t\t\t\t[rootValue]=\"rootFolder\"\r\n\t\t\t\t\tkeyExpr=\"id\"\r\n\t\t\t\t\tdisplayExpr=\"name\"\r\n\t\t\t\t\thasItemsExpr=\"isExpanded\"\r\n\t\t\t\t\tdataStructure=\"plain\"\r\n\t\t\t\t\t[createChildren]=\"createTreeNodeChildren\"\r\n\t\t\t\t\t[width]=\"465\"\r\n\t\t\t\t\t(onItemClick)=\"selectItem($event)\"\r\n\t\t\t\t>\r\n\t\t\t\t</dx-tree-view>\r\n\t\t\t</div>\r\n\t\t</dx-scroll-view>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t<button\r\n\t\t[disabled]=\"disable\"\r\n\t\tclass=\"submission-button px-5\"\r\n\t\t(click)=\"dialog.executeAction(move, [false])\"\r\n\t>\r\n\t\t{{ 'BUTTONS.MOVE' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i4$4.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i4$4.DxTreeViewComponent, selector: "dx-tree-view", inputs: ["accessKey", "activeStateEnabled", "animationEnabled", "collapseIcon", "createChildren", "dataSource", "dataStructure", "disabled", "disabledExpr", "displayExpr", "elementAttr", "expandAllEnabled", "expandedExpr", "expandEvent", "expandIcon", "expandNodesRecursive", "focusStateEnabled", "hasItemsExpr", "height", "hint", "hoverStateEnabled", "itemHoldTimeout", "items", "itemsExpr", "itemTemplate", "keyExpr", "noDataText", "parentIdExpr", "rootValue", "rtlEnabled", "scrollDirection", "searchEditorOptions", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "searchValue", "selectAllText", "selectByClick", "selectedExpr", "selectionMode", "selectNodesRecursive", "showCheckBoxesMode", "tabIndex", "useNativeScrolling", "virtualModeEnabled", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onItemClick", "onItemCollapsed", "onItemContextMenu", "onItemExpanded", "onItemHold", "onItemRendered", "onItemSelectionChanged", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "accessKeyChange", "activeStateEnabledChange", "animationEnabledChange", "collapseIconChange", "createChildrenChange", "dataSourceChange", "dataStructureChange", "disabledChange", "disabledExprChange", "displayExprChange", "elementAttrChange", "expandAllEnabledChange", "expandedExprChange", "expandEventChange", "expandIconChange", "expandNodesRecursiveChange", "focusStateEnabledChange", "hasItemsExprChange", "heightChange", "hintChange", "hoverStateEnabledChange", "itemHoldTimeoutChange", "itemsChange", "itemsExprChange", "itemTemplateChange", "keyExprChange", "noDataTextChange", "parentIdExprChange", "rootValueChange", "rtlEnabledChange", "scrollDirectionChange", "searchEditorOptionsChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "searchValueChange", "selectAllTextChange", "selectByClickChange", "selectedExprChange", "selectionModeChange", "selectNodesRecursiveChange", "showCheckBoxesModeChange", "tabIndexChange", "useNativeScrollingChange", "virtualModeEnabledChange", "visibleChange", "widthChange"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MoveComponent, decorators: [{
             type: Component,
             args: [{
@@ -22253,10 +22256,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }] }, { type: DocumentScanService }, { type: i0.Injector }]; } });
 
 class SharedDocsService {
-    constructor(nuxeoService, dialog, adapter) {
+    constructor(nuxeoService, dialog, adapter, nuxeoDialogService) {
         this.nuxeoService = nuxeoService;
         this.dialog = dialog;
         this.adapter = adapter;
+        this.nuxeoDialogService = nuxeoDialogService;
     }
     shareDocumentWithUser(context, DocId) {
         return from(this.nuxeoService.nuxeoClient
@@ -22284,8 +22288,8 @@ class SharedDocsService {
             .execute({
             headers: {
                 properties: '*',
-                "fetch-document": "sharedInfo:sharedList"
-            },
+                'fetch-document': 'sharedInfo:sharedList'
+            }
         })).pipe(catchError((err) => {
             //console.log(err);
             throw err;
@@ -22298,8 +22302,8 @@ class SharedDocsService {
             .execute({
             headers: {
                 properties: '*',
-                "fetch-document": "sharedInfo:sharedList"
-            },
+                'fetch-document': 'sharedInfo:sharedList'
+            }
         })).pipe(catchError((err) => {
             //console.log(err);
             throw err;
@@ -22324,24 +22328,17 @@ class SharedDocsService {
             throw err;
         }));
     }
-    openShareDialog(selectedItem, config) {
-        let conf = {};
-        if (config) {
-            conf = Object.assign({}, config);
-        }
-        else {
-            conf = {
-                disableClose: false,
-                autoFocus: true,
-                data: {
-                    selectedItem: selectedItem,
-                },
-                width: '40%',
-                height: '85%',
-                panelClass: 'share-dialog-wrapper'
-            };
-        }
-        this.dialog.open(ShareDialogComponent, conf);
+    openShareDialog(selectedItem) {
+        this.nuxeoDialogService.open({
+            component: ShareDialogComponent,
+            width: '40%',
+            height: '85%',
+            panelClass: 'share-dialog-wrapper',
+            data: {
+                selectedItem
+            }
+            //disableClose: true,
+        });
     }
     getSharesByMe(selectedItemId, getAllInfo) {
         let sharedData = [];
@@ -22350,7 +22347,7 @@ class SharedDocsService {
         return this.getMyShares().pipe(switchMap((res) => {
             if (res) {
                 sharedData = res.entries.map((res) => this.adapter.adaptIn(res, {
-                    sharedList: 'sharedInfo:sharedList',
+                    sharedList: 'sharedInfo:sharedList'
                 }));
                 sharedData.forEach((element) => {
                     if (selectedItemId === element.uid) {
@@ -22370,14 +22367,14 @@ class SharedDocsService {
         }));
     }
 }
-SharedDocsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SharedDocsService, deps: [{ token: NuxeoService }, { token: i1$3.MatDialog }, { token: AdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SharedDocsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SharedDocsService, deps: [{ token: NuxeoService }, { token: i1$3.MatDialog }, { token: AdapterService }, { token: NuxeoDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
 SharedDocsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SharedDocsService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SharedDocsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: NuxeoService }, { type: i1$3.MatDialog }, { type: AdapterService }]; } });
+        }], ctorParameters: function () { return [{ type: NuxeoService }, { type: i1$3.MatDialog }, { type: AdapterService }, { type: NuxeoDialogService }]; } });
 
 class DepartmentManagementService {
     constructor(nuxeoService) {
@@ -23774,44 +23771,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }] }, { type: i0.Injector }]; } });
 
 class PermissionsTemplateComponent {
-    constructor(permissionService, tosterService, dialog) {
+    constructor(permissionService, tosterService, nuxeoDialogService) {
         this.permissionService = permissionService;
         this.tosterService = tosterService;
-        this.dialog = dialog;
+        this.nuxeoDialogService = nuxeoDialogService;
         this.allowDeleteAndEdit = false;
         this.permissionsArray = [];
         this.getPermissions = new EventEmitter();
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     deletePermission(permission) {
-        this.permissionService.deleteLocalPermissions(this.documentId, permission).subscribe(res => {
+        this.permissionService
+            .deleteLocalPermissions(this.documentId, permission)
+            .subscribe((res) => {
             this.getPermissions.emit();
-            this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.PERMISSION_REMOVE_SUCCESS");
-        }, err => {
+            this.tosterService.show('success', 'TOASTER.SUCCESS', 'TOASTER.PERMISSION_REMOVE_SUCCESS');
+        }, (err) => {
             this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.PERMISSION_REMOVE_FAIL');
         });
     }
     editPermission(permission, username, userVisiblePermissions, begin, end) {
-        const dialogConfig = new MatDialogConfig();
-        dialogConfig.disableClose = false;
-        dialogConfig.autoFocus = true;
-        dialogConfig.data = {
-            id: this.documentId,
-            rights: this.userVisiblePermissions,
-            state: "update",
-            aclId: permission,
-            username: username,
-            editableRight: userVisiblePermissions,
-            editableBegin: begin,
-            editableEnd: end,
-        };
-        dialogConfig.width = '35%';
-        dialogConfig.height = '70%';
         // befor opening modal we diable clickout side effect to prevent details side menu from closing when clicking in the modal
         this.permissionService.disableClickOutSide = true;
-        let addDialogRef = this.dialog.open(AddPermissionsDialogComponent, dialogConfig);
-        addDialogRef.afterClosed().subscribe(res => {
+        let addDialogRef = this.nuxeoDialogService.open({
+            component: AddPermissionsDialogComponent,
+            width: '35%',
+            height: '70%',
+            panelClass: 'watcher-dialog-container',
+            data: {
+                id: this.documentId,
+                rights: this.userVisiblePermissions,
+                state: 'update',
+                aclId: permission,
+                username: username,
+                editableRight: userVisiblePermissions,
+                editableBegin: begin,
+                editableEnd: end
+            }
+            //disableClose: true,
+        });
+        addDialogRef.afterClosed().subscribe((res) => {
             // return click outside effect to work to close side menu when clicking out side it
             this.permissionService.disableClickOutSide = false;
             this.getPermissions.emit();
@@ -23820,15 +23819,17 @@ class PermissionsTemplateComponent {
     openDialog(permission) {
         // befor opening modal we diable clickout side effect to prevent details side menu from closing when clicking in the modal
         this.permissionService.disableClickOutSide = true;
-        let dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+        let dialogRef = this.nuxeoDialogService.open({
+            component: AddPermissionsDialogComponent,
             width: '510px',
+            panelClass: 'watcher-dialog-container',
             data: {
                 title: 'confirmDialog.confirm',
                 message: 'confirmDialog.Rem_Per',
                 confirmButton: `BUTTONS.Remove`,
-                cancelButton: "BUTTONS.Cancel"
-            },
-            disableClose: true,
+                cancelButton: 'BUTTONS.Cancel'
+            }
+            //disableClose: true,
         });
         dialogRef.afterClosed().subscribe((result) => {
             // return click outside effect to work to close side menu when clicking out side it
@@ -23837,27 +23838,9 @@ class PermissionsTemplateComponent {
                 this.deletePermission(permission);
             }
         });
-        // const dialogRef = this.fuseConfirmationService.open(
-        //   {
-        //     dismissible: true,
-        //     title: this.translateService.instant("confirmDialog.confirm"),
-        //     message: this.translateService.instant("confirmDialog.Rem_Per"),
-        //     actions: {
-        //       confirm: {
-        //         show: true,
-        //         label: this.translateService.instant("BUTTONS.Remove"),
-        //         color: "warn"
-        //       },
-        //       cancel: {
-        //         show: true,
-        //         label: this.translateService.instant("BUTTONS.Cancel"),
-        //       }
-        //     }
-        //   }
-        // );
     }
 }
-PermissionsTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PermissionsTemplateComponent, deps: [{ token: PermissionService }, { token: CustomToastrService }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+PermissionsTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PermissionsTemplateComponent, deps: [{ token: PermissionService }, { token: CustomToastrService }, { token: NuxeoDialogService }], target: i0.ɵɵFactoryTarget.Component });
 PermissionsTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PermissionsTemplateComponent, selector: "app-permissions-template", inputs: { allowDeleteAndEdit: "allowDeleteAndEdit", documentId: "documentId", userVisiblePermissions: "userVisiblePermissions", permissionsArray: "permissionsArray" }, outputs: { getPermissions: "getPermissions" }, ngImport: i0, template: "<div class=\"flex flex-col\">\r\n    <div *ngFor=\"let p of permissionsArray\">\r\n        <!-- Info -->\r\n        <div class=\"flex single-permssion\" *ngIf=\"(p.granted && p.username['entity-type']== 'user') || (p.granted && (p.username['entity-type']== 'group' && (p.username.id != 'administrators' && p.username.id != 'members')))\">\r\n            <mat-icon>lock</mat-icon>\r\n            <div class=\"flex flex-auto justify-between ml-3\">\r\n                <!-- Info -->\r\n                <div>\r\n                    <div class=\"font-bold text-base text-gray-900 w-64\">\r\n                        <span *ngIf=\"p.username['entity-type'] == 'user'; else group\">\r\n                            {{p.username.fullName}}\r\n                        </span>\r\n                        <ng-template #group>\r\n                            {{p.username.grouplabel}}\r\n                        </ng-template>\r\n                        - {{p.permissionLabel}}</div>\r\n                    <div class=\"mt-0.5 text-secondary\">\r\n                        <div class=\"flex flex-row justify-between\">\r\n                            <div class=\"flex flex-col\">\r\n                                <div *ngIf=\"p.begin != null;else permanent\">\r\n                                    {{p.begin | date:'dd/MM/yyyy'}}\r\n                                    <span *ngIf=\"p.end != null\">- {{ p.end | date:'dd/MM/yyyy' }}</span>\r\n                                </div>\r\n                                <ng-template #permanent>\r\n                                    <h1>{{\"permission.permanent\" | translate }}</h1>\r\n                                </ng-template>\r\n                                <div class=\"text-secondary\">\r\n                                    <ng-container *ngIf=\"p.creator != null && p.creator != 'system'; else grantedBySystemAdmin\">\r\n                                        {{\"permission.granted\" | translate }} {{p.creator['fullName']}}\r\n                                    </ng-container>\r\n                                    <ng-template #grantedBySystemAdmin>\r\n                                        {{\"permission.grantedBySystemAdmin\" | translate }}\r\n                                    </ng-template>\r\n                                </div>\r\n                            </div>\r\n                            <!-- Actions -->\r\n                            <div class=\"flex\" *ngIf=\"allowDeleteAndEdit && p.currentUserIsPermissionOwner \r\n                            && p.permission != 'Everything'\">\r\n                                <button mat-icon-button\r\n                                    (click)=\"editPermission(p.id,p.username,p.permission,p.begin,p.end)\">\r\n                                    <mat-icon [svgIcon]=\"'heroicons_outline:pencil-alt'\"></mat-icon>\r\n                                </button>\r\n                                \r\n                                <button mat-icon-button (click)=\"openDialog(p.id)\">\r\n                                    <mat-icon [svgIcon]=\"'heroicons_outline:trash'\"></mat-icon>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".single-permssion{box-shadow:0 0 12.5px #0000001a;border-radius:8px;padding:15px;margin:10px;font-size:12px}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i4$1.DatePipe, "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PermissionsTemplateComponent, decorators: [{
             type: Component,
@@ -23866,7 +23849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './permissions-template.component.html',
                     styleUrls: ['./permissions-template.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: PermissionService }, { type: CustomToastrService }, { type: i1$3.MatDialog }]; }, propDecorators: { allowDeleteAndEdit: [{
+        }], ctorParameters: function () { return [{ type: PermissionService }, { type: CustomToastrService }, { type: NuxeoDialogService }]; }, propDecorators: { allowDeleteAndEdit: [{
                 type: Input
             }], documentId: [{
                 type: Input
@@ -23880,7 +23863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             }] } });
 
 class PermissionsComponent {
-    constructor(permissionService, addPermissionsDialog, tosterService, translateService, nuxeoService, userServ, evaluatorService) {
+    constructor(permissionService, addPermissionsDialog, tosterService, translateService, nuxeoService, userServ, evaluatorService, nuxeoDialogService) {
         this.permissionService = permissionService;
         this.addPermissionsDialog = addPermissionsDialog;
         this.tosterService = tosterService;
@@ -23888,6 +23871,7 @@ class PermissionsComponent {
         this.nuxeoService = nuxeoService;
         this.userServ = userServ;
         this.evaluatorService = evaluatorService;
+        this.nuxeoDialogService = nuxeoDialogService;
         this.sourcePage = '';
         this.subscriptions$ = [];
         this.localPermissions = [];
@@ -23903,17 +23887,19 @@ class PermissionsComponent {
     }
     ngOnInit() {
         this.subscriptions$.concat([
-            this.permissionService.createAndAddAnother.subscribe(res => {
+            this.permissionService.createAndAddAnother.subscribe((res) => {
                 this.getPermissions();
             })
         ]);
         this.loading = true;
         this.checkIfUserCanDoActionsOnPermissions();
         this.getPermissions();
-        (this.inheritedPermissions.length > 0) ? this.status = 'unblock' : this.status = 'block';
+        this.inheritedPermissions.length > 0
+            ? (this.status = 'unblock')
+            : (this.status = 'block');
     }
     addPermissionLabel(arr, permissionArr) {
-        arr.forEach(element => {
+        arr.forEach((element) => {
             if (!this.isItemContainAdministratorGroup(element)) {
                 element.permissionLabel = this.translateService.instant(`rights.${element.permission}`);
                 permissionArr.push(element);
@@ -23925,11 +23911,13 @@ class PermissionsComponent {
         if (element.granted === false) {
             isAdministrator = true;
         }
-        else if (element.username && element.username['entity-type'] === 'group' && element.username.groupname === 'administrators') {
+        else if (element.username &&
+            element.username['entity-type'] === 'group' &&
+            element.username.groupname === 'administrators') {
             isAdministrator = true;
         }
         else if (element.username.userGroups) {
-            element.username.userGroups.map(group => {
+            element.username.userGroups.map((group) => {
                 if (group.name === 'administrators') {
                     isAdministrator = true;
                 }
@@ -23938,16 +23926,23 @@ class PermissionsComponent {
         return isAdministrator;
     }
     getPermissions() {
-        this.subscriptions$.concat([this.permissionService.getPermissionsForDocument(this.documentId).subscribe(res => {
+        this.subscriptions$.concat([
+            this.permissionService
+                .getPermissionsForDocument(this.documentId)
+                .subscribe((res) => {
                 this.permissionsType = res.contextParameters.acls;
-                this.userVisiblePermissions = res.contextParameters.userVisiblePermissions;
+                this.userVisiblePermissions =
+                    res.contextParameters.userVisiblePermissions;
                 for (let p of this.permissionsType) {
                     if (p.name == 'local') {
                         this.localPermissions = [];
                         this.addPermissionLabel(p.aces, this.localPermissions);
-                        this.localPermissions = this.localPermissions.map(element => {
+                        this.localPermissions = this.localPermissions.map((element) => {
                             var _a, _b;
-                            if (element.creator === null || element.creator === 'system' || ((_b = (_a = element.creator) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.username) != this.nuxeoService.nuxeoClient.user.properties.username) {
+                            if (element.creator === null ||
+                                element.creator === 'system' ||
+                                ((_b = (_a = element.creator) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.username) !=
+                                    this.nuxeoService.nuxeoClient.user.properties.username) {
                                 element['currentUserIsPermissionOwner'] = false;
                             }
                             else {
@@ -23973,62 +23968,77 @@ class PermissionsComponent {
                         this.addPermissionLabel(p.aces, this.workflowPermissions);
                     }
                 }
-                (this.inheritedPermissions.length == 0) ? this.status = 'block' : this.status = 'unblock';
+                this.inheritedPermissions.length == 0
+                    ? (this.status = 'block')
+                    : (this.status = 'unblock');
                 this.loading = false;
-            }, err => this.loading = false)]);
+            }, (err) => (this.loading = false))
+        ]);
     }
     blockPermissionInheritance() {
         this.blockOrUnblock = true;
-        this.subscriptions$.concat([this.permissionService.blockPermissionInheritance(this.documentId).subscribe(res => {
+        this.subscriptions$.concat([
+            this.permissionService
+                .blockPermissionInheritance(this.documentId)
+                .subscribe((res) => {
                 if (res) {
                     this.getPermissions();
-                    this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.PERMISSION_BLOCK_SUCCESS");
+                    this.tosterService.show('success', 'TOASTER.SUCCESS', 'TOASTER.PERMISSION_BLOCK_SUCCESS');
                     this.blockOrUnblock = false;
-                    this.status = "unblock";
+                    this.status = 'unblock';
                     this.inheritedPermissions = [];
                 }
-            }, err => {
+            }, (err) => {
                 this.blockOrUnblock = false;
                 this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.PERMISSION_BLOCK_FAIL');
-            })]);
+            })
+        ]);
     }
     unblockPermissionInheritance() {
         this.blockOrUnblock = true;
-        this.subscriptions$.concat([this.permissionService.unblockPermissionInheritance(this.documentId).subscribe(res => {
+        this.subscriptions$.concat([
+            this.permissionService
+                .unblockPermissionInheritance(this.documentId)
+                .subscribe((res) => {
                 if (res) {
                     this.getPermissions();
-                    this.tosterService.show('success', 'TOASTER.SUCCESS', "TOASTER.PERMISSION_UNBLOCK_SUCCESS");
-                    this.status = "block";
+                    this.tosterService.show('success', 'TOASTER.SUCCESS', 'TOASTER.PERMISSION_UNBLOCK_SUCCESS');
+                    this.status = 'block';
                     this.blockOrUnblock = false;
                 }
-            }, err => {
+            }, (err) => {
                 this.blockOrUnblock = false;
                 this.tosterService.show('error', 'TOASTER.ERROR', 'TOASTER.PERMISSION_UNBLOCK_FAIL');
-            })]);
+            })
+        ]);
     }
     addNewLocalPermissions() {
         this.permissionService.departmentUsers = [...this.allDepartmentUsers];
-        this.localPermissions.forEach(perm => {
+        this.localPermissions.forEach((perm) => {
             this.permissionService.departmentUsers.forEach((user, index) => {
-                if (perm.username.properties.username === user.properties.username
-                    && perm.creator.properties.username === this.nuxeoService.nuxeoClient.user.properties.username) {
+                if (perm.username.properties.username === user.properties.username &&
+                    perm.creator.properties.username ===
+                        this.nuxeoService.nuxeoClient.user.properties.username) {
                     this.permissionService.departmentUsers.splice(index, 1);
                 }
             });
         });
-        const dialogConfig = new MatDialogConfig();
-        dialogConfig.disableClose = false;
-        dialogConfig.autoFocus = true;
-        dialogConfig.data = {
-            id: this.documentId,
-            rights: this.userVisiblePermissions
-        };
-        dialogConfig.width = '35%';
-        dialogConfig.height = '70%';
         // befor opening modal we diable clickout side effect to prevent details side menu from closing when clicking in the modal
         this.permissionService.disableClickOutSide = true;
-        let dialofRef = this.addPermissionsDialog.open(AddPermissionsDialogComponent, dialogConfig);
-        dialofRef.afterClosed().subscribe(res => {
+        this.nuxeoDialogService
+            .open({
+            component: AddPermissionsDialogComponent,
+            width: '35%',
+            height: '70%',
+            panelClass: 'watcher-dialog-container',
+            data: {
+                id: this.documentId,
+                rights: this.userVisiblePermissions
+            }
+            //disableClose: true,
+        })
+            .afterClosed()
+            .subscribe((res) => {
             // return click outside effect to work to close side menu when clicking out side it
             this.permissionService.disableClickOutSide = false;
             if (res) {
@@ -24037,9 +24047,15 @@ class PermissionsComponent {
         });
     }
     checkIfUserCanDoActionsOnPermissions() {
-        this.evaluatorService.evaluateRule('isManagePermissionEnabled').then(isEnabled => {
+        this.evaluatorService
+            .evaluateRule('isManagePermissionEnabled')
+            .then((isEnabled) => {
             if (isEnabled) {
-                this.evaluatorService.evaluateRule('isDepartmentDocumentController', { entity: this.document }).then(userInControllerGroup => {
+                this.evaluatorService
+                    .evaluateRule('isDepartmentDocumentController', {
+                    entity: this.document
+                })
+                    .then((userInControllerGroup) => {
                     // let userInControllerGroup = false;
                     // this.nuxeoService.nuxeoClient.user.userGroups.forEach(group => {
                     //   if (group.name === 'dms_document_controller') {
@@ -24048,15 +24064,25 @@ class PermissionsComponent {
                     // });
                     if (userInControllerGroup) {
                         let depCode = this.userServ.getUserDepartmentFromPath(this.document.path);
-                        this.permissionService.getDepMembers(depCode).subscribe(res => {
-                            this.permissionService.departmentUsers = res.users.map(e => {
-                                e['displayLabel'] = e.properties.firstName + ' ' + e.properties.lastName;
+                        this.permissionService
+                            .getDepMembers(depCode)
+                            .subscribe((res) => {
+                            this.permissionService.departmentUsers = res.users.map((e) => {
+                                e['displayLabel'] =
+                                    e.properties.firstName + ' ' + e.properties.lastName;
                                 return e;
                             });
-                            this.allDepartmentUsers = [...this.permissionService.departmentUsers];
-                            res.users.forEach(user => {
-                                if (user.properties.username === this.nuxeoService.nuxeoClient.user.properties.username
-                                    && ((this.document.type === 'DmsFolder' && this.document.path.includes('/default-domain/workspaces/DMS/')) || (this.document.type === 'Folder' && this.document.path.includes('/default-domain/workspaces/DMSWorkspaces/')))) {
+                            this.allDepartmentUsers = [
+                                ...this.permissionService.departmentUsers
+                            ];
+                            res.users.forEach((user) => {
+                                if (user.properties.username ===
+                                    this.nuxeoService.nuxeoClient.user.properties
+                                        .username &&
+                                    ((this.document.type === 'DmsFolder' &&
+                                        this.document.path.includes('/default-domain/workspaces/DMS/')) ||
+                                        (this.document.type === 'Folder' &&
+                                            this.document.path.includes('/default-domain/workspaces/DMSWorkspaces/')))) {
                                     this.allowAdd_Block_DeletePermission = true;
                                 }
                             });
@@ -24075,11 +24101,11 @@ class PermissionsComponent {
     ngOnDestroy() {
         // return click outside effect to work to close side menu when clicking out side it
         this.permissionService.disableClickOutSide = false;
-        this.subscriptions$.forEach(e => e.unsubscribe());
+        this.subscriptions$.forEach((e) => e.unsubscribe());
     }
 }
-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 }], 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: i8$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: i1$5.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
+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: i1$5.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: [{
@@ -24087,7 +24113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './permissions.component.html',
                     styleUrls: ['./permissions.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: PermissionService }, { type: i1$3.MatDialog }, { type: CustomToastrService }, { type: TranslationService }, { type: NuxeoService }, { type: UserService }, { type: EvaluatorsService }]; }, propDecorators: { documentId: [{
+        }], ctorParameters: function () { return [{ type: PermissionService }, { type: i1$3.MatDialog }, { type: CustomToastrService }, { type: TranslationService }, { type: NuxeoService }, { type: UserService }, { type: EvaluatorsService }, { type: NuxeoDialogService }]; }, propDecorators: { documentId: [{
                 type: Input
             }], document: [{
                 type: Input
@@ -24622,13 +24648,13 @@ class FileManagerAbstract {
         this.nodesPagination = {};
         this.isItemSelected = false;
         this.clicked = false;
-        this.currentPath = '';
-        this.configKey = 'allFiles';
+        this.currentPath = "";
+        this.configKey = "allFiles";
         this.onDestroy$ = new Subject();
         this.loading = false;
         this.rtlEnabled = false;
         this.isArabic = true;
-        this.menuDirection = 'before';
+        this.menuDirection = "before";
         this.showDetails = false;
         this.sideMenuLoading = false;
         this.disable = true;
@@ -24642,7 +24668,7 @@ class FileManagerAbstract {
             copyPopupVisible: false,
             transferPopupVisible: false,
             loanPopupVisible: false,
-            createPopupVisible: false
+            createPopupVisible: false,
         };
         this.showfolderTemplates = false;
         this.contextMenuItems = [];
@@ -24653,35 +24679,35 @@ class FileManagerAbstract {
         this.showClipboard = false;
         this.showDgdaClipboard = false; // flage related to dgda clipboard
         this.cancelButton = {
-            text: this.isArabic ? 'إلغاء' : 'Cancel',
+            text: this.isArabic ? "إلغاء" : "Cancel",
             onClick: () => {
                 Object.keys(this.cancelableOperations).forEach((key) => {
                     this.cancelableOperations[key] = false;
                 });
-            }
+            },
         };
         this.moveTo = () => {
             if (this.treeView !== undefined && this.treeView.instance !== null) {
                 let mytreeInstance = this.treeView.instance;
-                mytreeInstance.option('dataSource', []);
+                mytreeInstance.option("dataSource", []);
             }
-            this.cancelableOperations['movePopupVisible'] = true;
+            this.cancelableOperations["movePopupVisible"] = true;
         };
         this.copyTo = () => {
             if (this.treeView !== undefined && this.treeView.instance !== null) {
                 let mytreeInstance = this.treeView.instance;
-                mytreeInstance.option('dataSource', []);
+                mytreeInstance.option("dataSource", []);
             }
-            this.cancelableOperations['copyPopupVisible'] = true;
+            this.cancelableOperations["copyPopupVisible"] = true;
         };
         this.delete = () => {
-            this.cancelableOperations['deletePopupVisible'] = true;
+            this.cancelableOperations["deletePopupVisible"] = true;
         };
         this.transferTo = () => {
-            this.cancelableOperations['transferPopupVisible'] = true;
+            this.cancelableOperations["transferPopupVisible"] = true;
         };
         this.loanRequest = () => {
-            this.cancelableOperations['loanPopupVisible'] = true;
+            this.cancelableOperations["loanPopupVisible"] = true;
         };
         this.createFolder = () => {
             // this.selectedItem =
@@ -24691,29 +24717,29 @@ class FileManagerAbstract {
             //                 ? this.mainFolder
             //                 : directory?.dataItem?.id;
             //     this.selectedObject = fileSystemItem?.dataItem;
-            this.cancelableOperations['createPopupVisible'] = true;
+            this.cancelableOperations["createPopupVisible"] = true;
         };
         this.downloadFile = () => {
             var _a, _b;
             if (this.multipleItems.length === 1) {
-                window.open((_b = (_a = this.multipleItems[0].dataItem) === null || _a === void 0 ? void 0 : _a.entity) === null || _b === void 0 ? void 0 : _b.properties['file:content'].data, 'blank');
+                window.open((_b = (_a = this.multipleItems[0].dataItem) === null || _a === void 0 ? void 0 : _a.entity) === null || _b === void 0 ? void 0 : _b.properties["file:content"].data, "blank");
             }
             else {
                 this.multipleItems.forEach((item) => {
                     var _a, _b;
-                    fetch((_b = (_a = item.dataItem) === null || _a === void 0 ? void 0 : _a.entity) === null || _b === void 0 ? void 0 : _b.properties['file:content'].data)
+                    fetch((_b = (_a = item.dataItem) === null || _a === void 0 ? void 0 : _a.entity) === null || _b === void 0 ? void 0 : _b.properties["file:content"].data)
                         .then((res) => res.blob())
                         .then((blob) => {
                         FileSaver.saveAs(blob, item.name);
                     })
-                        .catch((err) => this.customToastrService.show('error', 'TOASTER.ERROR', 'TOASTER.IMAGE_NOT_FOUND'));
+                        .catch((err) => this.customToastrService.show("error", "TOASTER.ERROR", "TOASTER.IMAGE_NOT_FOUND"));
                 });
             }
         };
         this.refresh = () => {
             if (this.myPageConfiguration.fileMangerObjectName ===
-                'externalshareFileMangerObj') {
-                this.fileManagerService.customEvent.emit('refresh');
+                "externalshareFileMangerObj") {
+                this.fileManagerService.customEvent.emit("refresh");
             }
             else {
                 this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
@@ -24722,85 +24748,85 @@ class FileManagerAbstract {
         this.addToQuickAccess = () => {
             this.fileManagerService.addToQuickAccess(this.selectedItems).subscribe((res) => __awaiter(this, void 0, void 0, function* () {
                 this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
-                this.myFileMangerInstance.option('toolbar.fileSelectionItems', []);
-                this.customToastrService.show('success', 'TOASTER.SUCCESS', 'TOASTER.DOCUMENT_ADDED_TO_QUICK_ACCESS');
+                this.myFileMangerInstance.option("toolbar.fileSelectionItems", []);
+                this.customToastrService.show("success", "TOASTER.SUCCESS", "TOASTER.DOCUMENT_ADDED_TO_QUICK_ACCESS");
             }), (err) => {
-                this.customToastrService.show('error', 'TOASTER.ERROR', 'TOASTER.DOCUMENT_ADDED_TO_QUICK_ACCESS_ERROR');
+                this.customToastrService.show("error", "TOASTER.ERROR", "TOASTER.DOCUMENT_ADDED_TO_QUICK_ACCESS_ERROR");
             });
         };
         this.removeFromQuickAccess = () => {
             this.fileManagerService.removeFromQuickAccess(this.selectedItems).subscribe((res) => __awaiter(this, void 0, void 0, function* () {
                 this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
-                this.myFileMangerInstance.option('toolbar.fileSelectionItems', []);
-                this.customToastrService.show('success', 'TOASTER.SUCCESS', 'TOASTER.DOCUMENT_REMOVED_FROM_QUICK_ACCESS');
+                this.myFileMangerInstance.option("toolbar.fileSelectionItems", []);
+                this.customToastrService.show("success", "TOASTER.SUCCESS", "TOASTER.DOCUMENT_REMOVED_FROM_QUICK_ACCESS");
             }), (err) => {
-                this.customToastrService.show('error', 'TOASTER.ERROR', 'TOASTER.DOCUMENT_REMOVED_FROM_QUICK_ACCESS_ERROR');
+                this.customToastrService.show("error", "TOASTER.ERROR", "TOASTER.DOCUMENT_REMOVED_FROM_QUICK_ACCESS_ERROR");
             });
         };
         this.addToFavorites = () => {
             this.fileManagerService.addToFavorites(this.selectedItems).subscribe((res) => __awaiter(this, void 0, void 0, function* () {
-                this.multiSelectedkeys = [''];
+                this.multiSelectedkeys = [""];
                 this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
-                this.customToastrService.show('success', 'TOASTER.SUCCESS', 'TOASTER.DOCUMENT_ADDED_TO_FAVORITES');
+                this.customToastrService.show("success", "TOASTER.SUCCESS", "TOASTER.DOCUMENT_ADDED_TO_FAVORITES");
             }), (err) => {
-                this.customToastrService.show('error', 'TOASTER.ERROR', 'TOASTER.DOCUMENT_ADDED_TO_FAVORITES_ERROR');
+                this.customToastrService.show("error", "TOASTER.ERROR", "TOASTER.DOCUMENT_ADDED_TO_FAVORITES_ERROR");
             });
         };
         this.removeFromFavorites = () => {
             this.fileManagerService.removeFromFavorites(this.selectedItems).subscribe((res) => __awaiter(this, void 0, void 0, function* () {
-                this.multiSelectedkeys = [''];
+                this.multiSelectedkeys = [""];
                 this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
-                this.customToastrService.show('success', 'TOASTER.SUCCESS', 'TOASTER.DOCUMENT_REMOVED_FROM_FAVORITES');
+                this.customToastrService.show("success", "TOASTER.SUCCESS", "TOASTER.DOCUMENT_REMOVED_FROM_FAVORITES");
             }), (err) => {
-                this.customToastrService.show('error', 'TOASTER.ERROR', 'TOASTER.DOCUMENT_REMOVED_FROM_FAVORITES_ERROR');
+                this.customToastrService.show("error", "TOASTER.ERROR", "TOASTER.DOCUMENT_REMOVED_FROM_FAVORITES_ERROR");
             });
         };
         this.setSync = () => {
             this.fileManagerService.setSync(this.selectedItems).subscribe((res) => __awaiter(this, void 0, void 0, function* () {
                 this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
-                this.myFileMangerInstance.option('toolbar.fileSelectionItems', []);
-                this.customToastrService.show('success', 'TOASTER.SUCCESS', 'TOASTER.DOCUMENT_SYNCED');
+                this.myFileMangerInstance.option("toolbar.fileSelectionItems", []);
+                this.customToastrService.show("success", "TOASTER.SUCCESS", "TOASTER.DOCUMENT_SYNCED");
             }), (err) => {
-                this.customToastrService.show('error', 'TOASTER.ERROR', 'TOASTER.DOCUMENT_SYNCED_ERROR');
+                this.customToastrService.show("error", "TOASTER.ERROR", "TOASTER.DOCUMENT_SYNCED_ERROR");
             });
         };
         this.unsetSync = () => {
             this.fileManagerService.unSetSync(this.selectedItems).subscribe((res) => __awaiter(this, void 0, void 0, function* () {
                 this.reinitializeFolderTree(this.getCurrentFolderId(this.getCurrentDirectory()), this.getCurrentDirectory());
-                this.myFileMangerInstance.option('toolbar.fileSelectionItems', []);
-                this.customToastrService.show('success', 'TOASTER.SUCCESS', 'TOASTER.DOCUMENT_UNSYNCED');
+                this.myFileMangerInstance.option("toolbar.fileSelectionItems", []);
+                this.customToastrService.show("success", "TOASTER.SUCCESS", "TOASTER.DOCUMENT_UNSYNCED");
             }), (err) => {
-                this.customToastrService.show('error', 'TOASTER.ERROR', 'TOASTER.DOCUMENT_UNSYNCED_ERROR');
+                this.customToastrService.show("error", "TOASTER.ERROR", "TOASTER.DOCUMENT_UNSYNCED_ERROR");
             });
         };
         this.addToCollection = () => {
-            this.cancelableOperations['addToCollectionPopupVisible'] = true;
+            this.cancelableOperations["addToCollectionPopupVisible"] = true;
         };
         this.subscribe_OR_unSubscribeToFile = () => {
             this.fileManagerService
                 .subscribe_OR_unSubscribeToItem(this.selectedItem.entity, this.selectedItem.isUserSubscriberToFile)
                 .subscribe((res) => {
                 if (res) {
-                    let successMessage = '';
+                    let successMessage = "";
                     this.selectedItem.isUserSubscriberToFile
-                        ? (successMessage = 'unsubscribe_To_Item_success')
-                        : (successMessage = 'subscribe_To_Item_success');
-                    this.customToastrService.show('success', 'TOASTER.SUCCESS', `TOASTER.${successMessage}`);
+                        ? (successMessage = "unsubscribe_To_Item_success")
+                        : (successMessage = "subscribe_To_Item_success");
+                    this.customToastrService.show("success", "TOASTER.SUCCESS", `TOASTER.${successMessage}`);
                     this.selectedItem.isUserSubscriberToFile =
                         !this.selectedItem.isUserSubscriberToFile;
-                    this.multiSelectedkeys = [''];
+                    this.multiSelectedkeys = [""];
                 }
             }, (err) => {
-                let failMessage = '';
+                let failMessage = "";
                 this.selectedItem.isUserSubscriberToFile
-                    ? (failMessage = 'unsubscribe_To_Item_fail')
-                    : (failMessage = 'subscribe_To_Item_fail');
-                this.customToastrService.show('error', 'TOASTER.ERROR', `TOASTER.${failMessage}`);
+                    ? (failMessage = "unsubscribe_To_Item_fail")
+                    : (failMessage = "subscribe_To_Item_fail");
+                this.customToastrService.show("error", "TOASTER.ERROR", `TOASTER.${failMessage}`);
             });
         };
         this.downloadAsZip = () => {
-            let arr = this.selectedItems.split(',');
-            let title = '';
+            let arr = this.selectedItems.split(",");
+            let title = "";
             if (arr.length === 1) {
                 title = this.selectedItem.name;
             }
@@ -24808,34 +24834,34 @@ class FileManagerAbstract {
         };
         this.moreDataForCreateModal = {};
         this.openPublishModal = () => {
-            let myType = 'File';
+            let myType = "File";
             if (this.multipleItems.length > 1) {
                 let newSelectedWithArrPrefix = [];
-                this.newSelectedWithIdPrefix = '';
+                this.newSelectedWithIdPrefix = "";
                 this.multipleItems.map((item, index) => {
                     index == 0
                         ? newSelectedWithArrPrefix.push({
-                            type: item.isDirectory ? 'Folder' : 'File',
-                            id: 'docs:' + item.dataItem.id.toString()
+                            type: item.isDirectory ? "Folder" : "File",
+                            id: "docs:" + item.dataItem.id.toString(),
                         })
                         : newSelectedWithArrPrefix.push({
-                            type: item.isDirectory ? 'Folder' : 'File',
-                            id: item.dataItem.id.toString()
+                            type: item.isDirectory ? "Folder" : "File",
+                            id: item.dataItem.id.toString(),
                         });
                 });
                 newSelectedWithArrPrefix.map((item, index) => {
                     this.newSelectedWithIdPrefix +=
                         index == newSelectedWithArrPrefix.length - 1
                             ? item.id
-                            : item.id + ',';
-                    item.type == 'Folder' ? (myType = 'Folder') : null;
+                            : item.id + ",";
+                    item.type == "Folder" ? (myType = "Folder") : null;
                 });
             }
-            this.dialog.open(PublishDialogComponent, {
-                width: '500px',
-                height: '400px',
-                maxWidth: 'auto',
-                panelClass: 'watcher-dialog-container',
+            this.nuxeoDialogService.open({
+                component: PublishDialogComponent,
+                width: "500px",
+                height: "400px",
+                panelClass: "watcher-dialog-container",
                 data: {
                     id: this.multipleItems.length > 1
                         ? this.newSelectedWithIdPrefix
@@ -24843,14 +24869,13 @@ class FileManagerAbstract {
                     PublishType: this.multipleItems.length > 1
                         ? myType
                         : this.selectedItem.isDirectory
-                            ? 'Folder'
-                            : 'File'
+                            ? "Folder"
+                            : "File",
                 },
-                disableClose: true
             });
         };
         this.addToClipboard = () => {
-            let selectedItemsIds = this.selectedItems.split(',');
+            let selectedItemsIds = this.selectedItems.split(",");
             let directory = this.getCurrentDirectory();
             let id = directory.dataItem === undefined
                 ? this.mainFolder
@@ -24858,12 +24883,12 @@ class FileManagerAbstract {
             if (selectedItemsIds.length === 1 &&
                 this.clipboardItems.length > 0 &&
                 this.clipboardItems.indexOf(selectedItemsIds[0]) > -1) {
-                this.customToastrService.show('error', 'TOASTER.ERROR', 'TOASTER.item_already_added');
+                this.customToastrService.show("error", "TOASTER.ERROR", "TOASTER.item_already_added");
             }
             else {
                 this.clipboardItems = union(this.clipboardItems, selectedItemsIds);
-                this.userPreferenceService.set('clipboardItems', JSON.stringify(this.clipboardItems));
-                this.customToastrService.show('success', 'TOASTER.SUCCESS', 'TOASTER.added_to_clipboard');
+                this.userPreferenceService.set("clipboardItems", JSON.stringify(this.clipboardItems));
+                this.customToastrService.show("success", "TOASTER.SUCCESS", "TOASTER.added_to_clipboard");
                 this.reinitializeFolderTree(id, directory);
                 this.fileManagerService.onRefreshClipboard.emit();
                 this.showClipboard = true;
@@ -24873,18 +24898,18 @@ class FileManagerAbstract {
         // -------------------------------------------------------------------------------------------------------------------------------------
         this.customizeIcon = (fileSystemItem) => {
             var _a, _b, _c;
-            let thumb = this.iconService.getFileIcon(fileSystemItem.dataItem.entity, 'document');
+            let thumb = this.iconService.getFileIcon(fileSystemItem.dataItem.entity, "document");
             let isFavorite = (_a = fileSystemItem === null || fileSystemItem === void 0 ? void 0 : fileSystemItem.dataItem) === null || _a === void 0 ? void 0 : _a.isFavorite;
-            let face = (_c = (_b = fileSystemItem === null || fileSystemItem === void 0 ? void 0 : fileSystemItem.dataItem) === null || _b === void 0 ? void 0 : _b.entity) === null || _c === void 0 ? void 0 : _c.properties['ctimagga:faces'];
+            let face = (_c = (_b = fileSystemItem === null || fileSystemItem === void 0 ? void 0 : fileSystemItem.dataItem) === null || _b === void 0 ? void 0 : _b.entity) === null || _c === void 0 ? void 0 : _c.properties["ctimagga:faces"];
             let isImaggaProccessed = !!(face && face.length);
             return isFavorite
-                ? `${thumb}?fav=1${isImaggaProccessed ? '&imagga=1' : ''}`
+                ? `${thumb}?fav=1${isImaggaProccessed ? "&imagga=1" : ""}`
                 : isImaggaProccessed
                     ? `${thumb}?imagga=1`
                     : thumb;
         };
         this.myPageConfName = myPageConfigurationName;
-        this.mainFolder = environment['mainFolder'];
+        this.mainFolder = environment["mainFolder"];
         this.cdRef = this.injectorObj.get(ChangeDetectorRef);
         this.permissionEvaluatorService = this.injectorObj.get(EvaluatorsService);
         this.fileManagerService = this.injectorObj.get(FileManagerService);
@@ -24905,26 +24930,27 @@ class FileManagerAbstract {
         this.route = this.injectorObj.get(ActivatedRoute);
         this.iconService = this.injectorObj.get(IconService);
         this.nuxeoService = this.injectorObj.get(NuxeoService);
-        this.multiSelectedkeys = [''];
+        this.nuxeoDialogService = this.injectorObj.get(NuxeoDialogService);
+        this.multiSelectedkeys = [""];
         this.myPageConfiguration =
             this.appConfService.myConfiguration.fileManger[this.myPageConfName];
         this.subscriptions.concat([
             this.router.events.subscribe((event) => {
-                if (event.navigationTrigger === 'popstate') {
-                    let id = event.url.split('id=')[1];
-                    if (id && id.includes('fromSharedDocument')) {
-                        id = id.split('&')[0];
+                if (event.navigationTrigger === "popstate") {
+                    let id = event.url.split("id=")[1];
+                    if (id && id.includes("fromSharedDocument")) {
+                        id = id.split("&")[0];
                     }
                     this.getSelectedFolderTree(id);
                 }
-            })
+            }),
         ]);
     }
     clickout(event) {
-        if ((event.srcElement.className === 'dx-scrollable-content' ||
-            event.srcElement.className === 'dx-scrollview-content') &&
+        if ((event.srcElement.className === "dx-scrollable-content" ||
+            event.srcElement.className === "dx-scrollview-content") &&
             this.isItemSelected) {
-            this.multiSelectedkeys = [''];
+            this.multiSelectedkeys = [""];
         }
     }
     ngOnInit() {
@@ -24940,8 +24966,8 @@ class FileManagerAbstract {
         else {
             this.directory = {
                 contextParameters: {
-                    permissions: []
-                }
+                    permissions: [],
+                },
             };
             this.canCreate = this.myPageConfiguration.canCreatePermission.some((per) => this.directory.contextParameters.permissions.includes(per));
         }
@@ -24949,31 +24975,31 @@ class FileManagerAbstract {
             this.translationService.isArabic.subscribe((res) => {
                 this.isArabic = res;
                 this.isArabic
-                    ? (this.menuDirection = 'before')
-                    : (this.menuDirection = 'after');
-            })
+                    ? (this.menuDirection = "before")
+                    : (this.menuDirection = "after");
+            }),
         ]);
         if (this.userPreferenceService) {
             this.userPreferenceService
                 .select(UserPreferenceValues.Locale)
                 .pipe(takeUntil(this.onDestroy$))
                 .subscribe((locale) => {
-                this.rtlEnabled = locale === 'ar' ? true : false;
+                this.rtlEnabled = locale === "ar" ? true : false;
             });
         }
-        if (this.route.snapshot.queryParams['fromSharedDocument']) {
-            if (this.route.snapshot.queryParams['id'] === 'sharedDocumentsRoot') {
+        if (this.route.snapshot.queryParams["fromSharedDocument"]) {
+            if (this.route.snapshot.queryParams["id"] === "sharedDocumentsRoot") {
                 this.init(this.mainFolder);
             }
             else {
-                this.getSelectedFolderTree(this.route.snapshot.queryParams['id']);
+                this.getSelectedFolderTree(this.route.snapshot.queryParams["id"]);
             }
         }
         else {
             let URL_ID;
             try {
-                URL_ID = this.route.snapshot.queryParams['id']
-                    ? this.route.snapshot.queryParams['id']
+                URL_ID = this.route.snapshot.queryParams["id"]
+                    ? this.route.snapshot.queryParams["id"]
                     : this.userPreferenceService.hasItem(this.myPageConfiguration.trackedIdPropertyName)
                         ? JSON.parse(this.userPreferenceService.get(this.myPageConfiguration.trackedIdPropertyName))
                         : null;
@@ -24993,7 +25019,7 @@ class FileManagerAbstract {
             this.fileManagerService.onRefreshingFileManger.subscribe((res) => {
                 let directory = this.getCurrentDirectory();
                 this.reinitializeFolderTree(this.fileManagerService.selectedFolderId, directory);
-            })
+            }),
         ]);
     }
     ngAfterViewChecked() {
@@ -25005,24 +25031,24 @@ class FileManagerAbstract {
                 }
             };
         this.fileManager.instance._breadcrumbs._currentDirectory.fileItem
-            .path === ''
+            .path === ""
             ? document
-                .getElementsByClassName('dx-menu-item-content')[0]
-                .classList.add('custom')
-            : '';
+                .getElementsByClassName("dx-menu-item-content")[0]
+                .classList.add("custom")
+            : "";
     }
     init(id, breadcrumbs = null, currentFolder = null) {
         const payload = {
-            currentPageIndex: 0
+            currentPageIndex: 0,
         };
         if (breadcrumbs) {
             this.expandComp(this.getFolderChildren(id, payload), breadcrumbs, currentFolder).subscribe((d) => {
                 var _a, _b, _c;
                 let toSubstr;
-                if (this.mainFolder === 'sharedDocumentsRoot') {
+                if (this.mainFolder === "sharedDocumentsRoot") {
                     toSubstr = this.fileManagerService.sharedFiles.entries.filter((item) => this.path.includes(item.contextParameters.breadcrumb.entries
                         .map((item) => item.title)
-                        .join('/')));
+                        .join("/")));
                     const pathSplit = (_a = toSubstr[0]) === null || _a === void 0 ? void 0 : _a.contextParameters.breadcrumb.entries.map((item) => item.title);
                     this.currentPath = pathSplit[pathSplit.length - 1];
                 }
@@ -25041,7 +25067,7 @@ class FileManagerAbstract {
                         else {
                             toSubstr = this.fileManagerObj.entries.filter((item) => this.path.includes(item.contextParameters.breadcrumb.entries
                                 .map((item) => item.title)
-                                .join('/')));
+                                .join("/")));
                             const pathSplit = (_b = toSubstr[0]) === null || _b === void 0 ? void 0 : _b.contextParameters.breadcrumb.entries.map((item) => item.title);
                             let x = pathSplit ? (_c = pathSplit[0]) === null || _c === void 0 ? void 0 : _c.length : 0;
                             this.currentPath = this.path.substr(x);
@@ -25077,11 +25103,11 @@ class FileManagerAbstract {
         if (!payload)
             __classPrivateFieldGet(this, _FileManagerAbstract_instances, "m", _FileManagerAbstract_resetPagination).call(this, id);
         if (!showLoading) {
-            (_a = document.querySelector('.dx-loadpanel-wrapper')) === null || _a === void 0 ? void 0 : _a.remove();
+            (_a = document.querySelector(".dx-loadpanel-wrapper")) === null || _a === void 0 ? void 0 : _a.remove();
         }
         this.clicked = showLoading;
         this.cdRef.detectChanges();
-        return (id == 'sharedDocumentsRoot'
+        return (id == "sharedDocumentsRoot"
             ? this.fileManagerService.getChildrenForSharedDocumentRoot(id, payload, loadFolders)
             : this.fileManagerService.getChildren(id, payload, loadFolders)).pipe(map((result) => {
             __classPrivateFieldGet(this, _FileManagerAbstract_instances, "m", _FileManagerAbstract_initPagination).call(this, id, result);
@@ -25095,13 +25121,13 @@ class FileManagerAbstract {
     }
     expandComp(entries, breadcrumbs, indexNextNode = 1) {
         const payload = {
-            currentPageIndex: 0
+            currentPageIndex: 0,
         };
         return entries.pipe(mergeMap((entries) => from(entries).pipe(mergeMap((entry) => {
             const nextNode = entries.find((q) => q.id == breadcrumbs[indexNextNode]);
             // if not exist will loaded otherwise keep everyting as will
             if (breadcrumbs.includes(entry.id)) {
-                return concat(of(entry).pipe(tap((ent) => (ent['items'] = []))), this.expandComp(this.getFolderChildren(entry.id, payload), breadcrumbs, indexNextNode++)).pipe(reduce((parent, children) => {
+                return concat(of(entry).pipe(tap((ent) => (ent["items"] = []))), this.expandComp(this.getFolderChildren(entry.id, payload), breadcrumbs, indexNextNode++)).pipe(reduce((parent, children) => {
                     parent.items = children;
                     return parent;
                 }));
@@ -25124,7 +25150,7 @@ class FileManagerAbstract {
                 this.fileManager.instance._filesTreeView._filesTreeView._createLoadIndicator($node);
             }
             const payload = {
-                currentPageIndex: 0
+                currentPageIndex: 0,
             };
             if (directory.dataItem === undefined) {
                 __classPrivateFieldGet(this, _FileManagerAbstract_instances, "m", _FileManagerAbstract_resetPagination).call(this, this.mainFolder);
@@ -25169,18 +25195,18 @@ class FileManagerAbstract {
         if (this.itemListView) {
             if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
                 (_a = document
-                    .getElementsByClassName('dx-filemanager-thumbnails-view-port')[0]) === null || _a === void 0 ? void 0 : _a.classList.add('empty-collection');
+                    .getElementsByClassName("dx-filemanager-thumbnails-view-port")[0]) === null || _a === void 0 ? void 0 : _a.classList.add("empty-collection");
             }
             else {
                 (_b = document
-                    .getElementsByClassName('dx-filemanager-thumbnails-view-port')[0]) === null || _b === void 0 ? void 0 : _b.classList.remove('empty-collection');
+                    .getElementsByClassName("dx-filemanager-thumbnails-view-port")[0]) === null || _b === void 0 ? void 0 : _b.classList.remove("empty-collection");
             }
         }
         else {
             if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
-                let dataGridElement = document.getElementsByClassName('dx-datagrid-nodata')[0];
+                let dataGridElement = document.getElementsByClassName("dx-datagrid-nodata")[0];
                 if (dataGridElement)
-                    dataGridElement.classList.remove('empty');
+                    dataGridElement.classList.remove("empty");
             }
         }
     }
@@ -25202,12 +25228,12 @@ class FileManagerAbstract {
             else {
                 this.path = res.contextParameters.breadcrumb.entries
                     .map((item) => item.title)
-                    .join('/');
+                    .join("/");
             }
-            if (this.route.snapshot.queryParams['fromSharedDocument']) {
+            if (this.route.snapshot.queryParams["fromSharedDocument"]) {
                 res.contextParameters.breadcrumb.entries = [
-                    { uid: 'sharedDocumentsRoot' },
-                    ...res.contextParameters.breadcrumb.entries
+                    { uid: "sharedDocumentsRoot" },
+                    ...res.contextParameters.breadcrumb.entries,
                 ];
             }
             else {
@@ -25215,32 +25241,31 @@ class FileManagerAbstract {
                 if (!this.myPageConfiguration.isStaticRoot) {
                     res.contextParameters.breadcrumb.entries = [
                         { uid: this.myPageConfiguration.rootName },
-                        ...res.contextParameters.breadcrumb.entries
+                        ...res.contextParameters.breadcrumb.entries,
                     ];
                 }
             }
             const breadcrumbs = res.contextParameters.breadcrumb.entries.map((item) => item.uid);
-            if (this.mainFolder !== 'sharedDocumentsRoot') {
+            if (this.mainFolder !== "sharedDocumentsRoot") {
                 breadcrumbs.splice(breadcrumbs.indexOf(id), 1);
             }
             this.init(this.mainFolder, breadcrumbs, res);
         }));
     }
     openUpdateModal() {
-        this.dialog.open(UpdateModalComponent, {
-            width: '40%',
-            height: '70%',
-            maxWidth: 'auto',
-            panelClass: 'watcher-dialog-container',
+        this.nuxeoDialogService.open({
+            component: UpdateModalComponent,
+            width: "40%",
+            height: "70%",
+            panelClass: "watcher-dialog-container",
             data: {
                 id: this.selectedItem.id,
                 type: this.selectedItem.entity.type,
-                code: this.selectedItem.entity.properties['gdoc:documentTypeCode']
-                    ? this.selectedItem.entity.properties['gdoc:documentTypeCode']
+                code: this.selectedItem.entity.properties["gdoc:documentTypeCode"]
+                    ? this.selectedItem.entity.properties["gdoc:documentTypeCode"]
                     : this.selectedItem.entity.type,
-                isDirectory: this.selectedItem.isDirectory
+                isDirectory: this.selectedItem.isDirectory,
             },
-            disableClose: true
         });
     }
     getSelectedItem(directory) {
@@ -25253,7 +25278,7 @@ class FileManagerAbstract {
         return items.map((item) => {
             let parsed = Object.assign({}, item);
             if (parsed.visibleEvaluator &&
-                typeof parsed.visibleEvaluator == 'function') {
+                typeof parsed.visibleEvaluator == "function") {
                 parsed.visible = parsed.visibleEvaluator();
             }
             return parsed;
@@ -25286,8 +25311,8 @@ class FileManagerAbstract {
         this.selectedItemsObjects = this.fileManager.instance.getSelectedItems();
         if (this.selectedItem) {
             e.component._filesTreeView.refresh();
-            this.myFileMangerInstance.option('contextMenu.items', this.contextItemsParser(this.contextMenuItems));
-            this.myFileMangerInstance.option('toolbar.fileSelectionItems', this.contextItemsParser(this.toolbarItems));
+            this.myFileMangerInstance.option("contextMenu.items", this.contextItemsParser(this.contextMenuItems));
+            this.myFileMangerInstance.option("toolbar.fileSelectionItems", this.contextItemsParser(this.toolbarItems));
             if (this.showDetails) {
                 this.openSideMenuDetails();
             }
@@ -25301,31 +25326,31 @@ class FileManagerAbstract {
     onContextMenuShowing(e) {
         // this.showDetails = false; // hide side menu details when right click
         let directory = this.getCurrentDirectory();
-        if (e.viewArea === 'itemView' && !this.isItemSelected) {
+        if (e.viewArea === "itemView" && !this.isItemSelected) {
             if (this.myPageConfiguration.showAddFolderInContextMenu) {
-                this.myFileMangerInstance.option('contextMenu.items', [
+                this.myFileMangerInstance.option("contextMenu.items", [
                     {
-                        name: 'create_folder',
-                        text: this.isArabic ? 'مجلد جديد' : 'New Directory',
+                        name: "create_folder",
+                        text: this.isArabic ? "مجلد جديد" : "New Directory",
                         action: this.createFolder,
                         visibleEvaluator: () => {
                             return (this.selectedItem.isDirectory &&
                                 this.selectedItemLength &&
                                 this.selectedItem.canCreate);
-                        }
-                    }
+                        },
+                    },
                 ]);
             }
-            this.myFileMangerInstance.option('contextMenu.items', [
+            this.myFileMangerInstance.option("contextMenu.items", [
                 {
-                    name: 'refresh',
+                    name: "refresh",
                     action: this.refresh,
-                    text: this.isArabic ? 'تحديث' : 'Refresh',
-                    icon: ''
-                }
+                    text: this.isArabic ? "تحديث" : "Refresh",
+                    icon: "",
+                },
             ]);
         }
-        if (e.viewArea === 'navPane') {
+        if (e.viewArea === "navPane") {
             e.cancel = true;
         }
     }
@@ -25333,7 +25358,7 @@ class FileManagerAbstract {
         var _a;
         let selectedItem = this.fileManager.instance.getSelectedItems();
         this.itemToDisplay =
-            viewArea === 'navPane'
+            viewArea === "navPane"
                 ? fileSystemItem.dataItem
                 : (_a = selectedItem[0]) === null || _a === void 0 ? void 0 : _a.dataItem;
         let directory = this.getCurrentDirectory();
@@ -25362,7 +25387,7 @@ class FileManagerAbstract {
     onItemClicked(e) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('onItemClicked');
+            console.log("onItemClicked");
             this.clicked = true;
             this.cdRef.detectChanges();
             this.resetFoldersSubscription();
@@ -25370,7 +25395,7 @@ class FileManagerAbstract {
             this.showDgdaClipboard = false;
             this.selectedFolderPath = (_b = (_a = e.directory.dataItem) === null || _a === void 0 ? void 0 : _a.entity) === null || _b === void 0 ? void 0 : _b.path;
             if (((_c = e.directory.dataItem) === null || _c === void 0 ? void 0 : _c.id) === undefined) {
-                if (this.mainFolder === 'sharedDocumentsRoot') {
+                if (this.mainFolder === "sharedDocumentsRoot") {
                     this.fileManagerService
                         .getChildrenForSharedDocumentRoot(this.mainFolder)
                         .subscribe((data) => {
@@ -25391,18 +25416,18 @@ class FileManagerAbstract {
             }
             this.myCurrecntFolderData = ((_d = e.directory.dataItem) === null || _d === void 0 ? void 0 : _d.id)
                 ? e.directory.dataItem
-                : this.mainFolder === 'sharedDocumentsRoot'
-                    ? 'sharedDocumentsRoot'
+                : this.mainFolder === "sharedDocumentsRoot"
+                    ? "sharedDocumentsRoot"
                     : this.myPageConfiguration.rootName;
             this.permissionEvaluatorService
-                .evaluateRule('canCreateNewFolderTemplates', {
-                entity: this.myCurrecntFolderData.entity
+                .evaluateRule("canCreateNewFolderTemplates", {
+                entity: this.myCurrecntFolderData.entity,
             })
                 .then((res) => {
                 this.showfolderTemplates = res;
             });
             // if not coming from shared document then save the id to track it
-            if (this.mainFolder !== 'sharedDocumentsRoot') {
+            if (this.mainFolder !== "sharedDocumentsRoot") {
                 if ((_f = (_e = e.directory) === null || _e === void 0 ? void 0 : _e.dataItem) === null || _f === void 0 ? void 0 : _f.id) {
                     this.userPreferenceService.set(this.myPageConfiguration.trackedIdPropertyName, JSON.stringify((_h = (_g = e.directory) === null || _g === void 0 ? void 0 : _g.dataItem) === null || _h === void 0 ? void 0 : _h.id));
                 }
@@ -25413,38 +25438,38 @@ class FileManagerAbstract {
             this.itemListView = e.component._itemView._itemList;
             if (this.itemListView) {
                 document
-                    .getElementsByClassName('dx-filemanager-thumbnails-view-port')[0]
-                    .classList.remove('empty-collection');
+                    .getElementsByClassName("dx-filemanager-thumbnails-view-port")[0]
+                    .classList.remove("empty-collection");
             }
             else {
-                let loadPanelElement = document.getElementsByClassName('dx-loadpanel-content')[0];
-                let dataGridElement = document.getElementsByClassName('dx-datagrid-nodata')[0];
+                let loadPanelElement = document.getElementsByClassName("dx-loadpanel-content")[0];
+                let dataGridElement = document.getElementsByClassName("dx-datagrid-nodata")[0];
                 if (loadPanelElement && dataGridElement) {
-                    loadPanelElement.classList.add('hide-loadpanel');
-                    dataGridElement.classList.add('empty');
+                    loadPanelElement.classList.add("hide-loadpanel");
+                    dataGridElement.classList.add("empty");
                 }
             }
-            var elem = ((_j = e === null || e === void 0 ? void 0 : e.directory) === null || _j === void 0 ? void 0 : _j.path) === ''
+            var elem = ((_j = e === null || e === void 0 ? void 0 : e.directory) === null || _j === void 0 ? void 0 : _j.path) === ""
                 ? document
-                    .getElementsByClassName('dx-menu-item-content')[0]
-                    .classList.add('custom')
-                : '';
+                    .getElementsByClassName("dx-menu-item-content")[0]
+                    .classList.add("custom")
+                : "";
             const id = (_l = (_k = e === null || e === void 0 ? void 0 : e.directory) === null || _k === void 0 ? void 0 : _k.dataItem) === null || _l === void 0 ? void 0 : _l.id;
             this.fileManagerService.selectedFolderId =
                 (e === null || e === void 0 ? void 0 : e.directory) && ((_m = e === null || e === void 0 ? void 0 : e.directory) === null || _m === void 0 ? void 0 : _m.dataItem) ? id : this.mainFolder;
             const queryParams = {
-                id: (e === null || e === void 0 ? void 0 : e.directory) && ((_o = e === null || e === void 0 ? void 0 : e.directory) === null || _o === void 0 ? void 0 : _o.dataItem) ? id : this.mainFolder
+                id: (e === null || e === void 0 ? void 0 : e.directory) && ((_o = e === null || e === void 0 ? void 0 : e.directory) === null || _o === void 0 ? void 0 : _o.dataItem) ? id : this.mainFolder,
             };
             each(this.fileManager.instance._filesTreeView._filesTreeView._dataAdapter.getExpandedNodesKeys(), (key) => {
                 if (key.includes(e.directory.path) &&
-                    key.replace('FIK_', '') !== e.directory.path) {
+                    key.replace("FIK_", "") !== e.directory.path) {
                     this.fileManager.instance._filesTreeView._filesTreeView._toggleExpandedState(key, false);
                 }
             });
             this.router.navigate([], {
                 relativeTo: this.route,
                 queryParams: queryParams,
-                queryParamsHandling: 'merge' // remove to replace all query params by provided
+                queryParamsHandling: "merge", // remove to replace all query params by provided
             });
             if (id !== undefined && e && ((_p = e === null || e === void 0 ? void 0 : e.directory) === null || _p === void 0 ? void 0 : _p.dataItem)) {
                 try {
@@ -25455,12 +25480,12 @@ class FileManagerAbstract {
                     //         )}"]`
                     //     ) as HTMLElement
                     // ).style.pointerEvents = 'none';
-                    document.querySelector(`[data-item-id="FIK_${encodeURI(e.directory.path)}"]`).style.pointerEvents = 'none';
+                    document.querySelector(`[data-item-id="FIK_${encodeURI(e.directory.path)}"]`).style.pointerEvents = "none";
                 }
                 catch (e) { }
                 // e.component._filesTreeView.refresh();
                 const payload = {
-                    currentPageIndex: 0
+                    currentPageIndex: 0,
                 };
                 if (!e.directory.dataItem.isReady) {
                     const newDataItem = yield this.fileManagerService
@@ -25479,13 +25504,13 @@ class FileManagerAbstract {
                     //         )}"]`
                     //     ) as HTMLElement
                     // ).style.pointerEvents = 'all';
-                    document.querySelector(`[data-item-id="FIK_${encodeURI(e.directory.path)}"]`).style.pointerEvents = 'all';
+                    document.querySelector(`[data-item-id="FIK_${encodeURI(e.directory.path)}"]`).style.pointerEvents = "all";
                 }
                 catch (e) { }
                 if (!this.itemListView) {
                     document
-                        .getElementsByClassName('dx-loadpanel-content')[0]
-                        .classList.remove('hide-loadpanel');
+                        .getElementsByClassName("dx-loadpanel-content")[0]
+                        .classList.remove("hide-loadpanel");
                 }
             }
             let directory = this.getCurrentDirectory();
@@ -25499,28 +25524,28 @@ class FileManagerAbstract {
     // --------------------------------------- create new file popups ---------------------------------------------------------------------
     checkForOpeningCreationDialog(fileType) {
         if (this.dialogMangmentService.minizedModal) {
-            let dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-                width: '510px',
+            let dialogRef = this.nuxeoDialogService.open({
+                component: ConfirmationDialogComponent,
+                width: "510px",
                 data: {
-                    title: 'createFileInProgressTitle',
-                    message: 'createFileInProgress',
+                    title: "createFileInProgressTitle",
+                    message: "createFileInProgress",
                     confirmButton: `BUTTONS.Yes`,
-                    cancelButton: 'BUTTONS.No'
+                    cancelButton: "BUTTONS.No",
                 },
-                disableClose: true
             });
             dialogRef.afterClosed().subscribe((res) => {
                 if (res) {
-                    if (this.dialogMangmentService.creationMode === 'upload') {
-                        this.dialogMangmentService.openMinimzedModal(CreateModalComponent, '70%', '85%', !this.myPageConfiguration.isStaticRoot
+                    if (this.dialogMangmentService.creationMode === "upload") {
+                        this.dialogMangmentService.openMinimzedModal(CreateModalComponent, "70%", "85%", !this.myPageConfiguration.isStaticRoot
                             ? this.selectedFolderPath
-                            : '' // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                            : "" // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
                         );
                     }
-                    else if (this.dialogMangmentService.creationMode === 'scan') {
-                        this.dialogMangmentService.openMinimzedModal(ScanModalComponent, '90%', '90%', !this.myPageConfiguration.isStaticRoot
+                    else if (this.dialogMangmentService.creationMode === "scan") {
+                        this.dialogMangmentService.openMinimzedModal(ScanModalComponent, "90%", "90%", !this.myPageConfiguration.isStaticRoot
                             ? this.selectedFolderPath
-                            : '' // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                            : "" // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
                         );
                     }
                 }
@@ -25540,66 +25565,68 @@ class FileManagerAbstract {
                     this.openCreationTypeDialog(fileType);
                 }
                 else {
-                    this.customToastrService.show('notification', 'No Form', 'Administrator Must Set File Form First');
+                    this.customToastrService.show("notification", "No Form", "Administrator Must Set File Form First");
                 }
             });
         }
     }
     openCreationTypeDialog(fileType) {
-        let creationDialogRef = this.dialog.open(CreationTypeComponent, {
-            width: '500px',
-            height: '300px',
-            panelClass: 'watcher-dialog-container',
+        let creationDialogRef = this.nuxeoDialogService.open({
+            component: CreationTypeComponent,
+            width: "500px",
+            height: "300px",
+            panelClass: "watcher-dialog-container",
             data: {},
-            disableClose: true
+            //TODO
+            //disableClose: true
         });
         creationDialogRef.afterClosed().subscribe((res) => {
             // if there was a minimied scan modal and he want to open another modal then reset for saved scanned modal
-            if (this.documentScanService.storedFile && res !== '') {
+            if (this.documentScanService.storedFile && res !== "") {
                 this.documentScanService.storedFile = {};
             }
-            if (res === 'upload') {
-                this.openDialog(CreateModalComponent, fileType, 'upload', '70%', '85%', !this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : '' // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+            if (res === "upload") {
+                this.openDialog(CreateModalComponent, fileType, "upload", "70%", "85%", !this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : "" // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
                 );
             }
-            else if (res === 'scan') {
-                this.openDialog(ScanModalComponent, fileType, 'scan', '90%', '90%', !this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : '' // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+            else if (res === "scan") {
+                this.openDialog(ScanModalComponent, fileType, "scan", "90%", "90%", !this.myPageConfiguration.isStaticRoot ? this.selectedFolderPath : "" // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
                 );
             }
-            else if (res === 'template') {
-                this.openDialog(TemplateModalComponent, fileType.type, 'scan', '70%', '85%');
+            else if (res === "template") {
+                this.openDialog(TemplateModalComponent, fileType.type, "scan", "70%", "85%");
             }
         });
     }
     openDialog(component, fileType, creationMode, width, height, path) {
-        let obj = Object.assign(Object.assign({}, this.moreDataForCreateModal), { path: path || '' });
+        let obj = Object.assign(Object.assign({}, this.moreDataForCreateModal), { path: path || "" });
         this.uploadMangmentService.resetStatus();
-        this.dialogMangmentService.openModal(component, fileType, creationMode, 'fileManger', width, height, obj);
+        this.dialogMangmentService.openModal(component, fileType, creationMode, "fileManger", width, height, obj);
     }
     checkForCreateNewFolder(folderType) {
         if (this.dialogMangmentService.minizedModal) {
-            let dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-                width: '510px',
+            let dialogRef = this.nuxeoDialogService.open({
+                component: ConfirmationDialogComponent,
+                width: "510px",
                 data: {
-                    title: 'createFileInProgressTitle',
-                    message: 'createFileInProgress',
+                    title: "createFileInProgressTitle",
+                    message: "createFileInProgress",
                     confirmButton: `BUTTONS.Yes`,
-                    cancelButton: 'BUTTONS.No'
+                    cancelButton: "BUTTONS.No",
                 },
-                disableClose: true
             });
             dialogRef.afterClosed().subscribe((res) => {
                 if (res) {
-                    if (this.dialogMangmentService.creationMode === 'upload') {
-                        this.dialogMangmentService.openMinimzedModal(CreateModalComponent, '70%', '85%', !this.myPageConfiguration.isStaticRoot
+                    if (this.dialogMangmentService.creationMode === "upload") {
+                        this.dialogMangmentService.openMinimzedModal(CreateModalComponent, "70%", "85%", !this.myPageConfiguration.isStaticRoot
                             ? this.selectedFolderPath
-                            : '' // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                            : "" // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
                         );
                     }
-                    else if (this.dialogMangmentService.creationMode === 'scan') {
-                        this.dialogMangmentService.openMinimzedModal(ScanModalComponent, '90%', '90%', !this.myPageConfiguration.isStaticRoot
+                    else if (this.dialogMangmentService.creationMode === "scan") {
+                        this.dialogMangmentService.openMinimzedModal(ScanModalComponent, "90%", "90%", !this.myPageConfiguration.isStaticRoot
                             ? this.selectedFolderPath
-                            : '' // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
+                            : "" // send path in case of file list or other page with none static root and not send it in case of my files or any other page with static root
                         );
                     }
                 }
@@ -25619,27 +25646,27 @@ class FileManagerAbstract {
                 this.openCreateFolderDialog(folderType, res);
             }
             else {
-                this.customToastrService.show('notification', 'No Form', 'Administrator Must Set Folder Form First');
+                this.customToastrService.show("notification", "No Form", "Administrator Must Set Folder Form First");
             }
         });
     }
     openCreateFolderDialog(folderType, dynamicform) {
-        this.dialog.open(FolderModalComponent, {
-            width: '40%',
-            height: '70%',
-            maxWidth: 'auto',
-            panelClass: 'watcher-dialog-container',
+        this.nuxeoDialogService.open({
+            component: FolderModalComponent,
+            width: "40%",
+            height: "70%",
+            panelClass: "watcher-dialog-container",
             data: { folderType: folderType, dynamicForm: dynamicform },
-            disableClose: true
+            //disableClose: true,
         });
     }
     //--------------------------------- may be unused funtions -------------------
     checkForClass(className) {
         let classes = [
-            'detailed-menu',
-            'ng-tag-label',
-            'ng-option-label',
-            'ng-star-inserted'
+            "detailed-menu",
+            "ng-tag-label",
+            "ng-option-label",
+            "ng-star-inserted",
         ];
         let classFounded = false;
         classes.map((item) => {
@@ -25681,7 +25708,7 @@ class FileManagerAbstract {
             return;
         const startLoading$ = of(event).pipe(switchMap((ev) => {
             var _a, _b;
-            const id = ((_b = (_a = event === null || event === void 0 ? void 0 : event.directory) === null || _a === void 0 ? void 0 : _a.dataItem) === null || _b === void 0 ? void 0 : _b.id) || '';
+            const id = ((_b = (_a = event === null || event === void 0 ? void 0 : event.directory) === null || _a === void 0 ? void 0 : _a.dataItem) === null || _b === void 0 ? void 0 : _b.id) || "";
             const hasUnreadyItems = ev.directory.dataItem.items.some((q) => !q.isReady);
             if (hasUnreadyItems) {
                 // Start loading automatically to ensure all folders has the right actions
@@ -25709,7 +25736,7 @@ _FileManagerAbstract_foldersSubscription$ = new WeakMap(), _FileManagerAbstract_
     if (this.nodesPagination[id].isNextPageAvailable) {
         this.nodesPagination[id].currentPageIndex++;
         const payload = {
-            currentPageIndex: this.nodesPagination[id].currentPageIndex
+            currentPageIndex: this.nodesPagination[id].currentPageIndex,
         };
         return this.getFolderChildren(id, payload, showLoading, false).pipe(tap((data) => {
             var _a, _b;
@@ -25738,7 +25765,7 @@ _FileManagerAbstract_foldersSubscription$ = new WeakMap(), _FileManagerAbstract_
     this.nodesPagination[id] = {
         isNextPageAvailable: result === null || result === void 0 ? void 0 : result.isNextPageAvailable,
         currentPageIndex: result === null || result === void 0 ? void 0 : result.currentPageIndex,
-        foldersCount: result === null || result === void 0 ? void 0 : result.foldersCount
+        foldersCount: result === null || result === void 0 ? void 0 : result.foldersCount,
     };
 }, _FileManagerAbstract_getNode = function _FileManagerAbstract_getNode(id) {
     const fm = this.fileManager.instance;
@@ -25748,18 +25775,18 @@ _FileManagerAbstract_foldersSubscription$ = new WeakMap(), _FileManagerAbstract_
         dataStructure[0];
     return fm._filesTreeView._filesTreeView._getNode(dataItem.internalFields.key);
 }, _FileManagerAbstract_addOrReplace = function _FileManagerAbstract_addOrReplace(data, items) {
-    let itemMap = keyBy(data, 'id');
+    let itemMap = keyBy(data, "id");
     items.forEach((item) => {
         itemMap[item.id] = item;
     });
     return values(itemMap);
 };
 FileManagerAbstract.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileManagerAbstract, deps: [{ token: i0.Injector }, { token: String }, { token: Object }], target: i0.ɵɵFactoryTarget.Component });
-FileManagerAbstract.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileManagerAbstract, selector: "ng-component", host: { listeners: { "document:click": "clickout($event)" } }, viewQueries: [{ propertyName: "fileManager", first: true, predicate: DxFileManagerComponent, descendants: true }, { propertyName: "form", first: true, predicate: DxFormComponent, descendants: true }, { propertyName: "treeView", first: true, predicate: DxTreeViewComponent, descendants: true }], ngImport: i0, template: '', isInline: true });
+FileManagerAbstract.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileManagerAbstract, selector: "ng-component", host: { listeners: { "document:click": "clickout($event)" } }, viewQueries: [{ propertyName: "fileManager", first: true, predicate: DxFileManagerComponent, descendants: true }, { propertyName: "form", first: true, predicate: DxFormComponent, descendants: true }, { propertyName: "treeView", first: true, predicate: DxTreeViewComponent, descendants: true }], ngImport: i0, template: "", isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileManagerAbstract, decorators: [{
             type: Component,
             args: [{
-                    template: ''
+                    template: "",
                 }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: String }, { type: Object }]; }, propDecorators: { fileManager: [{
                 type: ViewChild,
@@ -25772,7 +25799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: [DxTreeViewComponent, { static: false }]
             }], clickout: [{
                 type: HostListener,
-                args: ['document:click', ['$event']]
+                args: ["document:click", ["$event"]]
             }] } });
 
 class ActivityComponent {
@@ -31421,7 +31448,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" }, 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  *ngIf=\"panelMode === panelModeEnum.panel\"\r\n  [matMenuTriggerFor]=\"notifications\"\r\n  [matBadge]=\"newNotificationCount$ | async\"\r\n  [matBadgeHidden]=\"!(showBadge$ | async)\"\r\n  [matBadgeSize]=\"badgeOptions.size\"\r\n  [matBadgeColor]=\"badgeOptions.color\"\r\n  [matBadgePosition]=\"badgeOptions.position\"\r\n  [class]=\"styleClass\"\r\n  (menuOpened)=\"markAllAsUnread()\"\r\n>\r\n  <ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\">\r\n  </ng-container>\r\n</button>\r\n\r\n<mat-menu #notifications=\"matMenu\" class=\"notification-list-panel\">\r\n  <ng-template matMenuContent>\r\n    <app-notifications-list\r\n      (itemClicked)=\"listItemClick.emit($event); notifications.closed.emit()\"\r\n      (openSettings)=\"openSettings.emit($event); notifications.closed.emit()\"\r\n      (openNotifications)=\"openNotifications.emit($event); notifications.closed.emit()\"\r\n      (markAllRead)=\"refreshUnreadCount()\"\r\n    ></app-notifications-list>\r\n  </ng-template>\r\n  <div class=\"notification-list-panel__footer flex justify-center\">\r\n    <ng-content select=\"[notifications-footer]\"></ng-content>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-container *ngIf=\"panelMode === panelModeEnum.sidebar\">\r\n  <button\r\n    [matBadge]=\"newNotificationCount$ | async\"\r\n    [matBadgeHidden]=\"!(showBadge$ | async)\"\r\n    [matBadgeSize]=\"badgeOptions.size\"\r\n    [matBadgeColor]=\"badgeOptions.color\"\r\n    [matBadgePosition]=\"badgeOptions.position\"\r\n    [class]=\"styleClass\"\r\n    (click)=\"toggleSideBar(); markAllAsUnread()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\">\r\n    </ng-container>\r\n  </button>\r\n  <app-notifications-sidebar\r\n    [(visible)]=\"isSidebarOpened\"\r\n    (visibleChange)=\"refreshUnreadCount()\"\r\n    [position]=\"sidebarPosition$ | async\"\r\n  >\r\n    <ng-template appNotificationSidebarContent>\r\n      <app-notifications-list\r\n        class=\"notifications-sidebar\"\r\n        (itemClicked)=\"\r\n          listItemClick.emit($event); toggleSideBar(false); refreshUnreadCount()\r\n        \"\r\n        (openSettings)=\"openSettings.emit($event); toggleSideBar(false)\"\r\n        (openNotifications)=\"openNotifications.emit($event); toggleSideBar(false)\"\r\n        (markAllRead)=\"refreshUnreadCount()\"\r\n      ></app-notifications-list>\r\n    </ng-template>\r\n  </app-notifications-sidebar>\r\n</ng-container>\r\n\r\n<ng-template #defaultIconTemplate>\r\n  <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-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 });
+NotificationsButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsButtonComponent, selector: "app-notifications-button", inputs: { styleClass: "styleClass", badgeOptions: "badgeOptions" }, 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  *ngIf=\"panelMode === panelModeEnum.panel\"\r\n  [matMenuTriggerFor]=\"notifications\"\r\n  [matBadge]=\"newNotificationCount$ | async\"\r\n  [matBadgeHidden]=\"!(showBadge$ | async)\"\r\n  [matBadgeSize]=\"badgeOptions.size\"\r\n  [matBadgeColor]=\"badgeOptions.color\"\r\n  [matBadgePosition]=\"badgeOptions.position\"\r\n  [class]=\"styleClass\"\r\n  (menuOpened)=\"markAllAsUnread()\"\r\n>\r\n  <ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\">\r\n  </ng-container>\r\n</button>\r\n\r\n<mat-menu #notifications=\"matMenu\" class=\"notification-list-panel\">\r\n  <ng-template matMenuContent>\r\n    <app-notifications-list\r\n      (itemClicked)=\"listItemClick.emit($event); notifications.closed.emit()\"\r\n      (openSettings)=\"openSettings.emit($event); notifications.closed.emit()\"\r\n      (openNotifications)=\"openNotifications.emit($event); notifications.closed.emit()\"\r\n      (markAllRead)=\"refreshUnreadCount()\"\r\n    ></app-notifications-list>\r\n  </ng-template>\r\n  <div class=\"notification-list-panel__footer flex justify-center\">\r\n    <ng-content select=\"[notifications-footer]\"></ng-content>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-container *ngIf=\"panelMode === panelModeEnum.sidebar\">\r\n  <button\r\n    [matBadge]=\"newNotificationCount$ | async\"\r\n    [matBadgeHidden]=\"!(showBadge$ | async)\"\r\n    [matBadgeSize]=\"badgeOptions.size\"\r\n    [matBadgeColor]=\"badgeOptions.color\"\r\n    [matBadgePosition]=\"badgeOptions.position\"\r\n    [class]=\"styleClass\"\r\n    (click)=\"toggleSideBar(); markAllAsUnread()\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"customIconTemplate || defaultIconTemplate\">\r\n    </ng-container>\r\n  </button>\r\n  <app-notifications-sidebar\r\n    [(visible)]=\"isSidebarOpened\"\r\n    (visibleChange)=\"refreshUnreadCount()\"\r\n    [position]=\"sidebarPosition$ | async\"\r\n  >\r\n    <ng-template appNotificationSidebarContent>\r\n      <app-notifications-list\r\n        class=\"notifications-sidebar\"\r\n        (itemClicked)=\"\r\n          listItemClick.emit($event); toggleSideBar(false); refreshUnreadCount()\r\n        \"\r\n        (openSettings)=\"openSettings.emit($event); toggleSideBar(false)\"\r\n        (openNotifications)=\"openNotifications.emit($event); toggleSideBar(false)\"\r\n        (markAllRead)=\"refreshUnreadCount()\"\r\n      ></app-notifications-list>\r\n    </ng-template>\r\n  </app-notifications-sidebar>\r\n</ng-container>\r\n\r\n<ng-template #defaultIconTemplate>\r\n  <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-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$4.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: [{