nuxeo-development-framework 5.3.3 → 5.3.5

package/fesm2015/nuxeo-development-framework.js

@@ -12,7 +12,7 @@ import { ActivatedRoute, Router, RouterModule, RoutesRecognized } from '@angular
 import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule, TranslateStore, TranslateLoader } from '@ngx-translate/core';
 import { map, distinctUntilChanged, takeUntil, catchError, take, tap, switchMap, first, delay, retry, expand, last, debounceTime, filter as filter$1, finalize, startWith, mergeMap, toArray, reduce, concatMap } from 'rxjs/operators';
-import { BehaviorSubject, Subject, ReplaySubject, iif, of, combineLatest, Observable, from, forkJoin, isObservable, pipe, EMPTY, concat, fromEvent, interval, throwError } from 'rxjs';
+import { of, BehaviorSubject, Subject, ReplaySubject, iif, combineLatest, Observable, from, forkJoin, isObservable, pipe, EMPTY, concat, fromEvent, interval, throwError } from 'rxjs';
 import { trigger, state, style, transition, animate, AUTO_STYLE, animation, useAnimation } from '@angular/animations';
 import * as i1$1 from 'ngx-toastr';
 import { Toast, ToastrModule } from 'ngx-toastr';
@@ -53,16 +53,17 @@ import * as i6$1 from 'angular-ng-autocomplete';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import * as i2$3 from '@angular/material/core';
 import { MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
+import * as i1$6 from '@angular/cdk/clipboard';
 import { Cacheable, LocalStorageStrategy, CacheBuster } from 'ts-cacheable';
 import * as i5 from '@ng-select/ng-select';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
-import * as i1$6 from '@angular/material/form-field';
+import * as i1$7 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i7 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i6$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i1$b from '@angular/material/button';
+import * as i1$c from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -72,23 +73,23 @@ import * as i5$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i2$5 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i1$8 from '@angular/material/slide-toggle';
+import * as i1$9 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i6$3 from '@busacca/ng-pick-datetime';
 import { OWL_DATE_TIME_FORMATS, OwlDateTimeIntl, OwlDateTimeModule, OwlNativeDateTimeModule } from '@busacca/ng-pick-datetime';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import * as i3$3 from 'angular-formio';
 import { Components, FormBuilderComponent, registerCustomFormioComponent, FormioModule } from 'angular-formio';
-import * as i1$9 from 'ngx-treeview';
+import * as i1$a from 'ngx-treeview';
 import { TreeviewItem, DefaultTreeviewI18n, TreeviewConfig, TreeviewHelper, TreeviewI18n, DropdownTreeviewComponent, TreeviewModule } from 'ngx-treeview';
-import * as i1$7 from '@ng-bootstrap/ng-bootstrap';
+import * as i1$8 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDateParserFormatter, NgbDate, NgbDatepickerI18n, NgbCalendar, NgbCalendarIslamicUmalqura, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { Utils } from 'formiojs';
 import _find from 'lodash/find';
 import _isEqual from 'lodash/isEqual';
 import * as i4$2 from '@swimlane/ngx-datatable';
 import { DatatableComponent, NgxDatatableModule } from '@swimlane/ngx-datatable';
-import * as i1$a from '@angular/material/button-toggle';
+import * as i1$b from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i7$1 from '@angular/cdk/drag-drop';
@@ -112,7 +113,7 @@ import { saveAs } from 'file-saver';
 import * as i5$6 from 'devextreme-angular/ui/nested';
 import { DxiToolbarItemModule } from 'devextreme-angular/ui/nested';
 import WebViewer from '@pdftron/webviewer';
-import * as i1$c from '@angular/material/tabs';
+import * as i1$d from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i9$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -135,6 +136,10 @@ import * as i7$2 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import colorLib from '@kurkle/color';
+import * as i2$8 from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
+import * as i6$4 from '@angular/cdk/accordion';
+import { CdkAccordionModule } from '@angular/cdk/accordion';
 
 class NuxeoDevelopmentFrameworkComponent {
     constructor() { }
@@ -339,6 +344,7 @@ class UserPreferencesService {
             expandedSidenav: true
         };
         this.userPreferenceStatus = this.defaults;
+        this.clientCustomTranslateFiles = { arFile: of({}), enFile: of({}) };
         this.onChangeSubject = new BehaviorSubject(this.userPreferenceStatus);
         this.onChange = this.onChangeSubject.asObservable();
     }
@@ -1077,15 +1083,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     args: ['environment']
                 }] }, { type: i3.CookieService }, { type: RolesService }]; } });
 
+var _TranslationService_instances, _TranslationService_ClientTranslationFiles_get;
 const TRANSLATION_PROVIDER = new InjectionToken('Injection token for translation providers.');
 class TranslationService {
     constructor(translate, rendererFactory, localStorage, userPreferencesService, appConfig, nuxeoService, environment, providers) {
         this.translate = translate;
         this.rendererFactory = rendererFactory;
         this.localStorage = localStorage;
+        this.userPreferencesService = userPreferencesService;
         this.appConfig = appConfig;
         this.nuxeoService = nuxeoService;
         this.environment = environment;
+        _TranslationService_instances.add(this);
         this.isArabic = new BehaviorSubject(false);
         this.isArabic$ = this.isArabic.asObservable();
         this.translationApiName = this.appConfig.myConfiguration['translationApi'] ? this.appConfig.myConfiguration['translationApi'] : null;
@@ -1131,13 +1140,16 @@ class TranslationService {
      * @param fallback Language code to fall back to if the first one was unavailable
      */
     loadTranslation(lang, fallback) {
+        let clientTranslation;
         if (lang === Lang.Arabic) {
             this.renderer.addClass(document.body, 'rtl');
             this.isArabic.next(true);
+            clientTranslation = __classPrivateFieldGet(this, _TranslationService_instances, "a", _TranslationService_ClientTranslationFiles_get).arFile;
         }
         else {
             this.renderer.removeClass(document.body, 'rtl');
             this.isArabic.next(false);
+            clientTranslation = __classPrivateFieldGet(this, _TranslationService_instances, "a", _TranslationService_ClientTranslationFiles_get).enFile;
         }
         const arabicFile$ = this.getOrCreateTranslationFile('ar');
         const englishFile$ = this.getOrCreateTranslationFile('en');
@@ -1145,6 +1157,7 @@ class TranslationService {
             arabicFile$,
             englishFile$,
             this.translate.getTranslation(lang),
+            clientTranslation
         ]).subscribe((res) => {
             this.arabicFile = res[0];
             this.englishFile = res[1];
@@ -1152,7 +1165,7 @@ class TranslationService {
             let ArorEnFile = lang === 'en'
                 ? JSON.parse(res[1].properties['note:note'])
                 : JSON.parse(res[0].properties['note:note']);
-            this.translate.setTranslation(this.translate.currentLang, Object.assign({}, ArorEnFile), true);
+            this.translate.setTranslation(this.translate.currentLang, Object.assign(Object.assign({}, (res[3] || {})), ArorEnFile), true);
             this.onTranslationChanged(lang);
         }, () => {
             if (fallback && fallback !== lang) {
@@ -1225,6 +1238,9 @@ class TranslationService {
         }));
     }
 }
+_TranslationService_instances = new WeakSet(), _TranslationService_ClientTranslationFiles_get = function _TranslationService_ClientTranslationFiles_get() {
+    return this.userPreferencesService.clientCustomTranslateFiles;
+};
 TranslationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationService, deps: [{ token: i1.TranslateService }, { token: i0.RendererFactory2 }, { token: LocalStoragService }, { token: UserPreferencesService }, { token: AppConfigService }, { token: NuxeoService }, { token: 'environment' }, { token: TRANSLATION_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 TranslationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TranslationService, decorators: [{
@@ -1951,6 +1967,7 @@ class EvaluatorsService {
         this.nuxeoService = nuxeoService;
         this.appConfigService = appConfigService;
         this.context = { entity: null, getEvaluator: null, user: null };
+        this.userEvaluators = {};
         this.asyncEvery = (arr, predicate) => __awaiter(this, void 0, void 0, function* () {
             for (let e of arr) {
                 if (!(yield predicate(e))) {
@@ -1976,7 +1993,7 @@ class EvaluatorsService {
                 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);
+                        console.warn('evaluator not found: ' + arg.value);
                         return false;
                     }
                     return yield evaluator(context, arg.parameters || []);
@@ -1989,7 +2006,7 @@ class EvaluatorsService {
                 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);
+                        console.warn('evaluator not found: ' + arg.value);
                         return false;
                     }
                     const res = yield evaluator(context, arg.parameters || []);
@@ -2011,14 +2028,14 @@ class EvaluatorsService {
                 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 ((_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"];
+                else if (context.entity.properties['corr:owner']) {
+                    owner = context.entity.properties['corr:owner'];
                 }
                 if (owner === context.user.properties.username) {
                     return true;
@@ -2028,16 +2045,13 @@ class EvaluatorsService {
                 }
             }),
             isUserInrole: (context, args) => __awaiter(this, void 0, void 0, function* () {
-                const result = yield this.nuxeoService
-                    .isUserInRole(args, "")
-                    .pipe(first())
-                    .toPromise();
+                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("!")) {
+            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);
@@ -2053,17 +2067,21 @@ class EvaluatorsService {
         });
     }
     setEvaluators(evaluators) {
+        this.userEvaluators = evaluators;
         this.evaluators = Object.assign(Object.assign({}, this.evaluators), evaluators);
     }
     getEvaluators() {
         return this.evaluators;
     }
+    getUserEvaluators() {
+        return this.userEvaluators;
+    }
     // ----------------------------------------------------
     evaluateRule(ruleId, context) {
         return __awaiter(this, void 0, void 0, function* () {
             const ruleRef = this.getRuleById(ruleId);
             context = context || this.context;
-            context["getEvaluator"] = this.getEvaluator;
+            context['getEvaluator'] = this.getEvaluator;
             if (ruleRef) {
                 const evaluator = yield this.getEvaluator(ruleRef.type);
                 if (evaluator) {
@@ -2086,10 +2104,10 @@ class EvaluatorsService {
     }
 }
 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" });
+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" }]
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: NuxeoService }, { type: AppConfigService }]; } });
 
 /**
@@ -4018,6 +4036,233 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Output
             }] } });
 
+class FluidHeightDirective {
+    constructor(renderer, elementRef, ngZone) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this.minHeight = 0;
+        this.topOffset = 0;
+        this.subtractItems = [];
+        this.decrease = 0;
+        this.delay = 200;
+        this.cssVar = '--ndf-fluid-height';
+        this.calculate = true;
+        this._inlineStyle = false;
+        this._domElement = this.elementRef.nativeElement;
+        this._resizeListener = () => this.onResize();
+        this.ngZone.runOutsideAngular(() => {
+            window.addEventListener('resize', this._resizeListener);
+        });
+    }
+    get inlineStyle() {
+        return this._inlineStyle;
+    }
+    set inlineStyle(value) {
+        this._inlineStyle = coerceBooleanProperty(value);
+    }
+    ngAfterViewInit() {
+        this.scheduleSetHeight();
+    }
+    scheduleSetHeight(delay = this.delay) {
+        setTimeout(() => this.setHeight(), delay);
+    }
+    onResize() {
+        if (this._animationId) {
+            cancelAnimationFrame(this._animationId);
+        }
+        this._animationId = requestAnimationFrame(() => this.setHeight());
+    }
+    setHeight() {
+        if (!this.calculate) {
+            return;
+        }
+        const windowHeight = window.innerHeight;
+        const topOffset = this.topOffset || this._calcTopOffset();
+        let height = windowHeight - topOffset;
+        this.subtractItems.forEach((selector) => {
+            height -= this._getSelectorHeight(selector);
+        });
+        height = Math.max(height - this.decrease, this.minHeight);
+        if (this.inlineStyle) {
+            this.renderer.setStyle(this._domElement, 'height', `${height}px`);
+        }
+        else {
+            this.renderer.setAttribute(this._domElement, 'style', `${this.cssVar} : ${height}px`);
+        }
+    }
+    _getSelectorHeight(selector) {
+        const element = document.querySelector(selector);
+        return element ? element.clientHeight : 0;
+    }
+    _calcTopOffset() {
+        try {
+            const rect = this._domElement.getBoundingClientRect();
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            return rect.top + scrollTop;
+        }
+        catch (_a) {
+            return 0;
+        }
+    }
+    ngOnDestroy() {
+        window.removeEventListener('resize', this._resizeListener);
+    }
+}
+FluidHeightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+FluidHeightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: { minHeight: "minHeight", topOffset: ["ndfFluidHeight", "topOffset"], subtractItems: "subtractItems", decrease: "decrease", delay: "delay", cssVar: "cssVar", calculate: "calculate", inlineStyle: "inlineStyle" }, exportAs: ["ndfFluidHeight"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ndfFluidHeight]',
+                    exportAs: 'ndfFluidHeight'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { minHeight: [{
+                type: Input
+            }], topOffset: [{
+                type: Input,
+                args: ['ndfFluidHeight']
+            }], subtractItems: [{
+                type: Input
+            }], decrease: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }], cssVar: [{
+                type: Input
+            }], calculate: [{
+                type: Input
+            }], inlineStyle: [{
+                type: Input
+            }] } });
+class FluidHeightModule {
+}
+FluidHeightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FluidHeightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightModule, declarations: [FluidHeightDirective], exports: [FluidHeightDirective] });
+FluidHeightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FluidHeightDirective],
+                    exports: [FluidHeightDirective]
+                }]
+        }] });
+
+class ElementHeightDirective {
+    constructor(renderer, elementRef, ngZone) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this.cssVar = '--ele-total-height';
+        this.calculate = true;
+        this._inlineStyle = false;
+        this._domElement = this.elementRef.nativeElement;
+        this._resizeListener = () => this.onResize();
+        this.ngZone.runOutsideAngular(() => {
+            window.addEventListener('resize', this._resizeListener);
+        });
+    }
+    get inlineStyle() {
+        return this._inlineStyle;
+    }
+    set inlineStyle(value) {
+        this._inlineStyle = coerceBooleanProperty(value);
+    }
+    ngAfterViewInit() {
+        this.setHeight();
+    }
+    onResize() {
+        requestAnimationFrame(() => this.setHeight());
+    }
+    setHeight() {
+        if (!this.calculate) {
+            return;
+        }
+        const el = this._domElement;
+        const style = getComputedStyle(el);
+        const marginTop = parseFloat(style.marginTop) || 0;
+        const marginBottom = parseFloat(style.marginBottom) || 0;
+        const totalHeight = el.offsetHeight + marginTop + marginBottom;
+        const parent = el.parentElement;
+        if (!parent)
+            return;
+        if (this.inlineStyle) {
+            this.renderer.setStyle(parent, this.cssVar, `${totalHeight}px`);
+        }
+        else {
+            this.renderer.setAttribute(parent, 'style', `${this.cssVar}: ${totalHeight}px`);
+        }
+    }
+    ngOnDestroy() {
+        window.removeEventListener('resize', this._resizeListener);
+    }
+}
+ElementHeightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeightDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ElementHeightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ElementHeightDirective, selector: "[appItemHeight]", inputs: { cssVar: "cssVar", calculate: "calculate", inlineStyle: "inlineStyle" }, exportAs: ["appItemHeight"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appItemHeight]',
+                    exportAs: 'appItemHeight'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { cssVar: [{
+                type: Input
+            }], calculate: [{
+                type: Input
+            }], inlineStyle: [{
+                type: Input
+            }] } });
+class ElementHeightModule {
+}
+ElementHeightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementHeightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeightModule, declarations: [ElementHeightDirective], exports: [ElementHeightDirective] });
+ElementHeightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeightModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementHeightModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ElementHeightDirective],
+                    exports: [ElementHeightDirective]
+                }]
+        }] });
+
+class CopyToClipboardDirective {
+    constructor(clipboard) {
+        this.clipboard = clipboard;
+    }
+    onClick() {
+        if (this.textToCopy) {
+            this.clipboard.copy(this.textToCopy);
+        }
+    }
+}
+CopyToClipboardDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CopyToClipboardDirective, deps: [{ token: i1$6.Clipboard }], target: i0.ɵɵFactoryTarget.Directive });
+CopyToClipboardDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: CopyToClipboardDirective, selector: "[appCopyToClipboard]", inputs: { textToCopy: ["appCopyToClipboard", "textToCopy"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CopyToClipboardDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appCopyToClipboard]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$6.Clipboard }]; }, propDecorators: { textToCopy: [{
+                type: Input,
+                args: ['appCopyToClipboard']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+class CopyToClipboardModule {
+}
+CopyToClipboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CopyToClipboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CopyToClipboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CopyToClipboardModule, declarations: [CopyToClipboardDirective], exports: [CopyToClipboardDirective] });
+CopyToClipboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CopyToClipboardModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CopyToClipboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CopyToClipboardDirective],
+                    imports: [],
+                    exports: [CopyToClipboardDirective]
+                }]
+        }] });
+
 /**
  * @title
  * Shared UI Components
@@ -4025,7 +4270,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class LibrarySharedModule {
 }
 LibrarySharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibrarySharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LibrarySharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibrarySharedModule, declarations: [ReadMoreComponent, UserCardComponent, ButtonComponent, NoDataComponent, SpinnerComponent, ItemListComponent], imports: [AvatarModule,
+LibrarySharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibrarySharedModule, declarations: [ReadMoreComponent,
+        UserCardComponent,
+        ButtonComponent,
+        NoDataComponent,
+        SpinnerComponent,
+        ItemListComponent], imports: [AvatarModule,
         CommonModule,
         RouterModule,
         TranslateModule,
@@ -4035,13 +4285,17 @@ LibrarySharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         MatMenuModule,
         AutocompleteLibModule,
         DirectiveModule,
-        MatTooltipModule], exports: [UserCardComponent,
+        MatTooltipModule,
+        FluidHeightModule,
+        ElementHeightModule], exports: [UserCardComponent,
         ReadMoreComponent,
         TranslateModule,
         ButtonComponent,
         NoDataComponent,
         SpinnerComponent,
-        ItemListComponent] });
+        ItemListComponent,
+        FluidHeightModule,
+        ElementHeightModule] });
 LibrarySharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibrarySharedModule, imports: [[
             AvatarModule,
             CommonModule,
@@ -4053,12 +4307,23 @@ LibrarySharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
             MatMenuModule,
             AutocompleteLibModule,
             DirectiveModule,
-            MatTooltipModule
-        ], TranslateModule] });
+            MatTooltipModule,
+            FluidHeightModule,
+            ElementHeightModule
+        ], TranslateModule,
+        FluidHeightModule,
+        ElementHeightModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibrarySharedModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ReadMoreComponent, UserCardComponent, ButtonComponent, NoDataComponent, SpinnerComponent, ItemListComponent],
+                    declarations: [
+                        ReadMoreComponent,
+                        UserCardComponent,
+                        ButtonComponent,
+                        NoDataComponent,
+                        SpinnerComponent,
+                        ItemListComponent
+                    ],
                     imports: [
                         AvatarModule,
                         CommonModule,
@@ -4070,7 +4335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MatMenuModule,
                         AutocompleteLibModule,
                         DirectiveModule,
-                        MatTooltipModule
+                        MatTooltipModule,
+                        FluidHeightModule,
+                        ElementHeightModule
                     ],
                     exports: [
                         UserCardComponent,
@@ -4079,8 +4346,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         ButtonComponent,
                         NoDataComponent,
                         SpinnerComponent,
-                        ItemListComponent
-                    ],
+                        ItemListComponent,
+                        FluidHeightModule,
+                        ElementHeightModule
+                    ]
                 }]
         }] });
 
@@ -4927,7 +5196,7 @@ class DynamicFormSelectItemComponent {
     }
 }
 DynamicFormSelectItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormSelectItemComponent, deps: [{ token: i1.TranslateService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormSelectItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectItemComponent, selector: "app-dynamic-form-selectitem", inputs: { label: "label", bindValue: "bindValue", bindLabel: "bindLabel", data: "data", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", disabled: "disabled", clear: "clear", voc: "voc", vocId: "vocId", loading: "loading" }, outputs: { onSelectItems: "onSelectItems" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<ng-select\r\n  [items]=\"buffer\"\r\n  [bindLabel]=\"bindLabel\"\r\n  [bindValue]=\"bindValue\"\r\n  [placeholder]=\"placeholder\"\r\n  [multiple]=\"multiple\"\r\n  [clearable]=\"clear\"\r\n  [searchable]=\"searchable\"\r\n  [closeOnSelect]=\"closeOnSelect\"\r\n  [hideSelected]=\"hideSelectedItems\"\r\n  [searchFn]=\"onSearch\"\r\n  [loading]=\"loading\"\r\n  (scrollToEnd)=\"onScrollToEnd()\"\r\n  (change)=\"emitSelection($event)\"\r\n  [disabled]=\"disabled\"\r\n  [(ngModel)]=\"selection\"\r\n>\r\n  <!-- template for viewing options in single and multi select -->\r\n  <ng-template\r\n    ng-option-tmp\r\n    let-item=\"item\"\r\n    let-item$=\"item$\"\r\n    let-index=\"index\"\r\n  >\r\n    <div class=\"option-wrapper\">\r\n      <span class=\"check-box-wrapper\" *ngIf=\"multiple\">\r\n        <input\r\n          id=\"item-{{ index }}\"\r\n          type=\"checkbox\"\r\n          [ngModel]=\"item$.selected\"\r\n        />\r\n        <span class=\"icon-wrapper\">\r\n          <span class=\"bi bi-check2 icon\"></span>\r\n        </span>\r\n      </span>\r\n      <span *ngIf=\"!voc\" class=\"label-wrapper\">\r\n        {{ item[bindLabel] | translate }}\r\n      </span>\r\n      <span *ngIf=\"voc\" class=\"label-wrapper\">\r\n        {{ \"vocabulary.\" + vocId + \".\" + item[bindValue] | translate }}\r\n      </span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- template for viewing single select selected value -->\r\n  <ng-template ng-label-tmp let-item=\"item\">\r\n    <span *ngIf=\"!voc\">\r\n      {{ (bindLabel ? item[bindLabel] : item) | translate }}\r\n    </span>\r\n    <span *ngIf=\"voc\">\r\n      {{ \"vocabulary.\" + vocId + \".\" + item[bindValue] | translate }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <!-- template for viewing multi select selected values -->\r\n  <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n    <div class=\"ng-value\" *ngFor=\"let item of items ? items : []\">\r\n      <span  *ngIf=\"!voc\" class=\"ng-value-label\">\r\n        {{ (bindLabel ? item[bindLabel] : item) | translate }}\r\n      </span>\r\n      <span *ngIf=\"voc\">\r\n        {{ \"vocabulary.\" + vocId + \".\" + item[bindValue] | translate }}\r\n      </span>\r\n      <span\r\n        *ngIf=\"clear\"\r\n        class=\"ng-value-icon right\"\r\n        (click)=\"clear(item)\"\r\n        aria-hidden=\"true\"\r\n        >\u00D7</span\r\n      >\r\n    </div>\r\n  </ng-template>\r\n</ng-select>\r\n<mat-error\r\n  [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n  class=\"app-textitem-editable-error\"\r\n  *ngIf=\"hasErrors()\"\r\n>\r\n  <ul>\r\n    <li *ngIf=\"control.errors.required\">\r\n      {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.select-label{color:#646f85;font-size:13px;margin-bottom:5px}.ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important;height:40px!important;box-shadow:none!important}.ng-select-container .ng-value-container{padding:0 10px!important}.ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px;margin-top:-3px}.ng-select-container .ng-value-container .ng-value{color:#495057}.ng-select-container .ng-arrow-wrapper{padding:0 20px}.ng-select-container .ng-input{left:10px;right:10px;width:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}.ng-select-container.ng-has-value{border-color:#1a96c6!important}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}.rtl .ng-select .ng-select-container .ng-value-container .ng-input{padding-left:50px!important;padding-right:0!important}\n"], components: [{ type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i2$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i5.ɵi, selector: "[ng-multi-label-tmp]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormSelectItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectItemComponent, selector: "app-dynamic-form-selectitem", inputs: { label: "label", bindValue: "bindValue", bindLabel: "bindLabel", data: "data", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", disabled: "disabled", clear: "clear", voc: "voc", vocId: "vocId", loading: "loading" }, outputs: { onSelectItems: "onSelectItems" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<ng-select\r\n  [items]=\"buffer\"\r\n  [bindLabel]=\"bindLabel\"\r\n  [bindValue]=\"bindValue\"\r\n  [placeholder]=\"placeholder\"\r\n  [multiple]=\"multiple\"\r\n  [clearable]=\"clear\"\r\n  [searchable]=\"searchable\"\r\n  [closeOnSelect]=\"closeOnSelect\"\r\n  [hideSelected]=\"hideSelectedItems\"\r\n  [searchFn]=\"onSearch\"\r\n  [loading]=\"loading\"\r\n  (scrollToEnd)=\"onScrollToEnd()\"\r\n  (change)=\"emitSelection($event)\"\r\n  [disabled]=\"disabled\"\r\n  [(ngModel)]=\"selection\"\r\n>\r\n  <!-- template for viewing options in single and multi select -->\r\n  <ng-template\r\n    ng-option-tmp\r\n    let-item=\"item\"\r\n    let-item$=\"item$\"\r\n    let-index=\"index\"\r\n  >\r\n    <div class=\"option-wrapper\">\r\n      <span class=\"check-box-wrapper\" *ngIf=\"multiple\">\r\n        <input\r\n          id=\"item-{{ index }}\"\r\n          type=\"checkbox\"\r\n          [ngModel]=\"item$.selected\"\r\n        />\r\n        <span class=\"icon-wrapper\">\r\n          <span class=\"bi bi-check2 icon\"></span>\r\n        </span>\r\n      </span>\r\n      <span *ngIf=\"!voc\" class=\"label-wrapper\">\r\n        {{ item[bindLabel] | translate }}\r\n      </span>\r\n      <span *ngIf=\"voc\" class=\"label-wrapper\">\r\n        {{ \"vocabulary.\" + vocId + \".\" + item[bindValue] | translate }}\r\n      </span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- template for viewing single select selected value -->\r\n  <ng-template ng-label-tmp let-item=\"item\">\r\n    <span *ngIf=\"!voc\">\r\n      {{ (bindLabel ? item[bindLabel] : item) | translate }}\r\n    </span>\r\n    <span *ngIf=\"voc\">\r\n      {{ \"vocabulary.\" + vocId + \".\" + item[bindValue] | translate }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <!-- template for viewing multi select selected values -->\r\n  <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n    <div class=\"ng-value\" *ngFor=\"let item of items ? items : []\">\r\n      <span  *ngIf=\"!voc\" class=\"ng-value-label\">\r\n        {{ (bindLabel ? item[bindLabel] : item) | translate }}\r\n      </span>\r\n      <span *ngIf=\"voc\">\r\n        {{ \"vocabulary.\" + vocId + \".\" + item[bindValue] | translate }}\r\n      </span>\r\n      <span\r\n        *ngIf=\"clear\"\r\n        class=\"ng-value-icon right\"\r\n        (click)=\"clear(item)\"\r\n        aria-hidden=\"true\"\r\n        >\u00D7</span\r\n      >\r\n    </div>\r\n  </ng-template>\r\n</ng-select>\r\n<mat-error\r\n  [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n  class=\"app-textitem-editable-error\"\r\n  *ngIf=\"hasErrors()\"\r\n>\r\n  <ul>\r\n    <li *ngIf=\"control.errors.required\">\r\n      {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.select-label{color:#646f85;font-size:13px;margin-bottom:5px}.ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important;height:40px!important;box-shadow:none!important}.ng-select-container .ng-value-container{padding:0 10px!important}.ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px;margin-top:-3px}.ng-select-container .ng-value-container .ng-value{color:#495057}.ng-select-container .ng-arrow-wrapper{padding:0 20px}.ng-select-container .ng-input{left:10px;right:10px;width:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}.ng-select-container.ng-has-value{border-color:#1a96c6!important}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}.rtl .ng-select .ng-select-container .ng-value-container .ng-input{padding-left:50px!important;padding-right:0!important}\n"], components: [{ type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i2$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i5.ɵi, selector: "[ng-multi-label-tmp]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormSelectItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -5145,7 +5414,7 @@ class DynamicFormVocabularyItemComponent {
     }
 }
 DynamicFormVocabularyItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormVocabularyItemComponent, deps: [{ token: VocabularyApiService }, { token: i0.ChangeDetectorRef }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormVocabularyItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: { onlyIds: "onlyIds", bindValue: "bindValue", bindLabel: "bindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", disabled: "disabled", vocabularyType: "vocabularyType", label: "label", cacheable: "cacheable", shwoAllValues: "shwoAllValues" }, outputs: { onSelecting: "onSelecting" }, viewQueries: [{ propertyName: "DynamicFormSelectItemComponent", first: true, predicate: DynamicFormSelectItemComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<app-dynamic-form-selectitem\r\n  [voc]=\"true\"\r\n  [vocId]=\"vocabularyType\"\r\n  [data]=\"data\"\r\n  [bindLabel]=\"bindLabel\"\r\n  [bindValue]=\"bindValue\"\r\n  [placeholder]=\"placeholder\"\r\n  [multiple]=\"multiple\"\r\n  [searchable]=\"searchable\"\r\n  [closeOnSelect]=\"closeOnSelect\"\r\n  [disabled]=\"disabled\"\r\n  [hideSelectedItems]=\"hideSelectedItems\"\r\n  [loading]=\"loading\"\r\n  (onSelectItems)=\"getSelecteditems($event)\"\r\n  [(ngModel)]=\"selection\"\r\n></app-dynamic-form-selectitem>\r\n<mat-error\r\n  [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n  class=\"app-textitem-editable-error\"\r\n  *ngIf=\"hasErrors()\"\r\n>\r\n  <ul>\r\n    <li *ngIf=\"control.errors.required\">\r\n      {{ label | translate }} {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\r\n", styles: [""], components: [{ type: DynamicFormSelectItemComponent, selector: "app-dynamic-form-selectitem", inputs: ["label", "bindValue", "bindLabel", "data", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "clear", "voc", "vocId", "loading"], outputs: ["onSelectItems"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormVocabularyItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: { onlyIds: "onlyIds", bindValue: "bindValue", bindLabel: "bindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", disabled: "disabled", vocabularyType: "vocabularyType", label: "label", cacheable: "cacheable", shwoAllValues: "shwoAllValues" }, outputs: { onSelecting: "onSelecting" }, viewQueries: [{ propertyName: "DynamicFormSelectItemComponent", first: true, predicate: DynamicFormSelectItemComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<app-dynamic-form-selectitem\r\n  [voc]=\"true\"\r\n  [vocId]=\"vocabularyType\"\r\n  [data]=\"data\"\r\n  [bindLabel]=\"bindLabel\"\r\n  [bindValue]=\"bindValue\"\r\n  [placeholder]=\"placeholder\"\r\n  [multiple]=\"multiple\"\r\n  [searchable]=\"searchable\"\r\n  [closeOnSelect]=\"closeOnSelect\"\r\n  [disabled]=\"disabled\"\r\n  [hideSelectedItems]=\"hideSelectedItems\"\r\n  [loading]=\"loading\"\r\n  (onSelectItems)=\"getSelecteditems($event)\"\r\n  [(ngModel)]=\"selection\"\r\n></app-dynamic-form-selectitem>\r\n<mat-error\r\n  [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n  class=\"app-textitem-editable-error\"\r\n  *ngIf=\"hasErrors()\"\r\n>\r\n  <ul>\r\n    <li *ngIf=\"control.errors.required\">\r\n      {{ label | translate }} {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\r\n", styles: [""], components: [{ type: DynamicFormSelectItemComponent, selector: "app-dynamic-form-selectitem", inputs: ["label", "bindValue", "bindLabel", "data", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "clear", "voc", "vocId", "loading"], outputs: ["onSelectItems"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     Cacheable({
         maxCacheCount: 1000,
@@ -6266,11 +6535,11 @@ class DateFormatterService {
         return this.ToGregorianDateStruct(todayGregorian, 'YYYY/M/D');
     }
 }
-DateFormatterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateFormatterService, deps: [{ token: i1$7.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Injectable });
+DateFormatterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateFormatterService, deps: [{ token: i1$8.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Injectable });
 DateFormatterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateFormatterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateFormatterService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$7.NgbDateParserFormatter }]; } });
+        }], ctorParameters: function () { return [{ type: i1$8.NgbDateParserFormatter }]; } });
 
 function test(form) {
     return form;
@@ -6390,8 +6659,8 @@ class GregorianDatepickerComponent {
         this.selectedDateChange.emit(null);
     }
 }
-GregorianDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GregorianDatepickerComponent, deps: [{ token: i1$7.NgbCalendar }, { token: i1$7.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Component });
-GregorianDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GregorianDatepickerComponent, selector: "gregorian-date-picker", inputs: { selectedDate: "selectedDate", readonly: "readonly", isRequired: "isRequired", disabled: "disabled", min: "min", max: "max", name: "name", range: "range", vertical: "vertical", emitOnBlur: "emitOnBlur", containerName: "containerName", placeHolder: "placeHolder" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div provideParentForm>\r\n\t<input\r\n\t\tclass=\"form-control\"\r\n\t\t[ngClass]=\"{ hidden: range, 'input-filled': selectedDate }\"\r\n\t\t[ngModel]=\"!range && selectedDate\"\r\n\t\t(ngModelChange)=\"!range && (selectedDate = $event)\"\r\n\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\tngbDatepicker\r\n\t\t(click)=\"d.toggle()\"\r\n\t\t(keyup.enter)=\"openDatePicker()\"\r\n\t\t(dateSelect)=\"onDateSelection($event)\"\r\n\t\t#d=\"ngbDatepicker\"\r\n\t\tfirstDayOfWeek=\"7\"\r\n\t\t[readonly]=\"readonly\"\r\n\t\t[autoClose]=\"range ? 'outside' : true\"\r\n\t\t[minDate]=\"min\"\r\n\t\t[maxDate]=\"max\"\r\n\t\t[required]=\"isRequired\"\r\n\t\t[displayMonths]=\"range ? 2 : 1\"\r\n\t\t[name]=\"name\"\r\n\t\t[startDate]=\"range ? selectedDate.from! : selectedDate!\"\r\n\t\t[dayTemplate]=\"t\"\r\n\t\t(blur)=\"onBlur()\"\r\n\t\t[footerTemplate]=\"footerTemplate\"\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[container]=\"containerName\"\r\n\t/>\r\n\t<ng-container *ngIf=\"range\">\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpFromDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpFromDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.from)\"\r\n\t\t\t\t\t(input)=\"fromDate = validateInput(selectedDate.from, dpFromDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpToDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpToDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.to)\"\r\n\t\t\t\t\t(input)=\"selectedDate.to = validateInput(selectedDate.to, dpToDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</div>\r\n<ng-template #t let-date let-focused=\"focused\">\r\n\t<span\r\n\t\tclass=\"custom-day\"\r\n\t\t[class.focused]=\"focused || isToday(date)\"\r\n\t\t[class.range]=\"isRange(date) || isSelectedDate(date)\"\r\n\t\t[class.faded]=\"isHovered(date) || (isInside(date) && range)\"\r\n\t\t(mouseenter)=\"hoveredDate = date\"\r\n\t\t(mouseleave)=\"hoveredDate = null\"\r\n\t>\r\n\t\t{{ date.day }}\r\n\t</span>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n\t<hr class=\"my-0\" />\r\n\t<button class=\"btn btn-secondary btn-sm m-2 float-right\" type=\"button\" (click)=\"d.close()\">\r\n\t\t{{ 'BUTTONS.CLOSE' | translate }}\r\n\t</button>\r\n\t<button class=\"btn btn-primary btn-sm m-2 float-left\" type=\"button\" (click)=\"clear()\">\r\n\t\t{{ 'BUTTONS.CLEAR' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [".date-input-container{position:relative}.date-input-container .date-input-wrapper{position:absolute;width:100%;height:100%;z-index:999999}.hijriInput{border-top-left-radius:0;border-bottom-left-radius:0}.input-filled{border-color:#1a96c6!important}.ngb-dp-weekday{width:2.1rem!important}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#0275d8;color:#fff}.custom-day.faded{background-color:#0275d880}.ranger{width:calc(50% - 5px);margin:0 2px;float:left}.ranger.vertical{width:calc(100% - 5px);margin:8px 2px}.ranger.vertical:nth-child(2){margin-top:0}.ranger.vertical:last-child{margin-bottom:0}.rtl .custom-select{background:#ffffff url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\") left .75rem center/8px 10px no-repeat}.rtl .ngb-dp-arrow-btn{transform:rotate(180deg)}.rtl .ranger{float:right}\n"], directives: [{ type: ProvideParentFormDirective, selector: "[provideParentForm]" }, { type: i1$7.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+GregorianDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GregorianDatepickerComponent, deps: [{ token: i1$8.NgbCalendar }, { token: i1$8.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Component });
+GregorianDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GregorianDatepickerComponent, selector: "gregorian-date-picker", inputs: { selectedDate: "selectedDate", readonly: "readonly", isRequired: "isRequired", disabled: "disabled", min: "min", max: "max", name: "name", range: "range", vertical: "vertical", emitOnBlur: "emitOnBlur", containerName: "containerName", placeHolder: "placeHolder" }, outputs: { selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div provideParentForm>\r\n\t<input\r\n\t\tclass=\"form-control\"\r\n\t\t[ngClass]=\"{ hidden: range, 'input-filled': selectedDate }\"\r\n\t\t[ngModel]=\"!range && selectedDate\"\r\n\t\t(ngModelChange)=\"!range && (selectedDate = $event)\"\r\n\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\tngbDatepicker\r\n\t\t(click)=\"d.toggle()\"\r\n\t\t(keyup.enter)=\"openDatePicker()\"\r\n\t\t(dateSelect)=\"onDateSelection($event)\"\r\n\t\t#d=\"ngbDatepicker\"\r\n\t\tfirstDayOfWeek=\"7\"\r\n\t\t[readonly]=\"readonly\"\r\n\t\t[autoClose]=\"range ? 'outside' : true\"\r\n\t\t[minDate]=\"min\"\r\n\t\t[maxDate]=\"max\"\r\n\t\t[required]=\"isRequired\"\r\n\t\t[displayMonths]=\"range ? 2 : 1\"\r\n\t\t[name]=\"name\"\r\n\t\t[startDate]=\"range ? selectedDate.from! : selectedDate!\"\r\n\t\t[dayTemplate]=\"t\"\r\n\t\t(blur)=\"onBlur()\"\r\n\t\t[footerTemplate]=\"footerTemplate\"\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[container]=\"containerName\"\r\n\t/>\r\n\t<ng-container *ngIf=\"range\">\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpFromDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpFromDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.from)\"\r\n\t\t\t\t\t(input)=\"fromDate = validateInput(selectedDate.from, dpFromDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpToDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpToDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.to)\"\r\n\t\t\t\t\t(input)=\"selectedDate.to = validateInput(selectedDate.to, dpToDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</div>\r\n<ng-template #t let-date let-focused=\"focused\">\r\n\t<span\r\n\t\tclass=\"custom-day\"\r\n\t\t[class.focused]=\"focused || isToday(date)\"\r\n\t\t[class.range]=\"isRange(date) || isSelectedDate(date)\"\r\n\t\t[class.faded]=\"isHovered(date) || (isInside(date) && range)\"\r\n\t\t(mouseenter)=\"hoveredDate = date\"\r\n\t\t(mouseleave)=\"hoveredDate = null\"\r\n\t>\r\n\t\t{{ date.day }}\r\n\t</span>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n\t<hr class=\"my-0\" />\r\n\t<button class=\"btn btn-secondary btn-sm m-2 float-right\" type=\"button\" (click)=\"d.close()\">\r\n\t\t{{ 'BUTTONS.CLOSE' | translate }}\r\n\t</button>\r\n\t<button class=\"btn btn-primary btn-sm m-2 float-left\" type=\"button\" (click)=\"clear()\">\r\n\t\t{{ 'BUTTONS.CLEAR' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [".date-input-container{position:relative}.date-input-container .date-input-wrapper{position:absolute;width:100%;height:100%;z-index:999999}.hijriInput{border-top-left-radius:0;border-bottom-left-radius:0}.input-filled{border-color:#1a96c6!important}.ngb-dp-weekday{width:2.1rem!important}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#0275d8;color:#fff}.custom-day.faded{background-color:#0275d880}.ranger{width:calc(50% - 5px);margin:0 2px;float:left}.ranger.vertical{width:calc(100% - 5px);margin:8px 2px}.ranger.vertical:nth-child(2){margin-top:0}.ranger.vertical:last-child{margin-bottom:0}.rtl .custom-select{background:#ffffff url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\") left .75rem center/8px 10px no-repeat}.rtl .ngb-dp-arrow-btn{transform:rotate(180deg)}.rtl .ranger{float:right}\n"], directives: [{ type: ProvideParentFormDirective, selector: "[provideParentForm]" }, { type: i1$8.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GregorianDatepickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -6400,7 +6669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     styleUrls: ['./gregorian-date-picker.component.scss'],
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return [{ type: i1$7.NgbCalendar }, { type: i1$7.NgbDateParserFormatter }]; }, propDecorators: { datePicker: [{
+        }], ctorParameters: function () { return [{ type: i1$8.NgbCalendar }, { type: i1$8.NgbDateParserFormatter }]; }, propDecorators: { datePicker: [{
                 type: ViewChild,
                 args: ['d']
             }], selectedDate: [{
@@ -6538,11 +6807,11 @@ class HijriDatepickerComponent {
         this.selectedDateChange.emit(null);
     }
 }
-HijriDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatepickerComponent, deps: [{ token: i1$7.NgbCalendar }, { token: i1$7.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Component });
+HijriDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatepickerComponent, deps: [{ token: i1$8.NgbCalendar }, { token: i1$8.NgbDateParserFormatter }], target: i0.ɵɵFactoryTarget.Component });
 HijriDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: HijriDatepickerComponent, selector: "hijri-date-picker", inputs: { selectedDate: "selectedDate", readonly: "readonly", isRequired: "isRequired", disabled: "disabled", min: "min", max: "max", name: "name", range: "range", vertical: "vertical", emitOnBlur: "emitOnBlur", containerName: "containerName", placeHolder: "placeHolder" }, outputs: { selectedDateChange: "selectedDateChange" }, providers: [
         { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
         { provide: NgbDatepickerI18n, useClass: IslamicI18n }
-    ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div provideParentForm>\r\n\t<input\r\n\t\tclass=\"form-control\"\r\n\t\t[ngClass]=\"{ hidden: range, 'input-filled': selectedDate }\"\r\n\t\t[ngModel]=\"!range && selectedDate\"\r\n\t\t(ngModelChange)=\"!range && (selectedDate = $event)\"\r\n\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\tngbDatepicker\r\n\t\t(click)=\"d.toggle()\"\r\n\t\t(keyup.enter)=\"openDatePicker()\"\r\n\t\t(dateSelect)=\"onDateSelection($event)\"\r\n\t\t#d=\"ngbDatepicker\"\r\n\t\tfirstDayOfWeek=\"7\"\r\n\t\t[readonly]=\"readonly\"\r\n\t\t[autoClose]=\"range ? 'outside' : true\"\r\n\t\t[minDate]=\"min\"\r\n\t\t[maxDate]=\"max\"\r\n\t\t[required]=\"isRequired\"\r\n\t\t[displayMonths]=\"range ? 2 : 1\"\r\n\t\t[name]=\"name\"\r\n\t\t[startDate]=\"range ? selectedDate.from! : selectedDate!\"\r\n\t\t[dayTemplate]=\"t\"\r\n\t\t(blur)=\"onBlur()\"\r\n\t\t[footerTemplate]=\"footerTemplate\"\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[container]=\"containerName\"\r\n\t/>\r\n\t<ng-container *ngIf=\"range\">\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpFromDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpFromDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.from)\"\r\n\t\t\t\t\t(input)=\"fromDate = validateInput(selectedDate.from, dpFromDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpToDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpToDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.to)\"\r\n\t\t\t\t\t(input)=\"selectedDate.to = validateInput(selectedDate.to, dpToDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</div>\r\n<ng-template #t let-date let-focused=\"focused\">\r\n\t<span\r\n\t\tclass=\"custom-day\"\r\n\t\t[class.focused]=\"focused || isToday(date)\"\r\n\t\t[class.range]=\"isRange(date) || isSelectedDate(date)\"\r\n\t\t[class.faded]=\"isHovered(date) || (isInside(date) && range)\"\r\n\t\t(mouseenter)=\"hoveredDate = date\"\r\n\t\t(mouseleave)=\"hoveredDate = null\"\r\n\t>\r\n\t\t{{ date.day }}\r\n\t</span>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n\t<hr class=\"my-0\" />\r\n\t<button class=\"btn btn-secondary btn-sm m-2 float-right\" type=\"button\" (click)=\"d.close()\">\r\n\t\t{{ 'BUTTONS.CLOSE' | translate }}\r\n\t</button>\r\n\t<button class=\"btn btn-primary btn-sm m-2 float-left\" type=\"button\" (click)=\"clear()\">\r\n\t\t{{ 'BUTTONS.CLEAR' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [".date-input-container{position:relative}.date-input-container .date-input-wrapper{position:absolute;width:100%;height:100%;z-index:999999}.hijriInput{border-top-left-radius:0;border-bottom-left-radius:0}.input-filled{border-color:#1a96c6!important}.ngb-dp-weekday{width:2.1rem!important}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#0275d8;color:#fff}.custom-day.faded{background-color:#0275d880}.ranger{width:calc(50% - 5px);margin:0 2px;float:left}.ranger.vertical{width:calc(100% - 5px);margin:8px 2px}.ranger.vertical:nth-child(2){margin-top:0}.ranger.vertical:last-child{margin-bottom:0}.rtl .custom-select{background:#ffffff url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\") left .75rem center/8px 10px no-repeat}.rtl .ngb-dp-arrow-btn{transform:rotate(180deg)}.rtl .ranger{float:right}\n"], directives: [{ type: ProvideParentFormDirective, selector: "[provideParentForm]" }, { type: i1$7.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div provideParentForm>\r\n\t<input\r\n\t\tclass=\"form-control\"\r\n\t\t[ngClass]=\"{ hidden: range, 'input-filled': selectedDate }\"\r\n\t\t[ngModel]=\"!range && selectedDate\"\r\n\t\t(ngModelChange)=\"!range && (selectedDate = $event)\"\r\n\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\tngbDatepicker\r\n\t\t(click)=\"d.toggle()\"\r\n\t\t(keyup.enter)=\"openDatePicker()\"\r\n\t\t(dateSelect)=\"onDateSelection($event)\"\r\n\t\t#d=\"ngbDatepicker\"\r\n\t\tfirstDayOfWeek=\"7\"\r\n\t\t[readonly]=\"readonly\"\r\n\t\t[autoClose]=\"range ? 'outside' : true\"\r\n\t\t[minDate]=\"min\"\r\n\t\t[maxDate]=\"max\"\r\n\t\t[required]=\"isRequired\"\r\n\t\t[displayMonths]=\"range ? 2 : 1\"\r\n\t\t[name]=\"name\"\r\n\t\t[startDate]=\"range ? selectedDate.from! : selectedDate!\"\r\n\t\t[dayTemplate]=\"t\"\r\n\t\t(blur)=\"onBlur()\"\r\n\t\t[footerTemplate]=\"footerTemplate\"\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[container]=\"containerName\"\r\n\t/>\r\n\t<ng-container *ngIf=\"range\">\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpFromDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpFromDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.from)\"\r\n\t\t\t\t\t(input)=\"fromDate = validateInput(selectedDate.from, dpFromDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"form-group ranger\" [ngClass]=\"{ vertical: vertical }\">\r\n\t\t\t<div class=\"input-group\">\r\n\t\t\t\t<input\r\n\t\t\t\t\t#dpToDate\r\n\t\t\t\t\tclass=\"form-control\"\r\n\t\t\t\t\t(click)=\"d.toggle()\"\r\n\t\t\t\t\t[placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n\t\t\t\t\tname=\"dpToDate\"\r\n\t\t\t\t\t[value]=\"formatter.format(selectedDate.to)\"\r\n\t\t\t\t\t(input)=\"selectedDate.to = validateInput(selectedDate.to, dpToDate.value)\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div class=\"input-group-append\">\r\n\t\t\t\t\t<button class=\"btn btn-outline-secondary\" (click)=\"d.toggle()\" type=\"button\">\r\n\t\t\t\t\t\t<i class=\"bi bi-calendar-week icon\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-container>\r\n</div>\r\n<ng-template #t let-date let-focused=\"focused\">\r\n\t<span\r\n\t\tclass=\"custom-day\"\r\n\t\t[class.focused]=\"focused || isToday(date)\"\r\n\t\t[class.range]=\"isRange(date) || isSelectedDate(date)\"\r\n\t\t[class.faded]=\"isHovered(date) || (isInside(date) && range)\"\r\n\t\t(mouseenter)=\"hoveredDate = date\"\r\n\t\t(mouseleave)=\"hoveredDate = null\"\r\n\t>\r\n\t\t{{ date.day }}\r\n\t</span>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n\t<hr class=\"my-0\" />\r\n\t<button class=\"btn btn-secondary btn-sm m-2 float-right\" type=\"button\" (click)=\"d.close()\">\r\n\t\t{{ 'BUTTONS.CLOSE' | translate }}\r\n\t</button>\r\n\t<button class=\"btn btn-primary btn-sm m-2 float-left\" type=\"button\" (click)=\"clear()\">\r\n\t\t{{ 'BUTTONS.CLEAR' | translate }}\r\n\t</button>\r\n</ng-template>\r\n", styles: [".date-input-container{position:relative}.date-input-container .date-input-wrapper{position:absolute;width:100%;height:100%;z-index:999999}.hijriInput{border-top-left-radius:0;border-bottom-left-radius:0}.input-filled{border-color:#1a96c6!important}.ngb-dp-weekday{width:2.1rem!important}.custom-day{text-align:center;padding:.185rem .25rem;display:inline-block;height:2rem;width:2rem}.custom-day.focused{background-color:#e6e6e6}.custom-day.range,.custom-day:hover{background-color:#0275d8;color:#fff}.custom-day.faded{background-color:#0275d880}.ranger{width:calc(50% - 5px);margin:0 2px;float:left}.ranger.vertical{width:calc(100% - 5px);margin:8px 2px}.ranger.vertical:nth-child(2){margin-top:0}.ranger.vertical:last-child{margin-bottom:0}.rtl .custom-select{background:#ffffff url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\") left .75rem center/8px 10px no-repeat}.rtl .ngb-dp-arrow-btn{transform:rotate(180deg)}.rtl .ranger{float:right}\n"], directives: [{ type: ProvideParentFormDirective, selector: "[provideParentForm]" }, { type: i1$8.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HijriDatepickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -6555,7 +6824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     styleUrls: ['./hijri-date-picker.component.scss'],
                     encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return [{ type: i1$7.NgbCalendar }, { type: i1$7.NgbDateParserFormatter }]; }, propDecorators: { datePicker: [{
+        }], ctorParameters: function () { return [{ type: i1$8.NgbCalendar }, { type: i1$8.NgbDateParserFormatter }]; }, propDecorators: { datePicker: [{
                 type: ViewChild,
                 args: ['d']
             }], selectedDate: [{
@@ -8061,7 +8330,7 @@ class DynamicFormDateItemComponent {
 DynamicFormDateItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormDateItemComponent, deps: [{ token: DynamicFormUpdateService }, { token: i2$3.DateAdapter }, { token: UserPreferencesService }, { token: i1.TranslateService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
 DynamicFormDateItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormDateItemComponent, selector: "app-dynamic-form-dateitem", inputs: { label: "label", disabled: "disabled", property: "property", editable: "editable", displayEmpty: "displayEmpty", min: "min", max: "max", startAt: "startAt", displayClearAction: "displayClearAction", pickerType: "pickerType", selectMode: "selectMode", isfilter: "isfilter", placeholder: "placeholder" }, providers: [
         { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS }
-    ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datetimePicker"], descendants: true }], ngImport: i0, template: "<div class=\"app-property-value\">\r\n  <div class=\"app-input-wrapper\">\r\n    <ng-container *ngIf=\"label\">\r\n      <label class=\"\" for=\"formGroupInputSmall\"\r\n        >{{ label | translate\r\n        }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span>\r\n      </label>\r\n    </ng-container>\r\n    <div class=\"input-container\">\r\n      <ng-container *ngIf=\"isEditable(); else readOnly\">\r\n\r\n        <button *ngIf=\"!isfilter && pickerType !== 'timer'\" type=\"button\" class=\"claendar-icon\" [owlDateTimeTrigger]=\"dt3\">\r\n          <i class=\"bi bi-calendar-week icon\"></i>        </button>\r\n\r\n          <button *ngIf=\"!isfilter && pickerType === 'timer'\" type=\"button\" class=\"claendar-icon\" [owlDateTimeTrigger]=\"dt3\">\r\n            <i class=\"bi bi-clock icon\"></i>        </button>\r\n        <input\r\n          class=\"form-control date\"\r\n          [disabled]=\"isDisabled() || null\"\r\n          (blur)=\"onTouched($event)\"\r\n          [min]=\"min\"\r\n          [max]=\"max\"\r\n          [selectMode]=\"selectMode\"\r\n          [required]=\"isRequired\"\r\n          [(ngModel)]=\"valueDate\"\r\n          (ngModelChange)=\"onDateChanged($event)\"\r\n          autocomplete=\"false\"\r\n          [owlDateTimeTrigger]=\"dt3\"\r\n          [owlDateTime]=\"dt3\"\r\n          placeholder=\"{{ placeholder }}\"\r\n        />\r\n        <input\r\n        class=\"form-control timer\"\r\n        [disabled]=\"true\"\r\n        [required]=\"isRequired\"\r\n        [(ngModel)]=\"displayedTime\"\r\n        placeholder=\"{{ placeholder }}\"\r\n      />\r\n\r\n        <button type=\"button\" *ngIf=\"valueDate\" (click)=\"onDateClear()\" class=\"relative mx-1 clear-date-btn\"\r\n        [ngClass]=\"{'d-none': isDisabled()}\">\r\n          <i class=\"clear-date-icon material-icons  flex mr-1\">&#xE14C;</i>\r\n        </button>\r\n        <owl-date-time\r\n          [startAt]=\"startAt\"\r\n          [pickerType]=\"pickerType\"\r\n          #dt3\r\n        ></owl-date-time>\r\n\r\n        <mat-error\r\n          [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n          class=\"app-textitem-editable-error\"\r\n          *ngIf=\"hasErrors()\"\r\n        >\r\n          <ul>\r\n            <li *ngIf=\"control.errors.required\">\r\n             <span *ngIf=\"label\" class=\"mx-1\">{{ label | translate}}</span> {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n            </li>\r\n          </ul>\r\n        </mat-error>\r\n      </ng-container>\r\n      <ng-template #readOnly>\r\n        {{ valueDate | date }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".clear-date-icon{color:#999;font-size:15px}.input-container{position:relative}.input-container .form-control{padding:0 35px}.clear-date-btn{align-items:center;background:transparent;border:0px;position:absolute;right:10px;left:auto;top:50%;margin-top:-9px}.claendar-icon{border:none;background-color:transparent;position:absolute;display:flex;justify-content:flex-start;padding-inline-end:45px;width:100%;height:40px;align-items:center}.claendar-icon .icon{font-size:20px;color:#495057}.claendar-icon:focus{outline:none}.rtl .clear-date-btn{left:10px;right:auto}.rtl .owl-dt-container-info{direction:rtl}\n"], components: [{ type: i6$3.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$3.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6$3.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "value", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe, "date": i4$1.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datetimePicker"], descendants: true }], ngImport: i0, template: "<div class=\"app-property-value\">\r\n  <div class=\"app-input-wrapper\">\r\n    <ng-container *ngIf=\"label\">\r\n      <label class=\"\" for=\"formGroupInputSmall\"\r\n        >{{ label | translate\r\n        }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span>\r\n      </label>\r\n    </ng-container>\r\n    <div class=\"input-container\">\r\n      <ng-container *ngIf=\"isEditable(); else readOnly\">\r\n\r\n        <button *ngIf=\"!isfilter && pickerType !== 'timer'\" type=\"button\" class=\"claendar-icon\" [owlDateTimeTrigger]=\"dt3\">\r\n          <i class=\"bi bi-calendar-week icon\"></i>        </button>\r\n\r\n          <button *ngIf=\"!isfilter && pickerType === 'timer'\" type=\"button\" class=\"claendar-icon\" [owlDateTimeTrigger]=\"dt3\">\r\n            <i class=\"bi bi-clock icon\"></i>        </button>\r\n        <input\r\n          class=\"form-control date\"\r\n          [disabled]=\"isDisabled() || null\"\r\n          (blur)=\"onTouched($event)\"\r\n          [min]=\"min\"\r\n          [max]=\"max\"\r\n          [selectMode]=\"selectMode\"\r\n          [required]=\"isRequired\"\r\n          [(ngModel)]=\"valueDate\"\r\n          (ngModelChange)=\"onDateChanged($event)\"\r\n          autocomplete=\"false\"\r\n          [owlDateTimeTrigger]=\"dt3\"\r\n          [owlDateTime]=\"dt3\"\r\n          placeholder=\"{{ placeholder }}\"\r\n        />\r\n        <input\r\n        class=\"form-control timer\"\r\n        [disabled]=\"true\"\r\n        [required]=\"isRequired\"\r\n        [(ngModel)]=\"displayedTime\"\r\n        placeholder=\"{{ placeholder }}\"\r\n      />\r\n\r\n        <button type=\"button\" *ngIf=\"valueDate\" (click)=\"onDateClear()\" class=\"relative mx-1 clear-date-btn\"\r\n        [ngClass]=\"{'d-none': isDisabled()}\">\r\n          <i class=\"clear-date-icon material-icons  flex mr-1\">&#xE14C;</i>\r\n        </button>\r\n        <owl-date-time\r\n          [startAt]=\"startAt\"\r\n          [pickerType]=\"pickerType\"\r\n          #dt3\r\n        ></owl-date-time>\r\n\r\n        <mat-error\r\n          [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n          class=\"app-textitem-editable-error\"\r\n          *ngIf=\"hasErrors()\"\r\n        >\r\n          <ul>\r\n            <li *ngIf=\"control.errors.required\">\r\n             <span *ngIf=\"label\" class=\"mx-1\">{{ label | translate}}</span> {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n            </li>\r\n          </ul>\r\n        </mat-error>\r\n      </ng-container>\r\n      <ng-template #readOnly>\r\n        {{ valueDate | date }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".clear-date-icon{color:#999;font-size:15px}.input-container{position:relative}.input-container .form-control{padding:0 35px}.clear-date-btn{align-items:center;background:transparent;border:0px;position:absolute;right:10px;left:auto;top:50%;margin-top:-9px}.claendar-icon{border:none;background-color:transparent;position:absolute;display:flex;justify-content:flex-start;padding-inline-end:45px;width:100%;height:40px;align-items:center}.claendar-icon .icon{font-size:20px;color:#495057}.claendar-icon:focus{outline:none}.rtl .clear-date-btn{left:10px;right:auto}.rtl .owl-dt-container-info{direction:rtl}\n"], components: [{ type: i6$3.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$3.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["disabled", "owlDateTimeTrigger"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6$3.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["rangeSeparator", "value", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe, "date": i4$1.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormDateItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -8782,7 +9051,7 @@ class DynamicFormTextItemComponent {
 }
 DynamicFormTextItemComponent.DEFAULT_SEPARATOR = ', ';
 DynamicFormTextItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormTextItemComponent, deps: [{ token: DynamicFormUpdateService }, { token: i1.TranslateService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormTextItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: { autoComplete: "autoComplete", nativeAutoComplete: "nativeAutoComplete", autoComplete_pageProvider: "autoComplete_pageProvider", autoComplete_propertyName: "autoComplete_propertyName", autoComplete_propertyKey: "autoComplete_propertyKey", autoCompleteValueKey: "autoCompleteValueKey", autoCompleteType: "autoCompleteType", tenantId: "tenantId", emitFullObject: "emitFullObject", outsideParams: "outsideParams", type: "type", property: "property", label: "label", editable: "editable", placeholder: "placeholder", disabled: "disabled", displayEmpty: "displayEmpty", preventSpace: "preventSpace", id: "id", maxCharsNum: "maxCharsNum" }, viewQueries: [{ propertyName: "editorInput", first: true, predicate: ["editorInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-property-value\">\r\n  <div class=\"app-input-wrapper\">\r\n    <label *ngIf=\"label\" for=\"formGroupInputSmall\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n    <div class=\"\">\r\n            <ng-container *ngIf=\"isEditable(); else readOnly\">\r\n        <div class=\"new-one\" (clickOutside)=\"openOptions(false)\">\r\n          <input\r\n          \r\n            [id]=\"id\"\r\n            [attr.disabled]=\"isDisabled() || null\"\r\n            [type]=\"type\"\r\n            class=\"form-control\"\r\n            [ngClass]=\"{'input-filled' : (emitFullObject ? (editedValue?.title) : editedValue) }\"\r\n            (keydown.space)=\"allowSpace($event)\"\r\n            #editorInput\r\n            [required]=\"isRequired()\"\r\n            [(ngModel)]=\"emitFullObject ? editedValue?.title : editedValue\"\r\n            [autocomplete]=\"nativeAutoComplete\"\r\n            (ngModelChange)=\"update($event)\"\r\n            (keyup)=\"waitUntilUserFinishTyping()\"\r\n            [attr.data-automation-id]=\"'card-textitem-editinput-'\"\r\n            placeholder=\"{{ placeholder | translate }}\"\r\n            (focus)=\"openOptions(true)\"\r\n            maxlength=\"{{maxCharsNum}}\"\r\n          />\r\n          <div *ngIf=\"documentList.length !== 0\" id=\"suggestedoptions\">\r\n            <div\r\n              class=\"suggestions-wrapper\"\r\n              [ngClass]=\"{ 'd-block': showsuggestedOptions }\"\r\n            >\r\n              <div\r\n                class=\"option\"\r\n                id=\"suggestedoptions\"\r\n                *ngFor=\"let option of documentList\"\r\n                (click)=\"selectItem(option)\"\r\n              >\r\n                {{ option.title }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <mat-error\r\n          [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n          class=\"app-textitem-editable-error\"\r\n          *ngIf=\"hasErrors()\"\r\n        >\r\n          <ul>\r\n            <li *ngIf=\"control.errors.required\">\r\n              {{ label | translate }} {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n            </li>\r\n            <li *ngIf=\"control.errors.pattern\">\r\n              {{ \"wrong pattern\" | translate }}\r\n            </li>\r\n            <li *ngIf=\"control.errors.min\">\r\n              {{ \"VALIDATORS.MIN\" | translate }} {{ control.errors.min.min }}\r\n            </li>\r\n          </ul>\r\n        </mat-error>\r\n      </ng-container>\r\n      <ng-template #readOnly>\r\n        {{ emitFullObject ? editedValue?.title : editedValue }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".app-property-value .input-filled{border-color:#1a96c6!important}.app-property-value .app-input-wrapper label{color:#8f98aa;font-size:12px;margin-bottom:0}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;background-color:#8f98aa1a;border-radius:0;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .app-textitem-editable-error ul{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error ul li{margin-top:5px}.app-property-value .app-input-wrapper .new-one{position:relative}.app-property-value .app-input-wrapper .suggestions-wrapper{border-radius:3px;height:auto;max-height:240px;border:1px solid #ccc;box-shadow:2px 2px 2px #0000000f;overflow:auto;display:none;position:absolute;width:100%;background-color:#fff;z-index:99}.app-property-value .app-input-wrapper .suggestions-wrapper .option{margin-bottom:5px;padding:5px 10px;cursor:pointer}.app-property-value .app-input-wrapper .suggestions-wrapper .option:hover{background-color:#f5faff}\n"], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormTextItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: { autoComplete: "autoComplete", nativeAutoComplete: "nativeAutoComplete", autoComplete_pageProvider: "autoComplete_pageProvider", autoComplete_propertyName: "autoComplete_propertyName", autoComplete_propertyKey: "autoComplete_propertyKey", autoCompleteValueKey: "autoCompleteValueKey", autoCompleteType: "autoCompleteType", tenantId: "tenantId", emitFullObject: "emitFullObject", outsideParams: "outsideParams", type: "type", property: "property", label: "label", editable: "editable", placeholder: "placeholder", disabled: "disabled", displayEmpty: "displayEmpty", preventSpace: "preventSpace", id: "id", maxCharsNum: "maxCharsNum" }, viewQueries: [{ propertyName: "editorInput", first: true, predicate: ["editorInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-property-value\">\r\n  <div class=\"app-input-wrapper\">\r\n    <label *ngIf=\"label\" for=\"formGroupInputSmall\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n    <div class=\"\">\r\n            <ng-container *ngIf=\"isEditable(); else readOnly\">\r\n        <div class=\"new-one\" (clickOutside)=\"openOptions(false)\">\r\n          <input\r\n          \r\n            [id]=\"id\"\r\n            [attr.disabled]=\"isDisabled() || null\"\r\n            [type]=\"type\"\r\n            class=\"form-control\"\r\n            [ngClass]=\"{'input-filled' : (emitFullObject ? (editedValue?.title) : editedValue) }\"\r\n            (keydown.space)=\"allowSpace($event)\"\r\n            #editorInput\r\n            [required]=\"isRequired()\"\r\n            [(ngModel)]=\"emitFullObject ? editedValue?.title : editedValue\"\r\n            [autocomplete]=\"nativeAutoComplete\"\r\n            (ngModelChange)=\"update($event)\"\r\n            (keyup)=\"waitUntilUserFinishTyping()\"\r\n            [attr.data-automation-id]=\"'card-textitem-editinput-'\"\r\n            placeholder=\"{{ placeholder | translate }}\"\r\n            (focus)=\"openOptions(true)\"\r\n            maxlength=\"{{maxCharsNum}}\"\r\n          />\r\n          <div *ngIf=\"documentList.length !== 0\" id=\"suggestedoptions\">\r\n            <div\r\n              class=\"suggestions-wrapper\"\r\n              [ngClass]=\"{ 'd-block': showsuggestedOptions }\"\r\n            >\r\n              <div\r\n                class=\"option\"\r\n                id=\"suggestedoptions\"\r\n                *ngFor=\"let option of documentList\"\r\n                (click)=\"selectItem(option)\"\r\n              >\r\n                {{ option.title }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <mat-error\r\n          [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n          class=\"app-textitem-editable-error\"\r\n          *ngIf=\"hasErrors()\"\r\n        >\r\n          <ul>\r\n            <li *ngIf=\"control.errors.required\">\r\n              {{ label | translate }} {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n            </li>\r\n            <li *ngIf=\"control.errors.pattern\">\r\n              {{ \"wrong pattern\" | translate }}\r\n            </li>\r\n            <li *ngIf=\"control.errors.min\">\r\n              {{ \"VALIDATORS.MIN\" | translate }} {{ control.errors.min.min }}\r\n            </li>\r\n          </ul>\r\n        </mat-error>\r\n      </ng-container>\r\n      <ng-template #readOnly>\r\n        {{ emitFullObject ? editedValue?.title : editedValue }}\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".app-property-value .input-filled{border-color:#1a96c6!important}.app-property-value .app-input-wrapper label{color:#8f98aa;font-size:12px;margin-bottom:0}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;background-color:#8f98aa1a;border-radius:0;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .app-textitem-editable-error ul{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error ul li{margin-top:5px}.app-property-value .app-input-wrapper .new-one{position:relative}.app-property-value .app-input-wrapper .suggestions-wrapper{border-radius:3px;height:auto;max-height:240px;border:1px solid #ccc;box-shadow:2px 2px 2px #0000000f;overflow:auto;display:none;position:absolute;width:100%;background-color:#fff;z-index:99}.app-property-value .app-input-wrapper .suggestions-wrapper .option{margin-bottom:5px;padding:5px 10px;cursor:pointer}.app-property-value .app-input-wrapper .suggestions-wrapper .option:hover{background-color:#f5faff}\n"], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormTextItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -8890,7 +9159,7 @@ class DynamicFormSlideToggleitemComponent {
     ngOnInit() { }
 }
 DynamicFormSlideToggleitemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormSlideToggleitemComponent, deps: [{ token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormSlideToggleitemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: { label: "label", disabled: "disabled", checked: "checked", theme: "theme" }, outputs: { onToggle: "onToggle" }, ngImport: i0, template: "<div class=\"dynamic-toggle\">\r\n  <mat-slide-toggle\r\n    [checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    [(ngModel)]=\"value\"\r\n    (change)=\"setValue($event)\"\r\n    >{{ label | translate\r\n    }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\"\r\n      >*</span\r\n    ></mat-slide-toggle\r\n  >\r\n</div>\r\n<!-- [required]=\"isRequired()\" -->\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}.dynamic-toggle .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:transparent;background-image:linear-gradient(to right,#0dbab5,#1a96c6);margin:0 10px}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#fff}.rtl .mat-slide-toggle-label-before .mat-slide-toggle-bar,.rtl .mat-slide-toggle-bar{margin-left:8px;margin-right:0!important}\n"], components: [{ type: i1$8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormSlideToggleitemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: { label: "label", disabled: "disabled", checked: "checked", theme: "theme" }, outputs: { onToggle: "onToggle" }, ngImport: i0, template: "<div class=\"dynamic-toggle\">\r\n  <mat-slide-toggle\r\n    [checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    [(ngModel)]=\"value\"\r\n    (change)=\"setValue($event)\"\r\n    >{{ label | translate\r\n    }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\"\r\n      >*</span\r\n    ></mat-slide-toggle\r\n  >\r\n</div>\r\n<!-- [required]=\"isRequired()\" -->\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}.dynamic-toggle .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:transparent;background-image:linear-gradient(to right,#0dbab5,#1a96c6);margin:0 10px}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#fff}.rtl .mat-slide-toggle-label-before .mat-slide-toggle-bar,.rtl .mat-slide-toggle-bar{margin-left:8px;margin-right:0!important}\n"], components: [{ type: i1$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormSlideToggleitemComponent, decorators: [{
             type: Component,
             args: [{
@@ -9171,6 +9440,7 @@ class TreeviewSelectComponent {
         this.actionClicked = new EventEmitter();
         this.arabic = false;
         this.onDestroy$ = new Subject();
+        this.showTreeActions = true;
         this.config = TreeviewConfig.create({
             hasAllCheckBox: false,
             hasCollapseExpand: false,
@@ -9389,8 +9659,8 @@ class TreeviewSelectComponent {
         return _find(this.multipleSelection, (q) => _isEqual(q, item.value));
     }
 }
-TreeviewSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeviewSelectComponent, deps: [{ token: i1$9.TreeviewI18n }, { token: TranslationService }, { token: DepartmentApiService }, { token: DepartmentManagementService$1 }, { token: RolesService }, { token: NuxeoService }, { token: GlobalAdminService }], target: i0.ɵɵFactoryTarget.Component });
-TreeviewSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", selectDepChildren: "selectDepChildren", displayIsAllowRecExternal: "displayIsAllowRecExternal", fixedParentNode: "fixedParentNode" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template\r\n  #itemTemplate\r\n  let-item=\"item\"\r\n  let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\"\r\n>\r\n  <!-- single -->\r\n  <div *ngIf=\"!treeview && !multiple\">\r\n    <div\r\n      class=\"text-nowrap row-item\"\r\n      [ngClass]=\"{ active: item.value === this.value }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapseExpand()\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label> -->\r\n      <label *ngIf=\"item.disabled\" class=\"form-check-label\">{{\r\n        item.text\r\n      }}</label>\r\n      <label\r\n        *ngIf=\"!item.disabled\"\r\n        class=\"form-check-label\"\r\n        (click)=\"select(item)\"\r\n        >{{ item.text }}</label\r\n      >\r\n    </div>\r\n  </div>\r\n  <!-- Multiple -->\r\n  <div *ngIf=\"!treeview && multiple\">\r\n    <div\r\n      class=\"text-nowrap row-item\"\r\n      [ngClass]=\"{ active: item.value === this.value }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapseExpand()\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <!-- <input\r\n        class=\"multiple-checkBox\"\r\n        type=\"checkbox\"\r\n        [checked]=\"multipleSelection.includes(item.value)\"\r\n        (change)=\"selectMultiple($event.target.checked, item)\"\r\n      />\r\n\r\n      <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n      <div class=\"multiple-treeview\">\r\n        <mat-checkbox\r\n          [checked]=\"isItemSelected(item)\"\r\n          (change)=\"selectMultiple($event.checked, item)\"\r\n        >\r\n          <span> {{ item.text }} </span>\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- treeView -->\r\n  <div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n    <div\r\n      (mouseenter)=\"hoverField.style.display = 'flex'\"\r\n      (mouseleave)=\"hoverField.style.display = 'none'\"\r\n      class=\"text-nowrap row-item treeview-row\"\r\n      [ngClass]=\"{\r\n        selected: item.value == selectedItem,\r\n        treeParentNode: item.value === fixedParentNode?.value\r\n      }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapsed(item)\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <label class=\"form-check-label-treeview\" (click)=\"select(item)\">\r\n        <ng-conteiner *ngIf=\"item.value != fixedParentNode?.value\">{{\r\n          item.text\r\n        }}</ng-conteiner>\r\n        <ng-conteiner *ngIf=\"item.value === fixedParentNode?.value\">{{\r\n          item.text | translate\r\n        }}</ng-conteiner>\r\n        <span #hoverField class=\"hoverField\">\r\n          <span\r\n            type=\"button\"\r\n            matTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n            (click)=\"onAction($event, 'update', item)\"\r\n          >\r\n            <li class=\"bi bi-pencil\"></li>\r\n          </span>\r\n\r\n          <span\r\n            type=\"button\"\r\n            matTooltip=\"{{\r\n              'department_management.form.toolTip_message' | translate\r\n            }}\"\r\n            (click)=\"onAction($event, 'add', item)\"\r\n          >\r\n            <li class=\"bi bi-plus\"></li>\r\n          </span>\r\n        </span>\r\n      </label>\r\n    </div>\r\n  </div>\r\n  <!-- treeView as form control -->\r\n  <div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n    <div\r\n      class=\"text-nowrap row-item treeview-row-form-control\"\r\n      [ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n    >\r\n      <i\r\n        *ngIf=\"item.children\"\r\n        (click)=\"onCollapsed(item)\"\r\n        aria-hidden=\"true\"\r\n        [ngSwitch]=\"item.collapsed\"\r\n      >\r\n        <span\r\n          *ngSwitchCase=\"true\"\r\n          class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"\r\n        ></span>\r\n\r\n        <span\r\n          *ngSwitchCase=\"false\"\r\n          class=\"bi bi-caret-down-fill caret-icon\"\r\n        ></span>\r\n      </i>\r\n      <label class=\"form-check-label-treeview\" (click)=\"select(item)\"\r\n        >{{ item.text }}\r\n      </label>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template\r\n  #headerTemplate\r\n  let-config=\"config\"\r\n  let-item=\"item\"\r\n  let-onCollapseExpand=\"onCollapseExpand\"\r\n  let-onCheckedChange=\"onCheckedChange\"\r\n  let-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n  <div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n    <div class=\"col-12\">\r\n      <input\r\n        class=\"form-control\"\r\n        type=\"text\"\r\n        [placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n        [(ngModel)]=\"filterText\"\r\n        (ngModelChange)=\"onFilterTextChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n    <div class=\"col-12\">\r\n      <label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n        <strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n      </label>\r\n      <label\r\n        *ngIf=\"config.hasCollapseExpand\"\r\n        class=\"float-right\"\r\n        (click)=\"onCollapseExpand()\"\r\n      >\r\n        <i\r\n          [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\"\r\n          aria-hidden=\"true\"\r\n          [ngSwitch]=\"item.collapsed\"\r\n        >\r\n          <span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n          <span\r\n            *ngSwitchCase=\"false\"\r\n            class=\"bi bi-arrows-angle-contract\"\r\n          ></span>\r\n        </i>\r\n      </label>\r\n    </div>\r\n  </div>\r\n  <a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{\r\n    \"department_management.selectDefault\" | translate\r\n  }}</a>\r\n  <div\r\n    *ngIf=\"config.hasDivider\"\r\n    class=\"dropdown-divider\"\r\n    [ngClass]=\"{ 'dropdown-divider-noMargin': defaultSelect }\"\r\n  ></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n  <div class=\"dropdown-wrapper\">\r\n    <ngx-dropdown-treeview\r\n      [config]=\"config\"\r\n      [headerTemplate]=\"headerTemplate\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-dropdown-treeview>\r\n    <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n  <div class=\"multiple-tree-view dropdown-wrapper\">\r\n    <ngx-dropdown-treeview\r\n      [config]=\"config\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-dropdown-treeview>\r\n    <div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n  <div class=\"tree-view\">\r\n    <ngx-treeview\r\n      [config]=\"config\"\r\n      [headerTemplate]=\"headerTemplate\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-treeview>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n  <div class=\"tree-view-form-control\">\r\n    <ngx-treeview\r\n      [config]=\"config\"\r\n      [headerTemplate]=\"headerTemplate\"\r\n      [items]=\"items\"\r\n      [itemTemplate]=\"itemTemplate\"\r\n    >\r\n    </ngx-treeview>\r\n  </div>\r\n</ng-container>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$9.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1$9.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+TreeviewSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeviewSelectComponent, deps: [{ token: i1$a.TreeviewI18n }, { token: TranslationService }, { token: DepartmentApiService }, { token: DepartmentManagementService$1 }, { token: RolesService }, { token: NuxeoService }, { token: GlobalAdminService }], target: i0.ɵɵFactoryTarget.Component });
+TreeviewSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", config: "config", items: "items", value: "value", multiple: "multiple", defaultSelect: "defaultSelect", pp_departmentNestedTree: "pp_departmentNestedTree", useCustomAddEditAction: "useCustomAddEditAction", customPrefix: "customPrefix", customParentProperty: "customParentProperty", placeholder: "placeholder", defaultSelection: "defaultSelection", displayDepTypee: "displayDepTypee", disabled: "disabled", selectDepChildren: "selectDepChildren", displayIsAllowRecExternal: "displayIsAllowRecExternal", fixedParentNode: "fixedParentNode", showTreeActions: "showTreeActions" }, outputs: { valueChange: "valueChange", plusClicked: "plusClicked", actionClicked: "actionClicked" }, providers: [{ provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n }], viewQueries: [{ propertyName: "dropdownTreeviewComponent", first: true, predicate: DropdownTreeviewComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template\r\n\t#itemTemplate\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n>\r\n\t<!-- single -->\r\n\t<div *ngIf=\"!treeview && !multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <label class=\"form-check-label\" (click)=\"select(item)\">{{\r\n        item.text\r\n      }}</label> -->\r\n\t\t\t<label *ngIf=\"item.disabled\" class=\"form-check-label\">{{ item.text }}</label>\r\n\t\t\t<label *ngIf=\"!item.disabled\" class=\"form-check-label\" (click)=\"select(item)\">{{ item.text }}</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- Multiple -->\r\n\t<div *ngIf=\"!treeview && multiple\">\r\n\t\t<div class=\"text-nowrap row-item\" [ngClass]=\"{ active: item.value === this.value }\">\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapseExpand()\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<!-- <input\r\n        class=\"multiple-checkBox\"\r\n        type=\"checkbox\"\r\n        [checked]=\"multipleSelection.includes(item.value)\"\r\n        (change)=\"selectMultiple($event.target.checked, item)\"\r\n      />\r\n\r\n      <label class=\"form-check-label\">{{ item.text }}</label> -->\r\n\t\t\t<div class=\"multiple-treeview\">\r\n\t\t\t\t<mat-checkbox [checked]=\"isItemSelected(item)\" (change)=\"selectMultiple($event.checked, item)\">\r\n\t\t\t\t\t<span> {{ item.text }} </span>\r\n\t\t\t\t</mat-checkbox>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView -->\r\n\t<div *ngIf=\"treeview && !treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\t(mouseenter)=\"hoverField.style.display = 'flex'\"\r\n\t\t\t(mouseleave)=\"hoverField.style.display = 'none'\"\r\n\t\t\tclass=\"text-nowrap row-item treeview-row\"\r\n\t\t\t[ngClass]=\"{\r\n\t\t\t\tselected: item.value == selectedItem,\r\n\t\t\t\ttreeParentNode: item.value === fixedParentNode?.value\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value != fixedParentNode?.value\">{{ item.text }}</ng-conteiner>\r\n\t\t\t\t<ng-conteiner *ngIf=\"item.value === fixedParentNode?.value\">{{ item.text | translate }}</ng-conteiner>\r\n\t\t\t\t<span #hoverField class=\"hoverField\">\r\n\t\t\t\t\t<ng-container *ngIf=\"showTreeActions\">\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.edit' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'update', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-pencil\"></li>\r\n\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tmatTooltip=\"{{ 'department_management.form.toolTip_message' | translate }}\"\r\n\t\t\t\t\t\t\t(click)=\"onAction($event, 'add', item)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<li class=\"bi bi-plus\"></li>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</span>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<!-- treeView as form control -->\r\n\t<div *ngIf=\"treeview && treeViewAsFormControl\" class=\"tree-view-container\">\r\n\t\t<div\r\n\t\t\tclass=\"text-nowrap row-item treeview-row-form-control\"\r\n\t\t\t[ngClass]=\"{ 'selected-form-control': item.value == selectedItem }\"\r\n\t\t>\r\n\t\t\t<i *ngIf=\"item.children\" (click)=\"onCollapsed(item)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-caret-{{ arabic ? 'left' : 'right' }}-fill caret-icon\"></span>\r\n\r\n\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-caret-down-fill caret-icon\"></span>\r\n\t\t\t</i>\r\n\t\t\t<label class=\"form-check-label-treeview\" (click)=\"select(item)\">{{ item.text }} </label>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n<ng-template\r\n\t#headerTemplate\r\n\tlet-config=\"config\"\r\n\tlet-item=\"item\"\r\n\tlet-onCollapseExpand=\"onCollapseExpand\"\r\n\tlet-onCheckedChange=\"onCheckedChange\"\r\n\tlet-onFilterTextChange=\"onFilterTextChange\"\r\n>\r\n\t<div *ngIf=\"config.hasFilter\" class=\"row row-filter\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<input\r\n\t\t\t\tclass=\"form-control\"\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\t[placeholder]=\"i18n.getFilterPlaceholder(placeholder)\"\r\n\t\t\t\t[(ngModel)]=\"filterText\"\r\n\t\t\t\t(ngModelChange)=\"onFilterTextChange($event)\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"config.hasAllCheckBox || config.hasCollapseExpand\" class=\"row\">\r\n\t\t<div class=\"col-12\">\r\n\t\t\t<label *ngIf=\"config.hasAllCheckBox\" (click)=\"select(item)\">\r\n\t\t\t\t<strong>{{ i18n.getAllCheckboxText() }}</strong>\r\n\t\t\t</label>\r\n\t\t\t<label *ngIf=\"config.hasCollapseExpand\" class=\"float-right\" (click)=\"onCollapseExpand()\">\r\n\t\t\t\t<i [title]=\"i18n.getTooltipCollapseExpandText(item.collapsed)\" aria-hidden=\"true\" [ngSwitch]=\"item.collapsed\">\r\n\t\t\t\t\t<span *ngSwitchCase=\"true\" class=\"bi bi-arrows-angle-expand\"></span>\r\n\t\t\t\t\t<span *ngSwitchCase=\"false\" class=\"bi bi-arrows-angle-contract\"></span>\r\n\t\t\t\t</i>\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</div>\r\n\t<a *ngIf=\"defaultSelect\" class=\"select-default\" (click)=\"selectDefault()\">{{\r\n\t\t'department_management.selectDefault' | translate\r\n\t}}</a>\r\n\t<div\r\n\t\t*ngIf=\"config.hasDivider\"\r\n\t\tclass=\"dropdown-divider\"\r\n\t\t[ngClass]=\"{ 'dropdown-divider-noMargin': defaultSelect }\"\r\n\t></div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"!treeview && !multiple\">\r\n\t<div class=\"dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[headerTemplate]=\"headerTemplate\"\r\n\t\t\t[items]=\"items\"\r\n\t\t\t[itemTemplate]=\"itemTemplate\"\r\n\t\t>\r\n\t\t</ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!treeview && multiple\">\r\n\t<div class=\"multiple-tree-view dropdown-wrapper\">\r\n\t\t<ngx-dropdown-treeview [config]=\"config\" [items]=\"items\" [itemTemplate]=\"itemTemplate\"> </ngx-dropdown-treeview>\r\n\t\t<div class=\"disable-effect\" *ngIf=\"disabled\"></div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"treeview && !treeViewAsFormControl\">\r\n\t<div class=\"tree-view\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\r\n<ng-container *ngIf=\"treeview && treeViewAsFormControl\">\r\n\t<div class=\"tree-view-form-control\">\r\n\t\t<ngx-treeview [config]=\"config\" [headerTemplate]=\"headerTemplate\" [items]=\"items\" [itemTemplate]=\"itemTemplate\">\r\n\t\t</ngx-treeview>\r\n\t</div>\r\n</ng-container>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.caret-icon{color:#6c757d;font-size:14px}.dropdown-wrapper{position:relative}.dropdown-wrapper .disable-effect{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element,.multiple-treeview .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.multiple-treeview .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.multiple-treeview mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.form-check-label-treeview{display:flex;align-items:center;justify-content:space-between;width:100%}.form-check-label-treeview .hoverField{display:none;align-items:center;text-align:center}.form-check-label-treeview .hoverField span{display:flex;align-items:center;justify-content:center;margin:0 3px;border:none;background-color:snow;background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:30px;width:30px;color:#fff;border-radius:5px;list-style:none;margin-inline-end:4px}.form-check-label-treeview .hoverField span .bi-plus{font-size:28px;display:flex;justify-content:center}.form-check-label-treeview .hoverField .add-btn{width:164px;padding:1px;display:flex;justify-content:center;align-items:center;font-size:13px;background-color:#0dbab5;border-radius:5px;border:0;color:#fff;--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.form-check-label-treeview .hoverField .plus-btn{display:flex;font-size:28px;align-items:center}.selected{background-color:#f5f6f8}.selected .hoverField{display:flex!important}.selected-form-control{background-color:#d9dce2}.selected-form-control .hoverField{display:flex!important}.treeview-item .row-item{display:flex;align-items:center;padding:5px 10px}.treeview-item .row-item .multiple-checkBox{margin-inline-start:4px;margin-inline-end:4px}.treeview-item .active{background-color:#f5f6f8}.treeview-row{display:flex;align-items:center}.treeview-row:hover{background-color:#f5f6f8}.treeview-row-form-control{display:flex;align-items:center}.treeview-row-form-control:hover{background-color:#d9dce2}label{margin-bottom:0;cursor:pointer}.bi{cursor:pointer;margin-right:.3rem}ngx-treeview .treeview-container{max-height:200px!important;overflow-x:hidden;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-y:auto}ngx-treeview .select-default{display:flex;justify-content:start;font-size:13px;cursor:pointer;margin-bottom:3px;margin-top:4px}ngx-treeview .dropdown-divider-noMargin{margin-top:0!important}.tree-view ngx-treeview .treeview-container{max-height:500px!important;overflow-x:hidden}.tree-view-form-control ngx-treeview .treeview-container{max-height:300px!important;overflow-x:hidden}ngx-dropdown-treeview .dropdown .dropdown-menu{margin-top:0!important;width:100%}ngx-dropdown-treeview .dropdown .btn-outline-secondary{background-color:#8f98aa1a;border:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:hover{color:#6c757d!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:focus{box-shadow:none!important}ngx-dropdown-treeview .dropdown .btn-outline-secondary:active{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}ngx-dropdown-treeview .dropdown:after{position:static!important}ngx-dropdown-treeview .show .dropdown-toggle{background-color:#8f98aa1a!important;border:none!important;color:#6c757d!important}.rtl .treeview-item .treeview-item{margin-right:2rem!important;margin-left:0!important}.rtl .row-all .col-12{text-align:right}.rtl .row-all .col-12 .pull-right{float:left!important}.rtl .form-check.form-check-inline{margin-right:0!important}.rtl .btn.dropdown-toggle{margin-right:0!important}.rtl .dropdown-menu:not(ngb-datepicker){right:0px;left:unset}.rtl .dropdown :after{margin-top:.6rem;left:.6rem;right:unset!important}.rtl ngx-treeview-item{text-align:right;direction:rtl}@media (min-width: 576px){.rtl .form-inline .form-check-input{margin:3px}}.rtl .form-inline .form-check-input{margin:3px;position:inherit}.rtl .dropdown button{text-align:right!important;direction:rtl}.rtl .fa.fa-caret-right{transform:rotate(180deg)}\n"], components: [{ type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1$a.DropdownTreeviewComponent, selector: "ngx-dropdown-treeview", inputs: ["buttonClass", "config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }, { type: i1$a.TreeviewComponent, selector: "ngx-treeview", inputs: ["config", "headerTemplate", "itemTemplate", "items"], outputs: ["selectedChange", "filterChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeviewSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -9400,7 +9670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     providers: [{ provide: TreeviewI18n, useClass: DropdownTreeviewSelectI18n }],
                 }]
-        }], ctorParameters: function () { return [{ type: i1$9.TreeviewI18n }, { type: TranslationService }, { type: DepartmentApiService }, { type: DepartmentManagementService$1 }, { type: RolesService }, { type: NuxeoService }, { type: GlobalAdminService }]; }, propDecorators: { treeview: [{
+        }], ctorParameters: function () { return [{ type: i1$a.TreeviewI18n }, { type: TranslationService }, { type: DepartmentApiService }, { type: DepartmentManagementService$1 }, { type: RolesService }, { type: NuxeoService }, { type: GlobalAdminService }]; }, propDecorators: { treeview: [{
                 type: Input
             }], treeViewAsFormControl: [{
                 type: Input
@@ -9445,6 +9715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: [DropdownTreeviewComponent, { static: false }]
             }], fixedParentNode: [{
                 type: Input
+            }], showTreeActions: [{
+                type: Input
             }] } });
 
 /**
@@ -9486,6 +9758,7 @@ class DynamicFormDepartmentComponent {
         /** emitted when action is clicked */
         this.actionClicked = new EventEmitter();
         this.onDataLoad = new EventEmitter();
+        this.showTreeActions = true;
         this.loading = false;
         this.arabic = false;
         // function related to value accessor
@@ -9615,7 +9888,7 @@ class DynamicFormDepartmentComponent {
     }
 }
 DynamicFormDepartmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormDepartmentComponent, deps: [{ token: TranslationService }, { token: DepartmentApiService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormDepartmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", label: "label", defaultSelect: "defaultSelect", displayDepTypee: "displayDepTypee", displayIsAllowRecExternal: "displayIsAllowRecExternal", pp_departmentNestedTree: "pp_departmentNestedTree", pp_departmentTree: "pp_departmentTree", customPrefix: "customPrefix", useCustomAddEditAction: "useCustomAddEditAction", customParentProperty: "customParentProperty", customParams: "customParams", disabled: "disabled", nodesExpandedByDefault: "nodesExpandedByDefault", fixedParentNode: "fixedParentNode" }, outputs: { onSelecting: "onSelecting", actionClicked: "actionClicked", onDataLoad: "onDataLoad" }, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<app-dynamic-form-treeview-select\r\n  [treeview]=\"treeview\"\r\n  [treeViewAsFormControl]=\"treeViewAsFormControl\"\r\n  [defaultSelect]=\"defaultSelect\"\r\n  [multiple]=\"multiple\"\r\n  [items]=\"data\"\r\n  [placeholder]=\"placeholder\"\r\n  [displayDepTypee]=\"displayDepTypee\"\r\n  [displayIsAllowRecExternal]=\"displayIsAllowRecExternal\"\r\n  [pp_departmentNestedTree]=\"pp_departmentNestedTree\"\r\n  [useCustomAddEditAction]=\"useCustomAddEditAction\"\r\n  [fixedParentNode]=\"fixedParentNode\"\r\n  [customPrefix]=\"customPrefix\"\r\n  [customParentProperty]=\"customParentProperty\"\r\n  (valueChange)=\"getSelecteditems($event)\"\r\n  [(value)]=\"selection\"\r\n  (actionClicked)=\"onAction($event)\"\r\n  [disabled]=\"disabled\"\r\n  class=\"dropdown-wrapper\"\r\n  [ngClass]=\"{ 'input-filled': selection && selection.length > 0 }\"\r\n>\r\n</app-dynamic-form-treeview-select>\r\n<mat-error\r\n  [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n  class=\"app-textitem-editable-error\"\r\n  *ngIf=\"hasErrors()\"\r\n>\r\n  <ul>\r\n    <li *ngIf=\"control.errors.required\">\r\n      {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\r\n", styles: ["app-dynamic-form-department .dropdown{border:1px solid #ccc!important;border-radius:5px!important}app-dynamic-form-department .input-filled .dropdown{border-color:#1a96c6!important}\n"], components: [{ type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: ["treeview", "treeViewAsFormControl", "config", "items", "value", "multiple", "defaultSelect", "pp_departmentNestedTree", "useCustomAddEditAction", "customPrefix", "customParentProperty", "placeholder", "defaultSelection", "displayDepTypee", "disabled", "selectDepChildren", "displayIsAllowRecExternal", "fixedParentNode"], outputs: ["valueChange", "plusClicked", "actionClicked"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormDepartmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: { treeview: "treeview", treeViewAsFormControl: "treeViewAsFormControl", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", label: "label", defaultSelect: "defaultSelect", displayDepTypee: "displayDepTypee", displayIsAllowRecExternal: "displayIsAllowRecExternal", pp_departmentNestedTree: "pp_departmentNestedTree", pp_departmentTree: "pp_departmentTree", customPrefix: "customPrefix", useCustomAddEditAction: "useCustomAddEditAction", customParentProperty: "customParentProperty", customParams: "customParams", disabled: "disabled", nodesExpandedByDefault: "nodesExpandedByDefault", fixedParentNode: "fixedParentNode", showTreeActions: "showTreeActions" }, outputs: { onSelecting: "onSelecting", actionClicked: "actionClicked", onDataLoad: "onDataLoad" }, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n\t<div>\r\n\t\t<label class=\"select-label\"\r\n\t\t\t>{{ label | translate }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n\t\t>\r\n\t</div>\r\n</ng-container>\r\n<app-dynamic-form-treeview-select\r\n\t[treeview]=\"treeview\"\r\n\t[treeViewAsFormControl]=\"treeViewAsFormControl\"\r\n\t[defaultSelect]=\"defaultSelect\"\r\n\t[multiple]=\"multiple\"\r\n\t[items]=\"data\"\r\n\t[placeholder]=\"placeholder\"\r\n\t[displayDepTypee]=\"displayDepTypee\"\r\n\t[displayIsAllowRecExternal]=\"displayIsAllowRecExternal\"\r\n\t[pp_departmentNestedTree]=\"pp_departmentNestedTree\"\r\n\t[useCustomAddEditAction]=\"useCustomAddEditAction\"\r\n\t[fixedParentNode]=\"fixedParentNode\"\r\n\t[customPrefix]=\"customPrefix\"\r\n\t[customParentProperty]=\"customParentProperty\"\r\n\t(valueChange)=\"getSelecteditems($event)\"\r\n\t[(value)]=\"selection\"\r\n\t(actionClicked)=\"onAction($event)\"\r\n\t[disabled]=\"disabled\"\r\n\t[showTreeActions]=\"showTreeActions\"\r\n\tclass=\"dropdown-wrapper\"\r\n\t[ngClass]=\"{ 'input-filled': selection && selection.length > 0 }\"\r\n>\r\n</app-dynamic-form-treeview-select>\r\n<mat-error [attr.data-automation-id]=\"'card-textitem-error-'\" class=\"app-textitem-editable-error\" *ngIf=\"hasErrors()\">\r\n\t<ul>\r\n\t\t<li *ngIf=\"control.errors.required\">\r\n\t\t\t{{ 'VALIDATORS.REQUIRED' | translate }}\r\n\t\t</li>\r\n\t</ul>\r\n</mat-error>\r\n", styles: ["app-dynamic-form-department .dropdown{border:1px solid #ccc!important;border-radius:5px!important}app-dynamic-form-department .input-filled .dropdown{border-color:#1a96c6!important}\n"], components: [{ type: TreeviewSelectComponent, selector: "app-dynamic-form-treeview-select", inputs: ["treeview", "treeViewAsFormControl", "config", "items", "value", "multiple", "defaultSelect", "pp_departmentNestedTree", "useCustomAddEditAction", "customPrefix", "customParentProperty", "placeholder", "defaultSelection", "displayDepTypee", "disabled", "selectDepChildren", "displayIsAllowRecExternal", "fixedParentNode", "showTreeActions"], outputs: ["valueChange", "plusClicked", "actionClicked"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormDepartmentComponent, decorators: [{
             type: Component,
             args: [{
@@ -9670,6 +9943,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Output
             }], onDataLoad: [{
                 type: Output
+            }], showTreeActions: [{
+                type: Input
             }] } });
 
 const moment$3 = moment$6;
@@ -10510,7 +10785,7 @@ class DynamicFormSelectUserFilterComponent {
     }
 }
 DynamicFormSelectUserFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormSelectUserFilterComponent, deps: [{ token: UsersInDepartmentsApiService }, { token: i1.TranslateService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormSelectUserFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectUserFilterComponent, selector: "cts-dynamic-form-select-user-filter", inputs: { deptTitle: "deptTitle", label: "label", bindValue: "bindValue", bindLabel: "bindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", preSelectedValues: "preSelectedValues", isAsync: "isAsync", attachSource: "attachSource", source$: "source$", hideLoaded: "hideLoaded", loading: "loading", disabled: "disabled", filter: "filter" }, outputs: { onSelectItems: "onSelectItems" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<div class=\"user-select\" [ngClass]=\"{ 'multiple-wrapper': multiple }\" SetRtl>\r\n  <ng-select\r\n    #ngSelectComponent\r\n    [items]=\"buffer\"\r\n    [bindLabel]=\"bindLabel\"\r\n    [bindValue]=\"bindValue\"\r\n    [placeholder]=\"placeholder\"\r\n    [multiple]=\"multiple\"\r\n    [searchable]=\"searchable\"\r\n    [closeOnSelect]=\"closeOnSelect\"\r\n    [hideSelected]=\"hideSelectedItems\"\r\n    [loading]=\"loading\"\r\n    (scrollToEnd)=\"onScrollToEnd()\"\r\n    [disabled]=\"disabled\"\r\n    [(ngModel)]=\"selection\"\r\n    (change)=\"emitSelection($event)\"\r\n  >\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div class=\"user-name\">\r\n          {{ item?.properties?.firstName }} {{ item?.properties?.lastName }}\r\n        </div>\r\n        <div>\r\n          <span\r\n            class=\"ng-value-icon right\"\r\n            (click)=\"clear(item)\"\r\n            aria-hidden=\"true\"\r\n            >\u00D7</span\r\n          >\r\n        </div>\r\n      </span>\r\n    </ng-template>\r\n\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div>\r\n          {{ item?.properties?.firstName }} {{ item?.properties?.lastName }}\r\n        </div>\r\n\r\n        <div></div>\r\n      </span>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\r\n<mat-error\r\n  [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n  class=\"app-textitem-editable-error\"\r\n  *ngIf=\"hasErrors()\"\r\n>\r\n  <ul>\r\n    <li *ngIf=\"control.errors.required\">\r\n      {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container{background-color:#8f98aa1a!important;border:1px solid #ccc!important;border-radius:5px!important}.user-select .ng-select-container .ng-value-container{padding:5px 7px 0!important}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.multiple-wrapper .ng-select-container{overflow:visible!important}.multiple-wrapper .ng-select-container .ng-value-container{position:absolute;top:40px;width:100%}.multiple-wrapper .ng-select-container .ng-value-container .ng-placeholder{display:block;position:absolute;top:-26px!important}.multiple-wrapper .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper .ng-select-container .ng-value-container .ng-value .user-name{font-size:12px}.multiple-wrapper .ng-select-container .ng-clear-wrapper{display:none}.multiple-wrapper .ng-select-container .ng-arrow-wrapper{position:absolute;right:5px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value .ng-value-icon{border-left:none!important;border-right:1px solid #b8dbff}.multiple-wrapper.rtl .ng-select-container .ng-arrow-wrapper{left:5px;right:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}\n"], components: [{ type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i1$6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormSelectUserFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectUserFilterComponent, selector: "cts-dynamic-form-select-user-filter", inputs: { deptTitle: "deptTitle", label: "label", bindValue: "bindValue", bindLabel: "bindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", preSelectedValues: "preSelectedValues", isAsync: "isAsync", attachSource: "attachSource", source$: "source$", hideLoaded: "hideLoaded", loading: "loading", disabled: "disabled", filter: "filter" }, outputs: { onSelectItems: "onSelectItems" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<div class=\"user-select\" [ngClass]=\"{ 'multiple-wrapper': multiple }\" SetRtl>\r\n  <ng-select\r\n    #ngSelectComponent\r\n    [items]=\"buffer\"\r\n    [bindLabel]=\"bindLabel\"\r\n    [bindValue]=\"bindValue\"\r\n    [placeholder]=\"placeholder\"\r\n    [multiple]=\"multiple\"\r\n    [searchable]=\"searchable\"\r\n    [closeOnSelect]=\"closeOnSelect\"\r\n    [hideSelected]=\"hideSelectedItems\"\r\n    [loading]=\"loading\"\r\n    (scrollToEnd)=\"onScrollToEnd()\"\r\n    [disabled]=\"disabled\"\r\n    [(ngModel)]=\"selection\"\r\n    (change)=\"emitSelection($event)\"\r\n  >\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div class=\"user-name\">\r\n          {{ item?.properties?.firstName }} {{ item?.properties?.lastName }}\r\n        </div>\r\n        <div>\r\n          <span\r\n            class=\"ng-value-icon right\"\r\n            (click)=\"clear(item)\"\r\n            aria-hidden=\"true\"\r\n            >\u00D7</span\r\n          >\r\n        </div>\r\n      </span>\r\n    </ng-template>\r\n\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div>\r\n          {{ item?.properties?.firstName }} {{ item?.properties?.lastName }}\r\n        </div>\r\n\r\n        <div></div>\r\n      </span>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\r\n<mat-error\r\n  [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n  class=\"app-textitem-editable-error\"\r\n  *ngIf=\"hasErrors()\"\r\n>\r\n  <ul>\r\n    <li *ngIf=\"control.errors.required\">\r\n      {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container{background-color:#8f98aa1a!important;border:1px solid #ccc!important;border-radius:5px!important}.user-select .ng-select-container .ng-value-container{padding:5px 7px 0!important}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.multiple-wrapper .ng-select-container{overflow:visible!important}.multiple-wrapper .ng-select-container .ng-value-container{position:absolute;top:40px;width:100%}.multiple-wrapper .ng-select-container .ng-value-container .ng-placeholder{display:block;position:absolute;top:-26px!important}.multiple-wrapper .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper .ng-select-container .ng-value-container .ng-value .user-name{font-size:12px}.multiple-wrapper .ng-select-container .ng-clear-wrapper{display:none}.multiple-wrapper .ng-select-container .ng-arrow-wrapper{position:absolute;right:5px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value .ng-value-icon{border-left:none!important;border-right:1px solid #b8dbff}.multiple-wrapper.rtl .ng-select-container .ng-arrow-wrapper{left:5px;right:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}\n"], components: [{ type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormSelectUserFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -10826,7 +11101,7 @@ class DynamicFormSelectUsersComponent {
     }
 }
 DynamicFormSelectUsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormSelectUsersComponent, deps: [{ token: UsersInDepartmentsApiService }, { token: i1.TranslateService }, { token: TranslationService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormSelectUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectUsersComponent, selector: "cts-dynamic-form-select-users", inputs: { deptTitle: "deptTitle", groupName: "groupName", label: "label", bindValue: "bindValue", bindLabel: "bindLabel", arabicBindLabel: "arabicBindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", preSelectedValues: "preSelectedValues", usePreSelectedValue: "usePreSelectedValue", disabled: "disabled", filter: "filter", useArabicName: "useArabicName" }, outputs: { onSelectItems: "onSelectItems" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<div class=\"user-select\" [ngClass]=\"{ 'multiple-wrapper': multiple }\" SetRtl>\r\n  <ng-select\r\n    #ngSelectComponent\r\n    [items]=\"buffer\"\r\n    [bindLabel]=\"useArabicName ? (isArabic ? arabicBindLabel : bindLabel)  : bindLabel\"\r\n    [placeholder]=\"\r\n      multiple && (selection && selection.length > 0) ? selectionstrg : placeholder\r\n    \"\r\n    [multiple]=\"multiple\"\r\n    [searchable]=\"searchable\"\r\n    [closeOnSelect]=\"closeOnSelect\"\r\n    [hideSelected]=\"hideSelectedItems\"\r\n    [loading]=\"loading\"\r\n    (scrollToEnd)=\"onScrollToEnd()\"\r\n    [disabled]=\"disabled\"\r\n    [typeahead]=\"userNameInput$\"\r\n    [compareWith]=\"compareFn\"\r\n    [(ngModel)]=\"selection\"\r\n    (change)=\"emitSelection($event)\"\r\n  >\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div class=\"user-name\">\r\n          {{ item?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : \r\n          (useArabicName ? (isArabic ? (item?.fullNameAr ? item?.fullNameAr : item?.fullName) : item?.fullName) : \r\n          (item?.properties?.firstName + \" \" +item?.properties?.lastName)) }}\r\n\r\n\r\n        </div>\r\n        <div>\r\n          <span\r\n            class=\"ng-value-icon right\"\r\n            (click)=\"clear(item)\"\r\n            aria-hidden=\"true\"\r\n            >\u00D7</span\r\n          >\r\n        </div>\r\n      </span>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      ng-option-tmp\r\n      let-item=\"item\"\r\n      let-item$=\"item$\"\r\n      let-index=\"index\"\r\n    >\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <mat-checkbox\r\n          *ngIf=\"multiple\"\r\n          id=\"item-{{ index }}\"\r\n          [ngModel]=\"item$.selected\"\r\n          (click)=\"(false)\"\r\n        ></mat-checkbox>\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div>\r\n          {{ item?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : \r\n          (useArabicName ? (isArabic ? (item?.fullNameAr ? item?.fullNameAr : item?.fullName) : item?.fullName) : \r\n          (item?.properties?.firstName + \" \" +item?.properties?.lastName)) }}\r\n        </div>\r\n\r\n        <div></div>\r\n      </span>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\r\n<mat-error\r\n  [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n  class=\"app-textitem-editable-error\"\r\n  *ngIf=\"hasErrors()\"\r\n>\r\n  <ul>\r\n    <li *ngIf=\"control.errors.required\">\r\n      {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important}.user-select .ng-select-container .ng-value-container{padding:5px 7px 0!important}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.user-select .mat-checkbox-ripple .mat-ripple-element,.user-select .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.user-select .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.user-select mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.multiple-wrapper .ng-select-container{overflow:visible!important}.multiple-wrapper .ng-select-container.ng-has-value{margin-bottom:65px}.multiple-wrapper .ng-select-container .ng-value-container{position:absolute;top:40px;width:100%;max-height:65px;overflow-y:auto}.multiple-wrapper .ng-select-container .ng-value-container .ng-placeholder{display:block;position:absolute;top:-26px!important}.multiple-wrapper .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper .ng-select-container .ng-value-container .ng-value .user-name{font-size:12px}.multiple-wrapper .ng-select-container .ng-value-container .ng-input{position:absolute;top:-35px!important}.multiple-wrapper .ng-select-container .ng-clear-wrapper{display:none}.multiple-wrapper .ng-select-container .ng-arrow-wrapper{position:absolute;right:5px}.multiple-wrapper .ng-select-filtered .ng-value-container .ng-placeholder{display:none!important}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value .ng-value-icon{border-left:none!important;border-right:1px solid #b8dbff}.multiple-wrapper.rtl .ng-select-container .ng-arrow-wrapper{left:5px;right:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}\n"], components: [{ type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i1$6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormSelectUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormSelectUsersComponent, selector: "cts-dynamic-form-select-users", inputs: { deptTitle: "deptTitle", groupName: "groupName", label: "label", bindValue: "bindValue", bindLabel: "bindLabel", arabicBindLabel: "arabicBindLabel", placeholder: "placeholder", multiple: "multiple", searchable: "searchable", closeOnSelect: "closeOnSelect", hideSelectedItems: "hideSelectedItems", preSelectedValues: "preSelectedValues", usePreSelectedValue: "usePreSelectedValue", disabled: "disabled", filter: "filter", useArabicName: "useArabicName" }, outputs: { onSelectItems: "onSelectItems" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"label\">\r\n  <div>\r\n    <label class=\"select-label\"\r\n      >{{ label | translate\r\n      }}<span *ngIf=\"isRequired()\" class=\"text-danger mx-1\">*</span></label\r\n    >\r\n  </div>\r\n</ng-container>\r\n<div class=\"user-select\" [ngClass]=\"{ 'multiple-wrapper': multiple }\" SetRtl>\r\n  <ng-select\r\n    #ngSelectComponent\r\n    [items]=\"buffer\"\r\n    [bindLabel]=\"useArabicName ? (isArabic ? arabicBindLabel : bindLabel)  : bindLabel\"\r\n    [placeholder]=\"\r\n      multiple && (selection && selection.length > 0) ? selectionstrg : placeholder\r\n    \"\r\n    [multiple]=\"multiple\"\r\n    [searchable]=\"searchable\"\r\n    [closeOnSelect]=\"closeOnSelect\"\r\n    [hideSelected]=\"hideSelectedItems\"\r\n    [loading]=\"loading\"\r\n    (scrollToEnd)=\"onScrollToEnd()\"\r\n    [disabled]=\"disabled\"\r\n    [typeahead]=\"userNameInput$\"\r\n    [compareWith]=\"compareFn\"\r\n    [(ngModel)]=\"selection\"\r\n    (change)=\"emitSelection($event)\"\r\n  >\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div class=\"user-name\">\r\n          {{ item?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : \r\n          (useArabicName ? (isArabic ? (item?.fullNameAr ? item?.fullNameAr : item?.fullName) : item?.fullName) : \r\n          (item?.properties?.firstName + \" \" +item?.properties?.lastName)) }}\r\n\r\n\r\n        </div>\r\n        <div>\r\n          <span\r\n            class=\"ng-value-icon right\"\r\n            (click)=\"clear(item)\"\r\n            aria-hidden=\"true\"\r\n            >\u00D7</span\r\n          >\r\n        </div>\r\n      </span>\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      ng-option-tmp\r\n      let-item=\"item\"\r\n      let-item$=\"item$\"\r\n      let-index=\"index\"\r\n    >\r\n      <span\r\n        style=\"\r\n          display: flex;\r\n          align-items: center;\r\n          column-gap: 4px;\r\n          font-size: 16px;\r\n        \"\r\n      >\r\n        <mat-checkbox\r\n          *ngIf=\"multiple\"\r\n          id=\"item-{{ index }}\"\r\n          [ngModel]=\"item$.selected\"\r\n          (click)=\"(false)\"\r\n        ></mat-checkbox>\r\n        <div style=\"width: 30px; height: 30px\">\r\n          <cts-avatar [user]=\"item\"></cts-avatar>\r\n        </div>\r\n        <div>\r\n          {{ item?.id === 'system' ? ('SYSTEM_ADMIN' | translate) : \r\n          (useArabicName ? (isArabic ? (item?.fullNameAr ? item?.fullNameAr : item?.fullName) : item?.fullName) : \r\n          (item?.properties?.firstName + \" \" +item?.properties?.lastName)) }}\r\n        </div>\r\n\r\n        <div></div>\r\n      </span>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\r\n<mat-error\r\n  [attr.data-automation-id]=\"'card-textitem-error-'\"\r\n  class=\"app-textitem-editable-error\"\r\n  *ngIf=\"hasErrors()\"\r\n>\r\n  <ul>\r\n    <li *ngIf=\"control.errors.required\">\r\n      {{ \"VALIDATORS.REQUIRED\" | translate }}\r\n    </li>\r\n  </ul>\r\n</mat-error>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.select-label{color:#8f98aa;font-size:12px;margin-bottom:0}.user-select .ng-select-container{border:1px solid #ccc!important;border-radius:5px!important;background-color:#8f98aa1a!important}.user-select .ng-select-container .ng-value-container{padding:5px 7px 0!important}.user-select .ng-select-container .ng-value-container .ng-placeholder{padding:0 5px;font-size:12px}.user-select .ng-select-container .ng-value-container .ng-value{color:#495057}.user-select .ng-select-container .ng-arrow-wrapper{padding:0 20px}.user-select .ng-select-container .ng-input{left:10px;right:10px;width:auto}.user-select .mat-checkbox-ripple .mat-ripple-element,.user-select .mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#33e3b7!important}.user-select .mat-checkbox-ripple .mat-ripple-element{position:fixed;left:inherit;top:inherit;transform:translate(-3px,-3px)!important}.user-select mat-checkbox .mat-checkbox-background{background-color:#d9dce2!important}.multiple-wrapper .ng-select-container{overflow:visible!important}.multiple-wrapper .ng-select-container.ng-has-value{margin-bottom:65px}.multiple-wrapper .ng-select-container .ng-value-container{position:absolute;top:40px;width:100%;max-height:65px;overflow-y:auto}.multiple-wrapper .ng-select-container .ng-value-container .ng-placeholder{display:block;position:absolute;top:-26px!important}.multiple-wrapper .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper .ng-select-container .ng-value-container .ng-value .user-name{font-size:12px}.multiple-wrapper .ng-select-container .ng-value-container .ng-input{position:absolute;top:-35px!important}.multiple-wrapper .ng-select-container .ng-clear-wrapper{display:none}.multiple-wrapper .ng-select-container .ng-arrow-wrapper{position:absolute;right:5px}.multiple-wrapper .ng-select-filtered .ng-value-container .ng-placeholder{display:none!important}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value{padding:5px 10px}.multiple-wrapper.rtl .ng-select-container .ng-value-container .ng-value .ng-value-icon{border-left:none!important;border-right:1px solid #b8dbff}.multiple-wrapper.rtl .ng-select-container .ng-arrow-wrapper{left:5px;right:auto}.ng-select-disabled .ng-select-container{background-color:#e9ecef!important}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper{position:relative}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper input{visibility:hidden;width:20px;height:20px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper{position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #2e62df;display:flex;justify-content:center;align-items:center}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .option-wrapper .check-box-wrapper .icon-wrapper .icon{color:#2e62df;display:none;justify-content:center;align-items:center;font-weight:bold}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .check-box-wrapper .icon-wrapper .icon{display:flex}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option-selected .option-wrapper .label-wrapper{color:#2e62df}.ng-select .ng-select-focused:not(.ng-select-opened) .ng-select-container{border-color:#ccc;box-shadow:none}\n"], components: [{ type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SetRtlDirective, selector: "[SetRtl]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     Cacheable({
         maxCacheCount: 1000,
@@ -11022,7 +11297,7 @@ class DynamicFormTextareaComponent {
 }
 DynamicFormTextareaComponent.DEFAULT_SEPARATOR = ', ';
 DynamicFormTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormTextareaComponent, deps: [{ token: DynamicFormUpdateService }, { token: i1.TranslateService }, { token: i2$4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormTextareaComponent, selector: "app-dynamic-form-textarea", inputs: { property: "property", label: "label", editable: "editable", disabled: "disabled", id: "id", placeholder: "placeholder", displayEmpty: "displayEmpty", horizontalAlign: "horizontalAlign" }, viewQueries: [{ propertyName: "editorInput", first: true, predicate: ["editorInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-property-value\">\r\n\t<div class=\"app-input-wrapper\" [ngClass]=\"{ row: horizontalAlign }\">\r\n\t\t<label\r\n\t\t\t*ngIf=\"label\"\r\n\t\t\tfor=\"formGroupInputSmall\"\r\n\t\t\t[ngClass]=\"{ 'col-3': horizontalAlign }\"\r\n\t\t\t>{{ label | translate\r\n\t\t\t}}<span *ngIf=\"isRequired()\" class=\"text-danger\">*</span></label\r\n\t\t>\r\n\t\t<div [ngClass]=\"{ 'col-9': horizontalAlign }\">\r\n\t\t\t<ng-container *ngIf=\"isEditable(); else readOnly\">\r\n\t\t\t\t<textarea\r\n\t\t\t\t\t[id]=\"id\"\r\n\t\t\t\t\tclass=\"form-control field-style\"\r\n\t\t\t\t\tplaceholder=\"{{ placeholder | translate }}\"\r\n\t\t\t\t\t[attr.disabled]=\"isDisabled() || null\"\r\n\t\t\t\t\t#editorInput\r\n\t\t\t\t\tmatTextareaAutosize\r\n\t\t\t\t\tmatAutosizeMinRows=\"3\"\r\n\t\t\t\t\tmatAutosizeMaxRows=\"5\"\r\n\t\t\t\t\t[(ngModel)]=\"editedValue\"\r\n\t\t\t\t\t(input)=\"onTextAreaInputChange()\"\r\n\t\t\t\t\t(keyup)=\"update($event)\"\r\n\t\t\t\t\t[attr.data-automation-id]=\"'card-textitem-edittextarea-'\"\r\n\t\t\t\t></textarea>\r\n\t\t\t\t<mat-error\r\n\t\t\t\t\t[attr.data-automation-id]=\"'card-textitem-error-'\"\r\n\t\t\t\t\tclass=\"app-textitem-editable-error\"\r\n\t\t\t\t\t*ngIf=\"hasErrors()\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li *ngIf=\"control.errors.required\">\r\n\t\t\t\t\t\t\t{{ label | translate }} {{ 'VALIDATORS.REQUIRED' | translate }}\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t</ul>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-template #readOnly>\r\n\t\t\t\t{{ editedValue }}\r\n\t\t\t</ng-template>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".app-textitem-editable-error{margin-top:-15px;padding-top:0}textarea::placeholder{font-size:12px}\n"], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.MatTextareaAutosize, selector: "textarea[mat-autosize], textarea[matTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "matAutosizeMinRows", "matAutosizeMaxRows", "mat-autosize", "matTextareaAutosize"], exportAs: ["matTextareaAutosize"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicFormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicFormTextareaComponent, selector: "app-dynamic-form-textarea", inputs: { property: "property", label: "label", editable: "editable", disabled: "disabled", id: "id", placeholder: "placeholder", displayEmpty: "displayEmpty", horizontalAlign: "horizontalAlign" }, viewQueries: [{ propertyName: "editorInput", first: true, predicate: ["editorInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-property-value\">\r\n\t<div class=\"app-input-wrapper\" [ngClass]=\"{ row: horizontalAlign }\">\r\n\t\t<label\r\n\t\t\t*ngIf=\"label\"\r\n\t\t\tfor=\"formGroupInputSmall\"\r\n\t\t\t[ngClass]=\"{ 'col-3': horizontalAlign }\"\r\n\t\t\t>{{ label | translate\r\n\t\t\t}}<span *ngIf=\"isRequired()\" class=\"text-danger\">*</span></label\r\n\t\t>\r\n\t\t<div [ngClass]=\"{ 'col-9': horizontalAlign }\">\r\n\t\t\t<ng-container *ngIf=\"isEditable(); else readOnly\">\r\n\t\t\t\t<textarea\r\n\t\t\t\t\t[id]=\"id\"\r\n\t\t\t\t\tclass=\"form-control field-style\"\r\n\t\t\t\t\tplaceholder=\"{{ placeholder | translate }}\"\r\n\t\t\t\t\t[attr.disabled]=\"isDisabled() || null\"\r\n\t\t\t\t\t#editorInput\r\n\t\t\t\t\tmatTextareaAutosize\r\n\t\t\t\t\tmatAutosizeMinRows=\"3\"\r\n\t\t\t\t\tmatAutosizeMaxRows=\"5\"\r\n\t\t\t\t\t[(ngModel)]=\"editedValue\"\r\n\t\t\t\t\t(input)=\"onTextAreaInputChange()\"\r\n\t\t\t\t\t(keyup)=\"update($event)\"\r\n\t\t\t\t\t[attr.data-automation-id]=\"'card-textitem-edittextarea-'\"\r\n\t\t\t\t></textarea>\r\n\t\t\t\t<mat-error\r\n\t\t\t\t\t[attr.data-automation-id]=\"'card-textitem-error-'\"\r\n\t\t\t\t\tclass=\"app-textitem-editable-error\"\r\n\t\t\t\t\t*ngIf=\"hasErrors()\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li *ngIf=\"control.errors.required\">\r\n\t\t\t\t\t\t\t{{ label | translate }} {{ 'VALIDATORS.REQUIRED' | translate }}\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t</ul>\r\n\t\t\t\t</mat-error>\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-template #readOnly>\r\n\t\t\t\t{{ editedValue }}\r\n\t\t\t</ng-template>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".app-textitem-editable-error{margin-top:-15px;padding-top:0}textarea::placeholder{font-size:12px}\n"], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.MatTextareaAutosize, selector: "textarea[mat-autosize], textarea[matTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "matAutosizeMinRows", "matAutosizeMaxRows", "mat-autosize", "matTextareaAutosize"], exportAs: ["matTextareaAutosize"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$7.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicFormTextareaComponent, decorators: [{
             type: Component,
             args: [{
@@ -12943,6 +13218,9 @@ class ComponentRegisterService {
     hasComponentById(id) {
         return !!this.getComponentById(id);
     }
+    getComponents() {
+        return this.components;
+    }
 }
 ComponentRegisterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentRegisterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 ComponentRegisterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentRegisterService, providedIn: 'root' });
@@ -13679,7 +13957,7 @@ class ModeTogglerComponent {
     }
 }
 ModeTogglerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModeTogglerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModeTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ModeTogglerComponent, selector: "mode-toggler", inputs: { modesList: "modesList", mode: "mode" }, outputs: { modeChanged: "modeChanged" }, host: { classAttribute: "mode-toggle" }, ngImport: i0, template: "<mat-button-toggle-group [value]=\"mode\" (change)=\"changeMode($event)\" class=\"mode-toggle__group\">\r\n\t<mat-button-toggle\r\n\t\t*ngFor=\"let item of modesList\"\r\n\t\t[value]=\"item.value\"\r\n\t\t[title]=\"item?.key ? (item.key | translate) : ''\"\r\n\t>\r\n\t\t<mat-icon>{{ item.icon }}</mat-icon>\r\n\t</mat-button-toggle>\r\n</mat-button-toggle-group>\r\n", styles: ["::ng-deep .mode-toggle__group .mat-button-toggle-label-content{line-height:var(--toggle-line-height, 36px)}\n"], components: [{ type: i1$a.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$a.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ModeTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ModeTogglerComponent, selector: "mode-toggler", inputs: { modesList: "modesList", mode: "mode" }, outputs: { modeChanged: "modeChanged" }, host: { classAttribute: "mode-toggle" }, ngImport: i0, template: "<mat-button-toggle-group [value]=\"mode\" (change)=\"changeMode($event)\" class=\"mode-toggle__group\">\r\n\t<mat-button-toggle\r\n\t\t*ngFor=\"let item of modesList\"\r\n\t\t[value]=\"item.value\"\r\n\t\t[title]=\"item?.key ? (item.key | translate) : ''\"\r\n\t>\r\n\t\t<mat-icon>{{ item.icon }}</mat-icon>\r\n\t</mat-button-toggle>\r\n</mat-button-toggle-group>\r\n", styles: ["::ng-deep .mode-toggle__group .mat-button-toggle-label-content{line-height:var(--toggle-line-height, 36px)}\n"], components: [{ type: i1$b.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$b.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModeTogglerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13714,7 +13992,7 @@ class SortingListComponent extends BaseComponent {
     }
 }
 SortingListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortingListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SortingListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SortingListComponent, selector: "table-sorting-list", inputs: { sortList: "sortList" }, outputs: { sortChanged: "sortChanged" }, host: { classAttribute: "sort-list" }, usesInheritance: true, ngImport: i0, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"sort-list__button\">\r\n\t<mat-icon inline> sort </mat-icon>\r\n\t{{ 'TABLE.sortBy' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<span [dir]=\"direction\" class=\"sort-list__menu\">\r\n\t\t<button mat-menu-item *ngFor=\"let item of sortList\" (click)=\"changeSort(item)\" [class.selected]=\"item.selected\">\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".sort-list__menu{max-height:var(--sort-max-height, 250px);overflow-y:auto}.sort-list__menu .mat-menu-item{line-height:var(--sort-item-height, 36px);height:var(--sort-item-height, 36px)}\n"], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SortingListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SortingListComponent, selector: "table-sorting-list", inputs: { sortList: "sortList" }, outputs: { sortChanged: "sortChanged" }, host: { classAttribute: "sort-list" }, usesInheritance: true, ngImport: i0, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"sort-list__button\">\r\n\t<mat-icon inline> sort </mat-icon>\r\n\t{{ 'TABLE.sortBy' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<span [dir]=\"direction\" class=\"sort-list__menu\">\r\n\t\t<button mat-menu-item *ngFor=\"let item of sortList\" (click)=\"changeSort(item)\" [class.selected]=\"item.selected\">\r\n\t\t\t{{ item.key | translate }}\r\n\t\t</button>\r\n\t</span>\r\n</mat-menu>\r\n", styles: [".sort-list__menu{max-height:var(--sort-max-height, 250px);overflow-y:auto}.sort-list__menu .mat-menu-item{line-height:var(--sort-item-height, 36px);height:var(--sort-item-height, 36px)}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SortingListComponent, decorators: [{
             type: Component,
             args: [{
@@ -13816,7 +14094,7 @@ class TableColumnsTogglerComponent extends BaseComponent {
     }
 }
 TableColumnsTogglerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableColumnsTogglerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TableColumnsTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: { prefix: "prefix", sortable: "sortable", columns: "columns" }, outputs: { columnsChanged: "columnsChanged" }, host: { classAttribute: "columns-toggler" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"columns-toggler__button\">\r\n\t<mat-icon inline> tune </mat-icon>\r\n\t{{ 'TABLE.toggleColumns' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<div\r\n\t\tclass=\"flex justify-between mb-2 border-bottom border-primary-100 top-0 pb-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t>\r\n\t\t<mat-checkbox\r\n\t\t\t*ngIf=\"!!columns?.length && !enableSorting\"\r\n\t\t\t(change)=\"onCheckAllChange($event)\"\r\n\t\t\t[checked]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length === columns?.length\"\r\n\t\t\t[indeterminate]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length < columns?.length\"\r\n\t\t>\r\n\t\t\t{{ 'FILTERS.all' | translate }}\r\n\t\t</mat-checkbox>\r\n\r\n\t\t<button class=\"action-btn apply-sorting-btn\" *ngIf=\"enableSorting\" (click)=\"applySort()\">\r\n\t\t\t{{ 'TABLE.applySorting' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<mat-icon\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleSorting()\"\r\n\t\t\t*ngIf=\"sortEnabled\"\r\n\t\t\t[title]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\t[matTooltip]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\tclass=\"columns-toggler__sort-icon\"\r\n\t\t>\r\n\t\t\t{{ enableSorting ? 'playlist_remove' : 'format_line_spacing' }}\r\n\t\t</mat-icon>\r\n\t</div>\r\n\r\n\t<ul\r\n\t\tclass=\"columns-toggler__columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t[dir]=\"direction\"\r\n\t\tcdkDropList\r\n\t\t[cdkDropListDisabled]=\"!enableSorting && !sortEnabled\"\r\n\t\t(cdkDropListDropped)=\"drop($event)\"\r\n\t>\r\n\t\t<li\r\n\t\t\t*ngFor=\"let col of columns\"\r\n\t\t\tclass=\"mb-2 column-control\"\r\n\t\t\tcdkDrag\r\n\t\t\t[cdkDragDisabled]=\"!enableSorting\"\r\n\t\t\t[class.sorting-enabled]=\"enableSorting\"\r\n\t\t\t[class.column-control__hidden]=\"!columnsSelection.isSelected(col)\"\r\n\t\t>\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n\t<ul\r\n\t\tclass=\"columns-toggler__frozen-columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t*ngIf=\"sortEnabled && frozenColumns?.length\"\r\n\t>\r\n\t\t<li *ngFor=\"let col of frozenColumns\" class=\"column-control\">\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n</mat-menu>\r\n", styles: [".columns-toggler__sort-icon{color:var(--sort-icon-color, #000)}.columns-toggler__columns{max-height:var(--cols-max-height, 275px);overflow-y:auto}.columns-toggler__columns .check-all-box{background:var(--check-background-color, #fff)}.columns-toggler__columns .column-control.sorting-enabled ::ng-deep,.columns-toggler__columns .column-control.sorting-enabled ::ng-deep .mat-checkbox-label{cursor:move}.columns-toggler__columns .column-control.sorting-enabled.cdk-drag-disabled{cursor:not-allowed;background:var(--drag-disabled-background, transparent);box-shadow:0 0 0 3px var(--drag-disabled-background, transparent)}.columns-toggler__columns .column-control__hidden{opacity:.7}.columns-toggler__columns .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}.columns-toggler__columns .cdk-drag-placeholder{opacity:0}.columns-toggler__frozen-columns{border-top:var(--frozen-cols-border-top, 2px solid #ccc);max-height:var(--frozen-cols--max-height, 150px);overflow-y:auto}::ng-deep .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columns-toggler__sort-icon{color:var(--icon-color)!important}.apply-sorting-btn{background-color:var(--logo-button-bg);color:var(--main-text)}\n"], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i7$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableColumnsTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: { prefix: "prefix", sortable: "sortable", columns: "columns" }, outputs: { columnsChanged: "columnsChanged" }, host: { classAttribute: "columns-toggler" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"columns-toggler__button\">\r\n\t<mat-icon inline> tune </mat-icon>\r\n\t{{ 'TABLE.toggleColumns' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<div\r\n\t\tclass=\"flex justify-between mb-2 border-bottom border-primary-100 top-0 pb-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t>\r\n\t\t<mat-checkbox\r\n\t\t\t*ngIf=\"!!columns?.length && !enableSorting\"\r\n\t\t\t(change)=\"onCheckAllChange($event)\"\r\n\t\t\t[checked]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length === columns?.length\"\r\n\t\t\t[indeterminate]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length < columns?.length\"\r\n\t\t>\r\n\t\t\t{{ 'FILTERS.all' | translate }}\r\n\t\t</mat-checkbox>\r\n\r\n\t\t<button class=\"action-btn apply-sorting-btn\" *ngIf=\"enableSorting\" (click)=\"applySort()\">\r\n\t\t\t{{ 'TABLE.applySorting' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<mat-icon\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleSorting()\"\r\n\t\t\t*ngIf=\"sortEnabled\"\r\n\t\t\t[title]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\t[matTooltip]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\tclass=\"columns-toggler__sort-icon\"\r\n\t\t>\r\n\t\t\t{{ enableSorting ? 'playlist_remove' : 'format_line_spacing' }}\r\n\t\t</mat-icon>\r\n\t</div>\r\n\r\n\t<ul\r\n\t\tclass=\"columns-toggler__columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t[dir]=\"direction\"\r\n\t\tcdkDropList\r\n\t\t[cdkDropListDisabled]=\"!enableSorting && !sortEnabled\"\r\n\t\t(cdkDropListDropped)=\"drop($event)\"\r\n\t>\r\n\t\t<li\r\n\t\t\t*ngFor=\"let col of columns\"\r\n\t\t\tclass=\"mb-2 column-control\"\r\n\t\t\tcdkDrag\r\n\t\t\t[cdkDragDisabled]=\"!enableSorting\"\r\n\t\t\t[class.sorting-enabled]=\"enableSorting\"\r\n\t\t\t[class.column-control__hidden]=\"!columnsSelection.isSelected(col)\"\r\n\t\t>\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n\t<ul\r\n\t\tclass=\"columns-toggler__frozen-columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t*ngIf=\"sortEnabled && frozenColumns?.length\"\r\n\t>\r\n\t\t<li *ngFor=\"let col of frozenColumns\" class=\"column-control\">\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n</mat-menu>\r\n", styles: [".columns-toggler__sort-icon{color:var(--sort-icon-color, #000)}.columns-toggler__columns{max-height:var(--cols-max-height, 275px);overflow-y:auto}.columns-toggler__columns .check-all-box{background:var(--check-background-color, #fff)}.columns-toggler__columns .column-control.sorting-enabled ::ng-deep,.columns-toggler__columns .column-control.sorting-enabled ::ng-deep .mat-checkbox-label{cursor:move}.columns-toggler__columns .column-control.sorting-enabled.cdk-drag-disabled{cursor:not-allowed;background:var(--drag-disabled-background, transparent);box-shadow:0 0 0 3px var(--drag-disabled-background, transparent)}.columns-toggler__columns .column-control__hidden{opacity:.7}.columns-toggler__columns .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}.columns-toggler__columns .cdk-drag-placeholder{opacity:0}.columns-toggler__frozen-columns{border-top:var(--frozen-cols-border-top, 2px solid #ccc);max-height:var(--frozen-cols--max-height, 150px);overflow-y:auto}::ng-deep .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columns-toggler__sort-icon{color:var(--icon-color)!important}.apply-sorting-btn{background-color:var(--logo-button-bg);color:var(--main-text)}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i7$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableColumnsTogglerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13857,7 +14135,7 @@ class TableExportComponent {
     }
 }
 TableExportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableExportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableExportComponent, selector: "ndf-table-export", inputs: { config: "config" }, outputs: { onExport: "onExport" }, ngImport: i0, template: "<button\r\n\tmat-stroked-button\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t(click)=\"export()\"\r\n\t*ngIf=\"!config?.allowedTypes\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n\r\n<button\r\n\tmat-stroked-button\r\n\t*ngIf=\"config?.allowedTypes\"\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\t[attr.aria-label]=\"'TABLE.EXPORT.export' | translate\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let type of config?.allowedTypes\" (click)=\"export(type.value)\">\r\n\t\t<span>{{ type.label | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: [""], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe } });
+TableExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableExportComponent, selector: "ndf-table-export", inputs: { config: "config" }, outputs: { onExport: "onExport" }, ngImport: i0, template: "<button\r\n\tmat-stroked-button\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t(click)=\"export()\"\r\n\t*ngIf=\"!config?.allowedTypes\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n\r\n<button\r\n\tmat-stroked-button\r\n\t*ngIf=\"config?.allowedTypes\"\r\n\t[matTooltip]=\"'TABLE.EXPORT.export' | translate\"\r\n\t[matMenuTriggerFor]=\"menu\"\r\n\t[attr.aria-label]=\"'TABLE.EXPORT.export' | translate\"\r\n>\r\n\t<mat-icon>file_download</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n\t<button mat-menu-item *ngFor=\"let type of config?.allowedTypes\" (click)=\"export(type.value)\">\r\n\t\t<span>{{ type.label | translate }}</span>\r\n\t</button>\r\n</mat-menu>\r\n", styles: [""], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TableExportComponent, decorators: [{
             type: Component,
             args: [{
@@ -15242,7 +15520,7 @@ InputDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => InputDateComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"localState.appearance\" class=\"input-date-field\" (click)=\"openPicker(picker)\">\r\n\t<input\r\n\t\tmatInput\r\n\t\t[matDatepicker]=\"picker\"\r\n\t\t[formControl]=\"dateControl\"\r\n\t\t[placeholder]=\"localState.placeholder\"\r\n\t\t[readonly]=\"true\"\r\n\t\t[min]=\"localState.min\"\r\n\t\t[max]=\"localState.max\"\r\n\t\t[matDatepickerFilter]=\"localState.dateFilter\"\r\n\t/>\r\n\r\n\t<div matSuffix class=\"suffix-input\">\r\n\t\t<mat-icon class=\"search-box__icon\" *ngIf=\"dateControl?.value && !disabled\" (click)=\"clearInput($event)\"\r\n\t\t\t>close\r\n\t\t</mat-icon>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<mat-datepicker\r\n\t\t#picker\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[startView]=\"localState.startView\"\r\n\t\t[startAt]=\"localState.startAt\"\r\n\t\t[panelClass]=\"localState.panelClass\"\r\n\t\t(yearSelected)=\"yearSelected($event)\"\r\n\t\t(monthSelected)=\"monthSelected($event)\"\r\n\t>\r\n\t\t<mat-datepicker-actions *ngIf=\"localState.showActions\">\r\n\t\t\t<button mat-button matDatepickerCancel>\r\n\t\t\t\t{{ 'DATE_PICKER.cancel' | translate }}\r\n\t\t\t</button>\r\n\t\t\t<button mat-button color=\"primary\" class=\"action-btn action-btn_1\" matDatepickerApply>\r\n\t\t\t\t{{ 'DATE_PICKER.apply' | translate }}\r\n\t\t\t</button>\r\n\t\t</mat-datepicker-actions>\r\n\t</mat-datepicker>\r\n</mat-form-field>\r\n", styles: [".input-date-field{width:var(--idf-width, 100%);max-width:var(--idf-max-width, 400px)}.suffix-input{display:flex;align-items:center;justify-content:end;grid-gap:var(--suffix-gap, .2rem);gap:var(--suffix-gap, .2rem);min-width:var(--suffix-width, 62px);cursor:pointer}\n"], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i2$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { type: i2$6.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"localState.appearance\" class=\"input-date-field\" (click)=\"openPicker(picker)\">\r\n\t<input\r\n\t\tmatInput\r\n\t\t[matDatepicker]=\"picker\"\r\n\t\t[formControl]=\"dateControl\"\r\n\t\t[placeholder]=\"localState.placeholder\"\r\n\t\t[readonly]=\"true\"\r\n\t\t[min]=\"localState.min\"\r\n\t\t[max]=\"localState.max\"\r\n\t\t[matDatepickerFilter]=\"localState.dateFilter\"\r\n\t/>\r\n\r\n\t<div matSuffix class=\"suffix-input\">\r\n\t\t<mat-icon class=\"search-box__icon\" *ngIf=\"dateControl?.value && !disabled\" (click)=\"clearInput($event)\"\r\n\t\t\t>close\r\n\t\t</mat-icon>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<mat-datepicker\r\n\t\t#picker\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[startView]=\"localState.startView\"\r\n\t\t[startAt]=\"localState.startAt\"\r\n\t\t[panelClass]=\"localState.panelClass\"\r\n\t\t(yearSelected)=\"yearSelected($event)\"\r\n\t\t(monthSelected)=\"monthSelected($event)\"\r\n\t>\r\n\t\t<mat-datepicker-actions *ngIf=\"localState.showActions\">\r\n\t\t\t<button mat-button matDatepickerCancel>\r\n\t\t\t\t{{ 'DATE_PICKER.cancel' | translate }}\r\n\t\t\t</button>\r\n\t\t\t<button mat-button color=\"primary\" class=\"action-btn action-btn_1\" matDatepickerApply>\r\n\t\t\t\t{{ 'DATE_PICKER.apply' | translate }}\r\n\t\t\t</button>\r\n\t\t</mat-datepicker-actions>\r\n\t</mat-datepicker>\r\n</mat-form-field>\r\n", styles: [".input-date-field{width:var(--idf-width, 100%);max-width:var(--idf-max-width, 400px)}.suffix-input{display:flex;align-items:center;justify-content:end;grid-gap:var(--suffix-gap, .2rem);gap:var(--suffix-gap, .2rem);min-width:var(--suffix-width, 62px);cursor:pointer}\n"], components: [{ type: i1$7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i2$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$7.MatSuffix, selector: "[matSuffix]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { type: i2$6.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputDateComponent, decorators: [{
             type: Component,
             args: [{
@@ -15353,7 +15631,7 @@ InputRangeDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: forwardRef(() => InputRangeDateComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"localState.appearance\" (click)=\"openPicker(picker)\" class=\"input-date-field\">\r\n\t<mat-date-range-input\r\n\t\t[formGroup]=\"rangeControl\"\r\n\t\t[rangePicker]=\"picker\"\r\n\t\t[min]=\"localState.min\"\r\n\t\t[max]=\"localState.max\"\r\n\t\t[dateFilter]=\"localState.dateFilter\"\r\n\t\t[disabled]=\"localState.disabled\"\r\n\t>\r\n\t\t<input\r\n\t\t\tmatStartDate\r\n\t\t\tformControlName=\"from\"\r\n\t\t\t[placeholder]=\"localState.startDatePlaceholder || localState.placeholder || 'Start date'\"\r\n\t\t\treadonly\r\n\t\t/>\r\n\t\t<input\r\n\t\t\tmatEndDate\r\n\t\t\tformControlName=\"to\"\r\n\t\t\t[placeholder]=\"localState.endDatePlaceholder || localState.placeholder || 'End date'\"\r\n\t\t\treadonly\r\n\t\t/>\r\n\t</mat-date-range-input>\r\n\t<div matSuffix class=\"suffix-input\">\r\n\t\t<mat-icon\r\n\t\t\tclass=\"search-box__icon\"\r\n\t\t\t*ngIf=\"(rangeControl.value?.from || rangeControl.value?.to) && !disabled\"\r\n\t\t\t(click)=\"clearInput($event)\"\r\n\t\t\t>close\r\n\t\t</mat-icon>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<mat-date-range-picker\r\n\t\t#picker\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[startView]=\"localState.startView\"\r\n\t\t[startAt]=\"localState.startAt\"\r\n\t\t[panelClass]=\"localState.panelClass\"\r\n\t\t(yearSelected)=\"yearSelected($event)\"\r\n\t\t(monthSelected)=\"monthSelected($event)\"\r\n\t>\r\n\t\t<mat-date-range-picker-actions *ngIf=\"localState.showActions\">\r\n\t\t\t<button mat-button matDatepickerCancel>\r\n\t\t\t\t{{ 'DATE_PICKER.cancel' | translate }}\r\n\t\t\t</button>\r\n\t\t\t<button mat-button color=\"primary\" class=\"action-btn action-btn_1\" matDatepickerApply>\r\n\t\t\t\t{{ 'DATE_PICKER.apply' | translate }}\r\n\t\t\t</button>\r\n\t\t</mat-date-range-picker-actions>\r\n\t</mat-date-range-picker>\r\n</mat-form-field>\r\n", styles: [".input-date-field{width:var(--idf-width, 100%);max-width:var(--idf-max-width, 400px)}.suffix-input{display:flex;align-items:center;justify-content:end;grid-gap:var(--suffix-gap, .2rem);gap:var(--suffix-gap, .2rem);min-width:var(--suffix-width, 62px);cursor:pointer}\n"], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["separator", "comparisonStart", "comparisonEnd", "rangePicker", "required", "dateFilter", "min", "max", "disabled"], exportAs: ["matDateRangeInput"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i2$6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { type: i2$6.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"localState.appearance\" (click)=\"openPicker(picker)\" class=\"input-date-field\">\r\n\t<mat-date-range-input\r\n\t\t[formGroup]=\"rangeControl\"\r\n\t\t[rangePicker]=\"picker\"\r\n\t\t[min]=\"localState.min\"\r\n\t\t[max]=\"localState.max\"\r\n\t\t[dateFilter]=\"localState.dateFilter\"\r\n\t\t[disabled]=\"localState.disabled\"\r\n\t>\r\n\t\t<input\r\n\t\t\tmatStartDate\r\n\t\t\tformControlName=\"from\"\r\n\t\t\t[placeholder]=\"localState.startDatePlaceholder || localState.placeholder || 'Start date'\"\r\n\t\t\treadonly\r\n\t\t/>\r\n\t\t<input\r\n\t\t\tmatEndDate\r\n\t\t\tformControlName=\"to\"\r\n\t\t\t[placeholder]=\"localState.endDatePlaceholder || localState.placeholder || 'End date'\"\r\n\t\t\treadonly\r\n\t\t/>\r\n\t</mat-date-range-input>\r\n\t<div matSuffix class=\"suffix-input\">\r\n\t\t<mat-icon\r\n\t\t\tclass=\"search-box__icon\"\r\n\t\t\t*ngIf=\"(rangeControl.value?.from || rangeControl.value?.to) && !disabled\"\r\n\t\t\t(click)=\"clearInput($event)\"\r\n\t\t\t>close\r\n\t\t</mat-icon>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<mat-date-range-picker\r\n\t\t#picker\r\n\t\t[disabled]=\"disabled\"\r\n\t\t[startView]=\"localState.startView\"\r\n\t\t[startAt]=\"localState.startAt\"\r\n\t\t[panelClass]=\"localState.panelClass\"\r\n\t\t(yearSelected)=\"yearSelected($event)\"\r\n\t\t(monthSelected)=\"monthSelected($event)\"\r\n\t>\r\n\t\t<mat-date-range-picker-actions *ngIf=\"localState.showActions\">\r\n\t\t\t<button mat-button matDatepickerCancel>\r\n\t\t\t\t{{ 'DATE_PICKER.cancel' | translate }}\r\n\t\t\t</button>\r\n\t\t\t<button mat-button color=\"primary\" class=\"action-btn action-btn_1\" matDatepickerApply>\r\n\t\t\t\t{{ 'DATE_PICKER.apply' | translate }}\r\n\t\t\t</button>\r\n\t\t</mat-date-range-picker-actions>\r\n\t</mat-date-range-picker>\r\n</mat-form-field>\r\n", styles: [".input-date-field{width:var(--idf-width, 100%);max-width:var(--idf-max-width, 400px)}.suffix-input{display:flex;align-items:center;justify-content:end;grid-gap:var(--suffix-gap, .2rem);gap:var(--suffix-gap, .2rem);min-width:var(--suffix-width, 62px);cursor:pointer}\n"], components: [{ type: i1$7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["separator", "comparisonStart", "comparisonEnd", "rangePicker", "required", "dateFilter", "min", "max", "disabled"], exportAs: ["matDateRangeInput"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i2$6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$7.MatSuffix, selector: "[matSuffix]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$6.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { type: i2$6.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputRangeDateComponent, decorators: [{
             type: Component,
             args: [{
@@ -16251,7 +16529,7 @@ class ActiveUserSwitchComponent extends BaseCustomField {
     }
 }
 ActiveUserSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActiveUserSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActiveUserSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActiveUserSwitchComponent, selector: "active-user-switch", usesInheritance: true, ngImport: i0, template: "<mat-slide-toggle\r\n\tclass=\"filter-switch__item\"\r\n\t[checked]=\"isUserSelected\"\r\n\t(change)=\"toggle($event)\"\r\n\t[class.checkedBox]=\"isUserSelected\"\r\n\t[class.unCheckedBox]=\"!isUserSelected\"\r\n>\r\n\t{{ renderOptions?.text || field?.label | translate }}\r\n</mat-slide-toggle>\r\n", styles: [""], components: [{ type: i1$8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], pipes: { "translate": i1.TranslatePipe } });
+ActiveUserSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActiveUserSwitchComponent, selector: "active-user-switch", usesInheritance: true, ngImport: i0, template: "<mat-slide-toggle\r\n\tclass=\"filter-switch__item\"\r\n\t[checked]=\"isUserSelected\"\r\n\t(change)=\"toggle($event)\"\r\n\t[class.checkedBox]=\"isUserSelected\"\r\n\t[class.unCheckedBox]=\"!isUserSelected\"\r\n>\r\n\t{{ renderOptions?.text || field?.label | translate }}\r\n</mat-slide-toggle>\r\n", styles: [""], components: [{ type: i1$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActiveUserSwitchComponent, decorators: [{
             type: Component,
             args: [{
@@ -17295,7 +17573,7 @@ AggregationDateListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             useExisting: forwardRef(() => AggregationDateListComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"options$ | async as options\">\r\n\t<field-header *ngIf=\"fieldConfig.label && !renderOptions?.hideLabel\" class=\"filter-date-list__label\">{{\r\n\t\tfieldConfig.label | translate\r\n\t}}</field-header>\r\n\r\n\t<div class=\"filter-date-list__wrapper\">\r\n\t\t<ng-container *ngIf=\"!renderOptions?.view || renderOptions.view === viewLayout.list\">\r\n\t\t\t<mat-radio-button\r\n\t\t\t\tclass=\"filter-date-list__item\"\r\n\t\t\t\t*ngFor=\"let option of options; index as index\"\r\n\t\t\t\t[checked]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t(change)=\"selectionModel.toggle(option.value)\"\r\n\t\t\t\t[class.checkedBox]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.unCheckedBox]=\"!selectionModel.isSelected(option.value)\"\r\n\t\t\t>\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"contentTemplate || defaultTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, fieldConfig, aggregation }\"\r\n\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t<ng-template #defaultTemplate>\r\n\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t[option]=\"option\"\r\n\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</mat-radio-button>\r\n\r\n\t\t\t<button *ngIf=\"selectionModel.hasValue()\" mat-flat-button class=\"mb-2\" (click)=\"clearSelected()\">\r\n\t\t\t\t{{ 'FILTERS.clear' | translate }}\r\n\t\t\t</button>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container *ngIf=\"renderOptions.view === viewLayout.dropdown\">\r\n\t\t\t<ng-select\r\n\t\t\t\tclass=\"filter-date-list__select\"\r\n\t\t\t\t[items]=\"options\"\r\n\t\t\t\tbindValue=\"value\"\r\n\t\t\t\t[multiple]=\"false\"\r\n\t\t\t\t[ngModel]=\"internalValue\"\r\n\t\t\t\t(ngModelChange)=\"updateSelectValue($event)\"\r\n\t\t\t\t[notFoundText]=\"emptyPlaceholder || 'SELECT.notFoundText' | translate\"\r\n\t\t\t\t[placeholder]=\"'SELECT.placeholder' | translate\"\r\n\t\t\t\t[clearAllText]=\"'SELECT.clearAllText' | translate\"\r\n\t\t\t\t[typeToSearchText]=\"'SELECT.typeToSearchText' | translate\"\r\n\t\t\t\t[searchable]=\"false\"\r\n\t\t\t>\r\n\t\t\t\t<ng-template ng-option-tmp let-item=\"item\">\r\n\t\t\t\t\t<ng-container\r\n\t\t\t\t\t\t[ngTemplateOutlet]=\"contentTemplate || defaultTemplate\"\r\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, fieldConfig, aggregation }\"\r\n\t\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t\t<ng-template #defaultTemplate>\r\n\t\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t\t[option]=\"item\"\r\n\t\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n\t\t\t\t\t<div *ngFor=\"let item of items\" class=\"ng-value\">\r\n\t\t\t\t\t\t<span class=\"ng-value-label\">{{ item | localizedLabel : language }}</span>\r\n\t\t\t\t\t\t<button class=\"ng-value-icon left\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t<ng-template ng-label-tmp let-item=\"item\">\r\n\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t[option]=\"item\"\r\n\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</ng-select>\r\n\t\t</ng-container>\r\n\r\n\t\t<filter-date-range\r\n\t\t\tclass=\"filter-date-list__range\"\r\n\t\t\t*ngIf=\"renderOptions?.minMax\"\r\n\t\t\t[formControl]=\"minMaxDateCtrl\"\r\n\t\t></filter-date-range>\r\n\t</div>\r\n</div>\r\n", styles: [".filter-date-list{display:var(--fdl-display, block)}.filter-date-list__label{display:var(--fdl-label-display, block);margin-block:var(--fdl-label-margin-block, 0 .5rem);margin-inline:var(--fdl-label-margin-inline, 0 .2rem);padding:var(--fdl-padding, .2rem);font-weight:var(--fdl-weight, 600)}.filter-date-list__wrapper{display:var(--fdl-wrapper-display, flex);flex-direction:var(--fdl-wrapper-direction, column)}.filter-date-list__item{padding-inline-start:.5rem;margin-bottom:var(--fdl-row-margin-bottom, .3rem)}.filter-date-list__item .mat-radio-label{display:flex}.filter-date-list__item .mat-radio-label .mat-radio-label-content{flex-grow:1}.filter-date-list__select{margin-bottom:var(--fdl-row-margin-bottom, .3rem)}.filter-date-list__range{margin-top:var(--fdl-range-margin-top, .5rem);display:var(--fdl-range-display, flex);flex-direction:var(--fdl-range-direction, column)}\n"], components: [{ type: FieldHeaderComponent, selector: "field-header" }, { type: i2$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: FilterOptionTextComponent, selector: "filter-option-text", inputs: ["option", "showCount", "language"] }, { type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: FilterDateRangeComponent, selector: "filter-date-range" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i5.ɵi, selector: "[ng-multi-label-tmp]" }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "localizedLabel": LocalizedLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"options$ | async as options\">\r\n\t<field-header *ngIf=\"fieldConfig.label && !renderOptions?.hideLabel\" class=\"filter-date-list__label\">{{\r\n\t\tfieldConfig.label | translate\r\n\t}}</field-header>\r\n\r\n\t<div class=\"filter-date-list__wrapper\">\r\n\t\t<ng-container *ngIf=\"!renderOptions?.view || renderOptions.view === viewLayout.list\">\r\n\t\t\t<mat-radio-button\r\n\t\t\t\tclass=\"filter-date-list__item\"\r\n\t\t\t\t*ngFor=\"let option of options; index as index\"\r\n\t\t\t\t[checked]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t(change)=\"selectionModel.toggle(option.value)\"\r\n\t\t\t\t[class.checkedBox]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.unCheckedBox]=\"!selectionModel.isSelected(option.value)\"\r\n\t\t\t>\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"contentTemplate || defaultTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, fieldConfig, aggregation }\"\r\n\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t<ng-template #defaultTemplate>\r\n\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t[option]=\"option\"\r\n\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</mat-radio-button>\r\n\r\n\t\t\t<button *ngIf=\"selectionModel.hasValue()\" mat-flat-button class=\"mb-2\" (click)=\"clearSelected()\">\r\n\t\t\t\t{{ 'FILTERS.clear' | translate }}\r\n\t\t\t</button>\r\n\t\t</ng-container>\r\n\r\n\t\t<ng-container *ngIf=\"renderOptions.view === viewLayout.dropdown\">\r\n\t\t\t<ng-select\r\n\t\t\t\tclass=\"filter-date-list__select\"\r\n\t\t\t\t[items]=\"options\"\r\n\t\t\t\tbindValue=\"value\"\r\n\t\t\t\t[multiple]=\"false\"\r\n\t\t\t\t[ngModel]=\"internalValue\"\r\n\t\t\t\t(ngModelChange)=\"updateSelectValue($event)\"\r\n\t\t\t\t[notFoundText]=\"emptyPlaceholder || 'SELECT.notFoundText' | translate\"\r\n\t\t\t\t[placeholder]=\"'SELECT.placeholder' | translate\"\r\n\t\t\t\t[clearAllText]=\"'SELECT.clearAllText' | translate\"\r\n\t\t\t\t[typeToSearchText]=\"'SELECT.typeToSearchText' | translate\"\r\n\t\t\t\t[searchable]=\"false\"\r\n\t\t\t>\r\n\t\t\t\t<ng-template ng-option-tmp let-item=\"item\">\r\n\t\t\t\t\t<ng-container\r\n\t\t\t\t\t\t[ngTemplateOutlet]=\"contentTemplate || defaultTemplate\"\r\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item, fieldConfig, aggregation }\"\r\n\t\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t\t<ng-template #defaultTemplate>\r\n\t\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t\t[option]=\"item\"\r\n\t\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n\t\t\t\t\t<div *ngFor=\"let item of items\" class=\"ng-value\">\r\n\t\t\t\t\t\t<span class=\"ng-value-label\">{{ item | localizedLabel : language }}</span>\r\n\t\t\t\t\t\t<button class=\"ng-value-icon left\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t<ng-template ng-label-tmp let-item=\"item\">\r\n\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t[option]=\"item\"\r\n\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</ng-select>\r\n\t\t</ng-container>\r\n\r\n\t\t<filter-date-range\r\n\t\t\tclass=\"filter-date-list__range\"\r\n\t\t\t*ngIf=\"renderOptions?.minMax\"\r\n\t\t\t[formControl]=\"minMaxDateCtrl\"\r\n\t\t></filter-date-range>\r\n\t</div>\r\n</div>\r\n", styles: [".filter-date-list{display:var(--fdl-display, block)}.filter-date-list__label{display:var(--fdl-label-display, block);margin-block:var(--fdl-label-margin-block, 0 .5rem);margin-inline:var(--fdl-label-margin-inline, 0 .2rem);padding:var(--fdl-padding, .2rem);font-weight:var(--fdl-weight, 600)}.filter-date-list__wrapper{display:var(--fdl-wrapper-display, flex);flex-direction:var(--fdl-wrapper-direction, column)}.filter-date-list__item{padding-inline-start:.5rem;margin-bottom:var(--fdl-row-margin-bottom, .3rem)}.filter-date-list__item .mat-radio-label{display:flex}.filter-date-list__item .mat-radio-label .mat-radio-label-content{flex-grow:1}.filter-date-list__select{margin-bottom:var(--fdl-row-margin-bottom, .3rem)}.filter-date-list__range{margin-top:var(--fdl-range-margin-top, .5rem);display:var(--fdl-range-display, flex);flex-direction:var(--fdl-range-direction, column)}\n"], components: [{ type: FieldHeaderComponent, selector: "field-header" }, { type: i2$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: FilterOptionTextComponent, selector: "filter-option-text", inputs: ["option", "showCount", "language"] }, { type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: FilterDateRangeComponent, selector: "filter-date-range" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.ɵf, selector: "[ng-option-tmp]" }, { type: i5.ɵi, selector: "[ng-multi-label-tmp]" }, { type: i5.ɵh, selector: "[ng-label-tmp]" }, { type: i2$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "localizedLabel": LocalizedLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AggregationDateListComponent, decorators: [{
             type: Component,
             args: [{
@@ -17475,7 +17753,7 @@ AggregationSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             useExisting: forwardRef(() => AggregationSwitchComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "switchTemplate", first: true, predicate: SWITCH_TEMPLATE, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"options$ | async as options\">\r\n\t<field-header *ngIf=\"fieldConfig.label && !renderOptions?.hideLabel\" class=\"filter-switch__label\">\r\n\t\t<span>\r\n\t\t\t{{ fieldConfig.label | translate }}\r\n\t\t</span>\r\n\t\t<filter-options-sort *ngIf=\"renderOptions?.sort\" (sortChange)=\"sortChange($event)\"></filter-options-sort>\r\n\t</field-header>\r\n\r\n\t<filter-search-input\r\n\t\tclass=\"filter-switch__filter\"\r\n\t\t*ngIf=\"renderOptions?.filter\"\r\n\t\t[(searchText)]=\"searchText\"\r\n\t></filter-search-input>\r\n\r\n\t<filter-autocomplete-input\r\n\t\t*ngIf=\"renderOptions?.search\"\r\n\t\t[fieldConfig]=\"fieldConfig\"\r\n\t\t[language]=\"language\"\r\n\t\t[direction]=\"direction\"\r\n\t\t(searchChange)=\"emitValue($event)\"\r\n\t></filter-autocomplete-input>\r\n\r\n\t<ng-container *ngIf=\"options | filter: searchText as filteredOptions\">\r\n\t\t<div class=\"filter-switch__wrapper\">\r\n\t\t\t<mat-slide-toggle\r\n\t\t\t\t*ngFor=\"let option of filteredOptions; index as index\"\r\n\t\t\t\tclass=\"filter-switch__item\"\r\n\t\t\t\t[checked]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t(change)=\"selectionModel.toggle(option.value)\"\r\n\t\t\t\t[class.checkedBox]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.unCheckedBox]=\"!selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.hidden]=\"renderOptions?.collapse && index + 1 > visibleItemsCount\"\r\n\t\t\t>\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"contentTemplate || defaultTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, config, aggregation }\"\r\n\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t<ng-template #defaultTemplate>\r\n\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t[option]=\"option\"\r\n\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</mat-slide-toggle>\r\n\t\t</div>\r\n\r\n\t\t<filter-empty-message *ngIf=\"!filteredOptions.length\" class=\"filter-switch__empty\"></filter-empty-message>\r\n\r\n\t\t<filter-collapse-control\r\n\t\t\tclass=\"filter-switch__collapse\"\r\n\t\t\t*ngIf=\"renderOptions?.collapse\"\r\n\t\t\t[minCount]=\"expandedCount\"\r\n\t\t\t[(visibleCount)]=\"visibleItemsCount\"\r\n\t\t\t[totalItems]=\"filteredOptions.length\"\r\n\t\t></filter-collapse-control>\r\n\t</ng-container>\r\n</ng-container>\r\n", styles: [".filter-switch{display:var(--fSwitch-display, block)}.filter-switch__wrapper{display:var(--fSwitch-wrapper-display, flex);flex-direction:var(--fSwitch-wrapper-direction, column)}.filter-switch__item{padding-inline-start:.5rem;margin-bottom:var(--filter-row-margin-bottom, .5rem)}.filter-switch__item.hidden{display:none}.filter-switch__item .mat-slide-toggle-content{flex-grow:1}\n"], components: [{ type: FieldHeaderComponent, selector: "field-header" }, { type: FilterOptionsSortComponent, selector: "filter-options-sort", inputs: ["options", "sort"], outputs: ["sortChange"] }, { type: FilterSearchInputComponent, selector: "filter-search-input", inputs: ["searchText"], outputs: ["searchTextChange"] }, { type: FilterAutocompleteInputComponent, selector: "filter-autocomplete-input", inputs: ["direction", "language", "fieldConfig"], outputs: ["searchChange"] }, { type: i1$8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: FilterOptionTextComponent, selector: "filter-option-text", inputs: ["option", "showCount", "language"] }, { type: FilterEmptyMessageComponent, selector: "filter-empty-message", inputs: ["message"] }, { type: FilterCollapseControlComponent, selector: "filter-collapse-control", inputs: ["minCount", "totalItems", "visibleCount"], outputs: ["visibleCountChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "filter": FilterPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "switchTemplate", first: true, predicate: SWITCH_TEMPLATE, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"options$ | async as options\">\r\n\t<field-header *ngIf=\"fieldConfig.label && !renderOptions?.hideLabel\" class=\"filter-switch__label\">\r\n\t\t<span>\r\n\t\t\t{{ fieldConfig.label | translate }}\r\n\t\t</span>\r\n\t\t<filter-options-sort *ngIf=\"renderOptions?.sort\" (sortChange)=\"sortChange($event)\"></filter-options-sort>\r\n\t</field-header>\r\n\r\n\t<filter-search-input\r\n\t\tclass=\"filter-switch__filter\"\r\n\t\t*ngIf=\"renderOptions?.filter\"\r\n\t\t[(searchText)]=\"searchText\"\r\n\t></filter-search-input>\r\n\r\n\t<filter-autocomplete-input\r\n\t\t*ngIf=\"renderOptions?.search\"\r\n\t\t[fieldConfig]=\"fieldConfig\"\r\n\t\t[language]=\"language\"\r\n\t\t[direction]=\"direction\"\r\n\t\t(searchChange)=\"emitValue($event)\"\r\n\t></filter-autocomplete-input>\r\n\r\n\t<ng-container *ngIf=\"options | filter: searchText as filteredOptions\">\r\n\t\t<div class=\"filter-switch__wrapper\">\r\n\t\t\t<mat-slide-toggle\r\n\t\t\t\t*ngFor=\"let option of filteredOptions; index as index\"\r\n\t\t\t\tclass=\"filter-switch__item\"\r\n\t\t\t\t[checked]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t(change)=\"selectionModel.toggle(option.value)\"\r\n\t\t\t\t[class.checkedBox]=\"selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.unCheckedBox]=\"!selectionModel.isSelected(option.value)\"\r\n\t\t\t\t[class.hidden]=\"renderOptions?.collapse && index + 1 > visibleItemsCount\"\r\n\t\t\t>\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"contentTemplate || defaultTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, config, aggregation }\"\r\n\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t<ng-template #defaultTemplate>\r\n\t\t\t\t\t<filter-option-text\r\n\t\t\t\t\t\t[option]=\"option\"\r\n\t\t\t\t\t\t[language]=\"language\"\r\n\t\t\t\t\t\t[showCount]=\"renderOptions?.showTotal\"\r\n\t\t\t\t\t></filter-option-text>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</mat-slide-toggle>\r\n\t\t</div>\r\n\r\n\t\t<filter-empty-message *ngIf=\"!filteredOptions.length\" class=\"filter-switch__empty\"></filter-empty-message>\r\n\r\n\t\t<filter-collapse-control\r\n\t\t\tclass=\"filter-switch__collapse\"\r\n\t\t\t*ngIf=\"renderOptions?.collapse\"\r\n\t\t\t[minCount]=\"expandedCount\"\r\n\t\t\t[(visibleCount)]=\"visibleItemsCount\"\r\n\t\t\t[totalItems]=\"filteredOptions.length\"\r\n\t\t></filter-collapse-control>\r\n\t</ng-container>\r\n</ng-container>\r\n", styles: [".filter-switch{display:var(--fSwitch-display, block)}.filter-switch__wrapper{display:var(--fSwitch-wrapper-display, flex);flex-direction:var(--fSwitch-wrapper-direction, column)}.filter-switch__item{padding-inline-start:.5rem;margin-bottom:var(--filter-row-margin-bottom, .5rem)}.filter-switch__item.hidden{display:none}.filter-switch__item .mat-slide-toggle-content{flex-grow:1}\n"], components: [{ type: FieldHeaderComponent, selector: "field-header" }, { type: FilterOptionsSortComponent, selector: "filter-options-sort", inputs: ["options", "sort"], outputs: ["sortChange"] }, { type: FilterSearchInputComponent, selector: "filter-search-input", inputs: ["searchText"], outputs: ["searchTextChange"] }, { type: FilterAutocompleteInputComponent, selector: "filter-autocomplete-input", inputs: ["direction", "language", "fieldConfig"], outputs: ["searchChange"] }, { type: i1$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: FilterOptionTextComponent, selector: "filter-option-text", inputs: ["option", "showCount", "language"] }, { type: FilterEmptyMessageComponent, selector: "filter-empty-message", inputs: ["message"] }, { type: FilterCollapseControlComponent, selector: "filter-collapse-control", inputs: ["minCount", "totalItems", "visibleCount"], outputs: ["visibleCountChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "filter": FilterPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AggregationSwitchComponent, decorators: [{
             type: Component,
             args: [{
@@ -18188,7 +18466,7 @@ class FiltersPanelComponent extends BaseFiltersPanel {
     }
 }
 FiltersPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersPanelComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-FiltersPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FiltersPanelComponent, selector: "app-filters-panel", inputs: { aggregations: "aggregations", fields: "fields", activeQuery: "activeQuery" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"filters-panel\" [dir]=\"direction$ | async\">\r\n\t<div class=\"reset-filter flex reset-container\">\r\n\t\t<button mat-stroked-button class=\"w-full\" (click)=\"resetFilters()\" [disabled]=\"!hasValues\">\r\n\t\t\t{{ 'BUTTONS.clearFilter' | translate }}\r\n\t\t</button>\r\n\t</div>\r\n\t<ng-container *ngFor=\"let field of fields | filterByRoles; trackBy: trackByFieldKey\">\r\n\t\t<ng-container *permission=\"{ name: field.config?.permission }\">\r\n\t\t\t<app-predicate-field\r\n\t\t\t\t*ngIf=\"field.type == fieldTypes.predicate\"\r\n\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t></app-predicate-field>\r\n\t\t\t<app-aggregation-field\r\n\t\t\t\t*ngIf=\"field.type == fieldTypes.aggregation && !!aggregations\"\r\n\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t[aggregation]=\"aggregations[field.config.aggregation]\"\r\n\t\t\t\t[contentTemplate]=\"getContentTemplate(field.config.render.type)\"\r\n\t\t\t></app-aggregation-field>\r\n\t\t\t<app-custom-field\r\n\t\t\t\t*ngIf=\"field.type == fieldTypes.custom\"\r\n\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t></app-custom-field>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>\r\n", styles: [".filters-panel{display:var(--filters-panel-display, flex);flex-direction:var(--filters-panel-direction, column);grid-gap:var(--filters-panel-gap, .5rem);gap:var(--filters-panel-gap, .5rem);flex-wrap:var(--filters-panel-wrap, wrap);max-width:100%;box-sizing:border-box}.aggregation-field{padding-inline:var(--af-padding-inline, var(--ff-padding-inline, .5rem));padding-block:var(--af-padding-block, var(--ff-padding-block, 0));max-width:100%}.reset-container{padding:.5rem;position:sticky;top:-8px;z-index:4;background:var(--reset-filter-panel-bg, #fff)}.reset-container button.mat-button-base{background-color:var(--reset-filter-panel-btn-bg, transparent);border-color:var(--reset-filter-panel-btn-bg, #e2e8f0);color:var(--reset-filter-panel-btn-color, currentColor)}\n"], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: PredicateFieldComponent, selector: "app-predicate-field" }, { type: AggregationFieldComponent, selector: "app-aggregation-field", inputs: ["aggregation", "contentTemplate"] }, { type: CustomFieldComponent, selector: "app-custom-field", inputs: ["aggregations"] }], directives: [{ type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "filterByRoles": FiltersByRolesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FiltersPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FiltersPanelComponent, selector: "app-filters-panel", inputs: { aggregations: "aggregations", fields: "fields", activeQuery: "activeQuery" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"formGroup\" class=\"filters-panel\" [dir]=\"direction$ | async\">\r\n\t<div class=\"reset-filter flex reset-container\">\r\n\t\t<button mat-stroked-button class=\"w-full\" (click)=\"resetFilters()\" [disabled]=\"!hasValues\">\r\n\t\t\t{{ 'BUTTONS.clearFilter' | translate }}\r\n\t\t</button>\r\n\t</div>\r\n\t<ng-container *ngFor=\"let field of fields | filterByRoles; trackBy: trackByFieldKey\">\r\n\t\t<ng-container *permission=\"{ name: field.config?.permission }\">\r\n\t\t\t<app-predicate-field\r\n\t\t\t\t*ngIf=\"field.type == fieldTypes.predicate\"\r\n\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t></app-predicate-field>\r\n\t\t\t<app-aggregation-field\r\n\t\t\t\t*ngIf=\"field.type == fieldTypes.aggregation && !!aggregations\"\r\n\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t[aggregation]=\"aggregations[field.config.aggregation]\"\r\n\t\t\t\t[contentTemplate]=\"getContentTemplate(field.config.render.type)\"\r\n\t\t\t></app-aggregation-field>\r\n\t\t\t<app-custom-field\r\n\t\t\t\t*ngIf=\"field.type == fieldTypes.custom\"\r\n\t\t\t\t[fieldConfig]=\"field.config\"\r\n\t\t\t\t[formControlName]=\"field.config.fieldKey\"\r\n\t\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t></app-custom-field>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>\r\n", styles: [".filters-panel{display:var(--filters-panel-display, flex);flex-direction:var(--filters-panel-direction, column);grid-gap:var(--filters-panel-gap, .5rem);gap:var(--filters-panel-gap, .5rem);flex-wrap:var(--filters-panel-wrap, wrap);max-width:100%;box-sizing:border-box}.aggregation-field{padding-inline:var(--af-padding-inline, var(--ff-padding-inline, .5rem));padding-block:var(--af-padding-block, var(--ff-padding-block, 0));max-width:100%}.reset-container{padding:.5rem;position:sticky;top:-8px;z-index:4;background:var(--reset-filter-panel-bg, #fff)}.reset-container button.mat-button-base{background-color:var(--reset-filter-panel-btn-bg, transparent);border-color:var(--reset-filter-panel-btn-bg, #e2e8f0);color:var(--reset-filter-panel-btn-color, currentColor)}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: PredicateFieldComponent, selector: "app-predicate-field" }, { type: AggregationFieldComponent, selector: "app-aggregation-field", inputs: ["aggregation", "contentTemplate"] }, { type: CustomFieldComponent, selector: "app-custom-field", inputs: ["aggregations"] }], directives: [{ type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe, "filterByRoles": FiltersByRolesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FiltersPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -18550,115 +18828,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class FluidHeightDirective {
-    constructor(renderer, elementRef, ngZone) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this.minHeight = 0;
-        this.topOffset = 0;
-        this.subtractItems = [];
-        this.decrease = 0;
-        this.delay = 200;
-        this.calculate = true;
-        this._inlineStyle = false;
-        this._domElement = this.elementRef.nativeElement;
-        this._resizeListener = () => this.onResize();
-        this.ngZone.runOutsideAngular(() => {
-            window.addEventListener('resize', this._resizeListener);
-        });
-    }
-    get inlineStyle() {
-        return this._inlineStyle;
-    }
-    set inlineStyle(value) {
-        this._inlineStyle = coerceBooleanProperty(value);
-    }
-    ngAfterViewInit() {
-        this.scheduleSetHeight();
-    }
-    scheduleSetHeight(delay = this.delay) {
-        setTimeout(() => this.setHeight(), delay);
-    }
-    onResize() {
-        if (this._animationId) {
-            cancelAnimationFrame(this._animationId);
-        }
-        this._animationId = requestAnimationFrame(() => this.setHeight());
-    }
-    setHeight() {
-        if (!this.calculate) {
-            return;
-        }
-        const windowHeight = window.innerHeight;
-        const topOffset = this.topOffset || this._calcTopOffset();
-        let height = windowHeight - topOffset;
-        this.subtractItems.forEach((selector) => {
-            height -= this._getSelectorHeight(selector);
-        });
-        height = Math.max(height - this.decrease, this.minHeight);
-        if (this.inlineStyle) {
-            this.renderer.setStyle(this._domElement, 'height', `${height}px`);
-        }
-        else {
-            this.renderer.setAttribute(this._domElement, 'style', `--ndf-table-height : ${height}px`);
-        }
-    }
-    _getSelectorHeight(selector) {
-        const element = document.querySelector(selector);
-        return element ? element.clientHeight : 0;
-    }
-    _calcTopOffset() {
-        try {
-            const rect = this._domElement.getBoundingClientRect();
-            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-            return rect.top + scrollTop;
-        }
-        catch (_a) {
-            return 0;
-        }
-    }
-    ngOnDestroy() {
-        window.removeEventListener('resize', this._resizeListener);
-    }
-}
-FluidHeightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-FluidHeightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: { minHeight: "minHeight", topOffset: ["ndfFluidHeight", "topOffset"], subtractItems: "subtractItems", decrease: "decrease", delay: "delay", calculate: "calculate", inlineStyle: "inlineStyle" }, exportAs: ["ndfFluidHeight"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ndfFluidHeight]',
-                    exportAs: 'ndfFluidHeight'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { minHeight: [{
-                type: Input
-            }], topOffset: [{
-                type: Input,
-                args: ['ndfFluidHeight']
-            }], subtractItems: [{
-                type: Input
-            }], decrease: [{
-                type: Input
-            }], delay: [{
-                type: Input
-            }], calculate: [{
-                type: Input
-            }], inlineStyle: [{
-                type: Input
-            }] } });
-class FluidHeightModule {
-}
-FluidHeightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FluidHeightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightModule, declarations: [FluidHeightDirective], exports: [FluidHeightDirective] });
-FluidHeightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FluidHeightModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FluidHeightDirective],
-                    exports: [FluidHeightDirective]
-                }]
-        }] });
-
 const FILTER_CUSTOM_TEMPLATE = new InjectionToken('FilterCustomTemplateDirective');
 class FilterCustomTemplateDirective {
     constructor(template) {
@@ -18704,6 +18873,21 @@ const PAGE_SIZE = [
     }
 ];
 
+const CONFIG_EDITOR_MODE = {
+    EDIT: 'edit',
+    PREVIEW: 'preview'
+};
+
+const NDF_EDITOR_TYPE = {
+    REPORTS: 'reports',
+    TABLES: 'tables'
+};
+
+const PARAMS_KEYS = {
+    TYPE: 'type',
+    KEY: 'key'
+};
+
 class NxQlQuery extends NxQL {
     static preparePayloadItem(value, field) {
         var _a;
@@ -19496,6 +19680,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+const PROJECT_BASE_HREF = new InjectionToken('PROJECT_BASE_HREF');
+
+class EditorButtonComponent {
+    constructor(environment, router, baseAppUrl, configService) {
+        var _a;
+        this.environment = environment;
+        this.router = router;
+        this.baseAppUrl = baseAppUrl;
+        this.configService = configService;
+        this.isFeatureEnabled = false;
+        this.editorConfig = (_a = this.configService.myConfiguration) === null || _a === void 0 ? void 0 : _a.configEditor;
+        this.isFeatureEnabled = environment.configEditor === 'YES';
+    }
+    ngOnInit() { }
+    navigate() {
+        var _a;
+        const config = (_a = this.editorConfig) === null || _a === void 0 ? void 0 : _a.types[this.type];
+        if (!config || !this.key || !this.type) {
+            return;
+        }
+        const navigateUrl = config.navigateUrl;
+        if (!navigateUrl) {
+            return;
+        }
+        const url = `${this.baseAppUrl || ''}${navigateUrl}`;
+        this.router.navigate([url], {
+            queryParams: {
+                [PARAMS_KEYS.TYPE]: this.type,
+                [PARAMS_KEYS.KEY]: this.key
+            }
+        });
+    }
+}
+EditorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorButtonComponent, deps: [{ token: 'environment' }, { token: i1$5.Router }, { token: PROJECT_BASE_HREF }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Component });
+EditorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorButtonComponent, selector: "app-editor-button", inputs: { type: "type", key: "key" }, ngImport: i0, template: `
+		<ng-container *ngIf="isFeatureEnabled && editorConfig?.enabled && editorConfig?.types?.tables?.enabled">
+			<button
+				mat-stroked-button
+				[matTooltip]="'JSON_EDITOR.navigateToEditor' | translate"
+				(click)="navigate()"
+				*permission="{ name: item?.permission }"
+			>
+				<mat-icon>edit</mat-icon>
+			</button>
+		</ng-container>
+	`, isInline: true, components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-editor-button',
+                    template: `
+		<ng-container *ngIf="isFeatureEnabled && editorConfig?.enabled && editorConfig?.types?.tables?.enabled">
+			<button
+				mat-stroked-button
+				[matTooltip]="'JSON_EDITOR.navigateToEditor' | translate"
+				(click)="navigate()"
+				*permission="{ name: item?.permission }"
+			>
+				<mat-icon>edit</mat-icon>
+			</button>
+		</ng-container>
+	`
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['environment']
+                }] }, { type: i1$5.Router }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PROJECT_BASE_HREF]
+                }] }, { type: AppConfigService }]; }, propDecorators: { type: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }] } });
+class EditorNavigateButton {
+}
+EditorNavigateButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorNavigateButton, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EditorNavigateButton.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorNavigateButton, declarations: [EditorButtonComponent], imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, MatTooltipModule, DirectiveModule], exports: [EditorButtonComponent] });
+EditorNavigateButton.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorNavigateButton, imports: [[CommonModule, TranslateModule, MatButtonModule, MatIconModule, MatTooltipModule, DirectiveModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorNavigateButton, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EditorButtonComponent],
+                    exports: [EditorButtonComponent],
+                    imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, MatTooltipModule, DirectiveModule]
+                }]
+        }] });
+
 class NoDataFoundComponent {
     constructor() {
         this.message = 'table_noData';
@@ -19560,6 +19832,7 @@ class NdfTableComponent extends DestroySubject {
         this.autoCalculateHeight = true;
         this.emptyMessage = 'table_noData';
         this.configPath = 'tables';
+        this.jsonEditorEnabled = false;
         this.onRowSelected = new EventEmitter();
         this.onRowIndexSelected = new EventEmitter();
         this.actionOnRow = new EventEmitter();
@@ -19584,6 +19857,7 @@ class NdfTableComponent extends DestroySubject {
             pageSize: 10,
             length: 0
         };
+        this.editorType = NDF_EDITOR_TYPE.TABLES;
         this._translateService.onLangChange
             .pipe(startWith({ lang: this._translateService.currentLang }), takeUntil(this.destroy$))
             .subscribe((res) => {
@@ -19879,7 +20153,7 @@ class NdfTableComponent extends DestroySubject {
     }
 }
 NdfTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableComponent, deps: [{ token: FiltersMapperService }, { token: DynamicTableService }, { token: i1.TranslateService }, { token: NdfTableService }, { token: CustomToastrService }, { token: NdfTableConfigurationService }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NdfTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfTableComponent, selector: "app-ndf-table", inputs: { rows: "rows", totalRecords: "totalRecords", autoCalculateHeight: "autoCalculateHeight", emptyMessage: "emptyMessage", activeQuery: "activeQuery", configPath: "configPath", configTransformer: "configTransformer", tableKey: "tableKey", config: "config", customCriteria: "customCriteria", searchTerm: "searchTerm" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", onPage: "onPage", onInitialized: "onInitialized", onLoaded: "onLoaded", onQueryChange: "onQueryChange", onSort: "onSort" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-table" }, queries: [{ propertyName: "actionsTableTemplate", first: true, predicate: ACTIONS_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "searchTableTemplate", first: true, predicate: SEARCH_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "filterCustomTemplate", first: true, predicate: FILTER_CUSTOM_TEMPLATE, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<div\r\n\t*ngIf=\"tableConfig\"\r\n\tclass=\"ndf-table__container\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tndfFluidHeight\r\n\t[calculate]=\"autoCalculateHeight\"\r\n>\r\n\t<div class=\"ndf-table__panel\" *ngIf=\"filtersConfig?.fields\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig.fields\"\r\n\t\t\t[aggregations]=\"aggregations$ | async\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeQuery\"\r\n\t\t\tclass=\"ndf-table__filters\"\r\n\t\t\t[customTemplateRef]=\"filterCustomTemplate\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\t<div class=\"ndf-table__content\">\r\n\t\t<div class=\"ndf-table__header flex\">\r\n\t\t\t<div class=\"ndf-table__header__custom-actions flex gap-x-4 items-center\">\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"searchTableTemplate || defaultActionTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t\t\t$implicit: tableConfig,\r\n\t\t\t\t\t\tpanelOpened: isPanelOpened,\r\n\t\t\t\t\t\ttogglePanel: togglePanel,\r\n\t\t\t\t\t\topenModal: openSearchModal,\r\n\t\t\t\t\t\tsearch: onTextSearch,\r\n\t\t\t\t\t\tclear: onClearSearch\r\n\t\t\t\t\t}\"\r\n\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t<ng-template #defaultActionTemplate>\r\n\t\t\t\t\t<button mat-stroked-button *ngIf=\"isPanelToggleAvailable\" class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<app-text-search\r\n\t\t\t\t\t\t*ngIf=\"textSearchConfig\"\r\n\t\t\t\t\t\t[searchConfig]=\"textSearchConfig\"\r\n\t\t\t\t\t\t(openModal)=\"openSearchModal()\"\r\n\t\t\t\t\t\t[search]=\"textSearch$ | async\"\r\n\t\t\t\t\t\t(searchChange)=\"onTextSearch($event)\"\r\n\t\t\t\t\t\t(clear)=\"onClearSearch()\"\r\n\t\t\t\t\t></app-text-search>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"ndf-table__header__actions flex gap-x-4 items-center\">\r\n\t\t\t\t<ndf-table-export\r\n\t\t\t\t\t*ngIf=\"exportTableConfig?.enabled\"\r\n\t\t\t\t\t[config]=\"exportTableConfig\"\r\n\t\t\t\t\t(onExport)=\"exportTable($event)\"\r\n\t\t\t\t></ndf-table-export>\r\n\r\n\t\t\t\t<table-sorting-list\r\n\t\t\t\t\t*ngIf=\"!!sortList?.length\"\r\n\t\t\t\t\t[sortList]=\"sortList\"\r\n\t\t\t\t\t(sortChanged)=\"sortChanged($event)\"\r\n\t\t\t\t></table-sorting-list>\r\n\t\t\t\t<table-columns-toggler\r\n\t\t\t\t\t*ngIf=\"columnToggle\"\r\n\t\t\t\t\t[columns]=\"tableConfig.columns\"\r\n\t\t\t\t\t[prefix]=\"tableConfig.prefix\"\r\n\t\t\t\t\t[sortable]=\"columnsOptions?.sortable\"\r\n\t\t\t\t\t(columnsChanged)=\"columnsChanged($event)\"\r\n\t\t\t\t></table-columns-toggler>\r\n\t\t\t\t<mode-toggler\r\n\t\t\t\t\t*ngIf=\"tableMode?.toggleMode\"\r\n\t\t\t\t\t[mode]=\"tableMode.mode || 'list'\"\r\n\t\t\t\t\t[modesList]=\"tableMode?.availableMode\"\r\n\t\t\t\t\t(modeChanged)=\"modeChanged($event)\"\r\n\t\t\t\t></mode-toggler>\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"actionsTableTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t\t\t$implicit: tableConfig,\r\n\t\t\t\t\t\tpanelOpened: isPanelOpened,\r\n\t\t\t\t\t\ttogglePanel: togglePanel,\r\n\t\t\t\t\t\topenModal: openSearchModal,\r\n\t\t\t\t\t\tsearch: onTextSearch,\r\n\t\t\t\t\t\tclear: onClearSearch\r\n\t\t\t\t\t}\"\r\n\t\t\t\t></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<cts-dynamic-table\r\n\t\t\t*ngIf=\"!tableConfig.isDataProvided\"\r\n\t\t\tclass=\"ndf-table__table table-style\"\r\n\t\t\t[columns]=\"displayedColumns$ | async\"\r\n\t\t\t[responsiveColumns]=\"displayedColumns$ | async\"\r\n\t\t\t[fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n\t\t\t[pageSize]=\"tableConfig.pageSize || 10\"\r\n\t\t\t[pageNumber]=\"tableConfig.pageNumber || 1\"\r\n\t\t\t[pageProvider]=\"tableConfig.pageProvider\"\r\n\t\t\t[customUrl]=\"tableConfig.customUrl\"\r\n\t\t\t[quickFilter]=\"tableConfig.quickFilters ? { quickFilters: tableConfig.quickFilters } : undefined\"\r\n\t\t\t[defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n\t\t\t[sortingBy]=\"sortOption$ | async\"\r\n\t\t\t[entityType]=\"'all'\"\r\n\t\t\t[fields]=\"tableConfig.fields\"\r\n\t\t\t[tableMode]=\"viewMode$ | async\"\r\n\t\t\t[componentName]=\"tableMode?.['componentName']\"\r\n\t\t\t[range]=\"tableConfig?.range\"\r\n\t\t\t[isSearchPage]=\"tableConfig?.isSearchPage\"\r\n\t\t\t[multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n\t\t\t[customFirstRow]=\"tableConfig?.customFirstRow\"\r\n\t\t\t[highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n\t\t\t[showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n\t\t\t[filterParams]=\"tableConfig?.filterParams\"\r\n\t\t\t[format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n\t\t\t[pageSizes]=\"tableConfig?.pageSizes || defaultPageSizes\"\r\n\t\t\t[prefix]=\"tableConfig.prefix || ''\"\r\n\t\t\t[rowCursor]=\"true\"\r\n\t\t\t[queryParam]=\"tableConfig.queryParam\"\r\n\t\t\t[customFilters]=\"searchAndFilters$ | async\"\r\n\t\t\t[tableActions]=\"tableConfig.tableActions\"\r\n\t\t\t[headers]=\"tableConfig.headers\"\r\n\t\t\t(onRowSelected)=\"onRowSelected.emit($event)\"\r\n\t\t\t(onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n\t\t\t(actionOnRow)=\"actionOnRow.emit($event)\"\r\n\t\t\t(onGettingData)=\"onGettingData.emit($event)\"\r\n\t\t\t(onLoad)=\"onLoad($event)\"\r\n\t\t\t(onInitialize)=\"onInitialize($event)\"\r\n\t\t\t(onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n\t\t\t(onLoading)=\"onLoading.emit($event)\"\r\n\t\t\t(onPage)=\"onPageChanged($event)\"\r\n\t\t\t[isLegacyMode]=\"false\"\r\n\t\t\t[showTotalRecord]=\"true\"\r\n\t\t\t(sortChanged)=\"onSortChanged($event)\"\r\n\t\t>\r\n\t\t\t<ng-template emptyTemplate let-isLoading let-rows=\"rows\" let-initialized=\"initialized\">\r\n\t\t\t\t<div class=\"loading-data\" *ngIf=\"isLoading && initialized\">\r\n\t\t\t\t\t<mat-spinner></mat-spinner>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"flex items-center justify-center h-5/6\" *ngIf=\"!isLoading && !rows.length\">\r\n\t\t\t\t\t<app-no-data-found class=\"mt-4\" [message]=\"emptyMessage\"></app-no-data-found>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-template>\r\n\t\t</cts-dynamic-table>\r\n\r\n\t\t<cts-table\r\n\t\t\t*ngIf=\"tableConfig.isDataProvided\"\r\n\t\t\t[rows]=\"rows\"\r\n\t\t\t[totalRecords]=\"totalRecords\"\r\n\t\t\t[columns]=\"displayedColumns$ | async\"\r\n\t\t\t[responsiveColumns]=\"displayedColumns$ | async\"\r\n\t\t\t[rowCursor]=\"true\"\r\n\t\t\t[fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n\t\t\t[entityType]=\"'all'\"\r\n\t\t\t[prefix]=\"tableConfig.prefix || ''\"\r\n\t\t\t[tableMode]=\"viewMode$ | async\"\r\n\t\t\t[componentName]=\"tableMode?.['componentName']\"\r\n\t\t\t[multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n\t\t\t[customFirstRow]=\"tableConfig?.customFirstRow\"\r\n\t\t\t[tableActions]=\"tableConfig.tableActions\"\r\n\t\t\t[showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n\t\t\t[defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n\t\t\t[format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n\t\t\t[highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n\t\t\t(onRowSelected)=\"onRowSelected.emit($event)\"\r\n\t\t\t(onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n\t\t\t(onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n\t\t\t(actionOnRow)=\"actionOnRow.emit($event)\"\r\n\t\t\t(onSorting)=\"onSortChanged($event)\"\r\n\t\t></cts-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-tbl-inline-padding, 1rem);padding-block:var(--ndf-tbl-block-padding, 1rem);border:var(--ndf-tbl-border, solid transparent);border-width:var(--ndf-table-border-width, 0);border-radius:var(--ndf-tbl-border-radius, 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-tbl-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host [dir=ltr]{--ndf-tbl-panel-translateX: -100%}:host:before,:host:after{box-sizing:border-box}::ng-deep .wrapping,::ng-deep .wrapping .table-reposition{overflow:visible}.ndf-table__container{--table-div-height: auto;--table-reposition-overflow-y: visible;--table-div-overflow: visible;--panel-width: var(--ndf-tbl-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-tbl-height, calc(var(--ndf-table-height, auto) - calc(var(--ndf-tbl-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-table__container.panel-opened{--ndf-tbl-panel-translateX: 0;--ndf-tbl-content-pis: var(--panel-width)}.ndf-table__panel,.ndf-table__content{overflow:auto;transition:all .2s}.ndf-table__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-tbl-panel-translateX, 100%));padding-inline:var(--ndf-tbl-panel-inline-padding, .5rem);padding-block:var(--ndf-tbl-panel-block-padding, .5rem);background:var(--ndf-tbl-panel-background, #fff);z-index:1}.ndf-table__content{flex-grow:1;padding-inline-start:var(--ndf-tbl-content-pis, 0);padding-block-end:var(--ndf-tbl-content-pbe, 1rem);overflow-y:var(--ndf-tbl-content-overflow-y, auto);max-height:var(--ndf-tbl-content-max-height, var(--ndf-table-height));display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content}.ndf-table__header{background-color:var(--ndf-tbl-background, #fff);flex-direction:var(--ndf-tbl-header-direction, row);justify-content:var(--ndf-tbl-header-justify, space-between);align-items:var(--ndf-tbl-header-items, center);padding-inline:var(--ndf-tbl-header-padding-inline, .5rem);padding-block:var(--ndf-tbl-header-padding-block, 0 .5rem);position:var(--ndf-tbl-header-position, sticky);top:0;z-index:1}.ndf-table__header__actions{justify-content:var(--ndf-tbl-actions-justify, flex-end)}.ndf-table__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-table__table{flex-grow:1;display:flex;flex-direction:column}.ndf-table__table.no-data{--table-div-height: auto}.loading-data{position:absolute;inset:0;display:grid;place-items:center;background:var(--loading-data-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-data-backdrop-filter, blur(3px));backdrop-filter:var(--loading-data-backdrop-filter, blur(3px))}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TextSearchComponent, selector: "app-text-search", inputs: ["searchConfig", "search"], outputs: ["searchChange", "openModal", "clear"] }, { type: TableExportComponent, selector: "ndf-table-export", inputs: ["config"], outputs: ["onExport"] }, { type: SortingListComponent, selector: "table-sorting-list", inputs: ["sortList"], outputs: ["sortChanged"] }, { type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: ["prefix", "sortable", "columns"], outputs: ["columnsChanged"] }, { type: ModeTogglerComponent, selector: "mode-toggler", inputs: ["modesList", "mode"], outputs: ["modeChanged"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "isLegacyMode", "showTotalRecord", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: EmptyTemplateDirective, selector: "[emptyTemplate]" }], pipes: { "async": i4$1.AsyncPipe } });
+NdfTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfTableComponent, selector: "app-ndf-table", inputs: { rows: "rows", totalRecords: "totalRecords", autoCalculateHeight: "autoCalculateHeight", emptyMessage: "emptyMessage", activeQuery: "activeQuery", configPath: "configPath", configTransformer: "configTransformer", tableKey: "tableKey", jsonEditorEnabled: "jsonEditorEnabled", config: "config", customCriteria: "customCriteria", searchTerm: "searchTerm" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", onPage: "onPage", onInitialized: "onInitialized", onLoaded: "onLoaded", onQueryChange: "onQueryChange", onSort: "onSort" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-table" }, queries: [{ propertyName: "actionsTableTemplate", first: true, predicate: ACTIONS_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "searchTableTemplate", first: true, predicate: SEARCH_TABLE_TEMPLATE, descendants: true, read: TemplateRef }, { propertyName: "filterCustomTemplate", first: true, predicate: FILTER_CUSTOM_TEMPLATE, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n\t*ngIf=\"tableConfig\"\r\n\tclass=\"ndf-table__container\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tndfFluidHeight\r\n\tcssVar=\"--ndf-table-height\"\r\n\t[calculate]=\"autoCalculateHeight\"\r\n>\r\n\t<div class=\"ndf-table__panel\" *ngIf=\"filtersConfig?.fields\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig.fields\"\r\n\t\t\t[aggregations]=\"aggregations$ | async\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeQuery\"\r\n\t\t\tclass=\"ndf-table__filters\"\r\n\t\t\t[customTemplateRef]=\"filterCustomTemplate\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\t<div class=\"ndf-table__content\">\r\n\t\t<div class=\"ndf-table__header flex\">\r\n\t\t\t<div class=\"ndf-table__header__custom-actions flex gap-x-4 items-center\">\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"searchTableTemplate || defaultActionTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t\t\t$implicit: tableConfig,\r\n\t\t\t\t\t\tpanelOpened: isPanelOpened,\r\n\t\t\t\t\t\ttogglePanel: togglePanel,\r\n\t\t\t\t\t\topenModal: openSearchModal,\r\n\t\t\t\t\t\tsearch: onTextSearch,\r\n\t\t\t\t\t\tclear: onClearSearch\r\n\t\t\t\t\t}\"\r\n\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t<ng-template #defaultActionTemplate>\r\n\t\t\t\t\t<button mat-stroked-button *ngIf=\"isPanelToggleAvailable\" class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<app-text-search\r\n\t\t\t\t\t\t*ngIf=\"textSearchConfig\"\r\n\t\t\t\t\t\t[searchConfig]=\"textSearchConfig\"\r\n\t\t\t\t\t\t(openModal)=\"openSearchModal()\"\r\n\t\t\t\t\t\t[search]=\"textSearch$ | async\"\r\n\t\t\t\t\t\t(searchChange)=\"onTextSearch($event)\"\r\n\t\t\t\t\t\t(clear)=\"onClearSearch()\"\r\n\t\t\t\t\t></app-text-search>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"ndf-table__header__actions flex gap-x-4 items-center\">\r\n\t\t\t\t<app-editor-button\r\n\t\t\t\t\t*ngIf=\"jsonEditorEnabled && (tableKey || tableConfig?.key)\"\r\n\t\t\t\t\t[key]=\"tableKey || tableConfig?.key\"\r\n          [type]=\"editorType\"\r\n\t\t\t\t></app-editor-button>\r\n\t\t\t\t<ndf-table-export\r\n\t\t\t\t\t*ngIf=\"exportTableConfig?.enabled\"\r\n\t\t\t\t\t[config]=\"exportTableConfig\"\r\n\t\t\t\t\t(onExport)=\"exportTable($event)\"\r\n\t\t\t\t></ndf-table-export>\r\n\r\n\t\t\t\t<table-sorting-list\r\n\t\t\t\t\t*ngIf=\"!!sortList?.length\"\r\n\t\t\t\t\t[sortList]=\"sortList\"\r\n\t\t\t\t\t(sortChanged)=\"sortChanged($event)\"\r\n\t\t\t\t></table-sorting-list>\r\n\t\t\t\t<table-columns-toggler\r\n\t\t\t\t\t*ngIf=\"columnToggle\"\r\n\t\t\t\t\t[columns]=\"tableConfig.columns\"\r\n\t\t\t\t\t[prefix]=\"tableConfig.prefix\"\r\n\t\t\t\t\t[sortable]=\"columnsOptions?.sortable\"\r\n\t\t\t\t\t(columnsChanged)=\"columnsChanged($event)\"\r\n\t\t\t\t></table-columns-toggler>\r\n\t\t\t\t<mode-toggler\r\n\t\t\t\t\t*ngIf=\"tableMode?.toggleMode\"\r\n\t\t\t\t\t[mode]=\"tableMode.mode || 'list'\"\r\n\t\t\t\t\t[modesList]=\"tableMode?.availableMode\"\r\n\t\t\t\t\t(modeChanged)=\"modeChanged($event)\"\r\n\t\t\t\t></mode-toggler>\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"actionsTableTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t\t\t$implicit: tableConfig,\r\n\t\t\t\t\t\tpanelOpened: isPanelOpened,\r\n\t\t\t\t\t\ttogglePanel: togglePanel,\r\n\t\t\t\t\t\topenModal: openSearchModal,\r\n\t\t\t\t\t\tsearch: onTextSearch,\r\n\t\t\t\t\t\tclear: onClearSearch\r\n\t\t\t\t\t}\"\r\n\t\t\t\t></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<cts-dynamic-table\r\n\t\t\t*ngIf=\"!tableConfig.isDataProvided\"\r\n\t\t\tclass=\"ndf-table__table table-style\"\r\n\t\t\t[columns]=\"displayedColumns$ | async\"\r\n\t\t\t[responsiveColumns]=\"displayedColumns$ | async\"\r\n\t\t\t[fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n\t\t\t[pageSize]=\"tableConfig.pageSize || 10\"\r\n\t\t\t[pageNumber]=\"tableConfig.pageNumber || 1\"\r\n\t\t\t[pageProvider]=\"tableConfig.pageProvider\"\r\n\t\t\t[customUrl]=\"tableConfig.customUrl\"\r\n\t\t\t[quickFilter]=\"tableConfig.quickFilters ? { quickFilters: tableConfig.quickFilters } : undefined\"\r\n\t\t\t[defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n\t\t\t[sortingBy]=\"sortOption$ | async\"\r\n\t\t\t[entityType]=\"'all'\"\r\n\t\t\t[fields]=\"tableConfig.fields\"\r\n\t\t\t[tableMode]=\"viewMode$ | async\"\r\n\t\t\t[componentName]=\"tableMode?.['componentName']\"\r\n\t\t\t[range]=\"tableConfig?.range\"\r\n\t\t\t[isSearchPage]=\"tableConfig?.isSearchPage\"\r\n\t\t\t[multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n\t\t\t[customFirstRow]=\"tableConfig?.customFirstRow\"\r\n\t\t\t[highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n\t\t\t[showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n\t\t\t[filterParams]=\"tableConfig?.filterParams\"\r\n\t\t\t[format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n\t\t\t[pageSizes]=\"tableConfig?.pageSizes || defaultPageSizes\"\r\n\t\t\t[prefix]=\"tableConfig.prefix || ''\"\r\n\t\t\t[rowCursor]=\"true\"\r\n\t\t\t[queryParam]=\"tableConfig.queryParam\"\r\n\t\t\t[customFilters]=\"searchAndFilters$ | async\"\r\n\t\t\t[tableActions]=\"tableConfig.tableActions\"\r\n\t\t\t[headers]=\"tableConfig.headers\"\r\n\t\t\t(onRowSelected)=\"onRowSelected.emit($event)\"\r\n\t\t\t(onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n\t\t\t(actionOnRow)=\"actionOnRow.emit($event)\"\r\n\t\t\t(onGettingData)=\"onGettingData.emit($event)\"\r\n\t\t\t(onLoad)=\"onLoad($event)\"\r\n\t\t\t(onInitialize)=\"onInitialize($event)\"\r\n\t\t\t(onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n\t\t\t(onLoading)=\"onLoading.emit($event)\"\r\n\t\t\t(onPage)=\"onPageChanged($event)\"\r\n\t\t\t[isLegacyMode]=\"false\"\r\n\t\t\t[showTotalRecord]=\"true\"\r\n\t\t\t(sortChanged)=\"onSortChanged($event)\"\r\n\t\t>\r\n\t\t\t<ng-template emptyTemplate let-isLoading let-rows=\"rows\" let-initialized=\"initialized\">\r\n\t\t\t\t<div class=\"loading-data\" *ngIf=\"isLoading && initialized\">\r\n\t\t\t\t\t<mat-spinner></mat-spinner>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"flex items-center justify-center h-5/6\" *ngIf=\"!isLoading && !rows.length\">\r\n\t\t\t\t\t<app-no-data-found class=\"mt-4\" [message]=\"emptyMessage\"></app-no-data-found>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-template>\r\n\t\t</cts-dynamic-table>\r\n\r\n\t\t<cts-table\r\n\t\t\t*ngIf=\"tableConfig.isDataProvided\"\r\n\t\t\t[rows]=\"rows\"\r\n\t\t\t[totalRecords]=\"totalRecords\"\r\n\t\t\t[columns]=\"displayedColumns$ | async\"\r\n\t\t\t[responsiveColumns]=\"displayedColumns$ | async\"\r\n\t\t\t[rowCursor]=\"true\"\r\n\t\t\t[fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n\t\t\t[entityType]=\"'all'\"\r\n\t\t\t[prefix]=\"tableConfig.prefix || ''\"\r\n\t\t\t[tableMode]=\"viewMode$ | async\"\r\n\t\t\t[componentName]=\"tableMode?.['componentName']\"\r\n\t\t\t[multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n\t\t\t[customFirstRow]=\"tableConfig?.customFirstRow\"\r\n\t\t\t[tableActions]=\"tableConfig.tableActions\"\r\n\t\t\t[showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n\t\t\t[defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n\t\t\t[format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n\t\t\t[highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n\t\t\t(onRowSelected)=\"onRowSelected.emit($event)\"\r\n\t\t\t(onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n\t\t\t(onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n\t\t\t(actionOnRow)=\"actionOnRow.emit($event)\"\r\n\t\t\t(onSorting)=\"onSortChanged($event)\"\r\n\t\t></cts-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-tbl-inline-padding, 1rem);padding-block:var(--ndf-tbl-block-padding, 1rem);border:var(--ndf-tbl-border, solid transparent);border-width:var(--ndf-table-border-width, 0);border-radius:var(--ndf-tbl-border-radius, 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-tbl-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host [dir=ltr]{--ndf-tbl-panel-translateX: -100%}:host:before,:host:after{box-sizing:border-box}::ng-deep .wrapping,::ng-deep .wrapping .table-reposition{overflow:visible}.ndf-table__container{--table-div-height: auto;--table-reposition-overflow-y: visible;--table-div-overflow: visible;--panel-width: var(--ndf-tbl-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-tbl-height, calc(var(--ndf-table-height, auto) - calc(var(--ndf-tbl-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-table__container.panel-opened{--ndf-tbl-panel-translateX: 0;--ndf-tbl-content-pis: var(--panel-width)}.ndf-table__panel,.ndf-table__content{overflow:auto;transition:all .2s}.ndf-table__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-tbl-panel-translateX, 100%));padding-inline:var(--ndf-tbl-panel-inline-padding, .5rem);padding-block:var(--ndf-tbl-panel-block-padding, .5rem);background:var(--ndf-tbl-panel-background, #fff);z-index:1}.ndf-table__content{flex-grow:1;padding-inline-start:var(--ndf-tbl-content-pis, 0);padding-block-end:var(--ndf-tbl-content-pbe, 1rem);overflow-y:var(--ndf-tbl-content-overflow-y, auto);max-height:var(--ndf-tbl-content-max-height, var(--ndf-table-height));display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content}.ndf-table__header{background-color:var(--ndf-tbl-background, #fff);flex-direction:var(--ndf-tbl-header-direction, row);justify-content:var(--ndf-tbl-header-justify, space-between);align-items:var(--ndf-tbl-header-items, center);padding-inline:var(--ndf-tbl-header-padding-inline, .5rem);padding-block:var(--ndf-tbl-header-padding-block, 0 .5rem);position:var(--ndf-tbl-header-position, sticky);top:0;z-index:1}.ndf-table__header__actions{justify-content:var(--ndf-tbl-actions-justify, flex-end)}.ndf-table__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-table__table{flex-grow:1;display:flex;flex-direction:column}.ndf-table__table.no-data{--table-div-height: auto}.loading-data{position:absolute;inset:0;display:grid;place-items:center;background:var(--loading-data-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-data-backdrop-filter, blur(3px));backdrop-filter:var(--loading-data-backdrop-filter, blur(3px))}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TextSearchComponent, selector: "app-text-search", inputs: ["searchConfig", "search"], outputs: ["searchChange", "openModal", "clear"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: TableExportComponent, selector: "ndf-table-export", inputs: ["config"], outputs: ["onExport"] }, { type: SortingListComponent, selector: "table-sorting-list", inputs: ["sortList"], outputs: ["sortChanged"] }, { type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: ["prefix", "sortable", "columns"], outputs: ["columnsChanged"] }, { type: ModeTogglerComponent, selector: "mode-toggler", inputs: ["modesList", "mode"], outputs: ["modeChanged"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "isLegacyMode", "showTotalRecord", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: EmptyTemplateDirective, selector: "[emptyTemplate]" }], pipes: { "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -19907,6 +20181,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], tableKey: [{
                 type: Input
+            }], jsonEditorEnabled: [{
+                type: Input
             }], config: [{
                 type: Input
             }], customCriteria: [{
@@ -19991,7 +20267,9 @@ NdfTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         MatTooltipModule,
         TableModule,
         DragDropModule,
-        NoDataModule], exports: [NdfTableComponent,
+        NoDataModule,
+        DirectiveModule,
+        EditorNavigateButton], exports: [NdfTableComponent,
         SortingListComponent,
         TableColumnsTogglerComponent,
         ModeTogglerComponent,
@@ -20013,7 +20291,9 @@ NdfTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             MatTooltipModule,
             TableModule,
             DragDropModule,
-            NoDataModule
+            NoDataModule,
+            DirectiveModule,
+            EditorNavigateButton
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfTableModule, decorators: [{
             type: NgModule,
@@ -20036,7 +20316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MatTooltipModule,
                         TableModule,
                         DragDropModule,
-                        NoDataModule
+                        NoDataModule,
+                        DirectiveModule,
+                        EditorNavigateButton
                     ],
                     exports: [COMPONENTS$3, DIRECTIVES$2]
                 }]
@@ -29265,7 +29547,7 @@ class SelectUsersByDepartmentsComponent extends BaseComponent {
     }
 }
 SelectUsersByDepartmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectUsersByDepartmentsComponent, deps: [{ token: DepartmentManagementService }, { token: i2$4.NgControl, optional: true, self: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SelectUsersByDepartmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectUsersByDepartmentsComponent, selector: "app-select-users-by-departments", inputs: { display: "display", depLabel: "depLabel", userLabel: "userLabel", allowMultipleUsers: "allowMultipleUsers", fetchDepUsersByCustomApi: "fetchDepUsersByCustomApi", fetchedUsers: "fetchedUsers" }, outputs: { formChanged: "formChanged", onDataLoad: "onDataLoad" }, host: { classAttribute: "userByDepSelectors" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"depAnditsUsers\">\r\n  <div\r\n    class=\"w-full flex justify-between\"\r\n    [ngClass]=\"{\r\n      'flex-row': display === 'row',\r\n      'flex-col': display === 'column'\r\n    }\"\r\n  >\r\n    <div class=\"flex flex-col w-full flex-1 depWrapper\">\r\n      <label class=\"dep-label\">\r\n        {{ depLabel }}\r\n        <span class=\"text-danger\" *ngIf=\"isRequired()\">*</span>\r\n      </label>\r\n      <ng-container *ngIf=\"!reseting\">\r\n        <app-dynamic-form-department\r\n          #depRef\r\n          formControlName=\"dep\"\r\n          placeholder=\"placeholder\"\r\n          [treeview]=\"false\"\r\n          [pp_departmentNestedTree]=\"'PP_OS_Departments'\"\r\n          [pp_departmentTree]=\"'PP_OS_Departments'\"\r\n          [customPrefix]=\"'osdept'\"\r\n          [customParentProperty]=\"'osdepartment_parentDepartmentCode'\"\r\n          [useCustomAddEditAction]=\"true\"\r\n          (onSelecting)=\"getDepMembers($event)\"\r\n          (onDataLoad)=\"onDataLoad.emit($event)\"\r\n        >\r\n        </app-dynamic-form-department>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"reseting\">\r\n        <app-dynamic-form-department\r\n          #depRef\r\n          formControlName=\"dep\"\r\n          placeholder=\"placeholder\"\r\n          [treeview]=\"false\"\r\n          [pp_departmentNestedTree]=\"'PP_OS_Departments'\"\r\n          [pp_departmentTree]=\"'PP_OS_Departments'\"\r\n          [customPrefix]=\"'osdept'\"\r\n          [customParentProperty]=\"'osdepartment_parentDepartmentCode'\"\r\n          [useCustomAddEditAction]=\"true\"\r\n          (onSelecting)=\"getDepMembers($event)\"\r\n          (onDataLoad)=\"onDataLoad.emit($event)\"\r\n        >\r\n        </app-dynamic-form-department>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      class=\"flex flex-col w-full flex-1 usersWrapper\"\r\n      [ngClass]=\"{ 'mt-4': display === 'column' }\"\r\n    >\r\n      <label class=\"users-label\">\r\n        {{ userLabel }}\r\n        <span class=\"text-danger\" *ngIf=\"isRequired()\">*</span>\r\n      </label>\r\n      <ng-select\r\n        formControlName=\"users\"\r\n        #ngSelectComponent\r\n        [items]=\"depUsers\"\r\n        bindLabel=\"properties.fullName\"\r\n        [multiple]=\"allowMultipleUsers\"\r\n        [placeholder]=\"'share.placeholder' | translate\"\r\n        [loading]=\"loading\"\r\n        (change)=\"onSetUser()\"\r\n      >\r\n        <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\r\n          <div\r\n            class=\"ng-option disabled\"\r\n            *ngIf=\"!depAnditsUsers?.get('dep').value; else notFound\"\r\n          >\r\n            {{ \"archiveSearch.select_dep\" | translate }}\r\n          </div>\r\n          <ng-template #notFound>\r\n            <div class=\"ng-option disabled\">\r\n              {{ \"archiveSearch.noUsers\" | translate }}\r\n            </div>\r\n          </ng-template>\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <div class=\"flex flex-col h-full\">\r\n            <div *ngIf=\"item\" class=\"flex flex-row items-center\">\r\n              <div class=\"flex-0 w-8 h-8 rounded-full overflow-hidden\">\r\n                <cts-avatar\r\n                  [user]=\"{\r\n                    properties: {\r\n                      firstName: item.properties?.firstName,\r\n                      lastName: item.properties?.lastName\r\n                    }\r\n                  }\"\r\n                >\r\n                </cts-avatar>\r\n              </div>\r\n              <div class=\"flex flex-col pt-0 px-2\">\r\n                <span>{{ item.properties?.fullName }}</span>\r\n                <span *ngIf=\"item.properties?.email\">{{\r\n                  item.properties?.email\r\n                }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [".userByDepSelectors ngx-dropdown-treeview>.dropdown{@apply bg-primary-50 border-primary-100 !important;}.userByDepSelectors .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:12px!important;margin-top:4px!important}\n"], components: [{ type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label", "defaultSelect", "displayDepTypee", "displayIsAllowRecExternal", "pp_departmentNestedTree", "pp_departmentTree", "customPrefix", "useCustomAddEditAction", "customParentProperty", "customParams", "disabled", "nodesExpandedByDefault", "fixedParentNode"], outputs: ["onSelecting", "actionClicked", "onDataLoad"] }, { type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.ɵl, selector: "[ng-notfound-tmp]" }, { type: i5.ɵf, selector: "[ng-option-tmp]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+SelectUsersByDepartmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectUsersByDepartmentsComponent, selector: "app-select-users-by-departments", inputs: { display: "display", depLabel: "depLabel", userLabel: "userLabel", allowMultipleUsers: "allowMultipleUsers", fetchDepUsersByCustomApi: "fetchDepUsersByCustomApi", fetchedUsers: "fetchedUsers" }, outputs: { formChanged: "formChanged", onDataLoad: "onDataLoad" }, host: { classAttribute: "userByDepSelectors" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"depAnditsUsers\">\r\n  <div\r\n    class=\"w-full flex justify-between\"\r\n    [ngClass]=\"{\r\n      'flex-row': display === 'row',\r\n      'flex-col': display === 'column'\r\n    }\"\r\n  >\r\n    <div class=\"flex flex-col w-full flex-1 depWrapper\">\r\n      <label class=\"dep-label\">\r\n        {{ depLabel }}\r\n        <span class=\"text-danger\" *ngIf=\"isRequired()\">*</span>\r\n      </label>\r\n      <ng-container *ngIf=\"!reseting\">\r\n        <app-dynamic-form-department\r\n          #depRef\r\n          formControlName=\"dep\"\r\n          placeholder=\"placeholder\"\r\n          [treeview]=\"false\"\r\n          [pp_departmentNestedTree]=\"'PP_OS_Departments'\"\r\n          [pp_departmentTree]=\"'PP_OS_Departments'\"\r\n          [customPrefix]=\"'osdept'\"\r\n          [customParentProperty]=\"'osdepartment_parentDepartmentCode'\"\r\n          [useCustomAddEditAction]=\"true\"\r\n          (onSelecting)=\"getDepMembers($event)\"\r\n          (onDataLoad)=\"onDataLoad.emit($event)\"\r\n        >\r\n        </app-dynamic-form-department>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"reseting\">\r\n        <app-dynamic-form-department\r\n          #depRef\r\n          formControlName=\"dep\"\r\n          placeholder=\"placeholder\"\r\n          [treeview]=\"false\"\r\n          [pp_departmentNestedTree]=\"'PP_OS_Departments'\"\r\n          [pp_departmentTree]=\"'PP_OS_Departments'\"\r\n          [customPrefix]=\"'osdept'\"\r\n          [customParentProperty]=\"'osdepartment_parentDepartmentCode'\"\r\n          [useCustomAddEditAction]=\"true\"\r\n          (onSelecting)=\"getDepMembers($event)\"\r\n          (onDataLoad)=\"onDataLoad.emit($event)\"\r\n        >\r\n        </app-dynamic-form-department>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      class=\"flex flex-col w-full flex-1 usersWrapper\"\r\n      [ngClass]=\"{ 'mt-4': display === 'column' }\"\r\n    >\r\n      <label class=\"users-label\">\r\n        {{ userLabel }}\r\n        <span class=\"text-danger\" *ngIf=\"isRequired()\">*</span>\r\n      </label>\r\n      <ng-select\r\n        formControlName=\"users\"\r\n        #ngSelectComponent\r\n        [items]=\"depUsers\"\r\n        bindLabel=\"properties.fullName\"\r\n        [multiple]=\"allowMultipleUsers\"\r\n        [placeholder]=\"'share.placeholder' | translate\"\r\n        [loading]=\"loading\"\r\n        (change)=\"onSetUser()\"\r\n      >\r\n        <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\r\n          <div\r\n            class=\"ng-option disabled\"\r\n            *ngIf=\"!depAnditsUsers?.get('dep').value; else notFound\"\r\n          >\r\n            {{ \"archiveSearch.select_dep\" | translate }}\r\n          </div>\r\n          <ng-template #notFound>\r\n            <div class=\"ng-option disabled\">\r\n              {{ \"archiveSearch.noUsers\" | translate }}\r\n            </div>\r\n          </ng-template>\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n          <div class=\"flex flex-col h-full\">\r\n            <div *ngIf=\"item\" class=\"flex flex-row items-center\">\r\n              <div class=\"flex-0 w-8 h-8 rounded-full overflow-hidden\">\r\n                <cts-avatar\r\n                  [user]=\"{\r\n                    properties: {\r\n                      firstName: item.properties?.firstName,\r\n                      lastName: item.properties?.lastName\r\n                    }\r\n                  }\"\r\n                >\r\n                </cts-avatar>\r\n              </div>\r\n              <div class=\"flex flex-col pt-0 px-2\">\r\n                <span>{{ item.properties?.fullName }}</span>\r\n                <span *ngIf=\"item.properties?.email\">{{\r\n                  item.properties?.email\r\n                }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [".userByDepSelectors ngx-dropdown-treeview>.dropdown{@apply bg-primary-50 border-primary-100 !important;}.userByDepSelectors .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:12px!important;margin-top:4px!important}\n"], components: [{ type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label", "defaultSelect", "displayDepTypee", "displayIsAllowRecExternal", "pp_departmentNestedTree", "pp_departmentTree", "customPrefix", "useCustomAddEditAction", "customParentProperty", "customParams", "disabled", "nodesExpandedByDefault", "fixedParentNode", "showTreeActions"], outputs: ["onSelecting", "actionClicked", "onDataLoad"] }, { type: i5.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: AvatarComponent, selector: "cts-avatar", inputs: ["user"] }], directives: [{ type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.ɵl, selector: "[ng-notfound-tmp]" }, { type: i5.ɵf, selector: "[ng-option-tmp]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectUsersByDepartmentsComponent, decorators: [{
             type: Component,
             args: [{
@@ -29943,7 +30225,7 @@ class DynamicTabsComponent {
     }
 }
 DynamicTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTabsComponent, selector: "app-dynamic-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex" }, viewQueries: [{ propertyName: "dynamicTabs", first: true, predicate: ["dynamicTabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group #dynamicTabs class=\"h-full\" *ngIf=\"tabs.length > 0\">\r\n    <mat-tab *ngFor=\"let tab of tabs\">\r\n        <ng-template mat-tab-label *ngIf=\"tab.titleTemplate;else normalTitle\">\r\n            <ng-content *ngTemplateOutlet=\"tab.titleTemplate\"></ng-content>\r\n        </ng-template>\r\n        <ng-template mat-tab-label #normalTitle class=\"flex flex-col items-center justify-center\">\r\n            <mat-icon class=\"example-tab-icon\">{{tab.icon}}</mat-icon>\r\n            <span>{{'tabs.' + tab.label | translate}}</span>\r\n        </ng-template>\r\n\r\n        <ng-template matTabContent>\r\n            <ng-content *ngTemplateOutlet=\"tab.template\"></ng-content>\r\n        </ng-template>\r\n    </mat-tab>\r\n</mat-tab-group>", styles: [".mat-tab-group .mat-tab-header .mat-tab-header-pagination-before{display:none}.mat-tab-group .mat-tab-header .mat-tab-header-pagination-after{display:none}.mat-tab-group .mat-tab-header .mat-tab-label-container{padding:0!important;overflow-x:auto}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list{@apply min-w-100 !important;}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels{height:50px}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{height:100%!important;border-bottom:1px solid lightgray;margin:0!important}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label .mat-tab-label-content{display:flex;flex-direction:column;font-size:12px}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label .mat-tab-label-content .mat-icon{font-size:20px;min-height:16px;min-width:16px;height:16px;width:16px}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active{border-bottom:2px solid black;opacity:1}.mat-tab-group .mat-tab-body-wrapper{padding:0 10px!important;height:calc(100% - 60px)}.mat-tab-group .mat-tab-body-wrapper .mat-tab-body .mat-tab-body-content{padding:0;overflow:hidden}.theme-dgda .mat-tab-group .mat-tab-header .mat-tab-label-container{@apply bg-transparent;}\n"], components: [{ type: i1$c.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$c.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$c.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$c.MatTabContent, selector: "[matTabContent]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DynamicTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTabsComponent, selector: "app-dynamic-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex" }, viewQueries: [{ propertyName: "dynamicTabs", first: true, predicate: ["dynamicTabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-tab-group #dynamicTabs class=\"h-full\" *ngIf=\"tabs.length > 0\">\r\n    <mat-tab *ngFor=\"let tab of tabs\">\r\n        <ng-template mat-tab-label *ngIf=\"tab.titleTemplate;else normalTitle\">\r\n            <ng-content *ngTemplateOutlet=\"tab.titleTemplate\"></ng-content>\r\n        </ng-template>\r\n        <ng-template mat-tab-label #normalTitle class=\"flex flex-col items-center justify-center\">\r\n            <mat-icon class=\"example-tab-icon\">{{tab.icon}}</mat-icon>\r\n            <span>{{'tabs.' + tab.label | translate}}</span>\r\n        </ng-template>\r\n\r\n        <ng-template matTabContent>\r\n            <ng-content *ngTemplateOutlet=\"tab.template\"></ng-content>\r\n        </ng-template>\r\n    </mat-tab>\r\n</mat-tab-group>", styles: [".mat-tab-group .mat-tab-header .mat-tab-header-pagination-before{display:none}.mat-tab-group .mat-tab-header .mat-tab-header-pagination-after{display:none}.mat-tab-group .mat-tab-header .mat-tab-label-container{padding:0!important;overflow-x:auto}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list{@apply min-w-100 !important;}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels{height:50px}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label{height:100%!important;border-bottom:1px solid lightgray;margin:0!important}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label .mat-tab-label-content{display:flex;flex-direction:column;font-size:12px}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label .mat-tab-label-content .mat-icon{font-size:20px;min-height:16px;min-width:16px;height:16px;width:16px}.mat-tab-group .mat-tab-header .mat-tab-label-container .mat-tab-list .mat-tab-labels .mat-tab-label-active{border-bottom:2px solid black;opacity:1}.mat-tab-group .mat-tab-body-wrapper{padding:0 10px!important;height:calc(100% - 60px)}.mat-tab-group .mat-tab-body-wrapper .mat-tab-body .mat-tab-body-content{padding:0;overflow:hidden}.theme-dgda .mat-tab-group .mat-tab-header .mat-tab-label-container{@apply bg-transparent;}\n"], components: [{ type: i1$d.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$d.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$d.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$d.MatTabContent, selector: "[matTabContent]" }], pipes: { "translate": i1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DynamicTabsComponent, decorators: [{
             type: Component,
             args: [{
@@ -33714,7 +33996,7 @@ class FilterComponent {
     }
 }
 FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterComponent, deps: [{ token: i2$4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterComponent, selector: "cts-filter", inputs: { fields: "fields", filterTitle: "filterTitle" }, outputs: { onFiltering: "onFiltering" }, ngImport: i0, template: "<div class=\"filter-wrapper\">\r\n    <div class=\"filter-title\">\r\n        <!-- {{filterTitle | translate}} -->\r\n    </div>\r\n    <div class=\"iner-filter-wrapper\" *ngIf=\"filterForm\">\r\n        <form [formGroup]=\"filterForm\">\r\n            <div class=\"single-control-wrapper\" *ngFor=\"let field of fields\">\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'text'\">\r\n                    <app-dynamic-form-textitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                      }}\"\r\n                  >\r\n                  </app-dynamic-form-textitem>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'dropdown'\">\r\n                    <app-dynamic-form-vocabulary-item\r\n                    [shwoAllValues]=\"field.shwoAllValues ? field.shwoAllValues : false\"\r\n                    [label]=\"field.label\"\r\n                    [bindLabel]=\"field.bindLabel\"\r\n                    [bindValue]=\"field.bindValue\"\r\n                    [placeholder]=\"field.placeholder | translate\"\r\n                    [multiple]=\"field.multiple\"\r\n                    [searchable]=\"field.searchable\"\r\n                    [closeOnSelect]=\"field.closeOnSelect\"\r\n                    [hideSelectedItems]=\"field.hideSelectedItems\"\r\n                    [vocabularyType]=\"field.vocabularyType\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-vocabulary-item>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'rang'\">\r\n                    <cts-dynamic-form-hijri-dateitem [label]=\"field.label\" [formControlName]=\"field.formControlName\"[range]=\"true\" [vertical]=\"false\" >\r\n                    </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'department'\">\r\n                    <app-dynamic-form-department\r\n                    [label]=\"field.label\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                    }}\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-department>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'toggle'\">\r\n                    <cts-dynamic-form-slide-toggleitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  ></cts-dynamic-form-slide-toggleitem>\r\n                </div>\r\n\r\n                <div   class=\"control\" *ngIf=\"field.type === 'date'\">\r\n                    <cts-dynamic-form-hijri-dateitem\r\n                    [formControlName]=\"field.formControlName\"\r\n                    [label]=\"field.label\"\r\n                  >\r\n                  </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n  \r\n\r\n            </div>\r\n\r\n        </form>\r\n           \r\n    </div>\r\n    <div class=\"form-actions\">\r\n        <button class=\"my-button mx-2\" type=\"button\" (click)=\"filter()\"> {{'FILTER' | translate}}</button>\r\n        <button class=\"my-button reset mx-2\" type=\"button\" (click)=\"reset()\"> {{'reset' | translate}}</button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.filter-wrapper .filter-title{font-size:18px;font-weight:bold;margin-bottom:15px}.filter-wrapper .iner-filter-wrapper{height:320px;overflow:auto;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;padding:15px 15px 0}.filter-wrapper .iner-filter-wrapper .single-control-wrapper{margin-bottom:15px}.filter-wrapper .form-actions{display:flex;justify-content:flex-start;align-content:center;padding:10px 15px}.filter-wrapper .form-actions .filter{border:none;background-color:transparent;font-weight:bold;width:80px;height:40px;background-image:linear-gradient(to bottom,#0dbab5,#2e62df);color:#fff;border-radius:5px}\n"], components: [{ type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "nativeAutoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "autoCompleteType", "tenantId", "emitFullObject", "outsideParams", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id", "maxCharsNum"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["onlyIds", "bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly", "placeholder", "emitOnBlur"], outputs: ["valueChanged"] }, { type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label", "defaultSelect", "displayDepTypee", "displayIsAllowRecExternal", "pp_departmentNestedTree", "pp_departmentTree", "customPrefix", "useCustomAddEditAction", "customParentProperty", "customParams", "disabled", "nodesExpandedByDefault", "fixedParentNode"], outputs: ["onSelecting", "actionClicked", "onDataLoad"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"], outputs: ["onToggle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FilterComponent, selector: "cts-filter", inputs: { fields: "fields", filterTitle: "filterTitle" }, outputs: { onFiltering: "onFiltering" }, ngImport: i0, template: "<div class=\"filter-wrapper\">\r\n    <div class=\"filter-title\">\r\n        <!-- {{filterTitle | translate}} -->\r\n    </div>\r\n    <div class=\"iner-filter-wrapper\" *ngIf=\"filterForm\">\r\n        <form [formGroup]=\"filterForm\">\r\n            <div class=\"single-control-wrapper\" *ngFor=\"let field of fields\">\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'text'\">\r\n                    <app-dynamic-form-textitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                      }}\"\r\n                  >\r\n                  </app-dynamic-form-textitem>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'dropdown'\">\r\n                    <app-dynamic-form-vocabulary-item\r\n                    [shwoAllValues]=\"field.shwoAllValues ? field.shwoAllValues : false\"\r\n                    [label]=\"field.label\"\r\n                    [bindLabel]=\"field.bindLabel\"\r\n                    [bindValue]=\"field.bindValue\"\r\n                    [placeholder]=\"field.placeholder | translate\"\r\n                    [multiple]=\"field.multiple\"\r\n                    [searchable]=\"field.searchable\"\r\n                    [closeOnSelect]=\"field.closeOnSelect\"\r\n                    [hideSelectedItems]=\"field.hideSelectedItems\"\r\n                    [vocabularyType]=\"field.vocabularyType\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-vocabulary-item>\r\n                </div>\r\n\r\n                <div class=\"control\" *ngIf=\"field.type === 'rang'\">\r\n                    <cts-dynamic-form-hijri-dateitem [label]=\"field.label\" [formControlName]=\"field.formControlName\"[range]=\"true\" [vertical]=\"false\" >\r\n                    </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'department'\">\r\n                    <app-dynamic-form-department\r\n                    [label]=\"field.label\"\r\n                    placeholder=\"{{ 'CREATE.PLACE_HOLDER' | translate }} {{\r\n                        field.placeholder | translate\r\n                    }}\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  >\r\n                  </app-dynamic-form-department>\r\n                </div>\r\n\r\n                <div  class=\"control\" *ngIf=\"field.type === 'toggle'\">\r\n                    <cts-dynamic-form-slide-toggleitem\r\n                    [label]=\"field.label\"\r\n                    [formControlName]=\"field.formControlName\"\r\n                  ></cts-dynamic-form-slide-toggleitem>\r\n                </div>\r\n\r\n                <div   class=\"control\" *ngIf=\"field.type === 'date'\">\r\n                    <cts-dynamic-form-hijri-dateitem\r\n                    [formControlName]=\"field.formControlName\"\r\n                    [label]=\"field.label\"\r\n                  >\r\n                  </cts-dynamic-form-hijri-dateitem>\r\n                </div>\r\n  \r\n\r\n            </div>\r\n\r\n        </form>\r\n           \r\n    </div>\r\n    <div class=\"form-actions\">\r\n        <button class=\"my-button mx-2\" type=\"button\" (click)=\"filter()\"> {{'FILTER' | translate}}</button>\r\n        <button class=\"my-button reset mx-2\" type=\"button\" (click)=\"reset()\"> {{'reset' | translate}}</button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.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}.filter-wrapper .filter-title{font-size:18px;font-weight:bold;margin-bottom:15px}.filter-wrapper .iner-filter-wrapper{height:320px;overflow:auto;scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;padding:15px 15px 0}.filter-wrapper .iner-filter-wrapper .single-control-wrapper{margin-bottom:15px}.filter-wrapper .form-actions{display:flex;justify-content:flex-start;align-content:center;padding:10px 15px}.filter-wrapper .form-actions .filter{border:none;background-color:transparent;font-weight:bold;width:80px;height:40px;background-image:linear-gradient(to bottom,#0dbab5,#2e62df);color:#fff;border-radius:5px}\n"], components: [{ type: DynamicFormTextItemComponent, selector: "app-dynamic-form-textitem", inputs: ["autoComplete", "nativeAutoComplete", "autoComplete_pageProvider", "autoComplete_propertyName", "autoComplete_propertyKey", "autoCompleteValueKey", "autoCompleteType", "tenantId", "emitFullObject", "outsideParams", "type", "property", "label", "editable", "placeholder", "disabled", "displayEmpty", "preventSpace", "id", "maxCharsNum"] }, { type: DynamicFormVocabularyItemComponent, selector: "app-dynamic-form-vocabulary-item", inputs: ["onlyIds", "bindValue", "bindLabel", "placeholder", "multiple", "searchable", "closeOnSelect", "hideSelectedItems", "disabled", "vocabularyType", "label", "cacheable", "shwoAllValues"], outputs: ["onSelecting"] }, { type: DynamicFormHijriDateitemComponent, selector: "cts-dynamic-form-hijri-dateitem", inputs: ["minHijri", "maxHijri", "minGreg", "maxGreg", "label", "isDisabled", "range", "vertical", "isReadOnly", "placeholder", "emitOnBlur"], outputs: ["valueChanged"] }, { type: DynamicFormDepartmentComponent, selector: "app-dynamic-form-department", inputs: ["treeview", "treeViewAsFormControl", "placeholder", "multiple", "searchable", "label", "defaultSelect", "displayDepTypee", "displayIsAllowRecExternal", "pp_departmentNestedTree", "pp_departmentTree", "customPrefix", "useCustomAddEditAction", "customParentProperty", "customParams", "disabled", "nodesExpandedByDefault", "fixedParentNode", "showTreeActions"], outputs: ["onSelecting", "actionClicked", "onDataLoad"] }, { type: DynamicFormSlideToggleitemComponent, selector: "cts-dynamic-form-slide-toggleitem", inputs: ["label", "disabled", "checked", "theme"], outputs: ["onToggle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -35144,7 +35426,7 @@ class NuxeoCoreModule {
     }
 }
 NuxeoCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NuxeoCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoCoreModule, imports: [CommonModule, i1$9.TreeviewModule, HttpClientModule, i1.TranslateModule, i1$1.ToastrModule, KeycloakAngularModule,
+NuxeoCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NuxeoCoreModule, imports: [CommonModule, i1$a.TreeviewModule, HttpClientModule, i1.TranslateModule, i1$1.ToastrModule, KeycloakAngularModule,
         RxReactiveFormsModule], exports: [KeycloakAngularModule,
         HttpClientModule,
         TranslateModule,
@@ -36412,7 +36694,7 @@ RemoveButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 		>
 			<mat-icon>close</mat-icon>
 		</button>
-	`, isInline: true, styles: ["\n\t\t\t:host {\n\t\t\t\t--size: var(--remove-icon-size, 30px);\n\t\t\t\tposition: var(--remove-icon-position, absolute);\n\t\t\t\tinset: var(--remove-icon-inset, 0 0 auto auto);\n\t\t\t\topacity: var(--remove-icon-opacity, 0);\n\t\t\t\tbackground: var(--remove-icon-background, #fff);\n\t\t\t\twidth: var(--size);\n\t\t\t\theight: var(--size);\n\t\t\t\tline-height: var(var(--remove-icon-size), calc(var(--size) - 6));\n\t\t\t\tborder-radius: var(--remove-icon-radius, 50%);\n\t\t\t\tz-index: 2;\n\t\t\t\t.remove-icon {\n\t\t\t\t\tborder: 1px solid currentColor;\n\t\t\t\t\tborder-radius: var(--remove-icon-radius, 50%);\n\t\t\t\t\twidth: var(--size);\n\t\t\t\t\theight: var(--size);\n\t\t\t\t\tline-height: var(--remove-icon-size, 24px);\n\t\t\t\t\tbackground: var(--remove-icon-background, #fff);\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\t\t\t}\n\t\t"], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+	`, isInline: true, styles: ["\n\t\t\t:host {\n\t\t\t\t--size: var(--remove-icon-size, 30px);\n\t\t\t\tposition: var(--remove-icon-position, absolute);\n\t\t\t\tinset: var(--remove-icon-inset, 0 0 auto auto);\n\t\t\t\topacity: var(--remove-icon-opacity, 0);\n\t\t\t\tbackground: var(--remove-icon-background, #fff);\n\t\t\t\twidth: var(--size);\n\t\t\t\theight: var(--size);\n\t\t\t\tline-height: var(var(--remove-icon-size), calc(var(--size) - 6));\n\t\t\t\tborder-radius: var(--remove-icon-radius, 50%);\n\t\t\t\tz-index: 2;\n\t\t\t\t.remove-icon {\n\t\t\t\t\tborder: 1px solid currentColor;\n\t\t\t\t\tborder-radius: var(--remove-icon-radius, 50%);\n\t\t\t\t\twidth: var(--size);\n\t\t\t\t\theight: var(--size);\n\t\t\t\t\tline-height: var(--remove-icon-size, 24px);\n\t\t\t\t\tbackground: var(--remove-icon-background, #fff);\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\t\t\t}\n\t\t"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -37041,7 +37323,7 @@ ZoomControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
     <button mat-flat-button (click)="zoomIn()">
       <mat-icon>zoom_in</mat-icon>
     </button>
-  `, isInline: true, styles: ["\n      :host {\n        position: var(--diagram-zoom-position, absolute);\n        inset-inline: var(--diagram-zoom-inline, auto 5px);\n        inset-block: var(--diagram-zoom-block, 5px auto);\n        background: var(--diagram-zoom-background, #f8f8ff);\n        border-radius: var(--diagram-zoom-radius, 4px);\n        border: var(--diagram-zoom-border, 1px solid #dcdce4);\n        display: var(--diagram-zoom-display, inline-flex);\n        flex-direction: var(--diagram-zoom-direction, row);\n        box-shadow: var(--diagram-zoom-shadow, 0 0 0 0 #eee);\n        .mat-flat-button {\n          background-color: transparent;\n          min-width: 36px;\n        }\n      }\n    "], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+  `, isInline: true, styles: ["\n      :host {\n        position: var(--diagram-zoom-position, absolute);\n        inset-inline: var(--diagram-zoom-inline, auto 5px);\n        inset-block: var(--diagram-zoom-block, 5px auto);\n        background: var(--diagram-zoom-background, #f8f8ff);\n        border-radius: var(--diagram-zoom-radius, 4px);\n        border: var(--diagram-zoom-border, 1px solid #dcdce4);\n        display: var(--diagram-zoom-display, inline-flex);\n        flex-direction: var(--diagram-zoom-direction, row);\n        box-shadow: var(--diagram-zoom-shadow, 0 0 0 0 #eee);\n        .mat-flat-button {\n          background-color: transparent;\n          min-width: 36px;\n        }\n      }\n    "], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ZoomControlComponent, decorators: [{
             type: Component,
             args: [{
@@ -37314,7 +37596,7 @@ class NotificationItemComponent extends DestroySubject {
     }
 }
 NotificationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationItemComponent, selector: "app-notification-item", inputs: { iconOptions: "iconOptions", currentLang: "currentLang", notification: "notification" }, outputs: { markAsUnread: "markAsUnread", markAsRead: "markAsRead", markAsDeleted: "markAsDeleted" }, usesInheritance: true, ngImport: i0, template: "<div\r\n\t*ngIf=\"notification?.properties as properties\"\r\n\tclass=\"notification-item\"\r\n\t[class.new-item]=\"properties['notif_cnt:status'] == status.new\"\r\n\t[class.unread-item]=\"properties['notif_cnt:status'] == status.unRead\"\r\n>\r\n\t<div class=\"notification-item__icon\">\r\n\t\t<div class=\"notification-item__icon__wrapper\" *ngIf=\"iconOptions?.active\">\r\n\t\t\t<i [class]=\"notification | getIcon : iconOptions\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"notification-item__content\">\r\n\t\t<p class=\"notification-item__message line-clamp-2\">\r\n\t\t\t{{\r\n\t\t\t\tcurrentLang === 'ar-AR'\r\n\t\t\t\t\t? properties['notif_cnt:arMessage']\r\n\t\t\t\t\t: properties['notif_cnt:enMessage']\r\n\t\t\t}}\r\n\t\t</p>\r\n\t\t<button\r\n\t\t\tclass=\"mat-icon-button\"\r\n\t\t\t[matMenuTriggerFor]=\"appMenu\"\r\n\t\t\tmat-icon-button\r\n\t\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"mat-24\">more_horiz</mat-icon>\r\n\t\t</button>\r\n\t\t<span class=\"notification-item__date\">{{\r\n\t\t\tproperties['dc:created'] | timeAgo : currentLang\r\n\t\t}}</span>\r\n\t</div>\r\n\r\n\t<mat-menu\r\n\t\tclass=\"notification-item__actions\"\r\n\t\t#appMenu=\"matMenu\"\r\n\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t>\r\n\t\t<span\r\n\t\t\t(click)=\"closeMenu($event, appMenu)\"\r\n\t\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"properties['notif_cnt:status'] == status.read\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsUnread.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsUnread' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.new ||\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.unRead\r\n\t\t\t\t\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsRead.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsRead' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\t(click)=\"markAsDeleted.emit(notification)\"\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t>\r\n\t\t\t\t<span>{{ 'notifications.delete' | translate }}</span>\r\n\t\t\t</button>\r\n\t\t</span>\r\n\t</mat-menu>\r\n</div>\r\n", styles: [".notification-item{display:var(--n-item-display, grid);grid-template-columns:var(--n-item-columns, auto 1fr);grid-gap:var(--n-item-gap, .5rem);gap:var(--n-item-gap, .5rem);padding:var(--n-items-padding, .5rem 1rem);border:var(--n-item-border, solid #eee);border-width:var(--n-item-border-width, 0 0 1px 0);background:var(--n-item-background, transparent);min-height:var(--n-item-height, 85px);position:relative}.notification-item.new-item{--n-item-background: var(--n-status-new-color, #ecf8fe)}.notification-item.unread-item{--n-item-background: var(--n-status-unread-color, #ecf8fe)}.notification-item.unread-item:before{content:\"\";position:absolute;inset-inline-start:var(--n-item-unread-inline, 6px);inset-block-start:var(--n-item-unread-block, 6px);width:var(--n-item-unread-width, 8px);height:var(--n-item-unread-height, 8px);background:var(--n-item-unread-background, #39559d);border-radius:50%}.notification-item__icon{display:var(--n-item-icon-display, flex);align-items:var(--n-item-icon-align-items, center)}.notification-item__icon__wrapper{width:var(--n-item-icon-width, 56px);height:var(--n-item-icon-height, 56px);background:var(--n-item-icon-background, rgba(0, 0, 0, .025));color:var(--n-item-icon-color, #636363);font-size:var(--n-item-icon-size, 1.5rem);border-radius:var(--n-item-icon-radius, 50%);display:grid;place-items:center}.notification-item__content{display:var(--n-item-content-display, grid);grid-template-columns:var(--n-item-content-columns, 1fr auto);grid-gap:var(--n-item-gap, .2rem);gap:var(--n-item-gap, .2rem)}.notification-item__message{margin-bottom:0;font-size:var(--n-item-font-size, .9rem);color:var(--n-item-message-color)}.notification-item__date{font-size:var(--n-item-date-size, .8rem);text-align:var(--n-item-date-align, end);grid-column:var(--n-item-date-column, span 2);padding:var(--n-item-date-padding, 0 11px);color:var(--n-item-date-color)}.notification-item__actions{border-radius:var(--n-actions-radius, 4px);background:var(--n-actions-background, #fff);box-shadow:var(--n-actions-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notification-item__actions .mat-menu-content:not(:empty){padding:var(--n-actions--menu-padding, .5rem)}.notification-item__actions__item{text-align:var(--action-item-align, start)!important;background:var(--action-item-background, transparent)!important;color:var(--action-item-color, #28282d);padding:var(--action-item-padding, .4rem);height:var(--action-item-height, 38px);line-height:var(--action-item-line, 38px);border-radius:var(--action-item-radius, 4px);font-size:var(--action-item-size, 14px)}.notification-item__actions__item:hover{--action-item-background: var(--action-hover-background, #e6f7ff);--action-item-color: var(--action-hover-color, #005fdb)}\n"], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "getIcon": GetIconPipe, "timeAgo": TimeAgoPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NotificationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationItemComponent, selector: "app-notification-item", inputs: { iconOptions: "iconOptions", currentLang: "currentLang", notification: "notification" }, outputs: { markAsUnread: "markAsUnread", markAsRead: "markAsRead", markAsDeleted: "markAsDeleted" }, usesInheritance: true, ngImport: i0, template: "<div\r\n\t*ngIf=\"notification?.properties as properties\"\r\n\tclass=\"notification-item\"\r\n\t[class.new-item]=\"properties['notif_cnt:status'] == status.new\"\r\n\t[class.unread-item]=\"properties['notif_cnt:status'] == status.unRead\"\r\n>\r\n\t<div class=\"notification-item__icon\">\r\n\t\t<div class=\"notification-item__icon__wrapper\" *ngIf=\"iconOptions?.active\">\r\n\t\t\t<i [class]=\"notification | getIcon : iconOptions\"></i>\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"notification-item__content\">\r\n\t\t<p class=\"notification-item__message line-clamp-2\">\r\n\t\t\t{{\r\n\t\t\t\tcurrentLang === 'ar-AR'\r\n\t\t\t\t\t? properties['notif_cnt:arMessage']\r\n\t\t\t\t\t: properties['notif_cnt:enMessage']\r\n\t\t\t}}\r\n\t\t</p>\r\n\t\t<button\r\n\t\t\tclass=\"mat-icon-button\"\r\n\t\t\t[matMenuTriggerFor]=\"appMenu\"\r\n\t\t\tmat-icon-button\r\n\t\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t>\r\n\t\t\t<mat-icon class=\"mat-24\">more_horiz</mat-icon>\r\n\t\t</button>\r\n\t\t<span class=\"notification-item__date\">{{\r\n\t\t\tproperties['dc:created'] | timeAgo : currentLang\r\n\t\t}}</span>\r\n\t</div>\r\n\r\n\t<mat-menu\r\n\t\tclass=\"notification-item__actions\"\r\n\t\t#appMenu=\"matMenu\"\r\n\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t>\r\n\t\t<span\r\n\t\t\t(click)=\"closeMenu($event, appMenu)\"\r\n\t\t\t[attr.dir.rtl]=\"currentLang === 'ar-AR'\"\r\n\t\t>\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"properties['notif_cnt:status'] == status.read\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsUnread.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsUnread' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\t*ngIf=\"\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.new ||\r\n\t\t\t\t\tproperties['notif_cnt:status'] == status.unRead\r\n\t\t\t\t\"\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t\t(click)=\"markAsRead.emit(notification)\"\r\n\t\t\t>\r\n\t\t\t\t<span class=\"mx-1\">{{ 'notifications.markAsRead' | translate }}</span>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tmat-menu-item\r\n\t\t\t\t(click)=\"markAsDeleted.emit(notification)\"\r\n\t\t\t\tclass=\"notification-item__actions__item\"\r\n\t\t\t>\r\n\t\t\t\t<span>{{ 'notifications.delete' | translate }}</span>\r\n\t\t\t</button>\r\n\t\t</span>\r\n\t</mat-menu>\r\n</div>\r\n", styles: [".notification-item{display:var(--n-item-display, grid);grid-template-columns:var(--n-item-columns, auto 1fr);grid-gap:var(--n-item-gap, .5rem);gap:var(--n-item-gap, .5rem);padding:var(--n-items-padding, .5rem 1rem);border:var(--n-item-border, solid #eee);border-width:var(--n-item-border-width, 0 0 1px 0);background:var(--n-item-background, transparent);min-height:var(--n-item-height, 85px);position:relative}.notification-item.new-item{--n-item-background: var(--n-status-new-color, #ecf8fe)}.notification-item.unread-item{--n-item-background: var(--n-status-unread-color, #ecf8fe)}.notification-item.unread-item:before{content:\"\";position:absolute;inset-inline-start:var(--n-item-unread-inline, 6px);inset-block-start:var(--n-item-unread-block, 6px);width:var(--n-item-unread-width, 8px);height:var(--n-item-unread-height, 8px);background:var(--n-item-unread-background, #39559d);border-radius:50%}.notification-item__icon{display:var(--n-item-icon-display, flex);align-items:var(--n-item-icon-align-items, center)}.notification-item__icon__wrapper{width:var(--n-item-icon-width, 56px);height:var(--n-item-icon-height, 56px);background:var(--n-item-icon-background, rgba(0, 0, 0, .025));color:var(--n-item-icon-color, #636363);font-size:var(--n-item-icon-size, 1.5rem);border-radius:var(--n-item-icon-radius, 50%);display:grid;place-items:center}.notification-item__content{display:var(--n-item-content-display, grid);grid-template-columns:var(--n-item-content-columns, 1fr auto);grid-gap:var(--n-item-gap, .2rem);gap:var(--n-item-gap, .2rem)}.notification-item__message{margin-bottom:0;font-size:var(--n-item-font-size, .9rem);color:var(--n-item-message-color)}.notification-item__date{font-size:var(--n-item-date-size, .8rem);text-align:var(--n-item-date-align, end);grid-column:var(--n-item-date-column, span 2);padding:var(--n-item-date-padding, 0 11px);color:var(--n-item-date-color)}.notification-item__actions{border-radius:var(--n-actions-radius, 4px);background:var(--n-actions-background, #fff);box-shadow:var(--n-actions-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notification-item__actions .mat-menu-content:not(:empty){padding:var(--n-actions--menu-padding, .5rem)}.notification-item__actions__item{text-align:var(--action-item-align, start)!important;background:var(--action-item-background, transparent)!important;color:var(--action-item-color, #28282d);padding:var(--action-item-padding, .4rem);height:var(--action-item-height, 38px);line-height:var(--action-item-line, 38px);border-radius:var(--action-item-radius, 4px);font-size:var(--action-item-size, 14px)}.notification-item__actions__item:hover{--action-item-background: var(--action-hover-background, #e6f7ff);--action-item-color: var(--action-hover-color, #005fdb)}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "getIcon": GetIconPipe, "timeAgo": TimeAgoPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -37624,7 +37906,7 @@ class NotificationSourceSelectComponent extends BaseNotification {
     }
 }
 NotificationSourceSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationSourceSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NotificationSourceSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: { typeChanged: "typeChanged" }, usesInheritance: true, ngImport: i0, template: "<span [dir]=\"direction$ | async\" *ngIf=\"sourceTypes$ | async as sourceTypes\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger px-2\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n    mat-stroked-button\r\n  >\r\n    <span>{{\r\n      (selectedFilterType\r\n        ? 'vocabulary.VOC_Notf_SourceTypes.' + selectedFilterType.properties.id\r\n        : 'notifications.allTypes'\r\n      ) | translate\r\n    }}</span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"source-type-select-menu\" #filterTypeMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        (click)=\"selectFilterType(null); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        *ngFor=\"let type of sourceTypes\"\r\n        (click)=\"selectFilterType(type); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{\r\n          'vocabulary.VOC_Notf_SourceTypes.' + type?.properties.id | translate\r\n        }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".source-type-select-menu{box-shadow:var(--source-type-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.source-type-select-menu .mat-menu-content:not(:empty){padding:var(--source-type-menu-padding, .5rem)}.source-type-select-menu__option{background:var(--source-type-option-background, transparent)!important;border-radius:var(--source-type-option-radius, 4px);font-size:var(--source-type-option-size, 14px);color:var(--source-type-option-color, #28282d);height:var(--source-type-option-height, 38px);line-height:var(--source-type-option-line-height, 38px)}.source-type-select-menu__option:hover{--source-type-option-background: var(--source-type-option-hover-background, #e6f7ff);--source-type-option-color: var(--source-type-option-hover-color, #005fdb)}.source-type-select-menu__option .mat-icon{color:currentColor}\n"], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NotificationSourceSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationSourceSelectComponent, selector: "app-notification-source-select", outputs: { typeChanged: "typeChanged" }, usesInheritance: true, ngImport: i0, template: "<span [dir]=\"direction$ | async\" *ngIf=\"sourceTypes$ | async as sourceTypes\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"type-filter-trigger px-2\"\r\n    [matMenuTriggerFor]=\"filterTypeMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n    mat-stroked-button\r\n  >\r\n    <span>{{\r\n      (selectedFilterType\r\n        ? 'vocabulary.VOC_Notf_SourceTypes.' + selectedFilterType.properties.id\r\n        : 'notifications.allTypes'\r\n      ) | translate\r\n    }}</span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"source-type-select-menu\" #filterTypeMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        (click)=\"selectFilterType(null); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        class=\"source-type-select-menu__option\"\r\n        *ngFor=\"let type of sourceTypes\"\r\n        (click)=\"selectFilterType(type); filterTypeMenuTrigger.closed.emit()\"\r\n      >\r\n        <span>{{\r\n          'vocabulary.VOC_Notf_SourceTypes.' + type?.properties.id | translate\r\n        }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".source-type-select-menu{box-shadow:var(--source-type-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.source-type-select-menu .mat-menu-content:not(:empty){padding:var(--source-type-menu-padding, .5rem)}.source-type-select-menu__option{background:var(--source-type-option-background, transparent)!important;border-radius:var(--source-type-option-radius, 4px);font-size:var(--source-type-option-size, 14px);color:var(--source-type-option-color, #28282d);height:var(--source-type-option-height, 38px);line-height:var(--source-type-option-line-height, 38px)}.source-type-select-menu__option:hover{--source-type-option-background: var(--source-type-option-hover-background, #e6f7ff);--source-type-option-color: var(--source-type-option-hover-color, #005fdb)}.source-type-select-menu__option .mat-icon{color:currentColor}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationSourceSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -37645,7 +37927,7 @@ class NotificationStatusToggleComponent {
     }
 }
 NotificationStatusToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationStatusToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationStatusToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: { status: "status" }, outputs: { statusChanged: "statusChanged" }, ngImport: i0, template: "<div class=\"notification-toggle\" (click)=\"$event.stopPropagation()\">\r\n  <mat-slide-toggle [checked]=\"status\" (change)=\"statusChanged.emit($event)\">\r\n    <small class=\"px-2\">{{ 'notifications.read' | translate }}</small>\r\n  </mat-slide-toggle>\r\n</div>\r\n", styles: [":host{display:var(--n-status-toggle-display, flex);flex-direction:var(--n-status-toggle-direction, column);justify-content:var(--n-status-toggle-content, center)}:host ::ng-deep .mat-slide-toggle-label{margin-bottom:0}\n"], components: [{ type: i1$8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationStatusToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationStatusToggleComponent, selector: "app-notification-status-toggle", inputs: { status: "status" }, outputs: { statusChanged: "statusChanged" }, ngImport: i0, template: "<div class=\"notification-toggle\" (click)=\"$event.stopPropagation()\">\r\n  <mat-slide-toggle [checked]=\"status\" (change)=\"statusChanged.emit($event)\">\r\n    <small class=\"px-2\">{{ 'notifications.read' | translate }}</small>\r\n  </mat-slide-toggle>\r\n</div>\r\n", styles: [":host{display:var(--n-status-toggle-display, flex);flex-direction:var(--n-status-toggle-direction, column);justify-content:var(--n-status-toggle-content, center)}:host ::ng-deep .mat-slide-toggle-label{margin-bottom:0}\n"], components: [{ type: i1$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationStatusToggleComponent, decorators: [{
             type: Component,
             args: [{
@@ -38027,7 +38309,7 @@ class NotificationsDateSelectComponent extends BaseNotification {
     }
 }
 NotificationsDateSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsDateSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NotificationsDateSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: { dateChanged: "dateChanged" }, usesInheritance: true, ngImport: i0, template: "<span [dir]=\"direction$ | async\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"date-select-button\"\r\n    mat-stroked-button\r\n    [matMenuTriggerFor]=\"datesMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    <span>\r\n      {{\r\n        (selectedDate\r\n          ? 'notifications.dates.' + selectedDate.key\r\n          : 'notifications.dates.all'\r\n        ) | translate\r\n      }}\r\n    </span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"dates-select-menu\" #datesMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(null); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        *ngFor=\"let date of dates\"\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(date); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.' + date.key | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".dates-select-menu{box-shadow:var(--dates-select-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.dates-select-menu .mat-menu-content:not(:empty){padding:var(--dates-select-menu-padding, .5rem)}.dates-select-menu__option{background:var(--dates-select-option-background, transparent)!important;border-radius:var(--dates-select-option-radius, 4px);font-size:var(--dates-select-option-size, 14px);color:var(--dates-select-option-color, #28282d);height:var(--dates-select-option-height, 38px);line-height:var(--dates-select-option-line-height, 38px)}.dates-select-menu__option:hover{--dates-select-option-background: var(--dates-select-option-hover-background, #e6f7ff);--dates-select-option-color: var(--dates-select-option-hover-color, #005fdb)}.dates-select-menu__option .mat-icon{color:currentColor}\n"], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NotificationsDateSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsDateSelectComponent, selector: "app-notifications-date-select", outputs: { dateChanged: "dateChanged" }, usesInheritance: true, ngImport: i0, template: "<span [dir]=\"direction$ | async\">\r\n  <button\r\n    (click)=\"$event.stopPropagation()\"\r\n    class=\"date-select-button\"\r\n    mat-stroked-button\r\n    [matMenuTriggerFor]=\"datesMenu\"\r\n    #filterTypeMenuTrigger=\"matMenuTrigger\"\r\n  >\r\n    <span>\r\n      {{\r\n        (selectedDate\r\n          ? 'notifications.dates.' + selectedDate.key\r\n          : 'notifications.dates.all'\r\n        ) | translate\r\n      }}\r\n    </span>\r\n    <span class=\"icon icon-chevron-down\"></span>\r\n  </button>\r\n  <mat-menu class=\"dates-select-menu\" #datesMenu=\"matMenu\">\r\n    <span (click)=\"$event.stopPropagation()\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(null); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.all' | translate }}</span>\r\n      </button>\r\n      <button\r\n        mat-menu-item\r\n        *ngFor=\"let date of dates\"\r\n        class=\"dates-select-menu__option\"\r\n        (click)=\"selectDate(date); datesMenu.closed.emit()\"\r\n      >\r\n        <span>{{ 'notifications.dates.' + date.key | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".dates-select-menu{box-shadow:var(--dates-select-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.dates-select-menu .mat-menu-content:not(:empty){padding:var(--dates-select-menu-padding, .5rem)}.dates-select-menu__option{background:var(--dates-select-option-background, transparent)!important;border-radius:var(--dates-select-option-radius, 4px);font-size:var(--dates-select-option-size, 14px);color:var(--dates-select-option-color, #28282d);height:var(--dates-select-option-height, 38px);line-height:var(--dates-select-option-line-height, 38px)}.dates-select-menu__option:hover{--dates-select-option-background: var(--dates-select-option-hover-background, #e6f7ff);--dates-select-option-color: var(--dates-select-option-hover-color, #005fdb)}.dates-select-menu__option .mat-icon{color:currentColor}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsDateSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -38054,7 +38336,7 @@ class NotificationsListActionsComponent {
     }
 }
 NotificationsListActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsListActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationsListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: { options: "options", direction: "direction" }, outputs: { markAllAsRead: "markAllAsRead", openSettings: "openSettings", openNotifications: "openNotifications" }, ngImport: i0, template: "<span [dir]=\"direction\" *ngIf=\"options?.active\">\r\n  <button\r\n    [matMenuTriggerFor]=\"actions\"\r\n    mat-icon-button\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <mat-icon>more_horiz</mat-icon>\r\n  </button>\r\n  <mat-menu #actions=\"matMenu\" class=\"notifications-actions-menu\">\r\n    <span (click)=\"closeMenu($event, actions)\">\r\n      <button\r\n        *ngIf=\"options.updateState\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"markAllAsRead.emit($event)\"\r\n      >\r\n        <mat-icon>done_all</mat-icon>\r\n        <span>{{ 'notifications.markAllAsRead' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openSetting\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openSettings.emit($event)\"\r\n      >\r\n        <mat-icon>tune</mat-icon>\r\n        <span>{{ 'notifications.notificationSettings' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openNotification\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openNotifications.emit($event)\"\r\n      >\r\n        <mat-icon>open_in_browser</mat-icon>\r\n        <span>{{ 'notifications.openNotifications' | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".notifications-actions-menu{box-shadow:var(--n-actions-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notifications-actions-menu .mat-menu-content:not(:empty){padding:var(--n-actions-menu-padding, .5rem)}.notifications-actions-menu__action{background:var(--n-menu-action-background, transparent)!important;border-radius:var(--n-menu-action-radius, 4px);font-size:var(--n-menu-action-size, 14px);color:var(--n-menu-action-color, #28282d);height:var(--n-menu-action-height, 40px);line-height:var(--n-menu-action-line-height, 40px)}.notifications-actions-menu__action:hover{--n-menu-action-background: var(--n-menu-action-hover-background, #e6f7ff);--n-menu-action-color: var(--n-menu-action-hover-color, #005fdb)}.notifications-actions-menu__action .mat-icon{color:currentColor}\n"], components: [{ type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NotificationsListActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsListActionsComponent, selector: "app-notifications-list-actions", inputs: { options: "options", direction: "direction" }, outputs: { markAllAsRead: "markAllAsRead", openSettings: "openSettings", openNotifications: "openNotifications" }, ngImport: i0, template: "<span [dir]=\"direction\" *ngIf=\"options?.active\">\r\n  <button\r\n    [matMenuTriggerFor]=\"actions\"\r\n    mat-icon-button\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <mat-icon>more_horiz</mat-icon>\r\n  </button>\r\n  <mat-menu #actions=\"matMenu\" class=\"notifications-actions-menu\">\r\n    <span (click)=\"closeMenu($event, actions)\">\r\n      <button\r\n        *ngIf=\"options.updateState\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"markAllAsRead.emit($event)\"\r\n      >\r\n        <mat-icon>done_all</mat-icon>\r\n        <span>{{ 'notifications.markAllAsRead' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openSetting\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openSettings.emit($event)\"\r\n      >\r\n        <mat-icon>tune</mat-icon>\r\n        <span>{{ 'notifications.notificationSettings' | translate }}</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"options.openNotification\"\r\n        mat-menu-item\r\n        class=\"notifications-actions-menu__action\"\r\n        (click)=\"openNotifications.emit($event)\"\r\n      >\r\n        <mat-icon>open_in_browser</mat-icon>\r\n        <span>{{ 'notifications.openNotifications' | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </mat-menu>\r\n</span>\r\n", styles: [".notifications-actions-menu{box-shadow:var(--n-actions-menu-shadow, 0px 1px 4px -1px rgba(28, 52, 84, .26))}.notifications-actions-menu .mat-menu-content:not(:empty){padding:var(--n-actions-menu-padding, .5rem)}.notifications-actions-menu__action{background:var(--n-menu-action-background, transparent)!important;border-radius:var(--n-menu-action-radius, 4px);font-size:var(--n-menu-action-size, 14px);color:var(--n-menu-action-color, #28282d);height:var(--n-menu-action-height, 40px);line-height:var(--n-menu-action-line-height, 40px)}.notifications-actions-menu__action:hover{--n-menu-action-background: var(--n-menu-action-hover-background, #e6f7ff);--n-menu-action-color: var(--n-menu-action-hover-color, #005fdb)}.notifications-actions-menu__action .mat-icon{color:currentColor}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsListActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -38716,7 +38998,7 @@ class NotificationsSettingsComponent extends BaseNotification {
     }
 }
 NotificationsSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsSettingsComponent, deps: [{ token: i0.Injector }, { token: TranslationService }, { token: i0.ChangeDetectorRef }, { token: CustomToastrService }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsSettingsComponent, selector: "app-notifications-settings", inputs: { channel: "channel" }, outputs: { onSubscribe: "onSubscribe", onUnsubscribe: "onUnsubscribe" }, usesInheritance: true, ngImport: i0, template: "<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-4 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n<div *ngIf=\"settings$ | async as settings\" class=\"notifications-settings\">\r\n  <ng-container *ngIf=\"!isLoadingResult && settings.definitions\">\r\n    <div\r\n      *ngFor=\"let group of settings.definitions | keyvalue\"\r\n      class=\"notifications-settings__section notifications-settings__section--{{\r\n        group.key\r\n      }}\"\r\n    >\r\n      <div class=\"notifications-settings__section__title\">\r\n        <mat-icon> tune </mat-icon>\r\n        <strong> {{ 'vocabulary.VOC_Notf_SourceTypes.' + group.key | translate }}</strong>\r\n      </div>\r\n      <div class=\"notifications-settings__section__content\">\r\n        <div *ngFor=\"let definition of group.value\" class=\"notifications-settings__group\">\r\n          <mat-slide-toggle\r\n            [name]=\"definition.title\"\r\n            [checked]=\"\r\n              definition.autoSubscription\r\n                ? true\r\n                : (definition | checkIfSubscribed : settings.subscriptions)\r\n            \"\r\n            class=\"notifications-settings__group__toggle\"\r\n            [class.is-loading]=\"changingItemId === definition.uid\"\r\n            [disabled]=\"definition.autoSubscription\"\r\n            (change)=\"settingChanged(definition, $event)\"\r\n          >\r\n          </mat-slide-toggle>\r\n          <span class=\"notifications-settings__group__title\"\r\n            >{{ currentLang == 'ar' ? definition?.arTitle : definition?.enTitle }}\r\n          </span>\r\n\r\n          <p class=\"notifications-settings__group__description\">\r\n            {{\r\n              currentLang == 'ar' ? definition?.arDescription : definition?.enDescription\r\n            }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".notifications-settings{padding:var(--notifications-settings-padding, 1rem 0)}.notifications-settings__section{border:var(--setting-section-border, 1px solid #f0f0f0);border-radius:var(--setting-section-radius, 6px);padding:var(--settings-section-padding, 1rem);margin-block:var(--settings-section-margin-block, 0 1.5rem);margin-inline:var(--settings-section-margin-inline, 0)}.notifications-settings__section__title{display:var(--setting-section-title-display, flex);align-items:var(--setting-section-title-items, center);grid-gap:var(--setting-section-title-gap, .5rem);gap:var(--setting-section-title-gap, .5rem);padding-block:var(--setting-section-title-padding-block, .5rem);border-bottom:var(--setting-section-title-border-bottom, 1px solid #f0f0f0);background:var(--setting-section-title-background, transparent);color:var(--setting-section-title-color, #2f258a)}.notifications-settings__section__content{padding-block:var(--setting-section-content-padding-block, 1rem 0);display:var(--setting-section-content-display, grid);grid-template-columns:var(--setting-section-content-columns, repeat(auto-fit, minmax(490px, 1fr)));grid-gap:var(--setting-section-content-gap, 1rem);gap:var(--setting-section-content-gap, 1rem)}.notifications-settings__group{display:var(--setting-group-display, grid);grid-template-columns:var(--setting-group-columns, auto 1fr);background:var(--setting-group-background, transparent);padding:var(--setting-group-padding, .2rem 0);grid-gap:var(--setting-group-gap, .1rem 1rem);gap:var(--setting-group-gap, .1rem 1rem)}.notifications-settings__group__toggle{order:var(--setting-toggle-order)}.notifications-settings__group__toggle.is-loading{--loading-color: var(--setting-toggle-loader-color, #9189dd36);opacity:.5}.notifications-settings__group__toggle.is-loading ::ng-deep{pointer-events:none}.notifications-settings__group__toggle.is-loading ::ng-deep .mat-slide-toggle-thumb{animation:animateLoader 1.5s linear infinite}.notifications-settings__group__toggle.is-loading ::ng-deep label{margin-bottom:0}.notifications-settings__group__description{color:var(--setting-option-description-color, #666);font-size:var(--setting-option-description-size, .8rem);grid-column:var(--setting-option-description-column, 2)}@keyframes animateLoader{0%{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}50%{box-shadow:0 0 0 1px var(--loading-color),0 0 0 3px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 5px var(--loading-color),0 0 0 6px var(--loading-color)}to{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}}\n"], components: [{ type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "keyvalue": i4$1.KeyValuePipe, "translate": i1.TranslatePipe, "checkIfSubscribed": CheckIfSubscribedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationsSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsSettingsComponent, selector: "app-notifications-settings", inputs: { channel: "channel" }, outputs: { onSubscribe: "onSubscribe", onUnsubscribe: "onUnsubscribe" }, usesInheritance: true, ngImport: i0, template: "<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-4 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n<div *ngIf=\"settings$ | async as settings\" class=\"notifications-settings\">\r\n  <ng-container *ngIf=\"!isLoadingResult && settings.definitions\">\r\n    <div\r\n      *ngFor=\"let group of settings.definitions | keyvalue\"\r\n      class=\"notifications-settings__section notifications-settings__section--{{\r\n        group.key\r\n      }}\"\r\n    >\r\n      <div class=\"notifications-settings__section__title\">\r\n        <mat-icon> tune </mat-icon>\r\n        <strong> {{ 'vocabulary.VOC_Notf_SourceTypes.' + group.key | translate }}</strong>\r\n      </div>\r\n      <div class=\"notifications-settings__section__content\">\r\n        <div *ngFor=\"let definition of group.value\" class=\"notifications-settings__group\">\r\n          <mat-slide-toggle\r\n            [name]=\"definition.title\"\r\n            [checked]=\"\r\n              definition.autoSubscription\r\n                ? true\r\n                : (definition | checkIfSubscribed : settings.subscriptions)\r\n            \"\r\n            class=\"notifications-settings__group__toggle\"\r\n            [class.is-loading]=\"changingItemId === definition.uid\"\r\n            [disabled]=\"definition.autoSubscription\"\r\n            (change)=\"settingChanged(definition, $event)\"\r\n          >\r\n          </mat-slide-toggle>\r\n          <span class=\"notifications-settings__group__title\"\r\n            >{{ currentLang == 'ar' ? definition?.arTitle : definition?.enTitle }}\r\n          </span>\r\n\r\n          <p class=\"notifications-settings__group__description\">\r\n            {{\r\n              currentLang == 'ar' ? definition?.arDescription : definition?.enDescription\r\n            }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".notifications-settings{padding:var(--notifications-settings-padding, 1rem 0)}.notifications-settings__section{border:var(--setting-section-border, 1px solid #f0f0f0);border-radius:var(--setting-section-radius, 6px);padding:var(--settings-section-padding, 1rem);margin-block:var(--settings-section-margin-block, 0 1.5rem);margin-inline:var(--settings-section-margin-inline, 0)}.notifications-settings__section__title{display:var(--setting-section-title-display, flex);align-items:var(--setting-section-title-items, center);grid-gap:var(--setting-section-title-gap, .5rem);gap:var(--setting-section-title-gap, .5rem);padding-block:var(--setting-section-title-padding-block, .5rem);border-bottom:var(--setting-section-title-border-bottom, 1px solid #f0f0f0);background:var(--setting-section-title-background, transparent);color:var(--setting-section-title-color, #2f258a)}.notifications-settings__section__content{padding-block:var(--setting-section-content-padding-block, 1rem 0);display:var(--setting-section-content-display, grid);grid-template-columns:var(--setting-section-content-columns, repeat(auto-fit, minmax(490px, 1fr)));grid-gap:var(--setting-section-content-gap, 1rem);gap:var(--setting-section-content-gap, 1rem)}.notifications-settings__group{display:var(--setting-group-display, grid);grid-template-columns:var(--setting-group-columns, auto 1fr);background:var(--setting-group-background, transparent);padding:var(--setting-group-padding, .2rem 0);grid-gap:var(--setting-group-gap, .1rem 1rem);gap:var(--setting-group-gap, .1rem 1rem)}.notifications-settings__group__toggle{order:var(--setting-toggle-order)}.notifications-settings__group__toggle.is-loading{--loading-color: var(--setting-toggle-loader-color, #9189dd36);opacity:.5}.notifications-settings__group__toggle.is-loading ::ng-deep{pointer-events:none}.notifications-settings__group__toggle.is-loading ::ng-deep .mat-slide-toggle-thumb{animation:animateLoader 1.5s linear infinite}.notifications-settings__group__toggle.is-loading ::ng-deep label{margin-bottom:0}.notifications-settings__group__description{color:var(--setting-option-description-color, #666);font-size:var(--setting-option-description-size, .8rem);grid-column:var(--setting-option-description-column, 2)}@keyframes animateLoader{0%{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}50%{box-shadow:0 0 0 1px var(--loading-color),0 0 0 3px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 5px var(--loading-color),0 0 0 6px var(--loading-color)}to{box-shadow:0 0 0 2px var(--loading-color),0 0 0 4px var(--loading-color),0 0 0 6px var(--loading-color),0 0 0 8px var(--loading-color)}}\n"], components: [{ type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "keyvalue": i4$1.KeyValuePipe, "translate": i1.TranslatePipe, "checkIfSubscribed": CheckIfSubscribedPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsSettingsComponent, decorators: [{
             type: Component,
             args: [{
@@ -38775,7 +39057,7 @@ class NotificationsSettingsContainerComponent extends BaseNotification {
     }
 }
 NotificationsSettingsContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsSettingsContainerComponent, deps: [{ token: i0.Injector }, { token: TranslationService }, { token: i1$1.ToastrService }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NotificationsSettingsContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsSettingsContainerComponent, selector: "app-notifications-settings-container", outputs: { onSubscribe: "onSubscribe", onUnsubscribe: "onUnsubscribe" }, usesInheritance: true, ngImport: i0, template: "<div class=\"notifications-settings\">\r\n  <nav\r\n    mat-tab-nav-bar\r\n    *ngIf=\"channels$ | async as channels\"\r\n    class=\"notifications-settings__links\"\r\n  >\r\n    <a\r\n      *ngFor=\"let channel of channels\"\r\n      mat-tab-link\r\n      (click)=\"selectChannel(channel)\"\r\n      [active]=\"selectedChannel?.id == channel.id\"\r\n      class=\"notifications-settings__link\"\r\n    >\r\n      {{\r\n        'vocabulary.VOC_Notf_NotificationChannels.' + channel.properties.label | translate\r\n      }}\r\n    </a>\r\n  </nav>\r\n\r\n  <app-notifications-settings\r\n    *ngIf=\"selectedChannel\"\r\n    [channel]=\"selectedChannel\"\r\n    (onSubscribe)=\"onSubscribe.emit($event)\"\r\n    (onUnsubscribe)=\"onUnsubscribe.emit($event)\"\r\n  ></app-notifications-settings>\r\n\r\n  <div class=\"notifications-reset\">\r\n    <h6 class=\"notifications-reset__title\">\r\n      <mat-icon> restore </mat-icon>\r\n      <strong>{{ 'notifications.resetToDefault.title' | translate }}</strong>\r\n    </h6>\r\n    <span class=\"notifications-reset__container\">\r\n      <p class=\"notifications-reset__description\">\r\n        {{ 'notifications.resetToDefault.description' | translate }}\r\n      </p>\r\n      <button\r\n        mat-stroked-button\r\n        class=\"notifications-reset__button\"\r\n        (click)=\"resetSubscriptions()\"\r\n      >\r\n        <span class=\"px-4\"> {{ 'notifications.resetToDefault.reset' | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </div>\r\n</div>\r\n", styles: [".notifications-settings{--setting-color: var(--settings-main-color, #2f258a)}.notifications-settings__links{background:var(--set-links-background, transparent);border:var(--set-links-border, solid rgba(0, 0, 0, .12));border-width:var(--set-links-border-width, 0 0 1px 0)}.notifications-settings ::ng-deep .mat-ink-bar{height:var(--mat-ink-bar-height, 2px);display:var(--mat-ink-bar-display, unset);background-color:var(--mat-ink-bar-background, var(--setting-color))!important}.notifications-settings__link{background:var(--set-link-background, transparent);color:var(--set-link-color, rgba(0, 0, 0, .87));border-radius:var(--set-link-radius, 6px);opacity:1}.notifications-settings__link:hover{--set-link-color: var( --set-link-hover-color, var(--setting-color) );--set-link-background: var( --set-link-hover-background, rgba(221, 221, 221, .301) )}.notifications-settings__link.mat-tab-label-active{--set-link-color: var( --set-link-active-color, var(--setting-color) );--set-link-background: var(--set-link-active-background, transparent)}.notifications-reset{--border: var(--setting-section-border, 1px solid #f0f0f0);border:var(--border);border-radius:var(--setting-section-radius, 6px);padding:var(--settings-section-padding, 1rem)}.notifications-reset__title{color:var(--setting-section-title-color, var(--setting-color));display:flex;align-items:center;border-bottom:var(--border);grid-gap:.5rem;gap:.5rem;padding-bottom:1rem}.notifications-reset__container{padding-block:1rem;display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center}\n"], components: [{ type: i1$c.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { type: NotificationsSettingsComponent, selector: "app-notifications-settings", inputs: ["channel"], outputs: ["onSubscribe", "onUnsubscribe"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$c.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationsSettingsContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NotificationsSettingsContainerComponent, selector: "app-notifications-settings-container", outputs: { onSubscribe: "onSubscribe", onUnsubscribe: "onUnsubscribe" }, usesInheritance: true, ngImport: i0, template: "<div class=\"notifications-settings\">\r\n  <nav\r\n    mat-tab-nav-bar\r\n    *ngIf=\"channels$ | async as channels\"\r\n    class=\"notifications-settings__links\"\r\n  >\r\n    <a\r\n      *ngFor=\"let channel of channels\"\r\n      mat-tab-link\r\n      (click)=\"selectChannel(channel)\"\r\n      [active]=\"selectedChannel?.id == channel.id\"\r\n      class=\"notifications-settings__link\"\r\n    >\r\n      {{\r\n        'vocabulary.VOC_Notf_NotificationChannels.' + channel.properties.label | translate\r\n      }}\r\n    </a>\r\n  </nav>\r\n\r\n  <app-notifications-settings\r\n    *ngIf=\"selectedChannel\"\r\n    [channel]=\"selectedChannel\"\r\n    (onSubscribe)=\"onSubscribe.emit($event)\"\r\n    (onUnsubscribe)=\"onUnsubscribe.emit($event)\"\r\n  ></app-notifications-settings>\r\n\r\n  <div class=\"notifications-reset\">\r\n    <h6 class=\"notifications-reset__title\">\r\n      <mat-icon> restore </mat-icon>\r\n      <strong>{{ 'notifications.resetToDefault.title' | translate }}</strong>\r\n    </h6>\r\n    <span class=\"notifications-reset__container\">\r\n      <p class=\"notifications-reset__description\">\r\n        {{ 'notifications.resetToDefault.description' | translate }}\r\n      </p>\r\n      <button\r\n        mat-stroked-button\r\n        class=\"notifications-reset__button\"\r\n        (click)=\"resetSubscriptions()\"\r\n      >\r\n        <span class=\"px-4\"> {{ 'notifications.resetToDefault.reset' | translate }}</span>\r\n      </button>\r\n    </span>\r\n  </div>\r\n</div>\r\n", styles: [".notifications-settings{--setting-color: var(--settings-main-color, #2f258a)}.notifications-settings__links{background:var(--set-links-background, transparent);border:var(--set-links-border, solid rgba(0, 0, 0, .12));border-width:var(--set-links-border-width, 0 0 1px 0)}.notifications-settings ::ng-deep .mat-ink-bar{height:var(--mat-ink-bar-height, 2px);display:var(--mat-ink-bar-display, unset);background-color:var(--mat-ink-bar-background, var(--setting-color))!important}.notifications-settings__link{background:var(--set-link-background, transparent);color:var(--set-link-color, rgba(0, 0, 0, .87));border-radius:var(--set-link-radius, 6px);opacity:1}.notifications-settings__link:hover{--set-link-color: var( --set-link-hover-color, var(--setting-color) );--set-link-background: var( --set-link-hover-background, rgba(221, 221, 221, .301) )}.notifications-settings__link.mat-tab-label-active{--set-link-color: var( --set-link-active-color, var(--setting-color) );--set-link-background: var(--set-link-active-background, transparent)}.notifications-reset{--border: var(--setting-section-border, 1px solid #f0f0f0);border:var(--border);border-radius:var(--setting-section-radius, 6px);padding:var(--settings-section-padding, 1rem)}.notifications-reset__title{color:var(--setting-section-title-color, var(--setting-color));display:flex;align-items:center;border-bottom:var(--border);grid-gap:.5rem;gap:.5rem;padding-bottom:1rem}.notifications-reset__container{padding-block:1rem;display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center}\n"], components: [{ type: i1$d.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { type: NotificationsSettingsComponent, selector: "app-notifications-settings", inputs: ["channel"], outputs: ["onSubscribe", "onUnsubscribe"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$d.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NotificationsSettingsContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -40858,6 +41140,20 @@ class ChartDataTransformers {
     registerGraphTransformer(key, Transformer) {
         this.graphTransformers.set(key, Transformer);
     }
+    /**
+     * Gets all registered graph Transformers
+     * @returns A map of all registered graph Transformers
+     */
+    getGraphTransformers() {
+        return this.graphTransformers;
+    }
+    /**
+     * Gets all registered digits Transformers
+     * @returns A map of all registered digits Transformers
+     */
+    getDigitsTransformers() {
+        return this.digitsTransformers;
+    }
     /**
      * Gets a graph Transformer function by its key
      * @param key The unique identifier for the Transformer
@@ -41084,6 +41380,14 @@ class ChartPluginsRegistry {
             this._plugins.set(key, plugin);
         }
     }
+    /**
+     * Returns all registered chart plugins as a read-only map.
+     *
+     * @returns {ReadonlyMap<string, Plugin<ChartType>>} A map of plugin keys to plugin instances.
+     */
+    getAll() {
+        return this._plugins;
+    }
     /**
      * Check if a plugin exists with the given key
      * @param key The plugin key to check
@@ -42113,6 +42417,8 @@ class NdfReportsComponent extends DestroySubject {
         this._reportDetailsSubject = new BehaviorSubject(null);
         this.reportDetails$ = this._reportDetailsSubject.asObservable();
         this.isDetailsOpened = false;
+        this.jsonEditorEnabled = false;
+        this.editorType = NDF_EDITOR_TYPE.REPORTS;
         this.navigateRoute = [];
         this.onQueryChange = new EventEmitter();
         this.trackByFn = (_, report) => {
@@ -42277,7 +42583,7 @@ class NdfReportsComponent extends DestroySubject {
     }
 }
 NdfReportsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfReportsComponent, deps: [{ token: i1.TranslateService }, { token: FiltersMapperService }, { token: NdfReportsService }, { token: ChartManagerService }, { token: ReportTransformService }, { token: i0.ChangeDetectorRef }, { token: FilterQueryService }, { token: ReportsStateService }, { token: i1$5.Router }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-NdfReportsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportsComponent, selector: "app-ndf-reports", inputs: { navigateRoute: "navigateRoute", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n\t*ngIf=\"reportsData$ | async as reports\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tclass=\"ndf-reports__container\"\r\n\tndfFluidHeight\r\n>\r\n\t<div class=\"ndf-reports__panel\" *ngIf=\"!!filtersConfig?.fields?.length\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig?.fields\"\r\n\t\t\t[aggregations]=\"reports?.response?.aggregations\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\tclass=\"ndf-reports__filters\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\r\n\t<div class=\"ndf-reports__content p-4 pt-0\" (scrolled)=\"onContentScroll($event)\">\r\n\t\t<div class=\"ndf-reports__header flex pt-4\">\r\n\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n\r\n\t\t<div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n\t\t\t<app-ndf-report\r\n\t\t\t\t*ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n\t\t\t\t[config]=\"config\"\r\n\t\t\t\t[data]=\"reports?.response\"\r\n\t\t\t\t[criteria]=\"filtersParams$ | async\"\r\n\t\t\t\t[class.col-small]=\"config?.layout?.width === 'small'\"\r\n\t\t\t\t[class.col-medium]=\"config?.layout?.width === 'medium'\"\r\n\t\t\t\t[class.col-half]=\"config?.layout?.width === 'half'\"\r\n\t\t\t\t[class.col-wide]=\"config?.layout?.width === 'wide'\"\r\n\t\t\t\t[class.col-extra-wide]=\"config?.layout?.width === 'extra'\"\r\n\t\t\t\t[class.col-full]=\"config?.layout?.width === 'full'\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\tclass=\"reports-grid__item {{ config?.layout?.styleClass }}\"\r\n\t\t\t\t(onNavigate)=\"onNavigate($event)\"\r\n\t\t\t\t(onOpen)=\"openReportDetails($event, config)\"\r\n\t\t\t></app-ndf-report>\r\n\t\t</div>\r\n\t</div>\r\n\t<div\r\n\t\tclass=\"ndf-reports__details\"\r\n\t\t[class.opened]=\"showDetails\"\r\n\t\t[@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n\t\t(@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n\t>\r\n\t\t<app-ndf-table\r\n\t\t\t*ngIf=\"reportDetails$ | async as report\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\t[customCriteria]=\"filtersParams$ | async\"\r\n\t\t>\r\n\t\t\t<ng-template searchTableTemplate>\r\n\t\t\t\t<div class=\"ndf-reports__details__header flex gap-2\">\r\n\t\t\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-stroked-button class=\"close-button\" (click)=\"closeDetailsPanel()\">\r\n\t\t\t\t\t\t<mat-icon> close</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t{{ report.label | translate }}\r\n\t\t\t\t</h3>\r\n\t\t\t</ng-template>\r\n\t\t</app-ndf-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-reports-inline-padding, 0);padding-block:var(--ndf-reports-block-padding, .5rem 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-reports-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host:before,:host:after{box-sizing:border-box}:host[dir=ltr]{--ndf-reports-panel-translateX: -100%;--ndf-reports-details-translateX: 100%}.ndf-reports__header{background-color:var(--ndf-reports-background, #fff);flex-direction:var(--ndf-reports-header-direction, row);justify-content:var(--ndf-reports-header-justify, space-between);align-items:var(--ndf-reports-header-items, center);padding-inline:var(--ndf-reports-header-padding-inline, .5rem);padding-block:var(--ndf-reports-header-padding-block, 0 .5rem);position:var(--ndf-reports-header-position, sticky);top:0;z-index:1}.ndf-reports__header__actions{justify-content:var(--ndf-reports-actions-justify, flex-end)}.ndf-reports__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-reports__container{--panel-width: var(--ndf-reports-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-reports-height, calc(var(--ndf-table-height) - calc(var(--ndf-reports-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-reports__container.panel-opened{--ndf-details-margin: var(--panel-width);--ndf-reports-panel-translateX: 0;--ndf-reports-content-margin: var(--panel-width)}.ndf-reports__panel,.ndf-reports__content .ndf-reports__details{overflow:auto;transition:all .2s}.ndf-reports__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-reports-panel-translateX, 100%));padding-inline:var(--ndf-reports-panel-inline-padding, .5rem);padding-block:var(--ndf-reports-panel-block-padding, .5rem);background:var(--ndf-reports-panel-background, #fff);z-index:1}.ndf-reports__content{flex-grow:1;padding-inline-start:var(--ndf-reports-content-margin, 0);overflow-y:var(--ndf-reports-content-overflow-y, auto);position:relative}.ndf-reports__details{position:absolute;inset-inline-end:0;width:calc(100% - var(--ndf-details-margin, 0px));height:100%;transform:translate(var(--ndf-reports-details-translateX, -100%));padding-inline:var(--ndf-reports-details-inline-padding, 0rem);flex-grow:1;padding-block:var(--ndf-reports-details-block-padding, 0rem);background:var(--ndf-reports-details-background, #fff);z-index:1;transition:all .2s}.reports-grid{--grid-columns: 6;--column-width: calc(100% / var(--grid-columns));display:grid;grid-gap:var(--reports-grid-gap, 1.5rem);gap:var(--reports-grid-gap, 1.5rem);grid-template-columns:var(--rg-columns, repeat(var(--grid-columns), 1fr));margin-block:var(--reports-grid-margin-block, 1.25rem 0);padding-inline:var(--reports-grid-padding-inline, .5rem)}.reports-grid__item{display:grid;grid-gap:.3rem;gap:.3rem;min-width:0;text-align:center;vertical-align:middle}@media screen{.reports-grid__item{grid-column:var(--col-span, span var(--grid-column, 2));grid-row:span var(--row-span, 1);grid-template-rows:subgrid}}.reports-grid__item.col-small{--col-span: var(--col-small-span, span 1)}.reports-grid__item.col-medium{--col-span: var(--col-medium-span, span 2)}.reports-grid__item.col-half{--col-span: var(--col-half-span, span 3)}.reports-grid__item.col-wide{--col-span: var(--col-wide-span, span 4)}.reports-grid__item.col-extra-wide{--col-span: var(--col-extra-wide-span, span 5)}.reports-grid__item.col-full{--col-span: 1 / -1}@media screen and (max-width: 1200px){.reports-grid{--col-span: span 1;--col-half-span: var(--col-span);--col-medium-span: var(--col-span);--col-small-span: var(--col-span);--col-extra-wide-span: 1 / -1;--col-wide-span: 1 / -1;--reports-grid-gap: 1rem;--grid-columns: 2}}@media screen and (max-width: 776px){.reports-grid{--col-half-span: var(--col-span);--col-medium-span: var(--col-span);--col-small-span: var(--col-span);--col-span: 1 / -1;--reports-grid-gap: 1rem;--grid-columns: 1}}@media print{.reports-grid{--reports-grid-gap: 11mm;--reports-grid-margin-top: 11mm;--rg-columns: repeat(2, 1fr)}}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1$b.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NdfReportComponent, selector: "app-ndf-report", inputs: ["config", "direction", "data", "criteria"], outputs: ["onNavigate", "onOpen"] }, { type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "configTransformer", "tableKey", "config", "customCriteria", "searchTerm"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "onPage", "onInitialized", "onLoaded", "onQueryChange", "onSort"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: ScrollableDivDirective, selector: "[scrolled]", inputs: ["scrollTop"], outputs: ["scrolled"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: SearchTableTemplateDirective, selector: "[searchTableTemplate]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, animations: [slideAnimation] });
+NdfReportsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportsComponent, selector: "app-ndf-reports", inputs: { jsonEditorEnabled: "jsonEditorEnabled", reportsKey: "reportsKey", navigateRoute: "navigateRoute", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n\t*ngIf=\"reportsData$ | async as reports\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tclass=\"ndf-reports__container\"\r\n\tndfFluidHeight\r\n>\r\n\t<div class=\"ndf-reports__panel\" *ngIf=\"!!filtersConfig?.fields?.length\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig?.fields\"\r\n\t\t\t[aggregations]=\"reports?.response?.aggregations\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\tclass=\"ndf-reports__filters\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\r\n\t<div class=\"ndf-reports__content p-4 pt-0\" (scrolled)=\"onContentScroll($event)\">\r\n\t\t<div class=\"ndf-reports__header flex pt-4\">\r\n\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<app-editor-button\r\n\t\t\t\t*ngIf=\"jsonEditorEnabled && reportsKey\"\r\n\t\t\t\t[key]=\"reportsKey\"\r\n\t\t\t\t[type]=\"editorType\"\r\n\t\t\t></app-editor-button>\r\n\t\t</div>\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n\r\n\t\t<div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n\t\t\t<app-ndf-report\r\n\t\t\t\t*ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n\t\t\t\t[config]=\"config\"\r\n\t\t\t\t[data]=\"reports?.response\"\r\n\t\t\t\t[criteria]=\"filtersParams$ | async\"\r\n\t\t\t\t[class.col-small]=\"config?.layout?.width === 'small'\"\r\n\t\t\t\t[class.col-medium]=\"config?.layout?.width === 'medium'\"\r\n\t\t\t\t[class.col-half]=\"config?.layout?.width === 'half'\"\r\n\t\t\t\t[class.col-wide]=\"config?.layout?.width === 'wide'\"\r\n\t\t\t\t[class.col-extra-wide]=\"config?.layout?.width === 'extra'\"\r\n\t\t\t\t[class.col-full]=\"config?.layout?.width === 'full'\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\tclass=\"reports-grid__item {{ config?.layout?.styleClass }}\"\r\n\t\t\t\t(onNavigate)=\"onNavigate($event)\"\r\n\t\t\t\t(onOpen)=\"openReportDetails($event, config)\"\r\n\t\t\t></app-ndf-report>\r\n\t\t</div>\r\n\t</div>\r\n\t<div\r\n\t\tclass=\"ndf-reports__details\"\r\n\t\t[class.opened]=\"showDetails\"\r\n\t\t[@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n\t\t(@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n\t>\r\n\t\t<app-ndf-table\r\n\t\t\t*ngIf=\"reportDetails$ | async as report\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\t[customCriteria]=\"filtersParams$ | async\"\r\n\t\t>\r\n\t\t\t<ng-template searchTableTemplate>\r\n\t\t\t\t<div class=\"ndf-reports__details__header flex gap-2\">\r\n\t\t\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-stroked-button class=\"close-button\" (click)=\"closeDetailsPanel()\">\r\n\t\t\t\t\t\t<mat-icon> close</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t{{ report.label | translate }}\r\n\t\t\t\t</h3>\r\n\t\t\t</ng-template>\r\n\t\t</app-ndf-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-reports-inline-padding, 0);padding-block:var(--ndf-reports-block-padding, .5rem 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-reports-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host:before,:host:after{box-sizing:border-box}:host[dir=ltr]{--ndf-reports-panel-translateX: -100%;--ndf-reports-details-translateX: 100%}.ndf-reports__header{background-color:var(--ndf-reports-background, #fff);flex-direction:var(--ndf-reports-header-direction, row);justify-content:var(--ndf-reports-header-justify, space-between);align-items:var(--ndf-reports-header-items, center);padding-inline:var(--ndf-reports-header-padding-inline, .5rem);padding-block:var(--ndf-reports-header-padding-block, 0 .5rem);position:var(--ndf-reports-header-position, sticky);top:0;z-index:1}.ndf-reports__header__actions{justify-content:var(--ndf-reports-actions-justify, flex-end)}.ndf-reports__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-reports__container{--panel-width: var(--ndf-reports-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-reports-height, calc(var(--ndf-fluid-height) - calc(var(--ndf-reports-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-reports__container.panel-opened{--ndf-details-margin: var(--panel-width);--ndf-reports-panel-translateX: 0;--ndf-reports-content-margin: var(--panel-width)}.ndf-reports__panel,.ndf-reports__content .ndf-reports__details{overflow:auto;transition:all .2s}.ndf-reports__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-reports-panel-translateX, 100%));padding-inline:var(--ndf-reports-panel-inline-padding, .5rem);padding-block:var(--ndf-reports-panel-block-padding, .5rem);background:var(--ndf-reports-panel-background, #fff);z-index:1}.ndf-reports__content{flex-grow:1;padding-inline-start:var(--ndf-reports-content-margin, 0);overflow-y:var(--ndf-reports-content-overflow-y, auto);position:relative}.ndf-reports__details{position:absolute;inset-inline-end:0;width:calc(100% - var(--ndf-details-margin, 0px));height:100%;transform:translate(var(--ndf-reports-details-translateX, -100%));padding-inline:var(--ndf-reports-details-inline-padding, 0rem);flex-grow:1;padding-block:var(--ndf-reports-details-block-padding, 0rem);background:var(--ndf-reports-details-background, #fff);z-index:1;transition:all .2s}.reports-grid{--grid-columns: 6;--column-width: calc(100% / var(--grid-columns));display:grid;grid-gap:var(--reports-grid-gap, 1.5rem);gap:var(--reports-grid-gap, 1.5rem);grid-template-columns:var(--rg-columns, repeat(var(--grid-columns), 1fr));margin-block:var(--reports-grid-margin-block, 1.25rem 0);padding-inline:var(--reports-grid-padding-inline, .5rem)}.reports-grid__item{display:grid;grid-gap:.3rem;gap:.3rem;min-width:0;text-align:center;vertical-align:middle}@media screen{.reports-grid__item{grid-column:var(--col-span, span var(--grid-column, 2));grid-row:span var(--row-span, 1);grid-template-rows:subgrid}}.reports-grid__item.col-small{--col-span: var(--col-small-span, span 1)}.reports-grid__item.col-medium{--col-span: var(--col-medium-span, span 2)}.reports-grid__item.col-half{--col-span: var(--col-half-span, span 3)}.reports-grid__item.col-wide{--col-span: var(--col-wide-span, span 4)}.reports-grid__item.col-extra-wide{--col-span: var(--col-extra-wide-span, span 5)}.reports-grid__item.col-full{--col-span: 1 / -1}@media screen and (max-width: 1200px){.reports-grid{--col-span: span 1;--col-half-span: var(--col-span);--col-medium-span: var(--col-span);--col-small-span: var(--col-span);--col-extra-wide-span: 1 / -1;--col-wide-span: 1 / -1;--reports-grid-gap: 1rem;--grid-columns: 2}}@media screen and (max-width: 776px){.reports-grid{--col-half-span: var(--col-span);--col-medium-span: var(--col-span);--col-small-span: var(--col-span);--col-span: 1 / -1;--reports-grid-gap: 1rem;--grid-columns: 1}}@media print{.reports-grid{--reports-grid-gap: 11mm;--reports-grid-margin-top: 11mm;--rg-columns: repeat(2, 1fr)}}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: i3$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NdfReportComponent, selector: "app-ndf-report", inputs: ["config", "direction", "data", "criteria"], outputs: ["onNavigate", "onOpen"] }, { type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "configTransformer", "tableKey", "jsonEditorEnabled", "config", "customCriteria", "searchTerm"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "onPage", "onInitialized", "onLoaded", "onQueryChange", "onSort"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: ScrollableDivDirective, selector: "[scrolled]", inputs: ["scrollTop"], outputs: ["scrolled"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: SearchTableTemplateDirective, selector: "[searchTableTemplate]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1.TranslatePipe }, animations: [slideAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfReportsComponent, decorators: [{
             type: Component,
             args: [{
@@ -42293,6 +42599,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: FiltersMapperService }, { type: NdfReportsService }, { type: ChartManagerService }, { type: ReportTransformService }, { type: i0.ChangeDetectorRef }, { type: FilterQueryService }, { type: ReportsStateService }, { type: i1$5.Router }, { type: i0.NgZone }]; }, propDecorators: { fluidDirective: [{
                 type: ViewChild,
                 args: [FluidHeightDirective]
+            }], jsonEditorEnabled: [{
+                type: Input
+            }], reportsKey: [{
+                type: Input
             }], navigateRoute: [{
                 type: Input
             }], config: [{
@@ -42338,7 +42648,9 @@ NdfReportsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         FiltersPanelModule,
         MatProgressSpinnerModule,
         NuxeoDialogModule,
-        NdfTableModule], exports: [NdfReportsComponent, NdfReportComponent] });
+        NdfTableModule,
+        DirectiveModule,
+        EditorNavigateButton], exports: [NdfReportsComponent, NdfReportComponent] });
 NdfReportsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfReportsModule, imports: [[
             CommonModule,
             TranslateModule,
@@ -42355,7 +42667,9 @@ NdfReportsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             FiltersPanelModule,
             MatProgressSpinnerModule,
             NuxeoDialogModule,
-            NdfTableModule
+            NdfTableModule,
+            DirectiveModule,
+            EditorNavigateButton
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfReportsModule, decorators: [{
             type: NgModule,
@@ -42377,12 +42691,2053 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         FiltersPanelModule,
                         MatProgressSpinnerModule,
                         NuxeoDialogModule,
-                        NdfTableModule
+                        NdfTableModule,
+                        DirectiveModule,
+                        EditorNavigateButton
                     ],
                     exports: [CONTAINERS]
                 }]
         }] });
 
+const TABLE_DATA = {
+    options: {
+        columns: {
+            toggle: true,
+            sortable: {
+                enabled: true,
+            },
+        },
+        filters: {
+            mode: 'payload',
+            reload: {
+                strategy: 'always',
+            },
+            panel: {
+                visible: true,
+                toggleButton: true,
+            },
+            fields: [
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.recDefintionSystemName',
+                        aggregation: 'RecordDefinition_systemName_agg',
+                        fieldKey: 'recdef:systemName',
+                        dataTransformer: 'system',
+                        order: 0,
+                        sendMode: 'queryParam',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.gdocCategoryHierarchyCode',
+                        aggregation: 'generaldocument_categoryHierarchyCode_agg',
+                        fieldKey: 'gdoc:categoryHierarchyCode',
+                        dataTransformer: 'subject',
+                        order: 0,
+                        sendMode: 'queryParam',
+                        valueType: 'property',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.gdocCategoryHierarchyCode1',
+                        aggregation: 'generaldocument_categoryHierarchyCode_1_agg',
+                        fieldKey: 'gdoc:categoryHierarchyCode__1',
+                        order: 0,
+                        sendMode: 'queryParam',
+                        valueType: 'property',
+                        dataTransformer: 'subject',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                                collapse: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.gdocDocumentTypeCode',
+                        aggregation: 'generaldocument_documentTypeCode_agg',
+                        fieldKey: 'gdoc:documentTypeCode',
+                        dataTransformer: 'documentTypee',
+                        sendMode: 'queryParam',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                                filter: true,
+                                sort: true,
+                                collapse: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'predicate',
+                    config: {
+                        label: 'FILTERS.gdocDocumentSubject',
+                        fieldKey: 'gdoc:documentSubject',
+                        sendMode: 'payload',
+                        valueType: 'valueObject',
+                        render: {
+                            type: 'input',
+                            options: {
+                                delay: 300,
+                                suffix: {
+                                    dropdown: {
+                                        items: [
+                                            {
+                                                key: 'OPERATORS.equals',
+                                                value: '=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.notEquals',
+                                                value: '!=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.like',
+                                                value: 'LIKE',
+                                            },
+                                            {
+                                                key: 'OPERATORS.iLike',
+                                                value: 'ILIKE',
+                                            },
+                                        ],
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'predicate',
+                    config: {
+                        label: 'FILTERS.dcTitle',
+                        fieldKey: 'dc:title',
+                        sendMode: 'payload',
+                        valueType: 'valueObject',
+                        render: {
+                            type: 'input',
+                            options: {
+                                delay: 300,
+                                suffix: {
+                                    dropdown: {
+                                        items: [
+                                            {
+                                                key: 'OPERATORS.equals',
+                                                value: '=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.notEquals',
+                                                value: '!=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.like',
+                                                value: 'LIKE',
+                                            },
+                                            {
+                                                key: 'OPERATORS.iLike',
+                                                value: 'ILIKE',
+                                            },
+                                        ],
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'predicate',
+                    config: {
+                        label: 'FILTERS.documentNumber',
+                        fieldKey: 'gdoc:documentReferenceNumber',
+                        sendMode: 'payload',
+                        valueType: 'valueObject',
+                        render: {
+                            type: 'input',
+                            options: {
+                                debounceTime: 300,
+                                suffix: {
+                                    dropdown: {
+                                        items: [
+                                            {
+                                                key: 'OPERATORS.equals',
+                                                value: '=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.notEquals',
+                                                value: '!=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.like',
+                                                value: 'LIKE',
+                                            },
+                                            {
+                                                key: 'OPERATORS.iLike',
+                                                value: 'ILIKE',
+                                            },
+                                        ],
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'predicate',
+                    config: {
+                        label: 'FILTERS.recUnifiedNumber',
+                        fieldKey: 'recdef:unifiedNumber',
+                        sendMode: 'payload',
+                        valueType: 'valueObject',
+                        render: {
+                            type: 'input',
+                            options: {
+                                delay: 300,
+                                suffix: {
+                                    dropdown: {
+                                        items: [
+                                            {
+                                                key: 'OPERATORS.equals',
+                                                value: '=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.notEquals',
+                                                value: '!=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.like',
+                                                value: 'LIKE',
+                                            },
+                                            {
+                                                key: 'OPERATORS.iLike',
+                                                value: 'ILIKE',
+                                            },
+                                        ],
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'FILTERS.recPhysicalOriginal',
+                        aggregation: 'RecordDefinition_physicalOriginal_agg',
+                        fieldKey: 'recdef:physicalOriginal',
+                        prefix: 'FILTERS.BUCKETS.physicalOriginal.',
+                        sendMode: 'queryParam',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.gdocSecrecyLevel',
+                        aggregation: 'generaldocument_secrecyLevel_agg',
+                        fieldKey: 'gdoc:secrecyLevel',
+                        prefix: 'search.buckets.',
+                        sendMode: 'queryParam',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'predicate',
+                    config: {
+                        label: 'FILTERS.tags',
+                        fieldKey: 'ecm:tag',
+                        sendMode: 'payload',
+                        valueType: 'valueObject',
+                        render: {
+                            type: 'input',
+                            options: {
+                                delay: 300,
+                                suffix: {
+                                    dropdown: {
+                                        items: [
+                                            {
+                                                key: 'OPERATORS.equals',
+                                                value: '=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.notEquals',
+                                                value: '!=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.like',
+                                                value: 'LIKE',
+                                            },
+                                            {
+                                                key: 'OPERATORS.iLike',
+                                                value: 'ILIKE',
+                                            },
+                                        ],
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'FILTERS.priority',
+                        aggregation: 'generaldocument_importance_agg',
+                        fieldKey: 'gdoc:importance',
+                        prefix: 'search.buckets.',
+                        sendMode: 'queryParam',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'FILTERS.dcCreated',
+                        aggregation: 'dublincore_created_agg',
+                        fieldKey: 'dc:created',
+                        prefix: 'search.buckets.',
+                        sendMode: 'queryParam',
+                        tooltip: {
+                            type: 'date',
+                            properties: {
+                                from: 'from',
+                                to: 'to',
+                            },
+                        },
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.gdocGDocumentDate',
+                        aggregation: 'generaldocument_gDocumentDate_agg',
+                        fieldKey: 'gdoc:gDocumentDate',
+                        prefix: 'search.buckets.',
+                        sendMode: 'custom',
+                        valueType: 'valueObject',
+                        render: {
+                            type: 'dateList',
+                            view: 'list',
+                            options: {
+                                showTotal: true,
+                                minMax: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.saveTypee',
+                        aggregation: 'RetentionInfo_saveTypee_agg',
+                        fieldKey: 'retentioninfo:saveTypee',
+                        prefix: 'FILTERS.BUCKETS.physicalOriginal.',
+                        sendMode: 'queryParam',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.retentionPlan',
+                        aggregation: 'RetentionInfo_status_agg',
+                        fieldKey: 'retentioninfo:status',
+                        prefix: 'FILTERS.BUCKETS.physicalOriginal.',
+                        sendMode: 'queryParam',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'FILTERS.startDateActiveRetention',
+                        aggregation: 'RetentionInfo_activeRetentionStartDateHijri_agg',
+                        fieldKey: 'retentioninfo:activeRetentionStartDateHijri',
+                        prefix: 'search.buckets.',
+                        sendMode: 'queryParam',
+                        permission: 'hasRoleOnArchiveOrLoan',
+                        tooltip: {
+                            type: 'date',
+                            properties: {
+                                from: 'from',
+                                to: 'to',
+                            },
+                        },
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'FILTERS.endDateActiveRetention',
+                        aggregation: 'RetentionInfo_activeRetentionEndDateHijri_agg',
+                        fieldKey: 'retentioninfo:activeRetentionEndDateHijri',
+                        prefix: 'search.buckets.',
+                        sendMode: 'queryParam',
+                        permission: 'hasRoleOnArchiveOrLoan',
+                        tooltip: {
+                            type: 'date',
+                            properties: {
+                                from: 'from',
+                                to: 'to',
+                            },
+                        },
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'FILTERS.endDateRetention',
+                        aggregation: 'RetentionInfo_retentionEndDateHijri_agg',
+                        fieldKey: 'retentioninfo:retentionEndDateHijri',
+                        prefix: 'search.buckets.',
+                        sendMode: 'queryParam',
+                        permission: 'hasRoleOnArchiveOrLoan',
+                        tooltip: {
+                            type: 'date',
+                            properties: {
+                                from: 'from',
+                                to: 'to',
+                            },
+                        },
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.locationReference_site_agg',
+                        aggregation: 'LocationReferenceSchema_site_agg',
+                        permission: 'hasRoleOnArchiveOrLoan',
+                        fieldKey: 'locRef:site',
+                        order: 0,
+                        sendMode: 'queryParam',
+                        valueType: 'property',
+                        dataTransformer: 'site',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'aggregation',
+                    config: {
+                        label: 'rmAdvancedSearch.locationReference_store_agg',
+                        aggregation: 'LocationReferenceSchema_store_agg',
+                        fieldKey: 'locRef:store',
+                        permission: 'hasRoleOnArchiveOrLoan',
+                        order: 0,
+                        sendMode: 'queryParam',
+                        valueType: 'property',
+                        dataTransformer: 'store',
+                        render: {
+                            type: 'checkbox',
+                            options: {
+                                showTotal: true,
+                            },
+                        },
+                    },
+                },
+                {
+                    type: 'predicate',
+                    config: {
+                        label: 'rmAdvancedSearch.locationReference_box',
+                        fieldKey: 'locRef:boxCode',
+                        permission: 'hasRoleOnArchiveOrLoan',
+                        sendMode: 'payload',
+                        valueType: 'valueObject',
+                        render: {
+                            type: 'input',
+                            options: {
+                                debounceTime: 400,
+                                mask: {
+                                    mask: '00-00-00-00-000',
+                                    dropSpecialCharacters: false,
+                                    showMaskTyped: true,
+                                },
+                                suffix: {
+                                    dropdown: {
+                                        items: [
+                                            {
+                                                key: 'OPERATORS.equals',
+                                                value: '=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.notEquals',
+                                                value: '!=',
+                                            },
+                                            {
+                                                key: 'OPERATORS.like',
+                                                value: 'LIKE',
+                                            },
+                                            {
+                                                key: 'OPERATORS.iLike',
+                                                value: 'ILIKE',
+                                            },
+                                        ],
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+        search: {
+            fieldKey: 'ecm:fulltext',
+            searchMode: 'triggered',
+            suffix: {
+                dialog: {
+                    title: 'INFO.dialogTitle',
+                    content: [
+                        '##INFO.query_sequence##',
+                        '##INFO.query_and##',
+                        '##INFO.query_negation##',
+                        '##INFO.query_prefix##',
+                        '##INFO.query_historical##',
+                        '##INFO.query_or##',
+                        '##INFO.query_phrase##',
+                    ],
+                },
+            },
+        },
+        tableMode: {
+            mode: 'list',
+            componentName: 'rms.components.advancedSearchCard',
+            toggleMode: true,
+            availableMode: [
+                {
+                    value: 'list',
+                    icon: 'table_rows',
+                },
+                {
+                    value: 'custom',
+                    icon: 'rectangle',
+                },
+            ],
+        },
+    },
+    scrollbarH: true,
+    pageNumber: 1,
+    pageSize: 10,
+    prefix: 'LISTING.',
+    pageProvider: 'PP_RM_Record',
+    customUrl: {
+        url: '/api/v1/custom-search/pp/PP_RM_Record/execute',
+        method: 'POST',
+    },
+    headers: {
+        properties: 'dublincore, file, generaldocument, RecordDefinition,RetentionInfo, LocationReferenceSchema, facetedTag',
+    },
+    quickFilters: 'After Archiving',
+    fullWidth: 'auto',
+    fields: {
+        systemName: 'recdef:systemName',
+        categoryHierarchyCode: 'gdoc:categoryHierarchyCode',
+        docTypee: 'gdoc:documentTypeCode',
+        subject: 'gdoc:documentSubject',
+        title: 'dc:title',
+        docNum: 'gdoc:documentReferenceNumber',
+        unifiedNumber: 'recdef:unifiedNumber',
+        physicalOriginal: 'recdef:physicalOriginal',
+        secrecyLevel: 'gdoc:secrecyLevel',
+        tags: 'ecm:tag',
+        importance: 'gdoc:importance',
+        created: 'dc:created',
+        gdocumentDate: 'gdoc:gDocumentDate',
+        saveTypee: 'retentioninfo:saveTypee',
+        retentioninfoStatus: 'retentioninfo:status',
+        activeRetentionStartDateHijri: 'retentioninfo:activeRetentionStartDateHijri',
+        activeRetentionEndDateHijri: 'retentioninfo:activeRetentionEndDateHijri',
+        retentionEndDateHijri: 'retentioninfo:retentionEndDateHijri',
+        site: 'locRef:site',
+        store: 'locRef:store',
+        box: 'locRef:boxCode',
+        file: 'file:content',
+    },
+    columns: [
+        {
+            name: 'systemName',
+            prop: 'properties.systemName',
+            display: true,
+            type: 'custom',
+            template: 'common.components.systemName',
+            translatePrefix: 'search.buckets',
+            isOrginalKey: true,
+            sortable: false,
+            headerClass: 'recdef:systemName',
+            defaultVisible: true,
+            minWidth: 150,
+        },
+        {
+            name: 'categoryHierarchyCode',
+            prop: 'properties.categoryHierarchyCode',
+            display: true,
+            type: 'custom',
+            template: 'rms.components.mainAndSecondaryCategory',
+            mainCategory: true,
+            sortable: true,
+            headerClass: 'gdoc:categoryHierarchyCode',
+            defaultVisible: true,
+        },
+        {
+            name: 'categoryHierarchyCode1',
+            prop: 'properties.categoryHierarchyCode',
+            display: true,
+            type: 'custom',
+            template: 'rms.components.mainAndSecondaryCategory',
+            mainCategory: false,
+            sortable: true,
+            headerClass: 'gdoc:categoryHierarchyCode',
+            defaultVisible: true,
+        },
+        {
+            name: 'Doc_Type',
+            prop: 'properties.docTypee',
+            display: true,
+            template: 'common.components.documentType',
+            type: 'custom',
+            headerClass: 'gdoc:documentTypeCode',
+            defaultVisible: true,
+        },
+        {
+            name: 'Doc_subject',
+            prop: 'properties.subject',
+            display: true,
+            type: 'text',
+            headerClass: 'gdoc:documentSubject',
+            defaultVisible: true,
+        },
+        {
+            name: 'Doc_Name',
+            prop: 'properties.title',
+            display: true,
+            type: 'custom',
+            template: 'common.components.titleWithIcon',
+            sortable: true,
+            headerClass: 'dc:title',
+            defaultVisible: false,
+        },
+        {
+            name: 'Doc_RefernceNum',
+            prop: 'properties.docNum',
+            display: true,
+            type: 'text',
+            sortable: true,
+            headerClass: 'gdoc:documentReferenceNumber',
+            defaultVisible: true,
+        },
+        {
+            name: 'unifiedNumber',
+            prop: 'properties.unifiedNumber',
+            display: true,
+            type: 'text',
+            sortable: true,
+            headerClass: 'recdef:unifiedNumber',
+            defaultVisible: true,
+        },
+        {
+            name: 'physicalOriginal',
+            prop: 'properties.physicalOriginal',
+            display: true,
+            type: 'custom',
+            template: 'rms.components.TranslatedValueColumn',
+            translatePrefix: 'rmDocumentUpload.hasPhysicalOriginal',
+            isBooleanValue: true,
+            sortable: false,
+            headerClass: 'recdef:physicalOriginal',
+            defaultVisible: false,
+            minWidth: 150,
+        },
+        {
+            name: 'secrecyLevel',
+            prop: 'properties.secrecyLevel',
+            display: true,
+            type: 'custom',
+            template: 'common.components.coloredSecrecyLevel',
+            headerClass: 'gdoc:secrecyLevel',
+            defaultVisible: true,
+            minWidth: 150,
+        },
+        {
+            name: 'tags',
+            prop: 'properties.tags',
+            display: true,
+            type: 'custom',
+            template: 'common.components.tags',
+            translatePrefix: 'search.buckets',
+            isOrginalKey: true,
+            sortable: false,
+            headerClass: 'ecm:tag',
+            defaultVisible: false,
+            minWidth: 150,
+        },
+        {
+            name: 'importance',
+            prop: 'properties.importance',
+            display: true,
+            translatePrefix: 'search.buckets',
+            type: 'custom',
+            template: 'rms.components.TranslatedValueColumn',
+            sortable: true,
+            isOrginalKey: true,
+            headerClass: 'gdoc:importance',
+            defaultVisible: false,
+        },
+        {
+            name: 'date_created',
+            prop: 'properties.created',
+            display: true,
+            type: 'custom',
+            template: 'common.components.dateWithoutTime',
+            headerClass: 'dc:created',
+            defaultVisible: false,
+            minWidth: 150,
+        },
+        {
+            name: 'docDate',
+            prop: 'properties.gdocumentDate',
+            display: true,
+            type: 'custom',
+            template: 'common.components.dateWithoutTime',
+            headerClass: 'gdoc:gDocumentDate',
+            defaultVisible: false,
+        },
+        {
+            name: 'retentionType',
+            prop: 'properties.saveTypee',
+            display: true,
+            translatePrefix: 'search.buckets',
+            type: 'custom',
+            template: 'rms.components.TranslatedValueColumn',
+            headerClass: 'retentioninfo:saveTypee',
+            defaultVisible: false,
+        },
+        {
+            name: 'retentioninfoStatus',
+            prop: 'properties.retentioninfoStatus',
+            display: true,
+            translatePrefix: 'search.buckets',
+            type: 'custom',
+            template: 'rms.components.TranslatedValueColumn',
+            headerClass: 'retentioninfo:status',
+            defaultVisible: false,
+        },
+        {
+            name: 'activeRetentionStartDateHijri',
+            prop: 'properties.activeRetentionStartDateHijri',
+            display: false,
+            type: 'custom',
+            template: 'common.components.hijri',
+            headerClass: 'retentioninfo:activeRetentionStartDateHijri',
+            defaultVisible: false,
+        },
+        {
+            name: 'activeRetentionEndDateHijri',
+            prop: 'properties.activeRetentionEndDateHijri',
+            display: false,
+            type: 'custom',
+            template: 'common.components.hijri',
+            headerClass: 'retentioninfo:activeRetentionEndDateHijri',
+            defaultVisible: false,
+        },
+        {
+            name: 'retentionEndDateHijri',
+            prop: 'properties.retentionEndDateHijri',
+            display: false,
+            type: 'custom',
+            template: 'common.components.hijri',
+            headerClass: 'retentioninfo:retentionEndDateHijri',
+            defaultVisible: true,
+        },
+        {
+            name: 'site',
+            prop: 'properties.site',
+            display: false,
+            type: 'custom',
+            template: 'common.components.site',
+            headerClass: 'locRef:site',
+            defaultVisible: true,
+        },
+        {
+            name: 'store',
+            prop: 'properties.store',
+            display: false,
+            type: 'custom',
+            template: 'common.components.store',
+            headerClass: 'locRef:store',
+            defaultVisible: true,
+        },
+        {
+            name: 'Box',
+            prop: 'properties.box',
+            display: false,
+            type: 'custom',
+            template: 'common.components.box',
+            headerClass: 'locRef:boxCode',
+            defaultVisible: true,
+        },
+    ],
+    columnsWithDynamicDisplay: [
+        'activeRetentionStartDateHijri',
+        'activeRetentionEndDateHijri',
+        'retentionEndDateHijri',
+        'site',
+        'store',
+        'Box',
+    ],
+};
+const REPORTS_DATA = {
+    request: {
+        pageProvider: 'PP_RPT_Expected_TransferArchive_Records',
+        customUrl: {
+            url: '/custom-search/pp/PP_RPT_Expected_TransferArchive_Records/execute',
+            method: 'post',
+        },
+        params: {
+            pageSize: 1,
+        },
+    },
+    filters: {
+        mode: 'payload',
+        visible: true,
+        togglePanel: true,
+        fields: [
+            {
+                type: 'aggregation',
+                config: {
+                    label: 'rmAdvancedSearch.gdocCategoryHierarchyCode',
+                    aggregation: 'generaldocument_categoryHierarchyCode_agg',
+                    fieldKey: 'gdoc:categoryHierarchyCode',
+                    dataTransformer: 'subject',
+                    order: 0,
+                    sendMode: 'queryParam',
+                    valueType: 'property',
+                    render: {
+                        type: 'checkbox',
+                        options: {
+                            showTotal: true,
+                        },
+                    },
+                },
+            },
+            {
+                type: 'aggregation',
+                config: {
+                    label: 'rmAdvancedSearch.gdocCategoryHierarchyCode1',
+                    aggregation: 'generaldocument_categoryHierarchyCode_1_agg',
+                    fieldKey: 'gdoc:categoryHierarchyCode__1',
+                    order: 0,
+                    sendMode: 'queryParam',
+                    valueType: 'property',
+                    dataTransformer: 'subject',
+                    render: {
+                        type: 'checkbox',
+                        options: {
+                            showTotal: true,
+                            collapse: true,
+                        },
+                    },
+                },
+            },
+        ],
+    },
+    reports: {
+        details: {
+            enabled: true,
+            prefix: 'LISTING.',
+            // quickFilters: 'After Archiving',
+            columnsOptions: {
+                toggle: true,
+                sortable: {
+                    enabled: true,
+                },
+            },
+            request: {
+                headers: {
+                    properties: 'dublincore, file, generaldocument, RecordDefinition,retentioninfo',
+                },
+            },
+            fields: {
+                title: 'dc:title',
+                subject: 'gdoc:documentSubject',
+                docTypee: 'gdoc:documentTypeCode',
+                secrecyLevel: 'gdoc:secrecyLevel',
+                docTypeId: 'documenttypee:documentTypeId',
+                created: 'dc:created',
+                department: 'department',
+                file: 'file:content',
+                systemName: 'recdef:systemName',
+                docNum: 'gdoc:documentReferenceNumber',
+                physicalOriginal: 'recdef:physicalOriginal',
+                gdocumentDate: 'gdoc:gDocumentDate',
+                importance: 'gdoc:importance',
+                unifiedNumber: 'recdef:unifiedNumber',
+                creator: 'dc:creator',
+                saveTypee: 'retentioninfo:saveTypee',
+            },
+            columns: [
+                {
+                    name: 'Doc_Name',
+                    prop: 'properties.title',
+                    display: true,
+                    type: 'custom',
+                    template: 'common.components.titleWithIcon',
+                    sortable: true,
+                    headerClass: 'dc:title',
+                    defaultVisible: true,
+                },
+                {
+                    name: 'systemName',
+                    prop: 'properties.systemName',
+                    display: true,
+                    type: 'custom',
+                    template: 'common.components.systemName',
+                    translatePrefix: 'search.buckets',
+                    isOrginalKey: true,
+                    sortable: false,
+                    headerClass: 'recdef:systemName',
+                    defaultVisible: true,
+                },
+                {
+                    name: 'Doc_RefernceNum',
+                    prop: 'properties.docNum',
+                    display: true,
+                    type: 'text',
+                    sortable: true,
+                    headerClass: 'gdoc:documentReferenceNumber',
+                    defaultVisible: true,
+                },
+                {
+                    name: 'Doc_Type',
+                    prop: 'properties.docTypee',
+                    display: true,
+                    template: 'common.components.documentType',
+                    type: 'custom',
+                    headerClass: 'gdoc:documentTypeCode',
+                    defaultVisible: false,
+                },
+                {
+                    name: 'retentionType',
+                    prop: 'properties.saveTypee',
+                    display: true,
+                    type: 'text',
+                    translatePrefix: 'vocabulary.VOC_SaveType',
+                    headerClass: 'retentioninfo:saveTypee',
+                    defaultVisible: false,
+                },
+                {
+                    name: 'physicalOriginal',
+                    prop: 'properties.physicalOriginal',
+                    display: true,
+                    type: 'custom',
+                    template: 'rms.components.TranslatedValueColumn',
+                    translatePrefix: 'rmDocumentUpload.hasPhysicalOriginal',
+                    isBooleanValue: true,
+                    sortable: false,
+                    headerClass: 'recdef:physicalOriginal',
+                    defaultVisible: false,
+                },
+                {
+                    name: 'mainTopic',
+                    prop: 'properties.subject',
+                    display: true,
+                    type: 'text',
+                    headerClass: 'gdoc:documentSubject',
+                    defaultVisible: false,
+                },
+                {
+                    name: 'docDate',
+                    prop: 'properties.gdocumentDate',
+                    display: true,
+                    type: 'custom',
+                    template: 'common.components.dateWithoutTime',
+                    headerClass: 'gdoc:gDocumentDate',
+                    defaultVisible: true,
+                },
+                {
+                    name: 'secrecyLevel',
+                    prop: 'properties.secrecyLevel',
+                    display: true,
+                    type: 'custom',
+                    template: 'common.components.coloredSecrecyLevel',
+                    headerClass: 'gdoc:secrecyLevel',
+                    defaultVisible: true,
+                },
+                {
+                    name: 'importance',
+                    prop: 'properties.importance',
+                    display: true,
+                    translatePrefix: 'search.buckets',
+                    type: 'custom',
+                    template: 'rms.components.TranslatedValueColumn',
+                    sortable: true,
+                    isOrginalKey: true,
+                    headerClass: 'gdoc:importance',
+                },
+                {
+                    name: 'unifiedNumber',
+                    prop: 'properties.unifiedNumber',
+                    display: true,
+                    type: 'text',
+                    sortable: true,
+                    headerClass: 'recdef:unifiedNumber',
+                },
+                {
+                    name: 'docDate',
+                    prop: 'properties.created',
+                    display: true,
+                    type: 'custom',
+                    template: 'common.components.dateWithoutTime',
+                    headerClass: 'dc:created',
+                    defaultVisible: false,
+                },
+                {
+                    name: 'creator',
+                    prop: 'properties.creator',
+                    display: true,
+                    type: 'text',
+                    sortable: true,
+                    headerClass: 'dc:creator',
+                    defaultVisible: false,
+                },
+                {
+                    name: 'documentType',
+                    prop: 'properties.docTypeId',
+                    display: true,
+                    type: 'custom',
+                    template: 'common.components.documentType',
+                    headerClass: 'gdoc:documentTypeCode',
+                    defaultVisible: false,
+                },
+                {
+                    name: 'orgUnit',
+                    prop: 'department.title',
+                    display: true,
+                    type: 'custom',
+                    template: 'common.components.departement',
+                    headerClass: 'recdef:departmentCode',
+                    sortable: false,
+                    defaultVisible: false,
+                },
+            ],
+        },
+        items: [
+            {
+                id: 'resultsCount',
+                label: 'REPORTS.resultsCount',
+                mode: 'digit',
+                datasource: {
+                    propertyPath: 'resultsCount',
+                },
+            },
+            {
+                id: 'future__gdocCategoryHierarchyCode',
+                label: 'REPORTS.gdocCategoryHierarchyCode',
+                mode: 'graph',
+                print: true,
+                dialog: {
+                    active: true,
+                },
+                details: {
+                    enabled: true,
+                },
+                datasource: [
+                    {
+                        propertyPath: 'aggregations.generaldocument_categoryHierarchyCode_agg.buckets',
+                        dataFormat: 'subject',
+                        transformer: 'reduceData',
+                    },
+                ],
+                chart: {
+                    type: 'pie',
+                    plugins: [
+                        'chartDataLabels',
+                        'scrollableLegends',
+                        'doughnutEmptyState',
+                    ],
+                },
+            },
+            {
+                id: 'future__generaldocument_categoryHierarchyCode_1_agg',
+                label: 'REPORTS.gdocCategoryHierarchyCode1',
+                mode: 'graph',
+                print: true,
+                dialog: {
+                    active: true,
+                },
+                details: {
+                    enabled: true,
+                },
+                datasource: [
+                    {
+                        propertyPath: 'aggregations.generaldocument_categoryHierarchyCode_1_agg.buckets',
+                        dataFormat: 'subject',
+                        transformer: 'reduceData',
+                    },
+                ],
+                chart: {
+                    type: 'doughnut',
+                    plugins: [
+                        'chartDataLabels',
+                        'scrollableLegends',
+                        'doughnutEmptyState',
+                    ],
+                },
+            },
+            {
+                id: 'future__generaldocument_secrecyLevel_agg',
+                label: 'REPORTS.gdocSecrecyLevel',
+                mode: 'graph',
+                print: true,
+                dialog: {
+                    active: true,
+                },
+                prefix: 'search.buckets.',
+                details: {
+                    enabled: true,
+                },
+                datasource: [
+                    {
+                        propertyPath: 'aggregations.generaldocument_secrecyLevel_agg.buckets',
+                        transformer: 'reduceData',
+                    },
+                ],
+                chart: {
+                    type: 'bar',
+                    options: {
+                        indexAxis: 'y',
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        scales: {
+                            x: {
+                                ticks: {
+                                    stepSize: 1,
+                                },
+                                grid: {
+                                    color: '#eee',
+                                },
+                            },
+                            y: {
+                                ticks: {
+                                    precision: 0,
+                                    stepSize: 1,
+                                    color: '#000',
+                                    crossAlign: 'far',
+                                    callback: function (_, index) {
+                                        const label = `${this.getLabels()[index]}`;
+                                        const maxLength = 18;
+                                        return (label === null || label === void 0 ? void 0 : label.length) > maxLength
+                                            ? label.substring(0, maxLength) + '...'
+                                            : label;
+                                    },
+                                },
+                                grid: {
+                                    color: '#000',
+                                },
+                            },
+                        },
+                        plugins: {
+                            legend: {
+                                display: false,
+                            },
+                        },
+                    },
+                    plugins: [
+                        'chartDataLabels',
+                        'scrollableLegends',
+                        'doughnutEmptyState',
+                    ],
+                },
+            },
+            {
+                id: 'future__RetentionInfo_saveTypee_agg',
+                label: 'REPORTS.rinfoSaveTypee',
+                mode: 'graph',
+                print: true,
+                prefix: 'search.buckets.',
+                details: {
+                    enabled: true,
+                },
+                datasource: [
+                    {
+                        propertyPath: 'aggregations.RetentionInfo_saveTypee_agg.buckets',
+                        transformer: 'reduceData',
+                    },
+                ],
+                chart: {
+                    type: 'pie',
+                    plugins: [
+                        'chartDataLabels',
+                        'scrollableLegends',
+                        'doughnutEmptyState',
+                    ],
+                },
+            },
+            {
+                mode: 'dynamicLine',
+                id: 'late_RetentionInfo_activeRetentionExpireDate_agg',
+                label: 'REPORTS.expectedTransferDate',
+                print: true,
+                dialog: {
+                    active: true,
+                },
+                details: {
+                    enabled: true,
+                },
+                request: {
+                    pageProvider: 'PP_RPT_Expected_TransferArchive_Records',
+                    customUrl: {
+                        url: '/custom-search/pp/PP_RPT_Expected_TransferArchive_Records/execute',
+                        method: 'post',
+                    },
+                },
+                datasource: [
+                    {
+                        aggregation: 'RetentionInfo_activeRetentionExpireDate_agg',
+                        propertyPath: 'aggregations.RetentionInfo_activeRetentionExpireDate_agg.buckets',
+                        transformer: 'removeTime',
+                    },
+                ],
+                chart: {
+                    type: 'line',
+                    options: {
+                        layout: {
+                            padding: {
+                                right: 40,
+                                left: 40,
+                            },
+                        },
+                    },
+                    datasets: [
+                        {
+                            borderWidth: 2,
+                            borderColor: '#000',
+                            pointBorderWidth: 0,
+                            pointBackgroundColor: '#000',
+                        },
+                    ],
+                },
+            },
+            {
+                id: 'future__RecordDefinition_systemName_agg',
+                label: 'REPORTS.rdSystemName',
+                mode: 'graph',
+                print: true,
+                dialog: {
+                    active: true,
+                },
+                prefix: 'search.buckets.',
+                details: {
+                    enabled: true,
+                },
+                datasource: [
+                    {
+                        propertyPath: 'aggregations.RecordDefinition_systemName_agg.buckets',
+                        transformer: 'reduceData',
+                    },
+                ],
+                chart: {
+                    type: 'bar',
+                    direction: 'vertical',
+                    plugins: [
+                        'chartDataLabels',
+                        'scrollableLegends',
+                        'doughnutEmptyState',
+                    ],
+                },
+            },
+        ],
+    },
+};
+
+class DataAccessService extends BaseService {
+    getData(key, type) {
+        if (type == NDF_EDITOR_TYPE.REPORTS) {
+            return of(JSON.stringify(REPORTS_DATA, null, 2));
+        }
+        return of(JSON.stringify(TABLE_DATA, null, 2));
+    }
+    saveData(key, data) {
+        return of(JSON.stringify(TABLE_DATA, null, 2));
+    }
+}
+DataAccessService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataAccessService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+DataAccessService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataAccessService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataAccessService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DataStoreService {
+    constructor(dataAccessService) {
+        this.dataAccessService = dataAccessService;
+        this._editorTypeSubject = new BehaviorSubject(NDF_EDITOR_TYPE.TABLES);
+        this.editorType$ = this._editorTypeSubject.asObservable();
+        this._editorModeSubject = new BehaviorSubject(CONFIG_EDITOR_MODE.EDIT);
+        this.editorMode$ = this._editorModeSubject.asObservable();
+        this._dataSubject = new BehaviorSubject('{\n"key": "value"\n}');
+        this.editorData$ = this._dataSubject.asObservable();
+        this.previewData$ = this._dataSubject.asObservable().pipe(map((result) => JSON.parse(result)));
+    }
+    get editorMode() {
+        return this._editorModeSubject.getValue();
+    }
+    get type() {
+        return this._editorTypeSubject.getValue();
+    }
+    get editorData() {
+        return this._dataSubject.getValue();
+    }
+    changeMode(mode) {
+        this._editorModeSubject.next(mode);
+    }
+    changeEditorType(type) {
+        this._editorTypeSubject.next(type);
+    }
+    getData(key, type) {
+        return this.dataAccessService.getData(key, type).pipe(switchMap((data) => {
+            this._dataSubject.next(data);
+            return this.editorData$;
+        }));
+    }
+    saveData(key) {
+        const data = this._dataSubject.getValue();
+        return this.dataAccessService.saveData(key, data);
+    }
+    storeData(data) {
+        this._dataSubject.next(data);
+    }
+}
+DataStoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataStoreService, deps: [{ token: DataAccessService }], target: i0.ɵɵFactoryTarget.Injectable });
+DataStoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataStoreService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataStoreService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: DataAccessService }]; } });
+
+// monaco-loader.service.ts
+class MonacoLoaderService {
+    constructor() {
+        this.loaded = false;
+    }
+    load(baseUrl = window.location.origin) {
+        const _vsUrl = window.location.origin + baseUrl + '/assets/monaco-editor/min/vs';
+        if (this.loaded)
+            return this.loadPromise;
+        this.loaded = true;
+        this.loadPromise = new Promise((resolve) => {
+            // If already available
+            if (window.monaco) {
+                resolve(window.monaco);
+                return;
+            }
+            const onAmdLoader = () => {
+                window.require.config({ paths: { vs: _vsUrl } });
+                // Set the worker URL to the correct path
+                /*window.monaco.editor?.setWorkerOptions({
+          // Make sure the worker path points to the correct location
+          baseUrl: `${baseUrl}/worker/`
+        });*/
+                window.require(['vs/editor/editor.main'], () => {
+                    resolve(window.monaco);
+                });
+            };
+            // Load AMD loader if needed
+            if (!window.require) {
+                const loaderScript = document.createElement('script');
+                loaderScript.type = 'text/javascript';
+                loaderScript.src = `${_vsUrl}/loader.js`;
+                loaderScript.onload = onAmdLoader;
+                document.body.appendChild(loaderScript);
+            }
+            else {
+                onAmdLoader();
+            }
+        });
+        return this.loadPromise;
+    }
+}
+MonacoLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MonacoLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MonacoLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MonacoLoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MonacoLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class EditorModeSwitchComponent {
+    constructor() {
+        this.changeMode = new EventEmitter();
+        this.modes = CONFIG_EDITOR_MODE;
+    }
+    ngOnInit() { }
+    onModeChange(mode) {
+        this.changeMode.emit(mode.value);
+    }
+}
+EditorModeSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorModeSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EditorModeSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorModeSwitchComponent, selector: "app-editor-mode-switch", inputs: { mode: "mode" }, outputs: { changeMode: "changeMode" }, ngImport: i0, template: `
+		<mat-button-toggle-group [value]="mode" (change)="onModeChange($event)">
+			<mat-button-toggle *ngFor="let mod of modes | keyvalue" [value]="mod.value"
+				>{{ 'JSON_EDITOR.MODES.' + (mod.key | lowercase) | translate }}
+			</mat-button-toggle>
+		</mat-button-toggle-group>
+	`, isInline: true, styles: [""], components: [{ type: i1$b.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i1$b.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i4$1.KeyValuePipe, "translate": i1.TranslatePipe, "lowercase": i4$1.LowerCasePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorModeSwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-editor-mode-switch',
+                    template: `
+		<mat-button-toggle-group [value]="mode" (change)="onModeChange($event)">
+			<mat-button-toggle *ngFor="let mod of modes | keyvalue" [value]="mod.value"
+				>{{ 'JSON_EDITOR.MODES.' + (mod.key | lowercase) | translate }}
+			</mat-button-toggle>
+		</mat-button-toggle-group>
+	`,
+                    styles: ['']
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
+                type: Input
+            }], changeMode: [{
+                type: Output
+            }] } });
+
+class InfoDialogComponent extends BaseDialogComponent {
+    constructor() {
+        super(...arguments);
+        this.baseAppUrl = this._injector.get(APP_BASE_HREF);
+    }
+    ngOnInit() {
+        this.docUrl = this.baseAppUrl + this.dialogData.url;
+    }
+}
+InfoDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InfoDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+InfoDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: InfoDialogComponent, selector: "app-info-dialog", usesInheritance: true, ngImport: i0, template: "<ndf-nuxeo-dialog [dialogTitle]=\"dialogData.title | translate\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<markdown class=\"markdown-content\" [src]=\"docUrl\"> </markdown>\r\n\t</ng-template>\r\n\r\n\t<ng-template #actionsTemplate let-dialog=\"dialog\"> </ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: ["::ng-deep .markdown-content{direction:var(--markdown-direction, ltr)!important;text-align:start;color:var(--markdonw-text-color, inherit);background:var(--markdonw-background-color, transparent);border:var(--markdonw-border, 0px solid transparent);border-radius:var(--markdonw-border-radius, 0)}::ng-deep .markdown-content code,::ng-deep .markdown-content kbd,::ng-deep .markdown-content samp,::ng-deep .markdown-content pre{font-family:ui-monospace,SFMono-Regular,Consolas,\"Liberation Mono\",Menlo,monospace;font-size:1em}::ng-deep .markdown-content hr{margin-block:1rem}::ng-deep .markdown-content table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;font-variant:tabular-nums;margin-block:.5rem}::ng-deep .markdown-content table tr{border-top:1px solid var(--markdonw-table-tr-border-color, #d1d9e0b3)}::ng-deep .markdown-content table th,::ng-deep .markdown-content table td{padding:6px 13px;border:1px solid var(--markdonw-table-border-color, #d1d9e0)}\n"], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "loaderMode"] }, { type: i2$8.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "emoji", "katex", "katexOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start"], outputs: ["error", "load", "ready"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InfoDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-info-dialog',
+                    templateUrl: './info-dialog.component.html',
+                    styleUrls: ['./info-dialog.component.scss']
+                }]
+        }] });
+
+class ConfigEditorActionsComponent {
+    constructor() {
+        this.saveDisabled = false;
+        this.onSave = new EventEmitter();
+        this.onInfo = new EventEmitter();
+        this.onBack = new EventEmitter();
+    }
+    ngOnInit() { }
+}
+ConfigEditorActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConfigEditorActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ConfigEditorActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConfigEditorActionsComponent, selector: "app-config-editor-actions", inputs: { saveDisabled: "saveDisabled", config: "config" }, outputs: { onSave: "onSave", onInfo: "onInfo", onBack: "onBack" }, ngImport: i0, template: "<button mat-stroked-button (click)=\"onSave.emit($event)\" [disabled]=\"saveDisabled\">\r\n\t{{ 'JSON_EDITOR.save' | translate }}\r\n</button>\r\n<button mat-stroked-button (click)=\"onInfo.emit(config?.documentation)\" *ngIf=\"config?.documentation\">\r\n\t{{ 'JSON_EDITOR.info' | translate }}\r\n</button>\r\n\r\n<button mat-stroked-button (click)=\"onBack.emit($event)\">{{ 'JSON_EDITOR.back' | translate }}</button>\r\n", styles: [":host{display:var(--ndf-editor-actions-display, flex);flex-direction:var(--ndf-editor-actions-direction, column);grid-gap:var(--ndf-editor-actions-gap, .5rem);gap:var(--ndf-editor-actions-gap, .5rem)}\n"], components: [{ type: i1$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConfigEditorActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-config-editor-actions',
+                    templateUrl: './config-editor-actions.component.html',
+                    styleUrls: ['./config-editor-actions.component.scss']
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { saveDisabled: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], onSave: [{
+                type: Output
+            }], onInfo: [{
+                type: Output
+            }], onBack: [{
+                type: Output
+            }] } });
+
+class EditorSettingsComponent {
+    constructor(_componentRegister, _evaluatorsService, _ndfTransformService, _chartDataTransformers, _chartPluginsRegistry) {
+        this._componentRegister = _componentRegister;
+        this._evaluatorsService = _evaluatorsService;
+        this._ndfTransformService = _ndfTransformService;
+        this._chartDataTransformers = _chartDataTransformers;
+        this._chartPluginsRegistry = _chartPluginsRegistry;
+        this.settingsList = [];
+        if (_componentRegister) {
+            const components = this._componentRegister.getComponents();
+            this.pushToSetting('JSON_EDITOR.SETTINGS.customComponents', Object.keys(components));
+        }
+        if (_evaluatorsService) {
+            const _evls = this._evaluatorsService.getUserEvaluators();
+            this.pushToSetting('JSON_EDITOR.SETTINGS.roles', Object.keys(_evls));
+        }
+        if (_ndfTransformService) {
+            const transformers = this._ndfTransformService.getAll();
+            this.pushToSetting('JSON_EDITOR.SETTINGS.transformers', [...transformers.keys()]);
+        }
+        if (_chartDataTransformers) {
+            const graphTransformers = this._chartDataTransformers.getGraphTransformers();
+            this.pushToSetting('JSON_EDITOR.SETTINGS.graphTransformers', [...graphTransformers.keys()]);
+            const digitsTransformers = this._chartDataTransformers.getDigitsTransformers();
+            this.pushToSetting('JSON_EDITOR.SETTINGS.digitsTransformers', [...digitsTransformers.keys()]);
+        }
+        if (_chartPluginsRegistry) {
+            const plugins = this._chartPluginsRegistry.getAll();
+            this.pushToSetting('JSON_EDITOR.SETTINGS.chartPlugins', [...plugins.keys()]);
+        }
+    }
+    ngOnInit() { }
+    pushToSetting(name, keys) {
+        const item = {
+            name: name,
+            keys: keys
+        };
+        this.settingsList = [...this.settingsList, item];
+    }
+}
+EditorSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorSettingsComponent, deps: [{ token: ComponentRegisterService, optional: true }, { token: EvaluatorsService, optional: true }, { token: NdfTransformService, optional: true }, { token: ChartDataTransformers, optional: true }, { token: ChartPluginsRegistry, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+EditorSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorSettingsComponent, selector: "app-editor-settings", ngImport: i0, template: "<cdk-accordion class=\"settings-list\">\r\n\t<cdk-accordion-item\r\n\t\t*ngFor=\"let item of settingsList; let index = index\"\r\n\t\t#accordionItem=\"cdkAccordionItem\"\r\n\t\tclass=\"settings-list__item\"\r\n\t\trole=\"button\"\r\n\t\ttabindex=\"0\"\r\n\t\t[attr.id]=\"'accordion-header-' + index\"\r\n\t\t[attr.aria-expanded]=\"accordionItem.expanded\"\r\n\t\t[attr.aria-controls]=\"'accordion-body-' + index\"\r\n\t>\r\n\t\t<div class=\"settings-list__item__header\" (click)=\"accordionItem.toggle()\">\r\n\t\t\t<span class=\"settings-list__item__header__title truncate\">\r\n\t\t\t\t{{ item.name | translate }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<mat-icon class=\"settings-list__item__header__icon\">\r\n\t\t\t\t{{ accordionItem.expanded ? 'expand_less' : 'expand_more' }}\r\n\t\t\t</mat-icon>\r\n\t\t</div>\r\n\t\t<div\r\n\t\t\tclass=\"settings-list__item__body\"\r\n\t\t\trole=\"region\"\r\n\t\t\t[style.display]=\"accordionItem.expanded ? '' : 'none'\"\r\n\t\t\t[attr.id]=\"'accordion-body-' + index\"\r\n\t\t\t[attr.aria-labelledby]=\"'accordion-header-' + index\"\r\n\t\t>\r\n\t\t\t<ul class=\"keys-list\">\r\n\t\t\t\t<li\r\n\t\t\t\t\t*ngFor=\"let key of item.keys\"\r\n\t\t\t\t\tclass=\"keys-list__key\"\r\n\t\t\t\t\t[appCopyToClipboard]=\"key\"\r\n\t\t\t\t\t[matTooltip]=\"'JSON_EDITOR.clickToCopy' | translate\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ key }}\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t</cdk-accordion-item>\r\n</cdk-accordion>\r\n", styles: [".settings-list{padding:var(--esl-padding, .5rem);color:var(--esl-color, inherit)}.settings-list__item__header{display:flex;justify-content:space-between;align-items:center;min-width:0;padding:var(--esl-header-padding, .5rem);border-bottom:var(--esl-header-border, 1px solid var(--border-color))}.settings-list__item__header__title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.keys-list{font-family:var(--keys-list-font-family, system-ui);font-size:var(--keys-list-font-size, .9rem);margin-block:var(--keys-list-margin, .5rem)}.keys-list__key{margin-bottom:.2rem;color:var(--keys-text-color, inherit);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-block:.15rem}.keys-list__key:hover{background:var(--keys-hover-background, #f5f5f5)}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$4.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$4.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { type: CopyToClipboardDirective, selector: "[appCopyToClipboard]", inputs: ["appCopyToClipboard"] }, { type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-editor-settings',
+                    templateUrl: './editor-settings.component.html',
+                    styleUrls: ['./editor-settings.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: ComponentRegisterService, decorators: [{
+                    type: Optional
+                }] }, { type: EvaluatorsService, decorators: [{
+                    type: Optional
+                }] }, { type: NdfTransformService, decorators: [{
+                    type: Optional
+                }] }, { type: ChartDataTransformers, decorators: [{
+                    type: Optional
+                }] }, { type: ChartPluginsRegistry, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+class ValidateObjectPipe {
+    transform(value) {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+}
+ValidateObjectPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ValidateObjectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ValidateObjectPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ValidateObjectPipe, name: "validateObject" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ValidateObjectPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'validateObject'
+                }]
+        }] });
+
+class ConfigPreviewComponent {
+    constructor() {
+        this.types = NDF_EDITOR_TYPE;
+    }
+    ngOnInit() { }
+}
+ConfigPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConfigPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ConfigPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConfigPreviewComponent, selector: "app-config-preview", inputs: { type: "type", data: "data" }, ngImport: i0, template: "<ng-container *ngIf=\"data | validateObject\">\r\n\t<ng-container [ngSwitch]=\"type\">\r\n\t\t<app-ndf-table *ngSwitchCase=\"types.TABLES\" [config]=\"data\"></app-ndf-table>\r\n\t\t<app-ndf-reports *ngSwitchCase=\"types.REPORTS\" [config]=\"data\"></app-ndf-reports>\r\n\t</ng-container>\r\n</ng-container>\r\n", styles: [":host{display:block;height:var(--monaco-config-editor-height, 100%);border:var(--monaco-config-editor-border, 1px solid var(--monaco-border-color, #bbb))}\n"], components: [{ type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "configTransformer", "tableKey", "jsonEditorEnabled", "config", "customCriteria", "searchTerm"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "onPage", "onInitialized", "onLoaded", "onQueryChange", "onSort"] }, { type: NdfReportsComponent, selector: "app-ndf-reports", inputs: ["jsonEditorEnabled", "reportsKey", "navigateRoute", "config"], outputs: ["onQueryChange"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "validateObject": ValidateObjectPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ConfigPreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-config-preview',
+                    templateUrl: './config-preview.component.html',
+                    styleUrls: ['./config-preview.component.scss']
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+const MONACO_EDITOR_CONFIG = new InjectionToken('MONACO_EDITOR_CONFIG');
+
+class MonacoEditorComponent {
+    constructor(config, _loaderService, zone) {
+        this.config = config;
+        this._loaderService = _loaderService;
+        this.zone = zone;
+        this.destroy$ = new EventEmitter();
+        this.onInit = new EventEmitter();
+        this.hasError = new EventEmitter();
+        this._value = '';
+        this.valueChange = new EventEmitter();
+        this._options = {
+            value: ``,
+            language: 'json',
+            theme: 'vs',
+            automaticLayout: true
+        };
+    }
+    set value(val) {
+        this._value = val;
+        if (this._editor && val !== this._editor.getValue()) {
+            this._editor.setValue(val);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    set options(options) {
+        console.log(options);
+        this._options = Object.assign({}, this.config.defaultOptions, options);
+        if (this._editor) {
+            this._editor.dispose();
+            this.initMonaco(this._options);
+        }
+    }
+    get options() {
+        return this._options;
+    }
+    set theme(theme) {
+        if (this._monaco) {
+            this._monaco.editor.setTheme(theme);
+        }
+    }
+    set model(model) {
+        this.options.model = model;
+        if (this._editor) {
+            this._editor.dispose();
+            this.initMonaco(this.options);
+        }
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        const baseUrl = this.config.baseUrl || './assets/monaco-editor/min/vs';
+        this._loaderService.load(baseUrl).then((monaco) => {
+            this._monaco = monaco;
+            this.initMonaco(this._options);
+        });
+    }
+    ngOnDestroy() {
+        if (this._editor) {
+            this._editor.dispose();
+            this._editor = undefined;
+        }
+        this._monaco = undefined;
+        this.destroy$.next(null);
+        this.destroy$.complete();
+    }
+    initMonaco(options) {
+        var _a, _b;
+        if (!this._monaco) {
+            console.error('Monaco editor is not loaded yet.');
+            return;
+        }
+        const hasModel = !!(options === null || options === void 0 ? void 0 : options.model);
+        try {
+            if (hasModel) {
+                const model = this._monaco.editor.getModel(options.model.uri);
+                if (model) {
+                    // If model exists, set the value
+                    options.model = model;
+                    options.model.setValue(this.value);
+                }
+                else {
+                    // If model doesn't exist, create a new model
+                    options.model = this._monaco.editor.createModel(((_a = options.model) === null || _a === void 0 ? void 0 : _a.value) || this.value, ((_b = options.model) === null || _b === void 0 ? void 0 : _b.language) || 'json', options.model.uri);
+                }
+            }
+            this._monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+                validate: true,
+                allowComments: false,
+                schemas: [] // No schema provided
+            });
+            // Initialize the Monaco editor instance
+            const editorOptions = Object.assign(Object.assign({}, options), { minimap: {
+                    enabled: false
+                } });
+            this._editor = this._monaco.editor.create(this._editorContainer.nativeElement, editorOptions);
+            // If no model is passed in options, set the value directly
+            if (!hasModel) {
+                this._editor.setValue(this.value || '');
+            }
+            this._monaco.editor.onDidChangeMarkers(() => {
+                const markers = this._monaco.editor.getModelMarkers({});
+                this.hasError.emit(!!(markers === null || markers === void 0 ? void 0 : markers.length));
+            });
+            // Handle content change events to propagate changes
+            this._editor.onDidChangeModelContent((e) => {
+                const value = this._editor.getValue();
+                this.zone.run(() => {
+                    this.value = value;
+                    this.valueChange.emit(value); // Emit the value change event
+                });
+            });
+            this._subscribeToWindowResize();
+            this.onInit.emit({
+                monaco: this._monaco,
+                editor: this._editor
+            });
+        }
+        catch (error) {
+            console.error('Error initializing Monaco Editor:', error);
+        }
+    }
+    _subscribeToWindowResize() {
+        fromEvent(window, 'resize')
+            .pipe(filter$1(() => !!this._editor), delay(200), takeUntil(this.destroy$))
+            .subscribe(() => {
+            this._editor.layout();
+        });
+    }
+}
+MonacoEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MonacoEditorComponent, deps: [{ token: MONACO_EDITOR_CONFIG }, { token: MonacoLoaderService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+MonacoEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MonacoEditorComponent, selector: "ndf-monaco-editor", inputs: { value: "value", options: "options", theme: "theme", model: "model" }, outputs: { onInit: "onInit", hasError: "hasError", valueChange: "valueChange" }, viewQueries: [{ propertyName: "_editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], ngImport: i0, template: `
+		<div
+			class="editor-container"
+			#editorContainer
+			dir="ltr"
+			style="text-align: left !important; direction: ltr !important"
+		></div>
+	`, isInline: true, styles: ["\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: var(--monaco-config-editor-height, 100%);\n\t\t\t\tborder: var(--monaco-config-editor-border, 1px solid var(--monaco-border-color, #bbb));\n\t\t\t}\n\t\t\t.editor-container {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t"], directives: [{ type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MonacoEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndf-monaco-editor',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+		<div
+			class="editor-container"
+			#editorContainer
+			dir="ltr"
+			style="text-align: left !important; direction: ltr !important"
+		></div>
+	`,
+                    styles: [
+                        `
+			:host {
+				display: block;
+				height: var(--monaco-config-editor-height, 100%);
+				border: var(--monaco-config-editor-border, 1px solid var(--monaco-border-color, #bbb));
+			}
+			.editor-container {
+				width: 100%;
+				height: 100%;
+			}
+		`
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MONACO_EDITOR_CONFIG]
+                }] }, { type: MonacoLoaderService }, { type: i0.NgZone }]; }, propDecorators: { _editorContainer: [{
+                type: ViewChild,
+                args: ['editorContainer', { static: true }]
+            }], onInit: [{
+                type: Output
+            }], hasError: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }] } });
+
+function isValidJson(value) {
+    try {
+        const parsed = JSON.parse(value);
+        return typeof parsed === 'object' && parsed !== null;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+
+class IsValidJsonPipe {
+    transform(value) {
+        return isValidJson(value);
+    }
+}
+IsValidJsonPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IsValidJsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IsValidJsonPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IsValidJsonPipe, name: "isValidJson" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IsValidJsonPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isValidJson'
+                }]
+        }] });
+
+class NdfConfigEditorComponent extends DestroySubject {
+    constructor(environment, dataStore, configService, matDialog, location) {
+        var _a;
+        super();
+        this.environment = environment;
+        this.dataStore = dataStore;
+        this.configService = configService;
+        this.matDialog = matDialog;
+        this.location = location;
+        this.isEditorHasErrors = false;
+        this._defaultEditorOptions = {
+            value: ``,
+            language: 'json',
+            theme: 'vs',
+            automaticLayout: true
+        };
+        this._optionsSubject = new BehaviorSubject(this._defaultEditorOptions);
+        this.options$ = this._optionsSubject.asObservable();
+        this._themeSubject = new ReplaySubject();
+        this.theme$ = this._themeSubject.asObservable();
+        this._dataKeySubject = new ReplaySubject();
+        this.previewData$ = this.dataStore.previewData$;
+        this.editorData$ = this.dataStore.editorData$;
+        this.modes = CONFIG_EDITOR_MODE;
+        this.isFeatureEnabled = false;
+        this.config = (_a = this.configService.myConfiguration) === null || _a === void 0 ? void 0 : _a.configEditor;
+        this.isFeatureEnabled = environment.configEditor === 'YES';
+    }
+    ngOnChanges(changes) {
+        this._handleMetadataChanges(changes);
+        this._handleOptionsAndThemeChanges(changes);
+    }
+    ngOnInit() {
+        this._dataKeySubject
+            .pipe(switchMap((key) => this.dataStore.getData(key, this.metadata.type)), takeUntil(this.destroy$))
+            .subscribe((res) => { });
+    }
+    onDataChanged(data) {
+        this.dataStore.storeData(data);
+    }
+    onEditorErrors(hasErrors) {
+        this.isEditorHasErrors = hasErrors;
+    }
+    saveData() {
+        this.dataStore.saveData(this.metadata.key);
+    }
+    navigateBack() {
+        this.location.back();
+    }
+    onEditorReady(data) {
+        this._monaco = data.monaco;
+    }
+    openInfoDialog(documentation) {
+        this.matDialog.open(InfoDialogComponent, {
+            panelClass: 'ndf-dialog',
+            width: 'min(1200px,90%)',
+            height: '90vh',
+            data: {
+                title: 'JSON_EDITOR.info',
+                type: this.metadata.type,
+                url: documentation
+            }
+        });
+    }
+    _handleMetadataChanges(changes) {
+        var _a;
+        if ((_a = changes === null || changes === void 0 ? void 0 : changes.metadata) === null || _a === void 0 ? void 0 : _a.currentValue) {
+            const metadata = changes.metadata.currentValue;
+            this._dataKeySubject.next(metadata.key);
+            this.dataStore.changeEditorType(metadata.type);
+        }
+    }
+    _handleOptionsAndThemeChanges(changes) {
+        var _a, _b, _c;
+        const themeValue = (_a = changes.theme) === null || _a === void 0 ? void 0 : _a.currentValue;
+        const optionsValue = (_b = changes.options) === null || _b === void 0 ? void 0 : _b.currentValue;
+        const isThemeFirstChange = (_c = changes === null || changes === void 0 ? void 0 : changes.theme) === null || _c === void 0 ? void 0 : _c.firstChange;
+        let mergedOptions = ___default.merge(this._defaultEditorOptions, optionsValue || {}, { language: 'json' });
+        if (themeValue && isThemeFirstChange) {
+            mergedOptions.theme = themeValue;
+        }
+        if (optionsValue || (themeValue && isThemeFirstChange)) {
+            this._optionsSubject.next(___default.cloneDeep(mergedOptions));
+        }
+        if (themeValue && !isThemeFirstChange) {
+            this._themeSubject.next(themeValue);
+        }
+    }
+}
+NdfConfigEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfigEditorComponent, deps: [{ token: 'environment' }, { token: DataStoreService }, { token: AppConfigService }, { token: i1$3.MatDialog }, { token: i4$1.Location }], target: i0.ɵɵFactoryTarget.Component });
+NdfConfigEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfConfigEditorComponent, selector: "app-ndf-config-editor", inputs: { metadata: "metadata", theme: "theme", options: "options" }, providers: [DataStoreService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"config?.enabled && isFeatureEnabled; else emptyTpl\">\r\n\t<div class=\"ndf-config-editor\" ndfFluidHeight *permission=\"{ name: config?.types[metadata?.type]?.permission }\">\r\n\t\t<div class=\"ndf-config-editor__sidebar\">\r\n\t\t\t<app-editor-settings class=\"ndf-config-editor__setting\"></app-editor-settings>\r\n\t\t\t<app-config-editor-actions\r\n\t\t\t\tappItemHeight\r\n\t\t\t\tcssVar=\"--ndf-editor-actions-height\"\r\n\t\t\t\t[saveDisabled]=\"isEditorHasErrors || !(dataStore.editorData | isValidJson)\"\r\n\t\t\t\t[config]=\"config?.types[metadata?.type]\"\r\n\t\t\t\t(onInfo)=\"openInfoDialog($event)\"\r\n\t\t\t\t(onBack)=\"navigateBack()\"\r\n\t\t\t\t(onSave)=\"saveData()\"\r\n\t\t\t>\r\n\t\t\t</app-config-editor-actions>\r\n\t\t</div>\r\n\t\t<div class=\"ndf-config-editor__content\">\r\n\t\t\t<div class=\"ndf-config-editor__topbar\">\r\n\t\t\t\t<app-editor-mode-switch\r\n\t\t\t\t\t[mode]=\"dataStore.editorMode\"\r\n\t\t\t\t\t(changeMode)=\"dataStore.changeMode($event)\"\r\n\t\t\t\t></app-editor-mode-switch>\r\n\t\t\t</div>\r\n\t\t\t<app-config-preview\r\n\t\t\t\t*ngIf=\"dataStore.editorMode === modes.PREVIEW\"\r\n        [type]=\"dataStore.editorType$ | async\"\r\n\t\t\t\t[data]=\"previewData$ | async\"\r\n\t\t\t></app-config-preview>\r\n\t\t\t<ndf-monaco-editor\r\n\t\t\t\t*ngIf=\"dataStore.editorMode === modes.EDIT\"\r\n\t\t\t\t[value]=\"editorData$ | async\"\r\n\t\t\t\t[options]=\"options$ | async\"\r\n\t\t\t\t[theme]=\"theme$ | async\"\r\n\t\t\t\t(valueChange)=\"onDataChanged($event)\"\r\n\t\t\t\t(hasError)=\"onEditorErrors($event)\"\r\n\t\t\t\t(onInit)=\"onEditorReady($event)\"\r\n\t\t\t></ndf-monaco-editor>\r\n\t\t</div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-template #emptyTpl>\r\n\t<div class=\"ndf-empty-config\">\r\n\t\t<app-no-data-found message=\"JSON_EDITOR.MESSAGES.notAllowed\"></app-no-data-found>\r\n\t</div>\r\n</ng-template>\r\n", styles: [":host{display:var(--ndf-config-wrapper-display, flex);flex-direction:var(--ndf-config-wrapper-direction, column);grid-gap:var(--ndf-config-wrapper-gap, .5rem);gap:var(--ndf-config-wrapper-gap, .5rem);flex-grow:1;height:var(--ndf-config-wrapper-height, 100%)}.ndf-empty-config{justify-content:center;align-items:center}.ndf-empty-config,.ndf-config-editor{padding:var(--ndf-editor-padding, 1rem);background-color:var(--ndf-editor-background-color, #fff);color:var(--ndf-editor-color);border-radius:var(--ndf-editor-border-radius, .5rem);display:flex;flex-grow:1;max-height:var(--ndf-fluid-height, 100%)}.ndf-config-editor{grid-gap:var(--ndf-editor--gap, 1rem);gap:var(--ndf-editor--gap, 1rem)}.ndf-config-editor__sidebar{width:var(--ndf-editor-sidebar-width, 18rem);background:var(--ndf-editor-sidebar-background);border:var(--ndf-editor-sidebars-border, 0px solid transparent);border-radius:var(--ndf-editor-sidebar-radius, 0rem);display:grid;grid-template-rows:var(--ndf-editor-sidebar-rows, 1fr auto)}.ndf-config-editor__content{flex-grow:1;background:var(--ndf-editor-content-background);border:var(--ndf-editor-content-border, 0px solid transparent);border-radius:var(--ndf-editor-content-radius, 0rem);display:flex;flex-direction:column;grid-gap:var(--ndf-editor-content-gap, 1rem);gap:var(--ndf-editor-content-gap, 1rem)}.ndf-config-editor__topbar{display:var(--ndf-editor-topbar-display, flex);justify-content:var(--ndf-editor-topbar-justify-content, flex-end)}.ndf-config-editor__setting{max-height:var(--ndf-editor-content-max-height, calc(var(--ndf-fluid-height) - var(--ndf-editor-actions-height, 125px) - 2.5rem));overflow:auto}\n"], components: [{ type: EditorSettingsComponent, selector: "app-editor-settings" }, { type: ConfigEditorActionsComponent, selector: "app-config-editor-actions", inputs: ["saveDisabled", "config"], outputs: ["onSave", "onInfo", "onBack"] }, { type: EditorModeSwitchComponent, selector: "app-editor-mode-switch", inputs: ["mode"], outputs: ["changeMode"] }, { type: ConfigPreviewComponent, selector: "app-config-preview", inputs: ["type", "data"] }, { type: MonacoEditorComponent, selector: "ndf-monaco-editor", inputs: ["value", "options", "theme", "model"], outputs: ["onInit", "hasError", "valueChange"] }, { type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: ElementHeightDirective, selector: "[appItemHeight]", inputs: ["cssVar", "calculate", "inlineStyle"], exportAs: ["appItemHeight"] }], pipes: { "isValidJson": IsValidJsonPipe, "async": i4$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfigEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-ndf-config-editor',
+                    templateUrl: './ndf-config-editor.component.html',
+                    styleUrls: ['./ndf-config-editor.component.scss'],
+                    providers: [DataStoreService]
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['environment']
+                }] }, { type: DataStoreService }, { type: AppConfigService }, { type: i1$3.MatDialog }, { type: i4$1.Location }]; }, propDecorators: { metadata: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class NdfConfigEditorModule {
+    static forRoot(config = {}) {
+        return {
+            ngModule: NdfConfigEditorModule,
+            providers: [{ provide: MONACO_EDITOR_CONFIG, useValue: config }]
+        };
+    }
+}
+NdfConfigEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfigEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NdfConfigEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfigEditorModule, declarations: [EditorModeSwitchComponent,
+        NdfConfigEditorComponent,
+        MonacoEditorComponent,
+        EditorSettingsComponent,
+        ConfigPreviewComponent,
+        ConfigEditorActionsComponent,
+        InfoDialogComponent,
+        ValidateObjectPipe,
+        IsValidJsonPipe], imports: [CommonModule,
+        MatButtonToggleModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule,
+        TranslateModule,
+        FluidHeightModule,
+        ElementHeightModule,
+        NoDataModule,
+        MarkdownModule,
+        DynamicFormModule,
+        NuxeoDialogModule,
+        MatDialogModule,
+        NdfTableModule,
+        NdfReportsModule,
+        CdkAccordionModule,
+        DirectiveModule,
+        CopyToClipboardModule], exports: [NdfConfigEditorComponent] });
+NdfConfigEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfigEditorModule, imports: [[
+            CommonModule,
+            MatButtonToggleModule,
+            MatFormFieldModule,
+            MatButtonModule,
+            MatIconModule,
+            MatTooltipModule,
+            TranslateModule,
+            FluidHeightModule,
+            ElementHeightModule,
+            NoDataModule,
+            MarkdownModule,
+            DynamicFormModule,
+            NuxeoDialogModule,
+            MatDialogModule,
+            NdfTableModule,
+            NdfReportsModule,
+            CdkAccordionModule,
+            DirectiveModule,
+            CopyToClipboardModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NdfConfigEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        EditorModeSwitchComponent,
+                        NdfConfigEditorComponent,
+                        MonacoEditorComponent,
+                        EditorSettingsComponent,
+                        ConfigPreviewComponent,
+                        ConfigEditorActionsComponent,
+                        InfoDialogComponent,
+                        ValidateObjectPipe,
+                        IsValidJsonPipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatButtonToggleModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        TranslateModule,
+                        FluidHeightModule,
+                        ElementHeightModule,
+                        NoDataModule,
+                        MarkdownModule,
+                        DynamicFormModule,
+                        NuxeoDialogModule,
+                        MatDialogModule,
+                        NdfTableModule,
+                        NdfReportsModule,
+                        CdkAccordionModule,
+                        DirectiveModule,
+                        CopyToClipboardModule
+                    ],
+                    exports: [NdfConfigEditorComponent]
+                }]
+        }] });
+
 /*
  * Public API Surface of nuxeo-development-framework
  */
@@ -42391,5 +44746,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS_TABLE_TEMPLATE, AGGREGATION_FIELD_TYPES, AUTOCOMPLETE_TEMPLATE, ActionsTableTemplateDirective, ActiveUserSwitchComponent, ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AggregationAutocompleteComponent, AggregationCheckboxComponent, AggregationCustomComponent, AggregationDateListComponent, AggregationFieldComponent, AggregationRadioComponent, AggregationSelectComponent, AggregationSwitchComponent, ApisErrorsMessagesService, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AutocompleteFilterPipe, AutocompleteTemplateDirective, AvatarComponent, AvatarModule, BaseChartBuilderService, BaseChartComponent, BaseColumnComponent, BaseComponent, BaseDatePicker, BaseDateValueAccessor, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CHART_DEFAULTS_OPTIONS, CHART_MAIN_COLOR, CHECKBOX_TEMPLATE, COLORS_COUNT, COMPARISON_OPERATOR, CUSTOM_FIELD_TYPES, CUSTOM_TEMPLATE, CachingExpiryUnit, CalendarService, CallApiService, CardComponent, CardModule, ChartComponent, ChartDataService, ChartDataTransformers, index$1 as ChartDefaults, ChartManagerService, index as ChartPlugins, ChartPluginsRegistry, index$2 as ChartUtils, ChartsModule, CheckboxTemplateDirective, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ConnectionLabelComponent, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CorrespondenceRelationComponent, CorrespondenceRelationCreateFormComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomFieldComponent, CustomMomentDateAdapter, CustomPpViewerComponent, CustomSocketComponent, CustomTemplateDirective, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DATE_LIST_TEMPLATE, DATE_LIST_VIEW, DATE_LOCALE_KEYS, DATE_TYPE, DEFAULT_DEBOUNCE_TIME, DEFAULT_VIEW, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DROPDOWN_LABEL_TEMPLATE, DROPDOWN_MULTI_LABEL_TEMPLATE, DROPDOWN_TEMPLATE, DataChartComponent, DataViewerComponent, DateFormatterService, DateHelperService, DateListTemplateDirective, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramUtils, DiagramsModule, DialogMangmentService, DigitChartService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownLabelTemplateDirective, DropdownMultiLabelTemplateDirective, DropdownTemplateDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicCustomComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicTimelineReportService, DynamicViewModule, EMPTY_TEMPLATE, ENTITY_TYPE, EXTENSION_JSONS, EditDeleteModalComponent, EmptyTemplateDirective, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FIELD_SEND_MODE, FIELD_TYPE, FILTER_CUSTOM_TEMPLATE, FILTER_DATES_TYPE, FieldHeaderComponent, FieldValueObject, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterAutocompleteInputComponent, FilterCollapseControlComponent, FilterComponent, FilterCustomTemplateDirective, FilterDateRangeComponent, FilterEmptyMessageComponent, FilterModule, FilterOptionTextComponent, FilterOptionsSortComponent, FilterPipe, FilterQueryService, FilterSearchInputComponent, FiltersByRolesPipe, FiltersMapperService, FiltersPanelComponent, FiltersPanelModule, FluidHeightDirective, FluidHeightModule, FolderModalComponent, FolderishType, FormBuilderService, GREGORIAN_DATE_FORMATS, GREGORIAN_FORMAT, GatewayNodeComponent, GatewayPortsComponent, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HIJRI_DATE_ARABIC_NAMES, HIJRI_DATE_ENGLISH_NAMES, HIJRI_DATE_FORMATS, HIJRI_FORMAT, HashTranslateAsyncPipe, HashTranslatePipe, HijriAdapterService, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, HtmlDialogComponent, IN_OUT_DIRECTION, IconService, InitializationService, InputDateComponent, InputPort, InputRangeDateComponent, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizeState, LocalizedDatePipe, LocalizedLabelPipe, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY, MESSAGE_TYPE, MIN_VISIBLE_COUNT, MY_MOMENT_FORMATS, MainfolderService, MessageService, ModeTogglerComponent, MomentDateAdapter, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NODE_CIRCLE_SIZE, NODE_GATEWAY_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfirmationDialogComponent, NdfDatepickerComponent, NdfDatepickerModule, NdfGregorianDatepickerComponent, NdfHijriDatepickerComponent, NdfNuxeoDialog, NdfPanelComponent, NdfPanelModule, NdfReportComponent, NdfReportsComponent, NdfReportsModule, NdfReportsService, NdfTableComponent, NdfTableConfigurationService, NdfTableModule, NdfTableService, NdfTabsComponent, NdfTabsModule, NdfTransformService, NgxHijriGregorianDatepickerModule, NoDataComponent, NoDataFoundComponent, NoDataModule, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NodePortsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, NxQL, OutputPort, PAGINATION_MODE, PANEL_MODE, PREDICATE_FIELD_TYPES, PageSizesListComponent, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PredicateDateInputComponent, PredicateFieldComponent, PredicateTextInputComponent, PublishDialogComponent, PublishingDocumentService, RADIO_TEMPLATE, RadioTemplateDirective, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, ReportConfigMapperService, ReportTransformService, ReportsStateService, RolesService, SEARCH_TABLE_TEMPLATE, SOCKET_WIDTH, SUBSCRIPTION_STATE, SWITCH_TEMPLATE, SafeHtmlPipe, SanitizerPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SearchTableTemplateDirective, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SilentPdfTronService, SingleActivityComponent, SkeletonComponent, SkeletonModule, Socket, SortListPipe, SortingListComponent, SpellCheckerFieldModule, SpellCheckerTextFieldComponent, SpinnerComponent, StatisticService, StatusIconComponent, SwitchTemplateDirective, TRANSLATION_PROVIDER, TableColumnsTogglerComponent, TableComponent, TableExportComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TextSearchComponent, TimeAgoPipe, ToastsModule, TooltipPipe, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VALUE_OBJECT, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getChartsOptions, getConnections, getDoughnutOptions, getHorizontalBarOptions, getLineOptions, getPieOptions, getRandomNumber, getValue, getVerticalBarOptions, isDateObject, isFieldValueObject, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeEmptyKeys, removeNode, removeNodeAndConnections, serializeControl, serializePort, slideAnimation, sortByOrder };
+export { ACTIONS_TABLE_TEMPLATE, AGGREGATION_FIELD_TYPES, AUTOCOMPLETE_TEMPLATE, ActionsTableTemplateDirective, ActiveUserSwitchComponent, ActivitiesLogComponent, ActivitiesLogModule, ActivityLineComponent, AdapterService, AddPermissionsDialogComponent, AddToCollectionComponent, AggregationAutocompleteComponent, AggregationCheckboxComponent, AggregationCustomComponent, AggregationDateListComponent, AggregationFieldComponent, AggregationRadioComponent, AggregationSelectComponent, AggregationSwitchComponent, ApisErrorsMessagesService, AppConfigService, AppHasRoleDirective, AttachmentItemComponent, AttachmentItemModule, AttachmentModalModule, AttachmentsComponent, AttachmentsListComponent, AttachmentsPageProviderComponent, AutocompleteFilterPipe, AutocompleteTemplateDirective, AvatarComponent, AvatarModule, BaseChartBuilderService, BaseChartComponent, BaseColumnComponent, BaseComponent, BaseDatePicker, BaseDateValueAccessor, BaseDialogComponent, BaseNodeClass, BaseSelector, BaseService, BooleanViewerComponent, ButtonComponent, CHART_DEFAULTS_OPTIONS, CHART_MAIN_COLOR, CHECKBOX_TEMPLATE, COLORS_COUNT, COMPARISON_OPERATOR, CONFIG_EDITOR_MODE, CUSTOM_FIELD_TYPES, CUSTOM_TEMPLATE, CachingExpiryUnit, CalendarService, CallApiService, CardComponent, CardModule, ChartComponent, ChartDataService, ChartDataTransformers, index$1 as ChartDefaults, ChartManagerService, index as ChartPlugins, ChartPluginsRegistry, index$2 as ChartUtils, ChartsModule, CheckboxTemplateDirective, CircleNode, CircleNodeComponent, ClickOutsideDirective, ClipboardComponent, CommentApiService, CommentsDashletComponent, CommentsModule, ComponentRegisterService, ComponentTranslationModel, ConfigEditorActionsComponent, ConfigPreviewComponent, ConfirmCallerDialogComponent, ConfirmCallerModule, ConfirmDialogComponent, ConfirmationDialogComponent, ConfirmationDialogModule, Connection, ConnectionLabelComponent, ContentActionType, ContentNode, ContentNodeComponent, CopyComponent, CopyToClipboardDirective, CopyToClipboardModule, CorrespondenceRelationComponent, CorrespondenceRelationCreateFormComponent, CorrespondenceRelationModule, CorrespondenceRelationService, CorrespondenceTagsComponent, CreateDirectoryComponent, CreateEntityComponent, CreateEntityModule, CreateModalComponent, CreationTypeComponent, CtsTagsModule, CustomConnectionComponent, CustomDocumentViewerComponent, CustomFieldComponent, CustomMomentDateAdapter, CustomPpViewerComponent, CustomSocketComponent, CustomTemplateDirective, CustomToastrModule, CustomToastrService, CutomeVocViewerComponent, DATE_LIST_TEMPLATE, DATE_LIST_VIEW, DATE_LOCALE_KEYS, DATE_TYPE, DEFAULT_DEBOUNCE_TIME, DEFAULT_VIEW, DIAGRAM_DEFAULT_OPTIONS, DIAGRAM_HEIGHT, DROPDOWN_LABEL_TEMPLATE, DROPDOWN_MULTI_LABEL_TEMPLATE, DROPDOWN_TEMPLATE, DataChartComponent, DataViewerComponent, DateFormatterService, DateHelperService, DateListTemplateDirective, DateViewerComponent, DeleteComponent, DepartmentApiService, DepartmentFormComponent, DepartmentManagementService, DepartmentViewerComponent, DestroySubject, DiagramDirective, DiagramPluginsService, DiagramService, DiagramUtils, DiagramsModule, DialogMangmentService, DigitChartService, DirectiveModule, DisplaySuitableIconComponent, DisplaySuitableIconModule, DocumentScanService, DocumentTemplatesConstants, DocumentTemplatesService, DocumentUploadComponent, DocumentsComponent, DocumentsConstants, DocumentsListComponent, DocumentsModule, DocumentsService, DragAndDropDirective, DropdownLabelTemplateDirective, DropdownMultiLabelTemplateDirective, DropdownTemplateDirective, DropdownViewerComponent, DynamicChartComponent, DynamicChartModule, DynamicColumnComponent, DynamicCustomComponent, DynamicFieldsRendererComponent, DynamicFieldsRendererModule, DynamicFilterComponent, DynamicFilterModule, DynamicFormBoolItemComponent, DynamicFormBuilderComponent, DynamicFormCheckboxItemComponent, DynamicFormComponent, DynamicFormDateItemComponent, DynamicFormDepartmentComponent, DynamicFormFieldComponent, DynamicFormHijriDateitemComponent, DynamicFormMapItemComponent, DynamicFormModule, DynamicFormOptionsComponent, DynamicFormSelectItemComponent, DynamicFormSelectTagComponent, DynamicFormSelectUserFilterComponent, DynamicFormSelectUsersComponent, DynamicFormService, DynamicFormSlideToggleitemComponent, DynamicFormTextItemComponent, DynamicFormTextareaComponent, DynamicFormViewerComponent, DynamicFormVocabularyItemComponent, DynamicSearchComponent, DynamicSearchModule, DynamicTableComponent, DynamicTableModule, DynamicTableService, DynamicTabsComponent, DynamicTabsModule, DynamicTimelineReportService, DynamicViewModule, EMPTY_TEMPLATE, ENTITY_TYPE, EXTENSION_JSONS, EditDeleteModalComponent, EditorModeSwitchComponent, EditorSettingsComponent, ElementHeightDirective, ElementHeightModule, EmptyTemplateDirective, EnvManager, EvaluatorsService, ExtensionLoaderService, ExtensionService, FIELD_SEND_MODE, FIELD_TYPE, FILTER_CUSTOM_TEMPLATE, FILTER_DATES_TYPE, FieldHeaderComponent, FieldValueObject, FileGridInfiniteScrollDirective, FileManagerAbstract, FileManagerAdapter, FileManagerPaginationConfig, FileManagerService, FileMangerModule, FileSizePipe, FilterAutocompleteInputComponent, FilterCollapseControlComponent, FilterComponent, FilterCustomTemplateDirective, FilterDateRangeComponent, FilterEmptyMessageComponent, FilterModule, FilterOptionTextComponent, FilterOptionsSortComponent, FilterPipe, FilterQueryService, FilterSearchInputComponent, FiltersByRolesPipe, FiltersMapperService, FiltersPanelComponent, FiltersPanelModule, FluidHeightDirective, FluidHeightModule, FolderModalComponent, FolderishType, FormBuilderService, GREGORIAN_DATE_FORMATS, GREGORIAN_FORMAT, GatewayNodeComponent, GatewayPortsComponent, GlobalAdminService, GlobalPdfTron, GregorianDatepickerComponent, HIJRI_DATE_ARABIC_NAMES, HIJRI_DATE_ENGLISH_NAMES, HIJRI_DATE_FORMATS, HIJRI_FORMAT, HashTranslateAsyncPipe, HashTranslatePipe, HijriAdapterService, HijriDatePipe, HijriDatepickerComponent, HijriGregorianDatepickerComponent, HtmlDialogComponent, IN_OUT_DIRECTION, IconService, InfoDialogComponent, InitializationService, InputDateComponent, InputPort, InputRangeDateComponent, ItemListComponent, Lang, LatestActivityComponent, LatestActivityModule, LibrarySharedModule, ListViewerComponent, LoanRequestComponent, LocalStoragService, LocalizeState, LocalizedDatePipe, LocalizedLabelPipe, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY, MESSAGE_TYPE, MIN_VISIBLE_COUNT, MONACO_EDITOR_CONFIG, MY_MOMENT_FORMATS, MainfolderService, MessageService, ModeTogglerComponent, MomentDateAdapter, MonacoEditorComponent, MoveComponent, MultiValuePipe, MultipleDynamicFormViewerComponent, MutipleDynamicFormViewerModule, NDF_EDITOR_TYPE, NODE_CIRCLE_SIZE, NODE_GATEWAY_SIZE, NODE_HEIGHT, NODE_MARGIN, NODE_STATUS, NODE_TYPE, NODE_WIDTH, NOTIFICATIONS_LIST_OPTIONS, NOTIFICATION_ICON, NOTIFICATION_ITEM, NOTIFICATION_STATUS, NOTIFY_EVENT, NdfConfigEditorComponent, NdfConfigEditorModule, NdfConfirmationDialogComponent, NdfDatepickerComponent, NdfDatepickerModule, NdfGregorianDatepickerComponent, NdfHijriDatepickerComponent, NdfNuxeoDialog, NdfPanelComponent, NdfPanelModule, NdfReportComponent, NdfReportsComponent, NdfReportsModule, NdfReportsService, NdfTableComponent, NdfTableConfigurationService, NdfTableModule, NdfTableService, NdfTabsComponent, NdfTabsModule, NdfTransformService, NgxHijriGregorianDatepickerModule, NoDataComponent, NoDataFoundComponent, NoDataModule, NodeIconComponent, NodeInputsComponent, NodeOutputsComponent, NodePortsComponent, NotificationIconDirective, NotificationItemComponent, NotificationItemDirective, NotificationSourceSelectComponent, NotificationStatusToggleComponent, NotificationToastComponent, NotificationsButtonComponent, NotificationsDateSelectComponent, NotificationsListComponent, NotificationsListContainerComponent, NotificationsModule, NotificationsService, NotificationsSettingsContainerComponent, NuxeoCoreModule, NuxeoDevelopmentFrameworkComponent, NuxeoDevelopmentFrameworkModule, NuxeoDevelopmentFrameworkService, NuxeoDialogModule, NuxeoDialogService, NuxeoMapper, NuxeoService, NxQL, OutputPort, PAGINATION_MODE, PANEL_MODE, PARAMS_KEYS, PREDICATE_FIELD_TYPES, PROJECT_BASE_HREF, PageSizesListComponent, PaginationComponent, PaginationModule, PdfTronModule, PdftronComponent, PdftronService, PermissionService, PermissionsComponent, PermissionsDirective, PermissionsModule, PermissionsTemplateComponent, PipesModule, PredicateDateInputComponent, PredicateFieldComponent, PredicateTextInputComponent, PublishDialogComponent, PublishingDocumentService, RADIO_TEMPLATE, RadioTemplateDirective, ReadMoreComponent, RecentlyViewedService, RemoveButtonComponent, RenameComponent, ReportConfigMapperService, ReportTransformService, ReportsStateService, RolesService, SEARCH_TABLE_TEMPLATE, SOCKET_WIDTH, SUBSCRIPTION_STATE, SWITCH_TEMPLATE, SafeHtmlPipe, SanitizerPipe, ScanComponent, ScanModalComponent, SearchAutocompleteComponent, SearchTableTemplateDirective, SecurePipe, SelectComponent, SelectModule, SelectUsersByDepartmentModule, SelectUsersByDepartmentsComponent, SetDirRtlDirective, SetRtlDirective, ShareDialogComponent, SharedDocsService, SharedServicesModule, SidepanelComponent, SilentPdfTronService, SingleActivityComponent, SkeletonComponent, SkeletonModule, Socket, SortListPipe, SortingListComponent, SpellCheckerFieldModule, SpellCheckerTextFieldComponent, SpinnerComponent, StatisticService, StatusIconComponent, SwitchTemplateDirective, TRANSLATION_PROVIDER, TableColumnsTogglerComponent, TableComponent, TableExportComponent, TableModule, TagsApiService, TemplateModalComponent, TemplateNode, TemplateNodeComponent, TextSearchComponent, TimeAgoPipe, ToastsModule, TooltipPipe, TransferDocComponent, TranslateLoaderService, TranslatedVocabularySelectComponent, TranslationService, TreeviewSelectComponent, UpdateModalComponent, UploadFileService, UploadManagmentService, UserCardComponent, UserComponent, UserModule, UserPreferenceValues, UserPreferencesService, UserService, UsersCardComponent, UsersCardModule, UtilityService, VALUE_OBJECT, VersionsComponent, ViewerFilesService, ViewerLogComponent, ViewerLogModule, VocabularyApiService, VocabularyComponent, VocabularyModule, WorkflowService, ZoomControlComponent, appInitializer, departmentCacheBuster$, extensionJsonsFactory, filterEnabled, getChartsOptions, getConnections, getDoughnutOptions, getHorizontalBarOptions, getLineOptions, getPieOptions, getRandomNumber, getValue, getVerticalBarOptions, isDateObject, isFieldValueObject, mergeArrays, mergeObjects, minute$1 as minute, provideExtensionConfig, reduceEmptyMenus, reduceSeparators, removeConnections, removeEmptyKeys, removeNode, removeNodeAndConnections, serializeControl, serializePort, slideAnimation, sortByOrder };
 //# sourceMappingURL=nuxeo-development-framework.js.map