nuxeo-development-framework 4.0.4 → 4.0.6

package/fesm2015/nuxeo-development-framework.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Injectable, Directive, Inject, InjectionToken, Optional, Input, ContentChild, ViewChild, ChangeDetectorRef, Pipe, ViewEncapsulation, EventEmitter, Output, HostListener, Self, SkipSelf, ChangeDetectionStrategy, ViewContainerRef, forwardRef, APP_INITIALIZER, TemplateRef } from '@angular/core';
+import { Component, NgModule, Injectable, Directive, Inject, InjectionToken, Optional, ChangeDetectorRef, Input, ContentChild, ViewChild, EventEmitter, Output, HostListener, Pipe, ViewEncapsulation, Self, SkipSelf, ChangeDetectionStrategy, ViewContainerRef, forwardRef, APP_INITIALIZER, TemplateRef } from '@angular/core';
 import * as i4$1 from '@angular/common';
 import { CommonModule, APP_BASE_HREF, DatePipe, registerLocaleData, DOCUMENT } from '@angular/common';
 import * as i1$2 from '@angular/common/http';
@@ -14,7 +14,7 @@ import * as i1$4 from '@angular/router';
 import { ActivatedRoute, Router, RouterModule, RoutesRecognized } from '@angular/router';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule, TranslateStore, TranslateLoader } from '@ngx-translate/core';
-import { map, distinctUntilChanged, takeUntil, catchError, take, tap, switchMap, retry, expand, last, first, debounceTime, mergeMap, toArray, delay, reduce, concatMap, finalize, filter as filter$1 } from 'rxjs/operators';
+import { map, distinctUntilChanged, takeUntil, catchError, take, tap, switchMap, first, retry, expand, last, debounceTime, mergeMap, toArray, delay, reduce, concatMap, finalize, filter as filter$1 } from 'rxjs/operators';
 import { trigger, state, style, transition, animate, AUTO_STYLE, animation, useAnimation } from '@angular/animations';
 import * as i1$1 from 'ngx-toastr';
 import { Toast, ToastrModule } from 'ngx-toastr';
@@ -23,12 +23,12 @@ import * as i4 from '@angular/cdk/bidi';
 import * as i2 from 'keycloak-angular';
 import { KeycloakAngularModule } from 'keycloak-angular';
 import * as i3 from 'ngx-cookie-service';
-import { merge } from 'lodash-es';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { merge } from 'lodash-es';
 import * as moment$4 from 'moment';
 import { isMoment } from 'moment';
 import _omit from 'lodash/omit';
@@ -1573,164 +1573,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: UtilityService }]; } });
 
-const defaultConfirmConfig = {
-    title: 'confirmDialog.confirm',
-    message: 'confirmDialog.generalConfirmMsg',
-    icon: {
-        show: true,
-        name: 'heroicons_outline:exclamation',
-        color: 'warn'
-    },
-    actions: {
-        confirm: {
-            show: true,
-            label: 'BUTTONS.confirm',
-            color: 'warn',
-            fn: () => {
-                return of(false);
-            }
-        },
-        moreActions: []
-    }
-};
-
-class NdfNuxeoDialog extends DestroySubject$1 {
-    constructor(injector) {
-        super();
-        this.dialogTitle = "";
-        this.subTitle = "";
-        this.loaderMode = "spinner";
-        this.dialogBodyTopOffset = 0;
-        this.loading = false;
-        this.data = injector.get(MAT_DIALOG_DATA, null);
-        this.dialogRef = injector.get(MatDialogRef, null);
-    }
-    executeAction(action, ...params) {
-        this.dialogBodyTopOffset = this.dialogBody.nativeElement.scrollTop;
-        if (action) {
-            if (!this.isArrowFunction(action)) {
-                throw new Error("The action should be arrow function");
-            }
-            this.loading = true;
-            //TODO here we should find a way to test if actions instance of DialogActionType
-            const result = action(...params);
-            if (!isObservable(result)) {
-                this.loading = false;
-                throw new Error("The action you used should return an Observable");
-            }
-            result.pipe(takeUntil(this.destroy$)).subscribe((value) => {
-                this.loading = false;
-                this.dialogRef.close(value);
-            }, (err) => {
-                this.loading = false;
-            });
-        }
-        else {
-            this.dialogRef.close();
-        }
-    }
-    isArrowFunction(fn) {
-        const strFn = fn.toString();
-        const firstIndex = strFn.indexOf(")");
-        const lastIndex = strFn.indexOf("{") + 1;
-        const target = strFn.substring(firstIndex, lastIndex).replace(" ", "");
-        return target.includes("=>");
-    }
-    onClose() {
-        this.dialogRef.close();
-    }
-}
-NdfNuxeoDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfNuxeoDialog, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NdfNuxeoDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: { dialogTitle: "dialogTitle", subTitle: "subTitle", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div SetDirRtl class=\"ndf-dialog-wrapper\">\r\n\t<div class=\"dialog-header\">\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\"\r\n\t\t\t\t>{{ data?.dialogConfig?.subTitle || subTitle }}</span\r\n\t\t\t>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\">\r\n\t\t\t</mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div #dialogBody class=\"dialog-body\" [ngClass]=\"{'overflow-hidden': loading}\">\r\n\t\t<ng-container\r\n\t\t\t*ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate\"\r\n\t\t></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"overlay bg-gray-300 opacity-40 z-999\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"overlay z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner\r\n\t\t\t\t\t[value]=\"90\"\r\n\t\t\t\t\t[strokeWidth]=\"4\"\r\n\t\t\t\t\toverlay=\"true\"\r\n\t\t\t\t\t[diameter]=\"40\"\r\n\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"block w-full h-px absolute inset-0 z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'progressBar'\"\r\n\t\t\t>\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-end p-6 pt-0 gap-x-4\">\r\n\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">\r\n\t\t\t{{\"BUTTONS.CANCEL\" | translate}}\r\n\t\t</button>\r\n\t\t<ng-container\r\n\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper{@apply flex flex-col;}.ndf-dialog-wrapper .dialog-header{@apply flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7;}.ndf-dialog-wrapper .dialog-body{height:auto;max-height:calc(100vh - 208px);@apply flex flex-col gap-y-4 p-6 overflow-y-auto relative z-99;}.ndf-dialog-wrapper .overlay{@apply flex w-full h-full items-center justify-center absolute left-0 bottom-0 right-0;}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfNuxeoDialog, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "ndf-nuxeo-dialog",
-                    templateUrl: "./nuxeo.dialog.html",
-                    styleUrls: ["./nuxeo.dialog.scss"],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { dialogTitle: [{
-                type: Input
-            }], subTitle: [{
-                type: Input
-            }], loaderMode: [{
-                type: Input
-            }], contentTemplate: [{
-                type: ContentChild,
-                args: ["contentTemplate"]
-            }], actionsTemplate: [{
-                type: ContentChild,
-                args: ["actionsTemplate"]
-            }], dialogBody: [{
-                type: ViewChild,
-                args: ["dialogBody"]
-            }] } });
-
-class NdfConfirmationDialogComponent extends BaseDialogComponent {
-    constructor(injector) {
-        super(injector);
-    }
-}
-NdfConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfirmationDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NdfConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfConfirmationDialogComponent, selector: "ndf-confirmation-dialog", usesInheritance: true, ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ dialogData.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<!-- Content -->\r\n\t\t<div class=\"flex flex-row gap-x-2 items-center\">\r\n\t\t\t<!-- Icon -->\r\n\t\t\t<ng-container *ngIf=\"dialogData.icon.show\">\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full\"\r\n\t\t\t\t\t[ngClass]=\"{\r\n\t\t\t\t\t\tprimaryIcon: dialogData.icon.color === 'primary',\r\n\t\t\t\t\t\taccentIcon: dialogData.icon.color === 'accent',\r\n\t\t\t\t\t\twarnIcon: dialogData.icon.color === 'warn',\r\n\t\t\t\t\t\tbasicIcon: dialogData.icon.color === 'basic',\r\n\t\t\t\t\t\tinfoIcon: dialogData.icon.color === 'info',\r\n\t\t\t\t\t\tsuccessIcon: dialogData.icon.color === 'success',\r\n\t\t\t\t\t\twarningIcon: dialogData.icon.color === 'warning',\r\n\t\t\t\t\t\terrorIcon: dialogData.icon.color === 'error'\r\n\t\t\t\t\t}\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"text-current\"\r\n\t\t\t\t\t\t[svgIcon]=\"dialogData.icon.name\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"text-secondary\"\r\n\t\t\t\t[innerHtml]=\"dialogData.message | translate\"\r\n\t\t\t></div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<ng-container *ngIf=\"dialogData.actions.confirm.show\">\r\n\t\t\t<button\r\n\t\t\t\t(click)=\"dialog.executeAction(dialogData.actions.confirm.fn)\"\r\n\t\t\t\tclass=\"submission-button\"\r\n\t\t\t\t[color]=\"dialogData.actions.confirm.color\"\r\n\t\t\t\t[disabled]=\"dialog.loading\"\r\n\t\t\t>\r\n\t\t\t\t{{ dialogData.actions.confirm.label | translate }}\r\n\t\t\t</button>\r\n\t\t</ng-container>\r\n\t\t<ng-container *ngIf=\"dialogData.actions.moreActions.length\">\r\n\t\t\t<ng-container *ngFor=\"let btn of dialogData.actions.moreActions\">\r\n\t\t\t\t<button\r\n\t\t\t\t\t(click)=\"dialog.executeAction(btn.fn)\"\r\n\t\t\t\t\tclass=\"submission-button\"\r\n\t\t\t\t\t[color]=\"btn.color\"\r\n\t\t\t\t\t[disabled]=\"dialog.loading\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ btn.label | translate }}\r\n\t\t\t\t</button>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".primaryIcon{@apply text-primary-600 bg-primary-100 dark:text-primary-50 dark:bg-primary-600;}.accentIcon{@apply text-accent-600 bg-accent-100 dark:text-accent-50 dark:bg-accent-600;}.warnIcon{@apply text-warn-600 bg-warn-100 dark:text-warn-50 dark:bg-warn-600;}.basicIcon{@apply text-gray-600 bg-gray-100 dark:text-gray-50 dark:bg-gray-600;}.infoIcon{@apply text-blue-600 bg-blue-100 dark:text-blue-50 dark:bg-blue-600;}.successIcon{@apply text-green-500 bg-green-100 dark:text-green-50 dark:bg-green-500;}.warningIcon{@apply text-amber-500 bg-amber-100 dark:text-amber-50 dark:bg-amber-500;}.errorIcon{@apply text-red-600 bg-red-100 dark:text-red-50 dark:bg-red-600;}::ng-deep .ndf-confirmation-dialog-panel{min-width:25%!important}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "loaderMode"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfirmationDialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "ndf-confirmation-dialog",
-                    templateUrl: "./ndf-confirmation-dialog.component.html",
-                    styleUrls: ["./ndf-confirmation-dialog.component.scss"],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
-var _NuxeoDialogService_instances, _NuxeoDialogService_getPanelClass;
-class NuxeoDialogService {
-    constructor(dialog) {
-        this.dialog = dialog;
-        _NuxeoDialogService_instances.add(this);
-    }
-    open(options) {
-        var _a, _b, _c, _d;
-        return this.dialog.open(options.component, {
-            width: (options === null || options === void 0 ? void 0 : options.width) || "auto",
-            height: (options === null || options === void 0 ? void 0 : options.height) || "auto",
-            minWidth: "35%",
-            panelClass: ["ndf-dialog", ...__classPrivateFieldGet(this, _NuxeoDialogService_instances, "m", _NuxeoDialogService_getPanelClass).call(this, options === null || options === void 0 ? void 0 : options.panelClass)],
-            disableClose: true,
-            data: Object.assign({ dialogConfig: {
-                    title: (_a = options.config) === null || _a === void 0 ? void 0 : _a.title,
-                    subTitle: (_b = options.config) === null || _b === void 0 ? void 0 : _b.subTitle,
-                    contentTemplate: (_c = options.config) === null || _c === void 0 ? void 0 : _c.contentTemplate,
-                    actionsTemplate: (_d = options.config) === null || _d === void 0 ? void 0 : _d.actionsTemplate,
-                } }, (options.data || {})),
-        });
-    }
-    showConfirm(config) {
-        // Merge the user config with the default config
-        const confirmConfig = merge({}, defaultConfirmConfig, config);
-        const options = {
-            component: NdfConfirmationDialogComponent,
-            data: Object.assign({}, confirmConfig),
-            panelClass: "ndf-confirmation-dialog-panel",
-        };
-        return this.open(options);
-    }
-}
-_NuxeoDialogService_instances = new WeakSet(), _NuxeoDialogService_getPanelClass = function _NuxeoDialogService_getPanelClass(panelClass) {
-    let classes = [""];
-    if (panelClass) {
-        classes = Array.isArray(panelClass) ? panelClass : [panelClass];
-    }
-    return classes;
-};
-NuxeoDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogService, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-NuxeoDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; } });
-
 var _BaseComponent_loading;
 class BaseComponent extends DestroySubject$1 {
     constructor(injector) {
@@ -1745,7 +1587,6 @@ class BaseComponent extends DestroySubject$1 {
         this.mainFolderService = injector.get(MainfolderService);
         this.userPreferencesService = injector.get(UserPreferencesService);
         this.appConfigService = injector.get(AppConfigService);
-        this.nuxeoDialogService = injector.get(NuxeoDialogService);
         this.adapter = injector.get(AdapterService);
     }
     set loading(value) {
@@ -1758,13 +1599,13 @@ class BaseComponent extends DestroySubject$1 {
         return this.translateService.currentLang;
     }
     get isArabic() {
-        return this.currentLang == "ar";
+        return this.currentLang == 'ar';
     }
     get isArabic$() {
-        return this.translateService.onLangChange.pipe(map((event) => event.lang == "ar"));
+        return this.translateService.onLangChange.pipe(map((event) => event.lang == 'ar'));
     }
     get direction() {
-        return this.translateService.currentLang === "ar" ? "rtl" : "ltr";
+        return this.translateService.currentLang === 'ar' ? 'rtl' : 'ltr';
     }
 }
 _BaseComponent_loading = new WeakMap();
@@ -1902,100 +1743,692 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-class NuxeoDialogModule {
+/** @ignore */
+class SetDirRtlDirective {
+    constructor(elRef, renderer, translation) {
+        this.elRef = elRef;
+        this.renderer = renderer;
+        this.translation = translation;
+        this.switchDirBasedOnLanguage();
+    }
+    switchDirBasedOnLanguage() {
+        this.translation.isArabic.subscribe((arabic) => {
+            arabic
+                ? this.renderer.setAttribute(this.elRef.nativeElement, 'dir', 'rtl')
+                : this.renderer.setAttribute(this.elRef.nativeElement, 'dir', 'ltr');
+        });
+    }
 }
-NuxeoDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NuxeoDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogModule, declarations: [NdfNuxeoDialog, NdfConfirmationDialogComponent], imports: [CommonModule,
-        TranslateModule,
-        MatIconModule,
-        MatDialogModule,
-        MatTooltipModule], exports: [NdfNuxeoDialog, NdfConfirmationDialogComponent] });
-NuxeoDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogModule, imports: [[
-            CommonModule,
-            TranslateModule,
-            MatIconModule,
-            MatDialogModule,
-            MatTooltipModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogModule, decorators: [{
-            type: NgModule,
+SetDirRtlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SetDirRtlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Directive });
+SetDirRtlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: SetDirRtlDirective, selector: "[SetDirRtl]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SetDirRtlDirective, decorators: [{
+            type: Directive,
             args: [{
-                    declarations: [NdfNuxeoDialog, NdfConfirmationDialogComponent],
-                    imports: [
-                        CommonModule,
-                        TranslateModule,
-                        MatIconModule,
-                        MatDialogModule,
-                        MatTooltipModule
-                    ],
-                    exports: [NdfNuxeoDialog, NdfConfirmationDialogComponent]
+                    selector: '[SetDirRtl]',
                 }]
-        }] });
-
-class NuxeoMapper {
-    static schemaToModel(properties) {
-        const mappedProperties = {};
-        for (const key in properties) {
-            if (properties.hasOwnProperty(key)) {
-                const [prefix, propertyKey] = key.split(':');
-                if (!mappedProperties[prefix]) {
-                    mappedProperties[prefix] = {};
-                }
-                mappedProperties[prefix][propertyKey] =
-                    properties[key];
-            }
-        }
-        return mappedProperties;
-    }
-    static modelToSchema(model) {
-        const packedProperties = {};
-        for (const schemaKey in model) {
-            if (model.hasOwnProperty(schemaKey)) {
-                const schemaProperties = model[schemaKey];
-                for (const propertyKey in schemaProperties) {
-                    if (schemaProperties.hasOwnProperty(propertyKey)) {
-                        packedProperties[`${schemaKey}:${propertyKey}`] =
-                            schemaProperties[propertyKey];
-                    }
-                }
-            }
-        }
-        return packedProperties;
-    }
-}
-
-const ENTITY_TYPE = 'entity-type';
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TranslationService }]; } });
 
-var _HttpBaseService_http;
-class HttpBaseService {
+class NdfNuxeoDialog extends BaseComponent {
     constructor(injector) {
-        _HttpBaseService_http.set(this, void 0);
-        __classPrivateFieldSet(this, _HttpBaseService_http, injector.get(HttpClient), "f");
-    }
-    get environment() {
-        return EnvManager.environment;
+        super(injector);
+        this.dialogTitle = '';
+        this.subTitle = '';
+        this.loaderMode = 'spinner';
+        this.dialogBodyTopOffset = 0;
+        this.data = injector.get(MAT_DIALOG_DATA, null);
+        this.dialogRef = injector.get(MatDialogRef, null);
     }
-    get(endpointOrOptions, params = undefined, headers = undefined, responseType = undefined) {
-        var _a, _b, _c;
-        let url;
-        if (typeof endpointOrOptions === "string") {
-            url = endpointOrOptions;
+    executeAction(action, ...params) {
+        this.dialogBodyTopOffset = this.dialogBody.nativeElement.scrollTop;
+        if (action) {
+            if (!this.isArrowFunction(action)) {
+                throw new Error('The action should be arrow function');
+            }
+            this.loading = true;
+            //TODO here we should find a way to test if actions instance of DialogActionType
+            const result = action(...params);
+            if (!isObservable(result)) {
+                this.loading = false;
+                throw new Error('The action you used should return an Observable');
+            }
+            result.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+                this.loading = false;
+                this.dialogRef.close(value);
+            }, (err) => {
+                this.loading = false;
+            });
         }
         else {
-            const options = endpointOrOptions;
-            url = options.endpoint;
-            params = (_a = options.params) !== null && _a !== void 0 ? _a : undefined;
-            headers = (_b = options.headers) !== null && _b !== void 0 ? _b : undefined;
-            responseType = (_c = options.responseType) !== null && _c !== void 0 ? _c : undefined;
+            this.dialogRef.close();
         }
-        return __classPrivateFieldGet(this, _HttpBaseService_http, "f")
-            .get(url, { headers, params, responseType })
-            .pipe(map((response) => response), this.catchErrors());
     }
-    post(endpointOrOptions, payload = undefined, params = undefined, headers = undefined, responseType = undefined) {
-        var _a, _b, _c, _d;
+    isArrowFunction(fn) {
+        const strFn = fn.toString();
+        const firstIndex = strFn.indexOf(')');
+        const lastIndex = strFn.indexOf('{') + 1;
+        const target = strFn.substring(firstIndex, lastIndex).replace(' ', '');
+        return target.includes('=>');
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+}
+NdfNuxeoDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfNuxeoDialog, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+NdfNuxeoDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: { dialogTitle: "dialogTitle", subTitle: "subTitle", loaderMode: "loaderMode" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], viewQueries: [{ propertyName: "dialogBody", first: true, predicate: ["dialogBody"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div SetDirRtl class=\"ndf-dialog-wrapper\">\r\n\t<div class=\"dialog-header\">\r\n\t\t<div class=\"flex flex-col\">\r\n\t\t\t<span>{{ data?.dialogConfig?.title || dialogTitle }}</span>\r\n\t\t\t<span class=\"text-base font-normal\"\r\n\t\t\t\t>{{ data?.dialogConfig?.subTitle || subTitle }}</span\r\n\t\t\t>\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\tclass=\"flex items-center justify-center rounded-full bg-anti-flash-white w-10 h-10\"\r\n\t\t\t(click)=\"executeAction()\"\r\n\t\t\tmatTooltip=\"{{'BUTTONS.CLOSE' | translate}}\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"icon-size-3.5\" [svgIcon]=\"'icons:cancel-icon'\">\r\n\t\t\t</mat-icon>\r\n\t\t</button>\r\n\t</div>\r\n\t<div #dialogBody class=\"dialog-body\" [ngClass]=\"{'overflow-hidden': loading}\">\r\n\t\t<ng-container\r\n\t\t\t*ngTemplateOutlet=\"data?.dialogConfig?.contentTemplate || contentTemplate\"\r\n\t\t></ng-container>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"overlay bg-gray-300 opacity-40 z-999\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t></div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"overlay z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'spinner'\"\r\n\t\t\t\t[ngStyle]=\"{'top': dialogBodyTopOffset + 'px'}\"\r\n\t\t\t>\r\n\t\t\t\t<mat-spinner\r\n\t\t\t\t\t[value]=\"90\"\r\n\t\t\t\t\t[strokeWidth]=\"4\"\r\n\t\t\t\t\toverlay=\"true\"\r\n\t\t\t\t\t[diameter]=\"40\"\r\n\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t>\r\n\t\t\t\t</mat-spinner>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"block w-full h-px absolute inset-0 z-9999\"\r\n\t\t\t\t*ngIf=\"loaderMode === 'progressBar'\"\r\n\t\t\t>\r\n\t\t\t\t<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"flex w-full justify-end p-6 pt-0 gap-x-4\">\r\n\t\t<button class=\"cancelation-button\" (click)=\"executeAction()\">\r\n\t\t\t{{\"BUTTONS.CANCEL\" | translate}}\r\n\t\t</button>\r\n\t\t<ng-container\r\n\t\t\t*ngTemplateOutlet=\"(data?.dialogConfig?.actionsTemplate || actionsTemplate); context: { dialog: this }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n</div>\r\n", styles: ["::ng-deep .ndf-dialog .mat-dialog-container{overflow:hidden!important;border-radius:8px!important}.ndf-dialog-wrapper{@apply flex flex-col;}.ndf-dialog-wrapper .dialog-header{@apply flex h-20 p-6 justify-between items-center w-full bg-vapor text-blue-munsell text-xl not-italic font-bold leading-7;}.ndf-dialog-wrapper .dialog-body{height:auto;max-height:calc(100vh - 208px);@apply flex flex-col gap-y-4 p-6 overflow-y-auto relative z-99;}.ndf-dialog-wrapper .overlay{@apply flex w-full h-full items-center justify-center absolute left-0 bottom-0 right-0;}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: SetDirRtlDirective, selector: "[SetDirRtl]" }, { type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfNuxeoDialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndf-nuxeo-dialog',
+                    templateUrl: './nuxeo.dialog.html',
+                    styleUrls: ['./nuxeo.dialog.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { dialogTitle: [{
+                type: Input
+            }], subTitle: [{
+                type: Input
+            }], loaderMode: [{
+                type: Input
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: ['contentTemplate']
+            }], actionsTemplate: [{
+                type: ContentChild,
+                args: ['actionsTemplate']
+            }], dialogBody: [{
+                type: ViewChild,
+                args: ['dialogBody']
+            }] } });
+
+class NdfConfirmationDialogComponent extends BaseDialogComponent {
+    constructor(injector) {
+        super(injector);
+    }
+}
+NdfConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfirmationDialogComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+NdfConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfConfirmationDialogComponent, selector: "ndf-confirmation-dialog", usesInheritance: true, ngImport: i0, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ dialogData.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<!-- Content -->\r\n\t\t<div class=\"flex flex-row gap-x-2 items-center\">\r\n\t\t\t<!-- Icon -->\r\n\t\t\t<ng-container *ngIf=\"dialogData.icon.show\">\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full\"\r\n\t\t\t\t\t[ngClass]=\"{\r\n\t\t\t\t\t\tprimaryIcon: dialogData.icon.color === 'primary',\r\n\t\t\t\t\t\taccentIcon: dialogData.icon.color === 'accent',\r\n\t\t\t\t\t\twarnIcon: dialogData.icon.color === 'warn',\r\n\t\t\t\t\t\tbasicIcon: dialogData.icon.color === 'basic',\r\n\t\t\t\t\t\tinfoIcon: dialogData.icon.color === 'info',\r\n\t\t\t\t\t\tsuccessIcon: dialogData.icon.color === 'success',\r\n\t\t\t\t\t\twarningIcon: dialogData.icon.color === 'warning',\r\n\t\t\t\t\t\terrorIcon: dialogData.icon.color === 'error'\r\n\t\t\t\t\t}\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon\r\n\t\t\t\t\t\tclass=\"text-current\"\r\n\t\t\t\t\t\t[svgIcon]=\"dialogData.icon.name\"\r\n\t\t\t\t\t></mat-icon>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"text-secondary\"\r\n\t\t\t\t[innerHtml]=\"dialogData.message | translate\"\r\n\t\t\t></div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\">\r\n\t\t<ng-container *ngIf=\"dialogData.actions.confirm.show\">\r\n\t\t\t<button\r\n\t\t\t\t(click)=\"dialog.executeAction(dialogData.actions.confirm.fn)\"\r\n\t\t\t\tclass=\"submission-button\"\r\n\t\t\t\t[color]=\"dialogData.actions.confirm.color\"\r\n\t\t\t\t[disabled]=\"dialog.loading\"\r\n\t\t\t>\r\n\t\t\t\t{{ dialogData.actions.confirm.label | translate }}\r\n\t\t\t</button>\r\n\t\t</ng-container>\r\n\t\t<ng-container *ngIf=\"dialogData.actions.moreActions.length\">\r\n\t\t\t<ng-container *ngFor=\"let btn of dialogData.actions.moreActions\">\r\n\t\t\t\t<button\r\n\t\t\t\t\t(click)=\"dialog.executeAction(btn.fn)\"\r\n\t\t\t\t\tclass=\"submission-button\"\r\n\t\t\t\t\t[color]=\"btn.color\"\r\n\t\t\t\t\t[disabled]=\"dialog.loading\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ btn.label | translate }}\r\n\t\t\t\t</button>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [".primaryIcon{@apply text-primary-600 bg-primary-100 dark:text-primary-50 dark:bg-primary-600;}.accentIcon{@apply text-accent-600 bg-accent-100 dark:text-accent-50 dark:bg-accent-600;}.warnIcon{@apply text-warn-600 bg-warn-100 dark:text-warn-50 dark:bg-warn-600;}.basicIcon{@apply text-gray-600 bg-gray-100 dark:text-gray-50 dark:bg-gray-600;}.infoIcon{@apply text-blue-600 bg-blue-100 dark:text-blue-50 dark:bg-blue-600;}.successIcon{@apply text-green-500 bg-green-100 dark:text-green-50 dark:bg-green-500;}.warningIcon{@apply text-amber-500 bg-amber-100 dark:text-amber-50 dark:bg-amber-500;}.errorIcon{@apply text-red-600 bg-red-100 dark:text-red-50 dark:bg-red-600;}::ng-deep .ndf-confirmation-dialog-panel{min-width:25%!important}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "loaderMode"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndf-confirmation-dialog',
+                    templateUrl: './ndf-confirmation-dialog.component.html',
+                    styleUrls: ['./ndf-confirmation-dialog.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+/** @ignore */
+class ClickOutsideDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.clickOutside = new EventEmitter();
+    }
+    onClick(target) {
+        const clickedInside = this.elementRef.nativeElement.contains(target);
+        if (!clickedInside) {
+            this.clickOutside.emit(target);
+        }
+    }
+}
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "window:click": "onClick($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickOutside]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['window:click', ['$event.target']]
+            }] } });
+
+/** @ignore */
+class SetRtlDirective {
+    constructor(elRef, renderer, translation) {
+        this.elRef = elRef;
+        this.renderer = renderer;
+        this.translation = translation;
+        this.switchClassBasedOnLanguage();
+    }
+    /*Switch rtl class based on the chosen language from Translation Service*/
+    switchClassBasedOnLanguage() {
+        this.translation.isArabic.subscribe((arabic) => {
+            arabic
+                ? this.renderer.addClass(this.elRef.nativeElement, 'rtl')
+                : this.renderer.removeClass(this.elRef.nativeElement, 'rtl');
+        });
+    }
+}
+SetRtlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SetRtlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Directive });
+SetRtlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: SetRtlDirective, selector: "[SetRtl]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SetRtlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[SetRtl]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TranslationService }]; } });
+
+class EvaluatorsService {
+    constructor(nuxeoService, appConfigService) {
+        this.nuxeoService = nuxeoService;
+        this.appConfigService = appConfigService;
+        this.context = { entity: null, getEvaluator: null, user: null };
+        this.asyncEvery = (arr, predicate) => __awaiter(this, void 0, void 0, function* () {
+            for (let e of arr) {
+                if (!(yield predicate(e))) {
+                    return false;
+                }
+            }
+            return true;
+        });
+        this.asyncSome = (arr, predicate) => __awaiter(this, void 0, void 0, function* () {
+            for (let e of arr) {
+                if (yield predicate(e)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+        // tslint:disable-next-line:member-ordering
+        this.evaluators = {
+            AND: (context, args) => __awaiter(this, void 0, void 0, function* () {
+                if (!args || args.length === 0) {
+                    return false;
+                }
+                return yield this.asyncEvery(args, (arg) => __awaiter(this, void 0, void 0, function* () {
+                    const evaluator = yield context.getEvaluator(arg.value);
+                    if (!evaluator) {
+                        console.warn("evaluator not found: " + arg.value);
+                        return false;
+                    }
+                    return yield evaluator(context, arg.parameters || []);
+                }));
+            }),
+            OR: (context, args) => __awaiter(this, void 0, void 0, function* () {
+                if (!args || args.length === 0) {
+                    return false;
+                }
+                return yield this.asyncSome(args, (arg) => __awaiter(this, void 0, void 0, function* () {
+                    const evaluator = yield context.getEvaluator(arg.value);
+                    if (!evaluator) {
+                        console.warn("evaluator not found: " + arg.value);
+                        return false;
+                    }
+                    const res = yield evaluator(context, arg.parameters || []);
+                    return res;
+                }));
+            }),
+            isStatus: (context, args) => __awaiter(this, void 0, void 0, function* () {
+                if (args.indexOf(context.entity.state) > -1) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }),
+            isCreator: (context, args) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                //check if user loged in is the creator of that corresp
+                let owner;
+                if ((_b = (_a = context.entity.properties.owner) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.username) {
+                    owner = (_d = (_c = context.entity.properties.owner) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.username;
+                }
+                else if ((_f = (_e = context.entity.properties["corr:owner"]) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.username) {
+                    owner = (_h = (_g = context.entity.properties["corr:owner"]) === null || _g === void 0 ? void 0 : _g.properties) === null || _h === void 0 ? void 0 : _h.username;
+                }
+                else if (context.entity.properties.owner) {
+                    owner = context.entity.properties.owner;
+                }
+                else if (context.entity.properties["corr:owner"]) {
+                    owner = context.entity.properties["corr:owner"];
+                }
+                if (owner === context.user.properties.username) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }),
+            isUserInrole: (context, args) => __awaiter(this, void 0, void 0, function* () {
+                const result = yield this.nuxeoService
+                    .isUserInRole(args, "")
+                    .pipe(first())
+                    .toPromise();
+                return result;
+            }),
+        };
+        this.getEvaluator = (key) => __awaiter(this, void 0, void 0, function* () {
+            const eva = this.evaluators;
+            if (key && key.startsWith("!")) {
+                const fn = eva[key.substring(1)];
+                return (context, args) => __awaiter(this, void 0, void 0, function* () {
+                    const result = yield fn(context, ...args);
+                    return !result;
+                });
+            }
+            return eva[key];
+        });
+        this.appConfigService.configLoaded.subscribe((ready) => {
+            if (ready) {
+                this.conditions = this.getAllRules();
+            }
+        });
+    }
+    setEvaluators(evaluators) {
+        this.evaluators = Object.assign(Object.assign({}, this.evaluators), evaluators);
+    }
+    getEvaluators() {
+        return this.evaluators;
+    }
+    // ----------------------------------------------------
+    evaluateRule(ruleId, context) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const ruleRef = this.getRuleById(ruleId);
+            context = context || this.context;
+            context["getEvaluator"] = this.getEvaluator;
+            if (ruleRef) {
+                const evaluator = yield this.getEvaluator(ruleRef.type);
+                if (evaluator) {
+                    return yield evaluator(context, ruleRef.parameters);
+                }
+            }
+            else {
+                const evaluator = yield this.getEvaluator(ruleId);
+                if (evaluator) {
+                    return yield evaluator(context);
+                }
+            }
+        });
+    }
+    getRuleById(id) {
+        return this.conditions[id] ? Object.assign({}, this.conditions[id]) : null;
+    }
+    getAllRules() {
+        return this.appConfigService.conditons;
+    }
+}
+EvaluatorsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvaluatorsService, deps: [{ token: NuxeoService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+EvaluatorsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvaluatorsService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvaluatorsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: function () { return [{ type: NuxeoService }, { type: AppConfigService }]; } });
+
+/**
+ * Permission directive shows or hides an element,
+ * based on a predefined structured condition object in the [conditions.json]{@link ../additional-documentation/conditions-file.html} file.
+ * it will evaluate the rule and shows or hides an element based on the result.
+ * this directive can evaluate rules against a document object as well,
+ * check [conditions.json]{@link ../additional-documentation/conditions-file.html} for more information
+ * @example
+ * <div *permission="{ name: 'conditionKey', entity: nuxeoDocumentObject }">
+ *   Element with permissions
+ *  </duv>
+ *  <div *permission="{ name: 'conditionKey2' }">
+ *   Element with permissions 2
+ *  </duv>
+ * @title
+ * Permission
+ */
+class PermissionsDirective {
+    constructor(nuxeoService, eltRef, viewContainerRef, templateRef, appConfigService, evaluatorsService) {
+        this.nuxeoService = nuxeoService;
+        this.eltRef = eltRef;
+        this.viewContainerRef = viewContainerRef;
+        this.templateRef = templateRef;
+        this.appConfigService = appConfigService;
+        this.evaluatorsService = evaluatorsService;
+        this.isVisible = false;
+        this.context = { entity: null, getEvaluator: null, user: null };
+    }
+    ngOnInit() {
+        this.context.getEvaluator = this.evaluatorsService.getEvaluator;
+        if (!this.permission.name) {
+            if (!this.isVisible) {
+                this.isVisible = true;
+                this.viewContainerRef.createEmbeddedView(this.templateRef);
+            }
+        }
+        else {
+            this.context.entity = this.permission.entity;
+            this.context.user = this.permission.user || this.nuxeoService.nuxeoClient.user;
+            this.evaluatorsService.evaluateRule(this.permission.name, this.context).then((result) => {
+                if (result) {
+                    if (!this.isVisible) {
+                        this.isVisible = true;
+                        this.viewContainerRef.createEmbeddedView(this.templateRef);
+                    }
+                }
+                else {
+                    this.isVisible = false;
+                    this.viewContainerRef.clear();
+                }
+            });
+        }
+    }
+}
+PermissionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PermissionsDirective, deps: [{ token: NuxeoService }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: AppConfigService }, { token: EvaluatorsService }], target: i0.ɵɵFactoryTarget.Directive });
+PermissionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: PermissionsDirective, selector: "[permission]", inputs: { permission: "permission" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PermissionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[permission]'
+                }]
+        }], ctorParameters: function () { return [{ type: NuxeoService }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: AppConfigService }, { type: EvaluatorsService }]; }, propDecorators: { permission: [{
+                type: Input
+            }] } });
+
+class AppHasRoleDirective {
+    constructor(viewContainerRef, templateRef, nuxeoService) {
+        this.viewContainerRef = viewContainerRef;
+        this.templateRef = templateRef;
+        this.nuxeoService = nuxeoService;
+        this.stop$ = new Subject();
+        this.isVisible = false;
+    }
+    ngOnInit() {
+        var _a;
+        if ((_a = this.appHasRole) === null || _a === void 0 ? void 0 : _a.role) {
+            this.nuxeoService.isUserInRole(this.appHasRole.role, this.appHasRole.code).subscribe(data => {
+                if (data || !this.appHasRole) {
+                    // If it is already visible (which can happen if
+                    // his roles changed) we do not need to add it a second time
+                    if (!this.isVisible) {
+                        // We update the `isVisible` property and add the
+                        // templateRef to the view using the
+                        // 'createEmbeddedView' method of the viewContainerRef
+                        this.isVisible = true;
+                        this.viewContainerRef.createEmbeddedView(this.templateRef);
+                    }
+                }
+                else {
+                    // If the user does not have the role,
+                    // we update the `isVisible` property and clear
+                    // the contents of the viewContainerRef
+                    this.isVisible = false;
+                    this.viewContainerRef.clear();
+                }
+            });
+        }
+        else {
+            if (!this.isVisible) {
+                // We update the `isVisible` property and add the
+                // templateRef to the view using the
+                // 'createEmbeddedView' method of the viewContainerRef
+                this.isVisible = true;
+                this.viewContainerRef.createEmbeddedView(this.templateRef);
+            }
+        }
+    }
+    ngOnChanges() {
+        this.ngOnInit();
+    }
+}
+AppHasRoleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AppHasRoleDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: NuxeoService }], target: i0.ɵɵFactoryTarget.Directive });
+AppHasRoleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AppHasRoleDirective, selector: "[appHasRole]", inputs: { appHasRole: "appHasRole" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AppHasRoleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appHasRole]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: NuxeoService }]; }, propDecorators: { appHasRole: [{
+                type: Input
+            }] } });
+
+class DragAndDropDirective {
+    constructor() {
+        this.fileDroped = new EventEmitter();
+    }
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    onDrop(evt) {
+        let files = [];
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (evt.dataTransfer.files.length) {
+            for (const file of evt.dataTransfer.files) {
+                files.push(file);
+            }
+            this.fileDroped.emit(files);
+        }
+    }
+}
+DragAndDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DragAndDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DragAndDropDirective, selector: "[appDragAndDrop]", outputs: { fileDroped: "fileDroped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DragAndDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appDragAndDrop]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { fileDroped: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+/**
+ * @title
+ * Directives Module
+ */
+class DirectiveModule {
+}
+DirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DirectiveModule, declarations: [ClickOutsideDirective,
+        SetRtlDirective,
+        PermissionsDirective,
+        SetDirRtlDirective,
+        AppHasRoleDirective,
+        DragAndDropDirective], imports: [CommonModule], exports: [ClickOutsideDirective,
+        SetRtlDirective,
+        PermissionsDirective,
+        SetDirRtlDirective,
+        AppHasRoleDirective,
+        DragAndDropDirective] });
+DirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DirectiveModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ClickOutsideDirective,
+                        SetRtlDirective,
+                        PermissionsDirective,
+                        SetDirRtlDirective,
+                        AppHasRoleDirective,
+                        DragAndDropDirective
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        ClickOutsideDirective,
+                        SetRtlDirective,
+                        PermissionsDirective,
+                        SetDirRtlDirective,
+                        AppHasRoleDirective,
+                        DragAndDropDirective
+                    ],
+                    providers: []
+                }]
+        }] });
+
+class NuxeoDialogModule {
+}
+NuxeoDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NuxeoDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogModule, declarations: [NdfNuxeoDialog, NdfConfirmationDialogComponent], imports: [CommonModule,
+        TranslateModule,
+        MatIconModule,
+        MatDialogModule,
+        MatTooltipModule,
+        DirectiveModule], exports: [NdfNuxeoDialog, NdfConfirmationDialogComponent] });
+NuxeoDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogModule, imports: [[
+            CommonModule,
+            TranslateModule,
+            MatIconModule,
+            MatDialogModule,
+            MatTooltipModule,
+            DirectiveModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NdfNuxeoDialog, NdfConfirmationDialogComponent],
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
+                        MatIconModule,
+                        MatDialogModule,
+                        MatTooltipModule,
+                        DirectiveModule
+                    ],
+                    exports: [NdfNuxeoDialog, NdfConfirmationDialogComponent]
+                }]
+        }] });
+
+const defaultConfirmConfig = {
+    title: 'confirmDialog.confirm',
+    message: 'confirmDialog.generalConfirmMsg',
+    icon: {
+        show: true,
+        name: 'heroicons_outline:exclamation',
+        color: 'warn'
+    },
+    actions: {
+        confirm: {
+            show: true,
+            label: 'BUTTONS.confirm',
+            color: 'warn',
+            fn: () => {
+                return of(false);
+            }
+        },
+        moreActions: []
+    }
+};
+
+var _NuxeoDialogService_instances, _NuxeoDialogService_getPanelClass;
+class NuxeoDialogService {
+    constructor(dialog) {
+        this.dialog = dialog;
+        _NuxeoDialogService_instances.add(this);
+    }
+    open(options) {
+        var _a, _b, _c, _d;
+        return this.dialog.open(options.component, {
+            width: (options === null || options === void 0 ? void 0 : options.width) || 'auto',
+            height: (options === null || options === void 0 ? void 0 : options.height) || 'auto',
+            minWidth: '35%',
+            panelClass: ['ndf-dialog', ...__classPrivateFieldGet(this, _NuxeoDialogService_instances, "m", _NuxeoDialogService_getPanelClass).call(this, options === null || options === void 0 ? void 0 : options.panelClass)],
+            disableClose: true,
+            data: Object.assign({ dialogConfig: {
+                    title: (_a = options.config) === null || _a === void 0 ? void 0 : _a.title,
+                    subTitle: (_b = options.config) === null || _b === void 0 ? void 0 : _b.subTitle,
+                    contentTemplate: (_c = options.config) === null || _c === void 0 ? void 0 : _c.contentTemplate,
+                    actionsTemplate: (_d = options.config) === null || _d === void 0 ? void 0 : _d.actionsTemplate
+                } }, (options.data || {}))
+        });
+    }
+    showConfirm(config) {
+        // Merge the user config with the default config
+        const confirmConfig = merge({}, defaultConfirmConfig, config);
+        const options = {
+            component: NdfConfirmationDialogComponent,
+            data: Object.assign({}, confirmConfig),
+            panelClass: 'ndf-confirmation-dialog-panel'
+        };
+        return this.open(options);
+    }
+}
+_NuxeoDialogService_instances = new WeakSet(), _NuxeoDialogService_getPanelClass = function _NuxeoDialogService_getPanelClass(panelClass) {
+    let classes = [''];
+    if (panelClass) {
+        classes = Array.isArray(panelClass) ? panelClass : [panelClass];
+    }
+    return classes;
+};
+NuxeoDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogService, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+NuxeoDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; } });
+
+class NuxeoMapper {
+    static schemaToModel(properties) {
+        const mappedProperties = {};
+        for (const key in properties) {
+            if (properties.hasOwnProperty(key)) {
+                const [prefix, propertyKey] = key.split(':');
+                if (!mappedProperties[prefix]) {
+                    mappedProperties[prefix] = {};
+                }
+                mappedProperties[prefix][propertyKey] =
+                    properties[key];
+            }
+        }
+        return mappedProperties;
+    }
+    static modelToSchema(model) {
+        const packedProperties = {};
+        for (const schemaKey in model) {
+            if (model.hasOwnProperty(schemaKey)) {
+                const schemaProperties = model[schemaKey];
+                for (const propertyKey in schemaProperties) {
+                    if (schemaProperties.hasOwnProperty(propertyKey)) {
+                        packedProperties[`${schemaKey}:${propertyKey}`] =
+                            schemaProperties[propertyKey];
+                    }
+                }
+            }
+        }
+        return packedProperties;
+    }
+}
+
+const ENTITY_TYPE = 'entity-type';
+
+var _HttpBaseService_http;
+class HttpBaseService {
+    constructor(injector) {
+        _HttpBaseService_http.set(this, void 0);
+        __classPrivateFieldSet(this, _HttpBaseService_http, injector.get(HttpClient), "f");
+    }
+    get environment() {
+        return EnvManager.environment;
+    }
+    get(endpointOrOptions, params = undefined, headers = undefined, responseType = undefined) {
+        var _a, _b, _c;
+        let url;
+        if (typeof endpointOrOptions === 'string') {
+            url = endpointOrOptions;
+        }
+        else {
+            const options = endpointOrOptions;
+            url = options.endpoint;
+            params = (_a = options.params) !== null && _a !== void 0 ? _a : undefined;
+            headers = (_b = options.headers) !== null && _b !== void 0 ? _b : undefined;
+            responseType = (_c = options.responseType) !== null && _c !== void 0 ? _c : undefined;
+        }
+        return __classPrivateFieldGet(this, _HttpBaseService_http, "f")
+            .get(url, { headers, params, responseType })
+            .pipe(map((response) => response), this.catchErrors());
+    }
+    post(endpointOrOptions, payload = undefined, params = undefined, headers = undefined, responseType = undefined) {
+        var _a, _b, _c, _d;
         let url;
-        if (typeof endpointOrOptions === "string") {
+        if (typeof endpointOrOptions === 'string') {
             url = endpointOrOptions;
         }
         else {
@@ -2013,7 +2446,7 @@ class HttpBaseService {
     put(endpointOrOptions, payload = undefined, params = undefined, headers = undefined, responseType = undefined) {
         var _a, _b, _c, _d;
         let url;
-        if (typeof endpointOrOptions === "string") {
+        if (typeof endpointOrOptions === 'string') {
             url = endpointOrOptions;
         }
         else {
@@ -2031,7 +2464,7 @@ class HttpBaseService {
     patch(endpointOrOptions, payload = undefined, params = undefined, headers = undefined, responseType = undefined) {
         var _a, _b, _c, _d;
         let url;
-        if (typeof endpointOrOptions === "string") {
+        if (typeof endpointOrOptions === 'string') {
             url = endpointOrOptions;
         }
         else {
@@ -2049,7 +2482,7 @@ class HttpBaseService {
     delete(endpointOrOptions, params = undefined, headers = undefined, responseType = undefined) {
         var _a, _b, _c;
         let url;
-        if (typeof endpointOrOptions === "string") {
+        if (typeof endpointOrOptions === 'string') {
             url = endpointOrOptions;
         }
         else {
@@ -2147,10 +2580,10 @@ class CacheBaseService {
             .filter((key) => {
             var _a;
             const options = {
-                cacheKey: key.replace(prefix, ""),
+                cacheKey: key.replace(prefix, ''),
                 userName: userName,
                 request: DEFAULT_CACHE_OPTIONS.REQUEST,
-                prepareDataBeforeCaching: DEFAULT_CACHE_OPTIONS.PREPARE_DATA,
+                prepareDataBeforeCaching: DEFAULT_CACHE_OPTIONS.PREPARE_DATA
             };
             const firstFetchingDate = (_a = __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_getItem).call(this, options)) === null || _a === void 0 ? void 0 : _a.firstFetchingDate;
             if (!firstFetchingDate)
@@ -2183,7 +2616,7 @@ _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = ne
         __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_setItemInMap).call(this, options.cacheKey, Object.assign(Object.assign({}, cachedItem), { fetchingItemsFromTheServer: false, onFinishFetching: new Subject(), request: options.request }));
         const params = {
             [options.pageKey]: 0,
-            [options.minCompareDateKey]: __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_add1SecondToModifiedDate).call(this, new Date(__classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].lastModifiedDate)).toISOString(),
+            [options.minCompareDateKey]: __classPrivateFieldGet(this, _CacheBaseService_instances, "m", _CacheBaseService_add1SecondToModifiedDate).call(this, new Date(__classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].lastModifiedDate)).toISOString()
         };
         __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[options.cacheKey].params = params;
         observable = options.request(params);
@@ -2213,7 +2646,7 @@ _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = ne
                 data: _fetchedItems.data,
                 lastModifiedDate: _fetchedItems.lastModifiedDate,
                 firstFetchingDate: _fetchedItems.firstFetchingDate,
-                resultsCount: _fetchedItems[options.resultsCount],
+                resultsCount: _fetchedItems[options.resultsCount]
             }, options);
         }
         return _fetchedItems;
@@ -2221,7 +2654,7 @@ _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = ne
         const result = _cloneDeep({
             [options.mappedDataKey]: res.data,
             [options.lastModifiedDateKey]: res.lastModifiedDate,
-            [options.resultsCount]: res[options.resultsCount],
+            [options.resultsCount]: res[options.resultsCount]
         });
         res.onFinishFetching.next(result);
         return result;
@@ -2342,14 +2775,14 @@ _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = ne
     DEFAULT_TTL_CONFIG.UNIT =
         ((_d = (_c = EnvManager.environment) === null || _c === void 0 ? void 0 : _c.cache) === null || _d === void 0 ? void 0 : _d.ttlUnit) || DEFAULT_TTL_CONFIG.UNIT;
     DEFAULT_TTL_CONFIG.AUTO_CHECK =
-        ((_f = (_e = EnvManager.environment) === null || _e === void 0 ? void 0 : _e.cache) === null || _f === void 0 ? void 0 : _f.autoCheck) == "YES";
+        ((_f = (_e = EnvManager.environment) === null || _e === void 0 ? void 0 : _e.cache) === null || _f === void 0 ? void 0 : _f.autoCheck) == 'YES';
     DEFAULT_TTL_CONFIG.RETRY =
         ((_h = (_g = EnvManager.environment) === null || _g === void 0 ? void 0 : _g.cache) === null || _h === void 0 ? void 0 : _h.retry) || DEFAULT_TTL_CONFIG.RETRY;
 }, _CacheBaseService_add1SecondToModifiedDate = function _CacheBaseService_add1SecondToModifiedDate(date) {
     let newDate = new Date(date.getTime());
     newDate.setSeconds(newDate.getSeconds() + 1);
     return newDate;
-}, _CacheBaseService_clear = function _CacheBaseService_clear(userName, keyOrAll = "") {
+}, _CacheBaseService_clear = function _CacheBaseService_clear(userName, keyOrAll = '') {
     Object.keys(window.localStorage)
         .filter((q) => q.startsWith(`${userName}__${DEFAULT_CACHE_OPTIONS.PREFIX}${keyOrAll}`))
         .forEach((key) => {
@@ -2368,11 +2801,11 @@ _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = ne
 }, _CacheBaseService_setItemInMap = function _CacheBaseService_setItemInMap(key, val) {
     const empty = {
         data: [],
-        firstFetchingDate: "",
-        lastModifiedDate: "",
+        firstFetchingDate: '',
+        lastModifiedDate: '',
         resultsCount: 0,
         fetchingItemsFromTheServer: false,
-        onFinishFetching: new Subject(),
+        onFinishFetching: new Subject()
     };
     let value = val ? val : empty;
     __classPrivateFieldGet(this, _CacheBaseService_fetchedItems, "f")[key] = value;
@@ -2396,11 +2829,11 @@ _CacheBaseService_fetchedItems = new WeakMap(), _CacheBaseService_instances = ne
     }
 };
 CacheBaseService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CacheBaseService, deps: [{ token: UserPreferencesService }, { token: UtilityService }], target: i0.ɵɵFactoryTarget.Injectable });
-CacheBaseService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CacheBaseService, providedIn: "root" });
+CacheBaseService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CacheBaseService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CacheBaseService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: "root",
+                    providedIn: 'root'
                 }]
         }], ctorParameters: function () { return [{ type: UserPreferencesService }, { type: UtilityService }]; } });
 
@@ -2457,7 +2890,7 @@ class BaseService extends HttpBaseService {
     automation(operationOrOptions, input = undefined, params = undefined, context = undefined, headers = undefined, isCustomAutomation = false) {
         var _a, _b, _c, _d;
         let operation;
-        if (typeof operationOrOptions === "string") {
+        if (typeof operationOrOptions === 'string') {
             operation = operationOrOptions;
         }
         else {
@@ -2472,7 +2905,7 @@ class BaseService extends HttpBaseService {
         return from(__classPrivateFieldGet(this, _BaseService_nuxeoService, "f").nuxeoClient
             .operation(operation, Object.assign({}, (isCustomAutomation
             ? {
-                url: `${this.environment.nuxeo}${this.environment.customAutomation}`,
+                url: `${this.environment.nuxeo}${this.environment.customAutomation}`
             }
             : {})))
             .input(input ? input : undefined)
@@ -2481,22 +2914,22 @@ class BaseService extends HttpBaseService {
             .execute({ headers: headers ? Object.assign({}, headers) : undefined })).pipe(map((response) => response), this.catchErrors());
     }
     customAutomation(operationOrOptions, input = undefined, params = undefined, context = undefined, headers = undefined) {
-        if (typeof operationOrOptions == "object") {
+        if (typeof operationOrOptions == 'object') {
             operationOrOptions.isCustomAutomation = true;
         }
         return this.automation(operationOrOptions, input, params, context, headers, true);
     }
-    request(endpointOrOptions, queryParams = undefined, headers = undefined, payload = undefined, type = "get") {
+    request(endpointOrOptions, queryParams = undefined, headers = undefined, payload = undefined, type = 'get') {
         var _a, _b, _c, _d;
         let endpoint;
-        if (typeof endpointOrOptions === "string") {
+        if (typeof endpointOrOptions === 'string') {
             endpoint = endpointOrOptions;
         }
         else {
             const options = endpointOrOptions;
             endpoint = options.endpoint;
             queryParams = (_a = options.queryParams) !== null && _a !== void 0 ? _a : undefined;
-            type = (_b = options.type) !== null && _b !== void 0 ? _b : "get";
+            type = (_b = options.type) !== null && _b !== void 0 ? _b : 'get';
             headers = (_c = options.headers) !== null && _c !== void 0 ? _c : undefined;
             payload = (_d = options.payload) !== null && _d !== void 0 ? _d : undefined;
         }
@@ -2504,13 +2937,13 @@ class BaseService extends HttpBaseService {
             .request(endpoint)
             .queryParams(queryParams ? Object.assign({}, queryParams) : undefined)[type]({
             headers: headers ? Object.assign({}, headers) : undefined,
-            body: payload ? Object.assign({}, payload) : undefined,
+            body: payload ? Object.assign({}, payload) : undefined
         })).pipe(map((response) => response), this.catchErrors());
     }
     query(pageProviderOrOptions, params = undefined, headers = undefined) {
         var _a, _b;
         let pageProvider;
-        if (typeof pageProviderOrOptions === "string") {
+        if (typeof pageProviderOrOptions === 'string') {
             pageProvider = pageProviderOrOptions;
         }
         else {
@@ -2521,7 +2954,7 @@ class BaseService extends HttpBaseService {
         }
         return __classPrivateFieldGet(this, _BaseService_callApiService, "f")
             .query(Object.assign({ pageProvider }, (params ? params : {})), {
-            headers: headers ? Object.assign({}, headers) : undefined,
+            headers: headers ? Object.assign({}, headers) : undefined
         })
             .pipe(map((response) => response), this.catchErrors());
     }
@@ -2533,7 +2966,7 @@ class BaseService extends HttpBaseService {
             return this.query({
                 pageProvider: options.pageProvider,
                 params: Object.assign(Object.assign({}, (options.params ? options.params : {})), (params ? params : {})),
-                headers: options.headers,
+                headers: options.headers
             });
         };
         return __classPrivateFieldGet(this, _BaseService_cacheBaseService, "f").startFetchingItems(Object.assign(Object.assign({}, options), { userName: this.userName, request: request }));
@@ -2545,7 +2978,7 @@ class BaseService extends HttpBaseService {
                 payload: options.payload,
                 params: Object.assign(Object.assign({}, (options.params ? options.params : {})), (params ? params : {})),
                 headers: options.headers,
-                responseType: options.responseType,
+                responseType: options.responseType
             });
         };
         return __classPrivateFieldGet(this, _BaseService_cacheBaseService, "f").startFetchingItems(Object.assign(Object.assign({}, options), { userName: this.userName, request: request }));
@@ -2572,10 +3005,10 @@ class BaseService extends HttpBaseService {
 }
 _BaseService_nuxeoService = new WeakMap(), _BaseService_callApiService = new WeakMap(), _BaseService_cacheBaseService = new WeakMap();
 BaseService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-BaseService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseService, providedIn: "root" });
+BaseService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: "root" }]
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 /**
@@ -2587,925 +3020,493 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  *   <img [attr.src]="user.avatar | secure | async" />
  * ~~~
  * @title
- * Safe URL
- */
-class SecurePipe {
-    constructor(http, sanitizer) {
-        this.http = http;
-        this.sanitizer = sanitizer;
-    }
-    /**
-     *
-     * @param url Resource URL
-     * @returns Safe URL
-     */
-    transform(url) {
-        return this.http
-            .get(url, { responseType: 'blob' }).pipe(map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val))));
-    }
-}
-SecurePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SecurePipe, deps: [{ token: i1$2.HttpClient }, { token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-SecurePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SecurePipe, name: "secure" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SecurePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'secure'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i2$3.DomSanitizer }]; } });
-
-/**
- * A component to display user avatar if exists, or initials if not
- *
- * ![Screenshot-1](../screenshots/avatar1.png) ![Screenshot-2](../screenshots/avatar2.png)
- * @title
- * User Avatar
- * @example
- *
- * <cts-avatar [user]="user"></cts-avatar>
- */
-class AvatarComponent {
-    constructor() { }
-    ngOnInit() {
-        var _a, _b, _c, _d;
-        this.stringToHslColor(`${(_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.firstName} ${(_d = (_c = this.user) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.lastName}`, 30, 80);
-    }
-    stringToHslColor(str, s, l) {
-        var hash = 0;
-        for (var i = 0; i < str.length; i++) {
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        var h = hash % 360;
-        this.backgroundColor = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
-    }
-    getInitials() {
-        var _a;
-        return ((_a = this.user) === null || _a === void 0 ? void 0 : _a.properties)
-            ? (this.user.properties.initials = [
-                this.user.properties.firstName
-                    ? this.user.properties.firstName[0].toUpperCase()
-                    : '',
-                this.user.properties.lastName
-                    ? this.user.properties.lastName[0].toUpperCase()
-                    : '',
-            ].join(''))
-            : '';
-    }
-}
-AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AvatarComponent, selector: "cts-avatar", inputs: { user: "user" }, ngImport: i0, template: "<div class=\"avatar-wrapper\">\r\n  <ng-container *ngIf=\"user?.avatar?.length; else initials\">\r\n    <img *ngIf=\"user.avatar | secure | async as obs; else initials\" [attr.src]=\"obs\" alt=\"user image\" />\r\n  </ng-container>\r\n\r\n  <ng-template #initials>\r\n    <div class=\"avatar-name \" [ngStyle]=\"{ 'background-color': backgroundColor }\">\r\n      <span>{{\r\n        this.getInitials()\r\n        }}</span>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n", styles: [".avatar-wrapper{width:100%;height:100%;border-radius:100%;overflow:hidden}.avatar-wrapper img{width:100%;height:100%;object-fit:cover}.avatar-wrapper .avatar-name{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.avatar-wrapper .avatar-name span{font-size:16px;font-weight:bold;color:#fff}.avatar-out-container{width:50px;height:50px;border-radius:50%;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}\n"], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4$1.AsyncPipe, "secure": SecurePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'cts-avatar',
-                    templateUrl: './avatar.component.html',
-                    styleUrls: ['./avatar.component.scss']
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { user: [{
-                type: Input
-            }] } });
-
-/**
- * Transforms date to localized date string
- *
- * ### In template example:
- * ~~~html
- * <!-- in template -->
- * <p>
- *  {{ dateObject | localizedDate: "EEEE, MMMM dd, yyyy"  }}
- * </p>
- * ~~~
- * @title
- * Localized Date
- *
- * @example
- * ...
- * constructor(...  private LocalizedDatePipe: localizedDatePipe ...){
- *   const localizedDateString = this.localizedDatePipe.transform(dateObject, 'EEEE, MMMM dd, yyyy');
- * }
- * ...
- */
-class LocalizedDatePipe {
-    constructor(userPreferenceService) {
-        this.userPreferenceService = userPreferenceService;
-        this.defaultLocale = LocalizedDatePipe.DEFAULT_LOCALE;
-        this.defaultFormat = LocalizedDatePipe.DEFAULT_DATE_FORMAT;
-        this.onDestroy$ = new Subject();
-        if (this.userPreferenceService) {
-            this.userPreferenceService
-                .select(UserPreferenceValues.Locale)
-                .pipe(takeUntil(this.onDestroy$))
-                .subscribe(locale => {
-                if (locale) {
-                    this.defaultLocale = locale;
-                }
-            });
-        }
-    }
-    /**
-     *
-     * @param value date object
-     * @param format format
-     * @param locale locale to convert to
-     * @returns localized date string
-     */
-    transform(value, format, locale) {
-        try {
-            const actualFormat = format || this.defaultFormat;
-            const actualLocale = locale || this.defaultLocale;
-            const datePipe = new DatePipe(actualLocale);
-            return datePipe.transform(value, actualFormat, 'GMT+3');
-        }
-        catch (e) {
-            console.warn(e);
-            return value;
-        }
-    }
-    /** @ignore */
-    ngOnDestroy() {
-        this.onDestroy$.next(true);
-        this.onDestroy$.complete();
-    }
-}
-LocalizedDatePipe.DEFAULT_LOCALE = 'en-US';
-LocalizedDatePipe.DEFAULT_DATE_FORMAT = 'dd MMMM yyyy hh:mm a';
-LocalizedDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedDatePipe, deps: [{ token: UserPreferencesService }], target: i0.ɵɵFactoryTarget.Pipe });
-LocalizedDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedDatePipe, name: "localizedDate", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedDatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'localizedDate',
-                    pure: false
-                }]
-        }], ctorParameters: function () { return [{ type: UserPreferencesService }]; } });
-
-/**
- * Transforms html string into safe html to be rendered in the view
- *
- * ### In template example:
- * ~~~html
- * <!-- in template -->
- * <span [innerHTML]="htmlString | safeHtml"></span>
- * ~~~
- * @title
- * Safe HTML
- */
-class SafeHtmlPipe {
-    constructor(sanitized) {
-        this.sanitized = sanitized;
-    }
-    /**
-     *
-     * @param value HTML String
-     * @returns Safe HTML
-     */
-    transform(value) {
-        return this.sanitized.bypassSecurityTrustHtml(value);
-    }
-}
-SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'safeHtml' }]
-        }], ctorParameters: function () { return [{ type: i2$3.DomSanitizer }]; } });
-
-/**
- * Converts date into how long time ago string
- *
- * ### In template example:
- * ~~~html
- * <!-- in template -->
- *   <span>{{ dateObject | timeAgo }}</span>
- * ~~~
- * @title
- * Time Ago
- */
-class TimeAgoPipe {
-    constructor(userPreferenceService) {
-        this.userPreferenceService = userPreferenceService;
-        this.onDestroy$ = new Subject();
-        this.userPreferenceService
-            .select(UserPreferenceValues.Locale)
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(locale => {
-            this.defaultLocale = locale || TimeAgoPipe.DEFAULT_LOCALE;
-        });
-        this.defaultDateTimeFormat = TimeAgoPipe.DEFAULT_DATE_TIME_FORMAT;
-    }
-    /**
-     *
-     * @param value date object
-     * @param locale locale to be transformed to
-     * @returns Time ago string (15 minutes ago)
-     */
-    transform(value, locale) {
-        if (value !== null && value !== undefined) {
-            const actualLocale = locale || this.defaultLocale;
-            const then = moment$5(value);
-            //const diff = moment().locale(actualLocale).diff(then, 'days');
-            return then.locale(actualLocale).fromNow();
-            // if ( diff > 7) {
-            //     const datePipe: DatePipe = new DatePipe(actualLocale);
-            //     return datePipe.transform(value, this.defaultDateTimeFormat);
-            // } else {
-            //     return then.locale(actualLocale).fromNow();
-            // }
-        }
-        return '';
-    }
-    /** @ignore */
-    ngOnDestroy() {
-        this.onDestroy$.next(true);
-        this.onDestroy$.complete();
-    }
-}
-TimeAgoPipe.DEFAULT_LOCALE = 'en-US';
-TimeAgoPipe.DEFAULT_DATE_TIME_FORMAT = 'dd/MM/yyyy HH:mm';
-TimeAgoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeAgoPipe, deps: [{ token: UserPreferencesService }], target: i0.ɵɵFactoryTarget.Pipe });
-TimeAgoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeAgoPipe, name: "timeAgo" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeAgoPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'timeAgo'
-                }]
-        }], ctorParameters: function () { return [{ type: UserPreferencesService }]; } });
-
-/**
- * Transforms array of strings to single string seperated with seperator
- *
- * ### In template example:
- * ~~~html
- * <!-- in template -->
- * <p>{{ ['string 1','string 2', 'string 3'] | multiValue : {valueSeparator:', '}}}</p>
- * ~~~
- * @title
- * Multi Value
- *
- * @example
- * ...
- * constructor(...  private MultiValuePipe: multiValuePipe ...){
- *   const MultiValueString = this.multiValuePipe.transform(['string 1','string 2', 'string 3'], ', ');
- * }
- * ...
+ * Safe URL
  */
-class MultiValuePipe {
+class SecurePipe {
+    constructor(http, sanitizer) {
+        this.http = http;
+        this.sanitizer = sanitizer;
+    }
     /**
      *
-     * @param values array of strings
-     * @param valueSeparator seperator to place between elements
-     * @returns the joining of all array items seperated with seperator
+     * @param url Resource URL
+     * @returns Safe URL
      */
-    transform(values, valueSeparator = MultiValuePipe.DEFAULT_SEPARATOR) {
-        if (values && values instanceof Array) {
-            return values.join(valueSeparator);
-        }
-        return values;
+    transform(url) {
+        return this.http
+            .get(url, { responseType: 'blob' }).pipe(map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val))));
     }
 }
-MultiValuePipe.DEFAULT_SEPARATOR = ', ';
-MultiValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MultiValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValuePipe, name: "multiValue" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValuePipe, decorators: [{
+SecurePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SecurePipe, deps: [{ token: i1$2.HttpClient }, { token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SecurePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SecurePipe, name: "secure" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SecurePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'multiValue' }]
-        }] });
+            args: [{
+                    name: 'secure'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i2$3.DomSanitizer }]; } });
 
 /**
- * transforms file size into translated appropriate units
+ * A component to display user avatar if exists, or initials if not
  *
- * ### In template example:
- * ~~~html
- * <!-- in template -->
- * <p>{{ file.sizeInBytes | FileSize}}</p>
- * ~~~
+ * ![Screenshot-1](../screenshots/avatar1.png) ![Screenshot-2](../screenshots/avatar2.png)
  * @title
- * File Size
- *
+ * User Avatar
  * @example
- * ...
- * constructor(...  private FileSizePipe: fileSizePiple ...){
- *   const sizeString = this.fileSizePiple.transform(sizeInBytes);
- * }
- * ...
+ *
+ * <cts-avatar [user]="user"></cts-avatar>
  */
-class FileSizePipe {
-    constructor(translation) {
-        this.translation = translation;
+class AvatarComponent {
+    constructor() { }
+    ngOnInit() {
+        var _a, _b, _c, _d;
+        this.stringToHslColor(`${(_b = (_a = this.user) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.firstName} ${(_d = (_c = this.user) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.lastName}`, 30, 80);
     }
-    /**
-     *
-     * @param paramByte Size in Bytes
-     * @optional @param  decimals Decimals to show
-     * @returns translated size string
-     */
-    transform(paramByte, decimals = 2) {
-        if (paramByte == null) {
-            return '';
-        }
-        const bytes = parseInt(paramByte, 10);
-        if (isNaN(bytes)) {
-            return '';
-        }
-        if (bytes === 0) {
-            return '0 ' + this.translation.instant('FILE_SIZE.BYTES');
+    stringToHslColor(str, s, l) {
+        var hash = 0;
+        for (var i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
         }
-        const k = 1024, dm = decimals || 2, sizes = ['BYTES', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k));
-        const i18nSize = this.translation.instant(`FILE_SIZE.${sizes[i]}`);
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + i18nSize;
+        var h = hash % 360;
+        this.backgroundColor = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
+    }
+    getInitials() {
+        var _a;
+        return ((_a = this.user) === null || _a === void 0 ? void 0 : _a.properties)
+            ? (this.user.properties.initials = [
+                this.user.properties.firstName
+                    ? this.user.properties.firstName[0].toUpperCase()
+                    : '',
+                this.user.properties.lastName
+                    ? this.user.properties.lastName[0].toUpperCase()
+                    : '',
+            ].join(''))
+            : '';
     }
 }
-FileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileSizePipe, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Pipe });
-FileSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileSizePipe, name: "FileSize", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileSizePipe, decorators: [{
-            type: Pipe,
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AvatarComponent, selector: "cts-avatar", inputs: { user: "user" }, ngImport: i0, template: "<div class=\"avatar-wrapper\">\r\n  <ng-container *ngIf=\"user?.avatar?.length; else initials\">\r\n    <img *ngIf=\"user.avatar | secure | async as obs; else initials\" [attr.src]=\"obs\" alt=\"user image\" />\r\n  </ng-container>\r\n\r\n  <ng-template #initials>\r\n    <div class=\"avatar-name \" [ngStyle]=\"{ 'background-color': backgroundColor }\">\r\n      <span>{{\r\n        this.getInitials()\r\n        }}</span>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n", styles: [".avatar-wrapper{width:100%;height:100%;border-radius:100%;overflow:hidden}.avatar-wrapper img{width:100%;height:100%;object-fit:cover}.avatar-wrapper .avatar-name{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.avatar-wrapper .avatar-name span{font-size:16px;font-weight:bold;color:#fff}.avatar-out-container{width:50px;height:50px;border-radius:50%;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}\n"], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i4$1.AsyncPipe, "secure": SecurePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
             args: [{
-                    name: 'FileSize',
-                    pure: false
+                    selector: 'cts-avatar',
+                    templateUrl: './avatar.component.html',
+                    styleUrls: ['./avatar.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: TranslationService }]; } });
+        }], ctorParameters: function () { return []; }, propDecorators: { user: [{
+                type: Input
+            }] } });
 
 /**
- * Transforms and formats date into hijri
+ * Transforms date to localized date string
  *
  * ### In template example:
  * ~~~html
  * <!-- in template -->
- * <p>{{ dateObject | hijriDate : {format:'iYYYY iMMMM iD'}}}</p>
+ * <p>
+ *  {{ dateObject | localizedDate: "EEEE, MMMM dd, yyyy"  }}
+ * </p>
  * ~~~
  * @title
- * Hijri Date
+ * Localized Date
  *
  * @example
  * ...
- * constructor(...  private HijriDatePipe: hijriDatePipe ...){
- *   const formattedHijriDate = this.hijriDatePipe.transform(dateObject, 'iYYYY iMMMM iD');
+ * constructor(...  private LocalizedDatePipe: localizedDatePipe ...){
+ *   const localizedDateString = this.localizedDatePipe.transform(dateObject, 'EEEE, MMMM dd, yyyy');
  * }
  * ...
  */
-class HijriDatePipe {
-    constructor() {
-        this.defaultFormat = "iYYYY iMMMM iD";
+class LocalizedDatePipe {
+    constructor(userPreferenceService) {
+        this.userPreferenceService = userPreferenceService;
+        this.defaultLocale = LocalizedDatePipe.DEFAULT_LOCALE;
+        this.defaultFormat = LocalizedDatePipe.DEFAULT_DATE_FORMAT;
+        this.onDestroy$ = new Subject();
+        if (this.userPreferenceService) {
+            this.userPreferenceService
+                .select(UserPreferenceValues.Locale)
+                .pipe(takeUntil(this.onDestroy$))
+                .subscribe(locale => {
+                if (locale) {
+                    this.defaultLocale = locale;
+                }
+            });
+        }
     }
     /**
      *
-     * @param value Date object
-     * @param format Format
-     * @returns formatted hijri date string
+     * @param value date object
+     * @param format format
+     * @param locale locale to convert to
+     * @returns localized date string
      */
-    transform(value, format) {
-        const actualFormat = format || this.defaultFormat;
-        const m = moment_(value, 'iYYYY/iM/iD'); // Parse a Hijri date.
-        return m.format("iD iMMMM iYYYY");
-    }
-}
-HijriDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-HijriDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatePipe, name: "hijriDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'hijriDate'
-                }]
-        }] });
-
-/**
- * @title
- * Pipes Module
- */
-class PipesModule {
-}
-PipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, declarations: [SecurePipe, LocalizedDatePipe, SafeHtmlPipe, TimeAgoPipe, MultiValuePipe, FileSizePipe, HijriDatePipe], imports: [CommonModule], exports: [SecurePipe, LocalizedDatePipe, SafeHtmlPipe, TimeAgoPipe, MultiValuePipe, FileSizePipe, HijriDatePipe] });
-PipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, providers: [TimeAgoPipe, MultiValuePipe], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SecurePipe, LocalizedDatePipe, SafeHtmlPipe, TimeAgoPipe, MultiValuePipe, FileSizePipe, HijriDatePipe],
-                    imports: [CommonModule],
-                    exports: [SecurePipe, LocalizedDatePipe, SafeHtmlPipe, TimeAgoPipe, MultiValuePipe, FileSizePipe, HijriDatePipe],
-                    providers: [TimeAgoPipe, MultiValuePipe],
-                }]
-        }] });
-
-/**
- * @title
- * Avatar Module
- */
-class AvatarModule {
-}
-AvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule,
-        PipesModule], exports: [AvatarComponent] });
-AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarModule, imports: [[
-            CommonModule,
-            PipesModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AvatarComponent],
-                    imports: [
-                        CommonModule,
-                        PipesModule
-                    ],
-                    exports: [
-                        AvatarComponent
-                    ]
-                }]
-        }] });
-
-/**
- * A reusable card component to display various types of contents
- *
- * ![Screenshot-1](../screenshots/card.png)
- * @title
- * Card
- * @example
- *
- * <app-card>
- *   <h3 class="title">
- *     Card title
- *   </h3>
- *   <div class="my-toolbar">
- *     <button class="btn-primary"> Action Button </button>
- *   </div>
- *   <div class="body">
- *   </div>
- * </app-card>
- */
-class CardComponent {
-    /** enable/disable shadow */
-    constructor() {
-        /** card has no body */
-        this.noBody = false;
-        /** is card dark */
-        this.dark = false;
+    transform(value, format, locale) {
+        try {
+            const actualFormat = format || this.defaultFormat;
+            const actualLocale = locale || this.defaultLocale;
+            const datePipe = new DatePipe(actualLocale);
+            return datePipe.transform(value, actualFormat, 'GMT+3');
+        }
+        catch (e) {
+            console.warn(e);
+            return value;
+        }
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
-    ngOnInit() { }
 }
-CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CardComponent, selector: "app-card", inputs: { noBody: "noBody", dark: "dark" }, ngImport: i0, template: "<div\r\n  class=\"app-card\"\r\n  [ngClass]=\"{\r\n    'dark-app-card ': dark\r\n  }\"\r\n>\r\n  <div class=\"card-inner\">\r\n    <div\r\n      [ngClass]=\"{\r\n        hidden: title.childNodes.length == 0 && toolbar.childNodes.length == 0\r\n      }\"\r\n      class=\"card-title\"\r\n    >\r\n      <div class=\"title-padder\">\r\n        <!-- title Area -->\r\n        <span #title>\r\n          <ng-content select=\".title\"></ng-content>\r\n        </span>\r\n        <!-- toolbar Area -->\r\n        <div class=\"my-toolbar\" #toolbar>\r\n          <ng-content select=\".my-toolbar\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- body area -->\r\n    <div class=\"card-body\" *ngIf=\"!noBody\">\r\n      <ng-content select=\".body\"></ng-content>\r\n    </div>\r\n    <div class=\"no-items\">\r\n      <p class=\"message\">\r\n        <ng-content select=\".no-content\"></ng-content>\r\n      </p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.app-card{border-radius:5px;display:flex;flex-direction:column;background:#ffffff;position:relative;padding:24px 0 0}.app-card .card-inner{display:flex;flex-direction:column}.card-title{height:auto;border:0px solid;border-color:#465573;color:#465573;border-inline-start-width:8px}.card-title h1,.card-title h2,.card-title h3,.card-title h4,.card-title h5,.card-title h6,.card-title span,.card-title p{font-size:18px}.title-padder{padding:0 24px;display:flex;align-items:center;justify-content:space-between}.dark-app-card{background:#465573}.dark-app-card .card-title{border-color:#fff;color:#fff}.my-toolbar{display:flex}.my-toolbar .add-button{border-radius:5px;width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center}.my-toolbar .add-button .icon{font-size:30px;font-weight:bold}.my-toolbar .add-button .edit{font-size:25px}.no-items{display:flex;justify-content:center}.no-items .message{text-align:center;color:#b4bac6;font-size:20px}\n"], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
+LocalizedDatePipe.DEFAULT_LOCALE = 'en-US';
+LocalizedDatePipe.DEFAULT_DATE_FORMAT = 'dd MMMM yyyy hh:mm a';
+LocalizedDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedDatePipe, deps: [{ token: UserPreferencesService }], target: i0.ɵɵFactoryTarget.Pipe });
+LocalizedDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedDatePipe, name: "localizedDate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedDatePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: 'app-card',
-                    templateUrl: './card.component.html',
-                    styleUrls: ['./card.component.scss'],
-                    encapsulation: ViewEncapsulation.None,
+                    name: 'localizedDate',
+                    pure: false
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { noBody: [{
-                type: Input
-            }], dark: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: UserPreferencesService }]; } });
 
 /**
+ * Transforms html string into safe html to be rendered in the view
+ *
+ * ### In template example:
+ * ~~~html
+ * <!-- in template -->
+ * <span [innerHTML]="htmlString | safeHtml"></span>
+ * ~~~
  * @title
- * Card Module
+ * Safe HTML
  */
-class CardModule {
-}
-CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardModule, declarations: [CardComponent], imports: [CommonModule], exports: [CardComponent] });
-CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CardComponent],
-                    imports: [CommonModule],
-                    exports: [CardComponent],
-                    providers: [],
-                }]
-        }] });
-
-/** @ignore */
-class ClickOutsideDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.clickOutside = new EventEmitter();
-    }
-    onClick(target) {
-        const clickedInside = this.elementRef.nativeElement.contains(target);
-        if (!clickedInside) {
-            this.clickOutside.emit(target);
-        }
-    }
-}
-ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "window:click": "onClick($event.target)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickOutside]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['window:click', ['$event.target']]
-            }] } });
-
-/** @ignore */
-class SetRtlDirective {
-    constructor(elRef, renderer, translation) {
-        this.elRef = elRef;
-        this.renderer = renderer;
-        this.translation = translation;
-        this.switchClassBasedOnLanguage();
+class SafeHtmlPipe {
+    constructor(sanitized) {
+        this.sanitized = sanitized;
     }
-    /*Switch rtl class based on the chosen language from Translation Service*/
-    switchClassBasedOnLanguage() {
-        this.translation.isArabic.subscribe((arabic) => {
-            arabic
-                ? this.renderer.addClass(this.elRef.nativeElement, 'rtl')
-                : this.renderer.removeClass(this.elRef.nativeElement, 'rtl');
-        });
+    /**
+     *
+     * @param value HTML String
+     * @returns Safe HTML
+     */
+    transform(value) {
+        return this.sanitized.bypassSecurityTrustHtml(value);
     }
 }
-SetRtlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SetRtlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Directive });
-SetRtlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: SetRtlDirective, selector: "[SetRtl]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SetRtlDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[SetRtl]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TranslationService }]; } });
+SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'safeHtml' }]
+        }], ctorParameters: function () { return [{ type: i2$3.DomSanitizer }]; } });
 
-class EvaluatorsService {
-    constructor(nuxeoService, appConfigService) {
-        this.nuxeoService = nuxeoService;
-        this.appConfigService = appConfigService;
-        this.context = { entity: null, getEvaluator: null, user: null };
-        this.asyncEvery = (arr, predicate) => __awaiter(this, void 0, void 0, function* () {
-            for (let e of arr) {
-                if (!(yield predicate(e))) {
-                    return false;
-                }
-            }
-            return true;
-        });
-        this.asyncSome = (arr, predicate) => __awaiter(this, void 0, void 0, function* () {
-            for (let e of arr) {
-                if (yield predicate(e)) {
-                    return true;
-                }
-            }
-            return false;
-        });
-        // tslint:disable-next-line:member-ordering
-        this.evaluators = {
-            AND: (context, args) => __awaiter(this, void 0, void 0, function* () {
-                if (!args || args.length === 0) {
-                    return false;
-                }
-                return yield this.asyncEvery(args, (arg) => __awaiter(this, void 0, void 0, function* () {
-                    const evaluator = yield context.getEvaluator(arg.value);
-                    if (!evaluator) {
-                        console.warn("evaluator not found: " + arg.value);
-                        return false;
-                    }
-                    return yield evaluator(context, arg.parameters || []);
-                }));
-            }),
-            OR: (context, args) => __awaiter(this, void 0, void 0, function* () {
-                if (!args || args.length === 0) {
-                    return false;
-                }
-                return yield this.asyncSome(args, (arg) => __awaiter(this, void 0, void 0, function* () {
-                    const evaluator = yield context.getEvaluator(arg.value);
-                    if (!evaluator) {
-                        console.warn("evaluator not found: " + arg.value);
-                        return false;
-                    }
-                    const res = yield evaluator(context, arg.parameters || []);
-                    return res;
-                }));
-            }),
-            isStatus: (context, args) => __awaiter(this, void 0, void 0, function* () {
-                if (args.indexOf(context.entity.state) > -1) {
-                    return true;
-                }
-                else {
-                    return false;
-                }
-            }),
-            isCreator: (context, args) => __awaiter(this, void 0, void 0, function* () {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
-                //check if user loged in is the creator of that corresp
-                let owner;
-                if ((_b = (_a = context.entity.properties.owner) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.username) {
-                    owner = (_d = (_c = context.entity.properties.owner) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.username;
-                }
-                else if ((_f = (_e = context.entity.properties["corr:owner"]) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.username) {
-                    owner = (_h = (_g = context.entity.properties["corr:owner"]) === null || _g === void 0 ? void 0 : _g.properties) === null || _h === void 0 ? void 0 : _h.username;
-                }
-                else if (context.entity.properties.owner) {
-                    owner = context.entity.properties.owner;
-                }
-                else if (context.entity.properties["corr:owner"]) {
-                    owner = context.entity.properties["corr:owner"];
-                }
-                if (owner === context.user.properties.username) {
-                    return true;
-                }
-                else {
-                    return false;
-                }
-            }),
-            isUserInrole: (context, args) => __awaiter(this, void 0, void 0, function* () {
-                const result = yield this.nuxeoService
-                    .isUserInRole(args, "")
-                    .pipe(first())
-                    .toPromise();
-                return result;
-            }),
-        };
-        this.getEvaluator = (key) => __awaiter(this, void 0, void 0, function* () {
-            const eva = this.evaluators;
-            if (key && key.startsWith("!")) {
-                const fn = eva[key.substring(1)];
-                return (context, args) => __awaiter(this, void 0, void 0, function* () {
-                    const result = yield fn(context, ...args);
-                    return !result;
-                });
-            }
-            return eva[key];
-        });
-        this.appConfigService.configLoaded.subscribe((ready) => {
-            if (ready) {
-                this.conditions = this.getAllRules();
-            }
-        });
-    }
-    setEvaluators(evaluators) {
-        this.evaluators = Object.assign(Object.assign({}, this.evaluators), evaluators);
-    }
-    getEvaluators() {
-        return this.evaluators;
-    }
-    // ----------------------------------------------------
-    evaluateRule(ruleId, context) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const ruleRef = this.getRuleById(ruleId);
-            context = context || this.context;
-            context["getEvaluator"] = this.getEvaluator;
-            if (ruleRef) {
-                const evaluator = yield this.getEvaluator(ruleRef.type);
-                if (evaluator) {
-                    return yield evaluator(context, ruleRef.parameters);
-                }
-            }
-            else {
-                const evaluator = yield this.getEvaluator(ruleId);
-                if (evaluator) {
-                    return yield evaluator(context);
-                }
-            }
+/**
+ * Converts date into how long time ago string
+ *
+ * ### In template example:
+ * ~~~html
+ * <!-- in template -->
+ *   <span>{{ dateObject | timeAgo }}</span>
+ * ~~~
+ * @title
+ * Time Ago
+ */
+class TimeAgoPipe {
+    constructor(userPreferenceService) {
+        this.userPreferenceService = userPreferenceService;
+        this.onDestroy$ = new Subject();
+        this.userPreferenceService
+            .select(UserPreferenceValues.Locale)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(locale => {
+            this.defaultLocale = locale || TimeAgoPipe.DEFAULT_LOCALE;
         });
+        this.defaultDateTimeFormat = TimeAgoPipe.DEFAULT_DATE_TIME_FORMAT;
     }
-    getRuleById(id) {
-        return this.conditions[id] ? Object.assign({}, this.conditions[id]) : null;
+    /**
+     *
+     * @param value date object
+     * @param locale locale to be transformed to
+     * @returns Time ago string (15 minutes ago)
+     */
+    transform(value, locale) {
+        if (value !== null && value !== undefined) {
+            const actualLocale = locale || this.defaultLocale;
+            const then = moment$5(value);
+            //const diff = moment().locale(actualLocale).diff(then, 'days');
+            return then.locale(actualLocale).fromNow();
+            // if ( diff > 7) {
+            //     const datePipe: DatePipe = new DatePipe(actualLocale);
+            //     return datePipe.transform(value, this.defaultDateTimeFormat);
+            // } else {
+            //     return then.locale(actualLocale).fromNow();
+            // }
+        }
+        return '';
     }
-    getAllRules() {
-        return this.appConfigService.conditons;
+    /** @ignore */
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 }
-EvaluatorsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvaluatorsService, deps: [{ token: NuxeoService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-EvaluatorsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvaluatorsService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvaluatorsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: "root" }]
-        }], ctorParameters: function () { return [{ type: NuxeoService }, { type: AppConfigService }]; } });
+TimeAgoPipe.DEFAULT_LOCALE = 'en-US';
+TimeAgoPipe.DEFAULT_DATE_TIME_FORMAT = 'dd/MM/yyyy HH:mm';
+TimeAgoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeAgoPipe, deps: [{ token: UserPreferencesService }], target: i0.ɵɵFactoryTarget.Pipe });
+TimeAgoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeAgoPipe, name: "timeAgo" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeAgoPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'timeAgo'
+                }]
+        }], ctorParameters: function () { return [{ type: UserPreferencesService }]; } });
 
 /**
- * Permission directive shows or hides an element,
- * based on a predefined structured condition object in the [conditions.json]{@link ../additional-documentation/conditions-file.html} file.
- * it will evaluate the rule and shows or hides an element based on the result.
- * this directive can evaluate rules against a document object as well,
- * check [conditions.json]{@link ../additional-documentation/conditions-file.html} for more information
+ * Transforms array of strings to single string seperated with seperator
+ *
+ * ### In template example:
+ * ~~~html
+ * <!-- in template -->
+ * <p>{{ ['string 1','string 2', 'string 3'] | multiValue : {valueSeparator:', '}}}</p>
+ * ~~~
+ * @title
+ * Multi Value
+ *
  * @example
- * <div *permission="{ name: 'conditionKey', entity: nuxeoDocumentObject }">
- *   Element with permissions
- *  </duv>
- *  <div *permission="{ name: 'conditionKey2' }">
- *   Element with permissions 2
- *  </duv>
+ * ...
+ * constructor(...  private MultiValuePipe: multiValuePipe ...){
+ *   const MultiValueString = this.multiValuePipe.transform(['string 1','string 2', 'string 3'], ', ');
+ * }
+ * ...
+ */
+class MultiValuePipe {
+    /**
+     *
+     * @param values array of strings
+     * @param valueSeparator seperator to place between elements
+     * @returns the joining of all array items seperated with seperator
+     */
+    transform(values, valueSeparator = MultiValuePipe.DEFAULT_SEPARATOR) {
+        if (values && values instanceof Array) {
+            return values.join(valueSeparator);
+        }
+        return values;
+    }
+}
+MultiValuePipe.DEFAULT_SEPARATOR = ', ';
+MultiValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MultiValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValuePipe, name: "multiValue" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MultiValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'multiValue' }]
+        }] });
+
+/**
+ * transforms file size into translated appropriate units
+ *
+ * ### In template example:
+ * ~~~html
+ * <!-- in template -->
+ * <p>{{ file.sizeInBytes | FileSize}}</p>
+ * ~~~
  * @title
- * Permission
+ * File Size
+ *
+ * @example
+ * ...
+ * constructor(...  private FileSizePipe: fileSizePiple ...){
+ *   const sizeString = this.fileSizePiple.transform(sizeInBytes);
+ * }
+ * ...
  */
-class PermissionsDirective {
-    constructor(nuxeoService, eltRef, viewContainerRef, templateRef, appConfigService, evaluatorsService) {
-        this.nuxeoService = nuxeoService;
-        this.eltRef = eltRef;
-        this.viewContainerRef = viewContainerRef;
-        this.templateRef = templateRef;
-        this.appConfigService = appConfigService;
-        this.evaluatorsService = evaluatorsService;
-        this.isVisible = false;
-        this.context = { entity: null, getEvaluator: null, user: null };
+class FileSizePipe {
+    constructor(translation) {
+        this.translation = translation;
     }
-    ngOnInit() {
-        this.context.getEvaluator = this.evaluatorsService.getEvaluator;
-        if (!this.permission.name) {
-            if (!this.isVisible) {
-                this.isVisible = true;
-                this.viewContainerRef.createEmbeddedView(this.templateRef);
-            }
+    /**
+     *
+     * @param paramByte Size in Bytes
+     * @optional @param  decimals Decimals to show
+     * @returns translated size string
+     */
+    transform(paramByte, decimals = 2) {
+        if (paramByte == null) {
+            return '';
         }
-        else {
-            this.context.entity = this.permission.entity;
-            this.context.user = this.permission.user || this.nuxeoService.nuxeoClient.user;
-            this.evaluatorsService.evaluateRule(this.permission.name, this.context).then((result) => {
-                if (result) {
-                    if (!this.isVisible) {
-                        this.isVisible = true;
-                        this.viewContainerRef.createEmbeddedView(this.templateRef);
-                    }
-                }
-                else {
-                    this.isVisible = false;
-                    this.viewContainerRef.clear();
-                }
-            });
+        const bytes = parseInt(paramByte, 10);
+        if (isNaN(bytes)) {
+            return '';
+        }
+        if (bytes === 0) {
+            return '0 ' + this.translation.instant('FILE_SIZE.BYTES');
         }
+        const k = 1024, dm = decimals || 2, sizes = ['BYTES', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k));
+        const i18nSize = this.translation.instant(`FILE_SIZE.${sizes[i]}`);
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + i18nSize;
     }
 }
-PermissionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PermissionsDirective, deps: [{ token: NuxeoService }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: AppConfigService }, { token: EvaluatorsService }], target: i0.ɵɵFactoryTarget.Directive });
-PermissionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: PermissionsDirective, selector: "[permission]", inputs: { permission: "permission" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PermissionsDirective, decorators: [{
-            type: Directive,
+FileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileSizePipe, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Pipe });
+FileSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileSizePipe, name: "FileSize", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileSizePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: '[permission]'
+                    name: 'FileSize',
+                    pure: false
                 }]
-        }], ctorParameters: function () { return [{ type: NuxeoService }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: AppConfigService }, { type: EvaluatorsService }]; }, propDecorators: { permission: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: TranslationService }]; } });
 
-/** @ignore */
-class SetDirRtlDirective {
-    constructor(elRef, renderer, translation) {
-        this.elRef = elRef;
-        this.renderer = renderer;
-        this.translation = translation;
-        this.switchDirBasedOnLanguage();
+/**
+ * Transforms and formats date into hijri
+ *
+ * ### In template example:
+ * ~~~html
+ * <!-- in template -->
+ * <p>{{ dateObject | hijriDate : {format:'iYYYY iMMMM iD'}}}</p>
+ * ~~~
+ * @title
+ * Hijri Date
+ *
+ * @example
+ * ...
+ * constructor(...  private HijriDatePipe: hijriDatePipe ...){
+ *   const formattedHijriDate = this.hijriDatePipe.transform(dateObject, 'iYYYY iMMMM iD');
+ * }
+ * ...
+ */
+class HijriDatePipe {
+    constructor() {
+        this.defaultFormat = "iYYYY iMMMM iD";
     }
-    switchDirBasedOnLanguage() {
-        this.translation.isArabic.subscribe((arabic) => {
-            arabic
-                ? this.renderer.setAttribute(this.elRef.nativeElement, 'dir', 'rtl')
-                : this.renderer.setAttribute(this.elRef.nativeElement, 'dir', 'ltr');
-        });
+    /**
+     *
+     * @param value Date object
+     * @param format Format
+     * @returns formatted hijri date string
+     */
+    transform(value, format) {
+        const actualFormat = format || this.defaultFormat;
+        const m = moment_(value, 'iYYYY/iM/iD'); // Parse a Hijri date.
+        return m.format("iD iMMMM iYYYY");
     }
 }
-SetDirRtlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SetDirRtlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Directive });
-SetDirRtlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: SetDirRtlDirective, selector: "[SetDirRtl]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SetDirRtlDirective, decorators: [{
-            type: Directive,
+HijriDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+HijriDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatePipe, name: "hijriDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'hijriDate'
+                }]
+        }] });
+
+/**
+ * @title
+ * Pipes Module
+ */
+class PipesModule {
+}
+PipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, declarations: [SecurePipe, LocalizedDatePipe, SafeHtmlPipe, TimeAgoPipe, MultiValuePipe, FileSizePipe, HijriDatePipe], imports: [CommonModule], exports: [SecurePipe, LocalizedDatePipe, SafeHtmlPipe, TimeAgoPipe, MultiValuePipe, FileSizePipe, HijriDatePipe] });
+PipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, providers: [TimeAgoPipe, MultiValuePipe], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: '[SetDirRtl]',
+                    declarations: [SecurePipe, LocalizedDatePipe, SafeHtmlPipe, TimeAgoPipe, MultiValuePipe, FileSizePipe, HijriDatePipe],
+                    imports: [CommonModule],
+                    exports: [SecurePipe, LocalizedDatePipe, SafeHtmlPipe, TimeAgoPipe, MultiValuePipe, FileSizePipe, HijriDatePipe],
+                    providers: [TimeAgoPipe, MultiValuePipe],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TranslationService }]; } });
+        }] });
 
-class AppHasRoleDirective {
-    constructor(viewContainerRef, templateRef, nuxeoService) {
-        this.viewContainerRef = viewContainerRef;
-        this.templateRef = templateRef;
-        this.nuxeoService = nuxeoService;
-        this.stop$ = new Subject();
-        this.isVisible = false;
-    }
-    ngOnInit() {
-        var _a;
-        if ((_a = this.appHasRole) === null || _a === void 0 ? void 0 : _a.role) {
-            this.nuxeoService.isUserInRole(this.appHasRole.role, this.appHasRole.code).subscribe(data => {
-                if (data || !this.appHasRole) {
-                    // If it is already visible (which can happen if
-                    // his roles changed) we do not need to add it a second time
-                    if (!this.isVisible) {
-                        // We update the `isVisible` property and add the
-                        // templateRef to the view using the
-                        // 'createEmbeddedView' method of the viewContainerRef
-                        this.isVisible = true;
-                        this.viewContainerRef.createEmbeddedView(this.templateRef);
-                    }
-                }
-                else {
-                    // If the user does not have the role,
-                    // we update the `isVisible` property and clear
-                    // the contents of the viewContainerRef
-                    this.isVisible = false;
-                    this.viewContainerRef.clear();
-                }
-            });
-        }
-        else {
-            if (!this.isVisible) {
-                // We update the `isVisible` property and add the
-                // templateRef to the view using the
-                // 'createEmbeddedView' method of the viewContainerRef
-                this.isVisible = true;
-                this.viewContainerRef.createEmbeddedView(this.templateRef);
-            }
-        }
-    }
-    ngOnChanges() {
-        this.ngOnInit();
-    }
+/**
+ * @title
+ * Avatar Module
+ */
+class AvatarModule {
 }
-AppHasRoleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AppHasRoleDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: NuxeoService }], target: i0.ɵɵFactoryTarget.Directive });
-AppHasRoleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AppHasRoleDirective, selector: "[appHasRole]", inputs: { appHasRole: "appHasRole" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AppHasRoleDirective, decorators: [{
-            type: Directive,
+AvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule,
+        PipesModule], exports: [AvatarComponent] });
+AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarModule, imports: [[
+            CommonModule,
+            PipesModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AvatarModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: '[appHasRole]'
+                    declarations: [AvatarComponent],
+                    imports: [
+                        CommonModule,
+                        PipesModule
+                    ],
+                    exports: [
+                        AvatarComponent
+                    ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: NuxeoService }]; }, propDecorators: { appHasRole: [{
-                type: Input
-            }] } });
+        }] });
 
-class DragAndDropDirective {
+/**
+ * A reusable card component to display various types of contents
+ *
+ * ![Screenshot-1](../screenshots/card.png)
+ * @title
+ * Card
+ * @example
+ *
+ * <app-card>
+ *   <h3 class="title">
+ *     Card title
+ *   </h3>
+ *   <div class="my-toolbar">
+ *     <button class="btn-primary"> Action Button </button>
+ *   </div>
+ *   <div class="body">
+ *   </div>
+ * </app-card>
+ */
+class CardComponent {
+    /** enable/disable shadow */
     constructor() {
-        this.fileDroped = new EventEmitter();
-    }
-    onDragOver(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-    }
-    onDragLeave(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-    }
-    onDrop(evt) {
-        let files = [];
-        evt.preventDefault();
-        evt.stopPropagation();
-        if (evt.dataTransfer.files.length) {
-            for (const file of evt.dataTransfer.files) {
-                files.push(file);
-            }
-            this.fileDroped.emit(files);
-        }
+        /** card has no body */
+        this.noBody = false;
+        /** is card dark */
+        this.dark = false;
     }
+    ngOnInit() { }
 }
-DragAndDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DragAndDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DragAndDropDirective, selector: "[appDragAndDrop]", outputs: { fileDroped: "fileDroped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DragAndDropDirective, decorators: [{
-            type: Directive,
+CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CardComponent, selector: "app-card", inputs: { noBody: "noBody", dark: "dark" }, ngImport: i0, template: "<div\r\n  class=\"app-card\"\r\n  [ngClass]=\"{\r\n    'dark-app-card ': dark\r\n  }\"\r\n>\r\n  <div class=\"card-inner\">\r\n    <div\r\n      [ngClass]=\"{\r\n        hidden: title.childNodes.length == 0 && toolbar.childNodes.length == 0\r\n      }\"\r\n      class=\"card-title\"\r\n    >\r\n      <div class=\"title-padder\">\r\n        <!-- title Area -->\r\n        <span #title>\r\n          <ng-content select=\".title\"></ng-content>\r\n        </span>\r\n        <!-- toolbar Area -->\r\n        <div class=\"my-toolbar\" #toolbar>\r\n          <ng-content select=\".my-toolbar\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- body area -->\r\n    <div class=\"card-body\" *ngIf=\"!noBody\">\r\n      <ng-content select=\".body\"></ng-content>\r\n    </div>\r\n    <div class=\"no-items\">\r\n      <p class=\"message\">\r\n        <ng-content select=\".no-content\"></ng-content>\r\n      </p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.app-card{border-radius:5px;display:flex;flex-direction:column;background:#ffffff;position:relative;padding:24px 0 0}.app-card .card-inner{display:flex;flex-direction:column}.card-title{height:auto;border:0px solid;border-color:#465573;color:#465573;border-inline-start-width:8px}.card-title h1,.card-title h2,.card-title h3,.card-title h4,.card-title h5,.card-title h6,.card-title span,.card-title p{font-size:18px}.title-padder{padding:0 24px;display:flex;align-items:center;justify-content:space-between}.dark-app-card{background:#465573}.dark-app-card .card-title{border-color:#fff;color:#fff}.my-toolbar{display:flex}.my-toolbar .add-button{border-radius:5px;width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center}.my-toolbar .add-button .icon{font-size:30px;font-weight:bold}.my-toolbar .add-button .edit{font-size:25px}.no-items{display:flex;justify-content:center}.no-items .message{text-align:center;color:#b4bac6;font-size:20px}\n"], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[appDragAndDrop]'
+                    selector: 'app-card',
+                    templateUrl: './card.component.html',
+                    styleUrls: ['./card.component.scss'],
+                    encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { fileDroped: [{
-                type: Output
-            }], onDragOver: [{
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }], onDragLeave: [{
-                type: HostListener,
-                args: ['dragleave', ['$event']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
+        }], ctorParameters: function () { return []; }, propDecorators: { noBody: [{
+                type: Input
+            }], dark: [{
+                type: Input
             }] } });
 
 /**
  * @title
- * Directives Module
+ * Card Module
  */
-class DirectiveModule {
+class CardModule {
 }
-DirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DirectiveModule, declarations: [ClickOutsideDirective,
-        SetRtlDirective,
-        PermissionsDirective,
-        SetDirRtlDirective,
-        AppHasRoleDirective,
-        DragAndDropDirective], imports: [CommonModule], exports: [ClickOutsideDirective,
-        SetRtlDirective,
-        PermissionsDirective,
-        SetDirRtlDirective,
-        AppHasRoleDirective,
-        DragAndDropDirective] });
-DirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DirectiveModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DirectiveModule, decorators: [{
+CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardModule, declarations: [CardComponent], imports: [CommonModule], exports: [CardComponent] });
+CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        ClickOutsideDirective,
-                        SetRtlDirective,
-                        PermissionsDirective,
-                        SetDirRtlDirective,
-                        AppHasRoleDirective,
-                        DragAndDropDirective
-                    ],
+                    declarations: [CardComponent],
                     imports: [CommonModule],
-                    exports: [
-                        ClickOutsideDirective,
-                        SetRtlDirective,
-                        PermissionsDirective,
-                        SetDirRtlDirective,
-                        AppHasRoleDirective,
-                        DragAndDropDirective
-                    ],
-                    providers: []
+                    exports: [CardComponent],
+                    providers: [],
                 }]
         }] });
 
@@ -28544,54 +28545,6 @@ const createDiagramEditor = (container, injector, config) => __awaiter(void 0, v
     };
 });
 
-function serializePort(port) {
-    return {
-        id: port.id,
-        label: port.label,
-        socket: {
-            name: port.socket.name,
-        },
-    };
-}
-function serializeControl(control) {
-    if (control instanceof ClassicPreset.InputControl) {
-        return {
-            __type: 'ClassicPreset.InputControl',
-            id: control.id,
-            readonly: control.readonly,
-            type: control.type,
-            value: control.value,
-        };
-    }
-    return null;
-}
-
-function exportGraph(editor) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const data = { nodes: [] };
-        const nodes = editor.getNodes();
-        for (const node of nodes) {
-            const inputsEntries = Object.entries(node.inputs).map(([key, input]) => {
-                return [key, input && serializePort(input)];
-            });
-            const outputsEntries = Object.entries(node.outputs).map(([key, output]) => {
-                return [key, output && serializePort(output)];
-            });
-            const controlsEntries = Object.entries(node.controls).map(([key, control]) => {
-                return [key, control && serializeControl(control)];
-            });
-            // data.nodes.push({
-            //   id: node.id,
-            //   label: node.label,
-            //   outputs: Object.fromEntries(outputsEntries),
-            //   inputs: Object.fromEntries(inputsEntries),
-            //   controls: Object.fromEntries(controlsEntries),
-            // });
-        }
-        return data;
-    });
-}
-
 /**
  *
  * @param node
@@ -28684,6 +28637,28 @@ const _updateConnections = (outputs, inputs, editor) => __awaiter(void 0, void 0
     yield editor.addConnection(connection);
 });
 
+function serializePort(port) {
+    return {
+        id: port.id,
+        label: port.label,
+        socket: {
+            name: port.socket.name,
+        },
+    };
+}
+function serializeControl(control) {
+    if (control instanceof ClassicPreset.InputControl) {
+        return {
+            __type: 'ClassicPreset.InputControl',
+            id: control.id,
+            readonly: control.readonly,
+            type: control.type,
+            value: control.value,
+        };
+    }
+    return null;
+}
+
 class DiagramService {
     /**
      *
@@ -31732,5 +31707,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AvatarComponent, AvatarModule, BaseColumnComponent, BaseComponent, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CachingExpiryUnit, CallApiService, CardComponent, CardModule, ChartDataService, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CorrespondenceRelationComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomPpViewerComponent, CustomSocketComponent, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DataViewerComponent, DateFormatterService, DateHelperService, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject$1 as DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramsModule, DialogMangmentService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicSingleChartComponent, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicViewModule, ENTITY_TYPE, EXTENSION_JSONS, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FILTER_DATES_TYPE, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterComponent, FilterModule, FolderModalComponent, FolderishType, FormBuilderService, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, IN_OUT_DIRECTION, IconService, InitializationService, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizedDatePipe, MESSAGE_TYPE, MY_MOMENT_FORMATS, MainfolderService, MessageService, MomentDateAdapter, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NODE_CIRCLE_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfirmationDialogComponent, NdfNuxeoDialog, NgxHijriGregorianDatepickerModule, NoDataComponent, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, PAGINATION_MODE, PANEL_MODE, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PublishDialogComponent, PublishingDocumentService, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, RolesService, SOCKET_WIDTH, SUBSCRIPTION_STATE, SafeHtmlPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SingleActivityComponent, Socket, SpinnerComponent, StatusIconComponent, TRANSLATION_PROVIDER, TableComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TimeAgoPipe, ToastsModule, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, exportGraph, extensionJsonsFactory, filterEnabled, getConnections, getValue, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeNode, removeNodeAndConnections, serializeControl, serializePort, sortByOrder };
+export { ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AvatarComponent, AvatarModule, BaseColumnComponent, BaseComponent, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CachingExpiryUnit, CallApiService, CardComponent, CardModule, ChartDataService, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CorrespondenceRelationComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomPpViewerComponent, CustomSocketComponent, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DataViewerComponent, DateFormatterService, DateHelperService, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject$1 as DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramsModule, DialogMangmentService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicSingleChartComponent, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicViewModule, ENTITY_TYPE, EXTENSION_JSONS, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FILTER_DATES_TYPE, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterComponent, FilterModule, FolderModalComponent, FolderishType, FormBuilderService, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, IN_OUT_DIRECTION, IconService, InitializationService, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizedDatePipe, MESSAGE_TYPE, MY_MOMENT_FORMATS, MainfolderService, MessageService, MomentDateAdapter, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NODE_CIRCLE_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfirmationDialogComponent, NdfNuxeoDialog, NgxHijriGregorianDatepickerModule, NoDataComponent, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, PAGINATION_MODE, PANEL_MODE, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PublishDialogComponent, PublishingDocumentService, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, RolesService, SOCKET_WIDTH, SUBSCRIPTION_STATE, SafeHtmlPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SingleActivityComponent, Socket, SpinnerComponent, StatusIconComponent, TRANSLATION_PROVIDER, TableComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TimeAgoPipe, ToastsModule, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getConnections, getValue, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeNode, removeNodeAndConnections, serializeControl, serializePort, sortByOrder };
 //# sourceMappingURL=nuxeo-development-framework.js.map