@eo-sdk/client 9.0.0-rc.5 → 9.0.0-rc.7

package/fesm2015/eo-sdk-client.js

@@ -1,4 +1,4 @@
-import { Injectable, Inject, ApplicationRef, NgZone, Pipe, NgModule, EventEmitter, Injector, ɵɵdefineInjectable, ɵɵinject, ErrorHandler, Optional, SkipSelf, Component, Input, Output, ViewEncapsulation, ElementRef, Renderer2, Directive, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, HostBinding, ViewContainerRef, forwardRef, ViewChildren, ContentChildren, ANALYZE_FOR_ENTRY_COMPONENTS, InjectionToken, ComponentFactoryResolver, ContentChild, QueryList } from '@angular/core';
+import { Injectable, Inject, ApplicationRef, NgZone, Pipe, NgModule, EventEmitter, Injector, ɵɵdefineInjectable, ɵɵinject, ErrorHandler, Optional, SkipSelf, Component, Input, Output, ViewEncapsulation, ElementRef, Renderer2, Directive, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, HostBinding, ViewContainerRef, ViewChildren, forwardRef, ContentChildren, ANALYZE_FOR_ENTRY_COMPONENTS, InjectionToken, ComponentFactoryResolver, ContentChild, QueryList } from '@angular/core';
 import { DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, getLocaleDateTimeFormat, FormatWidth, getLocaleTimeFormat, getLocaleDateFormat, CommonModule, Location, PlatformLocation } from '@angular/common';
 import { HttpClient, HttpResponse, HttpErrorResponse, HttpClientModule, HTTP_INTERCEPTORS, HttpHeaders } from '@angular/common/http';
 import { ReplaySubject, BehaviorSubject, from, forkJoin, of, Subject, fromEvent, AsyncSubject, Observable } from 'rxjs';
@@ -13,11 +13,12 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { OverlayPanelModule, DialogModule, InputMask, AutoComplete, InputTextModule, InputMaskModule, AutoCompleteModule, CheckboxModule, TriStateCheckboxModule, InputTextareaModule, ChipsModule, DropdownModule, SharedModule, TabPanel, TabViewModule, FieldsetModule, CalendarModule, TabView, TabViewNav, DragDropModule as DragDropModule$1 } from 'primeng/primeng';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import { A11yModule } from '@angular/cdk/a11y';
+import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
 import * as moment_ from 'moment';
 import 'moment/min/locales';
 import * as _ from 'lodash';
 import { uniqBy, cloneDeep, groupBy as groupBy$1, orderBy } from 'lodash';
-import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
 import { AgGridModule } from '@ag-grid-community/angular';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { CsvExportModule } from '@ag-grid-community/csv-export';
@@ -960,6 +961,7 @@ class PluginsService {
         return {
             serviceBase: this.backend.getServiceBase()
             // todo: do we have to provide the plugin developers with these informations?
+            // after speaking to Andreas also removed from documentation
             // pluginsBase: $eoConfig.getPluginBase(),
             // pluginStatesBase: $eoConfig.getPluginStatesBase(),
             // themeBase: $eoConfig.getThemeBase()
@@ -3481,20 +3483,26 @@ IndexdataSummaryComponent.propDecorators = {
 };
 
 class UserAvatarComponent {
-    constructor(userService) {
+    constructor(userService, eventService) {
         this.userService = userService;
+        this.eventService = eventService;
         // tslint:disable-next-line:max-line-length
         this.defImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkZDQTZDQkFFMDRERDExRTg4OUIxQzk4OTI4N0QzREVCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkZDQTZDQkFGMDRERDExRTg4OUIxQzk4OTI4N0QzREVCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkNBNkNCQUMwNEREMTFFODg5QjFDOTg5Mjg3RDNERUIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkNBNkNCQUQwNEREMTFFODg5QjFDOTg5Mjg3RDNERUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7oRrTHAAAINklEQVR42uydf1MTSRBAOyEEAgZBEBStuj/u+38j66q88ziMqAgEAiSs25feInJXySQ7y87OvFc1VSrIsrOPpqfnx7ayLBOAWGjTBYDQAAgNgNAACA0IDYDQAAgNgNAACA0IDYDQAAgNgNAACA0IDYDQAAgNgNAACA0IDYDQAAgNgNAACA0IDYDQAAgNgNAACA0IDYDQAAgNgNAACA0IDYDQAAgNgNCA0AAIDYDQAAgNgNCA0AAIDYDQAFXRoQu80crbRt66eVvP25q1tn1MyfL2kLeJtfu83eXt1j4GCF1r323nbStvPZO5DCr1Td6u8zbM25guXiGqZBmBYQk08u5Y26z4WqO8XVi7p+sR2if9vO3m7UVN17/K23neLnkUCF0mJ9ZIfGB5cQhovn1mUZsHh9BLReTDgET+P7EHRGyEXoQK/MYGe01AB4+nJjgg9C+8sqjcatj3nVm0/sYjRGhFy2/HDYrK86L1iSRe7ktdaK0fv5d46vEq8yeZ1rMROjF2LDK3IruvzCL1BUKnlS8fRX6Pn1PMq1NcnLSfgMxi97iP0PFH5sOE7vfQ7hmhI82ZjyQ9juzeEToiejYATJVj6wOEjgAtyWlpznc147tM1zY3YvAvcZUnkxb6uIIHqSLr7Nxpw36wjxG6+YPAKmYAi+j8w/7cFLZjHyTGLHRXqqloqMhfZ/6uUXrYoH4JeRUhQs/hjVQzC6gyT578W5Omm1vWNwjdIPoVpRr3T6LzbNT+s0FSb1sfIXRDIlBVkyeaXmRzUhGV+rpBqUcLocNnp6IcURf7XDnk139JM3aSdCXCCZcYhT6o4GuOxb1E92A59VmifYXQnnNn39E5M0EnS/6/LxatJwH3Vze2XDo2oXcr+JqDEoM9TVH+cEhVYuszhPaAHgLj+9wMPQuj7JrisUXqk0Cj9QvrO4QOcDDoEx3Y/ePx6+ms4geZlv2yyPsOoQN7KFp6+7uC77FYA/LBIn+G0H7pRHQfvs6auzKZq5RN0xDdInVmOexezb/2N60PxwgdBr5mBX9YmvFckXNiKYi2LYuU/Zqey7bdP0IHwJaHr/FF6q0dX1s7tYipgvWsdUr+0Iwcfui3EDoceiUf+ImEVVobWZt9Tl1rHWvtJ2OgB3k8TF1ThztrxVG8v8v8Gn0UO1piELo4OX/VqHgi4Z+/PLZWZp3IcIHQG9aXjT7XIoYqxyoyP9iv9o+SzmHiNxX1JRHaM8tOdWueOJD0zoC7dezLEULXi2u569IGfreSJrce+xKhK2TNYdD3MWGRCzL7rdQp0Zfk0AEIPUbmX/pCELrZ9zBpaL9VcY2H2H2IpWxX5iEuM/h8LdPVaW37uleWl9815BpZyb5E6AYI74LOsr1/EsH0zzsmn24AGDbgGtETQ8qRVXyPmle+m/N12vbxtcCv4dIXGULXT9V54a6DSGtSbufHc1zDpS8eELp+Jg4ilKHn+fPquoZLX0wQOnyhOyXvs+X58+q6RtthzITQAeCyFqPMTvBbz59X1zW6nvoSoSvGpZxVZtHNhefPq+saG576EqErxiVqlck9dbHO1wWf81XKLep5jmv0PPVl0MRQh87sQcyLQGW3aBWr817LfxfV66SHj9enVX2NbQeZM4QOg5sFQmv+uF4yR1Sh9JyOLasW6ADqWvyWuqq6xrpDDh3F22djEVof+qIabd9DlCumoqukimv0Hfuw8cRyLofLlPBLSZeXnvoQoZ+JscOAaVMi2GK0YnVj0ZklI4lkB09MJye5lLT2EhR6z1PfIXSAQu9KGisMZ8dIuwjdTO4dBlM6dZzSC933ZfF0+ZVEtPM9tvOhzx1/BXcTkLnrmG6cx3TTsQmtO7sXTd9G/VqzGVxea3cnzXgfTLJCKy7n0+msWcxlvJfiNjt6FtuNxyj0hbgtsjmSiE6un2Hd7m0RdzENBmMWWtcjDBw+r9j2FNO7+lrivlVrIBGs3UhB6CKXdpn50hVobyO677fitqpuGFvuHLvQyqljBNJ8M4b39R04jgsycX/nIkIHxJ1j6qHoks0m16f37R5cGEgEC/lTFFr5Ju6Lbg4bGqkPxP3d5kPxs3YboWtEDzR3XXijUe64IQPFln2vrpF5bH0RNa0syxJw+t+B0m9LiKqL3fVNWKFOCWtp7p24by3Th/xRIlnEj9BTdkwCV3S3iL56LbQX6ejAT+vMy5w3oj+cFyk85JSEVl6J26TD07zzNICBlK7N0OnsZfdHfo49b05Z6KIicLjk/9FO+i7TndfPvRC+Y9/z3gq5/UAW7yZH6EQjdSH2ucld9Zb/DZN4d8VBalKROXWhi5y6TEVjZPn1pcfBow72+pYnr/qq58yqGRcpPtSUhRarEryX8rtY7izXvrHIrX93ORW1a5G4Z7lx2XXamg59SqGagdDzc9Rj8fe+8Fm5JvL4htdC4rZVKHxvBRvKcjV3hE4grz6U5q2+K1YXfuMRIvRTVi2N1UUoJUWEDpy+RetQ9x4WC68ueVQI7dw3Mq2EHAQktop8ZhUMHhxCl4rYWg9+UdP19aiBcyIyQvtm3aK2ts2KrzWySKztnq5H6Krp2OBRj77VOnLZc/O0fq3142sb7I3pYoSuO+fekMezqNesteWxFKidrTXpibV7y4ujOGwcoQE806YLAKEBEBoAoQEQGhAaAKEBEBoAoQEQGhAaAKEBEBoAoQEQGhAaAKEBEBoAoQEQGhAaAKEBEBoAoQEQGhAaAKEBEBoAoQEQGhAaAKEBEBoAoQEQGhAaAKEBEBoAoQGhARAaAKEBEBoAoQGhARAaAKEBquKnAAMAnMDZVSbpyVsAAAAASUVORK5CYII=';
         this.backgroundImage = 'initial';
-        this.createUserBackground();
-    }
-    createUserBackground() {
         this.subscription = this.userService.user$
             .subscribe(u => {
+            this.userId = u.id;
             this.present = u.present;
-            this.backgroundImage = u.imageUri ? `url(${u.imageUri})` : `url(${this.defImg})`;
+            this.refreshUserImage();
+        });
+        this.eventService.on(EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE).subscribe(() => {
+            this.refreshUserImage();
         });
     }
+    refreshUserImage() {
+        const timestamp = new Date().getTime().toString();
+        this.backgroundImage = `url(${this.userService.getUserImageUri(this.userId) + '&t=' + timestamp}), url(${this.defImg})`;
+    }
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
@@ -3507,7 +3515,8 @@ UserAvatarComponent.decorators = [
             },] }
 ];
 UserAvatarComponent.ctorParameters = () => [
-    { type: UserService }
+    { type: UserService },
+    { type: EventService }
 ];
 UserAvatarComponent.propDecorators = {
     backgroundImage: [{ type: HostBinding, args: ['style.background-image',] }],
@@ -3712,7 +3721,7 @@ class EoDialogComponent extends UnsubscribeOnDestroy {
 EoDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-dialog',
-                template: "<ng-template #dialogContent>\n  <div class=\"eo-dialog\" [ngClass]=\"styleClass || ''\" eoRtlAware=\"dir\">\n    <header class=\"eo-dialog-header\" [ngClass]=\"styleClass ? styleClass + '--header ' : ''\">\n      <h5 class=\"headline\">{{title}}</h5>\n      <h6 *ngIf=\"subtitle\" class=\"subtitle\">{{subtitle}}</h6>\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"closeDialog()\" class=\"button white eo-dialog-close\"></eo-icon>\n      <ng-container *ngIf=\"isFormTable && hasPreviewFile\">\n        <eo-icon *ngIf=\"showPreview\" [iconSrc]=\"'assets/_default/svg/ic_preview_close.svg'\"\n                 [iconTitle]=\"'eo.form.table.dialog.preview.hide' | translate\" (click)=\"togglePreview()\" class=\"button white eo-dialog-preview-toggle\"></eo-icon>\n        <eo-icon *ngIf=\"!showPreview\" [iconSrc]=\"'assets/_default/svg/ic_preview_show.svg'\"\n                 [iconTitle]=\"'eo.form.table.dialog.preview.show' | translate\" (click)=\"togglePreview()\" class=\"button white eo-dialog-preview-toggle\"></eo-icon>\n      </ng-container>\n    </header>\n    <div class=\"eo-dialog-content\" [ngClass]=\"styleClass ? styleClass + '--content ' : ''\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
+                template: "<ng-template #dialogContent>\n  <div class=\"eo-dialog\" [ngClass]=\"styleClass || ''\" eoRtlAware=\"dir\">\n    <header class=\"eo-dialog-header\" [ngClass]=\"styleClass ? styleClass + '--header ' : ''\">\n      <h5 class=\"headline\">{{title}}</h5>\n      <h6 *ngIf=\"subtitle\" class=\"subtitle\">{{subtitle}}</h6>\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"closeDialog()\" class=\"button white eo-dialog-close\"></eo-icon>\n      <ng-container *ngIf=\"isFormTable && hasPreviewFile\">\n        <eo-icon *ngIf=\"showPreview\" [iconSrc]=\"'assets/_default/svg/ic_preview_close.svg'\"\n                 [iconTitle]=\"'eo.form.table.dialog.preview.hide' | translate\" (click)=\"togglePreview()\" class=\"button white eo-dialog-preview-toggle\"></eo-icon>\n        <eo-icon *ngIf=\"!showPreview\" [iconSrc]=\"'assets/_default/svg/ic_preview_show.svg'\"\n                 [iconTitle]=\"'eo.form.table.dialog.preview.show' | translate\" (click)=\"togglePreview()\" class=\"button white eo-dialog-preview-toggle\"></eo-icon>\n      </ng-container>\n    </header>\n    <div class=\"eo-dialog-content\" [ngClass]=\"styleClass ? styleClass + '--content ' : ''\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
                 encapsulation: ViewEncapsulation.None,
                 styles: [".eo-dialog{-webkit-animation:none;animation:none;background-color:var(--panel-background);display:flex;flex:1;flex-direction:column;max-height:100%;max-width:100%;min-height:0;min-width:0}.eo-dialog-close{position:absolute;right:5px;top:5px;z-index:2}.eo-dialog-preview-toggle{position:absolute;right:5px;top:50px;z-index:2}.eo-dialog-header{background-color:var(--color-accent);color:var(--color-white);flex:0 0 auto;font-size:var(--font-headline);font-weight:var(--font-weight-light);padding:var(--app-pane-padding) calc(var(--app-pane-padding)*2.5) calc(var(--app-pane-padding)*2) var(--app-pane-padding)}.eo-dialog-header .headline{font-size:24px;font-weight:400;margin:0 25px 0 0}.eo-dialog-header .subtitle{font-size:15px;font-weight:400;margin:0}.eo-dialog-content{display:flex;flex:1;flex-direction:column;height:100%;max-height:520px;min-height:0;min-width:0;overflow:auto;position:relative}.eo-dialog-content>eo-tree{margin:var(--app-pane-padding)}.eo-dialog-content .empty{align-items:center;color:var(--text-color-caption);display:flex;flex:1;flex-direction:column;justify-content:center;min-height:0;min-width:0;padding:var(--app-pane-padding)}.eo-dialog-content .action-buttons{justify-content:flex-end;padding-top:32px}.eo-dialog-content button:not(:last-child){margin-right:5px}.object-form-table-dialog{background-color:var(--panel-background-grey);height:95vh;width:100%}.object-form-table-dialog .body{height:80vh;width:100%}.object-form-table-dialog .edit-body{display:flex;height:100%}.object-form-table-dialog .table-body{background-color:var(--panel-background-grey);display:flex;height:100%;width:100%}.object-form-table-dialog eo-split{padding:var(--app-pane-padding);width:auto!important}.object-form-table-dialog eo-split-area{box-shadow:0 2px 5px 0 rgba(0,0,0,.2)}.object-form-table-dialog eo-row-edit{background-color:var(--color-white);display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.object-form-table-dialog eo-row-edit .row-edit{display:flex;flex-direction:column;height:100%}.object-form-table-dialog eo-row-edit .row-edit .edit-header{display:flex;justify-content:space-between}.object-form-table-dialog eo-row-edit .row-edit .edit-header .new-indicator{color:var(--text-color-caption);font-size:var(--font-title);margin:8px 16px 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.object-form-table-dialog eo-row-edit .row-edit .edit-header .cancel-icon{color:var(--text-color-caption);margin:8px 8px 0}.object-form-table-dialog eo-row-edit .row-edit .edit-header .cancel-icon:hover{background:rgba(var(--color-black-rgb),.1)}.object-form-table-dialog eo-row-edit .row-edit .form{height:100%;overflow:auto}.object-form-table-dialog eo-row-edit .row-edit .actions{align-items:center;border-top:1px solid var(--panel-header-border-bottom-color);display:flex;flex:0;flex-direction:row;justify-content:flex-end;min-height:0;min-height:5em;min-width:0;padding-right:var(--app-pane-padding)}.object-form-table-dialog eo-row-edit .row-edit .actions button{height:3em;margin:0 calc(var(--app-pane-padding)/8);padding:0 calc(var(--app-pane-padding)/2)}.object-form-table-dialog eo-row-edit .row-edit .actions eo-checkbox{margin:0 calc(var(--app-pane-padding)/2)}.object-form-table-dialog eo-row-edit .row-edit .actions .add-label{color:var(--text-color-caption);font-size:var(--font-body);margin-right:var(--app-pane-padding)}.object-form-table-dialog .object-form-table{background-color:#fff;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;height:100%;width:100%}.object-form-table-dialog .object-form-table .grid-body{height:100%;position:relative;width:100%}.object-form-table-dialog .object-form-table .grid-body .ag-theme-balham .ag-header{background-color:unset!important}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular{background-color:transparent;height:100%;width:100%}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .copy-cell,.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .new-row{-webkit-animation-duration:4s;-webkit-animation-name:new-row;animation-duration:4s;animation-name:new-row}@-webkit-keyframes new-row{0%{background-color:var(--color-accent)}to{background-color:none}}@keyframes new-row{0%{background-color:var(--color-accent)}to{background-color:none}}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell{align-items:center;display:flex;font-size:var(--font-caption);line-height:var(--oft-row-height);padding:0 calc(var(--app-pane-padding)/4)}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.ag-cell-focus{background-color:var(--list-item-hover-background);border-color:transparent!important;outline:0!important}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell svg{pointer-events:none}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.col-boolean,.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.res-ico{justify-content:center}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.col-number{justify-content:flex-end}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell .action-icon{cursor:pointer;display:flex}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell .action-icon svg{fill:var(--text-color-caption)}.object-form-table-dialog .label{align-items:center;border-bottom:0;display:flex;flex-flow:row nowrap;padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/4)}.object-form-table-dialog .label span{display:block;flex:1 1 auto}.object-form-table-dialog .label eo-icon.stf{color:var(--text-color-caption);cursor:pointer;height:20px;margin:calc(var(--app-pane-padding)/4);width:20px}.object-form-table-dialog .label eo-icon.stf.add-row{background-color:var(--color-accent);border-radius:2px;color:#fff;height:24px;width:24px}.object-form-table-dialog .label button.add{border-radius:2px;padding:calc(var(--app-pane-padding)/2)}.object-form-table-dialog .label button.export{border:1px solid #000;border-radius:2px;color:#000;font-size:var(--font-hint);margin:0 calc(var(--app-pane-padding)/4);padding:calc(var(--app-pane-padding)/8) calc(var(--app-pane-padding)/4)}.object-form-table-dialog .eo-dialog-content{height:100%;max-height:none;overflow:hidden}.object-form-table-dialog .table-area{overflow:unset!important}.cdk-overlay-pane{position:absolute!important}"]
             },] }
@@ -3852,7 +3861,8 @@ UiModule.decorators = [
                     RouterModule,
                     DialogModule,
                     AccordionModule,
-                    OverlayModule
+                    OverlayModule,
+                    A11yModule
                 ],
                 exports: [
                     CommonModule,
@@ -3891,6 +3901,48 @@ UiModule.decorators = [
             },] }
 ];
 
+const STATE = {
+    LOADING: 'loading',
+    READY: 'ready',
+    ERROR: 'error'
+};
+class PanelLoading {
+    constructor() {
+        this.state = '';
+        this.loading = () => this._set(STATE.LOADING);
+        this.ready = () => this._set(STATE.READY);
+        this.error = () => this._set(STATE.ERROR);
+        this.isLoading = () => this.state === STATE.LOADING;
+        this.isReady = () => this.state === STATE.READY;
+        this.isError = () => this.state === STATE.ERROR;
+    }
+    _set(_state) {
+        this.state = _state;
+    }
+    subscribe(observable, success, error) {
+        this.loading();
+        return observable.subscribe((res) => {
+            if (success) {
+                success.call(this, res);
+            }
+            this.ready();
+        }, (err) => {
+            if (error) {
+                error.call(this, err);
+            }
+            this.error();
+        });
+    }
+}
+const panelLoadingAnimations = trigger('panelLoading', [
+    state(STATE.ERROR, style({ opacity: 0 })),
+    state(STATE.LOADING, style({ opacity: 0.5 })),
+    state(STATE.READY, style({ opacity: 1 })),
+    transition(STATE.LOADING + ' <=> ' + STATE.READY, [
+        animate(200)
+    ])
+]);
+
 class AppBarComponent extends UnsubscribeOnDestroy {
     constructor(userService, capabilityService, translate, inboxService, prepareService, clipboard, renderer, router, bpmService, eventService, config) {
         super();
@@ -4029,7 +4081,7 @@ class AppBarComponent extends UnsubscribeOnDestroy {
 AppBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-app-bar',
-                template: "<eo-side-bar (eoOutsideClick)=\"sidebarShow = !sidebarShow\" *ngIf=\"sidebarShow\">\n  <div class=\"navi\">\n    <ng-content select=\"eo-sidebar-plugin.navi\"></ng-content>\n  </div>\n  <div class=\"help\">\n    <ng-content select=\"eo-sidebar-plugin.help\"></ng-content>\n  </div>\n</eo-side-bar>\n\n<div class=\"eo-app-bar\" [ngClass]=\"{transparent: transparent}\" eoRtlAware>\n\n  <div class=\"left\">\n\n    <eo-icon id=\"app-menu\" class=\"menu white\" tabindex=\"0\"\n             (click)=\"sidebarShow = !sidebarShow\" (keyup.enter)=\"sidebarShow = !sidebarShow\"\n             [iconSrc]=\"'assets/_default/svg/ic_hamburger.svg'\"></eo-icon>\n    <eo-icon (click)=\"openDashboard($event.ctrlKey)\"  (auxclick)=\"openDashboard(true)\" \n              (keyup.enter)=\"openDashboard(false)\" tabindex=\"0\"\n              class=\"logo white\" [iconSrc]=\"logo\"></eo-icon>\n\n    <div class=\"actions\">\n      <a [routerLink]=\"[ {outlets: { modal: 'search' } } ]\">\n        <eo-icon id=\"app-search\" class=\"search white\" queryParamsHandling=\"preserve\"\n                [iconTitle]=\"iconTitles.search\"\n                [iconSrc]=\"'assets/_default/svg/ic_search.svg'\"></eo-icon>\n      </a>\n\n      <a [routerLink]=\"[ {outlets: { modal: 'add' } } ]\">\n        <eo-icon id=\"app-add\" class=\"add white\" *ngIf=\"capabilities.intray\"\n                [iconTitle]=\"iconTitles.file\"\n                [iconSrc]=\"'assets/_default/svg/ic_add.svg'\"></eo-icon>\n      </a>      \n      <a [routerLink]=\"[ {outlets: { modal: 'actions' } } ]\">\n        <eo-icon id=\"app-actions\" class=\"actions white\" *ngIf=\"exeActions\"\n                [iconTitle]=\"iconTitles.exeactions\"\n                [iconSrc]=\"'assets/_default/svg/ic_bpm_start.svg'\"></eo-icon>\n      </a>\n    </div>\n  </div>\n  <div class=\"right\">\n    <div class=\"sub\">\n      <eo-clipboard></eo-clipboard>\n    <eo-app-layout></eo-app-layout>\n    </div>\n    <a routerLink=\"/favorites\">\n      <eo-icon class=\"button white favorite\"\n              [iconTitle]=\"iconTitles.favorites\" *ngIf=\"capabilities.favorites\"\n              [iconSrc]=\"'assets/_default/svg/ic_favorite.svg'\"></eo-icon>\n    </a>\n    <a routerLink=\"/prepare\">\n      <eo-icon class=\"button white prepare\" *ngIf=\"capabilities.intray\"\n              [iconTitle]=\"iconTitles.prepare\"\n              [badge]=\"preparedItemsCount\" [iconSrc]=\"'assets/_default/svg/ic_prepare.svg'\"></eo-icon>\n    </a>\n    <a routerLink=\"/inbox\">\n      <eo-icon class=\"button white inbox\" [ngClass]=\"{alert: inboxState?.overduemessages > 0}\" *ngIf=\"capabilities.inbox\"\n              [iconTitle]=\"iconTitles.index\"\n              [badge]=\"inboxState?.totalmessages\" [iconSrc]=\"'assets/_default/svg/ic_inbox.svg'\"></eo-icon>\n    </a>\n    <eo-overlay #userpanel>\n      <eo-user-avatar class=\"btn\" id=\"app-profile\" [showPresence]=\"true\" [title]=\"iconTitles.profile\" tabindex=\"0\"></eo-user-avatar>\n\n      <div class=\"eo-profile\">\n        <div class=\"avatar\">\n          <eo-user-avatar></eo-user-avatar>\n          <div class=\"overlay\">\n            <div class=\"name\">{{user.firstname}} {{user.lastname}}</div>\n            <div class=\"mail\">{{user.email}}</div>\n            <div class=\"presence\" *ngIf=\"!user.present\" translate>eo.state.settings.presence.absent</div>\n          </div>\n        </div>\n        <div class=\"nav\">\n          <div class=\"nav-item settings\" (click)=\"userpanel?.close()\">\n            <a routerLink=\"/settings\" routerLinkActive=\"active-link\" translate>eo.bar.button.settings.title</a>\n          </div>\n          <div class=\"nav-item logout\" *ngIf=\"!capabilities.sso\">\n            <a [routerLink]=\"['/enter', { logout: true }]\" routerLinkActive=\"active-link\" translate>eo.bar.button.logout.title</a>\n          </div>\n          <ng-content select=\"eo-sidebar-plugin.profile\"></ng-content>\n        </div>\n      </div>\n    </eo-overlay>\n\n\n  </div>\n</div>\n",
+                template: "<eo-side-bar (eoOutsideClick)=\"sidebarShow = !sidebarShow\" *ngIf=\"sidebarShow\">\n  <div class=\"navi\">\n    <ng-content select=\"eo-sidebar-plugin.navi\"></ng-content>\n  </div>\n  <div class=\"help\">\n    <ng-content select=\"eo-sidebar-plugin.help\"></ng-content>\n  </div>\n</eo-side-bar>\n\n<div class=\"eo-app-bar\" [ngClass]=\"{transparent: transparent}\" eoRtlAware>\n\n  <div class=\"left\">\n\n    <eo-icon id=\"app-menu\" class=\"menu white\" tabindex=\"0\"\n             (click)=\"sidebarShow = !sidebarShow\" (keyup.enter)=\"sidebarShow = !sidebarShow\"\n             [iconSrc]=\"'assets/_default/svg/ic_hamburger.svg'\"></eo-icon>\n    <eo-icon (click)=\"openDashboard($event.ctrlKey)\"  (auxclick)=\"openDashboard(true)\" \n              (keyup.enter)=\"openDashboard(false)\" tabindex=\"0\"\n              class=\"logo white\" [iconSrc]=\"logo\"></eo-icon>\n\n    <div class=\"actions\">\n      <a [routerLink]=\"[ {outlets: { modal: 'search' } } ]\">\n        <eo-icon id=\"app-search\" class=\"search white\" queryParamsHandling=\"preserve\"\n                [iconTitle]=\"iconTitles.search\"\n                [iconSrc]=\"'assets/_default/svg/ic_search.svg'\"></eo-icon>\n      </a>\n\n      <a [routerLink]=\"[ {outlets: { modal: 'add' } } ]\">\n        <eo-icon id=\"app-add\" class=\"add white\" *ngIf=\"capabilities.intray\"\n                [iconTitle]=\"iconTitles.file\"\n                [iconSrc]=\"'assets/_default/svg/ic_add.svg'\"></eo-icon>\n      </a>      \n      <a [routerLink]=\"[ {outlets: { modal: 'actions' } } ]\">\n        <eo-icon id=\"app-actions\" class=\"actions white\" *ngIf=\"exeActions\"\n                [iconTitle]=\"iconTitles.exeactions\"\n                [iconSrc]=\"'assets/_default/svg/ic_bpm_start.svg'\"></eo-icon>\n      </a>\n    </div>\n  </div>\n  <div class=\"right\">\n    <div class=\"sub\">\n      <eo-clipboard></eo-clipboard>\n    <eo-app-layout></eo-app-layout>\n    </div>\n    <a routerLink=\"/favorites\">\n      <eo-icon class=\"button white favorite\"\n              [iconTitle]=\"iconTitles.favorites\" *ngIf=\"capabilities.favorites\"\n              [iconSrc]=\"'assets/_default/svg/ic_favorite.svg'\"></eo-icon>\n    </a>\n    <a routerLink=\"/prepare\">\n      <eo-icon class=\"button white prepare\" *ngIf=\"capabilities.intray\"\n              [iconTitle]=\"iconTitles.prepare\"\n              [badge]=\"preparedItemsCount\" [iconSrc]=\"'assets/_default/svg/ic_prepare.svg'\"></eo-icon>\n    </a>\n    <a routerLink=\"/inbox\">\n      <eo-icon class=\"button white inbox\" [ngClass]=\"{alert: inboxState?.overduemessages > 0}\" *ngIf=\"capabilities.inbox\"\n              [iconTitle]=\"iconTitles.index\"\n              [badge]=\"inboxState?.totalmessages\" [iconSrc]=\"'assets/_default/svg/ic_inbox.svg'\"></eo-icon>\n    </a>\n    <eo-overlay #userpanel>\n      <eo-user-avatar class=\"btn\" id=\"app-profile\" [showPresence]=\"true\" [title]=\"iconTitles.profile\" tabindex=\"0\"></eo-user-avatar>\n\n      <div class=\"eo-profile\" tabindex=\"-1\">\n        <div class=\"avatar\" tabindex=\"-1\">\n          <eo-user-avatar tabindex=\"-1\" ></eo-user-avatar>\n          <div class=\"overlay\" tabindex=\"-1\">\n            <div class=\"name\">{{user.firstname}} {{user.lastname}}</div>\n            <div class=\"mail\">{{user.email}}</div>\n            <div class=\"presence\" *ngIf=\"!user.present\" translate>eo.state.settings.presence.absent</div>\n          </div>\n        </div>\n        <div class=\"nav\" eoTrapFocus>\n          <div class=\"nav-item settings\" (click)=\"userpanel?.close()\" >\n            <a routerLink=\"/settings\" tabindex=\"0\" routerLinkActive=\"active-link\" focusable translate>eo.bar.button.settings.title</a>\n          </div>\n          <div class=\"nav-item logout\" *ngIf=\"!capabilities.sso\">\n            <a [routerLink]=\"['/enter', { logout: true }]\" routerLinkActive=\"active-link\" translate>eo.bar.button.logout.title</a>\n          </div>\n          <ng-content select=\"eo-sidebar-plugin.profile\"></ng-content>\n        </div>\n      </div>\n    </eo-overlay>\n\n\n  </div>\n</div>\n",
                 styles: [":host .eo-app-bar{--profile-dropdown-width:180px;align-items:center;background:var(--color-primary);color:var(--color-white);display:flex;flex-flow:row nowrap;height:var(--app-bar-height);justify-content:space-between;left:0;position:absolute;right:0;top:0;z-index:5}:host .eo-app-bar a:focus eo-icon,:host .eo-app-bar a:hover eo-icon,:host .eo-app-bar eo-icon:focus,:host .eo-app-bar eo-icon:hover{background:rgba(var(--color-white-rgb),.25)}:host .eo-app-bar .left{align-items:center;display:flex;flex-flow:row nowrap;height:var(--app-bar-height)}@media (max-width:480px){:host .eo-app-bar .left{padding-right:0}}:host .eo-app-bar .left eo-icon.menu{background-color:var(--color-accent);box-sizing:border-box;cursor:pointer;height:var(--app-bar-height);padding:20px;width:var(--app-bar-height);z-index:22}:host .eo-app-bar .left eo-icon.menu:focus{outline:1px solid var(--color-white);outline-offset:-1px}:host .eo-app-bar .left eo-icon.logo{background-color:transparent;cursor:pointer;height:auto;margin:0 4px;padding:var(--app-pane-padding) calc(var(--app-pane-padding)*2) var(--app-pane-padding) calc(var(--app-pane-padding)/2);width:104px}@media (max-width:480px){:host .eo-app-bar .left eo-icon.logo{width:80px}}:host .eo-app-bar .left eo-icon.logo:focus{outline:1px solid var(--color-accent)}:host .eo-app-bar .left .actions{align-items:center;display:flex;flex-flow:row nowrap}:host .eo-app-bar .left .actions a eo-icon{border-radius:50%;box-sizing:content-box;color:var(--color-white);cursor:pointer;margin:4px;padding:8px}:host .eo-app-bar .left .actions a:focus eo-icon,:host .eo-app-bar .left .actions a:hover eo-icon{background:var(--color-accent)}:host .eo-app-bar .right,:host .eo-app-bar .right .sub{align-items:center;display:flex;flex-flow:row nowrap}:host .eo-app-bar .right .sub{margin:0 calc(var(--app-pane-padding)/2);padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}:host .eo-app-bar .right .sub>*{margin:0 calc(var(--app-pane-padding)/4)}:host .eo-app-bar .right eo-icon{margin:0 4px}:host .eo-app-bar .right eo-icon.alert{position:relative}:host .eo-app-bar .right eo-icon.alert:after{background-color:var(--color-error);bottom:-4px;content:\"\";height:4px;left:0;position:absolute;right:0}@media (max-width:480px){:host .eo-app-bar .right eo-icon{display:none}}:host .eo-app-bar .right #app-profile{border:2px solid transparent;border-radius:50%;cursor:pointer;height:40px;margin:0 var(--app-pane-padding);width:40px}:host .eo-app-bar .right #app-profile:focus,:host .eo-app-bar .right #app-profile:hover{border-color:var(--color-accent)}:host .eo-app-bar .right .eo-profile{background:var(--color-primary);color:var(--color-white);width:var(--profile-dropdown-width)}:host .eo-app-bar .right .eo-profile .avatar{position:relative}:host .eo-app-bar .right .eo-profile .avatar,:host .eo-app-bar .right .eo-profile .avatar eo-user-avatar{height:var(--profile-dropdown-width);width:var(--profile-dropdown-width)}:host .eo-app-bar .right .eo-profile .avatar .overlay{background:rgba(var(--color-primary-rgb),.6);bottom:0;left:0;padding:calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/2) var(--app-pane-padding);position:absolute;right:0}:host .eo-app-bar .right .eo-profile .avatar .overlay .mail,:host .eo-app-bar .right .eo-profile .avatar .overlay .name{word-break:break-all}:host .eo-app-bar .right .eo-profile .avatar .overlay .mail{font-size:var(--font-caption)}:host .eo-app-bar .right .eo-profile .avatar .overlay .presence{background:var(--color-error);border-radius:2px;color:var(--color-white);display:inline-block;font-size:var(--font-hint);margin-top:calc(var(--app-pane-padding)/2);padding:0 8px 1px}:host .eo-app-bar .right .eo-profile .nav ::ng-deep .nav-item{border-bottom:1px solid rgba(var(--color-white-rgb),.1)}:host .eo-app-bar .right .eo-profile .nav ::ng-deep .nav-item a{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;color:var(--color-white);cursor:pointer;display:block;padding:calc(var(--app-pane-padding)/2);text-decoration:none;transition:all var(--app-default-transition-duration) ease-in-out}[dir=ltr] :host .eo-app-bar .right .eo-profile .nav ::ng-deep .nav-item a{border-left:4px solid transparent}[dir=rtl] :host .eo-app-bar .right .eo-profile .nav ::ng-deep .nav-item a{border-right:4px solid transparent}:host .eo-app-bar .right .eo-profile .nav ::ng-deep .nav-item a.active-link{background:rgba(var(--color-white-rgb),.06);border-color:var(--color-accent);cursor:default}:host .eo-app-bar .right .eo-profile .nav ::ng-deep .nav-item a:not(.active-link):focus,:host .eo-app-bar .right .eo-profile .nav ::ng-deep .nav-item a:not(.active-link):hover{background:rgba(var(--color-white-rgb),.1)}:host .eo-app-bar.transparent{background:transparent}:host .eo-app-bar.transparent .left eo-icon.menu{background-color:transparent}:host .eo-app-bar.transparent .left eo-icon.menu:focus{outline:1px solid var(--color-accent)}@media (max-width:480px){:host .eo-app-bar.rtl .left{padding-left:0;padding-right:var(--app-pane-padding)}}@-webkit-keyframes dropDownAppear{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes dropDownAppear{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}"]
             },] }
 ];
@@ -4047,7 +4099,8 @@ AppBarComponent.ctorParameters = () => [
     { type: Config }
 ];
 AppBarComponent.propDecorators = {
-    transparent: [{ type: Input }]
+    transparent: [{ type: Input }],
+    avatarComponents: [{ type: ViewChildren, args: [UserAvatarComponent,] }]
 };
 
 class ContextSearchComponent {
@@ -6820,7 +6873,7 @@ class FormInputComponent {
 FormInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-form-input',
-                template: "<div class=\"fe-wrapper\" eoInputFocus>\n  <div class=\"tag\" *ngIf=\"tag\" title=\"{{tag.title}}\">{{tag.label}}</div>\n  <label class=\"form-input__label\" (click)=\"toggle()\">{{_label}}</label>\n  <div class=\"control\">\n    <ng-content *ngIf=\"!toggled; else tplnull\"></ng-content>\n\n    <ng-template #tplnull><span translate>eo.form.input.null</span></ng-template>\n  </div>\n</div>\n<div class=\"description\" *ngIf=\"description\">{{description}}</div>\n\n",
+                template: "<div class=\"fe-wrapper\" eoInputFocus [disabled]=\"isDisabled\">\n  <div class=\"tag\" *ngIf=\"tag\" title=\"{{tag.title}}\">{{tag.label}}</div>\n  <label class=\"form-input__label\" (click)=\"toggle()\">{{_label}}</label>\n  <div class=\"control\">\n    <ng-content *ngIf=\"!toggled; else tplnull\"></ng-content>\n\n    <ng-template #tplnull><span translate>eo.form.input.null</span></ng-template>\n  </div>\n</div>\n<div class=\"description\" *ngIf=\"description\">{{description}}</div>\n\n",
                 styles: [":host .fe-wrapper{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;align-items:center;border-bottom:1px solid rgba(var(--color-black-rgb),.15);display:flex;flex-flow:row nowrap;padding:calc(var(--app-pane-padding)/4) 0;transition:all var(--app-default-transition-duration) ease-in-out}:host .fe-wrapper.focused{border-color:var(--color-accent)}:host .fe-wrapper.focused>label{color:var(--color-accent)}:host .fe-wrapper>div.control{flex:1 1 auto;order:1;padding:0 calc(var(--app-pane-padding)/4)}:host .fe-wrapper>div.control>span{background-color:var(--color-accent);border-radius:2px;color:var(--color-white);display:inline-block;font-size:var(--font-hint);padding:0 calc(var(--app-pane-padding)/4)}:host .fe-wrapper>.form-input__label{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-moz-user-select:none;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-user-select:none;border-radius:2px;color:var(--text-color-caption);flex:0 1 auto;font-size:var(--font-caption);margin-right:3px;order:2;padding:2px calc(var(--app-pane-padding)/4);text-align:end;transition:all var(--app-default-transition-duration) ease-in-out;user-select:none}:host .fe-wrapper>.tag{background-color:var(--color-primary-2);border-radius:2px;color:var(--color-white);cursor:default;display:inline-block;flex:0 0 auto;font-size:var(--font-hint);line-height:1em;order:3;padding:2px}:host.checkbox .fe-wrapper>label{text-align:start}:host .description{color:var(--text-color-caption);font-size:var(--font-hint);font-style:italic;padding:calc(var(--app-pane-padding)/8) calc(var(--app-pane-padding)/8) 0 calc(var(--app-pane-padding)/8)}:host.required .fe-wrapper>label{background-color:rgba(var(--color-black-rgb),.06)}:host.required .fe-wrapper>label:after{content:\"*\";font-weight:700;padding:0 4px}:host.invalid .fe-wrapper{background:rgba(var(--color-error),.15);border-color:var(--color-error)}:host.invalid .fe-wrapper>label{background-color:var(--color-error);color:var(--color-white);margin:0 4px}:host.invalid .fe-wrapper>label:after{content:\"!\";margin-left:calc(var(--app-pane-padding)/2)}:host.disabled{opacity:.5}:host.checkbox .fe-wrapper{border-color:transparent!important}:host.checkbox .fe-wrapper>div.control{flex:0 0 auto}:host.checkbox .fe-wrapper>label{flex:0 1 auto}:host-context(.dark) .fe-wrapper{border-color:rgba(var(--color-white-rgb),.54)}:host-context(.dark) .fe-wrapper>label{color:rgba(var(--color-white-rgb),.84)}:host-context(.dark) .fe-wrapper.focused{border-color:var(--color-white)}:host-context(.dark) .fe-wrapper.focused>label{color:var(--color-white)}:host-context(.dark) ::ng-deep .ui-dropdown.range{background-color:rgba(var(--color-white-rgb),.1)}:host-context(.fe-wrapper) .fe-wrapper{background:transparent;padding:0}:host ::ng-deep .ui-inputtext,:host ::ng-deep input{align-items:center;border:0!important;display:flex;flex-wrap:wrap;padding:0;width:100%}:host ::ng-deep input{background-color:transparent}:host ::ng-deep button.ui-button{background:rgba(var(--color-black-rgb),.08);border:0;border-radius:2px;color:var(--text-color-caption);cursor:pointer;height:20px;width:20px}:host ::ng-deep button.ui-button.ui-spinner-button:enabled:hover,:host ::ng-deep button.ui-button:enabled:active,:host ::ng-deep button.ui-button:enabled:focus,:host ::ng-deep button.ui-button:enabled:hover{background:var(--color-accent);border:0;color:var(--color-white)}:host ::ng-deep button.ui-button .fa{color:currentColor!important}:host ::ng-deep button.ui-button eo-icon{height:16px;margin:auto;width:16px}:host ::ng-deep .ui-dropdown.range{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;background:rgba(var(--color-black-rgb),.1);border:0;border-radius:2px;margin:0 4px;transition:all var(--app-default-transition-duration) ease-in-out;width:20px!important}:host ::ng-deep .ui-dropdown.range.ui-state-focus{background:var(--color-accent)!important}:host ::ng-deep .ui-dropdown.range.ui-state-focus label{color:var(--color-primary-4)}:host ::ng-deep .ui-dropdown.range:not(.ui-state-disabled):hover{background:rgba(var(--color-black-rgb),.2)}:host ::ng-deep .ui-dropdown.range .ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item{padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}:host ::ng-deep .ui-dropdown.range .ui-dropdown-trigger{display:none}:host ::ng-deep .ui-dropdown.range .ui-dropdown-item,:host ::ng-deep .ui-dropdown.range label{display:block;font-family:monospace;text-align:center}:host ::ng-deep .ui-dropdown.range label:after{display:none}"]
             },] }
 ];
@@ -6844,9 +6897,12 @@ class InputFocusDirective {
         this.renderer = renderer;
         this.element = element;
         this.formInput = this.element.nativeElement;
+        this.disabled = false;
     }
     onFocusIn(evt) {
-        this.renderer.addClass(this.formInput, 'focused');
+        if (!this.disabled) {
+            this.renderer.addClass(this.formInput, 'focused');
+        }
     }
     onFocusOut(evt) {
         this.renderer.removeClass(this.formInput, 'focused');
@@ -6862,6 +6918,7 @@ InputFocusDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 InputFocusDirective.propDecorators = {
+    disabled: [{ type: Input }],
     onFocusIn: [{ type: HostListener, args: ['focusin', ['$event'],] }],
     onFocusOut: [{ type: HostListener, args: ['focusout', ['$event'],] }]
 };
@@ -7016,9 +7073,8 @@ class IdReferenceComponent {
             fields: ['title', 'description', 'type'],
             types: [this.referenceType.name],
             term: evt.query,
-            highlighting: true,
             filters: this.queryFilters,
-            options: { withContext: true }
+            options: { withcontext: true, highlighting: false }
         };
         if (this.objectTypesFilter) {
             q.types = this.objectTypesFilter;
@@ -7141,9 +7197,8 @@ class ReferenceFinderService {
                 fields: ['title', 'description', 'type'],
                 types: types,
                 term: searchText,
-                highlighting: true,
                 filters: queryFilters,
-                options: { withContext: true }
+                options: { withcontext: true, highlighting: false }
             };
             if (contextId) {
                 if (q.filters) {
@@ -9979,7 +10034,7 @@ class FormElementComponent {
 FormElementComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-form-element',
-                template: "<div class=\"form-element\" [formGroup]=\"element\" *ngIf=\"element\">\n\n  <div class=\"form-field t-{{formElementRef._eoFormElement.type}}\" #formField\n       [ngSwitch]=\"formElementRef._eoFormElement.type\"\n       [ngClass]=\"{disabled: !!formElementRef._eoFormElement.readonly}\">\n\n    <!-- STRING -->\n    <eo-form-input *ngSwitchCase=\"'STRING'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-string\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification !== 'selector'\"\n        [situation]=\"element._eoFormControlWrapper.situation\"\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"\n        [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n        [multiline]=\"formElementRef._eoFormElement.multiline\"\n        [classification]=\"formElementRef._eoFormElement.classification\"\n        [regex]=\"formElementRef._eoFormElement.regex\"\n        [qname]=\"formElementRef._eoFormElement.qname\"\n        [size]=\"formElementRef._eoFormElement.size\"\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\n        [minLength]=\"formElementRef._eoFormElement.minlen\"\n        [maxLength]=\"formElementRef._eoFormElement.maxlen\"\n      ></eo-string>\n\n      <!-- Dynamic List -->\n      <eo-dynamic-list\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification === 'selector'\"\n        [situation]=\"element._eoFormControlWrapper.situation\"\n        [pickerTitle]=\"formElementRef._eoFormElement.label\"\n        [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n        [listObject]=\"formElementRef._eoFormElement.list\"\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-dynamic-list>\n\n\n      <!-- Reference -->\n      <eo-reference *ngIf=\"formElementRef._eoFormElement.reference\"\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\n                    [reference]=\"formElementRef._eoFormElement.reference\"\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                    [minLength]=\"formElementRef._eoFormElement.minlen\"\n                    [maxLength]=\"formElementRef._eoFormElement.maxlen\"\n      ></eo-reference>\n    </eo-form-input>\n\n    <!-- ID-Reference -->\n    <eo-form-input *ngSwitchCase=\"'REFERENCE'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-id-reference\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                    [situation]=\"element._eoFormControlWrapper.situation\"\n                    [dataToRender]=\"formElementRef._eoFormElement.dataToRender\"\n                    [reference]=\"formElementRef._eoFormElement.reference\"\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                    [contextId]=\"formElementRef._eoFormElement.contextId\"\n                    [exceptionIDs]=\"formElementRef._eoFormElement.exceptionIDs\"\n                    [queryFilters]=\"formElementRef._eoFormElement.queryFilters\"\n                    [objectTypesFilter]=\"formElementRef._eoFormElement.objectTypesFilter\"\n      ></eo-id-reference>\n    </eo-form-input>\n\n    <!-- ID -->\n    <eo-form-input *ngSwitchCase=\"'ID'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-string\n                    [situation]=\"element._eoFormControlWrapper.situation\"\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                    [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                    [regex]=\"'^[0-9a-fA-F]*$'\"\n                    [qname]=\"formElementRef._eoFormElement.qname\"\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\n                    [minLength]=\"32\"\n                    [maxLength]=\"32\"\n      ></eo-string>\n\n    </eo-form-input>\n\n\n    <!-- BOOLEAN -->\n    <eo-form-input *ngSwitchCase=\"'BOOLEAN'\" [tag]=\"tag\" class=\"checkbox\" [label]=\"formElementRef._eoFormElement.label\"\n                    [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-checkbox [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\n                   [tristate]=\"true\"></eo-checkbox>\n    </eo-form-input>\n\n    <!-- CODESYSTEM -->\n    <eo-form-input *ngSwitchCase=\"'CODESYSTEM'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-codesystem [situation]=\"element._eoFormControlWrapper.situation\"\n                     [pickerTitle]=\"formElementRef._eoFormElement.label\"\n                     [readonly]=\"formElementRef._eoFormElement.readonly\"\n                     [codesystem]=\"formElementRef._eoFormElement.codesystem\"\n                     [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                     [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\n                     [disablingFilterFunction]=\"formElementRef._eoFormElement.disablingFilterFunction\"\n                     [formControlName]=\"element._eoFormControlWrapper.controlName\"\n      ></eo-codesystem>\n    </eo-form-input>\n\n    <!-- ORGANIZATION -->\n    <eo-form-input *ngSwitchCase=\"'ORGANIZATION'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-organization [situation]=\"element._eoFormControlWrapper.situation\"\n                       [dataMeta]=\"formElementRef._eoFormElement.dataMeta\"\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\n                       [filterObject]=\"formElementRef._eoFormElement.filter\"\n                       [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                       (onDataMetaChanged)=\"organizationDataMetaResolved($event)\"\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\n      ></eo-organization>\n    </eo-form-input>\n\n    <!-- NUMBER -->\n\n    <eo-form-input *ngSwitchCase=\"'NUMBER'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-number *ngIf=\"situation !== 'SEARCH'\"\n                 [readonly]=\"formElementRef._eoFormElement.readonly\"\n                 [precision]=\"formElementRef._eoFormElement.precision\"\n                 [scale]=\"formElementRef._eoFormElement.scale\"\n                 [grouping]=\"formElementRef._eoFormElement.grouping\"\n                 [pattern]=\"formElementRef._eoFormElement.pattern\"\n                 [formControlName]=\"element._eoFormControlWrapper.controlName\">\n      </eo-number>\n\n      <eo-number-range *ngIf=\"situation === 'SEARCH'\"\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\n                       [precision]=\"formElementRef._eoFormElement.precision\"\n                       [scale]=\"formElementRef._eoFormElement.scale\"\n                       [grouping]=\"formElementRef._eoFormElement.grouping\"\n                       [pattern]=\"formElementRef._eoFormElement.pattern\"\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\n      ></eo-number-range>\n    </eo-form-input>\n\n    <!-- TABLE -->\n    <div class=\"table\" *ngSwitchCase=\"'TABLE'\">\n      <eo-table [params]=\"{\n        situation: element._eoFormControlWrapper.situation,\n        element: formElementRef._eoFormElement,\n        size: formElementRef._eoFormElement.size,\n        object: formElementRef._eoFormElement.object\n      }\" [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-table>\n    </div>\n\n    <!-- DATE AND DATETIME -->\n    <eo-form-input *ngSwitchCase=\"'DATETIME'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-datetime *ngIf=\"situation !== 'SEARCH'\"\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\n                   [pickerTitle]=\"formElementRef._eoFormElement.label\"\n                   [withTime]=\"formElementRef._eoFormElement.withtime\"\n                   [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                   [validateDatabaseTimeRange]=\"formElementRef._eoFormElement.withtime\"\n      ></eo-datetime>\n\n      <eo-datetime-range *ngIf=\"situation === 'SEARCH'\"\n                         [pickerTitle]=\"formElementRef._eoFormElement.label\"\n                         [withTime]=\"formElementRef._eoFormElement.withtime\"\n                         [formControlName]=\"element._eoFormControlWrapper.controlName\"\n      ></eo-datetime-range>\n    </eo-form-input>\n\n\n    <!-- print out the type if it's not matching anything -->\n    <div *ngSwitchDefault><b>{{formElementRef._eoFormElement.type}}</b></div>\n\n\n    <!-- the fields description -->\n    <div class=\"description\" *ngIf=\"formElementRef._eoFormElement.description\">{{formElementRef._eoFormElement.description}}</div>\n\n    <!-- error/validation messages -->\n    <div class=\"err-msg\" *ngIf=\"formElementRef.errors\">\n\n      <div *ngIf=\"formElementRef.errors.daterange\" translate>eo.form.property.daterange.invalid</div>\n      <div *ngIf=\"formElementRef.errors.numberrange\" translate>eo.form.property.numberrange.invalid</div>\n      <div *ngIf=\"formElementRef.errors.number\" translate>eo.form.property.number</div>\n      <div *ngIf=\"formElementRef.errors.precision\" translate\n           [translateParams]=\"formElementRef.errors.precision.translateValues\">{{formElementRef.errors.precision.translateKey}}</div>\n      <div *ngIf=\"formElementRef.errors.scale\" translate\n           [translateParams]=\"formElementRef.errors.scale.translateValues\">{{formElementRef.errors.scale.translateKey}}</div>\n\n      <div *ngIf=\"formElementRef.errors.regex || formElementRef.errors.pattern\" translate>eo.form.property.string.regex.nomatch</div>\n      <div *ngIf=\"formElementRef.errors.classificationemail\" translate>eo.form.property.string.error.classification.email</div>\n      <div *ngIf=\"formElementRef.errors.classificationurl\" translate>eo.form.property.string.error.classification.url</div>\n      <div *ngIf=\"formElementRef.errors.onlyWhitespaces\" translate>eo.form.property.string.error.whitespaces</div>\n      <div *ngIf=\"formElementRef.errors.datecontrol\" translate>eo.form.property.date.invalid</div>\n      <div *ngIf=\"formElementRef.errors.codesystem\" translate>eo.form.property.codesystem.value.invalid</div>\n      <div *ngIf=\"formElementRef.errors.eoformScript\">{{formElementRef._eoFormElement.error.msg}}</div>\n      <div *ngIf=\"formElementRef.errors.required\" translate>eo.form.property.required</div>\n      <div *ngIf=\"formElementRef.errors.maxlength\" translate [translateParams]=\"{maxlength: formElementRef._eoFormElement.maxlen}\">eo.form.property.maxlength</div>\n      <div *ngIf=\"formElementRef.errors.minlength\" translate [translateParams]=\"{minlength: formElementRef._eoFormElement.minlen}\">eo.form.property.minlength</div>\n      <div *ngIf=\"formElementRef.errors.deletedIDReference\" translate>eo.form.property.idreference.deleted</div>\n      <div *ngIf=\"formElementRef.errors.deletedOrgObject\" translate>eo.form.property.orgobject.deleted</div>\n    </div>\n\n  </div>\n</div>\n",
+                template: "<div class=\"form-element\" [formGroup]=\"element\" *ngIf=\"element\">\n\n  <div class=\"form-field t-{{formElementRef._eoFormElement.type}}\" #formField\n       [ngSwitch]=\"formElementRef._eoFormElement.type\"\n       [ngClass]=\"{disabled: !!formElementRef._eoFormElement.readonly}\">\n\n    <!-- STRING -->\n    <eo-form-input *ngSwitchCase=\"'STRING'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [disabled]=\"formElementRef._eoFormElement.readonly\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-string\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification !== 'selector'\"\n        [situation]=\"element._eoFormControlWrapper.situation\"\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"\n        [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n        [multiline]=\"formElementRef._eoFormElement.multiline\"\n        [classification]=\"formElementRef._eoFormElement.classification\"\n        [regex]=\"formElementRef._eoFormElement.regex\"\n        [qname]=\"formElementRef._eoFormElement.qname\"\n        [size]=\"formElementRef._eoFormElement.size\"\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\n        [minLength]=\"formElementRef._eoFormElement.minlen\"\n        [maxLength]=\"formElementRef._eoFormElement.maxlen\"\n      ></eo-string>\n\n      <!-- Dynamic List -->\n      <eo-dynamic-list\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification === 'selector'\"\n        [situation]=\"element._eoFormControlWrapper.situation\"\n        [pickerTitle]=\"formElementRef._eoFormElement.label\"\n        [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n        [listObject]=\"formElementRef._eoFormElement.list\"\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-dynamic-list>\n\n\n      <!-- Reference -->\n      <eo-reference *ngIf=\"formElementRef._eoFormElement.reference\"\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\n                    [reference]=\"formElementRef._eoFormElement.reference\"\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                    [minLength]=\"formElementRef._eoFormElement.minlen\"\n                    [maxLength]=\"formElementRef._eoFormElement.maxlen\"\n      ></eo-reference>\n    </eo-form-input>\n\n    <!-- ID-Reference -->\n    <eo-form-input *ngSwitchCase=\"'REFERENCE'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [disabled]=\"formElementRef._eoFormElement.readonly\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-id-reference\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                    [situation]=\"element._eoFormControlWrapper.situation\"\n                    [dataToRender]=\"formElementRef._eoFormElement.dataToRender\"\n                    [reference]=\"formElementRef._eoFormElement.reference\"\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                    [contextId]=\"formElementRef._eoFormElement.contextId\"\n                    [exceptionIDs]=\"formElementRef._eoFormElement.exceptionIDs\"\n                    [queryFilters]=\"formElementRef._eoFormElement.queryFilters\"\n                    [objectTypesFilter]=\"formElementRef._eoFormElement.objectTypesFilter\"\n      ></eo-id-reference>\n    </eo-form-input>\n\n    <!-- ID -->\n    <eo-form-input *ngSwitchCase=\"'ID'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [disabled]=\"formElementRef._eoFormElement.readonly\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-string\n                    [situation]=\"element._eoFormControlWrapper.situation\"\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                    [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                    [regex]=\"'^[0-9a-fA-F]*$'\"\n                    [qname]=\"formElementRef._eoFormElement.qname\"\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\n                    [minLength]=\"32\"\n                    [maxLength]=\"32\"\n      ></eo-string>\n\n    </eo-form-input>\n\n\n    <!-- BOOLEAN -->\n    <eo-form-input *ngSwitchCase=\"'BOOLEAN'\" [tag]=\"tag\" class=\"checkbox\" [label]=\"formElementRef._eoFormElement.label\"\n                    [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [disabled]=\"formElementRef._eoFormElement.readonly\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-checkbox [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\n                   [tristate]=\"true\"></eo-checkbox>\n    </eo-form-input>\n\n    <!-- CODESYSTEM -->\n    <eo-form-input *ngSwitchCase=\"'CODESYSTEM'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [disabled]=\"formElementRef._eoFormElement.readonly\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-codesystem [situation]=\"element._eoFormControlWrapper.situation\"\n                     [pickerTitle]=\"formElementRef._eoFormElement.label\"\n                     [readonly]=\"formElementRef._eoFormElement.readonly\"\n                     [codesystem]=\"formElementRef._eoFormElement.codesystem\"\n                     [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                     [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\n                     [disablingFilterFunction]=\"formElementRef._eoFormElement.disablingFilterFunction\"\n                     [formControlName]=\"element._eoFormControlWrapper.controlName\"\n      ></eo-codesystem>\n    </eo-form-input>\n\n    <!-- ORGANIZATION -->\n    <eo-form-input *ngSwitchCase=\"'ORGANIZATION'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [disabled]=\"formElementRef._eoFormElement.readonly\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-organization [situation]=\"element._eoFormControlWrapper.situation\"\n                       [dataMeta]=\"formElementRef._eoFormElement.dataMeta\"\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\n                       [filterObject]=\"formElementRef._eoFormElement.filter\"\n                       [multiselect]=\"formElementRef._eoFormElement.multiselect\"\n                       (onDataMetaChanged)=\"organizationDataMetaResolved($event)\"\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\n      ></eo-organization>\n    </eo-form-input>\n\n    <!-- NUMBER -->\n\n    <eo-form-input *ngSwitchCase=\"'NUMBER'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [disabled]=\"formElementRef._eoFormElement.readonly\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-number *ngIf=\"situation !== 'SEARCH'\"\n                 [readonly]=\"formElementRef._eoFormElement.readonly\"\n                 [precision]=\"formElementRef._eoFormElement.precision\"\n                 [scale]=\"formElementRef._eoFormElement.scale\"\n                 [grouping]=\"formElementRef._eoFormElement.grouping\"\n                 [pattern]=\"formElementRef._eoFormElement.pattern\"\n                 [formControlName]=\"element._eoFormControlWrapper.controlName\">\n      </eo-number>\n\n      <eo-number-range *ngIf=\"situation === 'SEARCH'\"\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\n                       [precision]=\"formElementRef._eoFormElement.precision\"\n                       [scale]=\"formElementRef._eoFormElement.scale\"\n                       [grouping]=\"formElementRef._eoFormElement.grouping\"\n                       [pattern]=\"formElementRef._eoFormElement.pattern\"\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\n      ></eo-number-range>\n    </eo-form-input>\n\n    <!-- TABLE -->\n    <div class=\"table\" *ngSwitchCase=\"'TABLE'\">\n      <eo-table [params]=\"{\n        situation: element._eoFormControlWrapper.situation,\n        element: formElementRef._eoFormElement,\n        size: formElementRef._eoFormElement.size,\n        object: formElementRef._eoFormElement.object\n      }\" [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-table>\n    </div>\n\n    <!-- DATE AND DATETIME -->\n    <eo-form-input *ngSwitchCase=\"'DATETIME'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\n                   [isNull]=\"isNull\"\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\n                   (onToggleLabel)=\"labelToggled($event)\"\n                   [required]=\"formElementRef._eoFormElement.required\"\n                   [disabled]=\"formElementRef._eoFormElement.readonly\"\n                   [invalid]=\"formElementRef.invalid\">\n\n      <eo-datetime *ngIf=\"situation !== 'SEARCH'\"\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\n                   [pickerTitle]=\"formElementRef._eoFormElement.label\"\n                   [withTime]=\"formElementRef._eoFormElement.withtime\"\n                   [formControlName]=\"element._eoFormControlWrapper.controlName\"\n                   [validateDatabaseTimeRange]=\"formElementRef._eoFormElement.withtime\"\n      ></eo-datetime>\n\n      <eo-datetime-range *ngIf=\"situation === 'SEARCH'\"\n                         [pickerTitle]=\"formElementRef._eoFormElement.label\"\n                         [withTime]=\"formElementRef._eoFormElement.withtime\"\n                         [formControlName]=\"element._eoFormControlWrapper.controlName\"\n      ></eo-datetime-range>\n    </eo-form-input>\n\n\n    <!-- print out the type if it's not matching anything -->\n    <div *ngSwitchDefault><b>{{formElementRef._eoFormElement.type}}</b></div>\n\n\n    <!-- the fields description -->\n    <div class=\"description\" *ngIf=\"formElementRef._eoFormElement.description\">{{formElementRef._eoFormElement.description}}</div>\n\n    <!-- error/validation messages -->\n    <div class=\"err-msg\" *ngIf=\"formElementRef.errors\">\n\n      <div *ngIf=\"formElementRef.errors.daterange\" translate>eo.form.property.daterange.invalid</div>\n      <div *ngIf=\"formElementRef.errors.numberrange\" translate>eo.form.property.numberrange.invalid</div>\n      <div *ngIf=\"formElementRef.errors.number\" translate>eo.form.property.number</div>\n      <div *ngIf=\"formElementRef.errors.precision\" translate\n           [translateParams]=\"formElementRef.errors.precision.translateValues\">{{formElementRef.errors.precision.translateKey}}</div>\n      <div *ngIf=\"formElementRef.errors.scale\" translate\n           [translateParams]=\"formElementRef.errors.scale.translateValues\">{{formElementRef.errors.scale.translateKey}}</div>\n\n      <div *ngIf=\"formElementRef.errors.regex || formElementRef.errors.pattern\" translate>eo.form.property.string.regex.nomatch</div>\n      <div *ngIf=\"formElementRef.errors.classificationemail\" translate>eo.form.property.string.error.classification.email</div>\n      <div *ngIf=\"formElementRef.errors.classificationurl\" translate>eo.form.property.string.error.classification.url</div>\n      <div *ngIf=\"formElementRef.errors.onlyWhitespaces\" translate>eo.form.property.string.error.whitespaces</div>\n      <div *ngIf=\"formElementRef.errors.datecontrol\" translate>eo.form.property.date.invalid</div>\n      <div *ngIf=\"formElementRef.errors.codesystem\" translate>eo.form.property.codesystem.value.invalid</div>\n      <div *ngIf=\"formElementRef.errors.eoformScript\">{{formElementRef._eoFormElement.error.msg}}</div>\n      <div *ngIf=\"formElementRef.errors.required\" translate>eo.form.property.required</div>\n      <div *ngIf=\"formElementRef.errors.maxlength\" translate [translateParams]=\"{maxlength: formElementRef._eoFormElement.maxlen}\">eo.form.property.maxlength</div>\n      <div *ngIf=\"formElementRef.errors.minlength\" translate [translateParams]=\"{minlength: formElementRef._eoFormElement.minlen}\">eo.form.property.minlength</div>\n      <div *ngIf=\"formElementRef.errors.deletedIDReference\" translate>eo.form.property.idreference.deleted</div>\n      <div *ngIf=\"formElementRef.errors.deletedOrgObject\" translate>eo.form.property.orgobject.deleted</div>\n    </div>\n\n  </div>\n</div>\n",
                 styles: [":host-context(.dark) .form-element .form-field .err-msg{background-color:var(--color-error);border:0;border-radius:2px;color:var(--color-white);margin:calc(var(--app-pane-padding)/4) 0;padding:calc(var(--app-pane-padding)/4)}:host{flex:1 1 auto}:host.label-toggled::ng-deep eo-form-input label{text-decoration:line-through}.form-element{box-sizing:border-box}.form-element .form-field{margin:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}.form-element .form-field .description{border:0;font-size:var(--font-hint);font-style:italic;padding:calc(var(--app-pane-padding)/8) calc(var(--app-pane-padding)/8) 0 calc(var(--app-pane-padding)/8)}.form-element .form-field .err-msg{border:0;color:var(--color-error);padding:calc(var(--app-pane-padding)/4) 0}.form-element .form-field .table{align-items:flex-start;border-color:transparent;flex-flow:column}.form-element .form-field .table .label{padding-bottom:calc(var(--app-pane-padding)/4)}.form-element.ng-dirty:not(.ng-invalid)>.form-field:not(.focused)::ng-deep label{background-color:var(--color-dirty-background);color:var(--color-dirty-font)!important}"]
             },] }
 ];
@@ -12761,7 +12816,7 @@ ColumnConfiguratorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-column-configurator',
                 template: "<div class=\"configurator\">\n\n  <div class=\"bar\">\n    <div class=\"title\" translate>eo.column.config.title</div>\n    <button (click)=\"resetDefault()\" *ngIf=\"!isDefaultConfig\" translate>eo.column.config.action.resetdefault</button>\n    <button (click)=\"toggleConfigMode()\" translate>eo.column.config.action.close</button>\n    <button (click)=\"saveConfig(true)\" class=\"primary\" [disabled]=\"!currentFields?.length\" *ngIf=\"hasPrivilege\" translate>eo.column.config.action.save.default</button>\n    <button (click)=\"saveConfig()\" class=\"primary\" [disabled]=\"!currentFields?.length\" translate>eo.column.config.action.save</button>\n  </div>\n\n  <div class=\"info\" *ngIf=\"info\">{{info}}</div>\n\n  <div class=\"column-config\" cdkDropListGroup>\n\n    <div class=\"scroller current\">\n      <div class=\"headline\" translate>eo.column.config.headline.current</div>\n      <div class=\"items\" cdkDropList (cdkDropListDropped)=\"drop($event, 'current')\" [cdkDropListData]=\"currentFields\">\n        <div class=\"item\" cdkDragHandle cdkDrag [cdkDragData]=\"field\" *ngFor=\"let field of currentFields; index as i\">\n          <div class=\"entry\" [ngClass]=\"{modified: field.confmeta.modified, sfe: field.selectedforenrichment}\">\n            <div class=\"label\" [ngClass]=\"{baseparam: field.baseparameter}\">{{field.label}}</div>\n            <div class=\"group\" [ngClass]=\"{on: field.confmeta.pinned}\" (click)=\"togglePinned(field, $event)\" translate>\n              <span class=\"config-label\" translate>eo.column.config.pinned</span>\n            </div>\n            <!--<div class=\"group\" [ngClass]=\"{on: field.confmeta.group}\" (click)=\"toggleGroup(field, $event)\" translate>eo.column.config.group</div>-->\n            <div class=\"sort\" [ngClass]=\"{on: field.confmeta.sort, asc: field.confmeta.sort === 'asc', desc: field.confmeta.sort === 'desc', disabled: !field.sortable}\"\n            (click)=\"field.sortable && toggleSort(field, $event)\"><span class=\"config-label\" translate>eo.column.config.sort</span></div>\n            <div class=\"alignment\" [ngClass]=\"{on: field.confmeta.alignmentx, left: field.confmeta.alignmentx === 'left',\n            right: field.confmeta.alignmentx === 'right', center: field.confmeta.alignmentx === 'center'}\"\n                 (click)=\"toggleAlignment(field, $event)\"><span class=\"config-label\" translate>eo.column.config.alignment</span>\n              <img *ngIf=\"field.confmeta.alignmentx === 'center'\" class=\"center-second\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAGFBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAB5sPD/AAAACHRSTlMAAAEnK2xwihv2e6MAAAAkSURBVAgdBcGBAQAgDMMgmvn/zcIGMO6xUBHXIqLkYkmQDfABCHAAOCt/xSYAAAAASUVORK5CYII=\">\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div class=\"scroller available\">\n      <div class=\"headline\" translate>eo.column.config.headline.available</div>\n      <div class=\"items\" cdkDropList (cdkDropListDropped)=\"drop($event, 'available')\" [cdkDropListData]=\"availableFields\">\n        <div class=\"item\" cdkDragHandle cdkDrag [cdkDragData]=\"field\" *ngFor=\"let field of availableFields; index as i\">\n          <div class=\"entry\" [ngClass]=\"{modified: field.confmeta.modified, sfe: field.selectedforenrichment}\">\n            <div class=\"label\" [ngClass]=\"{baseparam: field.baseparameter}\">{{field.label}}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n</div>\n",
-                styles: [".cdk-drag-preview{display:none}.cdk-drag-placeholder .entry{border-style:dashed!important;opacity:.9}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}:host{-webkit-animation:eoFadeIn var(--app-default-transition-duration) 1 ease-in-out;animation:eoFadeIn var(--app-default-transition-duration) 1 ease-in-out;background:var(--color-white);bottom:0;display:flex;display:none;flex:1;flex-direction:column;height:100%;left:0;min-height:0;min-width:0;position:absolute;right:0;top:0;width:100%;z-index:10}:host.visible{display:block;overflow-x:auto}:host .configurator{flex:1;flex-direction:column;height:100%}:host .bar,:host .configurator{display:flex;min-height:0;min-width:0}:host .bar{align-items:center;background:var(--color-accent);color:var(--color-white);flex:none;flex-direction:row;min-width:560px;padding:calc(var(--app-pane-padding)/2) var(--app-pane-padding)}:host .bar .title{flex:1 1 auto;font-size:var(--font-subhead)}:host .bar button{color:rgba(var(--color-white-rgb),.87);margin:4px}:host .bar button.primary,:host .bar button:hover{background:rgba(var(--color-white-rgb),.1)}:host .bar button.primary{border:1px solid var(--color-white);color:var(--color-white);white-space:nowrap}:host .bar button.primary:hover{background:rgba(var(--color-white-rgb),.3)}:host .info{color:var(--color-accent);font-size:var(--font-title);font-weight:var(--font-weight-light);line-height:1em;margin:var(--app-pane-padding)}:host .column-config{--cc-border-color:rgba(var(--color-black-rgb),0.15);display:flex;flex:1;flex-direction:row;margin:var(--app-pane-padding);min-height:0;min-width:0}:host .column-config .scroller{background:var(--panel-background-lightgrey);border:1px solid var(--cc-border-color);display:flex;flex:2;flex-direction:column;min-height:0;min-width:0;min-width:300px}:host .column-config .scroller:last-child{flex:1;min-width:200px}[dir=ltr] :host .column-config .scroller:last-child{margin-left:var(--app-pane-padding)}[dir=rtl] :host .column-config .scroller:last-child{margin-right:var(--app-pane-padding)}:host .column-config .scroller .headline{border-bottom:1px solid var(--cc-border-color);color:var(--text-color-caption);padding:calc(var(--app-pane-padding)/2)}:host .column-config .scroller .items{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow-y:auto;padding:calc(var(--app-pane-padding)/2)}:host .column-config .scroller .items .entry{-khtml-user-select:none;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-moz-user-select:none;-ms-user-select:none;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-touch-callout:none;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-user-select:none;background:var(--color-white);border:1px solid var(--cc-border-color);cursor:default;cursor:move;display:flex;flex:1;flex-direction:row;margin:4px 0;min-height:0;min-width:0;overflow:hidden;padding:calc(var(--app-pane-padding)/2);transition:all var(--app-default-transition-duration) ease-in-out;user-select:none}:host .column-config .scroller .items .entry:before{background:rgba(var(--color-black-rgb),.06);content:\" \";height:1.5em;width:calc(var(--app-pane-padding)/2)}[dir=ltr] :host .column-config .scroller .items .entry:before{margin-right:calc(var(--app-pane-padding)/2)}[dir=rtl] :host .column-config .scroller .items .entry:before{margin-left:calc(var(--app-pane-padding)/2)}:host .column-config .scroller .items .entry.sfe:before{background:rgba(var(--color-black-rgb),.26);color:var(--color-white);content:\"*\";text-align:center}:host .column-config .scroller .items .entry.modified:before{background:var(--color-accent)}:host .column-config .scroller .items .entry .label{flex:1 1 auto}:host .column-config .scroller .items .entry .label.baseparam{font-style:italic}:host .column-config .scroller .items .entry .sort:after{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAGFBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAB5sPD/AAAACHRSTlMAAAEnK2xwihv2e6MAAAAkSURBVAgdBcGBAQAgDMMgmvn/zcIGMO6xUBHXIqLkYkmQDfABCHAAOCt/xSYAAAAASUVORK5CYII=);content:\"\";display:inline-block;height:8px;opacity:0;position:relative;top:2px;transition:all var(--app-default-transition-duration) ease-in-out;width:8px}[dir=ltr] :host .column-config .scroller .items .entry .sort:after{margin-left:4px}[dir=rtl] :host .column-config .scroller .items .entry .sort:after{margin-right:4px}:host .column-config .scroller .items .entry .sort.asc:after{opacity:1}:host .column-config .scroller .items .entry .sort.desc:after{opacity:1;transform:rotate(180deg)}:host .column-config .scroller .items .entry .alignment:after{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAGFBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAB5sPD/AAAACHRSTlMAAAEnK2xwihv2e6MAAAAkSURBVAgdBcGBAQAgDMMgmvn/zcIGMO6xUBHXIqLkYkmQDfABCHAAOCt/xSYAAAAASUVORK5CYII=);content:\"\";display:inline-block;height:8px;opacity:0;position:relative;top:2px;transform:rotate(270deg);transition:all var(--app-default-transition-duration) ease-in-out;width:8px}[dir=ltr] :host .column-config .scroller .items .entry .alignment:after{margin-left:4px}[dir=rtl] :host .column-config .scroller .items .entry .alignment:after{margin-right:4px}:host .column-config .scroller .items .entry .alignment.center:after,:host .column-config .scroller .items .entry .alignment.left:after{opacity:1}:host .column-config .scroller .items .entry .alignment.right:after{opacity:1;transform:rotate(90deg)}:host .column-config .scroller .items .entry .alignment .center-second{margin-left:2px;position:relative;top:2px;transform:rotate(90deg)}:host .column-config .scroller .items .entry .alignment,:host .column-config .scroller .items .entry .group,:host .column-config .scroller .items .entry .sort{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;background:rgba(var(--color-black-rgb),.06);border:1px solid rgba(var(--color-black-rgb),0);border-radius:2px;color:rgba(var(--color-black-rgb),.33);font-size:var(--font-hint);margin:0 4px;padding:0 4px;transition:all var(--app-default-transition-duration) ease-in-out;white-space:nowrap}:host .column-config .scroller .items .entry .alignment:hover,:host .column-config .scroller .items .entry .group:hover,:host .column-config .scroller .items .entry .sort:hover{border-color:rgba(var(--color-black-rgb),.22);color:var(--text-color-caption)}:host .column-config .scroller .items .entry .alignment.on,:host .column-config .scroller .items .entry .group.on,:host .column-config .scroller .items .entry .sort.on{border-color:var(--color-accent-light);color:var(--color-accent-light)}:host .column-config .scroller .items .entry .alignment.disabled,:host .column-config .scroller .items .entry .group.disabled,:host .column-config .scroller .items .entry .sort.disabled{border:1px solid rgba(var(--color-black-rgb),0);color:rgba(var(--color-black-rgb),.33);cursor:default;text-decoration:line-through}:host .column-config .scroller .items .entry .alignment .config-label,:host .column-config .scroller .items .entry .group .config-label,:host .column-config .scroller .items .entry .sort .config-label{position:relative;top:2px}"]
+                styles: [".cdk-drag-preview{display:none}.cdk-drag-placeholder .entry{border-style:dashed!important;opacity:.9}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}:host{-webkit-animation:eoFadeIn var(--app-default-transition-duration) 1 ease-in-out;animation:eoFadeIn var(--app-default-transition-duration) 1 ease-in-out;background:var(--color-white);bottom:0;display:flex;display:none;flex:1;flex-direction:column;height:100%;left:0;min-height:0;min-width:0;position:absolute;right:0;top:0;width:100%;z-index:10}:host.visible{display:block;overflow-x:auto}:host .configurator{flex:1;flex-direction:column;height:100%}:host .bar,:host .configurator{display:flex;min-height:0;min-width:0}:host .bar{align-items:center;background:var(--color-accent);color:var(--color-white);flex:none;flex-direction:row;min-width:560px;padding:calc(var(--app-pane-padding)/2) var(--app-pane-padding)}:host .bar .title{flex:1 1 auto;font-size:var(--font-subhead)}:host .bar button{color:rgba(var(--color-white-rgb),.87);margin:4px}:host .bar button.primary,:host .bar button:hover{background:rgba(var(--color-white-rgb),.1)}:host .bar button.primary{border:1px solid var(--color-white);color:var(--color-white);white-space:nowrap}:host .bar button.primary:hover{background:rgba(var(--color-white-rgb),.3)}:host .info{color:var(--color-accent);font-size:var(--font-title);font-weight:var(--font-weight-light);line-height:1em;margin:var(--app-pane-padding)}:host .column-config{--cc-border-color:rgba(var(--color-black-rgb),0.15);display:flex;flex:1;flex-direction:row;margin:var(--app-pane-padding);min-height:0;min-width:0}:host .column-config .scroller{background:var(--panel-background-lightgrey);border:1px solid var(--cc-border-color);display:flex;flex:2;flex-direction:column;min-height:0;min-width:0;min-width:300px}:host .column-config .scroller:last-child{flex:1;min-width:200px}[dir=ltr] :host .column-config .scroller:last-child{margin-left:var(--app-pane-padding)}[dir=rtl] :host .column-config .scroller:last-child{margin-right:var(--app-pane-padding)}:host .column-config .scroller .headline{border-bottom:1px solid var(--cc-border-color);color:var(--text-color-caption);padding:calc(var(--app-pane-padding)/2)}:host .column-config .scroller .items{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow-y:auto;padding:calc(var(--app-pane-padding)/2)}:host .column-config .scroller .items .entry{-khtml-user-select:none;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-moz-user-select:none;-ms-user-select:none;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-touch-callout:none;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-user-select:none;background:var(--color-white);border:1px solid var(--cc-border-color);cursor:default;cursor:move;display:flex;flex:1;flex-direction:row;margin:4px 0;min-height:0;min-width:0;overflow:hidden;padding:calc(var(--app-pane-padding)/2);transition:all var(--app-default-transition-duration) ease-in-out;user-select:none}:host .column-config .scroller .items .entry:before{background:rgba(var(--color-black-rgb),.06);content:\" \";height:1.5em;width:calc(var(--app-pane-padding)/2)}[dir=ltr] :host .column-config .scroller .items .entry:before{margin-right:calc(var(--app-pane-padding)/2)}[dir=rtl] :host .column-config .scroller .items .entry:before{margin-left:calc(var(--app-pane-padding)/2)}:host .column-config .scroller .items .entry.sfe:before{background:rgba(var(--color-black-rgb),.26);color:var(--color-white);content:\"*\";text-align:center}:host .column-config .scroller .items .entry.modified:before{background:var(--color-accent)}:host .column-config .scroller .items .entry .label{flex:1 1 auto}:host .column-config .scroller .items .entry .label.baseparam{font-style:italic}:host .column-config .scroller .items .entry .sort:after{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAGFBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAB5sPD/AAAACHRSTlMAAAEnK2xwihv2e6MAAAAkSURBVAgdBcGBAQAgDMMgmvn/zcIGMO6xUBHXIqLkYkmQDfABCHAAOCt/xSYAAAAASUVORK5CYII=);content:\"\";display:inline-block;height:8px;opacity:0;position:relative;top:2px;transition:all var(--app-default-transition-duration) ease-in-out;width:8px}[dir=ltr] :host .column-config .scroller .items .entry .sort:after{margin-left:4px}[dir=rtl] :host .column-config .scroller .items .entry .sort:after{margin-right:4px}:host .column-config .scroller .items .entry .sort.asc:after{opacity:1}:host .column-config .scroller .items .entry .sort.desc:after{opacity:1;transform:rotate(180deg)}:host .column-config .scroller .items .entry .alignment:after{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAGFBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAB5sPD/AAAACHRSTlMAAAEnK2xwihv2e6MAAAAkSURBVAgdBcGBAQAgDMMgmvn/zcIGMO6xUBHXIqLkYkmQDfABCHAAOCt/xSYAAAAASUVORK5CYII=);content:\"\";display:inline-block;height:8px;opacity:0;position:relative;top:2px;transform:rotate(270deg);transition:all var(--app-default-transition-duration) ease-in-out;width:8px}[dir=ltr] :host .column-config .scroller .items .entry .alignment:after{margin-left:4px}[dir=rtl] :host .column-config .scroller .items .entry .alignment:after{margin-right:4px}:host .column-config .scroller .items .entry .alignment.center:after,:host .column-config .scroller .items .entry .alignment.left:after{opacity:1}:host .column-config .scroller .items .entry .alignment.right:after{opacity:1;transform:rotate(90deg)}:host .column-config .scroller .items .entry .alignment .center-second{margin-left:2px;position:relative;top:2px;transform:rotate(90deg)}:host .column-config .scroller .items .entry .alignment,:host .column-config .scroller .items .entry .group,:host .column-config .scroller .items .entry .sort{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;background:rgba(var(--color-black-rgb),.06);border:1px solid rgba(var(--color-black-rgb),0);border-radius:2px;color:rgba(var(--color-black-rgb),.33);cursor:pointer;font-size:var(--font-hint);margin:0 4px;padding:0 4px;transition:all var(--app-default-transition-duration) ease-in-out;white-space:nowrap}:host .column-config .scroller .items .entry .alignment:hover,:host .column-config .scroller .items .entry .group:hover,:host .column-config .scroller .items .entry .sort:hover{border-color:rgba(var(--color-black-rgb),.22);color:var(--text-color-caption)}:host .column-config .scroller .items .entry .alignment.on,:host .column-config .scroller .items .entry .group.on,:host .column-config .scroller .items .entry .sort.on{border-color:var(--color-accent-light);color:var(--color-accent-light)}:host .column-config .scroller .items .entry .alignment.disabled,:host .column-config .scroller .items .entry .group.disabled,:host .column-config .scroller .items .entry .sort.disabled{border:1px solid rgba(var(--color-black-rgb),0);color:rgba(var(--color-black-rgb),.33);cursor:default;text-decoration:line-through}:host .column-config .scroller .items .entry .alignment .config-label,:host .column-config .scroller .items .entry .group .config-label,:host .column-config .scroller .items .entry .sort .config-label{position:relative;top:2px}"]
             },] }
 ];
 ColumnConfiguratorComponent.ctorParameters = () => [
@@ -16855,6 +16910,7 @@ class ResultListComponent extends UnsubscribeOnDestroy {
         this.settings = {};
         this.querySubtitle = '';
         this.savedSearchClicked = false;
+        this.showWarnExportCSVThresholdDialog = false;
         this.title = '';
         this.emptyMessage = '';
         this.selectFirst = true;
@@ -16869,6 +16925,8 @@ class ResultListComponent extends UnsubscribeOnDestroy {
         this.onResult = new EventEmitter();
         this.onQueryInvalid = new EventEmitter();
         this.VIRTUAL_LIST_CHUNK_SIZE = this.config.getRaw('search.limit');
+        this.resolveReferencesCsv = this.config.getRaw('search.resolveReferencesCSV') || false;
+        this.resolveReferencesCsvThreshold = this.config.getRaw('search.resolveReferencesCSVThreshold') || 10000;
         this._cachedColumns = this.storageService.getItem(ResultListComponent.COLUMNS_DEFINITION) || [];
     }
     set query(query) {
@@ -17056,10 +17114,18 @@ class ResultListComponent extends UnsubscribeOnDestroy {
     executeSuggestSearch() {
         // todo: implement
     }
-    exportCSV() {
+    resultHasReferences() {
+        return this._result.fields.elements.some(element => element.type === 'ORGANISATION' || element.type === 'REFERENCE');
+    }
+    exportCSV(ignoreThreshold = false) {
+        if (!ignoreThreshold && this.resolveReferencesCsv && this.list.gridCount.totalCount > this.resolveReferencesCsvThreshold && this.resultHasReferences()) {
+            this.showWarnExportCSVThresholdDialog = true;
+            return;
+        }
         this.csvLoadingSpinnerVisibility = true;
         this.updateQuery({});
-        this.searchService.downloadCsvFromQuery(this.query.getQueryJson()).subscribe(() => {
+        this.showWarnExportCSVThresholdDialog = false;
+        this.searchService.downloadCsvFromQuery(this.query.getQueryJson(this.resolveReferencesCsv)).subscribe(() => {
             this.csvLoadingSpinnerVisibility = false;
         });
     }
@@ -17084,8 +17150,8 @@ ResultListComponent.COLUMNS_DEFINITION = 'eo.framework.cache.columns.definition'
 ResultListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-result-list',
-                template: "<div class=\"loader-overlay__mask\" *ngIf=\"showLoader\">\n  <eo-loading-spinner class=\"result-list__loader\" [size]=\"'medium'\"></eo-loading-spinner>\n</div>\n<eo-column-configurator *ngIf=\"visibleConfig\" [visible]=\"visibleConfig\"\n                        [configType]=\"configType\" [configContext]=\"configContext\" [eoGrid]=\"grid\"\n                        (onConfigChanged)=\"visibleConfig = false; onConfigChanged($event)\" ></eo-column-configurator>\n\n<eo-list-container #eoList [applySelection]=\"{}\" [loading]=\"false\" [parseDmsParams]=\"parseDmsParams\">\n  <div class=\"eo-header\">\n    <eo-icon class=\"eo-header-icon\" *ngIf=\"hasIcon\" [iconSrc]=\"'assets/_default/svg/ic_search.svg'\"></eo-icon>\n    <div class=\"eo-header-info\">\n      <div class=\"eo-header-title\">{{title || ('eo.search.title' | translate)}}</div>\n      <div class=\"eo-header-subtitle\">\n        <span *ngIf=\"!storedQuery; else storedQueryText\" class=\"eo-header-subtitle__label\" [title]=\"querySubtitle\">{{querySubtitle}}</span>\n        <ng-template #storedQueryText>\n          <ng-container *ngIf=\"storedQuery.parameter.length === 0; else storedQueryDialog\">\n            <span class=\"eo-header-subtitle__label\" [title]=\"('eo.search.aside.summary.storedquery' | translate) + ': ' + storedQuery.name\">\n              {{'eo.search.aside.summary.storedquery' | translate}}: {{storedQuery.name}}\n            </span>\n          </ng-container>\n        </ng-template>\n        <ng-template #storedQueryDialog>\n          <div class=\"stored-query\">\n            <span>\n              {{'eo.search.aside.summary.storedquery' | translate}}:\n            </span>\n            <button class=\"sq\" (click)=\"savedSearchClicked = true\" (keyup.enter)=\"savedSearchClicked = true\" tabindex=\"0\">\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_stored_query.svg'\"></eo-icon>\n              <span>{{storedQuery.name}}</span>\n            </button>\n          </div>\n        </ng-template>\n        <span *ngIf=\"query?.contextFolderTypes.length === 1\" translate\n              [translateParams]=\"{type: query.contextFolderTypes[0].label}\">eo.search.objecttype.form.context</span>\n        <span class=\"term\" *ngIf=\"!storedQuery && query?.term && !clearAfterExecute\" [title]=\"('eo.search.result.term' | translate) + ': ' + query.term\">{{'eo.search.result.term' | translate}} : \"{{query.term}}\"</span>\n        <div class=\"suggest\" *ngIf=\"searchResult?.suggests\">{{'eo.search.suggest' | translate}}<a href=\"javascript:void(0)\" (click)=\"executeSuggestSearch()\">{{searchResult.suggests[0]}}</a> ?\n        </div>\n      </div>\n    </div>\n    <div class=\"eo-header-actions\">\n      <eo-icon class=\"button refresh-button\" [iconSrc]=\"'assets/_default/svg/ic_refresh.svg'\" (click)=\"refreshGrid()\"\n               [iconTitle]=\"('eo.list.refresh' | translate)\"></eo-icon>\n      <eo-icon class=\"button export-button\" [hidden]=\"!query\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\" [iconTitle]=\"('eo.resultlist.export.csv' | translate)\"\n               (click)=\"exportCSV()\" *ngIf=\"!csvLoadingSpinnerVisibility\"></eo-icon>\n      <eo-loading-spinner [size]=\"'small'\" *ngIf=\"csvLoadingSpinnerVisibility\" class=\"spinner\"></eo-loading-spinner>\n      <eo-icon class=\"button config-button\" [iconSrc]=\"'assets/_default/svg/ic_settings.svg'\" [iconTitle]=\"('eo.column.config.title' | translate)\"\n               (click)=\"visibleConfig = !visibleConfig\"></eo-icon>\n      <eo-icon class=\"button actions-button\" (click)=\"eoList.showActions()\" [iconTitle]=\"('eo.object.actions.title' | translate)\"\n               [iconSrc]=\"'assets/_default/svg/ic_more.svg'\" *ngIf=\"!reference\"></eo-icon>\n    </div>\n  </div>\n  <div class=\"eo-body\">\n    <eo-grid #eoGrid [gridOptions]=\"resultGridOptions\" *ngIf=\"hasGridOptions; else error\"\n             [showFooter]=\"true\" (eoGridColumnResized)=\"onColumnResized($event)\" [selectFirst]=\"selectFirst\"\n             (eoGridCountChanged)=\"eoList.onCountChanged($event);onCountChanged.emit($event);\"\n             (eoGridContextMenuClick)=\"eoList.onContextMenu($event);onContextMenu.emit($event)\"\n             (eoGridSelectionChanged)=\"eoList.onSelectionChanged($event);onSelectionChanged.emit($event)\"\n             (eoGridDoubleClick)=\"eoList.onDoubleClick($event);onDoubleClick.emit($event)\"\n             (eoGridFocusChanged)=\"eoList.onFocusChanged($event);onFocusChanged.emit($event)\">\n\n      <div class=\"footer\">\n        <eo-total-count [gridCount]=\"eoList.gridCount\" [outsideGrid]=\"false\" class=\"flex-row\"></eo-total-count>\n        <!--<eo-quick-filter [eoGrid]=\"eoGrid\"></eo-quick-filter>-->\n        <eo-pagination [settings]=\"settings\" (pageChanged)=\"onPageChanged($event)\"></eo-pagination>\n      </div>\n\n      <div class=\"empty\">\n        <eo-error-message [emptyState]=\"{text: emptyMessage || 'eo.search.result.expired'}\"></eo-error-message>\n      </div>\n    </eo-grid>\n  </div>\n  <ng-template #error>\n\n    <eo-error-message *ngIf=\"hasGridOptions\" [emptyState]=\"{text:'eo.search.mode.expert.result.empty'}\">\n    </eo-error-message>\n\n  </ng-template>\n</eo-list-container>\n\n<eo-dialog [visible]=\"savedSearchClicked\" (hide)=\"savedSearchClicked = false\" [title]=\"'eo.search.aside.summary.storedquery' | translate\">\n  <eo-stored-query [query]=\"storedQuery\"\n                   (onQueryLoaded)=\"onStoredQueryLoaded()\"\n                   (onQueryExecute)=\"onStoredQueryExecute($event)\"></eo-stored-query>\n</eo-dialog>\n\n",
-                styles: [":host{background:var(--panel-background);display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0}:host .spinner{padding:calc(var(--app-pane-padding)/4)}:host .result-head{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0}:host .result-head .header-info{flex:1}:host .result-head .header-info .header-sub-title .term{margin:0 var(--app-pane-padding)}:host .result-head .header-info .header-title{-moz-user-select:none;-webkit-user-select:none;font-size:20px;padding-bottom:calc(var(--app-pane-padding)/4);user-select:none}:host .result-head .header-info .status{display:flex}:host .result-head .header-info .status .term{flex:1}:host .result-head .actions eo-icon{cursor:pointer;padding:calc(var(--app-pane-padding)/4)}:host .loader-overlay__mask{-webkit-animation:eoFadeIn .5s;animation:eoFadeIn .5s;background:rgba(var(--color-white-rgb),.8);display:flex;height:100%;position:absolute;width:100%;z-index:11}:host .loader-overlay__mask .result-list__loader{margin:auto}:host .stored-query{display:flex;max-height:45vh}:host .stored-query span{padding-right:calc(var(--app-pane-padding)/2)}:host .stored-query>div{background-color:var(--color-white);border-radius:2px 0 0 2px;margin:0 1px;padding:calc(var(--app-pane-padding)/2)}:host .stored-query>div eo-icon{color:var(--text-color-caption);padding:calc(var(--app-pane-padding)/4)}:host .stored-query .sq{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;align-items:center;background-color:var(--color-white);background-color:var(--list-item-hover-background);border-radius:2px;color:var(--text-color-caption);cursor:pointer;display:flex;flex-flow:row;overflow:hidden;padding:calc(var(--app-pane-padding)/100);text-decoration:none;transition:all var(--app-default-transition-duration) ease-in-out}:host .stored-query .sq>eo-icon{color:var(--text-color-hint);flex-shrink:0}:host .stored-query .sq>span{overflow:hidden;padding:0 calc(var(--app-pane-padding)/2);text-overflow:ellipsis}eo-stored-query{background-color:var(--color-white);border-radius:0 2px 2px 0;overflow-y:auto;padding:var(--app-pane-padding)}"]
+                template: "<div class=\"loader-overlay__mask\" *ngIf=\"showLoader\">\n  <eo-loading-spinner class=\"result-list__loader\" [size]=\"'medium'\"></eo-loading-spinner>\n</div>\n<eo-column-configurator *ngIf=\"visibleConfig\" [visible]=\"visibleConfig\"\n                        [configType]=\"configType\" [configContext]=\"configContext\" [eoGrid]=\"grid\"\n                        (onConfigChanged)=\"visibleConfig = false; onConfigChanged($event)\" ></eo-column-configurator>\n\n<eo-list-container #eoList [applySelection]=\"{}\" [loading]=\"false\" [parseDmsParams]=\"parseDmsParams\">\n  <div class=\"eo-header\">\n    <eo-icon class=\"eo-header-icon\" *ngIf=\"hasIcon\" [iconSrc]=\"'assets/_default/svg/ic_search.svg'\"></eo-icon>\n    <div class=\"eo-header-info\">\n      <div class=\"eo-header-title\">{{title || ('eo.search.title' | translate)}}</div>\n      <div class=\"eo-header-subtitle\">\n        <span *ngIf=\"!storedQuery; else storedQueryText\" class=\"eo-header-subtitle__label\" [title]=\"querySubtitle\">{{querySubtitle}}</span>\n        <ng-template #storedQueryText>\n          <ng-container *ngIf=\"storedQuery.parameter.length === 0; else storedQueryDialog\">\n            <span class=\"eo-header-subtitle__label\" [title]=\"('eo.search.aside.summary.storedquery' | translate) + ': ' + storedQuery.name\">\n              {{'eo.search.aside.summary.storedquery' | translate}}: {{storedQuery.name}}\n            </span>\n          </ng-container>\n        </ng-template>\n        <ng-template #storedQueryDialog>\n          <div class=\"stored-query\">\n            <span>\n              {{'eo.search.aside.summary.storedquery' | translate}}:\n            </span>\n            <button class=\"sq\" (click)=\"savedSearchClicked = true\" (keyup.enter)=\"savedSearchClicked = true\" tabindex=\"0\">\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_stored_query.svg'\"></eo-icon>\n              <span>{{storedQuery.name}}</span>\n            </button>\n          </div>\n        </ng-template>\n        <span *ngIf=\"query?.contextFolderTypes.length === 1\" translate\n              [translateParams]=\"{type: query.contextFolderTypes[0].label}\">eo.search.objecttype.form.context</span>\n        <span class=\"term\" *ngIf=\"!storedQuery && query?.term && !clearAfterExecute\" [title]=\"('eo.search.result.term' | translate) + ': ' + query.term\">{{'eo.search.result.term' | translate}} : \"{{query.term}}\"</span>\n        <div class=\"suggest\" *ngIf=\"searchResult?.suggests\">{{'eo.search.suggest' | translate}}<a href=\"javascript:void(0)\" (click)=\"executeSuggestSearch()\">{{searchResult.suggests[0]}}</a> ?\n        </div>\n      </div>\n    </div>\n    <div class=\"eo-header-actions\">\n      <eo-icon class=\"button refresh-button\" [iconSrc]=\"'assets/_default/svg/ic_refresh.svg'\" (click)=\"refreshGrid()\"\n               [iconTitle]=\"('eo.list.refresh' | translate)\"></eo-icon>\n      <eo-icon class=\"button export-button\" [hidden]=\"!query\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\" [iconTitle]=\"('eo.resultlist.export.csv' | translate)\"\n               (click)=\"exportCSV()\" *ngIf=\"!csvLoadingSpinnerVisibility\"></eo-icon>\n      <eo-loading-spinner [size]=\"'small'\" *ngIf=\"csvLoadingSpinnerVisibility\" class=\"spinner\"></eo-loading-spinner>\n      <eo-icon class=\"button config-button\" [iconSrc]=\"'assets/_default/svg/ic_settings.svg'\" [iconTitle]=\"('eo.column.config.title' | translate)\"\n               (click)=\"visibleConfig = !visibleConfig\"></eo-icon>\n      <eo-icon class=\"button actions-button\" (click)=\"eoList.showActions()\" [iconTitle]=\"('eo.object.actions.title' | translate)\"\n               [iconSrc]=\"'assets/_default/svg/ic_more.svg'\" *ngIf=\"!reference\"></eo-icon>\n    </div>\n  </div>\n  <div class=\"eo-body\">\n    <eo-grid #eoGrid [gridOptions]=\"resultGridOptions\" *ngIf=\"hasGridOptions; else error\"\n             [showFooter]=\"true\" (eoGridColumnResized)=\"onColumnResized($event)\" [selectFirst]=\"selectFirst\"\n             (eoGridCountChanged)=\"eoList.onCountChanged($event);onCountChanged.emit($event);\"\n             (eoGridContextMenuClick)=\"eoList.onContextMenu($event);onContextMenu.emit($event)\"\n             (eoGridSelectionChanged)=\"eoList.onSelectionChanged($event);onSelectionChanged.emit($event)\"\n             (eoGridDoubleClick)=\"eoList.onDoubleClick($event);onDoubleClick.emit($event)\"\n             (eoGridFocusChanged)=\"eoList.onFocusChanged($event);onFocusChanged.emit($event)\">\n\n      <div class=\"footer\">\n        <eo-total-count [gridCount]=\"eoList.gridCount\" [outsideGrid]=\"false\" class=\"flex-row\"></eo-total-count>\n        <!--<eo-quick-filter [eoGrid]=\"eoGrid\"></eo-quick-filter>-->\n        <eo-pagination [settings]=\"settings\" (pageChanged)=\"onPageChanged($event)\"></eo-pagination>\n      </div>\n\n      <div class=\"empty\">\n        <eo-error-message [emptyState]=\"{text: emptyMessage || 'eo.search.result.expired'}\"></eo-error-message>\n      </div>\n    </eo-grid>\n  </div>\n  <ng-template #error>\n\n    <eo-error-message *ngIf=\"hasGridOptions\" [emptyState]=\"{text:'eo.search.mode.expert.result.empty'}\">\n    </eo-error-message>\n\n  </ng-template>\n</eo-list-container>\n\n<eo-dialog [visible]=\"savedSearchClicked\" (hide)=\"savedSearchClicked = false\" [title]=\"'eo.search.aside.summary.storedquery' | translate\">\n  <eo-stored-query [query]=\"storedQuery\"\n                   (onQueryLoaded)=\"onStoredQueryLoaded()\"\n                   (onQueryExecute)=\"onStoredQueryExecute($event)\"></eo-stored-query>\n</eo-dialog>\n\n<eo-dialog [title]=\"'eo.resultlist.export.csv.threshold.dialog.title' | translate\"\n           [(visible)]=\"showWarnExportCSVThresholdDialog\" [focusOnShow]=\"false\" [minWidth]=\"400\" [styleClass]=\"'threshold__dialog'\">\n\n  <div>{{'eo.resultlist.export.csv.threshold.dialog.message' | translate}}</div>\n\n  <div class=\"action-buttons flex-row\">\n    <button type=\"button\" class=\"button cancel\" (click)=\"showWarnExportCSVThresholdDialog = false\"\n            translate>eo.resultlist.export.csv.threshold.dialog.cancel</button>\n    <button type=\"button\" cdkFocusInitial (click)=\"exportCSV(true)\" class=\"button primary\"\n            translate>eo.resultlist.export.csv.threshold.dialog.export</button>\n  </div>\n</eo-dialog>\n\n",
+                styles: [":host{background:var(--panel-background);display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0}:host .spinner{padding:calc(var(--app-pane-padding)/4)}:host .result-head{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0}:host .result-head .header-info{flex:1}:host .result-head .header-info .header-sub-title .term{margin:0 var(--app-pane-padding)}:host .result-head .header-info .header-title{-moz-user-select:none;-webkit-user-select:none;font-size:20px;padding-bottom:calc(var(--app-pane-padding)/4);user-select:none}:host .result-head .header-info .status{display:flex}:host .result-head .header-info .status .term{flex:1}:host .result-head .actions eo-icon{cursor:pointer;padding:calc(var(--app-pane-padding)/4)}:host .loader-overlay__mask{-webkit-animation:eoFadeIn .5s;animation:eoFadeIn .5s;background:rgba(var(--color-white-rgb),.8);display:flex;height:100%;position:absolute;width:100%;z-index:11}:host .loader-overlay__mask .result-list__loader{margin:auto}:host .stored-query{display:flex;max-height:45vh}:host .stored-query span{padding-right:calc(var(--app-pane-padding)/2)}:host .stored-query>div{background-color:var(--color-white);border-radius:2px 0 0 2px;margin:0 1px;padding:calc(var(--app-pane-padding)/2)}:host .stored-query>div eo-icon{color:var(--text-color-caption);padding:calc(var(--app-pane-padding)/4)}:host .stored-query .sq{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;align-items:center;background-color:var(--color-white);background-color:var(--list-item-hover-background);border-radius:2px;color:var(--text-color-caption);cursor:pointer;display:flex;flex-flow:row;overflow:hidden;padding:calc(var(--app-pane-padding)/100);text-decoration:none;transition:all var(--app-default-transition-duration) ease-in-out}:host .stored-query .sq>eo-icon{color:var(--text-color-hint);flex-shrink:0}:host .stored-query .sq>span{overflow:hidden;padding:0 calc(var(--app-pane-padding)/2);text-overflow:ellipsis}eo-stored-query{background-color:var(--color-white);border-radius:0 2px 2px 0;overflow-y:auto;padding:var(--app-pane-padding)}::ng-deep .threshold__dialog{min-height:unset!important;padding:8px}::ng-deep .threshold__dialog--header{background:#fff!important;color:rgba(var(--color-black-rgb),.54)!important;font-size:1.17em!important;font-weight:400!important;margin:0;padding:0 0 1em!important}"]
             },] }
 ];
 ResultListComponent.ctorParameters = () => [
@@ -17102,6 +17168,7 @@ ResultListComponent.ctorParameters = () => [
 ];
 ResultListComponent.propDecorators = {
     grid: [{ type: ViewChild, args: ['eoGrid',] }],
+    list: [{ type: ViewChild, args: ['eoList',] }],
     title: [{ type: Input }],
     configType: [{ type: Input }],
     configContext: [{ type: Input }],
@@ -20745,6 +20812,10 @@ class InboxDetailsComponent extends UnsubscribeOnDestroy {
      * @param action The action to be executes
      */
     executeWorkItemAction(action) {
+        this.preventClickThrough = true;
+        setTimeout(() => {
+            this.preventClickThrough = false;
+        }, 1000);
         setTimeout(() => {
             if (!this.formState || !this.formState.invalid) {
                 if (action.url) {
@@ -21842,48 +21913,6 @@ const listAnimation = trigger('listAnimation', [
     ])
 ]);
 
-const STATE = {
-    LOADING: 'loading',
-    READY: 'ready',
-    ERROR: 'error'
-};
-class PanelLoading {
-    constructor() {
-        this.state = '';
-        this.loading = () => this._set(STATE.LOADING);
-        this.ready = () => this._set(STATE.READY);
-        this.error = () => this._set(STATE.ERROR);
-        this.isLoading = () => this.state === STATE.LOADING;
-        this.isReady = () => this.state === STATE.READY;
-        this.isError = () => this.state === STATE.ERROR;
-    }
-    _set(_state) {
-        this.state = _state;
-    }
-    subscribe(observable, success, error) {
-        this.loading();
-        return observable.subscribe((res) => {
-            if (success) {
-                success.call(this, res);
-            }
-            this.ready();
-        }, (err) => {
-            if (error) {
-                error.call(this, err);
-            }
-            this.error();
-        });
-    }
-}
-const panelLoadingAnimations = trigger('panelLoading', [
-    state(STATE.ERROR, style({ opacity: 0 })),
-    state(STATE.LOADING, style({ opacity: 0.5 })),
-    state(STATE.READY, style({ opacity: 1 })),
-    transition(STATE.LOADING + ' <=> ' + STATE.READY, [
-        animate(200)
-    ])
-]);
-
 class DashboardComponent extends UnsubscribeOnDestroy {
     constructor(userService, titleService, router, route, config, searchService, authService, systemService, inboxService, prepareService, envService, capabilityService, storedQueriesService) {
         super();
@@ -22057,13 +22086,14 @@ var LockSettings;
 })(LockSettings || (LockSettings = {}));
 
 class SettingsComponent extends UnsubscribeOnDestroy {
-    constructor(renderer, userService, config, notify, systemService, capabilitiesService, envService, titleService, agentService, fb, cacheService, listSettingsService, storageService, translate) {
+    constructor(renderer, userService, config, notify, systemService, eventService, capabilitiesService, envService, titleService, agentService, fb, cacheService, listSettingsService, storageService, translate, notification) {
         super();
         this.renderer = renderer;
         this.userService = userService;
         this.config = config;
         this.notify = notify;
         this.systemService = systemService;
+        this.eventService = eventService;
         this.capabilitiesService = capabilitiesService;
         this.envService = envService;
         this.titleService = titleService;
@@ -22073,14 +22103,26 @@ class SettingsComponent extends UnsubscribeOnDestroy {
         this.listSettingsService = listSettingsService;
         this.storageService = storageService;
         this.translate = translate;
+        this.notification = notification;
         this.LockSettings = LockSettings;
         this.showAgentConfig = true;
         this.defaultLockSetting = false;
+        this.user$ = this.userService.user$;
+        this.userId = '';
+        this.showDeleteIconTrash = true;
+        this.userImageUri = '';
+        this.hoverSelector = false;
+        this.showPreviewDialog = false;
+        this.showDeleteDialog = false;
+        this.showErrorDialog = false;
+        this.MAX_FILE_SIZE = 524288;
+        this.viewMode = '';
         this.cache = {
             system: true,
             history: true,
             layout: true
         };
+        this.files = {};
         this.titleService.setBaseTitle(this.translate.instant('eo.bar.button.settings.title'));
         this.clientLocales = config.getClientLocales();
         this.capabilities = this.capabilitiesService.getCapabilities();
@@ -22158,15 +22200,102 @@ class SettingsComponent extends UnsubscribeOnDestroy {
         }
     }
     ngAfterViewInit() {
-        if (this.user.imageUri) {
-            this.renderer.setStyle(this.header.nativeElement, 'background-image', `url(${this.user.imageUri})`);
-        }
+        this.user$.subscribe(user => {
+            this.userId = user.id;
+            this.userImageUri = this.userService.getUserImageUri(this.userId);
+            this.refreshUserImageHeaderBackground(this.userImageUri);
+            this.showDeleteIconTrash = !!user.imageUri;
+        });
     }
     setPresence(b) {
         this.userService.setPresence(b)
             .subscribe(_ => {
         }, Utils.throw(null, this.translate.instant('eo.state.settings.presence.error.title'), this.translate.instant('eo.state.settings.presence.error.description')));
     }
+    closePreviewDialog() {
+        this.showPreviewDialog = false;
+        this.profileImageOverlay.nativeElement.focus();
+    }
+    deleteUserImage() {
+        const uploadURI = this.userService.getUserImageUri(this.userId);
+        this.userService
+            .delUserImage(uploadURI).subscribe({
+            next: () => {
+                this.refreshUserImageHeaderBackground(this.userImageUri);
+                this.eventService.trigger(EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE);
+                this.showDeleteDialog = false;
+                this.showDeleteIconTrash = false;
+            },
+            error: (err) => {
+                this.notification.error('', err.error.cause.messages[0]);
+                this.file = null;
+                this.translate.instant('eo.upload.global.error.title'),
+                    this.translate.instant('eo.upload.global.error.description');
+            },
+        });
+    }
+    selectImage(event) {
+        this.file = event.files[0];
+        if (this.file) {
+            this.fileName = this.file.name;
+            switch (false) {
+                case (this.file.type.includes('image/') && this.file.type.includes('jpeg') || this.file.type.includes('png')):
+                    this.viewMode = 'image';
+                    this.showErrorDialog = true;
+                    break;
+                case (this.file.size <= this.MAX_FILE_SIZE):
+                    this.viewMode = 'size';
+                    this.showErrorDialog = true;
+                    break;
+                default:
+                    this.preview = '';
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        this.preview = e.target.result;
+                        this.showPreviewDialog = true;
+                    };
+                    reader.readAsDataURL(this.file);
+                    break;
+            }
+        }
+    }
+    uploadNewUserImage() {
+        this.userService
+            .setUserImage(this.file).subscribe({
+            next: () => {
+                this.profileImageOverlay.nativeElement.focus();
+                this.refreshUserImageHeaderBackground(this.userImageUri);
+                this.eventService.trigger(EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE);
+                this.closePreviewDialog();
+                this.showDeleteIconTrash = true;
+            },
+            error: (err) => {
+                this.notification.error('', err.error.cause.messages[0]);
+                this.file = null;
+                this.translate.instant('eo.upload.global.error.title'),
+                    this.translate.instant('eo.upload.global.error.description');
+            },
+        });
+    }
+    tabAction(input) {
+        input.blur();
+        this.hoverSelector = false;
+    }
+    mouseEnter() {
+        this.hoverSelector = true;
+    }
+    mouseLeave() {
+        this.hoverSelector = false;
+    }
+    trashIconClick() {
+        this.showDeleteDialog = true;
+    }
+    refreshUserImageHeaderBackground(imageUri) {
+        if (imageUri) {
+            const timestamp = new Date().getTime().toString();
+            this.renderer.setStyle(this.headerBg.nativeElement, 'background-image', `url(${imageUri + '&t=' + timestamp})`);
+        }
+    }
     clearCache() {
         const actions = [
             this.cache.history && this.listSettingsService.clearSettings(),
@@ -22181,8 +22310,8 @@ class SettingsComponent extends UnsubscribeOnDestroy {
 SettingsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-settings',
-                template: "<div class=\"eo-settings\" *ngIf=\"user\" eoRtlAware>\n\n  <div class=\"header\">\n\n    <div #header class=\"bg\"></div>\n    <div class=\"fill\">\n      <div class=\"meta username\">{{user.name}}</div>\n      <h1>{{user.firstname}} {{user.lastname}}</h1>\n      <div class=\"meta email\">{{user.email}}</div>\n\n      <div class=\"presence\" *ngIf=\"capabilities.inbox\">\n        <button class=\"toggle dark present\" (click)=\"setPresence(true)\" [ngClass]=\"{active: user.present}\"\n          translate>eo.state.settings.presence.present</button>\n        <button class=\"toggle dark absent\" (click)=\"setPresence(false)\" [ngClass]=\"{active: !user.present}\"\n          translate>eo.state.settings.presence.absent</button>\n      </div>\n    </div>\n    <eo-user-avatar class=\"userImage\"></eo-user-avatar>\n\n  </div>\n\n  <div class=\"body\">\n\n    <div class=\"body-wrap\">\n\n      <div class=\"section section-deputies\" *ngIf=\"capabilities.bpm && hasPrivilege('MANAGE_DEPUTY_LIST')\">\n        <h3 translate>eo.state.settings.deputies</h3>\n\n        <!-- deputies -->\n        <div class=\"entry\">\n          <div class=\"label\" translate>eo.state.settings.deputies.label</div>\n          <div class=\"values\">\n            <form #deputiesForm=\"ngForm\" [ngClass]=\"{dirty: deputiesForm.dirty}\">\n              <eo-organization name=\"deputies\" [dataMeta]=\"deputies.dataMeta\" [filterObject]=\"{type: 'USER'}\"\n                [exceptions]=\"[user.name]\" [multiselect]=\"true\" [(ngModel)]=\"deputies.data\"></eo-organization>\n              <div class=\"actions\" *ngIf=\"deputiesForm.valid && deputiesForm.dirty\">\n                <button class=\"secondary\" (click)=\"resetDeputies()\" translate>eo.state.settings.deputies.cancel</button>\n                <button class=\"primary\" (click)=\"saveDeputies()\" translate>eo.state.settings.deputies.save</button>\n              </div>\n            </form>\n          </div>\n        </div>\n\n        <!-- substitute of -->\n        <div class=\"entry substitute\">\n          <div class=\"label\" translate>eo.state.settings.deputies.subsituteof.label</div>\n          <div class=\"values\">\n            <span class=\"chip\" *ngFor=\"let sub of user.substitutesOf\" [ngClass]=\"{present: sub.present}\">\n              <eo-icon class=\"chip substitute substitute--present\" *ngIf=\"sub.present\"\n                [iconSrc]=\"'assets/_default/svg/ic_done.svg'\"></eo-icon>\n              <eo-icon class=\"chip substitute substitute--away\" *ngIf=\"!sub.present\"\n                [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"></eo-icon>\n              <span>{{sub.title}} ({{sub.name}})</span>\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <!-- password -->\n      <section *ngIf=\"!isCloud && !isSSO || !isCloud && isSSO\" class=\"section section-password\">\n        <div class=\"entry\">\n          <div class=\"label\" translate>eo.password.reset</div>\n          <div class=\"values\">\n            <eo-simple-accordion #simpleAcc [header]=\"('eo.password.reset' | translate)\"\n              [styles]=\"'setting__change-password'\" [headerClass]=\"'setting__change-password-header'\">\n\n              <eo-change-password-form (onFormSumbit)=\"simpleAcc.onTabClose()\"></eo-change-password-form>\n            </eo-simple-accordion>\n          </div>\n        </div>\n      </section>\n\n      <!-- language -->\n      <div class=\"section section-lang\">\n        <h3 translate>eo.state.settings.language</h3>\n        <div class=\"entry lang-app\">\n          <div class=\"label\" translate>eo.state.settings.language.client</div>\n          <div class=\"values\">\n            <button class=\"toggle\" (click)=\"changeClientLocale(locale.iso)\"\n              [ngClass]=\"{active: translate.currentLang === locale.iso}\"\n              *ngFor=\"let locale of clientLocales\">{{locale.label}}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"entry lang-def\">\n          <div class=\"label\" translate>eo.state.settings.language.schema</div>\n          <div class=\"values\">\n            <button class=\"toggle\" (click)=\"changeSchemaLocale(locale.code)\"\n              [ngClass]=\"{active: activeSchema === locale.code}\"\n              *ngFor=\"let locale of schemaLocales\">{{locale.displayname}}</button>\n          </div>\n        </div>\n      </div>\n\n      <!-- permissions -->\n      <div class=\"section section-perm\">\n        <h3 translate>eo.state.settings.permission</h3>\n        <div class=\"entry perm-roles\">\n          <div class=\"label\" translate>eo.state.settings.roles</div>\n          <div class=\"values roles\">\n            <eo-simple-accordion [header]=\"('eo.state.settings.roles' | translate)\">\n              <eo-permissions [roles]=\"user.roles\"></eo-permissions>\n            </eo-simple-accordion>\n          </div>\n        </div>\n      </div>\n\n      <!-- agent -->\n      <div class=\"section section-others\">\n        <h3 translate>eo.state.settings.others</h3>\n        <ng-container *ngIf=\"showAgentConfig\">\n          <div class=\"entry\">\n            <div class=\"label\" translate>eo.state.settings.agent</div>\n            <div class=\"values\">\n              <div class=\"use-agent\">\n                <eo-checkbox [formControl]=\"useAgentControl\" [readonly]=\"useAgentControl.disabled\"\n                  *ngIf=\"useAgentControl\"></eo-checkbox>\n                <span class=\"use-agent-label\" translate>eo.state.settings.agent.use</span>\n                <!-- <a href=\"https://help.optimal-systems.com/yuuvisRAD/v60/user/client/de/client/integration/cln_tsk_agent_global.htm?Highlight=agent\">\n          <eo-icon class=\"info-icon\" [iconSrc]=\"'assets/_default/svg/ic_info.svg'\"></eo-icon>\n        </a> -->\n              </div>\n            </div>\n          </div>\n\n\n          <div class=\"entry lock-settings\" [ngClass]=\"{'lock-settings--show': (agentStatus | async)}\">\n            <div class=\"label\" translate>eo.state.settings.lock</div>\n            <div class=\"values\">\n              <button class=\"toggle button-enabled\" (click)=\"changeLockSettings(LockSettings.always)\"\n                [ngClass]=\"{active: agentLockSettings === LockSettings.always}\" [disabled]=\"defaultLockSetting\"\n                translate>eo.state.settings.lock.enable</button>\n              <button class=\"toggle button-disabled\" (click)=\"changeLockSettings(LockSettings.never)\"\n                [ngClass]=\"{active: agentLockSettings === LockSettings.never}\" [disabled]=\"defaultLockSetting\"\n                translate>eo.state.settings.lock.disable</button>\n              <button class=\"toggle button-ask\" (click)=\"changeLockSettings(LockSettings.ask)\"\n                [ngClass]=\"{active: agentLockSettings === LockSettings.ask}\" [disabled]=\"defaultLockSetting\"\n                translate>eo.state.settings.lock.ask</button>\n            </div>\n          </div>\n\n\n        </ng-container>\n\n        <div class=\"entry\">\n          <div class=\"label\" translate>eo.state.settings.cache</div>\n          <div class=\"values\">\n            <div class=\"flex-row\">\n              <button translate (click)=\"clearCache()\">eo.state.settings.cache.clear</button>\n              <div class=\"cache\">\n                <eo-form-input class=\"checkbox\" [skipToggle]=\"true\"\n                  [label]=\"'eo.state.settings.config.cache.system' | translate\">\n                  <eo-checkbox [(ngModel)]=\"cache.system\" [ngModelOptions]=\"{ standalone: true }\"></eo-checkbox>\n                </eo-form-input>\n                <eo-form-input class=\"checkbox\" [skipToggle]=\"true\"\n                  [label]=\"'eo.state.settings.config.cache.history' | translate\">\n                  <eo-checkbox [(ngModel)]=\"cache.history\" [ngModelOptions]=\"{ standalone: true }\"></eo-checkbox>\n                </eo-form-input>\n                <eo-form-input class=\"checkbox\" [skipToggle]=\"true\"\n                  [label]=\"'eo.state.settings.config.cache.layout' | translate\">\n                  <eo-checkbox [(ngModel)]=\"cache.layout\" [ngModelOptions]=\"{ standalone: true }\"></eo-checkbox>\n                </eo-form-input>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n\n</div>\n",
-                styles: [":host{bottom:0;justify-content:center;left:0;position:absolute;right:0;top:0}:host,:host .cache{display:flex;flex-flow:row}:host .cache{margin:0 var(--app-pane-padding)}.eo-settings{background:var(--color-white);box-shadow:0 2px 5px 0 rgba(0,0,0,.2);box-sizing:border-box;display:flex;flex-flow:column;margin:var(--app-pane-padding);width:800px}@media (max-width:832px){.eo-settings{margin:0;min-width:inherit;width:100%}}.eo-settings .header{flex:1 1;max-height:300px;min-height:200px;position:relative}@media (max-width:480px){.eo-settings .header{min-height:210px}}.eo-settings .header h1{font-size:var(--font-display);font-weight:var(--font-weight-light);line-height:1em;margin:0;padding:0}.eo-settings .header .meta{margin:calc(var(--app-pane-padding)/2) 0}.eo-settings .header .presence{margin-top:calc(var(--app-pane-padding)*2)}.eo-settings .header .bg{background-position:50%;background-size:cover;bottom:0;filter:grayscale(1);left:0;position:absolute;right:0;top:0}.eo-settings .header .fill{background:rgba(var(--color-primary-rgb),.85);bottom:0;color:var(--color-white);left:0;padding:var(--app-pane-padding);position:absolute;right:0;top:0}.eo-settings .header .userImage{background-position:50%;background-size:cover;border:4px solid var(--color-white);bottom:calc(var(--app-pane-padding)*-1);box-shadow:0 2px 5px 0 rgba(var(--color-black-rgb),.26);height:150px;position:absolute;right:var(--app-pane-padding);width:150px;z-index:1}@media (max-width:480px){.eo-settings .header .userImage{height:105px;width:105px}}.eo-settings .body{flex:1 1 auto;position:relative}.eo-settings .body .body-wrap{bottom:0;box-sizing:border-box;left:0;overflow-y:auto;padding:var(--app-pane-padding);position:absolute;right:0;top:0}.eo-settings .body .section{margin-top:var(--app-pane-padding)}.eo-settings .body .section.section-deputies form{border-radius:2px}.eo-settings .body .section.section-deputies form .actions{display:flex;justify-content:flex-end;padding-top:calc(var(--app-pane-padding)/4)}.eo-settings .body .section.section-deputies form .actions button{border-radius:2px;padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}.eo-settings .body .section.section-deputies form.dirty{background-color:rgba(var(--color-black-rgb),.06);padding:2px}.eo-settings .body .section.section-deputies .entry.substitute .values{display:flex;flex-flow:row wrap}.eo-settings .body .section.section-deputies .entry.substitute .values .chip{align-items:center;display:flex;font-size:.9em;padding:2px 4px}.eo-settings .body .section.section-deputies .entry.substitute .values .chip .substitute{border:0;border-radius:4px;color:var(--color-white);height:calc(var(--app-pane-padding)*0.6);width:calc(var(--app-pane-padding)*0.75)}.eo-settings .body .section.section-deputies .entry.substitute .values .chip .substitute--present{background-color:var(--color-success)}.eo-settings .body .section.section-deputies .entry.substitute .values .chip .substitute--away{background-color:var(--color-error)}.eo-settings .body .section.section-deputies .entry.substitute .values .chip>span{margin:0 calc(var(--app-pane-padding)/2)}.eo-settings .body .section.section-deputies ::ng-deep .values .ui-state-default{background-color:var(--color-white);border-color:rgba(var(--color-black-rgb),.1);border-radius:2px;min-height:27px;padding:0 0 2px 2px}.eo-settings .body .section.section-deputies ::ng-deep .values .ui-state-disabled{border-color:transparent;opacity:1}.eo-settings .body .section p{line-height:1.7em}.eo-settings .body .section h3{color:var(--text-color-caption);font-size:var(--font-subhead);font-weight:var(--font-weight-normal);margin:0;padding:0 0 0 150px}@media (max-width:480px){.eo-settings .body .section h3{padding:0}}.eo-settings .body .section .entry{display:flex;flex-flow:row nowrap;padding:var(--app-pane-padding) 0 0 0}.eo-settings .body .section .entry.lock-settings{height:0;opacity:0;overflow:hidden;transition:all .5s ease-in-out}.eo-settings .body .section .entry.lock-settings--show{height:100%;opacity:1}@media (max-width:480px){.eo-settings .body .section .entry{flex-flow:column}}.eo-settings .body .section .entry .label{color:var(--text-color-caption);flex:0 0 150px}@media (max-width:480px){.eo-settings .body .section .entry .label{flex:0 0 auto;margin-bottom:calc(var(--app-pane-padding)/2)}}.eo-settings .body .section .entry .values{flex:1 1 auto}.eo-settings .body .section .entry .values button{cursor:pointer;margin:0 4px 4px 0}.eo-settings .body .section .entry .values button.active,.eo-settings .body .section .entry .values button.toggle:disabled{cursor:default}.eo-settings .body .section .entry .use-agent{align-items:center;display:flex}.eo-settings .body .section .entry .use-agent .use-agent-label{color:var(--text-color-caption);margin:0 calc(var(--app-pane-padding)/2)}.eo-settings .body .section .entry .use-agent eo-icon.info-icon{border-radius:50%;box-sizing:border-box;color:var(--text-color-caption);margin:0;padding:3px}.eo-settings .body .section .entry .use-agent eo-icon.info-icon:hover{background-color:var(--color-primary);color:var(--color-white);cursor:pointer}.eo-settings .body .section .values.roles{align-items:flex-start;display:flex;flex-flow:column}.eo-settings .body .section .values.roles .role{display:flex;flex-flow:row nowrap;margin-bottom:calc(var(--app-pane-padding)/2);word-break:break-all}.eo-settings .body .section .values.roles .role eo-icon{color:var(--text-color-hint);height:18px;width:18px}.eo-settings .body .section .values.roles .role>div{padding:0 calc(var(--app-pane-padding)/2)}.eo-settings .body .section .values.roles .role>div .description{color:var(--text-color-caption);font-size:var(--font-caption)}.eo-settings .body .toggle-btn{-webkit-border-radius:2px;background:rgba(var(--color-black-rgb),.1);border-radius:2px;color:var(--text-color-caption);cursor:pointer;display:inline-block;margin-right:3px;padding:2px 5px;text-decoration:none}.eo-settings.rtl .header .userImage{left:var(--app-pane-padding);right:auto}.eo-settings.rtl .body .section h3{padding:0 150px 0 0}"]
+                template: "<div class=\"eo-settings\" *ngIf=\"user\" eoRtlAware>\n\n  <div class=\"header\">\n\n    <div #headerBg class=\"bg\"></div>\n    <div class=\"fill\">\n      <div class=\"meta username\">{{user.name}}</div>\n      <h1>{{user.firstname}} {{user.lastname}}</h1>\n      <div class=\"meta email\">{{user.email}}</div>\n\n      <div class=\"presence\" *ngIf=\"capabilities.inbox\">\n        <button class=\"toggle dark present\"  (click)=\"setPresence(true)\" [ngClass]=\"{active: user.present}\"\n        autofocus translate>eo.state.settings.presence.present</button>\n        <button class=\"toggle dark absent\" (click)=\"setPresence(false)\" (keydown.tab)=\"tabAction($event.target)\" [ngClass]=\"{active: !user.present}\"\n          translate>eo.state.settings.presence.absent</button>\n      </div>\n    </div>\n    <div (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\" (keydown.tab)=\"mouseEnter()\">\n\n      <eo-user-avatar #userAvatar class=\"userImage\" tabindex=\"-1\" eoRtlAware=\"full\">\n          <input type=\"file\" accept=\".jpg, .png\" style=\"display:none;\" #files (change)=\"selectImage($event.target)\">\n      </eo-user-avatar>\n      <eo-dialog  [styleClass]=\"'view'\" [minWidth]=\"'300px'\" [title]=\"'eo.state.settings.details.upload.dialog.title' | translate\"\n        [(visible)]=\"showPreviewDialog\" [focusOnShow]=\"false\">\n        <ng-container>\n          <div class=\"contain\">\n            <div class=\"attachments\">\n              <div class=\"atta\">\n                <img [src]=\"preview\">\n              </div>\n              <div class=\"user-avatar\">\n                <img [src]=\"preview\">\n              </div>\n            </div>\n          </div>\n          <div class=\"button-block\">\n            <button type=\"button\" (click)=\"closePreviewDialog()\" class=\"button danger\"\n              translate>eo.state.settings.details.delete.dialog.cancel</button>\n            <button type=\"button\" cdkFocusInitial (click)=\"uploadNewUserImage()\" class=\"button primary\"\n              translate>eo.state.settings.details.dialog.save</button>\n          </div>\n        </ng-container>\n      </eo-dialog>\n\n      <div class=\"overlay\" #profileImageOverlay tabindex=\"0\">\n        <span class=\"updateMessage\" *ngIf=\"hoverSelector\">\n          <eo-icon tabindex=\"0\" (keydown.enter)=\"files.click()\" [iconSrc]=\"'assets/_default/svg/ic_edit.svg'\"\n            (click)=\"files.click()\"></eo-icon>\n          <eo-icon tabindex=\"0\" (keydown.enter)=\"trashIconClick()\" *ngIf=\"showDeleteIconTrash\"\n            [iconSrc]=\"'assets/_default/svg/ic_trash.svg'\" aria-disabled=\"true\" (click)=\"trashIconClick()\"></eo-icon>\n        </span>\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"body\" (keydown.tab)=\"tabAction($event.target)\">\n\n    <div class=\"body-wrap\">\n\n      <div class=\"section section-deputies\" *ngIf=\"capabilities.bpm && hasPrivilege('MANAGE_DEPUTY_LIST')\">\n        <h3 translate>eo.state.settings.deputies</h3>\n\n        <!-- deputies -->\n        <div class=\"entry\">\n          <div class=\"label\" translate>eo.state.settings.deputies.label</div>\n          <div class=\"values\">\n            <form #deputiesForm=\"ngForm\" [ngClass]=\"{dirty: deputiesForm.dirty}\">\n              <eo-organization name=\"deputies\" [dataMeta]=\"deputies.dataMeta\" [filterObject]=\"{type: 'USER'}\"\n                [exceptions]=\"[user.name]\" [multiselect]=\"true\" [(ngModel)]=\"deputies.data\"></eo-organization>\n              <div class=\"actions\" *ngIf=\"deputiesForm.valid && deputiesForm.dirty\">\n                <button class=\"secondary\" (click)=\"resetDeputies()\" translate>eo.state.settings.deputies.cancel</button>\n                <button class=\"primary\" (click)=\"saveDeputies()\" translate>eo.state.settings.deputies.save</button>\n              </div>\n            </form>\n          </div>\n        </div>\n\n        <!-- substitute of -->\n        <div class=\"entry substitute\">\n          <div class=\"label\" translate>eo.state.settings.deputies.subsituteof.label</div>\n          <div class=\"values\">\n            <span class=\"chip\" *ngFor=\"let sub of user.substitutesOf\" [ngClass]=\"{present: sub.present}\">\n              <eo-icon class=\"chip substitute substitute--present\" *ngIf=\"sub.present\"\n                [iconSrc]=\"'assets/_default/svg/ic_done.svg'\"></eo-icon>\n              <eo-icon class=\"chip substitute substitute--away\" *ngIf=\"!sub.present\"\n                [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"></eo-icon>\n              <span>{{sub.title}} ({{sub.name}})</span>\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <!-- password -->\n      <section *ngIf=\"!isCloud && !isSSO || !isCloud && isSSO\" class=\"section section-password\">\n        <div class=\"entry\">\n          <div class=\"label\" translate>eo.password.reset</div>\n          <div class=\"values\">\n            <eo-simple-accordion #simpleAcc [header]=\"('eo.password.reset' | translate)\"\n              [styles]=\"'setting__change-password'\" [headerClass]=\"'setting__change-password-header'\">\n\n              <eo-change-password-form (onFormSumbit)=\"simpleAcc.onTabClose()\"></eo-change-password-form>\n            </eo-simple-accordion>\n          </div>\n        </div>\n      </section>\n\n      <!-- language -->\n      <div class=\"section section-lang\">\n        <h3 translate>eo.state.settings.language</h3>\n        <div class=\"entry lang-app\">\n          <div class=\"label\" translate>eo.state.settings.language.client</div>\n          <div class=\"values\">\n            <button class=\"toggle\" (click)=\"changeClientLocale(locale.iso)\"\n              [ngClass]=\"{active: translate.currentLang === locale.iso}\"\n              *ngFor=\"let locale of clientLocales\">{{locale.label}}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"entry lang-def\">\n          <div class=\"label\" translate>eo.state.settings.language.schema</div>\n          <div class=\"values\">\n            <button class=\"toggle\" (click)=\"changeSchemaLocale(locale.code)\"\n              [ngClass]=\"{active: activeSchema === locale.code}\"\n              *ngFor=\"let locale of schemaLocales\">{{locale.displayname}}</button>\n          </div>\n        </div>\n      </div>\n\n      <!-- permissions -->\n      <div class=\"section section-perm\">\n        <h3 translate>eo.state.settings.permission</h3>\n        <div class=\"entry perm-roles\">\n          <div class=\"label\" translate>eo.state.settings.roles</div>\n          <div class=\"values roles\">\n            <eo-simple-accordion [header]=\"('eo.state.settings.roles' | translate)\">\n              <eo-permissions [roles]=\"user.roles\"></eo-permissions>\n            </eo-simple-accordion>\n          </div>\n        </div>\n      </div>\n\n      <!-- agent -->\n      <div class=\"section section-others\">\n        <h3 translate>eo.state.settings.others</h3>\n        <ng-container *ngIf=\"showAgentConfig\">\n          <div class=\"entry\">\n            <div class=\"label\" translate>eo.state.settings.agent</div>\n            <div class=\"values\">\n              <div class=\"use-agent\">\n                <eo-checkbox [formControl]=\"useAgentControl\" [readonly]=\"useAgentControl.disabled\"\n                  *ngIf=\"useAgentControl\"></eo-checkbox>\n                <span class=\"use-agent-label\" translate>eo.state.settings.agent.use</span>\n                <!-- <a href=\"https://help.optimal-systems.com/yuuvisRAD/v60/user/client/de/client/integration/cln_tsk_agent_global.htm?Highlight=agent\">\n          <eo-icon class=\"info-icon\" [iconSrc]=\"'assets/_default/svg/ic_info.svg'\"></eo-icon>\n        </a> -->\n              </div>\n            </div>\n          </div>\n\n\n          <div class=\"entry lock-settings\" [ngClass]=\"{'lock-settings--show': (agentStatus | async)}\">\n            <div class=\"label\" translate>eo.state.settings.lock</div>\n            <div class=\"values\">\n              <button class=\"toggle button-enabled\" (click)=\"changeLockSettings(LockSettings.always)\"\n                [ngClass]=\"{active: agentLockSettings === LockSettings.always}\" [disabled]=\"defaultLockSetting\"\n                translate>eo.state.settings.lock.enable</button>\n              <button class=\"toggle button-disabled\" (click)=\"changeLockSettings(LockSettings.never)\"\n                [ngClass]=\"{active: agentLockSettings === LockSettings.never}\" [disabled]=\"defaultLockSetting\"\n                translate>eo.state.settings.lock.disable</button>\n              <button class=\"toggle button-ask\" (click)=\"changeLockSettings(LockSettings.ask)\"\n                [ngClass]=\"{active: agentLockSettings === LockSettings.ask}\" [disabled]=\"defaultLockSetting\"\n                translate>eo.state.settings.lock.ask</button>\n            </div>\n          </div>\n\n\n        </ng-container>\n\n        <div class=\"entry\">\n          <div class=\"label\" translate>eo.state.settings.cache</div>\n          <div class=\"values\">\n            <div class=\"flex-row\">\n              <button translate (click)=\"clearCache()\">eo.state.settings.cache.clear</button>\n              <div class=\"cache\">\n                <eo-form-input class=\"checkbox\" [skipToggle]=\"true\"\n                  [label]=\"'eo.state.settings.config.cache.system' | translate\">\n                  <eo-checkbox [(ngModel)]=\"cache.system\" [ngModelOptions]=\"{ standalone: true }\"></eo-checkbox>\n                </eo-form-input>\n                <eo-form-input class=\"checkbox\" [skipToggle]=\"true\"\n                  [label]=\"'eo.state.settings.config.cache.history' | translate\">\n                  <eo-checkbox [(ngModel)]=\"cache.history\" [ngModelOptions]=\"{ standalone: true }\"></eo-checkbox>\n                </eo-form-input>\n                <eo-form-input class=\"checkbox\" [skipToggle]=\"true\"\n                  [label]=\"'eo.state.settings.config.cache.layout' | translate\">\n                  <eo-checkbox [(ngModel)]=\"cache.layout\" [ngModelOptions]=\"{ standalone: true }\"></eo-checkbox>\n                </eo-form-input>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <eo-dialog [title]=\"'eo.state.settings.details.delete.dialog.title' | translate\" [(visible)]=\"showDeleteDialog\"\n    [focusOnShow]=\"false\" [minWidth]=\"400\" [styleClass]=\"'delete__dialog'\">\n    <div>{{'eo.state.settings.details.delete.dialog.message' | translate}}</div>\n\n    <div class=\"action-buttons image-delete--action-buttons flex-row\" >\n      <button type=\"button\" class=\"button cancel\" (click)=\"showDeleteDialog = false\"\n      translate>eo.state.settings.details.delete.dialog.cancel</button>\n      <button type=\"button\" cdkFocusInitial #confirmDeleteBtn (click)=\"deleteUserImage()\" class=\"button primary\"\n        translate>eo.state.settings.details.delete.dialog.ok</button>\n    </div>\n  </eo-dialog>\n\n  <eo-dialog [title]=\"'eo.state.settings.details.upload.dialog.title' | translate\" [(visible)]=\"showErrorDialog\"\n    [focusOnShow]=\"false\" [minWidth]=\"400\" [styleClass]=\"'delete__dialog'\">\n\n    <div>\n      <p>{{fileName}}</p>\n      <p *ngIf=\"viewMode ==='size'\" translate>eo.state.settings.details.upload.dialog.sizeError</p>\n      <p *ngIf=\"viewMode ==='image'\" translate>eo.state.settings.details.upload.dialog.fileError </p>\n    </div>\n\n    <div class=\"action-buttons image-delete--action-buttons flex-row\">\n      <button type=\"button\" class=\"button cancel\" (click)=\"showErrorDialog = false\"\n        translate>eo.state.settings.details.delete.dialog.cancel</button>\n      <button type=\"button\" cdkFocusInitial (click)=\"files.click(); showErrorDialog = false\" class=\"button primary\"\n        translate>eo.state.settings.details.upload.dialog.back</button>\n    </div>\n  </eo-dialog>\n</div>\n",
+                styles: [":host{bottom:0;justify-content:center;left:0;position:absolute;right:0;top:0}:host,:host .cache{display:flex;flex-flow:row}:host .cache{margin:0 var(--app-pane-padding)}.eo-settings{background:var(--color-white);box-shadow:0 2px 5px 0 rgba(0,0,0,.2);box-sizing:border-box;display:flex;flex-flow:column;margin:var(--app-pane-padding);width:800px}@media (max-width:832px){.eo-settings{margin:0;min-width:inherit;width:100%}}.eo-settings .header{flex:1 1;max-height:300px;min-height:200px;position:relative}@media (max-width:480px){.eo-settings .header{min-height:210px}}.eo-settings .header h1{font-size:var(--font-display);font-weight:var(--font-weight-light);line-height:1em;margin:0;padding:0}.eo-settings .header .meta{margin:calc(var(--app-pane-padding)/2) 0}.eo-settings .header .presence{margin-top:calc(var(--app-pane-padding)*2)}.eo-settings .header .bg{background-position:50%;background-size:cover;bottom:0;filter:grayscale(1);left:0;position:absolute;right:0;top:0}.eo-settings .header .fill{background:rgba(var(--color-primary-rgb),.85);bottom:0;color:var(--color-white);left:0;padding:var(--app-pane-padding);position:absolute;right:0;top:0}.eo-settings .header .userImage{background-position:50%;background-size:cover;border:4px solid var(--color-white);bottom:calc(var(--app-pane-padding)*-1);box-shadow:0 2px 5px 0 rgba(var(--color-black-rgb),.26);height:150px;position:absolute;right:var(--app-pane-padding);width:150px;z-index:1}@media (max-width:480px){.eo-settings .header .userImage{height:105px;width:105px}}.eo-settings .header .userImage.rtl{left:var(--app-pane-padding);right:auto}.eo-settings .header .overlay{border:4px solid var(--color-white);bottom:calc(var(--app-pane-padding)*-1);box-shadow:0 2px 5px 0 rgba(var(--color-black-rgb),.26);height:150px;position:absolute;right:var(--app-pane-padding);width:150px;z-index:1}@media (max-width:480px){.eo-settings .header .overlay{height:105px;width:105px}}.eo-settings .header .overlay.rtl{left:var(--app-pane-padding);right:auto}.eo-settings .header .overlay:focus,.eo-settings .header .overlay:hover{border-color:var(--color-accent);opacity:1}.eo-settings .header .overlay .updateMessage{align-items:center;background-clip:border-box;background-color:rgba(192,188,188,.9450980392156862);box-sizing:border-box;display:flex;height:100%;justify-content:center;width:100%}.eo-settings .header .overlay .updateMessage eo-icon{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;color:var(--color-white);height:48px;opacity:.5;transition:all var(--app-default-transition-duration) ease-in-out;width:48px}.eo-settings .header .overlay .updateMessage eo-icon:focus,.eo-settings .header .overlay .updateMessage eo-icon:hover{background-color:var(--color-primary);color:var(--color-white);cursor:pointer}.eo-settings .body{flex:1 1 auto;position:relative}.eo-settings .body .body-wrap{bottom:0;box-sizing:border-box;left:0;overflow-y:auto;padding:var(--app-pane-padding);position:absolute;right:0;top:0}.eo-settings .body .section{margin-top:var(--app-pane-padding)}.eo-settings .body .section.section-deputies form{border-radius:2px}.eo-settings .body .section.section-deputies form .actions{display:flex;justify-content:flex-end;padding-top:calc(var(--app-pane-padding)/4)}.eo-settings .body .section.section-deputies form .actions button{border-radius:2px;padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}.eo-settings .body .section.section-deputies form.dirty{background-color:rgba(var(--color-black-rgb),.06);padding:2px}.eo-settings .body .section.section-deputies .entry.substitute .values{display:flex;flex-flow:row wrap}.eo-settings .body .section.section-deputies .entry.substitute .values .chip{align-items:center;display:flex;font-size:.9em;padding:2px 4px}.eo-settings .body .section.section-deputies .entry.substitute .values .chip .substitute{border:0;border-radius:4px;color:var(--color-white);height:calc(var(--app-pane-padding)*0.6);width:calc(var(--app-pane-padding)*0.75)}.eo-settings .body .section.section-deputies .entry.substitute .values .chip .substitute--present{background-color:var(--color-success)}.eo-settings .body .section.section-deputies .entry.substitute .values .chip .substitute--away{background-color:var(--color-error)}.eo-settings .body .section.section-deputies .entry.substitute .values .chip>span{margin:0 calc(var(--app-pane-padding)/2)}.eo-settings .body .section.section-deputies ::ng-deep .values .ui-state-default{background-color:var(--color-white);border-color:rgba(var(--color-black-rgb),.1);border-radius:2px;min-height:27px;padding:0 0 2px 2px}.eo-settings .body .section.section-deputies ::ng-deep .values .ui-state-disabled{border-color:transparent;opacity:1}.eo-settings .body .section p{line-height:1.7em}.eo-settings .body .section h3{color:var(--text-color-caption);font-size:var(--font-subhead);font-weight:var(--font-weight-normal);margin:0;padding:0 0 0 150px}@media (max-width:480px){.eo-settings .body .section h3{padding:0}}.eo-settings .body .section .entry{display:flex;flex-flow:row nowrap;padding:var(--app-pane-padding) 0 0 0}.eo-settings .body .section .entry.lock-settings{height:0;opacity:0;overflow:hidden;transition:all .5s ease-in-out}.eo-settings .body .section .entry.lock-settings--show{height:100%;opacity:1}@media (max-width:480px){.eo-settings .body .section .entry{flex-flow:column}}.eo-settings .body .section .entry .label{color:var(--text-color-caption);flex:0 0 150px}@media (max-width:480px){.eo-settings .body .section .entry .label{flex:0 0 auto;margin-bottom:calc(var(--app-pane-padding)/2)}}.eo-settings .body .section .entry .values{flex:1 1 auto}.eo-settings .body .section .entry .values button{cursor:pointer;margin:0 4px 4px 0}.eo-settings .body .section .entry .values button.active,.eo-settings .body .section .entry .values button.toggle:disabled{cursor:default}.eo-settings .body .section .entry .use-agent{align-items:center;display:flex}.eo-settings .body .section .entry .use-agent .use-agent-label{color:var(--text-color-caption);margin:0 calc(var(--app-pane-padding)/2)}.eo-settings .body .section .entry .use-agent eo-icon.info-icon{border-radius:50%;box-sizing:border-box;color:var(--text-color-caption);margin:0;padding:3px}.eo-settings .body .section .entry .use-agent eo-icon.info-icon:hover{background-color:var(--color-primary);color:var(--color-white);cursor:pointer}.eo-settings .body .section .values.roles{align-items:flex-start;display:flex;flex-flow:column}.eo-settings .body .section .values.roles .role{display:flex;flex-flow:row nowrap;margin-bottom:calc(var(--app-pane-padding)/2);word-break:break-all}.eo-settings .body .section .values.roles .role eo-icon{color:var(--text-color-hint);height:18px;width:18px}.eo-settings .body .section .values.roles .role>div{padding:0 calc(var(--app-pane-padding)/2)}.eo-settings .body .section .values.roles .role>div .description{color:var(--text-color-caption);font-size:var(--font-caption)}.eo-settings .body .toggle-btn{-webkit-border-radius:2px;background:rgba(var(--color-black-rgb),.1);border-radius:2px;color:var(--text-color-caption);cursor:pointer;display:inline-block;margin-right:3px;padding:2px 5px;text-decoration:none}.eo-settings.rtl .header .userImage{left:var(--app-pane-padding);right:auto}.eo-settings.rtl .body .section h3{padding:0 150px 0 0}::ng-deep .view{height:100%;width:100%}::ng-deep .view .eo-dialog-content{overflow:hidden}::ng-deep .view .contain{display:flex;flex-flow:column}@media (max-width:480px){::ng-deep .view .contain{min-height:210px}}::ng-deep .view .contain .attachments{align-items:center;display:flex;height:100%;justify-content:space-around;margin:5px 60px 0;width:100%}::ng-deep .view .contain .attachments .atta{display:block;padding:0;position:relative}::ng-deep .view .contain .attachments .atta img{border:2px solid #5c5959;box-sizing:border-box;max-height:200px;max-width:200px;min-height:80px;min-width:80px}::ng-deep .view .contain .attachments .user-avatar{align-items:center;display:flex;margin-right:109px}::ng-deep .view .contain .attachments .user-avatar img{background-size:cover;border:2px solid #5c5959;border-radius:50%;box-sizing:border-box;height:90px;width:90px}::ng-deep .view .button-block{display:flex;justify-content:right;margin:8px}::ng-deep .delete__dialog{min-height:unset!important;padding:8px}::ng-deep .delete__dialog--header{background:#fff!important;color:rgba(var(--color-black-rgb),.54)!important;font-size:1.17em!important;font-weight:400!important;margin:0;padding:0 0 1em!important}"]
             },] }
 ];
 SettingsComponent.ctorParameters = () => [
@@ -22191,6 +22320,7 @@ SettingsComponent.ctorParameters = () => [
     { type: Config },
     { type: NotificationsService },
     { type: SystemService },
+    { type: EventService },
     { type: CapabilitiesService },
     { type: EnvironmentService },
     { type: PageTitleService },
@@ -22199,10 +22329,15 @@ SettingsComponent.ctorParameters = () => [
     { type: AppCacheService },
     { type: ListSettingsService },
     { type: LocalStorageService },
-    { type: TranslateService }
+    { type: TranslateService },
+    { type: NotificationsService }
 ];
 SettingsComponent.propDecorators = {
-    header: [{ type: ViewChild, args: ['header',] }],
+    files: [{ type: ViewChild, args: ['files',] }],
+    headerBg: [{ type: ViewChild, args: ['headerBg',] }],
+    userAvatar: [{ type: ViewChild, args: ['userAvatar',] }],
+    confirmDeleteBtn: [{ type: ViewChild, args: ['confirmDeleteBtn',] }],
+    profileImageOverlay: [{ type: ViewChild, args: ['profileImageOverlay',] }],
     deputiesForm: [{ type: ViewChild, args: [NgForm,] }]
 };
 
@@ -22490,10 +22625,10 @@ class AboutStateComponent {
         this.http = http;
         this.userService = userService;
         this.config = config;
-        this.__libraries__ = [{ "name": "@ag-grid-community/angular", "version": "22.1.2", "license": "MIT" }, { "name": "@ag-grid-community/client-side-row-model", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/core", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/csv-export", "version": "22.1.1", "license": "MIT" }, { "name": "@angular/animations", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/cdk", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/common", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/compiler", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/core", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/forms", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser-dynamic", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/router", "version": "11.2.0", "license": "MIT" }, { "name": "@eo-sdk/core", "version": "9.0.0-rc.5", "license": "MIT" }, { "name": "@ngx-pwa/local-storage", "version": "11.1.0", "license": "MIT" }, { "name": "@ngx-translate/core", "version": "13.0.0", "license": "MIT" }, { "name": "@types/lodash", "version": "4.14.88", "license": "MIT" }, { "name": "core-js", "version": "2.5.7", "license": "MIT" }, { "name": "file-saver", "version": "2.0.5", "license": "MIT" }, { "name": "font-awesome", "version": "4.7.0", "license": "(OFL-1.1 AND MIT)" }, { "name": "keyboardevent-key-polyfill", "version": "1.1.0", "license": "CC0-1.0" }, { "name": "keycode-js", "version": "0.0.4", "license": "MIT" }, { "name": "mobile-drag-drop", "version": "2.2.0", "license": "MIT" }, { "name": "moment", "version": "2.22.2", "license": "MIT" }, { "name": "ngx-toastr", "version": "13.2.0", "license": "MIT" }, { "name": "primeicons", "version": "1.0.0-beta.6", "license": "MIT" }, { "name": "primeng", "version": "7.0.1", "license": "MIT" }, { "name": "reflect-metadata", "version": "0.1.10", "license": "Apache-2.0" }, { "name": "rxjs", "version": "6.6.3", "license": "Apache-2.0" }, { "name": "tslib", "version": "2.1.0", "license": "0BSD" }, { "name": "zone.js", "version": "0.10.3", "license": "MIT" }];
+        this.__libraries__ = [{ "name": "@ag-grid-community/angular", "version": "22.1.2", "license": "MIT" }, { "name": "@ag-grid-community/client-side-row-model", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/core", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/csv-export", "version": "22.1.1", "license": "MIT" }, { "name": "@angular/animations", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/cdk", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/common", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/compiler", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/core", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/forms", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser-dynamic", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/router", "version": "11.2.0", "license": "MIT" }, { "name": "@eo-sdk/core", "version": "9.0.0-rc.7", "license": "MIT" }, { "name": "@ngx-pwa/local-storage", "version": "11.1.0", "license": "MIT" }, { "name": "@ngx-translate/core", "version": "13.0.0", "license": "MIT" }, { "name": "@types/lodash", "version": "4.14.88", "license": "MIT" }, { "name": "core-js", "version": "2.5.7", "license": "MIT" }, { "name": "file-saver", "version": "2.0.5", "license": "MIT" }, { "name": "font-awesome", "version": "4.7.0", "license": "(OFL-1.1 AND MIT)" }, { "name": "keyboardevent-key-polyfill", "version": "1.1.0", "license": "CC0-1.0" }, { "name": "keycode-js", "version": "0.0.4", "license": "MIT" }, { "name": "mobile-drag-drop", "version": "2.2.0", "license": "MIT" }, { "name": "moment", "version": "2.22.2", "license": "MIT" }, { "name": "ngx-toastr", "version": "13.2.0", "license": "MIT" }, { "name": "primeicons", "version": "1.0.0-beta.6", "license": "MIT" }, { "name": "primeng", "version": "7.0.1", "license": "MIT" }, { "name": "reflect-metadata", "version": "0.1.10", "license": "Apache-2.0" }, { "name": "rxjs", "version": "6.6.3", "license": "Apache-2.0" }, { "name": "tslib", "version": "2.1.0", "license": "0BSD" }, { "name": "zone.js", "version": "0.10.3", "license": "MIT" }];
         this.ctrl = {
             productName: 'yuuvis® RAD client',
-            clientVersion: '9.0.0-rc.5'
+            clientVersion: '9.0.0-rc.7'
         };
         this.licenses = {
             'MIT': {
@@ -24349,5 +24484,5 @@ EoClientModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS, AboutStateComponent, AbstractFilterComponent, AccordionModule, ActionMenuComponent, ActionModule, ActionService, ActionTarget, AgentService, AppAddComponent, AppAddDialogComponent, AppBarComponent, AppLayoutComponent, AppSearchComponent, AppSearchService, AreaState, AuthGuard, CUSTOM_ACTIONS, CapabilitiesGuard, CellRenderer, ChangePasswordFormComponent, CheckboxComponent, ClipboardComponent, CodesystemComponent, CodesystemFilterComponent, ColumnConfiguratorComponent, ContentPreviewService, ContextSearchComponent, ContextType, CtaComponent, CtaModule, CustomFilterComponent, CustomSortComponent, DashboardComponent, DatepickerComponent, DatetimeComponent, DatetimeFilterComponent, DatetimeRangeComponent, DmsObjectTarget, DynamicListComponent, DynamicPropertySwitchComponent, ENTRY_COMPONENTS, ENTRY_LINKS, EmptyComponent, EmptyStateService, EnaioErrorKeys, EoAppShellModule, EoClientModule, EoDialogComponent, EoFrameworkCoreModule, EoFrameworkModule, EoIconComponent, Error404Component, ErrorHandlerService, ErrorMessageComponent, ErrorModule, FavoriteIconComponent, FavoriteStateComponent, FileSizePipe, FormElementComponent, FormElementTableComponent, FormElementsModule, FormInputComponent, FrameComponent, GlobalShortcutsComponent, GlobalShortcutsSectionComponent, GridComponent, GridFilter, GridModule, GridService, HistoryFilterComponent, HistoryFilterPipe, IdReferenceComponent, InboxDetailsComponent, InboxItemTarget, InboxStateComponent, InboxStateModule, InboxTypes, InboxTypesFilter, IndexdataSummaryComponent, InputFocusDirective, KeysPipe, LayoutService, ListContainerComponent, ListContainerModule, ListSettingsService, LoadingSpinnerComponent, LocaleCurrencyPipe, LocaleDatePipe, LocaleDecimalPipe, LocaleNumberPipe, LocalePercentPipe, LocationService, LockSettings, LoginComponent, MediaComponent, MediaModule, NotFoundComponent, NotificationsStateComponent, NumberComponent, NumberRangeComponent, ObjectDetailsComponent, ObjectDetailsModule, ObjectFormComponent, ObjectFormControl, ObjectFormControlWrapper, ObjectFormEditComponent, ObjectFormGroup, ObjectFormGroupComponent, ObjectFormHelperService, ObjectFormModule, ObjectFormScriptService, ObjectFormScriptingScope, ObjectHistoryComponent, ObjectLinksComponent, ObjectStateComponent, ObjectStateDetailsComponent, ObjectStateModule, ObjectStateService, OrganizationComponent, OrganizationFilterComponent, OutsideClickDirective, OverlayComponent, PageTitleService, PanelLoading, PasswordComponent, PendingChangesService, PermissionsComponent, PluginComponent, PluginDirective, PluginService, PluginsModule, PluginsService, PrepareDetailsComponent, PrepareStateComponent, PrepareStateModule, PreparedItemTarget, ProcessDetailsComponent, ProcessFileComponent, ProcessHistoryComponent, ProcessItemTarget, QuickFilterComponent, QuickSearchComponent, QuickSearchModule, ReferenceComponent, ReferenceService, ResetFilterComponent, ResultListComponent, ResultListModule, ResultStateComponent, RouterLinkDirective, RowEditComponent, RtlAwareDirective, STATE, SafeHtmlPipe, SelectionRange, SelectionService, SetFilterComponent, SettingsComponent, SettingsModule, Shortcut, ShortcutsDirective, ShortcutsModule, ShortcutsService, SideBarComponent, SidebarPluginComponent, SimpleAccordionComponent, SplitAreaComponent, SplitComponent, SplitGutterDirective, SplitModule, StoredQueriesStateComponent, StoredQueryComponent, StoredQueryDetailsComponent, StoredQueryModule, StoredQueryTarget, StringComponent, TabContainerComponent, TabContainerModule, TabPanelComponent, TabPluginComponent, TabViewComponent, TabViewNavComponent, TextFilterComponent, TotalCountComponent, TreeComponent, TreeModule, TypeFilter, UNDOCK_WINDOW_NAME, UiModule, UndockSplitComponent, UndockSplitService, UnsubscribeOnDestroy, UploadOverlayComponent, UserAvatarComponent, UtilModule, UtilitiesService, VersionStateComponent, WorkItemTarget, agentConfigKeys, entryComponents, listAnimation, panelLoadingAnimations, ɵ0, ɵ1, PendingChangesGuard as ɵa, UploadOverlayGuard as ɵb, DownloadOriginalActionComponent as ɵba, DownloadPdfActionComponent as ɵbb, OpenDocumentActionComponent as ɵbc, EmailActionComponent as ɵbd, EmailLinkActionComponent as ɵbe, EmailOriginalActionComponent as ɵbf, EmailPdfActionComponent as ɵbg, ClipboardActionComponent as ɵbh, ClipboardLinkActionComponent as ɵbi, ClipboardOriginalActionComponent as ɵbj, ClipboardPdfActionComponent as ɵbk, FavoriteActionComponent as ɵbl, DeleteActionComponent as ɵbm, DeleteComponent as ɵbn, OpenVersionsActionComponent as ɵbo, RestoreVersionActionComponent as ɵbp, DeletePreparedActionComponent as ɵbq, AddSubscriptionActionComponent as ɵbr, AddSubscriptionComponent as ɵbs, RemoveSubscriptionActionComponent as ɵbt, WorkflowActionComponent as ɵbu, WorkflowComponent as ɵbv, CustomActionsComponent as ɵbw, AddResubmissionActionComponent as ɵbx, AddResubmissionComponent as ɵby, UpdateResubmissionActionComponent as ɵbz, AppShellRoutingModule as ɵc, ShareObjectActionComponent as ɵca, ShareObjectComponent as ɵcb, CutActionComponent as ɵcc, FinalizeActionComponent as ɵcd, DefinalizeActionComponent as ɵce, DeleteContentActionComponent as ɵcf, UnlockActionComponent as ɵcg, SimpleWorkflowActionComponent as ɵch, PreventDoubleClickDirective as ɵci, TrapFocusDirective as ɵcj, EditIconComponent as ɵck, DuetimeInfoComponent as ɵcl, PrepareContentExistsInfoComponent as ɵcm, StoredQueryModule as ɵcn, ObjectStateRoutingModule as ɵco, InboxStateRoutingModule as ɵcp, PrepareStateRoutingModule as ɵcq, EoClientRoutingModule as ɵcr, ProcessStateComponent as ɵcs, AppProcessComponent as ɵd, PipesModule as ɵe, UnsubscribeOnDestroy as ɵf, QueryScopeSelectComponent as ɵg, IndexdataSummaryEntryComponent as ɵh, OrderByPipe as ɵi, TreeNodeComponent as ɵj, DatepickerService as ɵk, YearRangeDirective as ɵl, ReferenceFinderComponent as ɵm, fadeInOut as ɵn, ReferenceFinderService as ɵo, ReferenceFinderEntryComponent as ɵp, DynamicListFilterComponent as ɵq, ListFilterComponent as ɵr, PaginationComponent as ɵs, ProcessFormModule as ɵt, ProcessFormComponent as ɵu, ActionComponentAnchorDirective as ɵv, OpenDocumentComponent as ɵw, CopyActionComponent as ɵx, OpenContextActionComponent as ɵy, DownloadActionComponent as ɵz };
+export { ACTIONS, AboutStateComponent, AbstractFilterComponent, AccordionModule, ActionMenuComponent, ActionModule, ActionService, ActionTarget, AgentService, AppAddComponent, AppAddDialogComponent, AppBarComponent, AppLayoutComponent, AppSearchComponent, AppSearchService, AreaState, AuthGuard, CUSTOM_ACTIONS, CapabilitiesGuard, CellRenderer, ChangePasswordFormComponent, CheckboxComponent, ClipboardComponent, CodesystemComponent, CodesystemFilterComponent, ColumnConfiguratorComponent, ContentPreviewService, ContextSearchComponent, ContextType, CtaComponent, CtaModule, CustomFilterComponent, CustomSortComponent, DashboardComponent, DatepickerComponent, DatetimeComponent, DatetimeFilterComponent, DatetimeRangeComponent, DmsObjectTarget, DynamicListComponent, DynamicPropertySwitchComponent, ENTRY_COMPONENTS, ENTRY_LINKS, EmptyComponent, EmptyStateService, EnaioErrorKeys, EoAppShellModule, EoClientModule, EoDialogComponent, EoFrameworkCoreModule, EoFrameworkModule, EoIconComponent, Error404Component, ErrorHandlerService, ErrorMessageComponent, ErrorModule, FavoriteIconComponent, FavoriteStateComponent, FileSizePipe, FormElementComponent, FormElementTableComponent, FormElementsModule, FormInputComponent, FrameComponent, GlobalShortcutsComponent, GlobalShortcutsSectionComponent, GridComponent, GridFilter, GridModule, GridService, HistoryFilterComponent, HistoryFilterPipe, IdReferenceComponent, InboxDetailsComponent, InboxItemTarget, InboxStateComponent, InboxStateModule, InboxTypes, InboxTypesFilter, IndexdataSummaryComponent, InputFocusDirective, KeysPipe, LayoutService, ListContainerComponent, ListContainerModule, ListSettingsService, LoadingSpinnerComponent, LocaleCurrencyPipe, LocaleDatePipe, LocaleDecimalPipe, LocaleNumberPipe, LocalePercentPipe, LocationService, LockSettings, LoginComponent, MediaComponent, MediaModule, NotFoundComponent, NotificationsStateComponent, NumberComponent, NumberRangeComponent, ObjectDetailsComponent, ObjectDetailsModule, ObjectFormComponent, ObjectFormControl, ObjectFormControlWrapper, ObjectFormEditComponent, ObjectFormGroup, ObjectFormGroupComponent, ObjectFormHelperService, ObjectFormModule, ObjectFormScriptService, ObjectFormScriptingScope, ObjectHistoryComponent, ObjectLinksComponent, ObjectStateComponent, ObjectStateDetailsComponent, ObjectStateModule, ObjectStateService, OrganizationComponent, OrganizationFilterComponent, OutsideClickDirective, OverlayComponent, PageTitleService, PanelLoading, PasswordComponent, PendingChangesService, PermissionsComponent, PluginComponent, PluginDirective, PluginService, PluginsModule, PluginsService, PrepareDetailsComponent, PrepareStateComponent, PrepareStateModule, PreparedItemTarget, ProcessDetailsComponent, ProcessFileComponent, ProcessHistoryComponent, ProcessItemTarget, QuickFilterComponent, QuickSearchComponent, QuickSearchModule, ReferenceComponent, ReferenceService, ResetFilterComponent, ResultListComponent, ResultListModule, ResultStateComponent, RouterLinkDirective, RowEditComponent, RtlAwareDirective, STATE, SafeHtmlPipe, SelectionRange, SelectionService, SetFilterComponent, SettingsComponent, SettingsModule, Shortcut, ShortcutsDirective, ShortcutsModule, ShortcutsService, SideBarComponent, SidebarPluginComponent, SimpleAccordionComponent, SplitAreaComponent, SplitComponent, SplitGutterDirective, SplitModule, StoredQueriesStateComponent, StoredQueryComponent, StoredQueryDetailsComponent, StoredQueryModule, StoredQueryTarget, StringComponent, TabContainerComponent, TabContainerModule, TabPanelComponent, TabPluginComponent, TabViewComponent, TabViewNavComponent, TextFilterComponent, TotalCountComponent, TreeComponent, TreeModule, TypeFilter, UNDOCK_WINDOW_NAME, UiModule, UndockSplitComponent, UndockSplitService, UnsubscribeOnDestroy, UploadOverlayComponent, UserAvatarComponent, UtilModule, UtilitiesService, VersionStateComponent, WorkItemTarget, agentConfigKeys, entryComponents, listAnimation, panelLoadingAnimations, ɵ0, ɵ1, PendingChangesGuard as ɵa, UploadOverlayGuard as ɵb, DownloadOriginalActionComponent as ɵba, DownloadPdfActionComponent as ɵbb, OpenDocumentActionComponent as ɵbc, EmailActionComponent as ɵbd, EmailLinkActionComponent as ɵbe, EmailOriginalActionComponent as ɵbf, EmailPdfActionComponent as ɵbg, ClipboardActionComponent as ɵbh, ClipboardLinkActionComponent as ɵbi, ClipboardOriginalActionComponent as ɵbj, ClipboardPdfActionComponent as ɵbk, FavoriteActionComponent as ɵbl, DeleteActionComponent as ɵbm, DeleteComponent as ɵbn, OpenVersionsActionComponent as ɵbo, RestoreVersionActionComponent as ɵbp, DeletePreparedActionComponent as ɵbq, AddSubscriptionActionComponent as ɵbr, AddSubscriptionComponent as ɵbs, RemoveSubscriptionActionComponent as ɵbt, WorkflowActionComponent as ɵbu, WorkflowComponent as ɵbv, CustomActionsComponent as ɵbw, AddResubmissionActionComponent as ɵbx, AddResubmissionComponent as ɵby, UpdateResubmissionActionComponent as ɵbz, AppShellRoutingModule as ɵc, ShareObjectActionComponent as ɵca, ShareObjectComponent as ɵcb, CutActionComponent as ɵcc, FinalizeActionComponent as ɵcd, DefinalizeActionComponent as ɵce, DeleteContentActionComponent as ɵcf, UnlockActionComponent as ɵcg, SimpleWorkflowActionComponent as ɵch, PreventDoubleClickDirective as ɵci, UserAvatarComponent as ɵcj, TrapFocusDirective as ɵck, EditIconComponent as ɵcl, DuetimeInfoComponent as ɵcm, PrepareContentExistsInfoComponent as ɵcn, StoredQueryModule as ɵco, ObjectStateRoutingModule as ɵcp, InboxStateRoutingModule as ɵcq, PrepareStateRoutingModule as ɵcr, EoClientRoutingModule as ɵcs, ProcessStateComponent as ɵct, AppProcessComponent as ɵd, PipesModule as ɵe, UnsubscribeOnDestroy as ɵf, QueryScopeSelectComponent as ɵg, IndexdataSummaryEntryComponent as ɵh, OrderByPipe as ɵi, TreeNodeComponent as ɵj, DatepickerService as ɵk, YearRangeDirective as ɵl, ReferenceFinderComponent as ɵm, fadeInOut as ɵn, ReferenceFinderService as ɵo, ReferenceFinderEntryComponent as ɵp, DynamicListFilterComponent as ɵq, ListFilterComponent as ɵr, PaginationComponent as ɵs, ProcessFormModule as ɵt, ProcessFormComponent as ɵu, ActionComponentAnchorDirective as ɵv, OpenDocumentComponent as ɵw, CopyActionComponent as ɵx, OpenContextActionComponent as ɵy, DownloadActionComponent as ɵz };
 //# sourceMappingURL=eo-sdk-client.js.map