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

package/bundles/eo-sdk-client.umd.js

@@ -3383,46 +3383,40 @@
 
     var SimpleAccordionComponent = /** @class */ (function () {
         function SimpleAccordionComponent() {
+            this.role = 'tablist';
+            this._open = false;
             this.onOpen = new i0.EventEmitter();
-            this.index = null;
-            this.lastIndex = -1;
         }
-        Object.defineProperty(SimpleAccordionComponent.prototype, "selected", {
+        Object.defineProperty(SimpleAccordionComponent.prototype, "open", {
             get: function () {
-                return this._selected;
+                return this._open;
             },
-            set: function (val) {
-                this._selected = val;
+            set: function (o) {
+                this._open = o;
+                this.onOpen.emit(this.open);
             },
             enumerable: false,
             configurable: true
         });
-        SimpleAccordionComponent.prototype.onTabOpen = function (e) {
-            var index = e.index;
-            this.selected = true;
-            this.onOpen.emit(this.selected);
-        };
-        SimpleAccordionComponent.prototype.onTabClose = function (e) {
-            if (e === void 0) { e = false; }
-            this.index = this.lastIndex--;
-            this.selected = false;
-            this.onOpen.emit(this.selected);
+        SimpleAccordionComponent.prototype.onKeyDown = function (e) {
+            e.preventDefault();
+            this.open = !this.open;
         };
         return SimpleAccordionComponent;
     }());
     SimpleAccordionComponent.decorators = [
         { type: i0.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: i0.HostBinding, args: ['attr.role',] }],
         header: [{ type: i0.Input }],
-        styles: [{ type: i0.Input }],
-        headerClass: [{ type: i0.Input }],
-        selected: [{ type: i0.Input }],
-        onOpen: [{ type: i0.Output }]
+        onOpen: [{ type: i0.Output }],
+        open: [{ type: i0.HostBinding, args: ['class.open',] }, { type: i0.Input }],
+        onKeyDown: [{ type: i0.HostListener, args: ['keydown.enter', ['$event'],] }, { type: i0.HostListener, args: ['keydown.space', ['$event'],] }]
     };
 
     var AccordionModule = /** @class */ (function () {
@@ -3879,7 +3873,7 @@
             var isCopy = (action === i1.ClipboardAction.COPY);
             var isCut = (action === i1.ClipboardAction.CUT);
             var cutAction = (isCut && this.activeLocation && elements.length && elements[0].contextFolder ? this.activeLocation.id !== elements[0].contextFolder.id : true);
-            var baseCondition = this.clipboard && this.activeLocation && elements.length;
+            var baseCondition = this.clipboard && this.activeLocation && elements.length && !elements.some(function (element) { return 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
@@ -3937,7 +3931,7 @@
                 this.item = item;
                 this.storageInfos = null;
                 if (this.storageAccordion) {
-                    this.storageAccordion.onTabClose();
+                    this.storageAccordion.open = false;
                 }
             },
             enumerable: false,
@@ -4039,9 +4033,9 @@
     IndexdataSummaryComponent.decorators = [
         { type: i0.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: i0.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 = function () { return [
@@ -4061,21 +4055,26 @@
     };
 
     var UserAvatarComponent = /** @class */ (function () {
-        function UserAvatarComponent(userService) {
+        function UserAvatarComponent(userService, eventService) {
+            var _this = this;
             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();
-        }
-        UserAvatarComponent.prototype.createUserBackground = function () {
-            var _this = this;
             this.subscription = this.userService.user$
                 .subscribe(function (u) {
+                _this.userId = u.id;
                 _this.present = u.present;
-                var timestamp = new Date().getTime().toString();
-                _this.backgroundImage = "url(" + (_this.userService.getUserImageUri(u.id) + '#' + timestamp) + "), url(" + _this.defImg + ")";
+                _this.refreshUserImage();
+            });
+            this.eventService.on(i1.EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE).subscribe(function () {
+                _this.refreshUserImage();
             });
+        }
+        UserAvatarComponent.prototype.refreshUserImage = function () {
+            var timestamp = new Date().getTime().toString();
+            this.backgroundImage = "url(" + (this.userService.getUserImageUri(this.userId) + '&t=' + timestamp) + "), url(" + this.defImg + ")";
         };
         UserAvatarComponent.prototype.ngOnDestroy = function () {
             this.subscription.unsubscribe();
@@ -4090,7 +4089,8 @@
                 },] }
     ];
     UserAvatarComponent.ctorParameters = function () { return [
-        { type: i1.UserService }
+        { type: i1.UserService },
+        { type: i1.EventService }
     ]; };
     UserAvatarComponent.propDecorators = {
         backgroundImage: [{ type: i0.HostBinding, args: ['style.background-image',] }],
@@ -4102,10 +4102,15 @@
             this.iconClass = '';
             this.styleClass = '';
             this.active = false;
+            this.onToggle = new i0.EventEmitter();
         }
         OverlayComponent.prototype.onActiveChanged = function (event) {
             this.active = event;
         };
+        OverlayComponent.prototype.toggle = function (event) {
+            this.op.toggle(event);
+            this.onToggle.emit();
+        };
         OverlayComponent.prototype.close = function () {
             if (this.op) {
                 this.op.hide();
@@ -4116,7 +4121,7 @@
     OverlayComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -4127,7 +4132,8 @@
         iconClass: [{ type: i0.Input }],
         styleClass: [{ type: i0.Input }],
         active: [{ type: i0.Input }],
-        iconTitle: [{ type: i0.Input }]
+        iconTitle: [{ type: i0.Input }],
+        onToggle: [{ type: i0.Output }]
     };
 
     var ErrorMessageComponent = /** @class */ (function () {
@@ -4552,7 +4558,7 @@
 
     var AppBarComponent = /** @class */ (function (_super) {
         __extends(AppBarComponent, _super);
-        function AppBarComponent(userService, capabilityService, translate, inboxService, prepareService, clipboard, renderer, router, bpmService, eventService, config) {
+        function AppBarComponent(userService, capabilityService, translate, inboxService, prepareService, clipboard, renderer, router, bpmService, eventService, config, elemRef) {
             var _this = _super.call(this) || this;
             _this.userService = userService;
             _this.capabilityService = capabilityService;
@@ -4565,6 +4571,7 @@
             _this.bpmService = bpmService;
             _this.eventService = eventService;
             _this.config = config;
+            _this.elemRef = elemRef;
             _this.transparent = false;
             _this.sidebarShow = false;
             _this.pageVisible = true;
@@ -4626,6 +4633,12 @@
                 });
             });
         };
+        AppBarComponent.prototype.onToggleProfileOverlay = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.elemRef.nativeElement.querySelector('#settings').focus();
+            });
+        };
         AppBarComponent.prototype.setIconTitles = function () {
             this.iconTitles = {
                 search: this.translate.instant('eo.bar.button.search.tooltip'),
@@ -4680,7 +4693,6 @@
             document.addEventListener('visibilitychange', function () { return _this.pageVisible = !_this.pageVisible; });
         };
         AppBarComponent.prototype.ngOnInit = function () {
-            var _this = this;
             this.updateOnSchemaChange();
             this.setIconTitles();
             this.exeActions = this.bpmService.hasMainExecutableProcesses;
@@ -4690,18 +4702,13 @@
             //     this.exeActions = !!res.length;
             //   });
             this.initVisibilityChangeListener();
-            this.eventService.on(i1.EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE).subscribe(function () {
-                _this.avatarComponents.forEach(function (avatar) {
-                    avatar.createUserBackground();
-                });
-            });
         };
         return AppBarComponent;
     }(UnsubscribeOnDestroy));
     AppBarComponent.decorators = [
         { type: i0.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)}}"]
                 },] }
     ];
@@ -4716,7 +4723,8 @@
         { type: i2.Router },
         { type: i1.BpmService },
         { type: i1.EventService },
-        { type: i1.Config }
+        { type: i1.Config },
+        { type: i0.ElementRef }
     ]; };
     AppBarComponent.propDecorators = {
         transparent: [{ type: i0.Input }],
@@ -5495,6 +5503,18 @@
         AppSearchComponent.prototype.saveQuery = function () {
             var _this = this;
             // const queryParams: NavigationExtras = {queryParamsHandling : 'preserve'};
+            var queryHasDynamicList = false;
+            this.query.filters.forEach(function (filter, index) {
+                var formElementDynamicList = _this.idxSearch.type.elements.find(function (element) { return 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(function () { return _this.router.navigate(['/stored-queries'], { queryParams: { create: true } }); });
@@ -7313,7 +7333,7 @@
     DatetimeComponent.decorators = [
         { type: i0.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: forms.NG_VALUE_ACCESSOR,
@@ -7705,7 +7725,7 @@
         { type: i0.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 = {
@@ -7930,9 +7950,8 @@
                 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;
@@ -7985,7 +8004,7 @@
                             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 = function () { return [
@@ -8064,9 +8083,8 @@
                     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) {
@@ -8392,9 +8410,9 @@
     ReferenceFinderComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -8865,7 +8883,7 @@
                             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 = function () { return [
@@ -9132,7 +9150,7 @@
                 return this._autocomplete;
             },
             set: function (autoCom) {
-                this._autocomplete = this.envService.isCloud() ? false : autoCom;
+                this._autocomplete = autoCom;
             },
             enumerable: false,
             configurable: true
@@ -9352,7 +9370,7 @@
                             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 = function () { return [
@@ -13077,7 +13095,7 @@
     DatetimeFilterComponent.decorators = [
         { type: i0.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%}"]
                 },] }
     ];
@@ -13146,7 +13164,7 @@
         { type: i0.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 = function () { return [
@@ -15409,11 +15427,6 @@
             _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 = [
                 {
@@ -15432,7 +15445,7 @@
                     "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;
@@ -15440,19 +15453,18 @@
             // 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(function (evt) {
                 var _a, _b;
-                var _e = evt.data, err = _e.err, win = _e.win, parameters = _e.parameters;
+                var _d = evt.data, err = _d.err, win = _d.win, parameters = _d.parameters;
                 var uri = _this.pluginsService.applyFunction((_b = (_a = _this.customConfig) === null || _a === void 0 ? void 0 : _a.find(function (v) { return v.error; })) === null || _b === void 0 ? void 0 : _b.viewer, 'api, err, win, parameters', [
                     _this.pluginsService.api,
                     err,
                     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);
@@ -15505,14 +15517,10 @@
         });
         Object.defineProperty(MediaComponent.prototype, "previewFile", {
             set: function (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 = '';
@@ -15543,7 +15551,7 @@
                         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(function (a) { return _this.setAttachments = a; });
                     }
@@ -15555,13 +15563,12 @@
             enumerable: false,
             configurable: true
         });
-        MediaComponent.prototype.selectAttachment = function (attachment, force) {
-            var 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);
+        MediaComponent.prototype.selectAttachment = function (attachment) {
+            var previewUri = attachment && this.getViewer({ uriPdf: attachment.previewUri }).previewUri;
+            this.loadDocument(previewUri || this.previewUri, true);
         };
         MediaComponent.prototype.toogleViewer = function () {
             this.open = !this.disabled && !!this.previewUri;
-            this.undockDisabled = this.undockDisabled ? true : this.previewUri === '';
             if (this.undockDisabled) {
                 this.isUndocked = false;
             }
@@ -15572,19 +15579,11 @@
         MediaComponent.prototype.refresh = function () {
             this.loadDocument(this.previewUri, true);
         };
-        MediaComponent.prototype.openPdfViewer = function (uri) {
-            var _this = this;
-            this.pdfjs.contentWindow.PDFViewerApplication.open(uri).then(function () { return (_this.hasError = false); }).catch(function (err) {
-                _this.hasError = !_this.isOctetStream;
-                _this.isNotSupported = _this.isOctetStream;
-            });
-            // this.search();
-        };
         MediaComponent.prototype.getViewer = function (file) {
             var _a, _b;
             var isVideo = !!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/^audio|^video/));
             var defaultViewer = isVideo ? MediaComponent.VIDEO_VIEWER : MediaComponent.PDF_VIEWER;
-            var fileExtension = ((_b = file.path) === null || _b === void 0 ? void 0 : _b.includes('.')) ? file.path.split('.').pop() : '';
+            var fileExtension = file.fileExtension || (((_b = file.path) === null || _b === void 0 ? void 0 : _b.includes('.')) ? file.path.split('.').pop() : '');
             var mimeType = file.mimetype;
             var config = this.customConfig.find(function (c) {
                 var matchMT = !c.mimeType || (typeof c.mimeType === 'string' ? [c.mimeType] : c.mimeType).includes(mimeType === null || mimeType === void 0 ? void 0 : mimeType.toLowerCase());
@@ -15666,48 +15665,19 @@
         MediaComponent.prototype.loadDocument = function (uri, force) {
             var _this = this;
             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);
                 var onload = function () { 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);
-                var onload = function () { 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', function () {
-                        _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', function (e) { return window.document.dispatchEvent(new DragEvent('dragenter', e)); });
-                        _this.pdfjs.contentWindow.PDFViewerApplication.appConfig.viewerContainer.addEventListener('drop', function (e) { return 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);
+                var onload = function () { 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);
             }
         };
         /**
@@ -15717,28 +15687,23 @@
          */
         MediaComponent.prototype.searchPDF = function (term, win) {
             if (term === void 0) { term = ''; }
-            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(function () { return win.PDFViewerApplication.findBar.dispatchEvent(); });
             }
         };
         MediaComponent.prototype.preventDropEvent = function (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', function (e) { return 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', function (e) { return 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', function (e) {
+                (_c = win === null || win === void 0 ? void 0 : win.document) === null || _c === void 0 ? void 0 : _c.addEventListener('dragenter', function (e) {
                     window.document.dispatchEvent(new DragEvent('dragenter', e));
                     setTimeout(function () { return window.document.dispatchEvent(new DragEvent('dragleave', e)); }, 10);
                 });
@@ -15748,13 +15713,14 @@
             var _this = this;
             if (iframe === void 0) { iframe = this.iframe; }
             if (iframe) {
+                this.loading = true;
                 iframe._init || rxjs.fromEvent(iframe, 'load')
                     .pipe(operators.takeUntil(this.componentDestroyed$))
                     .subscribe(function () {
                     var win = _this.setApi(iframe);
                     onload && onload();
+                    _this.loading = false;
                     setTimeout(function () {
-                        // this.loading = false;
                         _this.searchPDF(_this.searchTerm, win);
                         _this.preventDropEvent(win);
                     }, 100);
@@ -15763,9 +15729,18 @@
             }
         };
         MediaComponent.prototype.setApi = function (iframe) {
+            var _this = this;
+            var _a;
             // set api to iframe window
             var 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 = function (parameters) {
+                    var uri = parameters.path.replace(location.origin, '');
+                    var viewer = _this.getViewer({ uri: uri, mimetype: parameters.mimeType, fileExtension: parameters.fileExtension, uriPdf: '', mimegroup: '', size: 1 });
+                    return { uri: viewer.previewUri || parameters.path };
+                };
+            }
             return win;
         };
         MediaComponent.prototype.ngAfterViewInit = function () {
@@ -15780,7 +15755,7 @@
     MediaComponent.decorators = [
         { type: i0.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)}"]
                 },] }
@@ -15800,9 +15775,7 @@
         enableCloseBtn: [{ type: i0.Input }],
         useVersion: [{ type: i0.Input }],
         open: [{ type: i0.HostBinding, args: ['class.open',] }],
-        codesystem: [{ type: i0.ViewChild, args: ['codesystem',] }],
         iframe: [{ type: i0.ViewChild, args: ['iframe', { static: true },] }],
-        iframeMedia: [{ type: i0.ViewChild, args: ['iframeMedia', { static: true },] }],
         setAttachments: [{ type: i0.Input, args: ['attachments',] }],
         setSearchTerm: [{ type: i0.Input, args: ['searchTerm',] }],
         disabled: [{ type: i0.Input }],
@@ -16041,7 +16014,7 @@
         { type: i0.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 = function () { return [
@@ -16290,7 +16263,7 @@
         }
         CopyActionComponent.prototype.isExecutable = function (item) {
             var isAllowedType = this.actionService.isAllowedType([item], ['sysemail']);
-            return rxjs.of(this.isAllowedState() && isAllowedType && this.capabilityService.getCapabilities().intray && !item.isFolder);
+            return rxjs.of(this.isAllowedState() && isAllowedType && this.capabilityService.getCapabilities().intray);
         };
         ;
         CopyActionComponent.prototype.run = function (selection) {
@@ -17812,7 +17785,8 @@
         }
         ShareObjectComponent.prototype.ngOnInit = function () {
             var orgaValue = [];
-            this.includeChildrenField.setValue(true);
+            var 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');
             }
@@ -18383,13 +18357,14 @@
     var TrapFocusDirective = /** @class */ (function () {
         function TrapFocusDirective(el) {
             this.el = el;
+            this.focusableSelectors = 'a[href], button, textarea, input[type="text"],' +
+                'input[type="radio"], input[type="checkbox"], select, [focusable]';
         }
         TrapFocusDirective.prototype.ngAfterViewInit = function () {
             this.trapFocus(this.el.nativeElement);
         };
         TrapFocusDirective.prototype.trapFocus = function (element) {
-            var focusableElements = element.querySelectorAll('a[href], button, textarea, input[type="text"],' +
-                'input[type="radio"], input[type="checkbox"], select, [focusable]');
+            var focusableElements = element.querySelectorAll(this.focusableSelectors);
             focusableElements = Array.from(focusableElements)
                 .filter(function (el) { return !el.disabled && !el.classList.contains('disabled'); });
             var firstFocusableElement = focusableElements[0];
@@ -18412,6 +18387,20 @@
                 }
             }));
         };
+        TrapFocusDirective.prototype.isArrowUpOrDownPressed = function (event) {
+            var key = event.key;
+            if (key === 'ArrowUp' || key === 'ArrowDown') {
+                event.preventDefault();
+                var focusableElements = this.el.nativeElement.parentElement.querySelectorAll(this.focusableSelectors);
+                var 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();
+                }
+            }
+        };
         return TrapFocusDirective;
     }());
     TrapFocusDirective.decorators = [
@@ -18422,6 +18411,9 @@
     TrapFocusDirective.ctorParameters = function () { return [
         { type: i0.ElementRef }
     ]; };
+    TrapFocusDirective.propDecorators = {
+        isArrowUpOrDownPressed: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
+    };
 
     /**
      * Module holding the base components of the application shell like application bar, side, search etc.
@@ -18584,7 +18576,7 @@
         { type: i0.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 = function () { return [
@@ -18681,6 +18673,7 @@
             _this.settings = {};
             _this.querySubtitle = '';
             _this.savedSearchClicked = false;
+            _this.showWarnExportCSVThresholdDialog = false;
             _this.title = '';
             _this.emptyMessage = '';
             _this.selectFirst = true;
@@ -18695,6 +18688,8 @@
             _this.onResult = new i0.EventEmitter();
             _this.onQueryInvalid = new i0.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) || [];
             return _this;
         }
@@ -18899,11 +18894,20 @@
         ResultListComponent.prototype.executeSuggestSearch = function () {
             // todo: implement
         };
-        ResultListComponent.prototype.exportCSV = function () {
+        ResultListComponent.prototype.resultHasReferences = function () {
+            return this._result.fields.elements.some(function (element) { return element.type === 'ORGANISATION' || element.type === 'REFERENCE'; });
+        };
+        ResultListComponent.prototype.exportCSV = function (ignoreThreshold) {
             var _this = this;
+            if (ignoreThreshold === void 0) { 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(function () {
+            this.showWarnExportCSVThresholdDialog = false;
+            this.searchService.downloadCsvFromQuery(this.query.getQueryJson(this.resolveReferencesCsv)).subscribe(function () {
                 _this.csvLoadingSpinnerVisibility = false;
             });
         };
@@ -18933,8 +18937,8 @@
     ResultListComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -18951,6 +18955,7 @@
     ]; };
     ResultListComponent.propDecorators = {
         grid: [{ type: i0.ViewChild, args: ['eoGrid',] }],
+        list: [{ type: i0.ViewChild, args: ['eoList',] }],
         title: [{ type: i0.Input }],
         configType: [{ type: i0.Input }],
         configContext: [{ type: i0.Input }],
@@ -20325,7 +20330,7 @@
     ObjectDetailsComponent.decorators = [
         { type: i0.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}"]
                 },] }
@@ -24181,7 +24186,7 @@
     DashboardComponent.decorators = [
         { type: i0.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
                     ],
@@ -24216,7 +24221,7 @@
 
     var SettingsComponent = /** @class */ (function (_super) {
         __extends(SettingsComponent, _super);
-        function SettingsComponent(renderer, userService, config, notify, systemService, eventService, capabilitiesService, envService, titleService, agentService, fb, cacheService, listSettingsService, storageService, translate, notification) {
+        function SettingsComponent(renderer, userService, config, notify, systemService, eventService, capabilitiesService, envService, titleService, agentService, fb, cacheService, listSettingsService, storageService, translate, elemRef, notification) {
             var _this = _super.call(this) || this;
             _this.renderer = renderer;
             _this.userService = userService;
@@ -24233,6 +24238,7 @@
             _this.listSettingsService = listSettingsService;
             _this.storageService = storageService;
             _this.translate = translate;
+            _this.elemRef = elemRef;
             _this.notification = notification;
             _this.LockSettings = exports.LockSettings;
             _this.showAgentConfig = true;
@@ -24354,10 +24360,11 @@
         };
         SettingsComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
+            this.elemRef.nativeElement.querySelector('#presence').focus();
             this.user$.subscribe(function (user) {
                 _this.userId = user.id;
                 _this.userImageUri = _this.userService.getUserImageUri(_this.userId);
-                _this.setUserImage(_this.userImageUri);
+                _this.refreshUserImageHeaderBackground(_this.userImageUri);
                 _this.showDeleteIconTrash = !!user.imageUri;
             });
         };
@@ -24376,9 +24383,8 @@
             this.userService
                 .delUserImage(uploadURI).subscribe({
                 next: function () {
-                    _this.setUserImage(_this.userImageUri);
+                    _this.refreshUserImageHeaderBackground(_this.userImageUri);
                     _this.eventService.trigger(i1.EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE);
-                    _this.userAvatar.createUserBackground();
                     _this.showDeleteDialog = false;
                     _this.showDeleteIconTrash = false;
                 },
@@ -24422,9 +24428,8 @@
                 .setUserImage(this.file).subscribe({
                 next: function () {
                     _this.profileImageOverlay.nativeElement.focus();
-                    _this.setUserImage(_this.userImageUri);
+                    _this.refreshUserImageHeaderBackground(_this.userImageUri);
                     _this.eventService.trigger(i1.EnaioEvent.SYSTEM_STATUS_IMAGE_CHANGE);
-                    _this.userAvatar.createUserBackground();
                     _this.closePreviewDialog();
                     _this.showDeleteIconTrash = true;
                 },
@@ -24449,10 +24454,10 @@
         SettingsComponent.prototype.trashIconClick = function () {
             this.showDeleteDialog = true;
         };
-        SettingsComponent.prototype.setUserImage = function (imageUri) {
+        SettingsComponent.prototype.refreshUserImageHeaderBackground = function (imageUri) {
             if (imageUri) {
                 var 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) + ")");
             }
         };
         SettingsComponent.prototype.clearCache = function () {
@@ -24471,7 +24476,7 @@
     SettingsComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -24491,6 +24496,7 @@
         { type: ListSettingsService },
         { type: i1.LocalStorageService },
         { type: i1.TranslateService },
+        { type: i0.ElementRef },
         { type: i1.NotificationsService }
     ]; };
     SettingsComponent.propDecorators = {
@@ -24788,10 +24794,10 @@
             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': {