@eo-sdk/client 9.0.0-rc.6 → 9.0.0-rc.8

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, ViewChildren, forwardRef, 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, HostBinding, Input, Output, HostListener, ViewEncapsulation, ElementRef, Renderer2, Directive, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, 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';
@@ -2876,40 +2876,35 @@ SafeHtmlPipe.ctorParameters = () => [
 
 class SimpleAccordionComponent {
     constructor() {
+        this.role = 'tablist';
+        this._open = false;
         this.onOpen = new EventEmitter();
-        this.index = null;
-        this.lastIndex = -1;
     }
-    set selected(val) {
-        this._selected = val;
+    set open(o) {
+        this._open = o;
+        this.onOpen.emit(this.open);
     }
-    get selected() {
-        return this._selected;
+    get open() {
+        return this._open;
     }
-    onTabOpen(e) {
-        const index = e.index;
-        this.selected = true;
-        this.onOpen.emit(this.selected);
-    }
-    onTabClose(e = false) {
-        this.index = this.lastIndex--;
-        this.selected = false;
-        this.onOpen.emit(this.selected);
+    onKeyDown(e) {
+        e.preventDefault();
+        this.open = !this.open;
     }
 }
 SimpleAccordionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-simple-accordion',
-                template: "<p-accordion styleClass=\"{{styles}}\"\n             [activeIndex]=\"index\"\n             (onOpen)=\"onTabOpen($event)\"\n             (onClose)=\"onTabClose($event)\">\n  <p-accordionTab class=\"{{headerClass}}\" header=\"{{header}}\"\n                  [selected]=\"selected\">\n    <ng-content></ng-content>\n  </p-accordionTab>\n</p-accordion>\n",
-                styles: [":host ::ng-deep .ui-accordion .ui-accordion-header{background:transparent;border:0}:host ::ng-deep .ui-accordion .ui-accordion-header a{padding:0;text-decoration:none}:host ::ng-deep .ui-accordion .ui-accordion-header:not(.ui-state-active):not(.ui-state-disabled):hover{background:transparent}"]
+                template: "<header tabindex=\"0\" role=\"tab\" (click)=\"open = !open\">{{header}}</header>\n<section *ngIf=\"open\" role=\"tabpanel\"><ng-content></ng-content></section>",
+                styles: [":host{--accordion-arrow-color:rgba(0,0,0,0.26);--accordion-outline-color:rgba(0,0,0,0.15)}:host.open>header:before{transform:translateY(.15em) rotate(225deg)}:host>header{-moz-user-select:none;-webkit-user-select:none;align-items:center;background-color:var(--panel-background-grey);border:1px solid var(--accordion-outline-color);border-radius:2px;cursor:pointer;display:flex;padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2);user-select:none}:host>header:focus,:host>header:focus-visible{outline:2px solid var(--color-accent)}:host>header:before{-webkit-margin-end:.5em;border-color:var(--accordion-arrow-color);border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;height:.5em;margin-inline-end:.5em;transform:translateY(-.15em) rotate(45deg);transition:transform .2s ease-in-out;width:.5em}"]
             },] }
 ];
 SimpleAccordionComponent.propDecorators = {
+    role: [{ type: HostBinding, args: ['attr.role',] }],
     header: [{ type: Input }],
-    styles: [{ type: Input }],
-    headerClass: [{ type: Input }],
-    selected: [{ type: Input }],
-    onOpen: [{ type: Output }]
+    onOpen: [{ type: Output }],
+    open: [{ type: HostBinding, args: ['class.open',] }, { type: Input }],
+    onKeyDown: [{ type: HostListener, args: ['keydown.enter', ['$event'],] }, { type: HostListener, args: ['keydown.space', ['$event'],] }]
 };
 
 class AccordionModule {
@@ -3329,7 +3324,7 @@ class ClipboardComponent {
         const isCopy = (action === ClipboardAction.COPY);
         const isCut = (action === ClipboardAction.CUT);
         const cutAction = (isCut && this.activeLocation && elements.length && elements[0].contextFolder ? this.activeLocation.id !== elements[0].contextFolder.id : true);
-        const baseCondition = this.clipboard && this.activeLocation && elements.length;
+        const baseCondition = this.clipboard && this.activeLocation && elements.length && !elements.some(element => element.isFolder);
         this.isPasteAllowed = baseCondition && cutAction;
         this.isPasteAsContentlinkAllowed = baseCondition && elements[0].contextFolder && isCopy && this.contentAvailableForAllItems(elements);
         // trigger change detction here because this method is called from all subscriptions
@@ -3381,7 +3376,7 @@ class IndexdataSummaryComponent {
         this.item = item;
         this.storageInfos = null;
         if (this.storageAccordion) {
-            this.storageAccordion.onTabClose();
+            this.storageAccordion.open = false;
         }
     }
     set diff({ indexdata, indexdata2, baseparams, baseparams2 }) {
@@ -3461,9 +3456,9 @@ class IndexdataSummaryComponent {
 IndexdataSummaryComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-indexdata-summary',
-                template: "<div class=\"empty-container\" *ngIf=\"emptyState\">{{'eo.indexdata.summary.no.change' | translate}}</div>\n<div class=\"indexdata-summary\">\n\n  <div class=\"core-section\" *ngIf=\"coreValues?.length\">\n\n    <eo-indexdata-summary-entry *ngFor=\"let item of coreValues\"\n                                [label]=\"item.label\"\n                                [value]=\"item._value\"\n                                (onValueClicked)=\"onValueClick($event, item)\">\n    </eo-indexdata-summary-entry>\n\n  </div>\n  <div class=\"data-section\" *ngIf=\"dataValues && dataValues.length\">\n    <eo-simple-accordion #dataAccordion\n                         [header]=\"('eo.indexdata.summary.more' | translate)\"\n                         [selected]=\"moreInfoAcc\"\n                         (onOpen)=\"onMoreInfoToggle($event)\">\n      <div class=\"data\">\n\n        <eo-indexdata-summary-entry *ngFor=\"let item of dataValues\"\n                                    [label]=\"item.label\"\n                                    [value]=\"item._value\"\n                                    (onValueClicked)=\"onValueClick($event, item)\">\n        </eo-indexdata-summary-entry>\n      </div>\n    </eo-simple-accordion>\n  </div>\n\n  <div class=\"baseparams-section\" *ngIf=\"baseparams\">\n\n    <eo-indexdata-summary-entry *ngIf=\"baseparams.modifiedOn && !diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.modified' | translate\"\n                                [value]=\"baseparams.modifiedOn | localeDate\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"!diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.modifier' | translate\"\n                                [value]=\"baseparams.modifiedBy\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"baseparams.createdOn && !diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.created' | translate\"\n                                [value]=\"baseparams.createdOn | localeDate\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"!diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.creator' | translate\"\n                                [value]=\"baseparams.createdBy\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"!diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.object.summary.version' | translate\"\n                                [value]=\"getVersionLink(baseparams.version)\"\n                                (onValueClicked)=\"onValueClick($event, {version: baseparams.version})\">\n    </eo-indexdata-summary-entry>\n\n\n    <eo-indexdata-summary-entry [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.filename' | translate\"\n                                [value]=\"baseparams.contentFileName\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"baseparams.contentFileSize\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.filesize' | translate\"\n                                [value]=\"diffActive ? {val1: baseparams.contentFileSize['val1'] | fileSize, val2: baseparams.contentFileSize['val2'] | fileSize} : (baseparams.contentFileSize | fileSize)\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.mimegroup' | translate\"\n                                [value]=\"baseparams.mimeGroup\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.mimetype' | translate\"\n                                [value]=\"baseparams.mimeType\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"!diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.id' | translate\"\n                                [value]=\"baseparams.id\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"baseparams.contentId !== baseparams.id && !diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.contentId' | translate\"\n                                [value]=\"baseparams.contentId\">\n    </eo-indexdata-summary-entry>\n  </div>\n\n  <div class=\"storageinfo\" *ngIf=\"item?.content && isUserAllowedToShowStorageSection && !diffActive\">\n    <eo-simple-accordion #storageAccordion\n                         [header]=\"('eo.state.settings.storageinfo' | translate)\"\n                         [selected]=\"dataInfoAcc\"\n                         (onOpen)=\"onStorageInfoToggle($event)\">\n\n      <div class=\"storageinfo-entry baseparams-section\" *ngIf=\"baseparams\">\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.global.baseparam.digest' | translate\"\n                                    [value]=\"baseparams.digest\">\n        </eo-indexdata-summary-entry>\n      </div>\n\n      <div class=\"storageinfo-entry baseparams-section\" *ngFor=\"let stInfo of storageInfos; trackBy: trackByIndex\">\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.retention' | translate\"\n                                    [value]=\"stInfo.retention | localeDate : 'eoShortDate'\">\n        </eo-indexdata-summary-entry>\n\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.permanence' | translate\"\n                                    [value]=\"stInfo.permanence\">\n        </eo-indexdata-summary-entry>\n\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.setname' | translate\"\n                                    [value]=\"stInfo.setname\">\n        </eo-indexdata-summary-entry>\n\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.storagename' | translate\"\n                                    [value]=\"stInfo.storagename\">\n        </eo-indexdata-summary-entry>\n\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.location' | translate\"\n                                    [value]=\"stInfo.location\">\n        </eo-indexdata-summary-entry>\n      </div>\n    </eo-simple-accordion>\n  </div>\n\n</div>\n",
+                template: "<div class=\"empty-container\" *ngIf=\"emptyState\">{{'eo.indexdata.summary.no.change' | translate}}</div>\n<div class=\"indexdata-summary\">\n\n  <div class=\"core-section\" *ngIf=\"coreValues?.length\">\n\n    <eo-indexdata-summary-entry *ngFor=\"let item of coreValues\"\n                                [label]=\"item.label\"\n                                [value]=\"item._value\"\n                                (onValueClicked)=\"onValueClick($event, item)\">\n    </eo-indexdata-summary-entry>\n\n  </div>\n  <div class=\"data-section\" *ngIf=\"dataValues && dataValues.length\">\n    <eo-simple-accordion #dataAccordion\n                         [header]=\"('eo.indexdata.summary.more' | translate)\"\n                         [open]=\"moreInfoAcc\"\n                         (onOpen)=\"onMoreInfoToggle($event)\">\n      <div class=\"data\">\n\n        <eo-indexdata-summary-entry *ngFor=\"let item of dataValues\"\n                                    [label]=\"item.label\"\n                                    [value]=\"item._value\"\n                                    (onValueClicked)=\"onValueClick($event, item)\">\n        </eo-indexdata-summary-entry>\n      </div>\n    </eo-simple-accordion>\n  </div>\n\n  <div class=\"baseparams-section\" *ngIf=\"baseparams\">\n\n    <eo-indexdata-summary-entry *ngIf=\"baseparams.modifiedOn && !diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.modified' | translate\"\n                                [value]=\"baseparams.modifiedOn | localeDate\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"!diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.modifier' | translate\"\n                                [value]=\"baseparams.modifiedBy\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"baseparams.createdOn && !diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.created' | translate\"\n                                [value]=\"baseparams.createdOn | localeDate\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"!diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.creator' | translate\"\n                                [value]=\"baseparams.createdBy\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"!diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.object.summary.version' | translate\"\n                                [value]=\"getVersionLink(baseparams.version)\"\n                                (onValueClicked)=\"onValueClick($event, {version: baseparams.version})\">\n    </eo-indexdata-summary-entry>\n\n\n    <eo-indexdata-summary-entry [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.filename' | translate\"\n                                [value]=\"baseparams.contentFileName\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"baseparams.contentFileSize\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.filesize' | translate\"\n                                [value]=\"diffActive ? {val1: baseparams.contentFileSize['val1'] | fileSize, val2: baseparams.contentFileSize['val2'] | fileSize} : (baseparams.contentFileSize | fileSize)\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.mimegroup' | translate\"\n                                [value]=\"baseparams.mimeGroup\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.mimetype' | translate\"\n                                [value]=\"baseparams.mimeType\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"!diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.id' | translate\"\n                                [value]=\"baseparams.id\">\n    </eo-indexdata-summary-entry>\n\n    <eo-indexdata-summary-entry *ngIf=\"baseparams.contentId !== baseparams.id && !diffActive\"\n                                [className]=\"'baseparams-section'\"\n                                [label]=\"'eo.global.baseparam.contentId' | translate\"\n                                [value]=\"baseparams.contentId\">\n    </eo-indexdata-summary-entry>\n  </div>\n\n  <div class=\"storageinfo\" *ngIf=\"item?.content && isUserAllowedToShowStorageSection && !diffActive\">\n    <eo-simple-accordion #storageAccordion\n                         [header]=\"('eo.state.settings.storageinfo' | translate)\"\n                         [open]=\"dataInfoAcc\"\n                         (onOpen)=\"onStorageInfoToggle($event)\">\n\n      <div class=\"storageinfo-entry baseparams-section\" *ngIf=\"baseparams\">\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.global.baseparam.digest' | translate\"\n                                    [value]=\"baseparams.digest\">\n        </eo-indexdata-summary-entry>\n      </div>\n\n      <div class=\"storageinfo-entry baseparams-section\" *ngFor=\"let stInfo of storageInfos; trackBy: trackByIndex\">\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.retention' | translate\"\n                                    [value]=\"stInfo.retention | localeDate : 'eoShortDate'\">\n        </eo-indexdata-summary-entry>\n\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.permanence' | translate\"\n                                    [value]=\"stInfo.permanence\">\n        </eo-indexdata-summary-entry>\n\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.setname' | translate\"\n                                    [value]=\"stInfo.setname\">\n        </eo-indexdata-summary-entry>\n\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.storagename' | translate\"\n                                    [value]=\"stInfo.storagename\">\n        </eo-indexdata-summary-entry>\n\n        <eo-indexdata-summary-entry [className]=\"'storageinfo-subentry'\"\n                                    [label]=\"'eo.object.storageinfo.location' | translate\"\n                                    [value]=\"stInfo.location\">\n        </eo-indexdata-summary-entry>\n      </div>\n    </eo-simple-accordion>\n  </div>\n\n</div>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block}:host .baseparams-section,:host .core-section,:host .data-section{line-height:1.5em;list-style:none;margin:0}:host .core-section,:host .data-section{margin-bottom:calc(var(--app-pane-padding)/2)}:host .data-section .data{margin-bottom:var(--app-pane-padding);margin-top:calc(var(--app-pane-padding)/2)}:host::ng-deep .ui-accordion .ui-accordion-content{padding:0}:host .storageinfo,:host .storageinfo .storageinfo-entry{margin-top:var(--app-pane-padding)}:host .empty-container{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}"]
+                styles: [":host{display:block}:host .baseparams-section,:host .core-section,:host .data-section{line-height:1.5em;list-style:none;margin:0}:host .core-section,:host .data-section{margin-bottom:calc(var(--app-pane-padding)/2)}:host .data-section .data{margin-bottom:var(--app-pane-padding);margin-top:calc(var(--app-pane-padding)/2)}:host .storageinfo,:host .storageinfo .storageinfo-entry{margin-top:var(--app-pane-padding)}:host .empty-container{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}"]
             },] }
 ];
 IndexdataSummaryComponent.ctorParameters = () => [
@@ -3483,20 +3478,25 @@ 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;
-            const timestamp = new Date().getTime().toString();
-            this.backgroundImage = `url(${this.userService.getUserImageUri(u.id) + '#' + timestamp}), 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();
@@ -3510,7 +3510,8 @@ UserAvatarComponent.decorators = [
             },] }
 ];
 UserAvatarComponent.ctorParameters = () => [
-    { type: UserService }
+    { type: UserService },
+    { type: EventService }
 ];
 UserAvatarComponent.propDecorators = {
     backgroundImage: [{ type: HostBinding, args: ['style.background-image',] }],
@@ -3522,10 +3523,15 @@ class OverlayComponent {
         this.iconClass = '';
         this.styleClass = '';
         this.active = false;
+        this.onToggle = new EventEmitter();
     }
     onActiveChanged(event) {
         this.active = event;
     }
+    toggle(event) {
+        this.op.toggle(event);
+        this.onToggle.emit();
+    }
     close() {
         if (this.op) {
             this.op.hide();
@@ -3535,7 +3541,7 @@ class OverlayComponent {
 OverlayComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-overlay',
-                template: "<ng-container *ngIf=\"iconSrc;else btn\">\n  <eo-icon class=\"overlayIcon button {{iconClass}}\"\n           (click)=\"op.toggle($event)\"\n           (keyup.enter)=\"op.toggle($event)\"\n           [iconSrc]=\"iconSrc\"\n           [badge]=\"badge\"\n           [ngClass]=\"{active: active}\"\n           tabindex=\"0\"\n           [iconTitle]=\"iconTitle\"></eo-icon>\n</ng-container>\n<ng-template #btn>\n  <div (click)=\"op.toggle($event)\" (keyup.enter)=\"op.toggle($event)\">\n    <ng-content select=\".btn\"></ng-content>\n  </div>\n</ng-template>\n<p-overlayPanel #op [styleClass]=\"styleClass\"  [dismissable]=\"false\" (eoOutsideClick)=\"op.hide()\">\n  <ng-content></ng-content>\n</p-overlayPanel>\n",
+                template: "<ng-container *ngIf=\"iconSrc;else btn\">\n  <eo-icon class=\"overlayIcon button {{iconClass}}\"\n           (click)=\"toggle($event)\"\n           (keyup.enter)=\"toggle($event)\"\n           [iconSrc]=\"iconSrc\"\n           [badge]=\"badge\"\n           [ngClass]=\"{active: active}\"\n           tabindex=\"0\"\n           [iconTitle]=\"iconTitle\"></eo-icon>\n</ng-container>\n<ng-template #btn>\n  <div (click)=\"toggle($event)\" (keyup.enter)=\"toggle($event)\">\n    <ng-content select=\".btn\"></ng-content>\n  </div>\n</ng-template>\n<p-overlayPanel #op [styleClass]=\"styleClass\"  [dismissable]=\"false\" (eoOutsideClick)=\"op.hide()\">\n  <ng-content></ng-content>\n</p-overlayPanel>\n",
                 styles: [":host ::ng-deep eo-icon.active{color:var(--color-accent)}.eo-header-actions :host ::ng-deep p-overlaypanel>.ui-overlaypanel{background-color:var(--color-white);left:inherit!important;right:var(--app-pane-padding)!important;top:calc(var(--app-pane-padding)*3)!important}.eo-grid-header :host ::ng-deep p-overlaypanel>.ui-overlaypanel{background-color:var(--color-white);left:inherit!important;right:var(--app-pane-padding)!important;top:24px!important}.eo-app-bar :host ::ng-deep p-overlaypanel>.ui-overlaypanel{background-color:var(--color-primary-2);top:var(--app-bar-height)!important}.eo-app-bar :host ::ng-deep p-overlaypanel>.ui-overlaypanel .ui-overlaypanel-content{padding:0}"]
             },] }
 ];
@@ -3546,7 +3552,8 @@ OverlayComponent.propDecorators = {
     iconClass: [{ type: Input }],
     styleClass: [{ type: Input }],
     active: [{ type: Input }],
-    iconTitle: [{ type: Input }]
+    iconTitle: [{ type: Input }],
+    onToggle: [{ type: Output }]
 };
 
 class ErrorMessageComponent {
@@ -3938,7 +3945,7 @@ const panelLoadingAnimations = trigger('panelLoading', [
 ]);
 
 class AppBarComponent extends UnsubscribeOnDestroy {
-    constructor(userService, capabilityService, translate, inboxService, prepareService, clipboard, renderer, router, bpmService, eventService, config) {
+    constructor(userService, capabilityService, translate, inboxService, prepareService, clipboard, renderer, router, bpmService, eventService, config, elemRef) {
         super();
         this.userService = userService;
         this.capabilityService = capabilityService;
@@ -3951,6 +3958,7 @@ class AppBarComponent extends UnsubscribeOnDestroy {
         this.bpmService = bpmService;
         this.eventService = eventService;
         this.config = config;
+        this.elemRef = elemRef;
         this.transparent = false;
         this.sidebarShow = false;
         this.pageVisible = true;
@@ -4010,6 +4018,11 @@ class AppBarComponent extends UnsubscribeOnDestroy {
             });
         });
     }
+    onToggleProfileOverlay() {
+        setTimeout(() => {
+            this.elemRef.nativeElement.querySelector('#settings').focus();
+        });
+    }
     setIconTitles() {
         this.iconTitles = {
             search: this.translate.instant('eo.bar.button.search.tooltip'),
@@ -4070,17 +4083,12 @@ class AppBarComponent extends UnsubscribeOnDestroy {
         //     this.exeActions = !!res.length;
         //   });
         this.initVisibilityChangeListener();
-        this.eventService.on(EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE).subscribe(() => {
-            this.avatarComponents.forEach(avatar => {
-                avatar.createUserBackground();
-            });
-        });
     }
 }
 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\" 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",
+                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 (onToggle)=\"onToggleProfileOverlay()\">\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\" id=\"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)}}"]
             },] }
 ];
@@ -4095,7 +4103,8 @@ AppBarComponent.ctorParameters = () => [
     { type: Router },
     { type: BpmService },
     { type: EventService },
-    { type: Config }
+    { type: Config },
+    { type: ElementRef }
 ];
 AppBarComponent.propDecorators = {
     transparent: [{ type: Input }],
@@ -4828,6 +4837,18 @@ class AppSearchComponent {
     }
     saveQuery() {
         // const queryParams: NavigationExtras = {queryParamsHandling : 'preserve'};
+        let queryHasDynamicList = false;
+        this.query.filters.forEach((filter, index) => {
+            const formElementDynamicList = this.idxSearch.type.elements.find(element => element.qname === filter.property && element.type === 'STRING'
+                && !element.reference && element.classification === 'selector');
+            if (formElementDynamicList) {
+                queryHasDynamicList = true;
+                this.query.filters.splice(index, 1);
+            }
+        });
+        if (queryHasDynamicList) {
+            this.notifications.warning(this.translate.instant('eo.search.save.dynamic.lists.warning'));
+        }
         this.router
             .navigate([{ outlets: { modal: null } }], { replaceUrl: true })
             .then(() => this.router.navigate(['/stored-queries'], { queryParams: { create: true } }));
@@ -6525,7 +6546,7 @@ class DatetimeComponent {
 DatetimeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-datetime',
-                template: "<!-- non web environments use native pickers -->\n<div class=\"eo-datepicker native\" lang=\"{{locale}}\" *ngIf=\"!isWebEnv; else web\">\n  <input type=\"date\" [(ngModel)]=\"value\" *ngIf=\"!withTime\" [readonly]=\"readonly\"/>\n  <input type=\"datetime-local\" [(ngModel)]=\"value\" [readonly]=\"readonly\" *ngIf=\"withTime\"/>\n</div>\n\n\n<ng-template #web>\n\n  <eo-dialog  [styleClass]=\"'date-picker'\" [title]=\"pickerTitle\" [(visible)]=\"showPicker\" *ngIf=\"showPicker\">\n    <eo-datepicker [date]=\"value\" [withTime]=\"withTime\" [withAmPm]=\"withAmPm\"\n                   [onlyFutureDates]=\"onlyFutureDates\"\n                   [useDatabaseMinimumTime]=\"validateDatabaseTimeRange\"\n                   (onCanceled)=\"(showPicker = false)\"\n                   (onDateChanged)=\"setValueFromPicker($event)\"></eo-datepicker>\n  </eo-dialog>\n\n  <div class=\"eo-datepicker\">\n    <p-inputMask [mask]=\"maskPattern\" [(ngModel)]=\"innerValue\"\n                 (ngModelChange)=\"onMaskValueChange($event)\"\n                 (onComplete)=\"setValueFromMask()\"\n                 [readonly]=\"readonly\"\n                 [autoClear]=\"true\"\n                 [placeholder]=\"datePattern\"></p-inputMask>\n\n    <button class=\"ui-button\" (click)=\"(showPicker = true)\"  (keyup.arrowDown)=\"(showPicker = true)\" *ngIf=\"!readonly\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_datepicker.svg'\"></eo-icon>\n    </button>\n  </div>\n\n</ng-template>\n\n\n\n\n\n",
+                template: "<!-- non web environments use native pickers -->\n<div class=\"eo-datepicker native\" lang=\"{{locale}}\" *ngIf=\"!isWebEnv; else web\">\n  <input type=\"date\" [(ngModel)]=\"value\" *ngIf=\"!withTime\" [readonly]=\"readonly\"/>\n  <input type=\"datetime-local\" [(ngModel)]=\"value\" [readonly]=\"readonly\" *ngIf=\"withTime\"/>\n</div>\n\n\n<ng-template #web>\n\n  <eo-dialog  [styleClass]=\"'date-picker'\" [title]=\"pickerTitle\" [(visible)]=\"showPicker\" *ngIf=\"showPicker\">\n    <eo-datepicker [date]=\"value\" [withTime]=\"withTime\" [withAmPm]=\"withAmPm\"\n                   [onlyFutureDates]=\"onlyFutureDates\"\n                   [useDatabaseMinimumTime]=\"validateDatabaseTimeRange\"\n                   (onCanceled)=\"(showPicker = false)\"\n                   (onDateChanged)=\"setValueFromPicker($event)\"></eo-datepicker>\n  </eo-dialog>\n\n  <div class=\"eo-datepicker\">\n    <p-inputMask [mask]=\"maskPattern\" [(ngModel)]=\"innerValue\"\n                 (ngModelChange)=\"onMaskValueChange($event)\"\n                 (onComplete)=\"setValueFromMask()\"\n                 [readonly]=\"readonly\"\n                 [autoClear]=\"true\"\n                 [placeholder]=\"readonly ? '' : datePattern\"></p-inputMask>\n\n    <button class=\"ui-button\" (click)=\"(showPicker = true)\"  (keyup.arrowDown)=\"(showPicker = true)\" *ngIf=\"!readonly\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_datepicker.svg'\"></eo-icon>\n    </button>\n  </div>\n\n</ng-template>\n\n\n\n\n\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -6873,7 +6894,7 @@ FormInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-form-input',
                 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}"]
+                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;min-width:0;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.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}"]
             },] }
 ];
 FormInputComponent.propDecorators = {
@@ -7072,9 +7093,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;
@@ -7126,7 +7146,7 @@ IdReferenceComponent.decorators = [
                         multi: true
                     }
                 ],
-                styles: [".eo-id-reference{align-items:center;display:flex}.eo-id-reference__element{align-self:center;display:flex;flex-wrap:wrap}.eo-id-reference .ui-button:disabled{cursor:default}::ng-deep .reference-field-dialog{width:577px}::ng-deep .ref-type-icon{height:16px;width:16px}::ng-deep .deleted-reference-label{color:var(--color-error)}::ng-deep .label{display:flex;flex-flow:column;margin-left:4px;margin-right:1em}::ng-deep .label>span{font-size:var(--font-hint)}::ng-deep .label.rtl{margin-left:1em;margin-right:4px}::ng-deep .remove-icon{color:var(--text-color-hint);flex:0 0 auto;height:14px;width:14px}::ng-deep .remove-icon:hover{color:var(--text-color-caption);cursor:pointer}::ng-deep .ui-autocomplete.xxx .ui-autocomplete-multiple-container.ui-inputtext{cursor:default}::ng-deep .ui-autocomplete.xxx .ui-autocomplete-input-token{display:none}p-autoComplete{width:100%}"]
+                styles: [".eo-id-reference{align-items:center;display:flex}.eo-id-reference__element{align-self:center;display:flex;flex-wrap:wrap}.eo-id-reference .ui-button:disabled{cursor:default}::ng-deep .reference-field-dialog{width:577px}::ng-deep .ref-type-icon{height:16px;width:16px}::ng-deep .deleted-reference-label{color:var(--color-error)}::ng-deep .label{display:flex;display:inline-block;flex-flow:column;margin-left:4px;margin-right:1em;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .label>span{font-size:var(--font-hint)}::ng-deep .label.rtl{margin-left:1em;margin-right:4px}::ng-deep .remove-icon{color:var(--text-color-hint);flex:0 0 auto;height:14px;width:14px}::ng-deep .remove-icon:hover{color:var(--text-color-caption);cursor:pointer}::ng-deep .ui-autocomplete.xxx .ui-autocomplete-multiple-container.ui-inputtext{cursor:default}::ng-deep .ui-autocomplete.xxx .ui-autocomplete-input-token{display:none}p-autoComplete{width:100%}"]
             },] }
 ];
 IdReferenceComponent.ctorParameters = () => [
@@ -7197,9 +7217,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) {
@@ -7488,9 +7507,9 @@ class ReferenceFinderComponent {
 ReferenceFinderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-reference-finder',
-                template: "\n<section class=\"reference-finder-search--input\">\n  <input #searchInput autofocus tabindex=\"1\" (input)=\"searchTerm$.next($event.target.value)\" class=\"search\" type=\"text\" placeholder=\"{{('eo.search.result.term' | translate)}}\"/>\n</section>\n\n<section class=\"reference-finder--content\">\n  <div class=\"results\">\n    <eo-simple-accordion *ngIf=\"clipboardItems.length && !copyOnly\"\n    [header]=\"'eo.clipboard.type.copy' | translate\"\n    [selected]=\"clipboardOpen\"\n    (onOpen)=\"clipboardOpen = $event;\"\n    class=\"results-accordion\">\n        <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n          [@fadeInOut]\n          [list]=\"list\"\n          [multiselect]=\"multiselect\"\n          (selectReference)=\"selectReference($event)\"\n          [marked]=\"list.id === markedItem?.id\"\n        >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"clipboardItems.length && copyOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n    <div class=\"padding\"></div>\n\n    <eo-simple-accordion *ngIf=\"resultList.length && !searchOnly\" [header]=\"'eo.search.title' | translate\" [selected]=\"true\" class=\"results-accordion\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"resultList.length && searchOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n  </div>\n\n\n  <div class=\"cta\">\n    <button type=\"button\" *ngIf=\"multiselect\" (click)=\"selectAllEntries()\">{{('eo.cta.button.select.all' | translate)}}</button>\n    <button type=\"button\" class=\"add\" (click)=\"addItems()\" *ngIf=\"!disableAdd\" [@fadeInOut]  [class.active]=\"!disableAdd\" [disabled]=\"disableAdd\" [title]=\"'eo.cta.button.add' | translate\">\n      {{('eo.cta.button.add' | translate)}}\n    </button>\n  </div>\n</section>\n",
+                template: "\n<section class=\"reference-finder-search--input\">\n  <input #searchInput autofocus tabindex=\"1\" (input)=\"searchTerm$.next($event.target.value)\" class=\"search\" type=\"text\" placeholder=\"{{('eo.search.result.term' | translate)}}\"/>\n</section>\n\n<section class=\"reference-finder--content\">\n  <div class=\"results\">\n    <eo-simple-accordion *ngIf=\"clipboardItems.length && !copyOnly\"\n    [header]=\"'eo.clipboard.type.copy' | translate\"\n    [open]=\"clipboardOpen\"\n    (onOpen)=\"clipboardOpen = $event;\"\n    class=\"results-accordion\">\n        <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n          [@fadeInOut]\n          [list]=\"list\"\n          [multiselect]=\"multiselect\"\n          (selectReference)=\"selectReference($event)\"\n          [marked]=\"list.id === markedItem?.id\"\n        >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"clipboardItems.length && copyOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n    <div class=\"padding\"></div>\n\n    <eo-simple-accordion *ngIf=\"resultList.length && !searchOnly\" [header]=\"'eo.search.title' | translate\" [open]=\"true\" class=\"results-accordion\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"resultList.length && searchOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n  </div>\n\n\n  <div class=\"cta\">\n    <button type=\"button\" *ngIf=\"multiselect\" (click)=\"selectAllEntries()\">{{('eo.cta.button.select.all' | translate)}}</button>\n    <button type=\"button\" class=\"add\" (click)=\"addItems()\" *ngIf=\"!disableAdd\" [@fadeInOut]  [class.active]=\"!disableAdd\" [disabled]=\"disableAdd\" [title]=\"'eo.cta.button.add' | translate\">\n      {{('eo.cta.button.add' | translate)}}\n    </button>\n  </div>\n</section>\n",
                 animations: [fadeInOut],
-                styles: [".reference-finder-search--input{background-color:var(--color-accent);grid-template-areas:\"search\";padding:var(--app-pane-padding)}.reference-finder--content,.reference-finder-search--input{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr}.reference-finder--content{align-items:center;grid-template-areas:\"results\" \"cta\"}.search{-ms-grid-column:1;-ms-grid-row:1;border:0;border:1px solid var(--panel-background-grey);box-shadow:0 2px 2px 0 rgba(0,0,0,.2);box-sizing:border-box;font-size:var(--font-title);grid-area:search;padding:calc(var(--app-pane-padding)/2);width:100%}.search-result--hint{font-size:var(--font-caption)}.results{-ms-grid-column:1;-ms-grid-row:1;grid-area:results;height:330px;margin:var(--app-pane-padding);overflow:scroll}.results-accordion:nth-child(odd){margin-bottom:10px}.cta{align-items:center;border-top:1px solid rgba(var(--color-black-rgb),.1);display:flex;justify-content:space-between;padding:var(--app-pane-padding)}.add{grid-area:add}.add.active{background-color:var(--color-accent);color:var(--color-white)}.padding{padding:5px}:host ::-webkit-scrollbar{width:5px}:host ::ng-deep .ui-accordion-content{padding:1em 0}:host ::ng-deep .ui-accordion-header-text{color:var(--color-black);font-size:var(--font-subhead)}"]
+                styles: [".reference-finder-search--input{background-color:var(--color-accent);grid-template-areas:\"search\";padding:var(--app-pane-padding)}.reference-finder--content,.reference-finder-search--input{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr}.reference-finder--content{align-items:center;grid-template-areas:\"results\" \"cta\"}.search{-ms-grid-column:1;-ms-grid-row:1;border:0;border:1px solid var(--panel-background-grey);box-shadow:0 2px 2px 0 rgba(0,0,0,.2);box-sizing:border-box;font-size:var(--font-title);grid-area:search;padding:calc(var(--app-pane-padding)/2);width:100%}.search-result--hint{font-size:var(--font-caption)}.results{-ms-grid-column:1;-ms-grid-row:1;grid-area:results;height:330px;margin:var(--app-pane-padding);overflow:scroll}.results-accordion:nth-child(odd){margin-bottom:10px}.cta{align-items:center;border-top:1px solid rgba(var(--color-black-rgb),.1);display:flex;justify-content:space-between;padding:var(--app-pane-padding)}.add{grid-area:add}.add.active{background-color:var(--color-accent);color:var(--color-white)}.padding{padding:5px}:host ::-webkit-scrollbar{width:5px}:host ::ng-deep .ui-accordion-content{padding:1em 0}"]
             },] }
 ];
 ReferenceFinderComponent.ctorParameters = () => [
@@ -7920,7 +7939,7 @@ OrganizationComponent.decorators = [
                         multi: true
                     }
                 ],
-                styles: [".eo-organization .ui-autocomplete-token-label{display:inline-block}.eo-organization .fa.fa-user,.eo-organization .fa.fa-users{margin:0 4px;text-align:center;width:18px}:host.readonly ::ng-deep .ui-autocomplete-token-icon{display:none}:host ::ng-deep .ui-autocomplete-token{border:none!important;margin:0!important;padding:0!important}:host ::ng-deep .ui-autocomplete-token .token{align-items:center;border:1px solid rgba(0,0,0,.1);display:flex;padding:2px}:host ::ng-deep .ui-autocomplete-token-icon{opacity:1}[dir=ltr] :host ::ng-deep .ui-autocomplete-token-icon{margin-right:4px}[dir=rtl] :host ::ng-deep .ui-autocomplete-token-icon{margin-left:4px}:host ::ng-deep .ui-autocomplete-token-icon.del{color:var(--color-white)!important}:host ::ng-deep .deleted-user-label{color:var(--color-error)}:host ::ng-deep .eo-organization.acInputHidden .ui-autocomplete-input-token{margin:0;padding:0;width:0!important}:host ::ng-deep .eo-organization.acInputHidden .ui-autocomplete-input-token input{width:0!important}"]
+                styles: [".eo-organization .ui-autocomplete-token-label{display:inline-block}.eo-organization .fa.fa-user,.eo-organization .fa.fa-users{margin:0 4px;text-align:center;width:18px}:host.readonly ::ng-deep .ui-autocomplete-token-icon{display:none}:host ::ng-deep .ui-autocomplete-token{border:none!important;margin:0!important;padding:0!important}:host ::ng-deep .ui-autocomplete-token .token{align-items:center;border:1px solid rgba(0,0,0,.1);display:flex;overflow:hidden;padding:2px}:host ::ng-deep .ui-autocomplete-token-icon{opacity:1}[dir=ltr] :host ::ng-deep .ui-autocomplete-token-icon{margin-right:4px}[dir=rtl] :host ::ng-deep .ui-autocomplete-token-icon{margin-left:4px}:host ::ng-deep .ui-autocomplete-token-icon.del{color:var(--color-white)!important}:host ::ng-deep .deleted-user-label{color:var(--color-error)}:host ::ng-deep .eo-organization.acInputHidden .ui-autocomplete-input-token{margin:0;padding:0;width:0!important}:host ::ng-deep .eo-organization.acInputHidden .ui-autocomplete-input-token input{width:0!important}"]
             },] }
 ];
 OrganizationComponent.ctorParameters = () => [
@@ -8172,7 +8191,7 @@ class StringComponent {
         };
     }
     set autocomplete(autoCom) {
-        this._autocomplete = this.envService.isCloud() ? false : autoCom;
+        this._autocomplete = autoCom;
     }
     get autocomplete() {
         return this._autocomplete;
@@ -8368,7 +8387,7 @@ StringComponent.decorators = [
                         multi: true
                     }
                 ],
-                styles: [".eo-form-string{align-items:center;display:flex;flex-flow:row nowrap}.eo-form-string p-autocomplete{width:100%}.eo-form-string .classify a{color:var(--text-color-hint)}.eo-form-string .classify a:focus,.eo-form-string .classify a:hover{color:var(--text-color-caption)}.eo-form-string .classify.empty{display:none}.eo-form-string .input-textarea{resize:vertical}.eo-form-string .input-textarea.size-small{height:4em}.eo-form-string .input-textarea.size-medium{height:6em}.eo-form-string .input-textarea.size-large{height:8em}:host ::ng-deep input{width:100%}:host ::ng-deep p-chips .ui-state-disabled .ui-chips-input-token{display:none}:host ::ng-deep p-chips{width:100%}"]
+                styles: [".eo-form-string{align-items:center;display:flex;flex-flow:row nowrap}.eo-form-string p-autocomplete{width:100%}.eo-form-string .classify a{color:var(--text-color-hint)}.eo-form-string .classify a:focus,.eo-form-string .classify a:hover{color:var(--text-color-caption)}.eo-form-string .classify.empty{display:none}.eo-form-string .input-textarea{resize:vertical}.eo-form-string .input-textarea.size-small{height:4em}.eo-form-string .input-textarea.size-medium{height:6em}.eo-form-string .input-textarea.size-large{height:8em}:host ::ng-deep input{width:100%}:host ::ng-deep p-chips .ui-state-disabled .ui-chips-input-token{display:none}:host ::ng-deep .ui-chips-input-token{flex:1;min-width:10ch}:host ::ng-deep p-chips{width:100%}"]
             },] }
 ];
 StringComponent.ctorParameters = () => [
@@ -11783,7 +11802,7 @@ class DatetimeFilterComponent extends DatetimeComponent {
 DatetimeFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-datetime-custom',
-                template: "<!-- non web environments use native pickers -->\n<div class=\"eo-datepicker native\" lang=\"{{locale}}\" *ngIf=\"!isWebEnv; else web\">\n  <input type=\"date\" [(ngModel)]=\"value\" *ngIf=\"!withTime\" [readonly]=\"readonly\"/>\n  <input type=\"datetime-local\" [(ngModel)]=\"value\" [readonly]=\"readonly\" *ngIf=\"withTime\"/>\n</div>\n\n\n<ng-template #web>\n\n  <eo-dialog  [styleClass]=\"'date-picker'\" [title]=\"pickerTitle\" [(visible)]=\"showPicker\" *ngIf=\"showPicker\">\n    <eo-datepicker [date]=\"value\" [withTime]=\"withTime\" [withAmPm]=\"withAmPm\"\n                   [onlyFutureDates]=\"onlyFutureDates\"\n                   [useDatabaseMinimumTime]=\"validateDatabaseTimeRange\"\n                   (onCanceled)=\"(showPicker = false)\"\n                   (onDateChanged)=\"setValueFromPicker($event)\"></eo-datepicker>\n  </eo-dialog>\n\n  <div class=\"eo-datepicker\">\n    <p-inputMask [mask]=\"maskPattern\" [(ngModel)]=\"innerValue\"\n                 (ngModelChange)=\"onMaskValueChange($event)\"\n                 (onComplete)=\"setValueFromMask()\"\n                 [readonly]=\"readonly\"\n                 [autoClear]=\"true\"\n                 [placeholder]=\"datePattern\"></p-inputMask>\n\n    <button class=\"ui-button\" (click)=\"(showPicker = true)\"  (keyup.arrowDown)=\"(showPicker = true)\" *ngIf=\"!readonly\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_datepicker.svg'\"></eo-icon>\n    </button>\n  </div>\n\n</ng-template>\n\n\n\n\n\n",
+                template: "<!-- non web environments use native pickers -->\n<div class=\"eo-datepicker native\" lang=\"{{locale}}\" *ngIf=\"!isWebEnv; else web\">\n  <input type=\"date\" [(ngModel)]=\"value\" *ngIf=\"!withTime\" [readonly]=\"readonly\"/>\n  <input type=\"datetime-local\" [(ngModel)]=\"value\" [readonly]=\"readonly\" *ngIf=\"withTime\"/>\n</div>\n\n\n<ng-template #web>\n\n  <eo-dialog  [styleClass]=\"'date-picker'\" [title]=\"pickerTitle\" [(visible)]=\"showPicker\" *ngIf=\"showPicker\">\n    <eo-datepicker [date]=\"value\" [withTime]=\"withTime\" [withAmPm]=\"withAmPm\"\n                   [onlyFutureDates]=\"onlyFutureDates\"\n                   [useDatabaseMinimumTime]=\"validateDatabaseTimeRange\"\n                   (onCanceled)=\"(showPicker = false)\"\n                   (onDateChanged)=\"setValueFromPicker($event)\"></eo-datepicker>\n  </eo-dialog>\n\n  <div class=\"eo-datepicker\">\n    <p-inputMask [mask]=\"maskPattern\" [(ngModel)]=\"innerValue\"\n                 (ngModelChange)=\"onMaskValueChange($event)\"\n                 (onComplete)=\"setValueFromMask()\"\n                 [readonly]=\"readonly\"\n                 [autoClear]=\"true\"\n                 [placeholder]=\"readonly ? '' : datePattern\"></p-inputMask>\n\n    <button class=\"ui-button\" (click)=\"(showPicker = true)\"  (keyup.arrowDown)=\"(showPicker = true)\" *ngIf=\"!readonly\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_datepicker.svg'\"></eo-icon>\n    </button>\n  </div>\n\n</ng-template>\n\n\n\n\n\n",
                 styles: [":host .eo-datepicker{align-items:center;display:flex;flex-flow:row nowrap}:host ::ng-deep p-inputmask{flex:1 1 auto}:host ::ng-deep p-inputmask input{background:transparent;border:0;width:100%}"]
             },] }
 ];
@@ -11848,7 +11867,7 @@ OrganizationFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-organization-filter',
                 template: "<div class=\"eo-organization\" [ngClass]=\"{acInputHidden: !multiselect && innerValue.length}\">\n\n  <p-autoComplete [(ngModel)]=\"innerValue\" [minLength]=\"1\" #autocomplete\n                  (onSelect)=\"onSelect($event)\" (onUnselect)=\"onUnselect($event)\"\n                  (onBlur)=\"onAutoCompleteBlur()\"\n                  [readonly]=\"readonly\"\n                  [disabled]=\"readonly\"\n                  [placeholder]=\"placeholder\"\n                  [suggestions]=\"autocompleteRes\" field=\"title\"\n                  (completeMethod)=\"autocompleteFn($event)\" [multiple]=\"true\">\n\n    <!-- template for the suggest list -->\n    <ng-template let-item pTemplate=\"item\">\n      <i class=\"fa {{item.type === 'group' ? 'fa-users' : 'fa-user'}}\"></i>\n      <span *ngIf=\"(item.firstname?.length && item.lastname?.length) || item.type === 'group'\" class=\"ui-autocomplete-token-label\">{{item.title}} ({{item.name}})</span>\n      <span *ngIf=\"!item.firstname?.length && !item.lastname?.length && item.type !== 'group'\" class=\"ui-autocomplete-token-label\">({{item.name}})</span>\n      <span *ngIf=\"!item.firstname?.length && item.lastname?.length\" class=\"ui-autocomplete-token-label\">{{item.lastname}} ({{item.name}})</span>\n      <span *ngIf=\"item.firstname?.length && !item.lastname?.length\" class=\"ui-autocomplete-token-label\">{{item.firstname}} ({{item.name}})</span>\n    </ng-template>\n\n    <!-- template for the selected items when multiple -->\n    <ng-template let-item pTemplate=\"selectedItem\">\n      <div class=\"token\">\n        <i class=\"fa {{item.type === 'group' ? 'fa-users' : 'fa-user'}}\" [ngClass]=\"{'deleted-user-label': !item.firstname?.length && !item.lastname?.length && !item.active && !item.type}\"></i>\n        <span *ngIf=\"(item.firstname?.length && item.lastname?.length && item.active) || item.type === 'group'\" class=\"ui-autocomplete-token-label\">{{item.title}} ({{item.name}})</span>\n        <span *ngIf=\"(!item.firstname?.length && !item.lastname?.length && !item.active && !item.type)\" class=\"ui-autocomplete-token-label deleted-user-label\">{{'eo.form.property.organization.error.usernotfound'|translate}}</span>\n        <span *ngIf=\"!item.firstname?.length && !item.lastname?.length && item.active && item.type !== 'group'\" class=\"ui-autocomplete-token-label\">({{item.name}})</span>\n        <span *ngIf=\"!item.firstname?.length && item.lastname?.length\" class=\"ui-autocomplete-token-label\">{{item.lastname}} ({{item.name}})</span>\n        <span *ngIf=\"item.firstname?.length && !item.lastname?.length\" class=\"ui-autocomplete-token-label\">{{item.firstname}} ({{item.name}})</span>\n      </div>\n    </ng-template>\n\n  </p-autoComplete>\n</div>\n",
-                styles: [".eo-organization .ui-autocomplete-token-label{display:inline-block}.eo-organization .fa.fa-user,.eo-organization .fa.fa-users{margin:0 4px;text-align:center;width:18px}:host.readonly ::ng-deep .ui-autocomplete-token-icon{display:none}:host ::ng-deep .ui-autocomplete-token{border:none!important;margin:0!important;padding:0!important}:host ::ng-deep .ui-autocomplete-token .token{align-items:center;border:1px solid rgba(0,0,0,.1);display:flex;padding:2px}:host ::ng-deep .ui-autocomplete-token-icon{opacity:1}[dir=ltr] :host ::ng-deep .ui-autocomplete-token-icon{margin-right:4px}[dir=rtl] :host ::ng-deep .ui-autocomplete-token-icon{margin-left:4px}:host ::ng-deep .ui-autocomplete-token-icon.del{color:var(--color-white)!important}:host ::ng-deep .deleted-user-label{color:var(--color-error)}:host ::ng-deep .eo-organization.acInputHidden .ui-autocomplete-input-token{margin:0;padding:0;width:0!important}:host ::ng-deep .eo-organization.acInputHidden .ui-autocomplete-input-token input{width:0!important}"]
+                styles: [".eo-organization .ui-autocomplete-token-label{display:inline-block}.eo-organization .fa.fa-user,.eo-organization .fa.fa-users{margin:0 4px;text-align:center;width:18px}:host.readonly ::ng-deep .ui-autocomplete-token-icon{display:none}:host ::ng-deep .ui-autocomplete-token{border:none!important;margin:0!important;padding:0!important}:host ::ng-deep .ui-autocomplete-token .token{align-items:center;border:1px solid rgba(0,0,0,.1);display:flex;overflow:hidden;padding:2px}:host ::ng-deep .ui-autocomplete-token-icon{opacity:1}[dir=ltr] :host ::ng-deep .ui-autocomplete-token-icon{margin-right:4px}[dir=rtl] :host ::ng-deep .ui-autocomplete-token-icon{margin-left:4px}:host ::ng-deep .ui-autocomplete-token-icon.del{color:var(--color-white)!important}:host ::ng-deep .deleted-user-label{color:var(--color-error)}:host ::ng-deep .eo-organization.acInputHidden .ui-autocomplete-input-token{margin:0;padding:0;width:0!important}:host ::ng-deep .eo-organization.acInputHidden .ui-autocomplete-input-token input{width:0!important}"]
             },] }
 ];
 OrganizationFilterComponent.ctorParameters = () => [
@@ -13891,11 +13910,6 @@ class MediaComponent extends UnsubscribeOnDestroy {
         this.SIZE_LIMIT = 1024 * 1024 * 10; // 10MB
         this._disabled = false;
         this.attachments = [];
-        this.isMedia = false;
-        this.isOctetStream = false;
-        this.isNotSupported = false;
-        this.isLarge = false;
-        this.hasError = false;
         this.customConfig = [];
         this.defaultViewers = [
             {
@@ -13914,7 +13928,7 @@ class MediaComponent extends UnsubscribeOnDestroy {
                 "mimeType": ["message/rfc822", "application/vnd.ms-outlook"],
                 "viewer": "viewer/view/api/mail/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
             },
-            { "viewer": "() => parameters.defaultViewer + '#'" },
+            { "viewer": "() => parameters.defaultViewer" },
             { "error": true, "type": "error", "viewer": "viewer/view/api/error/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}" }
         ];
         this.undockDisabled = false;
@@ -13922,7 +13936,6 @@ class MediaComponent extends UnsubscribeOnDestroy {
         // by default, the viewer ignores the version of the dms object. This will always show the latest version.
         // We need this to be able to refresh the viewer because otherwise pdfjs worker will fail.
         this.useVersion = false;
-        this.fileSizePipe = new FileSizePipe(translate);
         this.SIZE_LIMIT = this.config.getRaw('preview.fileSizeLimit') || this.SIZE_LIMIT;
         this.customConfig = (this.config.getRaw('preview.viewers') || []).concat(this.defaultViewers);
         this.pluginsService.api.content.catchError().subscribe((evt) => {
@@ -13934,7 +13947,7 @@ class MediaComponent extends UnsubscribeOnDestroy {
                 win,
                 parameters
             ]);
-            uri && this.loadDocument(this.resolveUri(uri, parameters), true);
+            uri && win && (win.location.href = this.resolveUri(uri, parameters));
         });
         if (ContentPreviewService.undockWinActive()) {
             this.undock(false);
@@ -13965,14 +13978,10 @@ class MediaComponent extends UnsubscribeOnDestroy {
         return this._previewUri;
     }
     set previewFile(file) {
-        var _a;
         if (file) {
             this.viewer = this.getViewer(file);
-            this.isMedia = this.viewer.viewer !== MediaComponent.PDF_VIEWER;
-            this.isOctetStream = !!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/octet-stream/));
-            this.isLarge = file.size && file.size > this.SIZE_LIMIT;
             this.mediaType = file.mediaTypeName && this.system.getObjectType(file.mediaTypeName);
-            this.previewUri = this.isMedia ? this.viewer.previewUri : file.uriPdf;
+            this.previewUri = this.viewer.previewUri;
         }
         else {
             this.previewUri = '';
@@ -13998,7 +14007,7 @@ class MediaComponent extends UnsubscribeOnDestroy {
                 path: file.path,
                 mediaTypeName: item.typeName
             };
-            if (!!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/^mail|octet-stream/)) && !this.isMedia) {
+            if (!!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/^mail|octet-stream/)) && this.viewer.viewer.startsWith(MediaComponent.PDF_VIEWER)) {
                 this.slideUri = this.dms.getSlide(item.content.id, item.content.type, this.useVersion ? item.version : null, 256);
                 this.attachmentsLoading = this.dms.getAttachments(item).subscribe(a => this.setAttachments = a);
             }
@@ -14007,13 +14016,12 @@ class MediaComponent extends UnsubscribeOnDestroy {
             this.previewUri = '';
         }
     }
-    selectAttachment(attachment, force) {
-        const previewUri = attachment && this.isMedia ? this.getViewer({ uriPdf: attachment === null || attachment === void 0 ? void 0 : attachment.previewUri }).previewUri : attachment === null || attachment === void 0 ? void 0 : attachment.previewUri;
-        this.loadDocument(previewUri || this.previewUri, force);
+    selectAttachment(attachment) {
+        const previewUri = attachment && this.getViewer({ uriPdf: attachment.previewUri }).previewUri;
+        this.loadDocument(previewUri || this.previewUri, true);
     }
     toogleViewer() {
         this.open = !this.disabled && !!this.previewUri;
-        this.undockDisabled = this.undockDisabled ? true : this.previewUri === '';
         if (this.undockDisabled) {
             this.isUndocked = false;
         }
@@ -14024,18 +14032,11 @@ class MediaComponent extends UnsubscribeOnDestroy {
     refresh() {
         this.loadDocument(this.previewUri, true);
     }
-    openPdfViewer(uri) {
-        this.pdfjs.contentWindow.PDFViewerApplication.open(uri).then(() => (this.hasError = false)).catch((err) => {
-            this.hasError = !this.isOctetStream;
-            this.isNotSupported = this.isOctetStream;
-        });
-        // this.search();
-    }
     getViewer(file) {
         var _a, _b;
         const isVideo = !!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/^audio|^video/));
         const defaultViewer = isVideo ? MediaComponent.VIDEO_VIEWER : MediaComponent.PDF_VIEWER;
-        const fileExtension = ((_b = file.path) === null || _b === void 0 ? void 0 : _b.includes('.')) ? file.path.split('.').pop() : '';
+        const fileExtension = file.fileExtension || (((_b = file.path) === null || _b === void 0 ? void 0 : _b.includes('.')) ? file.path.split('.').pop() : '');
         const mimeType = file.mimetype;
         const config = this.customConfig.find((c) => {
             const matchMT = !c.mimeType || (typeof c.mimeType === 'string' ? [c.mimeType] : c.mimeType).includes(mimeType === null || mimeType === void 0 ? void 0 : mimeType.toLowerCase());
@@ -14118,48 +14119,19 @@ class MediaComponent extends UnsubscribeOnDestroy {
     }
     loadDocument(uri, force) {
         var _a, _b;
-        if (force) {
-            this.isLarge = false;
-        }
-        if (!force && (this.disabled || !uri || (uri === this.latestUri && !this.hasError))) {
+        if (!force && (this.disabled || !uri || (uri === this.latestUri))) {
             return false;
         }
         this.latestUri = uri || '';
-        this.hasError = false;
-        this.isNotSupported = false;
         if (this.isUndocked) {
             this.openWindow(this.latestUri);
             const onload = () => { var _a; return this.pluginsService.applyFunction((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load, 'iframe, component', [this.undockWin, this]); };
             this.iframeInit(this.undockWin, ((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load) && onload);
-            return false;
-        }
-        if (this.isMedia) {
-            this.renderer.setAttribute(this.iframeMedia.nativeElement, 'src', this.latestUri);
-            const onload = () => { var _a; return this.pluginsService.applyFunction((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load, 'iframe, component', [this.iframeMedia.nativeElement, this]); };
-            this.iframeInit(this.iframeMedia.nativeElement, ((_b = this.viewer) === null || _b === void 0 ? void 0 : _b.load) && onload);
         }
         else {
-            if (!this.pdfjs) {
-                this.pdfjs = this.iframe.nativeElement;
-                this.renderer.setAttribute(this.pdfjs, 'src', MediaComponent.PDF_VIEWER.replace(/\?.*/, '?file=&'));
-                this.renderer.listen(this.pdfjs, 'load', () => {
-                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('sidebarViewOnLoad', 0);
-                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('viewOnLoad', false);
-                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('locale', ContentPreviewService.mapLang(this.translate.currentLang));
-                    this.pdfjs.contentWindow.document.webL10n.setLanguage(ContentPreviewService.mapLang(this.translate.currentLang));
-                    this.pdfjs.contentWindow.PDFViewerApplication._initializeL10n();
-                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('viewerCssTheme', 1);
-                    this.pdfjs.contentWindow.PDFViewerApplication._forceCssTheme();
-                    this.pdfjs.contentWindow.PDFViewerApplication.appConfig.viewerContainer
-                        .addEventListener('dragenter', e => window.document.dispatchEvent(new DragEvent('dragenter', e)));
-                    this.pdfjs.contentWindow.PDFViewerApplication.appConfig.viewerContainer.addEventListener('drop', e => e.stopPropagation());
-                    this.openPdfViewer(this.latestUri);
-                });
-            }
-            else if (this.pdfjs.contentWindow && this.pdfjs.contentWindow.PDFViewerApplication) {
-                this.pdfjs.contentWindow.PDFViewerApplication.pdfSidebar.close();
-                this.openPdfViewer(this.latestUri);
-            }
+            this.renderer.setAttribute(this.iframe.nativeElement, 'src', this.latestUri);
+            const onload = () => { var _a; return this.pluginsService.applyFunction((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load, 'iframe, component', [this.iframe.nativeElement, this]); };
+            this.iframeInit(this.iframe.nativeElement, ((_b = this.viewer) === null || _b === void 0 ? void 0 : _b.load) && onload);
         }
     }
     /**
@@ -14168,28 +14140,23 @@ class MediaComponent extends UnsubscribeOnDestroy {
      * @param win iframe window
      */
     searchPDF(term = '', win) {
-        var _a, _b;
+        var _a, _b, _c;
         // remove all special characters
         term = (term || '').replace(/[\"|\*]/g, '').trim();
         if (term && ((_b = (_a = win === null || win === void 0 ? void 0 : win.PDFViewerApplication) === null || _a === void 0 ? void 0 : _a.appConfig) === null || _b === void 0 ? void 0 : _b.findBar)) {
-            win.PDFViewerApplication.findController.executeCommand('find', {
-                caseSensitive: false,
-                findPrevious: undefined,
-                highlightAll: true,
-                phraseSearch: true,
-                query: term
-            });
             win.PDFViewerApplication.appConfig.findBar.findField.value = term;
             win.PDFViewerApplication.appConfig.findBar.highlightAllCheckbox.checked = true;
             win.PDFViewerApplication.appConfig.findBar.caseSensitiveCheckbox.checked = false;
+            // trigger find event on pdf.js load
+            (_c = win.PDFViewerApplication.initializedPromise) === null || _c === void 0 ? void 0 : _c.then(() => win.PDFViewerApplication.findBar.dispatchEvent());
         }
     }
     preventDropEvent(win) {
-        var _a, _b, _c, _d;
-        if ((_b = (_a = this.iframe) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.startsWith(window.location.origin)) {
-            (_c = win === null || win === void 0 ? void 0 : win.document) === null || _c === void 0 ? void 0 : _c.addEventListener('drop', (e) => e.stopPropagation());
+        var _a, _b, _c;
+        if (((_a = win === null || win === void 0 ? void 0 : win.location) === null || _a === void 0 ? void 0 : _a.origin) === window.location.origin) {
+            (_b = win === null || win === void 0 ? void 0 : win.document) === null || _b === void 0 ? void 0 : _b.addEventListener('drop', (e) => e.stopPropagation());
             // dispach drag & drop events to main window
-            (_d = win === null || win === void 0 ? void 0 : win.document) === null || _d === void 0 ? void 0 : _d.addEventListener('dragenter', (e) => {
+            (_c = win === null || win === void 0 ? void 0 : win.document) === null || _c === void 0 ? void 0 : _c.addEventListener('dragenter', (e) => {
                 window.document.dispatchEvent(new DragEvent('dragenter', e));
                 setTimeout(() => window.document.dispatchEvent(new DragEvent('dragleave', e)), 10);
             });
@@ -14197,13 +14164,14 @@ class MediaComponent extends UnsubscribeOnDestroy {
     }
     iframeInit(iframe = this.iframe, onload) {
         if (iframe) {
+            this.loading = true;
             iframe._init || fromEvent(iframe, 'load')
                 .pipe(takeUntil(this.componentDestroyed$))
                 .subscribe(() => {
                 const win = this.setApi(iframe);
                 onload && onload();
+                this.loading = false;
                 setTimeout(() => {
-                    // this.loading = false;
                     this.searchPDF(this.searchTerm, win);
                     this.preventDropEvent(win);
                 }, 100);
@@ -14212,9 +14180,17 @@ class MediaComponent extends UnsubscribeOnDestroy {
         }
     }
     setApi(iframe) {
+        var _a;
         // set api to iframe window
         const win = (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) || iframe;
         win['api'] = window['api'];
+        if ((_a = win['api']) === null || _a === void 0 ? void 0 : _a.content) {
+            win['api'].content.resolveViewerParams = (parameters) => {
+                const uri = parameters.path.replace(location.origin, '');
+                const viewer = this.getViewer({ uri, mimetype: parameters.mimeType, fileExtension: parameters.fileExtension, uriPdf: '', mimegroup: '', size: 1 });
+                return { uri: viewer.previewUri || parameters.path };
+            };
+        }
         return win;
     }
     ngAfterViewInit() {
@@ -14228,7 +14204,7 @@ MediaComponent.PDF_VIEWER = 'viewer/view/api/pdf/web/viewer.html?file=&path=${pa
 MediaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-media',
-                template: "<div [hidden]=\"!open\">\n\n  <!-- attachments overlay -->\n  <div class=\"attachments\" *ngIf=\"attachments?.length\" [ngClass]=\"{notmain: latestUri !== previewUri && !attachmentsShown, active: attachmentsShown}\"\n       (eoOutsideClick)=\"attachmentsShown = false\">\n    <div class=\"attachments-list\" *ngIf=\"attachmentsShown\">\n      <div class=\"attachment main\" (click)=\"selectAttachment(null, isLarge)\" [ngClass]=\"{current: latestUri === previewUri}\">{{dmsObjectTitle}}</div>\n      <div class=\"attachment\" *ngFor=\"let a of attachments\" (click)=\"selectAttachment(a, isLarge)\" [ngClass]=\"{current: latestUri === a.previewUri}\">\n        {{a.name}}\n      </div>\n    </div>\n\n    <eo-icon class=\"button\" [badge]=\"attachments?.length\"\n             (click)=\"attachmentsShown = !attachmentsShown\"\n             [iconSrc]=\"attachmentsShown ? 'assets/_default/svg/ic_clear.svg' : 'assets/_default/svg/ic_attachment.svg'\"></eo-icon>\n  </div>\n\n  <div class=\"preview-container\" [style.overflow]=\"'hidden'\" [hidden]=\"hasError\">\n    <iframe [hidden]=\"isNotSupported || isUndocked || isMedia\" #iframe height=\"100%\" width=\"100%\" frameborder=\"0\"></iframe>\n    <iframe [hidden]=\"isNotSupported || isUndocked || !isMedia\" #iframeMedia height=\"100%\" width=\"100%\" frameborder=\"0\"></iframe>\n    <div class=\"slide\" *ngIf=\"isNotSupported || isUndocked\">\n      <!--<img *ngIf=\"!isMedia\" [src]=\"slideUri\" alt=\"preview\">-->\n      <eo-icon *ngIf=\"mediaType\" [objectType]=\"mediaType\"></eo-icon>\n      <div class=\"large-content not-supported\" *ngIf=\"isNotSupported\" translate>eo.object.preview.not.supported</div>\n    </div>\n  </div>\n</div>\n\n<div [hidden]=\"!hasError && open\" class=\"empty-container\">\n  <eo-icon class=\"nofile\" [iconSrc]=\"'assets/_default/svg/ic_no-file.svg'\"></eo-icon>\n</div>\n\n<eo-icon *ngIf=\"!undockDisabled\" class=\"button undock\" [iconSrc]=\"'assets/_default/svg/ic_undock.svg'\" (click)=\"undock()\"></eo-icon>\n",
+                template: "<div [hidden]=\"!open\">\n\n  <!-- attachments overlay -->\n  <div class=\"attachments\" *ngIf=\"attachments?.length\" [ngClass]=\"{notmain: latestUri !== previewUri && !attachmentsShown, active: attachmentsShown}\"\n       (eoOutsideClick)=\"attachmentsShown = false\">\n    <div class=\"attachments-list\" *ngIf=\"attachmentsShown\">\n      <div class=\"attachment main\" (click)=\"selectAttachment(null)\" [ngClass]=\"{current: latestUri === previewUri}\">{{dmsObjectTitle}}</div>\n      <div class=\"attachment\" *ngFor=\"let a of attachments\" (click)=\"selectAttachment(a)\" [ngClass]=\"{current: latestUri === a.previewUri}\">\n        {{a.name}}\n      </div>\n    </div>\n\n    <eo-icon class=\"button\" [badge]=\"attachments?.length\"\n             (click)=\"attachmentsShown = !attachmentsShown\"\n             [iconSrc]=\"attachmentsShown ? 'assets/_default/svg/ic_clear.svg' : 'assets/_default/svg/ic_attachment.svg'\"></eo-icon>\n  </div>\n\n  <div class=\"preview-container\" [style.overflow]=\"'hidden'\">\n    <iframe [hidden]=\"isUndocked || loading\" #iframe height=\"100%\" width=\"100%\" frameborder=\"0\"></iframe>\n    <div class=\"slide\" *ngIf=\"isUndocked\">\n      <eo-icon *ngIf=\"mediaType\" [objectType]=\"mediaType\"></eo-icon>\n    </div>\n  </div>\n</div>\n\n<div [hidden]=\"open\" class=\"empty-container\">\n  <eo-icon class=\"nofile\" [iconSrc]=\"'assets/_default/svg/ic_no-file.svg'\"></eo-icon>\n</div>\n\n<eo-icon *ngIf=\"!undockDisabled\" [hidden]=\"previewUri === ''\" class=\"button undock\" [iconSrc]=\"'assets/_default/svg/ic_undock.svg'\" (click)=\"undock()\"></eo-icon>\n",
                 providers: [ContentPreviewService],
                 styles: [":host .empty-container{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}:host .empty-container .nofile{height:128px;opacity:.06;width:128px}:host .button.undock{background-color:rgba(var(--color-primary-rgb),.6);bottom:var(--app-pane-padding);opacity:.2;position:absolute;right:var(--app-pane-padding)}:host .button.undock:hover{opacity:.5}:host .preview-container{bottom:0;left:0;position:absolute;right:0;top:0}:host .preview-container .slide{align-items:center;display:flex;flex:1;flex-direction:column;height:100%;justify-content:center;min-height:0;min-width:0}:host .preview-container .slide .large-content{background-color:rgba(var(--color-primary-rgb),.5);color:var(--color-white);cursor:pointer;display:flex;flex:1;flex-direction:row;justify-content:center;min-height:0;min-width:0;padding:var(--app-pane-padding);position:absolute;top:0;width:100%}:host .preview-container .slide .large-content.not-supported,:host .preview-container .slide .large-content:hover{background-color:rgba(var(--color-primary-rgb),.9)}:host .preview-container .slide .large-content.not-supported{cursor:inherit}:host .preview-container .slide img{padding:var(--app-pane-padding);width:100%}:host .preview-container .slide eo-icon{height:128px;opacity:.2;width:128px}:host .attachments{align-items:flex-end;background-color:rgba(var(--color-primary-rgb),.6);border-radius:2px;bottom:calc(var(--app-pane-padding)*3);color:var(--color-white);display:flex;flex-flow:row;max-width:calc(100% - 16px);position:absolute;right:calc(var(--app-pane-padding)/2);z-index:5}:host .attachments:hover{background-color:rgba(var(--color-primary-rgb),.9)}:host .attachments eo-icon{flex:0 0 auto;margin:calc(var(--app-pane-padding)/2)}:host .attachments .attachments-list{display:flex;flex:1;flex-direction:row;flex-flow:wrap;max-height:150px;min-height:0;min-width:0;overflow:auto;padding:calc(var(--app-pane-padding)/2)}:host .attachments .attachments-list .attachment{-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-color:rgba(var(--color-white-rgb),.1);border:1px solid rgba(var(--color-white-rgb),0);border-radius:4px;cursor:pointer;display:inline-block;margin:calc(var(--app-pane-padding)/8);max-width:none;overflow:hidden;padding:calc(var(--app-pane-padding)/4);text-overflow:ellipsis;transition:all var(--app-default-transition-duration) ease-in-out;white-space:nowrap}:host .attachments .attachments-list .attachment:hover{border-color:rgba(var(--color-white-rgb),.5)}:host .attachments .attachments-list .attachment.current{background-color:var(--color-accent)}:host .attachments .attachments-list .attachment.main{background-color:var(--color-primary);flex:1 1 100%;order:100}:host .attachments .attachments-list .attachment:not(.main){font-style:italic}:host .attachments.notmain{background-color:var(--color-accent)}:host .attachments.active{align-items:center;background-color:rgba(var(--color-primary-rgb),.9);bottom:calc(var(--app-pane-padding)/2)}"]
             },] }
@@ -14248,9 +14224,7 @@ MediaComponent.propDecorators = {
     enableCloseBtn: [{ type: Input }],
     useVersion: [{ type: Input }],
     open: [{ type: HostBinding, args: ['class.open',] }],
-    codesystem: [{ type: ViewChild, args: ['codesystem',] }],
     iframe: [{ type: ViewChild, args: ['iframe', { static: true },] }],
-    iframeMedia: [{ type: ViewChild, args: ['iframeMedia', { static: true },] }],
     setAttachments: [{ type: Input, args: ['attachments',] }],
     setSearchTerm: [{ type: Input, args: ['searchTerm',] }],
     disabled: [{ type: Input }],
@@ -14469,7 +14443,7 @@ AppAddDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-app-add-dialog',
                 template: "<section class=\"autocomplete\">\n  <p-autoComplete [(ngModel)]=\"selectedNode\" [minLength]=\"1\" [delay]=\"500\" #autocomplete\n    [suggestions]=\"autocompleteRes\" field=\"label\"\n    [forceSelection]=\"true\"\n    (onSelect)=\"onSelect($event)\"\n    (completeMethod)=\"autocompleteFn($event)\">\n    \n    <ng-template let-item pTemplate=\"item\">\n      <span class=\"ui-autocomplete-token-label\" title=\"{{item.label}} ({{item.location}})\">\n        <strong>{{item.label}}</strong>\n        <span>{{item.location}}</span>\n      </span>\n    </ng-template>\n  </p-autoComplete>\n</section>\n\n<section class=\"type-lists\">\n  <section class=\"section location\" *ngIf=\"locationParent\">\n    <div class=\"subhead\"><span translate>eo.add.title.location</span><span> \"{{locationParent.title}}\"</span></div>\n    <div class=\"type sub\" (click)=\"addToSubfolder()\" *ngIf=\"subfolder\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_create_new_folder.svg'\"></eo-icon>\n      <div>\n        <div class=\"label\">{{'eo.add.title.location.subfolder'|translate: ({folder: subfolder.title})}}</div>\n        <div class=\"group\">{{subFolderDescription}}</div>\n      </div>\n    </div>\n    <div class=\"type\" *ngFor=\"let type of locationTypes; trackBy: trackByFn\" (click)=\"prepare(type)\">\n      <eo-icon [objectType]=\"type\"></eo-icon>\n      <div>\n        <div class=\"label\">{{type.label}}</div>\n        <div class=\"group\">{{type.group}}</div>\n      </div>\n    </div>\n  </section>\n  \n  <section class=\"section general\" *ngIf=\"rootTypes.length; else noRootTypes\">\n    <div class=\"subhead\"><span translate>eo.add.title.location.common</span></div>\n      <div class=\"type\" *ngFor=\"let type of rootTypes; trackBy: trackByFn\"\n           [ngClass]=\"{context: type.isContextFolder}\"\n           (click)=\"prepare(type, true)\">\n        <eo-icon [objectType]=\"type\"></eo-icon>\n        <div>\n          <div class=\"label\">{{type.label}}</div>\n          <div class=\"group\">{{type.group}}</div>\n        </div>\n      </div>\n  </section>\n</section>\n\n<ng-template #noRootTypes>\n  <div *ngIf=\"!locationParent\">\n    <span class=\"empty__root-types\" translate>eo.add.empty.root.types</span>\n  </div>\n</ng-template>\n",
-                styles: ["::ng-deep .eo-dialog-content.add--content{max-height:620px;overflow:hidden}:host{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}:host ::ng-deep p-autocomplete{width:100%}:host ::ng-deep p-autocomplete .ui-autocomplete input.ui-inputtext{border:0;box-shadow:0 2px 2px 0 rgba(0,0,0,.2);font-size:var(--font-title);padding:calc(var(--app-pane-padding)/2)}:host ::ng-deep p-autocomplete .ui-autocomplete-token-label{display:flex;flex-flow:column}:host ::ng-deep p-autocomplete .ui-autocomplete-token-label>span{font-size:var(--font-hint)}:host .autocomplete{background-color:var(--color-accent);display:flex;padding:var(--app-pane-padding)}:host .type-lists{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0;overflow:auto;padding:var(--app-pane-padding) 0}:host .type-lists .section{padding:0 var(--app-pane-padding)}:host .type-lists .section .subhead{color:var(--color-accent);font-size:var(--font-subhead);font-weight:var(--font-weight-normal);margin:0;padding:calc(var(--app-pane-padding)/2)}:host .type-lists .section .type{-moz-transition:background-color var(--app-default-transition-duration) ease-in-out;-o-transition:background-color var(--app-default-transition-duration) ease-in-out;-webkit-transition:background-color var(--app-default-transition-duration) ease-in-out;align-items:center;border-top:1px solid rgba(var(--color-black-rgb),.06);cursor:pointer;display:flex;flex-flow:row nowrap;padding:calc(var(--app-pane-padding)/4) var(--app-pane-padding);transition:background-color var(--app-default-transition-duration) ease-in-out}:host .type-lists .section .type.context>div .label{font-weight:var(--font-weight-bold)}:host .type-lists .section .type.context eo-icon{background-color:rgba(var(--color-black-rgb),.15)}:host .type-lists .section .type.sub{padding-bottom:calc(var(--app-pane-padding)/2);padding-top:calc(var(--app-pane-padding)/2)}:host .type-lists .section .type.sub>div .label{font-weight:var(--font-weight-bold)}:host .type-lists .section .type eo-icon{border-radius:2px;box-sizing:content-box;color:var(--text-color-caption);flex:0 0 auto;height:18px;padding:2px;width:18px}:host .type-lists .section .type>div{flex:1 1 auto;padding:0 var(--app-pane-padding)}:host .type-lists .section .type>div .label{color:var(--text-color-body)}:host .type-lists .section .type>div .group{color:var(--text-color-caption);font-size:var(--font-hint)}:host .type-lists .section .type:hover{background-color:var(--panel-background-grey)}:host .type-lists .empty__root-types{padding:8px}"]
+                styles: ["::ng-deep .eo-dialog-content.add--content{max-height:620px;overflow:hidden}:host{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}:host ::ng-deep p-autocomplete{width:100%}:host ::ng-deep p-autocomplete .ui-autocomplete input.ui-inputtext{border:0;box-shadow:0 2px 2px 0 rgba(0,0,0,.2);font-size:var(--font-title);padding:calc(var(--app-pane-padding)/2)}:host ::ng-deep p-autocomplete .ui-autocomplete-token-label{display:flex;flex-flow:column}:host ::ng-deep p-autocomplete .ui-autocomplete-token-label>span{font-size:var(--font-hint)}:host .autocomplete{background-color:var(--color-accent);display:flex;padding:var(--app-pane-padding)}:host .type-lists{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0;overflow-y:auto;padding:var(--app-pane-padding) 0}:host .type-lists .section{padding:0 var(--app-pane-padding)}:host .type-lists .section .subhead{color:var(--color-accent);font-size:var(--font-subhead);font-weight:var(--font-weight-normal);margin:0;padding:calc(var(--app-pane-padding)/2)}:host .type-lists .section .type{-moz-transition:background-color var(--app-default-transition-duration) ease-in-out;-o-transition:background-color var(--app-default-transition-duration) ease-in-out;-webkit-transition:background-color var(--app-default-transition-duration) ease-in-out;align-items:center;border-top:1px solid rgba(var(--color-black-rgb),.06);cursor:pointer;display:flex;flex-flow:row nowrap;padding:calc(var(--app-pane-padding)/4) var(--app-pane-padding);transition:background-color var(--app-default-transition-duration) ease-in-out}:host .type-lists .section .type.context>div .label{font-weight:var(--font-weight-bold)}:host .type-lists .section .type.context eo-icon{background-color:rgba(var(--color-black-rgb),.15)}:host .type-lists .section .type.sub{padding-bottom:calc(var(--app-pane-padding)/2);padding-top:calc(var(--app-pane-padding)/2)}:host .type-lists .section .type.sub>div .label{font-weight:var(--font-weight-bold)}:host .type-lists .section .type eo-icon{border-radius:2px;box-sizing:content-box;color:var(--text-color-caption);flex:0 0 auto;height:18px;padding:2px;width:18px}:host .type-lists .section .type>div{flex:1 1 auto;padding:0 var(--app-pane-padding)}:host .type-lists .section .type>div .label{color:var(--text-color-body)}:host .type-lists .section .type>div .group{color:var(--text-color-caption);font-size:var(--font-hint)}:host .type-lists .section .type:hover{background-color:var(--panel-background-grey)}:host .type-lists .empty__root-types{padding:8px}"]
             },] }
 ];
 AppAddDialogComponent.ctorParameters = () => [
@@ -14706,7 +14680,7 @@ class CopyActionComponent extends DmsObjectTarget {
     }
     isExecutable(item) {
         const isAllowedType = this.actionService.isAllowedType([item], ['sysemail']);
-        return of(this.isAllowedState() && isAllowedType && this.capabilityService.getCapabilities().intray && !item.isFolder);
+        return of(this.isAllowedState() && isAllowedType && this.capabilityService.getCapabilities().intray);
     }
     ;
     run(selection) {
@@ -16109,7 +16083,8 @@ class ShareObjectComponent {
     }
     ngOnInit() {
         let orgaValue = [];
-        this.includeChildrenField.setValue(true);
+        const shareChildren = this.selection[0].shares ? this.selection[0].shares[0].sharechildren : true;
+        this.includeChildrenField.setValue(shareChildren);
         if (this.selection[0].isFolder) {
             this.header = this.translate.instant('eo.manage.rights.folder.title');
         }
@@ -16636,13 +16611,14 @@ AppLayoutComponent.propDecorators = {
 class TrapFocusDirective {
     constructor(el) {
         this.el = el;
+        this.focusableSelectors = 'a[href], button, textarea, input[type="text"],' +
+            'input[type="radio"], input[type="checkbox"], select, [focusable]';
     }
     ngAfterViewInit() {
         this.trapFocus(this.el.nativeElement);
     }
     trapFocus(element) {
-        let focusableElements = element.querySelectorAll('a[href], button, textarea, input[type="text"],' +
-            'input[type="radio"], input[type="checkbox"], select, [focusable]');
+        let focusableElements = element.querySelectorAll(this.focusableSelectors);
         focusableElements = Array.from(focusableElements)
             .filter((el) => !el.disabled && !el.classList.contains('disabled'));
         const firstFocusableElement = focusableElements[0];
@@ -16665,6 +16641,20 @@ class TrapFocusDirective {
             }
         }));
     }
+    isArrowUpOrDownPressed(event) {
+        const key = event.key;
+        if (key === 'ArrowUp' || key === 'ArrowDown') {
+            event.preventDefault();
+            let focusableElements = this.el.nativeElement.parentElement.querySelectorAll(this.focusableSelectors);
+            const currentIndex = Array.from(focusableElements).indexOf(document.activeElement);
+            if (key === 'ArrowDown' && currentIndex < focusableElements.length - 1) {
+                focusableElements[currentIndex + 1].focus();
+            }
+            else if (key === 'ArrowUp' && currentIndex > 0) {
+                focusableElements[currentIndex - 1].focus();
+            }
+        }
+    }
 }
 TrapFocusDirective.decorators = [
     { type: Directive, args: [{
@@ -16674,6 +16664,9 @@ TrapFocusDirective.decorators = [
 TrapFocusDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
+TrapFocusDirective.propDecorators = {
+    isArrowUpOrDownPressed: [{ type: HostListener, args: ['keydown', ['$event'],] }]
+};
 
 /**
  * Module holding the base components of the application shell like application bar, side, search etc.
@@ -16822,7 +16815,7 @@ ChangePasswordFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-change-password-form',
                 template: "<section class=\"change-password\">\n  <form #changePasswordFormElement [formGroup]=\"changePasswordForm\" (ngSubmit)=\"onSubmit()\" autocomplete=\"off\">\n    <div class=\"form-item\">\n\n      <eo-form-input [label]=\"('eo.password.reset.current-password' | translate)\" [required]=\"true\" [invalid]=\"passwordIsNew\">\n        <eo-password [parent]=\"changePasswordForm\"\n                     [element]=\"'currentPassword'\"\n                     [canChangepasswordVisiblety]=\"false\"\n                     [passwordVisible]=\"passwordIsVisible\"\n                     [placeholder]=\"('eo.password.reset.current-password' | translate)\"></eo-password>\n      </eo-form-input>\n\n      <eo-form-input [label]=\"('eo.password.reset.new-password' | translate)\" [required]=\"true\" [invalid]=\"matchingPasswords || passwordIsNew\">\n        <eo-password [parent]=\"changePasswordForm\"\n                     [element]=\"'password'\"\n                     [canChangepasswordVisiblety]=\"false\"\n                     [passwordVisible]=\"passwordIsVisible\"\n                     [placeholder]=\"('eo.password.reset.new-password' | translate)\"></eo-password>\n      </eo-form-input>\n\n      <eo-form-input [label]=\"('eo.password.reset.confirm-password' | translate)\" [required]=\"true\" [invalid]=\"matchingPasswords\">\n        <eo-password [parent]=\"changePasswordForm\"\n                     [element]=\"'confirmPassword'\"\n                     [canChangepasswordVisiblety]=\"false\"\n                     [passwordVisible]=\"passwordIsVisible\"\n                     [placeholder]=\"('eo.password.reset.confirm-password' | translate)\"></eo-password>\n      </eo-form-input>\n\n      <div class=\"invalid error\" *ngIf=\"passwordIsNew\">\n        {{'eo.password.reset.error.same.password' | translate}}\n      </div>\n\n      <div class=\"invalid error\" *ngIf=\"matchingPasswords\">\n        {{'eo.password.reset.error.matiching.password' | translate}}\n      </div>\n\n      <div class=\"invalid error\" translate [translateParams]=\"{amount: passwordValidation.amount}\" *ngIf=\"passwordValidation.type === 'short'\">\n        eo.password.reset.error.new.password.short\n      </div>\n\n      <div class=\"invalid error\" translate [translateParams]=\"{amount: passwordValidation.amount}\" *ngIf=\"passwordValidation.type === 'number'\">\n       eo.password.reset.error.new.password.number\n      </div>\n\n      <div class=\"invalid error\" translate [translateParams]=\"{amount: passwordValidation.amount}\" *ngIf=\"passwordValidation.type === 'specialchars'\">\n       eo.password.reset.error.new.password.specialchars\n      </div>\n\n      <section class=\"change-password__cta\">\n        <button class=\"change-password__submit-button\" type=\"submit\"\n                [disabled]=\"changePasswordForm.invalid || passwordValidation.type !== 'valid'\" translate>eo.password.reset.confirm-button</button>\n\n        <a (click)=\"showPasswords()\">\n          <eo-icon class=\"change-password__icon-show\"\n                   [iconSrc]=\"'assets/_default/svg/ic_eye.svg'\"\n                   [iconTitle]=\"('eo.password.reset.toogle.icon' | translate)\"\n                   [ngClass]=\"{'visible': passwordIsVisible}\"></eo-icon>\n        </a>\n      </section>\n    </div>\n  </form>\n\n</section>\n",
-                styles: [".change-password .invalid.error{color:var(--color-error);padding:5px 0}.change-password__cta{align-items:center;display:flex;margin-top:10px}.change-password__submit-button{margin-right:10px}.change-password__icon-show{color:var(--color-primary-4)}.change-password__icon-show.visible{color:var(--color-primary-3)}"]
+                styles: [".change-password .invalid.error{color:var(--color-error);padding:5px 0}.change-password__cta{align-items:center;display:flex;margin-top:10px}.change-password__submit-button{margin-right:10px}.change-password__icon-show{color:var(--text-color-caption);cursor:pointer}.change-password__icon-show.visible{color:var(--color-primary-3)}"]
             },] }
 ];
 ChangePasswordFormComponent.ctorParameters = () => [
@@ -16911,6 +16904,7 @@ class ResultListComponent extends UnsubscribeOnDestroy {
         this.settings = {};
         this.querySubtitle = '';
         this.savedSearchClicked = false;
+        this.showWarnExportCSVThresholdDialog = false;
         this.title = '';
         this.emptyMessage = '';
         this.selectFirst = true;
@@ -16925,6 +16919,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) {
@@ -17112,10 +17108,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;
         });
     }
@@ -17140,8 +17144,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 = () => [
@@ -17158,6 +17162,7 @@ ResultListComponent.ctorParameters = () => [
 ];
 ResultListComponent.propDecorators = {
     grid: [{ type: ViewChild, args: ['eoGrid',] }],
+    list: [{ type: ViewChild, args: ['eoList',] }],
     title: [{ type: Input }],
     configType: [{ type: Input }],
     configContext: [{ type: Input }],
@@ -18418,7 +18423,7 @@ class ObjectDetailsComponent extends UnsubscribeOnDestroy {
 ObjectDetailsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-object-details',
-                template: "<div class=\"loader-overlay__mask\" *ngIf=\"showLoader\">\n  <eo-loading-spinner class=\"object-detail__loader\"></eo-loading-spinner>\n</div>\n<ng-container *ngIf=\"item && !hasError; else noItem\">\n\n  <div class=\"eo-head eo-head-tabs\" [eoShortcuts]=\"shortcuts\">\n    <header class=\"eo-header\">\n      <eo-icon class=\"eo-header-icon\" [objectType]=\"item.type\" [iconTitle]=\"item.type.label\"></eo-icon>\n      <div class=\"eo-header-info\">\n        <h2 class=\"eo-header-title\">{{item.title}}</h2>\n        <h3 class=\"eo-header-subtitle\">{{item.description}}</h3>\n      </div>\n\n      <div class=\"eo-header-actions-container\">\n        <div class=\"eo-header-actions\">\n          <ng-container *ngIf=\"!isReference; else tplHeadReference\">\n            <eo-icon class=\"button refresh-button\" [iconSrc]=\"'assets/_default/svg/ic_refresh.svg'\"\n              [iconTitle]=\"('eo.list.refresh' | translate)\" (click)=\"refreshContent()\"></eo-icon>\n            <eo-icon class=\"button sync-tab-btn\" *ngIf=\"enableCompare\" [ngClass]=\"{'enabled': enableSync}\"\n              [iconSrc]=\"'assets/_default/svg/ic_link.svg'\" [iconTitle]=\"'eo.versions.detail.glue.tooltip' | translate\"\n              (click)=\"enableSync = !enableSync\"></eo-icon>\n            <eo-favorite-icon [item]=\"item\" *ngIf=\"!enableCompare && capabilities.favorites && !isJournalObject(item)\">\n            </eo-favorite-icon>\n            <eo-icon class=\"button oc-button\" *ngIf=\"!enableCompare && item.content\" (click)=\"downloadOriginalContent()\"\n              [iconTitle]=\"('eo.action.download.dms.object.content.label' | translate)\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\"></eo-icon>\n            <eo-edit-icon [item]=\"item\" *ngIf=\"!enableCompare && item.content && item.rights.edit && (agentIsConnected$ | async)\">\n            </eo-edit-icon>\n            <eo-icon class=\"button am-button\" (click)=\"showActions()\"\n              [iconTitle]=\"('eo.object.details.actions.title' | translate)\"\n              [iconSrc]=\"'assets/_default/svg/ic_more.svg'\"></eo-icon>\n          </ng-container>\n\n          <ng-template #tplHeadReference>\n            <a class=\"button reference primary\"\n               [title]=\"('eo.object.reference.tooltip' | translate:{title:referenceTitle})\"\n               [routerLink]=\"['/object', item.id]\"\n               [queryParams]=\"{type: item.typeName}\">{{'eo.object.reference.open'|translate}}</a>\n          </ng-template>\n\n        </div>\n\n        <div class=\"eo-header-status-icons\">\n          <a class=\"content-link\" [title]=\"'eo.object.contentlink.tooltip' | translate\" *ngIf=\"item.content?.linked\"\n            [routerLink]=\"'/object/' + item.content.id\" [queryParams]=\"{type: item.content.type}\">\n            <span>{{'eo.object.contentlink' | translate}}</span>\n          </a>\n          <eo-icon class=\"subscription-icon\" *ngIf=\"item.subscriptions.length\"\n            [iconSrc]=\"'assets/_default/svg/ic_subscription.svg'\"\n            [iconTitle]=\"subscriptionIconTooltip\"></eo-icon>\n          <eo-icon class=\"resubmission-icon\" *ngIf=\"item.resubmissions.length\"\n            [iconSrc]=\"'assets/_default/svg/ic_resubmission.svg'\"\n            [iconTitle]=\"'eo.object.resubmission.tooltip' | translate\"></eo-icon>\n          <eo-icon class=\"lock\" [ngClass]=\"{'myLock': item.lock.by.me}\" *ngIf=\"item.lock\"\n            [iconSrc]=\"'assets/_default/svg/ic_lock.svg'\" [iconTitle]=\"lockTooltip\"></eo-icon>\n          <eo-icon class=\"finalized-icon\" *ngIf=\"item.isFinalized\" [iconSrc]=\"'assets/_default/svg/ic_finalized.svg'\"\n            [iconTitle]=\"'eo.object.finalized.tooltip' | translate\"></eo-icon>\n        </div>\n      </div>\n    </header>\n  </div>\n  <div class=\"eo-body\">\n    <eo-tab-container [pluginPanels]=\"externalPanels\" [cacheLayout]=\"!enableCompare && cacheLayout\" [defaultPanelOrder]=\"!enableCompare && panelOrder\"\n      [dndEnabled]=\"!enableCompare\" [enableSlave]=\"!enableCompare || item2\" [enableSync]=\"enableCompare && enableSync\"\n      [version]=\"enableCompare && {master: item && item.version, slave: item2 && item2.version}\">\n\n      <eo-tab-panel [id]=\"'summary'\" *ngIf=\"isVisible('summary')\" header=\"{{'eo.object.summary.title' | translate}}\">\n        <ng-template pTemplate=\"content\">\n          <eo-indexdata-summary [indexdata]=\"indexDataPreview\" [baseparams]=\"baseparams\" [dmsObject]=\"item\"\n            [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel [id]=\"'indexdata'\" *ngIf=\"isVisible('indexdata')\" header=\"{{'eo.object.indexdata.title' | translate}}\">\n        <ng-template pTemplate=\"content\">\n          <eo-object-form-edit [dmsObject]=\"item\" (indexDataSaved)=\"onIndexDataSaved($event, item)\"\n            [formDisabled]=\"enableCompare || isReference\"></eo-object-form-edit>\n        </ng-template>\n      </eo-tab-panel>\n      \n      <eo-tab-panel [id]=\"'preview'\" *ngIf=\"isVisible('preview')\" header=\"{{'eo.object.content.title' | translate}}\" [isSlave]=\"!enableCompare\"\n        #preview>\n        <ng-template pTemplate=\"content\" *ngIf=\"!undockWinActive; else loadPreview\">\n          <eo-media *ngIf=\"item\" [dmsObject]=\"item\" [disabled]=\"!preview.selected\"\n            [useVersion]=\"item.id === item.content?.id\" [searchTerm]=\"searchTerm\" #viewer></eo-media>\n        </ng-template>\n        <ng-template #loadPreview>\n          <eo-media *ngIf=\"item\" [dmsObject]=\"item\"\n            [useVersion]=\"item.id === item.content?.id\" [searchTerm]=\"searchTerm\" #viewer></eo-media>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel *ngIf=\"isVisible('history') && !enableCompare\" [id]=\"'history'\" header=\"{{'eo.object.history.title' | translate}}\" #history>\n        <ng-template pTemplate=\"content\">\n          <eo-object-history *ngIf=\"history.selected\" [params]=\"{id: item.id, type: item.type?.qname}\">\n          </eo-object-history>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel *ngIf=\"isVisible('links') && !enableCompare\" [id]=\"'links'\" header=\"{{'eo.object.links.title' | translate}}\" #links>\n        <ng-template pTemplate=\"content\">\n          <eo-object-links *ngIf=\"links.selected\" [dmsObject]=\"item\"></eo-object-links>\n        </ng-template>\n      </eo-tab-panel>\n\n      <!-- slave tabs -->\n\n      <eo-tab-panel *ngIf=\"isVisible('summary') && enableCompare\" [id]=\"'summary2'\" header=\"{{'eo.object.summary.title' | translate}}\"\n        [isSlave]=\"true\">\n        <ng-template pTemplate=\"content\">\n          <eo-indexdata-summary *ngIf=\"item2\" [indexdata]=\"indexDataPreview2\" [baseparams]=\"baseparams2\"\n            [dmsObject]=\"item2\" [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel *ngIf=\"isVisible('indexdata') && enableCompare\" [id]=\"'indexdata2'\" header=\"{{'eo.object.indexdata.title' | translate}}\"\n        [isSlave]=\"true\">\n        <ng-template pTemplate=\"content\">\n          <eo-object-form-edit *ngIf=\"item2\" [dmsObject]=\"item2\" (indexDataSaved)=\"onIndexDataSaved($event, item2)\"\n            [formDisabled]=\"enableCompare || isReference\"></eo-object-form-edit>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel *ngIf=\"isVisible('preview') && enableCompare\" [id]=\"'preview2'\" header=\"{{'eo.object.content.title' | translate}}\"\n        [isSlave]=\"true\" #preview2>\n        <ng-template pTemplate=\"content\">\n          <eo-media *ngIf=\"item2\" [dmsObject]=\"item2\" [disabled]=\"!preview2.selected\" [undockDisabled]=\"enableCompare\"\n            [useVersion]=\"true\" [searchTerm]=\"searchTerm\" #viewer2></eo-media>\n        </ng-template>\n      </eo-tab-panel>\n      \n      <eo-tab-panel *ngIf=\"enableCompare && enableDiff\" [id]=\"'changes'\" header=\"{{'eo.object.changes.title' | translate}}\"\n        [isSlave]=\"true\">\n        <ng-template pTemplate=\"content\">\n          <eo-indexdata-summary *ngIf=\"item2\" [diff]=\"{indexdata : indexDataPreview, indexdata2: indexDataPreview2, baseparams: baseparams, baseparams2: baseparams2}\" \n          [dmsObject]=\"item2\" [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\n        </ng-template>\n      </eo-tab-panel>\n\n      <ng-content></ng-content>\n\n    </eo-tab-container>\n  </div>\n</ng-container>\n\n<ng-template #noItem>\n  <span class=\"not-found\" *ngIf=\"nodmsobject\" translate>eo.bpm.nodmsobject</span>\n  <eo-error-message *ngIf=\"!showLoader\"\n    [emptyState]=\"{icon: emptyState.icon, text: emptyState.text, className: emptyState.className}\">\n    <ng-content select=\".error\"></ng-content>\n  </eo-error-message>\n</ng-template>",
+                template: "<div class=\"loader-overlay__mask\" *ngIf=\"showLoader\">\n  <eo-loading-spinner class=\"object-detail__loader\"></eo-loading-spinner>\n</div>\n<ng-container *ngIf=\"item && !hasError; else noItem\">\n\n  <div class=\"eo-head eo-head-tabs\" [eoShortcuts]=\"shortcuts\">\n    <header class=\"eo-header\">\n      <eo-icon class=\"eo-header-icon\" [objectType]=\"item.type\" [iconTitle]=\"item.type.label\"></eo-icon>\n      <div class=\"eo-header-info\">\n        <h2 class=\"eo-header-title\">{{item.title}}</h2>\n        <h3 class=\"eo-header-subtitle\">{{item.description}}</h3>\n      </div>\n\n      <div class=\"eo-header-actions-container\">\n        <div class=\"eo-header-actions\">\n          <ng-container *ngIf=\"!isReference; else tplHeadReference\">\n            <eo-icon class=\"button refresh-button\" [iconSrc]=\"'assets/_default/svg/ic_refresh.svg'\"\n              [iconTitle]=\"('eo.list.refresh' | translate)\" (click)=\"refreshContent()\"></eo-icon>\n            <eo-icon class=\"button sync-tab-btn\" *ngIf=\"enableCompare\" [ngClass]=\"{'enabled': enableSync}\"\n              [iconSrc]=\"'assets/_default/svg/ic_link.svg'\" [iconTitle]=\"'eo.versions.detail.glue.tooltip' | translate\"\n              (click)=\"enableSync = !enableSync\"></eo-icon>\n            <eo-favorite-icon [item]=\"item\" *ngIf=\"!enableCompare && capabilities.favorites && !isJournalObject(item)\">\n            </eo-favorite-icon>\n            <eo-icon class=\"button oc-button\" *ngIf=\"!enableCompare && item.content\" (click)=\"downloadOriginalContent()\"\n              [iconTitle]=\"('eo.action.download.dms.object.content.label' | translate)\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\"></eo-icon>\n            <eo-edit-icon [item]=\"item\" *ngIf=\"!enableCompare && item.content && item.rights.edit && (agentIsConnected$ | async)\">\n            </eo-edit-icon>\n            <eo-icon class=\"button am-button\" (click)=\"showActions()\"\n              [iconTitle]=\"('eo.object.details.actions.title' | translate)\"\n              [iconSrc]=\"'assets/_default/svg/ic_more.svg'\"></eo-icon>\n          </ng-container>\n\n          <ng-template #tplHeadReference>\n            <a class=\"button reference primary\"\n               [title]=\"('eo.object.reference.tooltip' | translate:{title:referenceTitle})\"\n               [routerLink]=\"['/object', item.id]\"\n               [queryParams]=\"{type: item.typeName}\">{{'eo.object.reference.open'|translate}}</a>\n          </ng-template>\n\n        </div>\n\n        <div class=\"eo-header-status-icons\">\n          <a class=\"content-link\" [title]=\"'eo.object.contentlink.tooltip' | translate\" *ngIf=\"item.content?.linked\"\n            [routerLink]=\"'/object/' + item.content.id\" [queryParams]=\"{type: item.content.type}\">\n            <span>{{'eo.object.contentlink' | translate}}</span>\n          </a>\n          <eo-icon class=\"subscription-icon\" *ngIf=\"item.subscriptions.length\"\n            [iconSrc]=\"'assets/_default/svg/ic_subscription.svg'\"\n            [iconTitle]=\"subscriptionIconTooltip\"></eo-icon>\n          <eo-icon class=\"resubmission-icon\" *ngIf=\"item.resubmissions.length\"\n            [iconSrc]=\"'assets/_default/svg/ic_resubmission.svg'\"\n            [iconTitle]=\"'eo.object.resubmission.tooltip' | translate\"></eo-icon>\n          <eo-icon class=\"shared-icon\" *ngIf=\"item.additionalvisibility.length\"\n                   [iconSrc]=\"'assets/_default/svg/ic_share.svg'\"\n                   [iconTitle]=\"'eo.object.shared.tooltip' | translate\"></eo-icon>\n          <eo-icon class=\"lock\" [ngClass]=\"{'myLock': item.lock.by.me}\" *ngIf=\"item.lock\"\n            [iconSrc]=\"'assets/_default/svg/ic_lock.svg'\" [iconTitle]=\"lockTooltip\"></eo-icon>\n          <eo-icon class=\"finalized-icon\" *ngIf=\"item.isFinalized\" [iconSrc]=\"'assets/_default/svg/ic_finalized.svg'\"\n            [iconTitle]=\"'eo.object.finalized.tooltip' | translate\"></eo-icon>\n        </div>\n      </div>\n    </header>\n  </div>\n  <div class=\"eo-body\">\n    <eo-tab-container [pluginPanels]=\"externalPanels\" [cacheLayout]=\"!enableCompare && cacheLayout\" [defaultPanelOrder]=\"!enableCompare && panelOrder\"\n      [dndEnabled]=\"!enableCompare\" [enableSlave]=\"!enableCompare || item2\" [enableSync]=\"enableCompare && enableSync\"\n      [version]=\"enableCompare && {master: item && item.version, slave: item2 && item2.version}\">\n\n      <eo-tab-panel [id]=\"'summary'\" *ngIf=\"isVisible('summary')\" header=\"{{'eo.object.summary.title' | translate}}\">\n        <ng-template pTemplate=\"content\">\n          <eo-indexdata-summary [indexdata]=\"indexDataPreview\" [baseparams]=\"baseparams\" [dmsObject]=\"item\"\n            [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel [id]=\"'indexdata'\" *ngIf=\"isVisible('indexdata')\" header=\"{{'eo.object.indexdata.title' | translate}}\">\n        <ng-template pTemplate=\"content\">\n          <eo-object-form-edit [dmsObject]=\"item\" (indexDataSaved)=\"onIndexDataSaved($event, item)\"\n            [formDisabled]=\"enableCompare || isReference\"></eo-object-form-edit>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel [id]=\"'preview'\" *ngIf=\"isVisible('preview')\" header=\"{{'eo.object.content.title' | translate}}\" [isSlave]=\"!enableCompare\"\n        #preview>\n        <ng-template pTemplate=\"content\" *ngIf=\"!undockWinActive; else loadPreview\">\n          <eo-media *ngIf=\"item\" [dmsObject]=\"item\" [disabled]=\"!preview.selected\"\n            [useVersion]=\"item.id === item.content?.id\" [searchTerm]=\"searchTerm\" #viewer></eo-media>\n        </ng-template>\n        <ng-template #loadPreview>\n          <eo-media *ngIf=\"item\" [dmsObject]=\"item\"\n            [useVersion]=\"item.id === item.content?.id\" [searchTerm]=\"searchTerm\" #viewer></eo-media>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel *ngIf=\"isVisible('history') && !enableCompare\" [id]=\"'history'\" header=\"{{'eo.object.history.title' | translate}}\" #history>\n        <ng-template pTemplate=\"content\">\n          <eo-object-history *ngIf=\"history.selected\" [params]=\"{id: item.id, type: item.type?.qname}\">\n          </eo-object-history>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel *ngIf=\"isVisible('links') && !enableCompare\" [id]=\"'links'\" header=\"{{'eo.object.links.title' | translate}}\" #links>\n        <ng-template pTemplate=\"content\">\n          <eo-object-links *ngIf=\"links.selected\" [dmsObject]=\"item\"></eo-object-links>\n        </ng-template>\n      </eo-tab-panel>\n\n      <!-- slave tabs -->\n\n      <eo-tab-panel *ngIf=\"isVisible('summary') && enableCompare\" [id]=\"'summary2'\" header=\"{{'eo.object.summary.title' | translate}}\"\n        [isSlave]=\"true\">\n        <ng-template pTemplate=\"content\">\n          <eo-indexdata-summary *ngIf=\"item2\" [indexdata]=\"indexDataPreview2\" [baseparams]=\"baseparams2\"\n            [dmsObject]=\"item2\" [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel *ngIf=\"isVisible('indexdata') && enableCompare\" [id]=\"'indexdata2'\" header=\"{{'eo.object.indexdata.title' | translate}}\"\n        [isSlave]=\"true\">\n        <ng-template pTemplate=\"content\">\n          <eo-object-form-edit *ngIf=\"item2\" [dmsObject]=\"item2\" (indexDataSaved)=\"onIndexDataSaved($event, item2)\"\n            [formDisabled]=\"enableCompare || isReference\"></eo-object-form-edit>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel *ngIf=\"isVisible('preview') && enableCompare\" [id]=\"'preview2'\" header=\"{{'eo.object.content.title' | translate}}\"\n        [isSlave]=\"true\" #preview2>\n        <ng-template pTemplate=\"content\">\n          <eo-media *ngIf=\"item2\" [dmsObject]=\"item2\" [disabled]=\"!preview2.selected\" [undockDisabled]=\"enableCompare\"\n            [useVersion]=\"true\" [searchTerm]=\"searchTerm\" #viewer2></eo-media>\n        </ng-template>\n      </eo-tab-panel>\n\n      <eo-tab-panel *ngIf=\"enableCompare && enableDiff\" [id]=\"'changes'\" header=\"{{'eo.object.changes.title' | translate}}\"\n        [isSlave]=\"true\">\n        <ng-template pTemplate=\"content\">\n          <eo-indexdata-summary *ngIf=\"item2\" [diff]=\"{indexdata : indexDataPreview, indexdata2: indexDataPreview2, baseparams: baseparams, baseparams2: baseparams2}\"\n          [dmsObject]=\"item2\" [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\n        </ng-template>\n      </eo-tab-panel>\n\n      <ng-content></ng-content>\n\n    </eo-tab-container>\n  </div>\n</ng-container>\n\n<ng-template #noItem>\n  <span class=\"not-found\" *ngIf=\"nodmsobject\" translate>eo.bpm.nodmsobject</span>\n  <eo-error-message *ngIf=\"!showLoader\"\n    [emptyState]=\"{icon: emptyState.icon, text: emptyState.text, className: emptyState.className}\">\n    <ng-content select=\".error\"></ng-content>\n  </eo-error-message>\n</ng-template>\n",
                 providers: [ContentPreviewService],
                 styles: [":host{background:var(--panel-background-grey);display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0;overflow-y:auto}:host .eo-head .eo-header .eo-header-info .eo-header-subtitle,:host .eo-head .eo-header .eo-header-info .eo-header-title{-moz-user-select:text;-webkit-user-select:text;user-select:text}:host .eo-body__not-available{background:rgba(var(--color-black-rgb),.4);opacity:.4}:host .sync-tab-btn.enabled{color:var(--color-accent)}:host .lock{background:var(--color-error)!important;border-radius:2px;color:var(--color-white);height:18px;padding:1px;width:18px}:host .lock.myLock{background:var(--state-orange)!important;color:var(--color-white)}:host .not-found{background:var(--color-error);border-radius:2px;color:var(--panel-background);flex:0 0 auto;margin:calc(var(--app-pane-padding)/2);padding:calc(var(--app-pane-padding)/4);text-align:center}:host .eo-header-status-icons{display:flex;justify-content:flex-end;margin-top:var(--app-pane-padding)}:host .eo-header-status-icons>eo-icon{background-color:var(--color-primary-2);color:var(--color-white);height:18px;margin-left:1px;padding:calc(var(--app-pane-padding)/4);width:18px}:host .eo-header-status-icons>eo-icon:first-child{border-bottom-left-radius:4px;border-top-left-radius:4px}:host .eo-header-status-icons>eo-icon:last-child{border-bottom-right-radius:4px;border-top-right-radius:4px}:host .eo-header-status-icons>eo-icon.finalized-icon{background-color:var(--color-success)}:host .eo-header-status-icons>eo-icon.lock{background:var(--color-error)!important;border-radius:2px;color:var(--color-white);height:18px;padding:1px;width:18px}:host .eo-header-status-icons>eo-icon.lock.myLock{background:var(--state-orange)!important}:host .eo-header-status-icons>a{align-items:center;background-color:var(--color-success);border-radius:2px;color:var(--color-white);display:flex;font-size:var(--font-hint);line-height:var(--font-hint);margin:0 calc(var(--app-pane-padding)/4);padding:0 4px 1px;text-decoration:none}: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 .object-detail__loader{margin:auto}:host ::ng-deep .sync-tab-btn{color:rgba(var(--color-black-rgb),.2)}:host ::ng-deep .sync-tab-btn .svg-link{fill:transparent}:host ::ng-deep .sync-tab-btn.enabled .svg-link{fill:currentColor}:host ::ng-deep div[eosplitgutter]{background-color:var(--color-white)!important}:host ::ng-deep .indexdata-summary,:host ::ng-deep .object-form-edit{margin:var(--app-pane-padding)}:host ::ng-deep #indexdata{overflow:hidden}:host ::ng-deep #indexdata .object-form-edit{background:transparent!important;height:100%;margin:0;position:relative}:host ::ng-deep #indexdata .object-form-edit eo-object-form{background:transparent;overflow:auto}:host ::ng-deep #indexdata .object-form-edit eo-object-form .eo-object-form{background:var(--panel-background);border:1px solid rgba(var(--color-black-rgb),.1);margin:var(--app-pane-padding)}:host ::ng-deep #indexdata .object-form-edit .form-controls{-webkit-animation:eoFadeInUp .2s;animation:eoFadeInUp .2s;border:4px solid var(--panel-background-grey)}:host ::ng-deep #indexdata .object-form-edit .form-controls .buttons{background:var(--panel-background);border-top:1px solid var(--panel-divider-color);padding:calc(var(--app-pane-padding)/2) var(--app-pane-padding)!important}"]
             },] }
@@ -22040,7 +22045,7 @@ class DashboardComponent extends UnsubscribeOnDestroy {
 DashboardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-dashboard',
-                template: "<div class=\"fade\"></div>\n<div class=\"dashboard\" [style.background-image]=\"backgroundImage\">\n\n  <div class=\"db-content\" [ngClass]=\"{centerFocus: (quickSearchResult && quickSearchResult.total > 0) || selectedQuery}\">\n\n    <!-- info area --->\n    <div class=\"db-left\">\n      <a class=\"info\" *ngIf=\"capabilities.inbox && inboxState && inboxState.totalmessages > 0\"\n           [routerLink]=\"['/inbox']\">\n        <div>\n          <eo-icon [iconSrc]=\"'assets/_default/svg/ic_inbox.svg'\"></eo-icon>\n          <div class=\"count\">{{inboxState.totalmessages}}</div>\n        </div>\n        <div class=\"msg\" translate>eo.dashboard.info.inbox.msg</div>\n      </a>\n      <a class=\"info\" *ngIf=\"capabilities.intray && preparedItemsCount > 0\"\n           [routerLink]=\"['/prepare']\">\n        <div>\n          <eo-icon [iconSrc]=\"'assets/_default/svg/ic_prepare.svg'\"></eo-icon>\n          <div class=\"count\">{{preparedItemsCount}}</div>\n        </div>\n        <div class=\"msg\" translate>eo.dashboard.info.intray.msg</div>\n      </a>\n    </div>\n\n    <!-- main content area -->\n    <div class=\"db-center\">\n\n      <div class=\"top\">\n        <div class=\"quick-search\" [ngClass]=\"{disabled: selectedQuery}\">\n\n          <div class=\"count\" *ngIf=\"quickSearchResult && quickSearchResult.total !== -1\" (click)=\"executeSearch()\">\n            <div  *ngIf=\"quickSearchResult.total\">\n              <span class=\"count-total\">{{quickSearchResult.total | localeDecimal}}</span>\n              <span class=\"label\" translate>eo.quicksearch.hits</span>\n            </div>\n            <span class=\"label\" *ngIf=\"!quickSearchResult.total\" translate>eo.quicksearch.reults.empty</span>\n          </div>\n\n          <div class=\"input\">\n            <eo-quick-search (onResult)=\"onQuickSearchResult($event)\"\n                             (onInputChange)=\"onQuickSearchInputChange($event)\"\n                             #quickSearch></eo-quick-search>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"bottom\">\n\n        <div class=\"quick-search-results\" *ngIf=\"quickSearchResult && quickSearchResult.total > 0; else storedqueries\">\n\n          <div class=\"group\" *ngFor=\"let key of quickSearchResult.groups | keys; index as i\">\n            <h2 *ngIf=\"key !== '0'; else maingroup\">{{key}}</h2>\n            <ng-template #maingroup>\n              <h2 translate>eo.quicksearch.result.group.global</h2>\n            </ng-template>\n\n            <eo-tree [tree]=\"tree[key]\" [(ngModel)]=\"selectedQuickSearchResultItem\" (ngModelChange)=\"executeSearch($event.data)\" [selectionKey]=\"'Enter'\">\n            </eo-tree>\n          </div>\n        </div>\n\n        <ng-template #storedqueries>\n\n          <div class=\"stored-queries\" *ngIf=\"capabilities.storedqueries && storedQueries.length\">\n\n            <div class=\"query\" *ngIf=\"selectedQuery; else querylist\">\n              <div>\n                <eo-icon class=\"button\" [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"\n                         (click)=\"selectStoredQuery(null)\"></eo-icon>\n              </div>\n              <eo-stored-query [query]=\"selectedQuery\"\n                               (onQueryLoaded)=\"onStoredQueryLoaded()\"\n                               (onQueryExecute)=\"onStoredQueryExecute($event)\"></eo-stored-query>\n            </div>\n\n\n            <ng-template #querylist>\n              <div class=\"queries\" [@listAnimation]=\"storedQueries.length\">\n                <a class=\"sq lead\" [routerLink]=\"['/stored-queries']\" translate>eo.sidebar.navigation.storedqueries</a>\n\n                <div class=\"sq\" *ngFor=\"let q of storedQueries; trackBy: trackByFn\" (click)=\"selectStoredQuery(q)\" (keyup.enter)=\"selectStoredQuery(q)\" tabindex=\"0\">\n                  <eo-icon [iconSrc]=\"'assets/_default/svg/ic_stored_query.svg'\"></eo-icon>\n                  <span>{{q.name}}</span>\n                </div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-template>\n\n      </div>\n\n    </div>\n\n    <!-- files area -->\n    <div class=\"db-right\">\n\n      <div class=\"lastEdits\" *ngIf=\"!isCloud && modifiedByMe?.lately.length\">\n        <div class=\"header\">\n          <h2 translate>eo.dashboard.modified.title</h2>\n        </div>\n        <div class=\"body\">\n\n          <a class=\"item\" *ngFor=\"let item of modifiedByMe.lately\" [routerLink]=\"['/object/', item.id]\">\n            <eo-icon [objectType]=\"item.type\"></eo-icon>\n            <div>\n              <div class=\"modified\">{{item.modified | localeDate}}</div>\n              <div class=\"title\">{{item.title}}</div>\n              <div class=\"description\">{{item.description}}</div>\n            </div>\n          </a>\n\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>\n\n\n\n",
+                template: "<div class=\"fade\"></div>\n<div class=\"dashboard\" [style.background-image]=\"backgroundImage\">\n\n  <div class=\"db-content\" [ngClass]=\"{centerFocus: (quickSearchResult && quickSearchResult.total > 0) || selectedQuery}\">\n\n    <!-- info area --->\n    <div class=\"db-left\">\n      <a class=\"info\" *ngIf=\"capabilities.inbox && inboxState && inboxState.totalmessages > 0\"\n           [routerLink]=\"['/inbox']\">\n        <div>\n          <eo-icon [iconSrc]=\"'assets/_default/svg/ic_inbox.svg'\"></eo-icon>\n          <div class=\"count\">{{inboxState.totalmessages}}</div>\n        </div>\n        <div class=\"msg\" translate>eo.dashboard.info.inbox.msg</div>\n      </a>\n      <a class=\"info\" *ngIf=\"capabilities.intray && preparedItemsCount > 0\"\n           [routerLink]=\"['/prepare']\">\n        <div>\n          <eo-icon [iconSrc]=\"'assets/_default/svg/ic_prepare.svg'\"></eo-icon>\n          <div class=\"count\">{{preparedItemsCount}}</div>\n        </div>\n        <div class=\"msg\" translate>eo.dashboard.info.intray.msg</div>\n      </a>\n    </div>\n\n    <!-- main content area -->\n    <div class=\"db-center\">\n\n      <div class=\"top\">\n        <div class=\"quick-search\" [ngClass]=\"{disabled: selectedQuery}\">\n\n          <div class=\"count\" *ngIf=\"quickSearchResult && quickSearchResult.total !== -1\" (click)=\"executeSearch()\">\n            <div  *ngIf=\"quickSearchResult.total\">\n              <span class=\"count-total\">{{quickSearchResult.total | localeDecimal}}</span>\n              <span class=\"label\" translate>eo.quicksearch.hits</span>\n            </div>\n            <span class=\"label\" *ngIf=\"!quickSearchResult.total\" translate>eo.quicksearch.reults.empty</span>\n          </div>\n\n          <div class=\"input\">\n            <eo-quick-search (onResult)=\"onQuickSearchResult($event)\"\n                             (onInputChange)=\"onQuickSearchInputChange($event)\"\n                             #quickSearch></eo-quick-search>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"bottom\">\n\n        <div class=\"quick-search-results\" *ngIf=\"quickSearchResult && quickSearchResult.total > 0; else storedqueries\">\n\n          <div class=\"group\" *ngFor=\"let key of quickSearchResult.groups | keys; index as i\">\n            <h2 *ngIf=\"key !== '0'; else maingroup\">{{key}}</h2>\n            <ng-template #maingroup>\n              <h2 translate>eo.quicksearch.result.group.global</h2>\n            </ng-template>\n\n            <eo-tree [tree]=\"tree[key]\" [(ngModel)]=\"selectedQuickSearchResultItem\" (ngModelChange)=\"executeSearch($event.data)\" [selectionKey]=\"'Enter'\">\n            </eo-tree>\n          </div>\n        </div>\n\n        <ng-template #storedqueries>\n\n          <div class=\"stored-queries\" *ngIf=\"capabilities.storedqueries && storedQueries.length\">\n\n            <div class=\"query\" *ngIf=\"selectedQuery; else querylist\">\n              <div>\n                <eo-icon class=\"button\" [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"\n                         (click)=\"selectStoredQuery(null)\"></eo-icon>\n              </div>\n              <eo-stored-query [query]=\"selectedQuery\"\n                               (onQueryLoaded)=\"onStoredQueryLoaded()\"\n                               (onQueryExecute)=\"onStoredQueryExecute($event)\"></eo-stored-query>\n            </div>\n\n\n            <ng-template #querylist>\n              <div class=\"queries\" [@listAnimation]=\"storedQueries.length\">\n                <a class=\"sq lead\" [routerLink]=\"['/stored-queries']\" translate>eo.sidebar.navigation.storedqueries</a>\n\n                <div class=\"sq\" *ngFor=\"let q of storedQueries; trackBy: trackByFn\" (click)=\"selectStoredQuery(q)\" (keyup.enter)=\"selectStoredQuery(q)\" tabindex=\"0\">\n                  <eo-icon [iconSrc]=\"'assets/_default/svg/ic_stored_query.svg'\"></eo-icon>\n                  <span>{{q.name}}</span>\n                </div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-template>\n\n      </div>\n\n    </div>\n\n    <!-- files area -->\n    <div class=\"db-right\">\n\n      <div class=\"lastEdits\" *ngIf=\"modifiedByMe?.lately.length\">\n        <div class=\"header\">\n          <h2 translate>eo.dashboard.modified.title</h2>\n        </div>\n        <div class=\"body\">\n\n          <a class=\"item\" *ngFor=\"let item of modifiedByMe.lately\" [routerLink]=\"['/object/', item.id]\">\n            <eo-icon [objectType]=\"item.type\"></eo-icon>\n            <div>\n              <div class=\"modified\">{{item.modified | localeDate}}</div>\n              <div class=\"title\">{{item.title}}</div>\n              <div class=\"description\">{{item.description}}</div>\n            </div>\n          </a>\n\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>\n\n\n\n",
                 animations: [
                     listAnimation
                 ],
@@ -22075,7 +22080,7 @@ var LockSettings;
 })(LockSettings || (LockSettings = {}));
 
 class SettingsComponent extends UnsubscribeOnDestroy {
-    constructor(renderer, userService, config, notify, systemService, eventService, capabilitiesService, envService, titleService, agentService, fb, cacheService, listSettingsService, storageService, translate, notification) {
+    constructor(renderer, userService, config, notify, systemService, eventService, capabilitiesService, envService, titleService, agentService, fb, cacheService, listSettingsService, storageService, translate, elemRef, notification) {
         super();
         this.renderer = renderer;
         this.userService = userService;
@@ -22092,6 +22097,7 @@ class SettingsComponent extends UnsubscribeOnDestroy {
         this.listSettingsService = listSettingsService;
         this.storageService = storageService;
         this.translate = translate;
+        this.elemRef = elemRef;
         this.notification = notification;
         this.LockSettings = LockSettings;
         this.showAgentConfig = true;
@@ -22189,10 +22195,11 @@ class SettingsComponent extends UnsubscribeOnDestroy {
         }
     }
     ngAfterViewInit() {
+        this.elemRef.nativeElement.querySelector('#presence').focus();
         this.user$.subscribe(user => {
             this.userId = user.id;
             this.userImageUri = this.userService.getUserImageUri(this.userId);
-            this.setUserImage(this.userImageUri);
+            this.refreshUserImageHeaderBackground(this.userImageUri);
             this.showDeleteIconTrash = !!user.imageUri;
         });
     }
@@ -22210,9 +22217,8 @@ class SettingsComponent extends UnsubscribeOnDestroy {
         this.userService
             .delUserImage(uploadURI).subscribe({
             next: () => {
-                this.setUserImage(this.userImageUri);
+                this.refreshUserImageHeaderBackground(this.userImageUri);
                 this.eventService.trigger(EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE);
-                this.userAvatar.createUserBackground();
                 this.showDeleteDialog = false;
                 this.showDeleteIconTrash = false;
             },
@@ -22254,9 +22260,8 @@ class SettingsComponent extends UnsubscribeOnDestroy {
             .setUserImage(this.file).subscribe({
             next: () => {
                 this.profileImageOverlay.nativeElement.focus();
-                this.setUserImage(this.userImageUri);
+                this.refreshUserImageHeaderBackground(this.userImageUri);
                 this.eventService.trigger(EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE);
-                this.userAvatar.createUserBackground();
                 this.closePreviewDialog();
                 this.showDeleteIconTrash = true;
             },
@@ -22281,10 +22286,10 @@ class SettingsComponent extends UnsubscribeOnDestroy {
     trashIconClick() {
         this.showDeleteDialog = true;
     }
-    setUserImage(imageUri) {
+    refreshUserImageHeaderBackground(imageUri) {
         if (imageUri) {
             const timestamp = new Date().getTime().toString();
-            this.renderer.setStyle(this.headerBg.nativeElement, 'background-image', `url(${imageUri + '#' + timestamp})`);
+            this.renderer.setStyle(this.headerBg.nativeElement, 'background-image', `url(${imageUri + '&t=' + timestamp})`);
         }
     }
     clearCache() {
@@ -22301,7 +22306,7 @@ 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 #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",
+                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\" id=\"presence\" (click)=\"setPresence(true)\" [ngClass]=\"{active: user.present}\"\n         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)\" (click)=\"$event.target.value=null\">\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              <eo-change-password-form (onFormSumbit)=\"simpleAcc.open = false\"></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}"]
             },] }
 ];
@@ -22321,6 +22326,7 @@ SettingsComponent.ctorParameters = () => [
     { type: ListSettingsService },
     { type: LocalStorageService },
     { type: TranslateService },
+    { type: ElementRef },
     { type: NotificationsService }
 ];
 SettingsComponent.propDecorators = {
@@ -22616,10 +22622,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.6", "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.8", "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.6'
+            clientVersion: '9.0.0-rc.8'
         };
         this.licenses = {
             'MIT': {