@eo-sdk/client 8.14.0 → 8.15.0-rc.1

package/fesm2015/eo-sdk-client.js

@@ -1,8 +1,8 @@
-import { Injectable, ApplicationRef, NgZone, Pipe, NgModule, EventEmitter, Injector, ɵɵdefineInjectable, ɵɵinject, ErrorHandler, Optional, SkipSelf, Component, Input, Output, ViewEncapsulation, ElementRef, Renderer2, Directive, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, HostBinding, forwardRef, ViewChildren, ViewContainerRef, ContentChildren, ANALYZE_FOR_ENTRY_COMPONENTS, InjectionToken, Inject, ComponentFactoryResolver, ContentChild, QueryList } from '@angular/core';
+import { Injectable, ApplicationRef, NgZone, Pipe, NgModule, EventEmitter, Injector, ɵɵdefineInjectable, ɵɵinject, ErrorHandler, Optional, SkipSelf, Component, Input, Output, ViewEncapsulation, ElementRef, Renderer2, Directive, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, HostBinding, ViewContainerRef, forwardRef, ViewChildren, ContentChildren, ANALYZE_FOR_ENTRY_COMPONENTS, InjectionToken, Inject, ComponentFactoryResolver, ContentChild, QueryList } from '@angular/core';
 import { DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, getLocaleDateTimeFormat, FormatWidth, getLocaleTimeFormat, getLocaleDateFormat, CommonModule, Location, PlatformLocation } from '@angular/common';
 import { HttpClient, HttpResponse, HttpErrorResponse, HttpClientModule, HTTP_INTERCEPTORS, HttpHeaders } from '@angular/common/http';
 import { ReplaySubject, BehaviorSubject, from, forkJoin, of, Subject, fromEvent, AsyncSubject, Observable } from 'rxjs';
-import { groupBy, mergeMap, reduce, tap, catchError, map, debounceTime, takeUntil, filter, switchMap, pluck, finalize, combineLatest, throttleTime, take, takeWhile, withLatestFrom, first } from 'rxjs/operators';
+import { groupBy, mergeMap, reduce, tap, catchError, map, debounceTime, takeUntil, filter, switchMap, pluck, finalize, combineLatest, takeWhile, throttleTime, take, withLatestFrom, first } from 'rxjs/operators';
 import { SearchQuery, SearchState, EnaioEvent, Utils, SearchService, EventService, SystemService, Logger, BackendService, UserService, TranslateService, NotificationsService, AppCacheService, UploadTarget, UploadRegistryService, DmsObject, ClipboardService, DmsService, EnvironmentEnaio, SearchFilter, RangeValue, AuthService, EoError, CapabilitiesService, Config, ClipboardAction, PrepareService, QueryScope, EoSharedModule, InboxService, BpmService, StoredQuery, StoredQueriesService, EnvironmentService, LocalStorageService, FieldDefinition, SortOption, InboxItem, Process, PreparedItem, WorkItem, SubscriptionMode, TranslateModule, UploadFileItem, SearchResult } from '@eo-sdk/core';
 import { Router, NavigationStart, RouterModule, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { NumberFilter, Utils as Utils$1, SimpleFilter, NumberSequence, _ as _$1, RowNode, Autowired, PostConstruct, Bean, ModuleNames, DateFilter } from '@ag-grid-community/core';
@@ -10,7 +10,9 @@ import { Title, DomSanitizer } from '@angular/platform-browser';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormBuilder, FormGroup, FormControl, FormsModule, ReactiveFormsModule, Validators, NgForm } from '@angular/forms';
 import { AccordionModule as AccordionModule$1 } from 'primeng/accordion';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Dialog, OverlayPanelModule, DialogModule, InputMask, AutoComplete, InputTextModule, InputMaskModule, AutoCompleteModule, CheckboxModule, TriStateCheckboxModule, InputTextareaModule, ChipsModule, DropdownModule, SharedModule, TabPanel, TabViewModule, FieldsetModule, CalendarModule, TabView, TabViewNav, DragDropModule as DragDropModule$1 } from 'primeng/primeng';
+import { OverlayPanelModule, DialogModule, InputMask, AutoComplete, InputTextModule, InputMaskModule, AutoCompleteModule, CheckboxModule, TriStateCheckboxModule, InputTextareaModule, ChipsModule, DropdownModule, SharedModule, TabPanel, TabViewModule, FieldsetModule, CalendarModule, TabView, TabViewNav, DragDropModule as DragDropModule$1 } from 'primeng/primeng';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import * as moment_ from 'moment';
 import 'moment/min/locales';
 import * as _ from 'lodash';
@@ -3560,23 +3562,26 @@ ErrorMessageComponent.propDecorators = {
 };
 
 class EoDialogComponent extends UnsubscribeOnDestroy {
-    constructor(eventService, pendingChanges, renderer) {
+    constructor(eventService, pendingChanges, renderer, overlay, viewContainerRef) {
         super();
         this.eventService = eventService;
         this.pendingChanges = pendingChanges;
         this.renderer = renderer;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
         this._visible = false;
         this.id = Utils.uuid();
         this.parentId = '';
         this.styleClass = '';
         // array of pendingTask IDs to be checked before the dialog closes
         this.dirtyCheck = [];
-        this.appendTo = 'body';
         this.minWidth = 200;
         this.minHeight = 'auto';
-        this.resizable = false;
-        this.fullscreen = false;
         this.focusOnShow = true;
+        this.align = 'center';
+        this.isFormTable = false;
+        this.showPreview = false;
+        this.onTogglePreview = new EventEmitter();
         this.visibleChange = new EventEmitter();
         this.hide = new EventEmitter();
         this.show = new EventEmitter();
@@ -3611,40 +3616,57 @@ class EoDialogComponent extends UnsubscribeOnDestroy {
             this.closeDialog();
         }
     }
+    open() {
+        // We create the overlay
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy: this.getPositionStrategy(),
+            minHeight: this.minHeight,
+            minWidth: this.minWidth
+        });
+        //Then we create a portal to render a component
+        const portal = new TemplatePortal(this.dialogContent, this.viewContainerRef);
+        // We add a custom CSS class to our overlay
+        // this.overlayRef.addPanelClass("example-overlay");
+        this.overlayRef.attach(portal);
+        this.overlayRef.backdropClick().subscribe((_) => {
+            this.visible = false;
+        });
+    }
+    getPositionStrategy() {
+        let positionStrategy;
+        if (this.align === 'center') {
+            positionStrategy = this.overlay
+                .position()
+                .global()
+                .centerHorizontally()
+                .centerVertically();
+        }
+        else if (this.align === 'start') {
+            positionStrategy = this.overlay
+                .position()
+                .global()
+                .left()
+                .top();
+        }
+        return positionStrategy;
+    }
     toggleActive(active, trigger = true) {
         this.active = !!active;
+        if (active && this.ready && !this.overlayRef) {
+            this.open();
+        }
+        if (this.overlayRef && !active) {
+            this.overlayRef.dispose();
+            this.overlayRef = undefined;
+        }
         if (trigger) {
             this.eventService.trigger(EnaioEvent.EO_DIALOG_STACK_CHANGED, {
                 id: this.id,
                 active: this.active
             });
         }
-        if (this.dialog) {
-            this.renderer[this.active || !this.appendTo ? 'addClass' : 'removeClass'](this.dialog.containerViewChild.nativeElement, 'active');
-            this.renderer[this.fullscreen ? 'addClass' : 'removeClass'](this.dialog.containerViewChild.nativeElement, 'fullscreen');
-            if (this.active) {
-                if (this.minHeight !== 'auto') {
-                    setTimeout(() => {
-                        this.minHeight = 'auto';
-                        if (!!this.dialog) {
-                            this.renderer.setStyle(this.dialog.contentViewChild.nativeElement.parentElement, 'minHeight', 'auto');
-                            this.renderer.setStyle(this.dialog.contentViewChild.nativeElement.parentElement, 'maxWidth', '50%');
-                        }
-                    }, 200);
-                }
-                this.dialog.moveOnTop();
-                let focusableElement = this.dialog.contentViewChild.nativeElement.querySelector('[tabindex]');
-                if (focusableElement) {
-                    focusableElement.focus();
-                }
-            }
-            else {
-                this._lastFocused.focus();
-            }
-        }
-        else if (this.active && this.visible) {
-            setTimeout(() => this.toggleActive(true, false), 0);
-        }
     }
     closeDialog() {
         if (this.dirtyCheck) {
@@ -3656,40 +3678,55 @@ class EoDialogComponent extends UnsubscribeOnDestroy {
             this.visible = false;
         }
     }
+    togglePreview() {
+        this.showPreview = !this.showPreview;
+        this.onTogglePreview.emit();
+    }
     ngOnDestroy() {
         if (this.active) {
             this.toggleActive(false);
         }
     }
+    ngAfterViewInit() {
+        // this.open();
+        this.ready = true;
+        if (this._visible) {
+            this.open();
+        }
+    }
 }
 EoDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-dialog',
-                template: "<p-dialog *ngIf=\"visible\" modal=\"modal\" [responsive]=\"true\" [closeOnEscape]=\"false\" [dismissableMask]=\"true\" [closable]=\"false\" [resizable]=\"resizable\"\r\n          [showHeader]=\"false\" [header]=\"title\" [(visible)]=\"visible\" [appendTo]=\"appendTo\" [ngClass]=\"styleClass || ''\" [autoAlign]=\"true\"\r\n          [focusOnShow]=\"focusOnShow\" [minWidth]=\"minWidth\" [minHeight]=\"minHeight\" eoRtlAware=\"dir\" styleClass=\"active\" [contentStyle]=\"{'max-height':'100%'}\">\r\n\r\n  <div class=\"eo-dialog\" [ngClass]=\"styleClass || ''\" eoRtlAware=\"dir\">\r\n    <header class=\"eo-dialog-header\" [ngClass]=\"styleClass ? styleClass + '--header ' : ''\">\r\n      <h5 class=\"headline\">{{title}}</h5>\r\n      <h6 *ngIf=\"subtitle\" class=\"subtitle\">{{subtitle}}</h6>\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"closeDialog()\" class=\"button white eo-dialog-close\"></eo-icon>\r\n    </header>\r\n    <div class=\"eo-dialog-content\" [ngClass]=\"styleClass ? styleClass + '--content ' : ''\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</p-dialog>\r\n",
+                template: "<ng-template #dialogContent>\r\n  <div class=\"eo-dialog\" [ngClass]=\"styleClass || ''\" eoRtlAware=\"dir\">\r\n    <header class=\"eo-dialog-header\" [ngClass]=\"styleClass ? styleClass + '--header ' : ''\">\r\n      <h5 class=\"headline\">{{title}}</h5>\r\n      <h6 *ngIf=\"subtitle\" class=\"subtitle\">{{subtitle}}</h6>\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"closeDialog()\" class=\"button white eo-dialog-close\"></eo-icon>\r\n      <ng-container *ngIf=\"isFormTable\">\r\n        <eo-icon *ngIf=\"showPreview\" [iconSrc]=\"'assets/_default/svg/ic_preview_close.svg'\"\r\n                 [iconTitle]=\"'eo.form.table.dialog.preview.hide' | translate\" (click)=\"togglePreview()\" class=\"button white eo-dialog-preview-toggle\"></eo-icon>\r\n        <eo-icon *ngIf=\"!showPreview\" [iconSrc]=\"'assets/_default/svg/ic_preview_show.svg'\"\r\n                 [iconTitle]=\"'eo.form.table.dialog.preview.show' | translate\" (click)=\"togglePreview()\" class=\"button white eo-dialog-preview-toggle\"></eo-icon>\r\n      </ng-container>\r\n    </header>\r\n    <div class=\"eo-dialog-content\" [ngClass]=\"styleClass ? styleClass + '--content ' : ''\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: ["body>.ui-dialog.fullscreen{height:95%;width:95%}body>.ui-dialog.fullscreen .ui-dialog-content{height:100%}body>.ui-dialog:not(.ui-helper-hidden),p-dialog .ui-dialog:not(.ui-helper-hidden){-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;transition:all var(--app-default-transition-duration) ease-in-out}body>.ui-dialog:not(.ui-helper-hidden):not(.active),p-dialog .ui-dialog:not(.ui-helper-hidden):not(.active){transform:perspective(600px) rotateY(10deg) translate3d(-100px,-100px,-100px)}body>.ui-dialog:not(.ui-helper-hidden):not(.active) .eo-dialog-header,p-dialog .ui-dialog:not(.ui-helper-hidden):not(.active) .eo-dialog-header{background-color:var(--color-primary)}body>.ui-dialog.ui-widget .ui-dialog-content,p-dialog .ui-dialog.ui-widget .ui-dialog-content{overflow:inherit;padding:0}.eo-dialog{-webkit-animation:none;animation:none;display:flex;flex:1;flex-direction:column;max-height:100%;max-width:100%;min-height:0;min-width:0}.eo-dialog-close{position:absolute;right:5px;top:5px;z-index:2}.eo-dialog-header{background-color:var(--color-accent);color:var(--color-white);flex:0 0 auto;font-size:var(--font-headline);font-weight:var(--font-weight-light);padding:var(--app-pane-padding) calc(var(--app-pane-padding)*2.5) calc(var(--app-pane-padding)*2) var(--app-pane-padding)}.eo-dialog-header .headline{font-size:24px;font-weight:400;margin:0 25px 0 0}.eo-dialog-header .subtitle{font-size:15px;font-weight:400;margin:0}.eo-dialog-content{display:flex;flex:1;flex-direction:column;height:100%;max-height:520px;min-height:0;min-width:0;overflow:auto;position:relative}.eo-dialog-content>eo-tree{margin:var(--app-pane-padding)}.eo-dialog-content .empty{align-items:center;color:var(--text-color-caption);display:flex;flex:1;flex-direction:column;justify-content:center;min-height:0;min-width:0;padding:var(--app-pane-padding)}.eo-dialog-content .action-buttons{justify-content:flex-end;padding-top:32px}.eo-dialog-content button:not(:last-child){margin-right:5px}.object-form-table-dialog{background-color:var(--panel-background-grey);height:100%;width:100%}.object-form-table-dialog .body{height:100%;width:100%}.object-form-table-dialog .edit-body{display:flex;height:100%}.object-form-table-dialog .table-body{background-color:var(--panel-background-grey);display:flex;height:100%;width:100%}.object-form-table-dialog eo-split{padding:var(--app-pane-padding)}.object-form-table-dialog eo-split-area{box-shadow:0 2px 5px 0 rgba(0,0,0,.2)}.object-form-table-dialog eo-row-edit{background-color:var(--color-white);display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.object-form-table-dialog eo-row-edit .row-edit{display:flex;flex-direction:column;height:100%}.object-form-table-dialog eo-row-edit .row-edit .edit-header{display:flex;justify-content:space-between}.object-form-table-dialog eo-row-edit .row-edit .edit-header .new-indicator{color:var(--text-color-caption);font-size:var(--font-title);margin:8px 16px 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.object-form-table-dialog eo-row-edit .row-edit .edit-header .cancel-icon{color:var(--text-color-caption);margin:8px 8px 0}.object-form-table-dialog eo-row-edit .row-edit .edit-header .cancel-icon:hover{background:rgba(var(--color-black-rgb),.1)}.object-form-table-dialog eo-row-edit .row-edit .form{height:100%;overflow:auto}.object-form-table-dialog eo-row-edit .row-edit .actions{align-items:center;border-top:1px solid var(--panel-header-border-bottom-color);display:flex;flex:0;flex-direction:row;justify-content:flex-end;min-height:0;min-height:5em;min-width:0;padding-right:var(--app-pane-padding)}.object-form-table-dialog eo-row-edit .row-edit .actions button{height:3em;margin:0 calc(var(--app-pane-padding)/8);padding:0 calc(var(--app-pane-padding)/2)}.object-form-table-dialog eo-row-edit .row-edit .actions eo-checkbox{margin:0 calc(var(--app-pane-padding)/2)}.object-form-table-dialog eo-row-edit .row-edit .actions .add-label{color:var(--text-color-caption);font-size:var(--font-body);margin-right:var(--app-pane-padding)}.object-form-table-dialog .object-form-table{background-color:#fff;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;height:100%;width:100%}.object-form-table-dialog .object-form-table .grid-body{height:100%;position:relative;width:100%}.object-form-table-dialog .object-form-table .grid-body .ag-theme-balham .ag-header{background-color:unset!important}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular{background-color:transparent;height:100%;width:100%}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .copy-cell,.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .new-row{-webkit-animation-duration:4s;-webkit-animation-name:new-row;animation-duration:4s;animation-name:new-row}@-webkit-keyframes new-row{0%{background-color:var(--color-accent)}to{background-color:none}}@keyframes new-row{0%{background-color:var(--color-accent)}to{background-color:none}}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell{align-items:center;display:flex;font-size:var(--font-caption);line-height:var(--oft-row-height);padding:0 calc(var(--app-pane-padding)/4)}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.ag-cell-focus{background-color:var(--list-item-hover-background);border-color:transparent!important;outline:0!important}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell svg{pointer-events:none}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.col-boolean,.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.res-ico{justify-content:center}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.col-number{justify-content:flex-end}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell .action-icon{cursor:pointer;display:flex}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell .action-icon svg{fill:var(--text-color-caption)}.object-form-table-dialog .label{align-items:center;border-bottom:0;display:flex;flex-flow:row nowrap;padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/4)}.object-form-table-dialog .label span{display:block;flex:1 1 auto}.object-form-table-dialog .label eo-icon.stf{color:var(--text-color-caption);cursor:pointer;height:20px;margin:calc(var(--app-pane-padding)/4);width:20px}.object-form-table-dialog .label eo-icon.stf.add-row{background-color:var(--color-accent);border-radius:2px;color:#fff;height:24px;width:24px}.object-form-table-dialog .label button.add{border-radius:2px;padding:calc(var(--app-pane-padding)/2)}.object-form-table-dialog .label button.export{border:1px solid #000;border-radius:2px;color:#000;font-size:var(--font-hint);margin:0 calc(var(--app-pane-padding)/4);padding:calc(var(--app-pane-padding)/8) calc(var(--app-pane-padding)/4)}.object-form-table-dialog .eo-dialog-content{height:100%;max-height:none;overflow:hidden}.object-form-table-dialog .table-area{overflow:unset!important}"]
+                styles: [".eo-dialog{-webkit-animation:none;animation:none;background-color:var(--panel-background);display:flex;flex:1;flex-direction:column;max-height:100%;max-width:100%;min-height:0;min-width:0}.eo-dialog-close{position:absolute;right:5px;top:5px;z-index:2}.eo-dialog-preview-toggle{position:absolute;right:5px;top:50px;z-index:2}.eo-dialog-header{background-color:var(--color-accent);color:var(--color-white);flex:0 0 auto;font-size:var(--font-headline);font-weight:var(--font-weight-light);padding:var(--app-pane-padding) calc(var(--app-pane-padding)*2.5) calc(var(--app-pane-padding)*2) var(--app-pane-padding)}.eo-dialog-header .headline{font-size:24px;font-weight:400;margin:0 25px 0 0}.eo-dialog-header .subtitle{font-size:15px;font-weight:400;margin:0}.eo-dialog-content{display:flex;flex:1;flex-direction:column;height:100%;max-height:520px;min-height:0;min-width:0;overflow:auto;position:relative}.eo-dialog-content>eo-tree{margin:var(--app-pane-padding)}.eo-dialog-content .empty{align-items:center;color:var(--text-color-caption);display:flex;flex:1;flex-direction:column;justify-content:center;min-height:0;min-width:0;padding:var(--app-pane-padding)}.eo-dialog-content .action-buttons{justify-content:flex-end;padding-top:32px}.eo-dialog-content button:not(:last-child){margin-right:5px}.object-form-table-dialog{background-color:var(--panel-background-grey);height:95vh;width:100%}.object-form-table-dialog .body{height:80vh;width:100%}.object-form-table-dialog .edit-body{display:flex;height:100%}.object-form-table-dialog .table-body{background-color:var(--panel-background-grey);display:flex;height:100%;width:100%}.object-form-table-dialog eo-split{padding:var(--app-pane-padding);width:auto!important}.object-form-table-dialog eo-split-area{box-shadow:0 2px 5px 0 rgba(0,0,0,.2)}.object-form-table-dialog eo-row-edit{background-color:var(--color-white);display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.object-form-table-dialog eo-row-edit .row-edit{display:flex;flex-direction:column;height:100%}.object-form-table-dialog eo-row-edit .row-edit .edit-header{display:flex;justify-content:space-between}.object-form-table-dialog eo-row-edit .row-edit .edit-header .new-indicator{color:var(--text-color-caption);font-size:var(--font-title);margin:8px 16px 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.object-form-table-dialog eo-row-edit .row-edit .edit-header .cancel-icon{color:var(--text-color-caption);margin:8px 8px 0}.object-form-table-dialog eo-row-edit .row-edit .edit-header .cancel-icon:hover{background:rgba(var(--color-black-rgb),.1)}.object-form-table-dialog eo-row-edit .row-edit .form{height:100%;overflow:auto}.object-form-table-dialog eo-row-edit .row-edit .actions{align-items:center;border-top:1px solid var(--panel-header-border-bottom-color);display:flex;flex:0;flex-direction:row;justify-content:flex-end;min-height:0;min-height:5em;min-width:0;padding-right:var(--app-pane-padding)}.object-form-table-dialog eo-row-edit .row-edit .actions button{height:3em;margin:0 calc(var(--app-pane-padding)/8);padding:0 calc(var(--app-pane-padding)/2)}.object-form-table-dialog eo-row-edit .row-edit .actions eo-checkbox{margin:0 calc(var(--app-pane-padding)/2)}.object-form-table-dialog eo-row-edit .row-edit .actions .add-label{color:var(--text-color-caption);font-size:var(--font-body);margin-right:var(--app-pane-padding)}.object-form-table-dialog .object-form-table{background-color:#fff;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;height:100%;width:100%}.object-form-table-dialog .object-form-table .grid-body{height:100%;position:relative;width:100%}.object-form-table-dialog .object-form-table .grid-body .ag-theme-balham .ag-header{background-color:unset!important}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular{background-color:transparent;height:100%;width:100%}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .copy-cell,.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .new-row{-webkit-animation-duration:4s;-webkit-animation-name:new-row;animation-duration:4s;animation-name:new-row}@-webkit-keyframes new-row{0%{background-color:var(--color-accent)}to{background-color:none}}@keyframes new-row{0%{background-color:var(--color-accent)}to{background-color:none}}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell{align-items:center;display:flex;font-size:var(--font-caption);line-height:var(--oft-row-height);padding:0 calc(var(--app-pane-padding)/4)}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.ag-cell-focus{background-color:var(--list-item-hover-background);border-color:transparent!important;outline:0!important}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell svg{pointer-events:none}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.col-boolean,.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.res-ico{justify-content:center}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell.col-number{justify-content:flex-end}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell .action-icon{cursor:pointer;display:flex}.object-form-table-dialog .object-form-table .grid-body ag-grid-angular .ag-cell .action-icon svg{fill:var(--text-color-caption)}.object-form-table-dialog .label{align-items:center;border-bottom:0;display:flex;flex-flow:row nowrap;padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/4)}.object-form-table-dialog .label span{display:block;flex:1 1 auto}.object-form-table-dialog .label eo-icon.stf{color:var(--text-color-caption);cursor:pointer;height:20px;margin:calc(var(--app-pane-padding)/4);width:20px}.object-form-table-dialog .label eo-icon.stf.add-row{background-color:var(--color-accent);border-radius:2px;color:#fff;height:24px;width:24px}.object-form-table-dialog .label button.add{border-radius:2px;padding:calc(var(--app-pane-padding)/2)}.object-form-table-dialog .label button.export{border:1px solid #000;border-radius:2px;color:#000;font-size:var(--font-hint);margin:0 calc(var(--app-pane-padding)/4);padding:calc(var(--app-pane-padding)/8) calc(var(--app-pane-padding)/4)}.object-form-table-dialog .eo-dialog-content{height:100%;max-height:none;overflow:hidden}.object-form-table-dialog .table-area{overflow:unset!important}.cdk-overlay-pane{position:absolute!important}"]
             },] }
 ];
 EoDialogComponent.ctorParameters = () => [
     { type: EventService },
     { type: PendingChangesService },
-    { type: Renderer2 }
+    { type: Renderer2 },
+    { type: Overlay },
+    { type: ViewContainerRef }
 ];
 EoDialogComponent.propDecorators = {
+    portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet,] }],
+    dialogContent: [{ type: ViewChild, args: ['dialogContent',] }],
     title: [{ type: Input }],
     subtitle: [{ type: Input }],
     styleClass: [{ type: Input }],
     dirtyCheck: [{ type: Input }],
-    appendTo: [{ type: Input }],
     minWidth: [{ type: Input }],
     minHeight: [{ type: Input }],
-    resizable: [{ type: Input }],
-    fullscreen: [{ type: Input }],
     focusOnShow: [{ type: Input }],
+    align: [{ type: Input }],
+    isFormTable: [{ type: Input }],
+    showPreview: [{ type: Input }],
+    onTogglePreview: [{ type: Output }],
     visibleChange: [{ type: Output }],
     hide: [{ type: Output }],
     show: [{ type: Output }],
-    dialog: [{ type: ViewChild, args: [Dialog,] }],
     visible: [{ type: Input }],
     onKeydownHandler: [{ type: HostListener, args: ['document:keydown.escape', ['$event'],] }],
     onMousedown: [{ type: HostListener, args: ['document:mousedown', ['$event.target'],] }]
@@ -3799,7 +3836,8 @@ UiModule.decorators = [
                     OverlayPanelModule,
                     RouterModule,
                     DialogModule,
-                    AccordionModule
+                    AccordionModule,
+                    OverlayModule
                 ],
                 exports: [
                     CommonModule,
@@ -3904,8 +3942,9 @@ class AppBarComponent extends UnsubscribeOnDestroy {
             .on(EnaioEvent.SCHEMA_LOCALE_CHANGED).pipe(takeUntil(this.componentDestroyed$))
             .subscribe(() => {
             this.bpmService
-                .initExecutableProcesses()
+                .getExecutableProcesses()
                 .subscribe(res => {
+                // this.exeActions = !!res.length;
                 this.exeActions = this.bpmService.hasMainExecutableProcesses;
             });
         });
@@ -4076,7 +4115,7 @@ class SideBarComponent extends UnsubscribeOnDestroy {
 SideBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-side-bar',
-                template: "<div class=\"eo-side-bar\">\r\n  <eo-icon (click)=\"close()\" (keydown.enter)=\"close()\" tabindex=\"0\" class=\"button white close\" [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"></eo-icon>\r\n\r\n  <div class=\"head\" [style.background-image]=\"backgroundImage\">\r\n\r\n\r\n  </div>\r\n\r\n  <div class=\"body\">\r\n    <a href=\"{{docu.link}}\" target=\"_blank\">\r\n      <eo-icon class=\"button docu\" [iconTitle]=\"docu.label | translate\" [iconSrc]=\"'assets/_default/svg/ic_book.svg'\"></eo-icon>\r\n    </a>\r\n    <a routerLink=\"/about\"><eo-icon class=\"button about\" [iconTitle]=\"'eo.sidebar.help.about.tooltip' | translate\" [iconSrc]=\"'assets/_default/svg/ic_about.svg'\"></eo-icon></a>\r\n\r\n    <p-tabView styleClass=\"tab-sidebar\">\r\n      <p-tabPanel header=\"{{'eo.sidebar.navigation.title'|translate}}\" headerStyleClass=\"tab-nav\">\r\n\r\n        <div class=\"navigation\">\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.favorites\">\r\n            <a routerLink=\"/favorites\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.favorites</a>\r\n          </div>\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.inbox\">\r\n            <a routerLink=\"/inbox\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.inbox</a>\r\n          </div>\r\n\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.intray\">\r\n            <a routerLink=\"/prepare\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.prepare</a>\r\n          </div>\r\n\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.bpm\">\r\n            <a routerLink=\"/process\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.process</a>\r\n          </div>\r\n\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.notifications\">\r\n            <a routerLink=\"/notifications\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.notifications</a>\r\n          </div>\r\n\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.storedqueries\">\r\n            <a routerLink=\"/stored-queries\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.storedqueries</a>\r\n          </div>\r\n          <ng-content select=\".navi\"></ng-content>\r\n        </div>\r\n\r\n      </p-tabPanel>\r\n    </p-tabView>\r\n  </div>\r\n\r\n</div>\r\n",
+                template: "<div class=\"eo-side-bar\" eoTrapFocus>\r\n  <eo-icon (click)=\"close()\" (keydown.enter)=\"close()\" tabindex=\"0\" class=\"button white close\" [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" focusable></eo-icon>\r\n\r\n  <div class=\"head\" [style.background-image]=\"backgroundImage\">\r\n\r\n\r\n  </div>\r\n\r\n  <div class=\"body\">\r\n    <a href=\"{{docu.link}}\" target=\"_blank\">\r\n      <eo-icon class=\"button docu\" [iconTitle]=\"docu.label | translate\" [iconSrc]=\"'assets/_default/svg/ic_book.svg'\"></eo-icon>\r\n    </a>\r\n    <a routerLink=\"/about\"><eo-icon class=\"button about\" [iconTitle]=\"'eo.sidebar.help.about.tooltip' | translate\" [iconSrc]=\"'assets/_default/svg/ic_about.svg'\"></eo-icon></a>\r\n\r\n    <p-tabView styleClass=\"tab-sidebar\">\r\n      <p-tabPanel header=\"{{'eo.sidebar.navigation.title'|translate}}\" headerStyleClass=\"tab-nav\">\r\n\r\n        <div class=\"navigation\">\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.favorites\">\r\n            <a routerLink=\"/favorites\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.favorites</a>\r\n          </div>\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.inbox\">\r\n            <a routerLink=\"/inbox\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.inbox</a>\r\n          </div>\r\n\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.intray\">\r\n            <a routerLink=\"/prepare\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.prepare</a>\r\n          </div>\r\n\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.bpm\">\r\n            <a routerLink=\"/process\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.process</a>\r\n          </div>\r\n\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.notifications\">\r\n            <a routerLink=\"/notifications\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.notifications</a>\r\n          </div>\r\n\r\n          <div class=\"nav-item\" *ngIf=\"capabilities.storedqueries\">\r\n            <a routerLink=\"/stored-queries\" routerLinkActive=\"active-link\" translate>eo.sidebar.navigation.storedqueries</a>\r\n          </div>\r\n          <ng-content select=\".navi\"></ng-content>\r\n        </div>\r\n\r\n      </p-tabPanel>\r\n    </p-tabView>\r\n  </div>\r\n\r\n</div>\r\n",
                 styles: [":host{--sidebar-header-height:250px}:host .eo-side-bar{-webkit-animation-duration:.2s;animation-duration:.2s;background-color:var(--color-primary);bottom:0;box-shadow:0 0 20px 0 rgba(var(--color-black-rgb),.5);position:absolute;top:0;width:300px;z-index:20}[dir=ltr] :host .eo-side-bar{left:0;right:inherit}[dir=rtl] :host .eo-side-bar{left:inherit;right:0}[dir=ltr] :host .eo-side-bar{-webkit-animation-name:sidebarAppearLeft;animation-name:sidebarAppearLeft}[dir=rtl] :host .eo-side-bar{-webkit-animation-name:sidebarAppearRight;animation-name:sidebarAppearRight}:host .eo-side-bar .close{position:absolute;top:var(--app-pane-padding);z-index:22}[dir=ltr] :host .eo-side-bar .close{left:var(--app-pane-padding)}[dir=rtl] :host .eo-side-bar .close{right:var(--app-pane-padding)}:host .eo-side-bar .head{background-position:50%;background-size:cover;height:var(--sidebar-header-height);left:0;position:absolute;right:0;top:0;z-index:21}:host .eo-side-bar .body ::ng-deep{bottom:0;left:0;position:absolute;right:0;top:calc(var(--sidebar-header-height) - 30px);z-index:22}:host .eo-side-bar .body ::ng-deep p-tabView{display:flex;flex:1;flex-direction:row;height:100%;min-height:0;min-width:0}:host .eo-side-bar .body ::ng-deep p-tabView .tab-sidebar{flex:1}:host .eo-side-bar .body ::ng-deep p-tabView .ui-tabview-panels{height:100%;overflow:auto}:host .eo-side-bar .body ::ng-deep .navigation{padding-top:var(--app-pane-padding)}:host .eo-side-bar .body ::ng-deep a:focus eo-icon,:host .eo-side-bar .body ::ng-deep a:hover eo-icon{background:rgba(var(--color-white-rgb),.1)}:host .eo-side-bar .body ::ng-deep eo-icon.about{color:var(--color-white);padding:3px;position:absolute;top:-6px}[dir=ltr] :host .eo-side-bar .body ::ng-deep eo-icon.about{right:8px}[dir=rtl] :host .eo-side-bar .body ::ng-deep eo-icon.about{left:8px}:host .eo-side-bar .body ::ng-deep eo-icon.docu{color:var(--color-white);padding:3px;position:absolute;top:-6px}[dir=ltr] :host .eo-side-bar .body ::ng-deep eo-icon.docu{right:43px}[dir=rtl] :host .eo-side-bar .body ::ng-deep eo-icon.docu{left:43px}:host .eo-side-bar .body ::ng-deep .nav-item{border-bottom:1px solid rgba(var(--color-white-rgb),.1)}:host .eo-side-bar .body ::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:var(--app-pane-padding);text-decoration:none;transition:all var(--app-default-transition-duration) ease-in-out}[dir=ltr] :host .eo-side-bar .body ::ng-deep .nav-item a{border-left:4px solid transparent}[dir=rtl] :host .eo-side-bar .body ::ng-deep .nav-item a{border-right:4px solid transparent}:host .eo-side-bar .body ::ng-deep .nav-item a.active-link{background:rgba(var(--color-white-rgb),.06);border-color:var(--color-accent);cursor:default}:host .eo-side-bar .body ::ng-deep .nav-item a:not(.active-link):focus,:host .eo-side-bar .body ::ng-deep .nav-item a:not(.active-link):hover{background:rgba(var(--color-white-rgb),.1)}@-webkit-keyframes sidebarAppearLeft{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes sidebarAppearLeft{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@-webkit-keyframes sidebarAppearRight{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes sidebarAppearRight{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}"]
             },] }
 ];
@@ -4780,12 +4819,12 @@ class AppSearchComponent {
 AppSearchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-app-search',
-                template: "<eo-dialog class=\"eo-app-search-dialog\" [appendTo]=\"''\" [visible]=\"true\" (hide)=\"closeSearchMenu($event)\">\r\n\r\n  <div class=\"eo-app-search\" [ngClass]=\"{expert: query.expertMode}\" eoRtlAware=\"full\" *ngIf=\"query\">\r\n\r\n    <div class=\"head\">\r\n\r\n      <div class=\"search\">\r\n        <form (submit)=\"executeSearch()\">\r\n          <div class=\"title\" translate>eo.search</div>\r\n\r\n          <eo-query-scope-select [selection]=\"queryScope\" (select)=\"setQueryScope($event)\"></eo-query-scope-select>\r\n\r\n          <div class=\"search-box\">\r\n            <p-autoComplete *ngIf=\"!query.expertMode; else expertInput\" #searchInput class=\"form-control\"\r\n              [(ngModel)]=\"query.term\" [ngModelOptions]=\"{standalone: true}\" [suggestions]=\"autocompleteResults\"\r\n              (onSelect)=\"autocompleteSelect()\" (completeMethod)=\"autocompleteSuggest($event)\" (paste)=\"autocompletePaste($event)\"\r\n              (onClear)=\"autocompleteSuggest()\" [delay]=\"500\" [minLength]=\"3\"></p-autoComplete>\r\n\r\n            <ng-template #expertInput>\r\n              <input autofocus=\"autofocus\" class=\"expert-search__input\" #xpinput type=\"text\"\r\n                (ngModelChange)=\"expertTermChanged()\" [(ngModel)]=\"query.term\" [ngModelOptions]=\"{standalone: true}\">\r\n            </ng-template>\r\n\r\n            <button class=\"btn expert-mode\" type=\"button\" (click)=\"toggleExpertMode()\">\r\n              <!--<span translate>eo.search.mode.expert</span>-->\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_expert-search.svg'\"\r\n                [iconTitle]=\"('eo.search.mode.expert' | translate)\" *ngIf=\"!query?.expertMode; else close\"></eo-icon>\r\n              <ng-template #close>\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_expert-search.svg'\"\r\n                  [iconTitle]=\"('eo.search.mode.expert.close' | translate)\"></eo-icon>\r\n              </ng-template>\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"btn expert-mode expert-mode__reset\" [ngClass]=\"{active: query.term}\"\r\n              (click)=\"resetExpertModeInput()\">\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"\r\n                [iconTitle]=\"('eo.search.clear.search' | translate)\"></eo-icon>\r\n            </button>\r\n\r\n            <button class=\"btn btn-default\" type=\"submit\" [disabled]=\"queryState.isEmpty\"\r\n              translate>eo.search.submit</button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n\r\n      <div class=\"result\" *ngIf=\"!loading; else spinner\">{{queryState.totalCount | localeDecimal}}</div>\r\n      <ng-template #spinner>\r\n        <eo-loading-spinner class=\"search-aggregator__loader\" [size]=\"'medium'\" [mode]=\"'dark'\"></eo-loading-spinner>\r\n      </ng-template>\r\n      <eo-icon class=\"button white close\" [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"\r\n        [iconTitle]=\"('eo.search.close' | translate)\" (click)=\"closeSearchMenu($event)\"></eo-icon>\r\n\r\n    </div>\r\n\r\n    <div class=\"body\" *ngIf=\"!query.expertMode; else expert\">\r\n\r\n      <p-tabView [styleClass]=\"'tab-main'\" (onChange)=\"onTabChange($event.index)\" [activeIndex]=\"activeTabIndex\">\r\n        <!-- object type restriction panel -->\r\n        <p-tabPanel header=\"{{'eo.search.restrict.type'|translate}}\" headerStyleClass=\"search-tab-objecttype\">\r\n\r\n          <!-- object type selection -->\r\n          <div class=\"object-types rest-box-container\" [ngClass]=\"{idxenabled: query.types.length < 1}\"\r\n            *ngIf=\"objectTypeGroups && !idxSearch\">\r\n            <div class=\"group rest-box\" *ngFor=\"let group of objectTypeGroups\">\r\n              <h3 *ngIf=\"group.label !== '0'\">{{group.label}}</h3>\r\n              <h3 *ngIf=\"group.label === '0'\" translate>{{'eo.search.group.general'}}</h3>\r\n              <div class=\"type\" *ngFor=\"let type of group.types\"\r\n                [ngClass]=\"{context: type.isContextFolder, folder: type.isFolder, abstract: type.isAbstract, selected: isTypeActive(type), saved: isTypeSaved(type)}\">\r\n\r\n                <div class=\"checkbox\" (click)=\"toggleType(type)\">\r\n                  <svg fill=\"#ffffff\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                  </svg>\r\n                </div>\r\n                <div class=\"item\" (click)=\"selectObjectType(type)\">\r\n                  <eo-icon [objectType]=\"type\"></eo-icon>\r\n                  <div class=\"label\">{{type.label}} {{type.isAbstract ? '('+ ('eo.search.type.abstract' | translate) + ')' : ''}}</div>\r\n                  <div class=\"count\">{{getAggregationCount(type) | localeDecimal}}</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- indexdata search -->\r\n          <div class=\"indexdata-search\" *ngIf=\"idxSearch\">\r\n            <h2>\r\n              <eo-icon class=\"button\" [iconSrc]=\"'assets/_default/svg/ic_arrow_back.svg'\"\r\n                (click)=\"exitIndexdataSearch()\"></eo-icon>\r\n              <span translate [translateParams]=\"{type: idxSearch.type.label}\">eo.search.objecttype.form</span>\r\n            </h2>\r\n\r\n            <!-- context type selection -->\r\n            <div class=\"context\" *ngIf=\"idxSearch.contextModels.length\">\r\n\r\n              <div class=\"context-select\">\r\n                <div translate>eo.search.objecttype.form.context</div>\r\n                <div class=\"spacer\"></div>\r\n\r\n                <eo-context-search *ngFor=\"let ctx of idxSearch.contextModels; index as i\" [ctx]=\"ctx\" [query]=\"query\"\r\n                  [selected]=\"currentContextFolderName === ctx.name\"\r\n                  [disabled]=\"(currentContextFolderName && currentContextFolderName !== ctx.name)\"\r\n                  [idxSearch]=\"idxSearch\" (setContext)=\"setContext($event)\">\r\n                </eo-context-search>\r\n              </div>\r\n\r\n              <section class=\"context form\">\r\n                <eo-object-form class=\"dark\" #ctxform\r\n                  *ngIf=\"idxSearch.contextFormOptions && idxSearch.contextFormOptions?.formModel?.elements?.length\"\r\n                  [formOptions]=\"idxSearch.contextFormOptions\" (statusChanged)=\"onIndexDataChanged($event)\">\r\n                </eo-object-form>\r\n              </section>\r\n            </div>\r\n\r\n\r\n            <section class=\"object-type form\" *ngIf=\"idxSearch.formOptions\">\r\n              <eo-object-form #idxform [formOptions]=\"idxSearch.formOptions\"\r\n                (statusChanged)=\"onIndexDataChanged($event)\" (onFormReady)=\"idxform.focusForm()\">\r\n              </eo-object-form>\r\n            </section>\r\n          </div>\r\n        </p-tabPanel>\r\n\r\n        <!-- created restriction panel -->\r\n        <p-tabPanel header=\"{{'eo.search.restrict.creation' | translate}}\" headerStyleClass=\"search-tab-created\">\r\n\r\n          <div class=\"created rest-box-container\" *ngIf=\"queryState.aggregations\">\r\n\r\n            <div class=\"rest-box box-timespan\">\r\n              <h3 translate>eo.search.agg.time.span</h3>\r\n              <div class=\"rest-item\" *ngFor=\"let agg of aggregationsModel[PARAMS.CREATED]\"\r\n                (click)=\"toggleFilter(PARAMS.CREATED, OPERATOR.RANGE, agg.key, agg.selected)\"\r\n                [ngClass]=\"{selected: agg.selected, saved: agg.saved}\">\r\n                <div class=\"label\">{{agg.label}}</div>\r\n                <div class=\"count\">{{agg.value | localeDecimal}}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-timespan-custom\">\r\n              <h3 translate>eo.search.agg.time.span.custom</h3>\r\n              <form #createdForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.agg.time.span' | translate\">\r\n                  <eo-datetime-range #createdField [(ngModel)]=\"filtersModel[PARAMS.CREATED].value\" name=\"range\"\r\n                    [operator]=\"filtersModel[PARAMS.CREATED].value ? filtersModel[PARAMS.CREATED].value.operator : OPERATOR.EQUAL\"\r\n                    [withTime]=\"createdField.searchOption && createdField.searchOption !== OPERATOR.EQUAL\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.CREATED, OPERATOR.EQUAL, $event, createdForm)\">\r\n                  </eo-datetime-range>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-creator\">\r\n              <h3 translate>eo.search.agg.creator</h3>\r\n              <form #creatorForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.agg.createdby' | translate\">\r\n                  <eo-organization [multiselect]=\"true\" [(ngModel)]=\"filtersModel[PARAMS.CREATOR].value\" name=\"creator\"\r\n                    (onValueResolved)=\"resolveLabel(filtersModel[PARAMS.CREATOR], $event)\" [situation]=\"'SEARCH'\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.CREATOR, OPERATOR.IN, $event, creatorForm)\"></eo-organization>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </p-tabPanel>\r\n        <p-tabPanel header=\"{{'eo.search.restrict.modification'|translate}}\" headerStyleClass=\"search-tab-changed\">\r\n\r\n          <div class=\"modified rest-box-container\" *ngIf=\"queryState.aggregations\">\r\n\r\n            <div class=\"rest-box box-timespan\">\r\n              <h3 translate>eo.search.agg.time.span</h3>\r\n              <div class=\"rest-item\" *ngFor=\"let agg of aggregationsModel[PARAMS.MODIFIED]\"\r\n                (click)=\"toggleFilter(PARAMS.MODIFIED, OPERATOR.RANGE, agg.key, agg.selected)\"\r\n                [ngClass]=\"{selected: agg.selected, saved: agg.saved}\">\r\n                <div class=\"label\">{{agg.label}}</div>\r\n                <div class=\"count\">{{agg.value | localeDecimal}}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-timespan-custom\">\r\n              <h3 translate>eo.search.agg.time.span.custom</h3>\r\n              <form #modifiedForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.agg.time.span' | translate\">\r\n                  <eo-datetime-range #modifiedField [(ngModel)]=\"filtersModel[PARAMS.MODIFIED].value\" name=\"range\"\r\n                    [operator]=\"filtersModel[PARAMS.MODIFIED].value ? filtersModel[PARAMS.MODIFIED].value.operator : OPERATOR.EQUAL\"\r\n                    [withTime]=\"modifiedField.searchOption && modifiedField.searchOption !== OPERATOR.EQUAL\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.MODIFIED, OPERATOR.EQUAL, $event, modifiedForm)\">\r\n                  </eo-datetime-range>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-modifier\">\r\n              <h3 translate>eo.search.agg.modifier</h3>\r\n              <form #modifierForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.agg.modifiedby' | translate\">\r\n                  <eo-organization [multiselect]=\"true\" [(ngModel)]=\"filtersModel[PARAMS.MODIFIER].value\"\r\n                    name=\"modifier\" (onValueResolved)=\"resolveLabel(filtersModel[PARAMS.MODIFIER], $event)\"\r\n                    [situation]=\"'SEARCH'\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.MODIFIER, OPERATOR.IN, $event, modifierForm)\"></eo-organization>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n          </div>\r\n        </p-tabPanel>\r\n\r\n        <p-tabPanel header=\"{{'eo.search.restrict.file'|translate}}\" headerStyleClass=\"search-tab-docfile\">\r\n          <div class=\"file rest-box-container\" *ngIf=\"queryState.aggregations\">\r\n\r\n            <div class=\"rest-box box-mimetype-group\">\r\n              <h3 translate>eo.search.restrict.mimetypegroup</h3>\r\n              <div class=\"rest-item\" *ngFor=\"let agg of aggregationsModel[PARAMS.MIMETYPEGROUP]\"\r\n                (click)=\"setFilter(PARAMS.MIMETYPEGROUP, OPERATOR.IN, resolveSelection(aggregationsModel[PARAMS.MIMETYPEGROUP], agg.key, agg.selected))\"\r\n                [ngClass]=\"{selected: agg.selected, saved: agg.saved}\">\r\n                <div class=\"checkbox\">\r\n                  <svg fill=\"#ffffff\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                  </svg>\r\n                </div>\r\n                <div class=\"label\">{{agg.label}}</div>\r\n                <div class=\"count\">{{agg.value | localeDecimal}}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-filesize\">\r\n              <h3 translate>eo.search.restrict.filesize</h3>\r\n              <div class=\"rest-item\" *ngFor=\"let agg of aggregationsModel[PARAMS.FILESIZE]\"\r\n                (click)=\"toggleFilter(PARAMS.FILESIZE, OPERATOR.RANGE, agg.key, agg.selected)\"\r\n                [ngClass]=\"{selected: agg.selected, saved: agg.saved}\">\r\n                <div class=\"label\">{{agg.label}}</div>\r\n                <div class=\"count\">{{agg.value | localeDecimal}}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-filename\">\r\n              <h3 translate>eo.search.restrict.filename</h3>\r\n              <form #filenameForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.restrict.filename' | translate\">\r\n                  <eo-string [autocomplete]=\"true\" [qname]=\"'filename'\"\r\n                    [(ngModel)]=\"filtersModel[PARAMS.FILENAME].value\" name=\"filename\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.FILENAME, OPERATOR.EQUAL, $event, filenameForm)\"></eo-string>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n          </div>\r\n        </p-tabPanel>\r\n      </p-tabView>\r\n\r\n\r\n      <!-- summary of the current search filters -->\r\n      <div class=\"summary-panel\">\r\n\r\n        <div class=\"headline stored-query\" *ngIf=\"isStoredQuery; else reghead\">\r\n          <div class=\"pre\" translate>eo.search.aside.summary.storedquery</div>\r\n          <div class=\"stored-query-name\">{{storedQuery.name}}</div>\r\n        </div>\r\n\r\n        <ng-template #reghead>\r\n          <div class=\"headline\" translate>eo.search.aside.summary</div>\r\n        </ng-template>\r\n\r\n        <section class=\"query-types\">\r\n          <!-- search term -->\r\n          <div class=\"section section-searchterm\" *ngIf=\"query.term\">\r\n            <div class=\"title\" translate>eo.search.aside.summary.term</div>\r\n            <div class=\"filter\">\r\n              <div class=\"label\">{{query.term}}</div>\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"removeTerm()\"></eo-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- context type -->\r\n          <div class=\"section section-contexttype\" *ngIf=\"query.contextFolderTypes.length\">\r\n            <div class=\"title\" translate>eo.search.aside.summary.contextfoldertypes</div>\r\n            <div class=\"filter\" *ngFor=\"let type of query.contextFolderTypes\">\r\n              <div class=\"label\">{{type.label}}</div>\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"removeContextType()\"></eo-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- object type -->\r\n          <div class=\"section section-objecttype\" *ngIf=\"query.types.length\">\r\n            <div class=\"title\" translate>eo.search.aside.summary.types</div>\r\n            <div class=\"filter\" *ngFor=\"let type of query.types\">\r\n              <div class=\"label\">{{type.label}}</div>\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"removeType(type)\"></eo-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <ng-template #filterTemplate let-filter let-translate>\r\n            <ng-container *ngIf=\"filter.innerValue.length\">\r\n              <div class=\"filter\" *ngFor=\"let val of filter.innerValue; index as i\">\r\n                <div class=\"label\">{{filter.label[i] | async}}</div>\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"resetFilter(filter, val)\"></eo-icon>\r\n              </div>\r\n            </ng-container>\r\n          </ng-template>\r\n\r\n          <div class=\"section section-creation\"\r\n            *ngIf=\"filtersModel[PARAMS.CREATED].innerValue.length || filtersModel[PARAMS.CREATOR].innerValue.length\">\r\n            <div class=\"title\" translate>eo.search.restrict.creation</div>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.CREATED] }\"></ng-template>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.CREATOR] }\"></ng-template>\r\n          </div>\r\n\r\n          <div class=\"section section-modification\"\r\n            *ngIf=\"filtersModel[PARAMS.MODIFIED].innerValue.length || filtersModel[PARAMS.MODIFIER].innerValue.length\">\r\n            <div class=\"title\" translate>eo.search.restrict.modification</div>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.MODIFIED] }\"></ng-template>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.MODIFIER] }\"></ng-template>\r\n          </div>\r\n\r\n          <div class=\"section section-mimetypegroup\"\r\n            *ngIf=\"filtersModel[PARAMS.MIMETYPEGROUP].innerValue.length || filtersModel[PARAMS.FILESIZE].innerValue.length || filtersModel[PARAMS.FILENAME].innerValue.length\">\r\n            <div class=\"title\" translate>eo.search.restrict.file</div>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.MIMETYPEGROUP] }\"></ng-template>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.FILESIZE] }\"></ng-template>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.FILENAME] }\"></ng-template>\r\n          </div>\r\n        </section>\r\n\r\n        <div class=\"actions\" *ngIf=\"query.term || query.filters.length || query.types.length; else emptySearch\">\r\n\r\n          <ng-container *ngIf=\"isStoredQuery; else regactions\">\r\n            <button class=\"secondary btn-reset\" (click)=\"resetQuery()\" translate>eo.search.storedquery.close</button>\r\n            <button class=\"primary grey btn-update\" (click)=\"updateStoredQuery()\"\r\n              *ngIf=\"capabilities.storedqueries && isOwnQuery\" translate>eo.search.storedquery.update</button>\r\n            <button class=\"primary grey btn-save\" (click)=\"saveQuery()\"\r\n              *ngIf=\"capabilities.storedqueries && !isOwnQuery\" translate>eo.search.save</button>\r\n            <button class=\"primary btn-submit\" (click)=\"executeSearch()\" [disabled]=\"queryState.isEmpty\"\r\n              translate>eo.search.submit</button>\r\n          </ng-container>\r\n\r\n          <ng-template #regactions>\r\n            <button class=\"primary grey btn-reset\" (click)=\"resetQuery()\" translate>eo.search.reset</button>\r\n            <button class=\"primary grey btn-save\" (click)=\"saveQuery()\"\r\n              *ngIf=\"capabilities.storedqueries && !isOwnQuery\" translate>eo.search.save</button>\r\n            <button class=\"primary btn-submit\" (click)=\"executeSearch()\" [disabled]=\"queryState.isEmpty\"\r\n              translate>eo.search.submit</button>\r\n          </ng-template>\r\n\r\n\r\n        </div>\r\n\r\n        <ng-template #emptySearch>\r\n          <div class=\"empty-search\" translate>eo.search.summary.empty</div>\r\n        </ng-template>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n    <!-- expert mode body panel containing explanations -->\r\n    <ng-template #expert>\r\n      <div class=\"body expert\">\r\n\r\n        <div class=\"empty\" *ngIf=\"expertModeQueryEmpty\"><span translate>eo.search.mode.expert.result.empty</span></div>\r\n\r\n        <!--\r\n        <h2><span translate>eo.search.mode.expert</span></h2>\r\n        <div class=\"intro\" translate>eo.search.mode.expert.intro</div>\r\n\r\n        <div class=\"base-params fields\">\r\n          <h2 translate>eo.search.mode.expert.support.baseparams</h2>\r\n          <div class=\"items\">\r\n            <div class=\"item\" *ngFor=\"let el of expertModeSupport.baseParams\" (click)=\"xpAddToTerm(el.data)\">\r\n              <div class=\"label\"><span>{{el.label}}</span></div>\r\n              <div class=\"data\">{{el.data}}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"system-types fields\">\r\n\r\n          <div class=\"column column-group\">\r\n            <h2 translate>eo.search.mode.expert.support.group</h2>\r\n            <div class=\"items\">\r\n              <div class=\"item\" *ngFor=\"let group of typeGroupTree\"\r\n                   [ngClass]=\"{selected: expertModeSupport.selectedGroup && group.id === expertModeSupport.selectedGroup.id}\"\r\n                   (click)=\"xpSelectGroup(group)\">\r\n                <div *ngIf=\"group.label !== '0'\">{{group.label}}</div>\r\n                <div *ngIf=\"group.label === '0'\">{{'eo.search.group.general' | translate}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"column column-type\" *ngIf=\"expertModeSupport.selectedGroup\">\r\n            <h2 translate>eo.search.mode.expert.support.type</h2>\r\n            <div class=\"items\">\r\n              <div class=\"item\" *ngFor=\"let type of expertModeSupport.selectedGroup.tree\"\r\n                   [ngClass]=\"{selected: expertModeSupport.selectedType && type.id === expertModeSupport.selectedType.id}\"\r\n                   (click)=\"xpSelectType(type)\">\r\n                <div>{{type.label}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"column section-field\" *ngIf=\"expertModeSupport.selectedType\">\r\n            <h2 translate>eo.search.mode.expert.support.field</h2>\r\n            <div class=\"items\">\r\n              <div class=\"item\" *ngFor=\"let el of expertModeSupport.selectedType.children\" (click)=\"xpAddToTerm(el.data)\">\r\n                <div class=\"label\"><span>{{el.label}}</span><span class=\"type\">{{el.type}}</span></div>\r\n                <div class=\"data\">{{el.data}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        -->\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</eo-dialog>\r\n",
+                template: "<eo-dialog [visible]=\"true\" [styleClass]=\"'eo-app-search-dialog'\" [align]=\"'start'\" [minWidth]=\"'80vw'\" [minHeight]=\"'100vh'\" (hide)=\"closeSearchMenu($event)\">\r\n\r\n  <div class=\"eo-app-search\" [ngClass]=\"{expert: query.expertMode}\" eoRtlAware=\"full\" *ngIf=\"query\">\r\n\r\n    <div class=\"head\">\r\n\r\n      <div class=\"search\">\r\n        <form (submit)=\"executeSearch()\">\r\n          <div class=\"title\" translate>eo.search</div>\r\n\r\n          <eo-query-scope-select [selection]=\"queryScope\" (select)=\"setQueryScope($event)\"></eo-query-scope-select>\r\n\r\n          <div class=\"search-box\">\r\n            <p-autoComplete *ngIf=\"!query.expertMode; else expertInput\" #searchInput class=\"form-control\"\r\n              [(ngModel)]=\"query.term\" [ngModelOptions]=\"{standalone: true}\" [suggestions]=\"autocompleteResults\"\r\n              (onSelect)=\"autocompleteSelect()\" (completeMethod)=\"autocompleteSuggest($event)\" (paste)=\"autocompletePaste($event)\"\r\n              (onClear)=\"autocompleteSuggest()\" [delay]=\"500\" [minLength]=\"3\"></p-autoComplete>\r\n\r\n            <ng-template #expertInput>\r\n              <input autofocus=\"autofocus\" class=\"expert-search__input\" #xpinput type=\"text\"\r\n                (ngModelChange)=\"expertTermChanged()\" [(ngModel)]=\"query.term\" [ngModelOptions]=\"{standalone: true}\">\r\n            </ng-template>\r\n\r\n            <button class=\"btn expert-mode\" type=\"button\" (click)=\"toggleExpertMode()\">\r\n              <!--<span translate>eo.search.mode.expert</span>-->\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_expert-search.svg'\"\r\n                [iconTitle]=\"('eo.search.mode.expert' | translate)\" *ngIf=\"!query?.expertMode; else close\"></eo-icon>\r\n              <ng-template #close>\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_expert-search.svg'\"\r\n                  [iconTitle]=\"('eo.search.mode.expert.close' | translate)\"></eo-icon>\r\n              </ng-template>\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"btn expert-mode expert-mode__reset\" [ngClass]=\"{active: query.term}\"\r\n              (click)=\"resetExpertModeInput()\">\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"\r\n                [iconTitle]=\"('eo.search.clear.search' | translate)\"></eo-icon>\r\n            </button>\r\n\r\n            <button class=\"btn btn-default\" type=\"submit\" [disabled]=\"queryState.isEmpty\"\r\n              translate>eo.search.submit</button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n\r\n      <div class=\"result\" *ngIf=\"!loading; else spinner\">{{queryState.totalCount | localeDecimal}}</div>\r\n      <ng-template #spinner>\r\n        <eo-loading-spinner class=\"search-aggregator__loader\" [size]=\"'medium'\" [mode]=\"'dark'\"></eo-loading-spinner>\r\n      </ng-template>\r\n      <eo-icon class=\"button white close\" [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"\r\n        [iconTitle]=\"('eo.search.close' | translate)\" (click)=\"closeSearchMenu($event)\"></eo-icon>\r\n\r\n    </div>\r\n\r\n    <div class=\"body\" *ngIf=\"!query.expertMode; else expert\">\r\n\r\n      <p-tabView [styleClass]=\"'tab-main'\" (onChange)=\"onTabChange($event.index)\" [activeIndex]=\"activeTabIndex\">\r\n        <!-- object type restriction panel -->\r\n        <p-tabPanel header=\"{{'eo.search.restrict.type'|translate}}\" headerStyleClass=\"search-tab-objecttype\">\r\n\r\n          <!-- object type selection -->\r\n          <div class=\"object-types rest-box-container\" [ngClass]=\"{idxenabled: query.types.length < 1}\"\r\n            *ngIf=\"objectTypeGroups && !idxSearch\">\r\n            <div class=\"group rest-box\" *ngFor=\"let group of objectTypeGroups\">\r\n              <h3 *ngIf=\"group.label !== '0'\">{{group.label}}</h3>\r\n              <h3 *ngIf=\"group.label === '0'\" translate>{{'eo.search.group.general'}}</h3>\r\n              <div class=\"type\" *ngFor=\"let type of group.types\"\r\n                [ngClass]=\"{context: type.isContextFolder, folder: type.isFolder, abstract: type.isAbstract, selected: isTypeActive(type), saved: isTypeSaved(type)}\">\r\n\r\n                <div class=\"checkbox\" (click)=\"toggleType(type)\">\r\n                  <svg fill=\"#ffffff\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                  </svg>\r\n                </div>\r\n                <div class=\"item\" (click)=\"selectObjectType(type)\">\r\n                  <eo-icon [objectType]=\"type\"></eo-icon>\r\n                  <div class=\"label\">{{type.label}} {{type.isAbstract ? '('+ ('eo.search.type.abstract' | translate) + ')' : ''}}</div>\r\n                  <div class=\"count\">{{getAggregationCount(type) | localeDecimal}}</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- indexdata search -->\r\n          <div class=\"indexdata-search\" *ngIf=\"idxSearch\">\r\n            <h2>\r\n              <eo-icon class=\"button\" [iconSrc]=\"'assets/_default/svg/ic_arrow_back.svg'\"\r\n                (click)=\"exitIndexdataSearch()\"></eo-icon>\r\n              <span translate [translateParams]=\"{type: idxSearch.type.label}\">eo.search.objecttype.form</span>\r\n            </h2>\r\n\r\n            <!-- context type selection -->\r\n            <div class=\"context\" *ngIf=\"idxSearch.contextModels.length\">\r\n\r\n              <div class=\"context-select\">\r\n                <div translate>eo.search.objecttype.form.context</div>\r\n                <div class=\"spacer\"></div>\r\n\r\n                <eo-context-search *ngFor=\"let ctx of idxSearch.contextModels; index as i\" [ctx]=\"ctx\" [query]=\"query\"\r\n                  [selected]=\"currentContextFolderName === ctx.name\"\r\n                  [disabled]=\"(currentContextFolderName && currentContextFolderName !== ctx.name)\"\r\n                  [idxSearch]=\"idxSearch\" (setContext)=\"setContext($event)\">\r\n                </eo-context-search>\r\n              </div>\r\n\r\n              <section class=\"context form\">\r\n                <eo-object-form class=\"dark\" #ctxform\r\n                  *ngIf=\"idxSearch.contextFormOptions && idxSearch.contextFormOptions?.formModel?.elements?.length\"\r\n                  [formOptions]=\"idxSearch.contextFormOptions\" (statusChanged)=\"onIndexDataChanged($event)\">\r\n                </eo-object-form>\r\n              </section>\r\n            </div>\r\n\r\n\r\n            <section class=\"object-type form\" *ngIf=\"idxSearch.formOptions\">\r\n              <eo-object-form #idxform [formOptions]=\"idxSearch.formOptions\"\r\n                (statusChanged)=\"onIndexDataChanged($event)\" (onFormReady)=\"idxform.focusForm()\">\r\n              </eo-object-form>\r\n            </section>\r\n          </div>\r\n        </p-tabPanel>\r\n\r\n        <!-- created restriction panel -->\r\n        <p-tabPanel header=\"{{'eo.search.restrict.creation' | translate}}\" headerStyleClass=\"search-tab-created\">\r\n\r\n          <div class=\"created rest-box-container\" *ngIf=\"queryState.aggregations\">\r\n\r\n            <div class=\"rest-box box-timespan\">\r\n              <h3 translate>eo.search.agg.time.span</h3>\r\n              <div class=\"rest-item\" *ngFor=\"let agg of aggregationsModel[PARAMS.CREATED]\"\r\n                (click)=\"toggleFilter(PARAMS.CREATED, OPERATOR.RANGE, agg.key, agg.selected)\"\r\n                [ngClass]=\"{selected: agg.selected, saved: agg.saved}\">\r\n                <div class=\"label\">{{agg.label}}</div>\r\n                <div class=\"count\">{{agg.value | localeDecimal}}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-timespan-custom\">\r\n              <h3 translate>eo.search.agg.time.span.custom</h3>\r\n              <form #createdForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.agg.time.span' | translate\">\r\n                  <eo-datetime-range #createdField [(ngModel)]=\"filtersModel[PARAMS.CREATED].value\" name=\"range\"\r\n                    [operator]=\"filtersModel[PARAMS.CREATED].value ? filtersModel[PARAMS.CREATED].value.operator : OPERATOR.EQUAL\"\r\n                    [withTime]=\"createdField.searchOption && createdField.searchOption !== OPERATOR.EQUAL\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.CREATED, OPERATOR.EQUAL, $event, createdForm)\">\r\n                  </eo-datetime-range>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-creator\">\r\n              <h3 translate>eo.search.agg.creator</h3>\r\n              <form #creatorForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.agg.createdby' | translate\">\r\n                  <eo-organization [multiselect]=\"true\" [(ngModel)]=\"filtersModel[PARAMS.CREATOR].value\" name=\"creator\"\r\n                    (onValueResolved)=\"resolveLabel(filtersModel[PARAMS.CREATOR], $event)\" [situation]=\"'SEARCH'\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.CREATOR, OPERATOR.IN, $event, creatorForm)\"></eo-organization>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </p-tabPanel>\r\n        <p-tabPanel header=\"{{'eo.search.restrict.modification'|translate}}\" headerStyleClass=\"search-tab-changed\">\r\n\r\n          <div class=\"modified rest-box-container\" *ngIf=\"queryState.aggregations\">\r\n\r\n            <div class=\"rest-box box-timespan\">\r\n              <h3 translate>eo.search.agg.time.span</h3>\r\n              <div class=\"rest-item\" *ngFor=\"let agg of aggregationsModel[PARAMS.MODIFIED]\"\r\n                (click)=\"toggleFilter(PARAMS.MODIFIED, OPERATOR.RANGE, agg.key, agg.selected)\"\r\n                [ngClass]=\"{selected: agg.selected, saved: agg.saved}\">\r\n                <div class=\"label\">{{agg.label}}</div>\r\n                <div class=\"count\">{{agg.value | localeDecimal}}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-timespan-custom\">\r\n              <h3 translate>eo.search.agg.time.span.custom</h3>\r\n              <form #modifiedForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.agg.time.span' | translate\">\r\n                  <eo-datetime-range #modifiedField [(ngModel)]=\"filtersModel[PARAMS.MODIFIED].value\" name=\"range\"\r\n                    [operator]=\"filtersModel[PARAMS.MODIFIED].value ? filtersModel[PARAMS.MODIFIED].value.operator : OPERATOR.EQUAL\"\r\n                    [withTime]=\"modifiedField.searchOption && modifiedField.searchOption !== OPERATOR.EQUAL\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.MODIFIED, OPERATOR.EQUAL, $event, modifiedForm)\">\r\n                  </eo-datetime-range>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-modifier\">\r\n              <h3 translate>eo.search.agg.modifier</h3>\r\n              <form #modifierForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.agg.modifiedby' | translate\">\r\n                  <eo-organization [multiselect]=\"true\" [(ngModel)]=\"filtersModel[PARAMS.MODIFIER].value\"\r\n                    name=\"modifier\" (onValueResolved)=\"resolveLabel(filtersModel[PARAMS.MODIFIER], $event)\"\r\n                    [situation]=\"'SEARCH'\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.MODIFIER, OPERATOR.IN, $event, modifierForm)\"></eo-organization>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n          </div>\r\n        </p-tabPanel>\r\n\r\n        <p-tabPanel header=\"{{'eo.search.restrict.file'|translate}}\" headerStyleClass=\"search-tab-docfile\">\r\n          <div class=\"file rest-box-container\" *ngIf=\"queryState.aggregations\">\r\n\r\n            <div class=\"rest-box box-mimetype-group\">\r\n              <h3 translate>eo.search.restrict.mimetypegroup</h3>\r\n              <div class=\"rest-item\" *ngFor=\"let agg of aggregationsModel[PARAMS.MIMETYPEGROUP]\"\r\n                (click)=\"setFilter(PARAMS.MIMETYPEGROUP, OPERATOR.IN, resolveSelection(aggregationsModel[PARAMS.MIMETYPEGROUP], agg.key, agg.selected))\"\r\n                [ngClass]=\"{selected: agg.selected, saved: agg.saved}\">\r\n                <div class=\"checkbox\">\r\n                  <svg fill=\"#ffffff\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n                  </svg>\r\n                </div>\r\n                <div class=\"label\">{{agg.label}}</div>\r\n                <div class=\"count\">{{agg.value | localeDecimal}}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-filesize\">\r\n              <h3 translate>eo.search.restrict.filesize</h3>\r\n              <div class=\"rest-item\" *ngFor=\"let agg of aggregationsModel[PARAMS.FILESIZE]\"\r\n                (click)=\"toggleFilter(PARAMS.FILESIZE, OPERATOR.RANGE, agg.key, agg.selected)\"\r\n                [ngClass]=\"{selected: agg.selected, saved: agg.saved}\">\r\n                <div class=\"label\">{{agg.label}}</div>\r\n                <div class=\"count\">{{agg.value | localeDecimal}}</div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"rest-box box-filename\">\r\n              <h3 translate>eo.search.restrict.filename</h3>\r\n              <form #filenameForm=\"ngForm\">\r\n                <eo-form-input [label]=\"'eo.search.restrict.filename' | translate\">\r\n                  <eo-string [autocomplete]=\"true\" [qname]=\"'filename'\"\r\n                    [(ngModel)]=\"filtersModel[PARAMS.FILENAME].value\" name=\"filename\"\r\n                    (ngModelChange)=\"setFilter(PARAMS.FILENAME, OPERATOR.EQUAL, $event, filenameForm)\"></eo-string>\r\n                </eo-form-input>\r\n              </form>\r\n            </div>\r\n          </div>\r\n        </p-tabPanel>\r\n      </p-tabView>\r\n\r\n\r\n      <!-- summary of the current search filters -->\r\n      <div class=\"summary-panel\">\r\n\r\n        <div class=\"headline stored-query\" *ngIf=\"isStoredQuery; else reghead\">\r\n          <div class=\"pre\" translate>eo.search.aside.summary.storedquery</div>\r\n          <div class=\"stored-query-name\">{{storedQuery.name}}</div>\r\n        </div>\r\n\r\n        <ng-template #reghead>\r\n          <div class=\"headline\" translate>eo.search.aside.summary</div>\r\n        </ng-template>\r\n\r\n        <section class=\"query-types\">\r\n          <!-- search term -->\r\n          <div class=\"section section-searchterm\" *ngIf=\"query.term\">\r\n            <div class=\"title\" translate>eo.search.aside.summary.term</div>\r\n            <div class=\"filter\">\r\n              <div class=\"label\">{{query.term}}</div>\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"removeTerm()\"></eo-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- context type -->\r\n          <div class=\"section section-contexttype\" *ngIf=\"query.contextFolderTypes.length\">\r\n            <div class=\"title\" translate>eo.search.aside.summary.contextfoldertypes</div>\r\n            <div class=\"filter\" *ngFor=\"let type of query.contextFolderTypes\">\r\n              <div class=\"label\">{{type.label}}</div>\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"removeContextType()\"></eo-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- object type -->\r\n          <div class=\"section section-objecttype\" *ngIf=\"query.types.length\">\r\n            <div class=\"title\" translate>eo.search.aside.summary.types</div>\r\n            <div class=\"filter\" *ngFor=\"let type of query.types\">\r\n              <div class=\"label\">{{type.label}}</div>\r\n              <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"removeType(type)\"></eo-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <ng-template #filterTemplate let-filter let-translate>\r\n            <ng-container *ngIf=\"filter.innerValue.length\">\r\n              <div class=\"filter\" *ngFor=\"let val of filter.innerValue; index as i\">\r\n                <div class=\"label\">{{filter.label[i] | async}}</div>\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"resetFilter(filter, val)\"></eo-icon>\r\n              </div>\r\n            </ng-container>\r\n          </ng-template>\r\n\r\n          <div class=\"section section-creation\"\r\n            *ngIf=\"filtersModel[PARAMS.CREATED].innerValue.length || filtersModel[PARAMS.CREATOR].innerValue.length\">\r\n            <div class=\"title\" translate>eo.search.restrict.creation</div>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.CREATED] }\"></ng-template>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.CREATOR] }\"></ng-template>\r\n          </div>\r\n\r\n          <div class=\"section section-modification\"\r\n            *ngIf=\"filtersModel[PARAMS.MODIFIED].innerValue.length || filtersModel[PARAMS.MODIFIER].innerValue.length\">\r\n            <div class=\"title\" translate>eo.search.restrict.modification</div>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.MODIFIED] }\"></ng-template>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.MODIFIER] }\"></ng-template>\r\n          </div>\r\n\r\n          <div class=\"section section-mimetypegroup\"\r\n            *ngIf=\"filtersModel[PARAMS.MIMETYPEGROUP].innerValue.length || filtersModel[PARAMS.FILESIZE].innerValue.length || filtersModel[PARAMS.FILENAME].innerValue.length\">\r\n            <div class=\"title\" translate>eo.search.restrict.file</div>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.MIMETYPEGROUP] }\"></ng-template>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.FILESIZE] }\"></ng-template>\r\n            <ng-template [ngTemplateOutlet]=\"filterTemplate\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: filtersModel[PARAMS.FILENAME] }\"></ng-template>\r\n          </div>\r\n        </section>\r\n\r\n        <div class=\"actions\" *ngIf=\"query.term || query.filters.length || query.types.length; else emptySearch\">\r\n\r\n          <ng-container *ngIf=\"isStoredQuery; else regactions\">\r\n            <button class=\"secondary btn-reset\" (click)=\"resetQuery()\" translate>eo.search.storedquery.close</button>\r\n            <button class=\"primary grey btn-update\" (click)=\"updateStoredQuery()\"\r\n              *ngIf=\"capabilities.storedqueries && isOwnQuery\" translate>eo.search.storedquery.update</button>\r\n            <button class=\"primary grey btn-save\" (click)=\"saveQuery()\"\r\n              *ngIf=\"capabilities.storedqueries && !isOwnQuery\" translate>eo.search.save</button>\r\n            <button class=\"primary btn-submit\" (click)=\"executeSearch()\" [disabled]=\"queryState.isEmpty\"\r\n              translate>eo.search.submit</button>\r\n          </ng-container>\r\n\r\n          <ng-template #regactions>\r\n            <button class=\"primary grey btn-reset\" (click)=\"resetQuery()\" translate>eo.search.reset</button>\r\n            <button class=\"primary grey btn-save\" (click)=\"saveQuery()\"\r\n              *ngIf=\"capabilities.storedqueries && !isOwnQuery\" translate>eo.search.save</button>\r\n            <button class=\"primary btn-submit\" (click)=\"executeSearch()\" [disabled]=\"queryState.isEmpty\"\r\n              translate>eo.search.submit</button>\r\n          </ng-template>\r\n\r\n\r\n        </div>\r\n\r\n        <ng-template #emptySearch>\r\n          <div class=\"empty-search\" translate>eo.search.summary.empty</div>\r\n        </ng-template>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n    <!-- expert mode body panel containing explanations -->\r\n    <ng-template #expert>\r\n      <div class=\"body expert\">\r\n\r\n        <div class=\"empty\" *ngIf=\"expertModeQueryEmpty\"><span translate>eo.search.mode.expert.result.empty</span></div>\r\n\r\n        <!--\r\n        <h2><span translate>eo.search.mode.expert</span></h2>\r\n        <div class=\"intro\" translate>eo.search.mode.expert.intro</div>\r\n\r\n        <div class=\"base-params fields\">\r\n          <h2 translate>eo.search.mode.expert.support.baseparams</h2>\r\n          <div class=\"items\">\r\n            <div class=\"item\" *ngFor=\"let el of expertModeSupport.baseParams\" (click)=\"xpAddToTerm(el.data)\">\r\n              <div class=\"label\"><span>{{el.label}}</span></div>\r\n              <div class=\"data\">{{el.data}}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"system-types fields\">\r\n\r\n          <div class=\"column column-group\">\r\n            <h2 translate>eo.search.mode.expert.support.group</h2>\r\n            <div class=\"items\">\r\n              <div class=\"item\" *ngFor=\"let group of typeGroupTree\"\r\n                   [ngClass]=\"{selected: expertModeSupport.selectedGroup && group.id === expertModeSupport.selectedGroup.id}\"\r\n                   (click)=\"xpSelectGroup(group)\">\r\n                <div *ngIf=\"group.label !== '0'\">{{group.label}}</div>\r\n                <div *ngIf=\"group.label === '0'\">{{'eo.search.group.general' | translate}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"column column-type\" *ngIf=\"expertModeSupport.selectedGroup\">\r\n            <h2 translate>eo.search.mode.expert.support.type</h2>\r\n            <div class=\"items\">\r\n              <div class=\"item\" *ngFor=\"let type of expertModeSupport.selectedGroup.tree\"\r\n                   [ngClass]=\"{selected: expertModeSupport.selectedType && type.id === expertModeSupport.selectedType.id}\"\r\n                   (click)=\"xpSelectType(type)\">\r\n                <div>{{type.label}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"column section-field\" *ngIf=\"expertModeSupport.selectedType\">\r\n            <h2 translate>eo.search.mode.expert.support.field</h2>\r\n            <div class=\"items\">\r\n              <div class=\"item\" *ngFor=\"let el of expertModeSupport.selectedType.children\" (click)=\"xpAddToTerm(el.data)\">\r\n                <div class=\"label\"><span>{{el.label}}</span><span class=\"type\">{{el.type}}</span></div>\r\n                <div class=\"data\">{{el.data}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        -->\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</eo-dialog>\r\n",
                 encapsulation: ViewEncapsulation.None
                 // todo: apply onPush change detection (agg search result right now doesn't update)
                 // changeDetection: ChangeDetectionStrategy.OnPush
                 ,
-                styles: [".eo-app-search-dialog>p-dialog>.ui-dialog{bottom:0!important;max-width:100%!important;min-width:500px!important;top:0!important;width:80%!important}[dir=ltr] .eo-app-search-dialog>p-dialog>.ui-dialog{left:0!important}[dir=rtl] .eo-app-search-dialog>p-dialog>.ui-dialog{left:auto!important}[dir=ltr] .eo-app-search-dialog>p-dialog>.ui-dialog{right:auto!important}[dir=rtl] .eo-app-search-dialog>p-dialog>.ui-dialog{right:0!important}[dir=ltr] .eo-app-search-dialog>p-dialog>.ui-dialog{-webkit-animation:appSearchAppear calc(var(--app-default-transition-duration)*2)!important;animation:appSearchAppear calc(var(--app-default-transition-duration)*2)!important}[dir=rtl] .eo-app-search-dialog>p-dialog>.ui-dialog{-webkit-animation:appSearchAppearRTL calc(var(--app-default-transition-duration)*2)!important;animation:appSearchAppearRTL calc(var(--app-default-transition-duration)*2)!important}@media (max-width:500px){.eo-app-search-dialog>p-dialog>.ui-dialog{min-width:inherit;width:100%!important}}.eo-app-search-dialog>p-dialog>.ui-dialog>.ui-dialog-content,.eo-app-search-dialog>p-dialog>.ui-dialog>.ui-dialog-content>.eo-dialog{height:100%}.eo-app-search-dialog>p-dialog>.ui-dialog>.ui-dialog-content>.eo-dialog>.eo-dialog-content{max-height:100%;overflow:inherit}.eo-app-search-dialog>p-dialog>.ui-dialog>.ui-dialog-content>.eo-dialog>.eo-dialog-header{display:none}.eo-app-search.rtl .head .close{left:var(--app-pane-padding);right:auto}.eo-app-search.rtl .body .indexdata-search h2 eo-icon{transform:rotate(180deg)}.eo-app-search{--search-box-max-width:600px;--search-min-width:500px;--search-summary-width:350px;background:var(--panel-background-grey);bottom:0;display:flex;flex:1;flex-direction:column;left:0;min-height:0;min-width:0;position:absolute;right:0;top:0}.eo-app-search .head{background:var(--color-primary-2);color:var(--color-white);display:flex;flex:0 0 auto;flex-flow:row nowrap;padding:var(--app-pane-padding) calc(var(--app-pane-padding)/2) 0 calc(var(--app-pane-padding)/2);position:relative}.eo-app-search .head .search{flex:1 1 auto;justify-content:space-between;margin:0 calc(var(--app-pane-padding)/2);z-index:2}.eo-app-search .head .search .title{font-size:var(--font-display);font-weight:var(--font-weight-light);line-height:1em;min-height:1em}@media (max-width:480px){.eo-app-search .head .search .title{font-size:var(--font-title)}}.eo-app-search .head .search .query-scope{margin:calc(var(--app-pane-padding)*2) 0 0 0;max-width:var(--search-box-max-width);min-width:var(--search-min-width)}.eo-app-search .head .search .search-box{align-items:stretch;background:var(--color-white);box-shadow:0 2px 2px 0 rgba(var(--color-black-rgb),.2);display:flex;flex-flow:row nowrap;margin-bottom:var(--app-pane-padding);max-width:var(--search-box-max-width)}@media (max-width:480px){.eo-app-search .head .search .search-box{margin-top:var(--app-pane-padding)}}.eo-app-search .head .search .search-box p-autocomplete{background:transparent;border:0;flex:1 1 auto;outline:0}.eo-app-search .head .search .search-box p-autocomplete span.ui-autocomplete{width:100%}.eo-app-search .head .search .search-box input{border:0;box-sizing:border-box;font-size:var(--font-title);padding:calc(var(--app-pane-padding)/2);width:100%}.eo-app-search .head .search .search-box input::-ms-clear{display:none}.eo-app-search .head .search .search-box button[type=submit]{background:var(--color-accent);border:0;color:var(--color-white);font-size:var(--font-subhead);padding:0 var(--app-pane-padding)}.eo-app-search .head .search .search-box button.expert-mode{align-items:center;background:transparent;border:0;color:var(--text-color-hint);display:flex;padding:0 calc(var(--app-pane-padding)/2)}.eo-app-search .head .search .search-box button.expert-mode__reset{opacity:0;padding:0;transition:all .2s ease-in-out;width:0}.eo-app-search .head .search .search-box button.expert-mode__reset.active{opacity:1;padding:0 8px;width:40px}.eo-app-search .head .search .search-box button.expert-mode span{-webkit-animation:eoFadeIn var(--app-default-transition-duration);animation:eoFadeIn var(--app-default-transition-duration);display:none;padding:calc(var(--app-pane-padding)/4);white-space:nowrap}.eo-app-search .head .search .search-box button.expert-mode:hover{color:var(--color-accent)}.eo-app-search .head .search .search-box button.expert-mode:hover span{display:block}.eo-app-search .head .result{font-size:7em;line-height:1em;opacity:.1;position:absolute;right:var(--app-pane-padding);top:calc(var(--app-pane-padding)*2.5);z-index:1}@media (max-width:900px){.eo-app-search .head .result{font-size:3em;right:calc(var(--app-pane-padding)*3);top:var(--app-pane-padding)}}.eo-app-search .head .search-aggregator__loader{-webkit-animation:eoFadeIn .5s;animation:eoFadeIn .5s;position:absolute;right:13%;top:30%;z-index:11}@media (max-width:900px){.eo-app-search .head .search-aggregator__loader{top:5%}}.eo-app-search .head .close{position:absolute;right:var(--app-pane-padding);top:var(--app-pane-padding);z-index:2}.eo-app-search .body{background:rgba(var(--color-white-rgb),.2);flex:1 1 auto;position:relative}@media (max-width:1000px){.eo-app-search .body .summary-panel{bottom:0;display:flex;flex-flow:row nowrap;left:0!important;right:0!important;top:auto!important;width:auto!important}.eo-app-search .body .summary-panel .headline:not(.stored-query),.eo-app-search .body .summary-panel .section{display:none}.eo-app-search .body .summary-panel .headline.stored-query{align-items:center;display:flex;margin-bottom:0;padding:0 var(--app-pane-padding)}.eo-app-search .body .summary-panel .headline.stored-query .pre{display:none}.eo-app-search .body .summary-panel .headline.stored-query .stored-query-name{font-size:var(--font-subhead)!important}.eo-app-search .body .summary-panel .actions{flex:1 1 auto}.eo-app-search .body .ui-tabview .ui-tabview-panels{padding-left:0!important;padding-right:0!important}.eo-app-search .body .ui-tabview.tab-main{bottom:50px!important}}.eo-app-search .body .summary-panel{background:rgba(var(--color-black-rgb),.06);box-sizing:border-box;position:absolute;right:var(--app-pane-padding);top:calc(var(--app-pane-padding) + 35px);width:var(--search-summary-width)}.eo-app-search .body .summary-panel .query-types{max-height:calc(100vh - 290px);overflow:auto}.eo-app-search .body .summary-panel .headline{color:var(--text-color-caption);font-size:var(--font-subhead);font-weight:var(--font-weight-light);line-height:1em;margin-bottom:calc(var(--app-pane-padding)/2);padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .summary-panel .headline.stored-query{background:var(--color-primary-3);color:var(--color-white);font-size:var(--font-body)}.eo-app-search .body .summary-panel .headline.stored-query .stored-query-name{font-size:var(--font-title);line-height:1.2em;padding:calc(var(--app-pane-padding)/2) 0}.eo-app-search .body .summary-panel .empty-search{color:var(--text-color-caption);padding:var(--app-pane-padding) calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/2)}.eo-app-search .body .summary-panel .section{max-height:calc(100vh - 280px);overflow-y:auto;padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .summary-panel .section .title{border-bottom:1px solid rgba(var(--color-black-rgb),.1);color:var(--text-color-caption);padding-bottom:calc(var(--app-pane-padding)/4)}.eo-app-search .body .summary-panel .filter{align-items:center;background:rgba(var(--color-white-rgb),.6);display:flex;flex:1;flex-direction:row;margin-top:4px;min-height:0;min-width:0}.eo-app-search .body .summary-panel .filter .label{display:inline-block;flex:1 1 auto;max-width:none;overflow:hidden;padding:0 0 0 calc(var(--app-pane-padding)/4);text-overflow:ellipsis;white-space:nowrap}.eo-app-search .body .summary-panel .filter eo-icon{box-sizing:border-box;color:var(--text-color-hint);cursor:pointer;flex:0 0 auto;padding:calc(var(--app-pane-padding)/4)}.eo-app-search .body .summary-panel .filter eo-icon:hover{color:var(--text-color-caption)}.eo-app-search .body .summary-panel .actions{display:flex;justify-content:flex-end;padding:calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/2 - 2px)}.eo-app-search .body .summary-panel .actions button{font-size:var(--font-hint);line-height:1em;margin:0 2px}.eo-app-search .body .ui-tabview.tab-main{bottom:0;display:flex;flex-flow:column;left:0;position:absolute;right:0;top:0}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav{background:var(--color-primary-2);border-color:transparent;color:var(--color-white);display:flex;flex:0 0 auto;padding:0 calc(var(--app-pane-padding) - 2px)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav>li a{color:rgba(var(--color-white-rgb),.54)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav>li.ui-state-active a{color:var(--color-white)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav li:not(.ui-state-active):not(.ui-state-disabled):hover{border-color:rgba(var(--color-white-rgb),.54)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav li:not(.ui-state-active):not(.ui-state-disabled):hover a{color:var(--color-white)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-panels{flex:1 1 auto;overflow-y:auto;padding-right:calc(var(--app-pane-padding)*2 + var(--search-summary-width));position:relative}.eo-app-search .body .ui-tabview .ui-tabview-panel{padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .ui-tabview .ui-tabview-panel h2{color:var(--text-color-caption);font-size:var(--font-title);font-weight:var(--font-weight-light);margin:0 0 calc(var(--app-pane-padding)*1.5) 0;padding:0}.eo-app-search .body .rest-box-container{align-items:stretch;display:flex;flex-flow:row wrap}.eo-app-search .body .rest-box-container .rest-box{background:var(--color-white);flex:1 1 auto;margin:calc(var(--app-pane-padding)/2);padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .rest-box-container .rest-box h3{color:var(--text-color-caption);font-size:var(--font-caption);font-weight:var(--font-weight-normal);margin:0 0 var(--app-pane-padding) 0;padding:0}.eo-app-search .body .rest-box-container .rest-box .rest-item{align-items:center;color:var(--text-color-body);display:flex;flex:1 1 auto;flex-flow:row nowrap;margin:0 calc(var(--app-pane-padding)/4);padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .rest-box-container .rest-box .rest-item.selected{background:var(--color-primary-3);color:var(--color-white)}.eo-app-search .body .rest-box-container .rest-box .rest-item:not(.selected):hover{background:var(--list-item-hover-background)}.eo-app-search .body .rest-box-container .rest-box .label{flex:1 1 auto;padding:0 calc(var(--app-pane-padding)/2)}.eo-app-search .body .rest-box-container .rest-box .count{font-size:var(--font-caption);font-weight:var(--font-weight-bold);min-width:30px;text-align:right}.eo-app-search .body .object-types .group .type{align-items:center;display:flex;flex-flow:row nowrap;padding:1px 0}.eo-app-search .body .object-types .group .type.context{font-weight:var(--font-weight-bold)}.eo-app-search .body .object-types .group .type.folder .item eo-icon{background:rgba(var(--color-black-rgb),.15)}.eo-app-search .body .object-types .group .type.folder .item:hover eo-icon{background:rgba(var(--color-white-rgb),.3)}.eo-app-search .body .object-types .group .type.abstract .item{color:var(--text-color-caption)}.eo-app-search .body .object-types .group .type.abstract .item:hover{background:var(--color-primary-3);color:var(--panel-background)}.eo-app-search .body .object-types .group .type .item{align-items:center;border-radius:2px;color:var(--text-color-body);cursor:default;display:flex;flex:1 1 auto;flex-flow:row nowrap;margin:0 calc(var(--app-pane-padding)/4);padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .object-types .group .type .item eo-icon{-moz-transition:none;-o-transition:none;-webkit-transition:none;border-radius:2px;box-sizing:content-box;color:var(--text-color-caption);height:16px;padding:2px;transition:none;width:16px}.eo-app-search .body .object-types .type .item{cursor:pointer}.eo-app-search .body .object-types .type .item:hover{background:var(--color-primary-3);color:var(--panel-background)}.eo-app-search .body .object-types .type .item:hover eo-icon{color:var(--panel-background)}.eo-app-search .body .indexdata-search{padding:calc(var(--app-pane-padding)/2) 0 0 calc(var(--app-pane-padding)/2)}.eo-app-search .body .indexdata-search h2{align-items:center;display:flex;flex-flow:row}.eo-app-search .body .indexdata-search h2 eo-icon{margin:0 calc(var(--app-pane-padding)/2)}.eo-app-search .body .indexdata-search h2 span{padding:0 calc(var(--app-pane-padding)/4)}.eo-app-search .body .indexdata-search .context{margin-bottom:var(--app-pane-padding)}.eo-app-search .body .indexdata-search .context .context-select{align-items:center;display:flex;flex-flow:row wrap;padding-bottom:1px}.eo-app-search .body .indexdata-search .context .context-select .spacer{width:var(--app-pane-padding)}.eo-app-search .body .indexdata-search eo-object-form{border:1px solid rgba(var(--color-black-rgb),.1)}.eo-app-search .body .indexdata-search eo-object-form.dark{background-color:var(--color-primary-2);display:block}.eo-app-search.rtl{-webkit-animation:appSearchAppearRTL var(--app-default-transition-duration);animation:appSearchAppearRTL var(--app-default-transition-duration);left:0;right:0}.eo-app-search.rtl .body .summary-panel,.eo-app-search.rtl .head .result{left:var(--app-pane-padding);right:auto}.eo-app-search.rtl .body .ui-tabview .ui-tabview-panels{padding-bottom:0;padding-left:calc(var(--app-pane-padding)*2 + var(--search-summary-width));padding-right:0;padding-top:0}.eo-app-search.expert .head .result{display:none}.eo-app-search.expert .head .search .search-box{max-width:100%}.eo-app-search.expert .head .search .search-box button.expert-mode{color:var(--color-accent)}.eo-app-search.expert .body{background:var(--color-primary-2);color:var(--color-white);display:flex;flex-flow:column}.eo-app-search.expert .body h2{flex:0 0 auto;font-size:var(--font-title);font-weight:var(--font-weight-light);margin:var(--app-pane-padding) 0;padding:0}.eo-app-search.expert .body h2 span{border-bottom:4px solid var(--color-accent);padding:calc(var(--app-pane-padding)/2) 0 calc(var(--app-pane-padding)/2) var(--app-pane-padding)}.eo-app-search.expert .body .intro{flex:0 0 auto;padding:var(--app-pane-padding)}.eo-app-search.expert .body .empty{flex:0 0 auto;padding:0 var(--app-pane-padding)}.eo-app-search.expert .body .empty span{background:var(--color-error);border-radius:2px;color:var(--color-white);padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .fields h2{border-bottom:1px solid rgba(var(--color-white-rgb),.3);flex:0 0 auto;margin:calc(var(--app-pane-padding)/2);padding:calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .fields .item{-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-white-rgb),.06);border-radius:2px;cursor:pointer;margin-bottom:4px;padding:calc(var(--app-pane-padding)/2);transition:all var(--app-default-transition-duration) ease-in-out}.eo-app-search.expert .body .fields .item.selected,.eo-app-search.expert .body .fields .item:hover{background:rgba(var(--color-white-rgb),.2)}.eo-app-search.expert .body .fields .item .label{display:flex;font-weight:var(--font-weight-bold);justify-content:space-between}.eo-app-search.expert .body .fields .item .label .type{font-size:var(--font-hint);opacity:.5}.eo-app-search.expert .body .fields .item .data{opacity:.75}.eo-app-search.expert .body .base-params{padding:calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .base-params .items{display:flex;flex-flow:row wrap;padding:calc(var(--app-pane-padding)/4)}.eo-app-search.expert .body .base-params .items .item{margin:calc(var(--app-pane-padding)/4)}.eo-app-search.expert .body .system-types{align-items:stretch;display:flex;flex:1 1 auto;flex-flow:row;justify-content:flex-start;padding:calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .system-types .column{box-sizing:border-box;display:flex;flex:0 0 33%;flex-flow:column}.eo-app-search.expert .body .system-types .column .items{flex:1 1 auto;overflow-y:auto;padding:calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .system-types .column .items::-webkit-scrollbar-thumb{background-color:rgba(var(--color-white-rgb),.1)}.eo-app-search .body .rest-box-container .rest-box .rest-item .checkbox,.eo-app-search .body .rest-box-container .rest-box .type .checkbox{border:1px solid var(--text-color-hint);border-radius:2px;cursor:pointer;height:20px;margin:0 calc(var(--app-pane-padding)/2);width:20px}.eo-app-search .body .rest-box-container .rest-box .rest-item .checkbox svg,.eo-app-search .body .rest-box-container .rest-box .type .checkbox svg{opacity:0}.eo-app-search .body .rest-box-container .rest-box .rest-item:not(.selected):hover .checkbox:hover,.eo-app-search .body .rest-box-container .rest-box .type:not(.selected):hover .checkbox:hover{border-color:var(--text-color-caption)}.eo-app-search .body .rest-box-container .rest-box .rest-item:not(.selected):hover .checkbox:hover svg,.eo-app-search .body .rest-box-container .rest-box .type:not(.selected):hover .checkbox:hover svg{fill:var(--text-color-body);opacity:.3}.eo-app-search .body .rest-box-container .rest-box .rest-item.selected .checkbox,.eo-app-search .body .rest-box-container .rest-box .type.selected .checkbox{background:var(--color-primary-3);border-color:var(--color-primary-3)}.eo-app-search .body .rest-box-container .rest-box .rest-item.selected .checkbox svg,.eo-app-search .body .rest-box-container .rest-box .type.selected .checkbox svg{fill:var(--color-white)!important;opacity:1}.eo-app-search .body .rest-box-container .rest-box .rest-item.saved .count,.eo-app-search .body .rest-box-container .rest-box .type.saved .count{font-weight:var(--font-weight-normal)}@-webkit-keyframes appSearchAppear{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes appSearchAppear{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@-webkit-keyframes appSearchAppearRTL{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes appSearchAppearRTL{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}"]
+                styles: [".eo-app-search-dialog{bottom:0!important;max-width:100%!important;min-width:500px!important;top:0!important;width:80%!important}[dir=ltr] .eo-app-search-dialog{left:0!important}[dir=rtl] .eo-app-search-dialog{left:auto!important}[dir=ltr] .eo-app-search-dialog{right:auto!important}[dir=rtl] .eo-app-search-dialog{right:0!important}[dir=ltr] .eo-app-search-dialog{-webkit-animation:appSearchAppear calc(var(--app-default-transition-duration)*2)!important;animation:appSearchAppear calc(var(--app-default-transition-duration)*2)!important}[dir=rtl] .eo-app-search-dialog{-webkit-animation:appSearchAppearRTL calc(var(--app-default-transition-duration)*2)!important;animation:appSearchAppearRTL calc(var(--app-default-transition-duration)*2)!important}@media (max-width:500px){.eo-app-search-dialog{min-width:inherit;width:100%!important}}.eo-app-search-dialog .eo-dialog-content{max-height:100%;overflow:inherit}.eo-app-search-dialog .eo-dialog-header{display:none}.eo-app-search.rtl .head .close{left:var(--app-pane-padding);right:auto}.eo-app-search.rtl .body .indexdata-search h2 eo-icon{transform:rotate(180deg)}.eo-app-search{--search-box-max-width:600px;--search-min-width:500px;--search-summary-width:350px;background:var(--panel-background-grey);bottom:0;display:flex;flex:1;flex-direction:column;left:0;min-height:0;min-width:0;position:absolute;right:0;top:0}.eo-app-search .head{background:var(--color-primary-2);color:var(--color-white);display:flex;flex:0 0 auto;flex-flow:row nowrap;padding:var(--app-pane-padding) calc(var(--app-pane-padding)/2) 0 calc(var(--app-pane-padding)/2);position:relative}.eo-app-search .head .search{flex:1 1 auto;justify-content:space-between;margin:0 calc(var(--app-pane-padding)/2);z-index:2}.eo-app-search .head .search .title{font-size:var(--font-display);font-weight:var(--font-weight-light);line-height:1em;min-height:1em}@media (max-width:480px){.eo-app-search .head .search .title{font-size:var(--font-title)}}.eo-app-search .head .search .query-scope{margin:calc(var(--app-pane-padding)*2) 0 0 0;max-width:var(--search-box-max-width);min-width:var(--search-min-width)}.eo-app-search .head .search .search-box{align-items:stretch;background:var(--color-white);box-shadow:0 2px 2px 0 rgba(var(--color-black-rgb),.2);display:flex;flex-flow:row nowrap;margin-bottom:var(--app-pane-padding);max-width:var(--search-box-max-width)}@media (max-width:480px){.eo-app-search .head .search .search-box{margin-top:var(--app-pane-padding)}}.eo-app-search .head .search .search-box p-autocomplete{background:transparent;border:0;flex:1 1 auto;outline:0}.eo-app-search .head .search .search-box p-autocomplete span.ui-autocomplete{width:100%}.eo-app-search .head .search .search-box input{border:0;box-sizing:border-box;font-size:var(--font-title);padding:calc(var(--app-pane-padding)/2);width:100%}.eo-app-search .head .search .search-box input::-ms-clear{display:none}.eo-app-search .head .search .search-box button[type=submit]{background:var(--color-accent);border:0;color:var(--color-white);font-size:var(--font-subhead);padding:0 var(--app-pane-padding)}.eo-app-search .head .search .search-box button.expert-mode{align-items:center;background:transparent;border:0;color:var(--text-color-hint);display:flex;padding:0 calc(var(--app-pane-padding)/2)}.eo-app-search .head .search .search-box button.expert-mode__reset{opacity:0;padding:0;transition:all .2s ease-in-out;width:0}.eo-app-search .head .search .search-box button.expert-mode__reset.active{opacity:1;padding:0 8px;width:40px}.eo-app-search .head .search .search-box button.expert-mode span{-webkit-animation:eoFadeIn var(--app-default-transition-duration);animation:eoFadeIn var(--app-default-transition-duration);display:none;padding:calc(var(--app-pane-padding)/4);white-space:nowrap}.eo-app-search .head .search .search-box button.expert-mode:hover{color:var(--color-accent)}.eo-app-search .head .search .search-box button.expert-mode:hover span{display:block}.eo-app-search .head .result{font-size:7em;line-height:1em;opacity:.1;position:absolute;right:var(--app-pane-padding);top:calc(var(--app-pane-padding)*2.5);z-index:1}@media (max-width:900px){.eo-app-search .head .result{font-size:3em;right:calc(var(--app-pane-padding)*3);top:var(--app-pane-padding)}}.eo-app-search .head .search-aggregator__loader{-webkit-animation:eoFadeIn .5s;animation:eoFadeIn .5s;position:absolute;right:13%;top:30%;z-index:11}@media (max-width:900px){.eo-app-search .head .search-aggregator__loader{top:5%}}.eo-app-search .head .close{position:absolute;right:var(--app-pane-padding);top:var(--app-pane-padding);z-index:2}.eo-app-search .body{background:rgba(var(--color-white-rgb),.2);flex:1 1 auto;position:relative}@media (max-width:1000px){.eo-app-search .body .summary-panel{bottom:0;display:flex;flex-flow:row nowrap;left:0!important;right:0!important;top:auto!important;width:auto!important}.eo-app-search .body .summary-panel .headline:not(.stored-query),.eo-app-search .body .summary-panel .section{display:none}.eo-app-search .body .summary-panel .headline.stored-query{align-items:center;display:flex;margin-bottom:0;padding:0 var(--app-pane-padding)}.eo-app-search .body .summary-panel .headline.stored-query .pre{display:none}.eo-app-search .body .summary-panel .headline.stored-query .stored-query-name{font-size:var(--font-subhead)!important}.eo-app-search .body .summary-panel .actions{flex:1 1 auto}.eo-app-search .body .ui-tabview .ui-tabview-panels{padding-left:0!important;padding-right:0!important}.eo-app-search .body .ui-tabview.tab-main{bottom:50px!important}}.eo-app-search .body .summary-panel{background:rgba(var(--color-black-rgb),.06);box-sizing:border-box;position:absolute;right:var(--app-pane-padding);top:calc(var(--app-pane-padding) + 35px);width:var(--search-summary-width)}.eo-app-search .body .summary-panel .query-types{max-height:calc(100vh - 290px);overflow:auto}.eo-app-search .body .summary-panel .headline{color:var(--text-color-caption);font-size:var(--font-subhead);font-weight:var(--font-weight-light);line-height:1em;margin-bottom:calc(var(--app-pane-padding)/2);padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .summary-panel .headline.stored-query{background:var(--color-primary-3);color:var(--color-white);font-size:var(--font-body)}.eo-app-search .body .summary-panel .headline.stored-query .stored-query-name{font-size:var(--font-title);line-height:1.2em;padding:calc(var(--app-pane-padding)/2) 0}.eo-app-search .body .summary-panel .empty-search{color:var(--text-color-caption);padding:var(--app-pane-padding) calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/2)}.eo-app-search .body .summary-panel .section{max-height:calc(100vh - 280px);overflow-y:auto;padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .summary-panel .section .title{border-bottom:1px solid rgba(var(--color-black-rgb),.1);color:var(--text-color-caption);padding-bottom:calc(var(--app-pane-padding)/4)}.eo-app-search .body .summary-panel .filter{align-items:center;background:rgba(var(--color-white-rgb),.6);display:flex;flex:1;flex-direction:row;margin-top:4px;min-height:0;min-width:0}.eo-app-search .body .summary-panel .filter .label{display:inline-block;flex:1 1 auto;max-width:none;overflow:hidden;padding:0 0 0 calc(var(--app-pane-padding)/4);text-overflow:ellipsis;white-space:nowrap}.eo-app-search .body .summary-panel .filter eo-icon{box-sizing:border-box;color:var(--text-color-hint);cursor:pointer;flex:0 0 auto;padding:calc(var(--app-pane-padding)/4)}.eo-app-search .body .summary-panel .filter eo-icon:hover{color:var(--text-color-caption)}.eo-app-search .body .summary-panel .actions{display:flex;justify-content:flex-end;padding:calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/2 - 2px)}.eo-app-search .body .summary-panel .actions button{font-size:var(--font-hint);line-height:1em;margin:0 2px}.eo-app-search .body .ui-tabview.tab-main{bottom:0;display:flex;flex-flow:column;left:0;position:absolute;right:0;top:0}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav{background:var(--color-primary-2);border-color:transparent;color:var(--color-white);display:flex;flex:0 0 auto;padding:0 calc(var(--app-pane-padding) - 2px)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav>li a{color:rgba(var(--color-white-rgb),.54)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav>li.ui-state-active a{color:var(--color-white)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav li:not(.ui-state-active):not(.ui-state-disabled):hover{border-color:rgba(var(--color-white-rgb),.54)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-nav li:not(.ui-state-active):not(.ui-state-disabled):hover a{color:var(--color-white)}.eo-app-search .body .ui-tabview.tab-main>.ui-tabview-panels{flex:1 1 auto;overflow-y:auto;padding-right:calc(var(--app-pane-padding)*2 + var(--search-summary-width));position:relative}.eo-app-search .body .ui-tabview .ui-tabview-panel{padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .ui-tabview .ui-tabview-panel h2{color:var(--text-color-caption);font-size:var(--font-title);font-weight:var(--font-weight-light);margin:0 0 calc(var(--app-pane-padding)*1.5) 0;padding:0}.eo-app-search .body .rest-box-container{align-items:stretch;display:flex;flex-flow:row wrap}.eo-app-search .body .rest-box-container .rest-box{background:var(--color-white);flex:1 1 auto;margin:calc(var(--app-pane-padding)/2);padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .rest-box-container .rest-box h3{color:var(--text-color-caption);font-size:var(--font-caption);font-weight:var(--font-weight-normal);margin:0 0 var(--app-pane-padding) 0;padding:0}.eo-app-search .body .rest-box-container .rest-box .rest-item{align-items:center;color:var(--text-color-body);display:flex;flex:1 1 auto;flex-flow:row nowrap;margin:0 calc(var(--app-pane-padding)/4);padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .rest-box-container .rest-box .rest-item.selected{background:var(--color-primary-3);color:var(--color-white)}.eo-app-search .body .rest-box-container .rest-box .rest-item:not(.selected):hover{background:var(--list-item-hover-background)}.eo-app-search .body .rest-box-container .rest-box .label{flex:1 1 auto;padding:0 calc(var(--app-pane-padding)/2)}.eo-app-search .body .rest-box-container .rest-box .count{font-size:var(--font-caption);font-weight:var(--font-weight-bold);min-width:30px;text-align:right}.eo-app-search .body .object-types .group .type{align-items:center;display:flex;flex-flow:row nowrap;padding:1px 0}.eo-app-search .body .object-types .group .type.context{font-weight:var(--font-weight-bold)}.eo-app-search .body .object-types .group .type.folder .item eo-icon{background:rgba(var(--color-black-rgb),.15)}.eo-app-search .body .object-types .group .type.folder .item:hover eo-icon{background:rgba(var(--color-white-rgb),.3)}.eo-app-search .body .object-types .group .type.abstract .item{color:var(--text-color-caption)}.eo-app-search .body .object-types .group .type.abstract .item:hover{background:var(--color-primary-3);color:var(--panel-background)}.eo-app-search .body .object-types .group .type .item{align-items:center;border-radius:2px;color:var(--text-color-body);cursor:default;display:flex;flex:1 1 auto;flex-flow:row nowrap;margin:0 calc(var(--app-pane-padding)/4);padding:calc(var(--app-pane-padding)/2)}.eo-app-search .body .object-types .group .type .item eo-icon{-moz-transition:none;-o-transition:none;-webkit-transition:none;border-radius:2px;box-sizing:content-box;color:var(--text-color-caption);height:16px;padding:2px;transition:none;width:16px}.eo-app-search .body .object-types .type .item{cursor:pointer}.eo-app-search .body .object-types .type .item:hover{background:var(--color-primary-3);color:var(--panel-background)}.eo-app-search .body .object-types .type .item:hover eo-icon{color:var(--panel-background)}.eo-app-search .body .indexdata-search{padding:calc(var(--app-pane-padding)/2) 0 0 calc(var(--app-pane-padding)/2)}.eo-app-search .body .indexdata-search h2{align-items:center;display:flex;flex-flow:row}.eo-app-search .body .indexdata-search h2 eo-icon{margin:0 calc(var(--app-pane-padding)/2)}.eo-app-search .body .indexdata-search h2 span{padding:0 calc(var(--app-pane-padding)/4)}.eo-app-search .body .indexdata-search .context{margin-bottom:var(--app-pane-padding)}.eo-app-search .body .indexdata-search .context .context-select{align-items:center;display:flex;flex-flow:row wrap;padding-bottom:1px}.eo-app-search .body .indexdata-search .context .context-select .spacer{width:var(--app-pane-padding)}.eo-app-search .body .indexdata-search eo-object-form{border:1px solid rgba(var(--color-black-rgb),.1)}.eo-app-search .body .indexdata-search eo-object-form.dark{background-color:var(--color-primary-2);display:block}.eo-app-search.rtl{-webkit-animation:appSearchAppearRTL var(--app-default-transition-duration);animation:appSearchAppearRTL var(--app-default-transition-duration);left:0;right:0}.eo-app-search.rtl .body .summary-panel,.eo-app-search.rtl .head .result{left:var(--app-pane-padding);right:auto}.eo-app-search.rtl .body .ui-tabview .ui-tabview-panels{padding-bottom:0;padding-left:calc(var(--app-pane-padding)*2 + var(--search-summary-width));padding-right:0;padding-top:0}.eo-app-search.expert .head .result{display:none}.eo-app-search.expert .head .search .search-box{max-width:100%}.eo-app-search.expert .head .search .search-box button.expert-mode{color:var(--color-accent)}.eo-app-search.expert .body{background:var(--color-primary-2);color:var(--color-white);display:flex;flex-flow:column}.eo-app-search.expert .body h2{flex:0 0 auto;font-size:var(--font-title);font-weight:var(--font-weight-light);margin:var(--app-pane-padding) 0;padding:0}.eo-app-search.expert .body h2 span{border-bottom:4px solid var(--color-accent);padding:calc(var(--app-pane-padding)/2) 0 calc(var(--app-pane-padding)/2) var(--app-pane-padding)}.eo-app-search.expert .body .intro{flex:0 0 auto;padding:var(--app-pane-padding)}.eo-app-search.expert .body .empty{flex:0 0 auto;padding:0 var(--app-pane-padding)}.eo-app-search.expert .body .empty span{background:var(--color-error);border-radius:2px;color:var(--color-white);padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .fields h2{border-bottom:1px solid rgba(var(--color-white-rgb),.3);flex:0 0 auto;margin:calc(var(--app-pane-padding)/2);padding:calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .fields .item{-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-white-rgb),.06);border-radius:2px;cursor:pointer;margin-bottom:4px;padding:calc(var(--app-pane-padding)/2);transition:all var(--app-default-transition-duration) ease-in-out}.eo-app-search.expert .body .fields .item.selected,.eo-app-search.expert .body .fields .item:hover{background:rgba(var(--color-white-rgb),.2)}.eo-app-search.expert .body .fields .item .label{display:flex;font-weight:var(--font-weight-bold);justify-content:space-between}.eo-app-search.expert .body .fields .item .label .type{font-size:var(--font-hint);opacity:.5}.eo-app-search.expert .body .fields .item .data{opacity:.75}.eo-app-search.expert .body .base-params{padding:calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .base-params .items{display:flex;flex-flow:row wrap;padding:calc(var(--app-pane-padding)/4)}.eo-app-search.expert .body .base-params .items .item{margin:calc(var(--app-pane-padding)/4)}.eo-app-search.expert .body .system-types{align-items:stretch;display:flex;flex:1 1 auto;flex-flow:row;justify-content:flex-start;padding:calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .system-types .column{box-sizing:border-box;display:flex;flex:0 0 33%;flex-flow:column}.eo-app-search.expert .body .system-types .column .items{flex:1 1 auto;overflow-y:auto;padding:calc(var(--app-pane-padding)/2)}.eo-app-search.expert .body .system-types .column .items::-webkit-scrollbar-thumb{background-color:rgba(var(--color-white-rgb),.1)}.eo-app-search .body .rest-box-container .rest-box .rest-item .checkbox,.eo-app-search .body .rest-box-container .rest-box .type .checkbox{border:1px solid var(--text-color-hint);border-radius:2px;cursor:pointer;height:20px;margin:0 calc(var(--app-pane-padding)/2);width:20px}.eo-app-search .body .rest-box-container .rest-box .rest-item .checkbox svg,.eo-app-search .body .rest-box-container .rest-box .type .checkbox svg{opacity:0}.eo-app-search .body .rest-box-container .rest-box .rest-item:not(.selected):hover .checkbox:hover,.eo-app-search .body .rest-box-container .rest-box .type:not(.selected):hover .checkbox:hover{border-color:var(--text-color-caption)}.eo-app-search .body .rest-box-container .rest-box .rest-item:not(.selected):hover .checkbox:hover svg,.eo-app-search .body .rest-box-container .rest-box .type:not(.selected):hover .checkbox:hover svg{fill:var(--text-color-body);opacity:.3}.eo-app-search .body .rest-box-container .rest-box .rest-item.selected .checkbox,.eo-app-search .body .rest-box-container .rest-box .type.selected .checkbox{background:var(--color-primary-3);border-color:var(--color-primary-3)}.eo-app-search .body .rest-box-container .rest-box .rest-item.selected .checkbox svg,.eo-app-search .body .rest-box-container .rest-box .type.selected .checkbox svg{fill:var(--color-white)!important;opacity:1}.eo-app-search .body .rest-box-container .rest-box .rest-item.saved .count,.eo-app-search .body .rest-box-container .rest-box .type.saved .count{font-weight:var(--font-weight-normal)}@-webkit-keyframes appSearchAppear{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes appSearchAppear{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@-webkit-keyframes appSearchAppearRTL{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes appSearchAppearRTL{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}"]
             },] }
 ];
 AppSearchComponent.ctorParameters = () => [
@@ -6124,7 +6163,7 @@ class DatepickerComponent {
     get year() {
         return this.datepickerService.year;
     }
-    set onylFutureDates(enabled) {
+    set onlyFutureDates(enabled) {
         this.datepickerService.futureOnly = enabled ? enabled : false;
     }
     get futureOnly() {
@@ -6139,6 +6178,9 @@ class DatepickerComponent {
             }
         }
     }
+    set useDatabaseMinimumTime(enabled) {
+        this.minYear = enabled ? 1753 : 0;
+    }
     onKeydownHandler(event) {
         let newDate;
         if (event.keyCode === 13) {
@@ -6277,7 +6319,7 @@ class DatepickerComponent {
 DatepickerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-datepicker',
-                template: "<div class=\"date-picker\">\r\n\r\n  <div class=\"select\">\r\n\r\n    <div class=\"year\">\r\n      <div class=\"back\">\r\n        <div class=\"current\" (click)=\"focusSelection()\">\r\n          <div class=\"d\">{{selected.date()}}</div>\r\n          <div>\r\n            <div class=\"m\">{{monthsShort[selected.month()]}}</div>\r\n            <div class=\"y\">{{selected.year()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input (keydown)=\"onInputKeydown($event)\" type=\"number\" eoYearRange [(ngModel)]=\"year\" [max]=\"maxYear\" (ngModelChange)=\"setYear($event)\" [ngModelOptions]=\"{standalone: true}\"/>\r\n      <div class=\"controls\">\r\n        <button class=\"icon white year-up\" (click)=\"increment(year)\" [disabled]=\"year === maxYear\">\r\n          <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n        </button>\r\n        <button class=\"icon white year-down\" (click)=\"decrement(year)\" [disabled]=\"year === minYear\">\r\n          <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"month\">\r\n      <span *ngFor=\"let _month of monthsShort; let _i = index\" (click)=\"setMonth(_i)\" [ngClass]=\"{current: monthInfo.month ==  _i}\" >{{_month}}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"calendar\">\r\n    <div class=\"week names\">\r\n      <div *ngFor=\"let _day of weekdaysShort\"><span class=\"day\">{{_day}}</span></div>\r\n    </div>\r\n\r\n    <div class=\"week\" *ngFor=\"let week of weeks; trackBy: trackByFn\">\r\n      <div *ngFor=\"let day of week.days; trackBy: trackByFn\">\r\n        <span class=\"day\" *ngIf=\"!day.disabled\" [ngClass]=\"{ today: day.isToday,\r\n        'different-month': !day.isCurrentMonth, selected: isSelectedDay(day.date) }\"\r\n              (click)=\"select(day.date)\" (dblclick)=\"select(day.date)\">{{day.number}}</span>\r\n        <span class=\"day disabled\" *ngIf=\"day.disabled\" [ngClass]=\"{ today: day.isToday,\r\n        'different-month': !day.isCurrentMonth, selected: isSelectedDay(day.date) }\">{{day.number}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"time\" *ngIf=\"withTime\">\r\n\r\n    <div class=\"value val-h\">{{timeToString(withAmPm && !inRange(time.h, 1, 12) ? time.h - 12 : time.h)}}</div>\r\n    <div class=\"controls ctrl-h\">\r\n      <button class=\"icon btn-up\" (click)=\"setTime({h: time.h + 1, m: time.m})\">\r\n        <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n      </button>\r\n      <button class=\"icon btn-down\" (click)=\"setTime({h: time.h - 1, m: time.m})\">\r\n        <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"value val-sep\">:</div>\r\n    <div class=\"value val-min\">{{timeToString(time.m)}}</div>\r\n    <div class=\"controls ctrl-min\">\r\n      <button class=\"icon btn-up\" (click)=\"setTime({h: time.h, m: time.m + 1})\">\r\n        <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n      </button>\r\n      <button class=\"icon btn-down\" (click)=\"setTime({h: time.h, m: time.m - 1})\">\r\n        <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"controls ctrl-am-pm\" *ngIf=\"withAmPm\">\r\n      <button class=\"\" [ngClass]=\"{primary: inRange(time.h)}\" (click)=\"setTime({h: inRange(time.h) ? time.h : time.h - 12, m: time.m})\">AM</button>\r\n      <button class=\"\" [ngClass]=\"{primary: !inRange(time.h)}\" (click)=\"setTime({h: inRange(time.h) ? time.h + 12 : time.h, m: time.m})\">PM</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button class=\"primary\" (click)=\"selectValue()\" translate>eo.datepicker.calendar.select</button>\r\n  </div>\r\n\r\n</div>\r\n",
+                template: "<div class=\"date-picker\">\r\n\r\n  <div class=\"select\">\r\n\r\n    <div class=\"year\">\r\n      <div class=\"back\">\r\n        <div class=\"current\" (click)=\"focusSelection()\">\r\n          <div class=\"d\">{{selected.date()}}</div>\r\n          <div>\r\n            <div class=\"m\">{{monthsShort[selected.month()]}}</div>\r\n            <div class=\"y\">{{selected.year()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input (keydown)=\"onInputKeydown($event)\" type=\"number\" eoYearRange [(ngModel)]=\"year\" [max]=\"maxYear\" (ngModelChange)=\"setYear($event)\" [ngModelOptions]=\"{standalone: true}\"/>\r\n      <div class=\"controls\">\r\n        <button class=\"icon white year-up\" (click)=\"increment(year)\" [disabled]=\"year >= maxYear\">\r\n          <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n        </button>\r\n        <button class=\"icon white year-down\" (click)=\"decrement(year)\" [disabled]=\"year <= minYear\">\r\n          <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"month\">\r\n      <span *ngFor=\"let _month of monthsShort; let _i = index\" (click)=\"setMonth(_i)\" [ngClass]=\"{current: monthInfo.month ==  _i}\" >{{_month}}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"calendar\">\r\n    <div class=\"week names\">\r\n      <div *ngFor=\"let _day of weekdaysShort\"><span class=\"day\">{{_day}}</span></div>\r\n    </div>\r\n\r\n    <div class=\"week\" *ngFor=\"let week of weeks; trackBy: trackByFn\">\r\n      <div *ngFor=\"let day of week.days; trackBy: trackByFn\">\r\n        <span class=\"day\" *ngIf=\"!day.disabled\" [ngClass]=\"{ today: day.isToday,\r\n        'different-month': !day.isCurrentMonth, selected: isSelectedDay(day.date) }\"\r\n              (click)=\"select(day.date)\" (dblclick)=\"select(day.date)\">{{day.number}}</span>\r\n        <span class=\"day disabled\" *ngIf=\"day.disabled\" [ngClass]=\"{ today: day.isToday,\r\n        'different-month': !day.isCurrentMonth, selected: isSelectedDay(day.date) }\">{{day.number}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"time\" *ngIf=\"withTime\">\r\n\r\n    <div class=\"value val-h\">{{timeToString(withAmPm && !inRange(time.h, 1, 12) ? time.h - 12 : time.h)}}</div>\r\n    <div class=\"controls ctrl-h\">\r\n      <button class=\"icon btn-up\" (click)=\"setTime({h: time.h + 1, m: time.m})\">\r\n        <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n      </button>\r\n      <button class=\"icon btn-down\" (click)=\"setTime({h: time.h - 1, m: time.m})\">\r\n        <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"value val-sep\">:</div>\r\n    <div class=\"value val-min\">{{timeToString(time.m)}}</div>\r\n    <div class=\"controls ctrl-min\">\r\n      <button class=\"icon btn-up\" (click)=\"setTime({h: time.h, m: time.m + 1})\">\r\n        <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n      </button>\r\n      <button class=\"icon btn-down\" (click)=\"setTime({h: time.h, m: time.m - 1})\">\r\n        <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"controls ctrl-am-pm\" *ngIf=\"withAmPm\">\r\n      <button class=\"\" [ngClass]=\"{primary: inRange(time.h)}\" (click)=\"setTime({h: inRange(time.h) ? time.h : time.h - 12, m: time.m})\">AM</button>\r\n      <button class=\"\" [ngClass]=\"{primary: !inRange(time.h)}\" (click)=\"setTime({h: inRange(time.h) ? time.h + 12 : time.h, m: time.m})\">PM</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button class=\"primary\" (click)=\"selectValue()\" translate>eo.datepicker.calendar.select</button>\r\n  </div>\r\n\r\n</div>\r\n",
                 providers: [DatepickerService],
                 styles: [".date-picker{background:var(--color-white);box-sizing:border-box;flex:1;flex-direction:column}.date-picker,.date-picker .controls{display:flex;min-height:0;min-width:0}.date-picker .controls{flex:none;flex-direction:column}.date-picker .controls button{border-radius:2px;margin:4px;padding:4px}.date-picker .controls button.icon{background:rgba(var(--color-black-rgb),0);color:var(--color-white);padding:0}.date-picker .controls button.icon:focus{border-color:rgba(var(--color-black-rgb),0)}.date-picker .controls button.icon 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;background:rgba(var(--color-white-rgb),.1);border-radius:2px;transition:all var(--app-default-transition-duration) ease-in-out}.date-picker .controls button.icon eo-icon svg{fill:var(--text-color-hint)}.date-picker .controls button.icon:first-child{transform:rotate(180deg)}.date-picker .select{background:var(--color-accent);color:var(--color-white);flex:0 0 auto}.date-picker .select .year{align-items:center;display:flex;flex:none;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;margin-bottom:var(--app-pane-padding);min-height:0;min-width:0;padding:0 var(--app-pane-padding)}.date-picker .select .year .back{align-items:flex-start;display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.date-picker .select .year .back .d{font-size:40px;line-height:1em;margin:0 4px}.date-picker .select .year .back .current{-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-radius:2px;cursor:pointer;display:flex;flex:none;flex-direction:row;min-height:0;min-width:0;padding:0 4px 0 0;transition:all var(--app-default-transition-duration) ease-in-out}.date-picker .select .year .back .current:hover{background:rgba(var(--color-white-rgb),.1)}.date-picker .select .year .back .current>div{align-items:flex-start;display:flex;flex:none;flex-direction:column;min-height:0;min-width:0}.date-picker .select .year input{background:rgba(var(--color-black-rgb),0);border:0;border-bottom:1px solid rgba(var(--color-black-rgb),0);color:var(--color-white);font-family:eoRoboto,sans-serif;font-size:50px;font-weight:var(--font-weight-light);line-height:1em;margin:0 calc(var(--app-pane-padding)/2);text-align:right;width:3em}.date-picker .select .year input::-moz-selection{background:rgba(var(--color-white-rgb),.3)}.date-picker .select .year input::selection{background:rgba(var(--color-white-rgb),.3)}.date-picker .select .year input:focus{border-bottom:1px solid rgba(var(--color-white-rgb),.5)}.date-picker .select .month{padding:0 var(--app-pane-padding)}.date-picker .select .month span{-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;border-bottom:2px solid rgba(var(--color-black-rgb),0);box-sizing:border-box;color:rgba(var(--color-white-rgb),.5);cursor:pointer;display:inline-block;font-size:var(--font-hint);font-weight:var(--font-weight-bold);margin-bottom:1px;padding:4px 0;text-align:center;transition:all var(--app-default-transition-duration) ease-in-out;width:3em}.date-picker .select .month span:hover{border-color:rgba(var(--color-white-rgb),.5);color:var(--color-white)}.date-picker .select .month span.current{border-color:var(--color-white);color:var(--color-white)}.date-picker .calendar{box-sizing:content-box;flex:1 1 auto;padding:var(--app-pane-padding)}.date-picker .time{align-items:center;display:flex;flex:none;flex-direction:row;justify-content:flex-start;min-height:0;min-width:0;padding:var(--app-pane-padding)}.date-picker .time .value{color:var(--text-color-caption);cursor:default;font-size:64px;font-weight:var(--font-weight-light);line-height:1em}.date-picker .time .value.val-h,.date-picker .time .value.val-min{min-width:1.2em}.date-picker .time .controls button.icon:focus{border:1px solid var(--color-primary-3)}.date-picker .time .controls button.icon eo-icon{background:rgba(var(--color-black-rgb),.05);color:var(--text-color-hint)}.date-picker .time .controls button.icon eo-icon:hover{background:rgba(var(--color-black-rgb),.1);color:var(--text-color-caption)}.date-picker .actions{display:flex;flex:none;flex-direction:row;justify-content:flex-end;min-height:0;min-width:0;padding:var(--app-pane-padding)}.week.names span:hover{background:rgba(var(--color-black-rgb),0);border-color:rgba(var(--color-black-rgb),0);cursor:default}.week{display:flex;flex:none;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;margin-bottom:3px;min-height:0;min-width:0}.week>div{text-align:center;width:2.5em}.week span{-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;border-bottom:1px solid rgba(var(--color-black-rgb),0);box-sizing:border-box;color:var(--text-color-body);cursor:pointer;display:inline-block;padding:.25em 0;text-align:center;transition:all var(--app-default-transition-duration) ease-in-out;width:2em}.week .day.disabled{background-color:rgba(0,0,0,.1);border-radius:2px;color:#fff;cursor:default}.week .day.disabled:hover{border-bottom:0}.week span.today,.week span:hover{border-bottom:1px solid var(--color-accent);color:var(--color-accent)}.week span.today{font-weight:var(--font-weight-bold)}.week span.selected,.week span.selected:hover{-webkit-border-radius:2px;background:var(--color-accent);border-radius:2px;color:var(--color-white)!important}.week span.different-month{color:var(--text-color-hint)}.week.names span{color:var(--color-accent)}"]
             },] }
@@ -6291,8 +6333,9 @@ DatepickerComponent.propDecorators = {
     onCanceled: [{ type: Output }],
     withTime: [{ type: Input }],
     withAmPm: [{ type: Input }],
-    onylFutureDates: [{ type: Input }],
+    onlyFutureDates: [{ type: Input }],
     date: [{ type: Input, args: ['date',] }],
+    useDatabaseMinimumTime: [{ type: Input }],
     onKeydownHandler: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
 };
 
@@ -6303,6 +6346,8 @@ class DatetimeComponent {
         this.showPicker = false;
         this.isValid = true;
         this.isWebEnv = EnvironmentEnaio.isWebEnvironment();
+        this.databaseMinimumTime = moment$2("1753-01-01T00:00:00");
+        this.validateDatabaseTimeRange = false; //Needed to validate datetime that is stored in a database (January 1, 1753 to December 31, 9999)
         this.propagateChange = (_) => {
         };
         this.datePipe = new LocaleDatePipe(translate);
@@ -6334,9 +6379,13 @@ class DatetimeComponent {
     }
     registerOnTouched(fn) {
     }
+    checkDatabaseTimeRange(m) {
+        return !this.validateDatabaseTimeRange ||
+            !m.isBefore(this.databaseMinimumTime);
+    }
     setValueFromMask() {
         let m = moment$2(this.innerValue, this.momentDatePattern);
-        this.isValid = m.isValid();
+        this.isValid = m.isValid() && this.checkDatabaseTimeRange(m);
         if (this.isValid) {
             this.value = m.toDate();
         }
@@ -6358,10 +6407,8 @@ class DatetimeComponent {
     setInnerValue() {
         if (this.value) {
             let m = moment$2(this.value);
-            this.isValid = m.isValid();
-            if (this.isValid) {
-                this.innerValue = m.format(this.momentDatePattern);
-            }
+            this.isValid = m.isValid() && this.checkDatabaseTimeRange(m);
+            this.innerValue = m.format(this.momentDatePattern);
         }
         else {
             this.innerValue = null;
@@ -6384,7 +6431,7 @@ class DatetimeComponent {
 DatetimeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-datetime',
-                template: "<!-- non web environments use native pickers -->\r\n<div class=\"eo-datepicker native\" lang=\"{{locale}}\" *ngIf=\"!isWebEnv; else web\">\r\n  <input type=\"date\" [(ngModel)]=\"value\" *ngIf=\"!withTime\" [readonly]=\"readonly\"/>\r\n  <input type=\"datetime-local\" [(ngModel)]=\"value\" [readonly]=\"readonly\" *ngIf=\"withTime\"/>\r\n</div>\r\n\r\n\r\n<ng-template #web>\r\n\r\n  <eo-dialog  [styleClass]=\"'date-picker'\" [title]=\"pickerTitle\" [(visible)]=\"showPicker\" *ngIf=\"showPicker\">\r\n    <eo-datepicker [date]=\"value\" [withTime]=\"withTime\" [withAmPm]=\"withAmPm\"\r\n                   [onylFutureDates]=\"onylFutureDates\"\r\n                   (onCanceled)=\"(showPicker = false)\"\r\n                   (onDateChanged)=\"setValueFromPicker($event)\"></eo-datepicker>\r\n  </eo-dialog>\r\n\r\n  <div class=\"eo-datepicker\">\r\n    <p-inputMask [mask]=\"maskPattern\" [(ngModel)]=\"innerValue\"\r\n                 (ngModelChange)=\"onMaskValueChange($event)\"\r\n                 (onComplete)=\"setValueFromMask()\"\r\n                 [readonly]=\"readonly\"\r\n                 [autoClear]=\"true\"\r\n                 [placeholder]=\"datePattern\"></p-inputMask>\r\n\r\n    <button class=\"ui-button\" (click)=\"(showPicker = true)\"  (keyup.arrowDown)=\"(showPicker = true)\" *ngIf=\"!readonly\">\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_datepicker.svg'\"></eo-icon>\r\n    </button>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n",
+                template: "<!-- non web environments use native pickers -->\r\n<div class=\"eo-datepicker native\" lang=\"{{locale}}\" *ngIf=\"!isWebEnv; else web\">\r\n  <input type=\"date\" [(ngModel)]=\"value\" *ngIf=\"!withTime\" [readonly]=\"readonly\"/>\r\n  <input type=\"datetime-local\" [(ngModel)]=\"value\" [readonly]=\"readonly\" *ngIf=\"withTime\"/>\r\n</div>\r\n\r\n\r\n<ng-template #web>\r\n\r\n  <eo-dialog  [styleClass]=\"'date-picker'\" [title]=\"pickerTitle\" [(visible)]=\"showPicker\" *ngIf=\"showPicker\">\r\n    <eo-datepicker [date]=\"value\" [withTime]=\"withTime\" [withAmPm]=\"withAmPm\"\r\n                   [onlyFutureDates]=\"onlyFutureDates\"\r\n                   [useDatabaseMinimumTime]=\"validateDatabaseTimeRange\"\r\n                   (onCanceled)=\"(showPicker = false)\"\r\n                   (onDateChanged)=\"setValueFromPicker($event)\"></eo-datepicker>\r\n  </eo-dialog>\r\n\r\n  <div class=\"eo-datepicker\">\r\n    <p-inputMask [mask]=\"maskPattern\" [(ngModel)]=\"innerValue\"\r\n                 (ngModelChange)=\"onMaskValueChange($event)\"\r\n                 (onComplete)=\"setValueFromMask()\"\r\n                 [readonly]=\"readonly\"\r\n                 [autoClear]=\"true\"\r\n                 [placeholder]=\"datePattern\"></p-inputMask>\r\n\r\n    <button class=\"ui-button\" (click)=\"(showPicker = true)\"  (keyup.arrowDown)=\"(showPicker = true)\" *ngIf=\"!readonly\">\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_datepicker.svg'\"></eo-icon>\r\n    </button>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -6406,7 +6453,8 @@ DatetimeComponent.ctorParameters = () => [
 DatetimeComponent.propDecorators = {
     readonly: [{ type: Input }],
     pickerTitle: [{ type: Input }],
-    onylFutureDates: [{ type: Input }],
+    onlyFutureDates: [{ type: Input }],
+    validateDatabaseTimeRange: [{ type: Input }],
     withTime: [{ type: Input }]
 };
 
@@ -8365,7 +8413,7 @@ class ObjectFormGroupComponent {
 ObjectFormGroupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-form-group',
-                template: "<div *ngIf=\"group\" [ngSwitch]=\"groupType\"\r\n     class=\"form-element {{group._eoFormGroup ? group._eoFormGroup.type : 'o2mControlWrap'}} align-{{(group._eoFormGroup && group._eoFormGroup.layout) ? group._eoFormGroup.layout.align : ''}}\"\r\n     [formGroup]=\"group\">\r\n\r\n  <!-- group stacks (tabs) -->\r\n  <p-tabView *ngSwitchCase=\"'stack'\">\r\n    <p-tabPanel header=\"{{getObjectFormGroup(group.controls[key]).label}}\"\r\n                headerStyleClass=\"dirty-{{group.controls[key].dirty}} invalid-{{group.controls[key].invalid}} \"\r\n                *ngFor=\"let key of group.controls | keys; index as i;\"\r\n                [selected]=\"i === 0\">\r\n\r\n      <div class=\"stack\" [ngClass]=\"{stackBase: group._eoFormGroup.label === 'data'}\">\r\n\r\n        <eo-form-element [element]=\"group.controls[key]\"\r\n                         *ngIf=\"getObjectFormControlWrapper(group.controls[key]); else stkgroup\"\r\n                         [situation]=\"situation\"\r\n                         [skipToggle]=\"skipToggle\"></eo-form-element>\r\n        <ng-template #stkgroup>\r\n          <eo-form-group [group]=\"group.controls[key]\" [noGroupLabels]=\"true\"\r\n                         [situation]=\"situation\"\r\n                         [skipToggle]=\"skipToggle\"></eo-form-group>\r\n        </ng-template>\r\n      </div>\r\n    </p-tabPanel>\r\n  </p-tabView>\r\n\r\n  <!-- group with legend -->\r\n  <div *ngSwitchCase=\"'fieldset'\" class=\"om-group fieldset\">\r\n    <div class=\"legend\"><span>{{group._eoFormGroup.label}}</span></div>\r\n\r\n    <div>\r\n      <ng-container *ngFor=\"let key of group.controls | keys\">\r\n        <eo-form-element [element]=\"group.controls[key]\"\r\n                         *ngIf=\"getObjectFormControlWrapper(group.controls[key]); else fsgroup\"\r\n                         [situation]=\"situation\"\r\n                         [skipToggle]=\"skipToggle\"></eo-form-element>\r\n        <ng-template #fsgroup>\r\n          <eo-form-group [group]=\"group.controls[key]\" [situation]=\"situation\" [skipToggle]=\"skipToggle\"></eo-form-group>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- group -->\r\n  <ng-container class=\"om-group\" *ngSwitchCase=\"'group'\">\r\n    <ng-container *ngFor=\"let key of group.controls | keys\">\r\n\r\n      <eo-form-element [element]=\"group.controls[key]\"\r\n                       *ngIf=\"getObjectFormControlWrapper(group.controls[key]); else omgroup\"\r\n                       [situation]=\"situation\"\r\n                       [skipToggle]=\"skipToggle\"></eo-form-element>\r\n      <ng-template #omgroup>\r\n        <eo-form-group [group]=\"group.controls[key]\" [situation]=\"situation\" [skipToggle]=\"skipToggle\"></eo-form-group>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n</div>\r\n",
+                template: "<div *ngIf=\"group\" [ngSwitch]=\"groupType\"\r\n     class=\"form-element {{group._eoFormGroup ? group._eoFormGroup.type : 'o2mControlWrap'}} align-{{(group._eoFormGroup && group._eoFormGroup.layout) ? group._eoFormGroup.layout.align : ''}}\"\r\n     [formGroup]=\"group\">\r\n\r\n  <!-- group stacks (tabs) -->\r\n  <p-tabView *ngSwitchCase=\"'stack'\">\r\n    <p-tabPanel header=\"{{getObjectFormGroup(group.controls[key]).label}}\"\r\n                headerStyleClass=\"dirty-{{group.controls[key].dirty}} invalid-{{group.controls[key].invalid}} \"\r\n                *ngFor=\"let key of group.controls | keys; index as i;\"\r\n                [selected]=\"i === 0\">\r\n\r\n      <div class=\"stack\" [ngClass]=\"{stackBase: group._eoFormGroup.label === 'data'}\">\r\n\r\n        <eo-form-element [element]=\"group.controls[key]\"\r\n                         [dmsObject]=\"dmsObject\"\r\n                         *ngIf=\"getObjectFormControlWrapper(group.controls[key]); else stkgroup\"\r\n                         [situation]=\"situation\"\r\n                         [skipToggle]=\"skipToggle\"></eo-form-element>\r\n        <ng-template #stkgroup>\r\n          <eo-form-group [dmsObject]=\"dmsObject\" [group]=\"group.controls[key]\" [noGroupLabels]=\"true\"\r\n                         [situation]=\"situation\"\r\n                         [skipToggle]=\"skipToggle\"></eo-form-group>\r\n        </ng-template>\r\n      </div>\r\n    </p-tabPanel>\r\n  </p-tabView>\r\n\r\n  <!-- group with legend -->\r\n  <div *ngSwitchCase=\"'fieldset'\" class=\"om-group fieldset\">\r\n    <div class=\"legend\"><span>{{group._eoFormGroup.label}}</span></div>\r\n\r\n    <div>\r\n      <ng-container *ngFor=\"let key of group.controls | keys\">\r\n        <eo-form-element [dmsObject]=\"dmsObject\" [element]=\"group.controls[key]\"\r\n                         *ngIf=\"getObjectFormControlWrapper(group.controls[key]); else fsgroup\"\r\n                         [situation]=\"situation\"\r\n                         [skipToggle]=\"skipToggle\"></eo-form-element>\r\n        <ng-template #fsgroup>\r\n          <eo-form-group [dmsObject]=\"dmsObject\" [group]=\"group.controls[key]\" [situation]=\"situation\" [skipToggle]=\"skipToggle\"></eo-form-group>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- group -->\r\n  <ng-container class=\"om-group\" *ngSwitchCase=\"'group'\">\r\n    <ng-container *ngFor=\"let key of group.controls | keys\">\r\n\r\n      <eo-form-element [dmsObject]=\"dmsObject\" [element]=\"group.controls[key]\"\r\n                       *ngIf=\"getObjectFormControlWrapper(group.controls[key]); else omgroup\"\r\n                       [situation]=\"situation\"\r\n                       [skipToggle]=\"skipToggle\"></eo-form-element>\r\n      <ng-template #omgroup>\r\n        <eo-form-group [dmsObject]=\"dmsObject\" [group]=\"group.controls[key]\" [situation]=\"situation\" [skipToggle]=\"skipToggle\"></eo-form-group>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n</div>\r\n",
                 // changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
                 styles: [":host{flex:1 1 auto}.dark .form-element .ui-tabview.ui-tabview-top>.ui-tabview-nav{border-color:rgba(var(--color-white-rgb),.2)}.dark .form-element.o2mGroupStack .ui-tabview.ui-tabview-top>.ui-tabview-nav li.ui-state-active{border-color:rgba(var(--color-white-rgb),1)}.dark .form-element .ui-state-active a,.dark .form-element .ui-widget-content .ui-state-active a,.dark .form-element .ui-widget-header .ui-state-active a{color:var(--color-white)}.dark .form-element .ui-state-default:not(.ui-state-active) a,.dark .form-element .ui-widget-content .ui-state-default:not(.ui-state-active) a,.dark .form-element .ui-widget-header .ui-state-default:not(.ui-state-active) a{color:rgba(var(--color-white-rgb),.3)}.form-element{box-sizing:border-box}.form-element.o2mGroupStack{background:rgba(var(--color-black-rgb),.02);border:1px solid rgba(var(--color-black-rgb),.1)}.form-element.o2mGroupStack .ui-tabview.ui-tabview-top>.ui-tabview-nav li.ui-state-active{border-color:rgba(var(--color-black-rgb),.26)}.form-element.o2mGroupStack .ui-tabview.ui-tabview-top>.ui-tabview-nav>li:not(.ui-state-active):not(.ui-state-disabled):hover{border-color:rgba(var(--color-black-rgb),.16)}.dark .form-element.o2mGroupStack .ui-tabview.ui-tabview-top>.ui-tabview-nav>li:not(.ui-state-active):not(.ui-state-disabled):hover{border-color:rgba(var(--color-white-rgb),.16)}.dark .form-element.o2mGroupStack .ui-tabview.ui-tabview-top>.ui-tabview-nav>li:not(.ui-state-active):not(.ui-state-disabled):hover a{color:rgba(var(--color-white-rgb),.7)}.form-element.o2mGroupStack .ui-tabview.ui-tabview-top>.ui-tabview-nav li.dirty-true:not(.invalid-true) a .ui-tabview-title{background-color:var(--color-dirty-background);color:var(--color-dirty-font)}.form-element.o2mGroupStack .ui-tabview.ui-tabview-top>.ui-tabview-nav li.invalid-true a .ui-tabview-title{background-color:var(--color-error);color:var(--color-white)}.form-element.o2mGroupStack .ui-tabview.ui-tabview-top>.ui-tabview-nav li.invalid-true a .ui-tabview-title:after{content:\"!\";margin-left:calc(var(--app-pane-padding)/2)}.form-element.o2mGroupStack p-tabview{width:100%}.form-element.o2mGroupStack.data{border:0}.form-element.align-column{align-content:stretch;align-items:stretch;display:flex;flex-flow:column nowrap;justify-content:flex-start}.form-element.align-column>*{flex:1 1 auto}.form-element.align-row{align-content:flex-start;align-items:flex-start;display:flex;flex-flow:row wrap;justify-content:flex-start}.form-element.align-row>*{flex:1 1 auto}.form-element.align-row>.fieldset>:not(.legend){align-content:flex-start;align-items:flex-start;display:flex;flex-flow:row wrap;justify-content:flex-start}.form-element.align-row>.fieldset>:not(.legend) eo-form-group{flex:1 1 auto;min-width:200px}.form-element .stackBase{padding:var(--app-pane-padding)}.form-element .stackBase>eo-form-group>.form-element>.fieldset{background-color:transparent;border:0;margin:0;padding:0}.form-element .stackBase>eo-form-group>.form-element>.fieldset>.legend{display:none}"]
@@ -8374,6 +8422,7 @@ ObjectFormGroupComponent.decorators = [
 ObjectFormGroupComponent.propDecorators = {
     situation: [{ type: Input }],
     skipToggle: [{ type: Input }],
+    dmsObject: [{ type: Input }],
     groupd: [{ type: Input, args: ['group',] }],
     noGroupLabels: [{ type: Input }]
 };
@@ -9570,7 +9619,7 @@ class ObjectFormComponent extends UnsubscribeOnDestroy {
 ObjectFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-object-form',
-                template: "<div class=\"eo-object-form\" *ngIf=\"form && formOptions\" [formGroup]=\"form\" eoRtlAware>\r\n  <div class=\"form-element-wrap core\">\r\n    <eo-form-group [group]=\"form.get('core')\" [situation]=\"formOptions.formModel.situation\"></eo-form-group>\r\n  </div>\r\n  <div class=\"form-element-wrap data\">\r\n    <eo-form-group [group]=\"form.get('data')\" [situation]=\"formOptions.formModel.situation\"></eo-form-group>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n",
+                template: "<div class=\"eo-object-form\" *ngIf=\"form && formOptions\" [formGroup]=\"form\" eoRtlAware>\r\n  <div class=\"form-element-wrap core\">\r\n    <eo-form-group [group]=\"form.get('core')\" [situation]=\"formOptions.formModel.situation\"></eo-form-group>\r\n  </div>\r\n  <div class=\"form-element-wrap data\">\r\n    <eo-form-group [dmsObject]=\"dmsObject\" [group]=\"form.get('data')\" [situation]=\"formOptions.formModel.situation\"></eo-form-group>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n",
                 // define 'child only' services for the form without setting it up on the module
                 // which would cause them to be propagated to the whole application
                 providers: [ObjectFormScriptService],
@@ -9592,6 +9641,7 @@ ObjectFormComponent.propDecorators = {
     isInnerTableForm: [{ type: Input }],
     statusChanged: [{ type: Output }],
     onFormReady: [{ type: Output }],
+    dmsObject: [{ type: Input }],
     options: [{ type: Input, args: ['formOptions',] }]
 };
 
@@ -9669,6 +9719,9 @@ class ObjectFormEditComponent {
             this.createObjectForm(dmsObject);
         }
     }
+    get dmsObject() {
+        return this._dmsObject;
+    }
     startPending() {
         // because this method will be called every time the form status changes,
         // pending task will only be started once until it was finished
@@ -9777,7 +9830,7 @@ class ObjectFormEditComponent {
 ObjectFormEditComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-object-form-edit',
-                template: "<div class=\"object-form-edit\" [ngClass]=\"{invalid: formState?.invalid === true}\" [eoShortcuts]=\"shortcuts\">\r\n  <eo-object-form [formOptions]=\"formOptions\" *ngIf=\"formOptions\"\r\n                  (statusChanged)=\"onFormStatusChanged($event)\"></eo-object-form>\r\n\r\n  <div class=\"form-controls\" *ngIf=\"controls.visible\">\r\n\r\n    <div class=\"err-msg\" *ngIf=\"formState?.invalid\" translate>eo.object.indexdata.form.invalid</div>\r\n\r\n    <div class=\"buttons\">\r\n\r\n      <button class=\"secondary\" (click)=\"reset()\" [disabled]=\"controls.saving\" translate>eo.object.indexdata.reset</button>\r\n      <button class=\"primary\" [ngClass]=\"{spinner: controls.saving}\"\r\n              [disabled]=\"formState?.invalid || controls.saving\"\r\n              (click)=\"save()\" translate>eo.object.indexdata.save</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<eo-dialog [title]=\"('eo.object.indexdata.save.conflict.dialog.title' | translate : {modifier: conflictError?.dmsobject.modified.by.firstname + ' ' + conflictError?.dmsobject.modified.by.lastname})\" \r\n  (hide)=\"controls.saving = false;\" [(visible)]=\"showConflictDialog\" [focusOnShow]=\"false\" [minWidth]=\"400\" [styleClass]=\"'conflict__dialog'\">\r\n\r\n  <div class=\"action-buttons conflict--action-buttons flex-row\">\r\n    <button type=\"button\" class=\"button cancel\" (click)=\"cancelSaving()\"\r\n      translate>eo.object.indexdata.save.cancel</button>\r\n    <button type=\"button\" class=\"button cancel\" (click)=\"showConflictChanges()\"\r\n      translate>eo.object.indexdata.save.changes</button>\r\n    <button type=\"button\" (click)=\"save(true); closeConflictDialog();\" class=\"button primary\"\r\n      translate>eo.object.indexdata.save</button>\r\n  </div>\r\n</eo-dialog>\r\n",
+                template: "<div class=\"object-form-edit\" [ngClass]=\"{invalid: formState?.invalid === true}\" [eoShortcuts]=\"shortcuts\">\r\n  <eo-object-form [dmsObject]=\"dmsObject\" [formOptions]=\"formOptions\" *ngIf=\"formOptions\"\r\n                  (statusChanged)=\"onFormStatusChanged($event)\"></eo-object-form>\r\n\r\n  <div class=\"form-controls\" *ngIf=\"controls.visible\">\r\n\r\n    <div class=\"err-msg\" *ngIf=\"formState?.invalid\" translate>eo.object.indexdata.form.invalid</div>\r\n\r\n    <div class=\"buttons\">\r\n\r\n      <button class=\"secondary\" (click)=\"reset()\" [disabled]=\"controls.saving\" translate>eo.object.indexdata.reset</button>\r\n      <button class=\"primary\" [ngClass]=\"{spinner: controls.saving}\"\r\n              [disabled]=\"formState?.invalid || controls.saving\"\r\n              (click)=\"save()\" translate>eo.object.indexdata.save</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<eo-dialog [title]=\"('eo.object.indexdata.save.conflict.dialog.title' | translate : {modifier: conflictError?.dmsobject.modified.by.firstname + ' ' + conflictError?.dmsobject.modified.by.lastname})\"\r\n  (hide)=\"controls.saving = false;\" [(visible)]=\"showConflictDialog\" [minWidth]=\"400\" [styleClass]=\"'conflict__dialog'\">\r\n\r\n  <div class=\"action-buttons conflict--action-buttons flex-row\">\r\n    <button type=\"button\" class=\"button cancel\" (click)=\"cancelSaving()\"\r\n      translate>eo.object.indexdata.save.cancel</button>\r\n    <button type=\"button\" class=\"button cancel\" (click)=\"showConflictChanges()\"\r\n      translate>eo.object.indexdata.save.changes</button>\r\n    <button type=\"button\" (click)=\"save(true); closeConflictDialog();\" class=\"button primary\"\r\n      translate>eo.object.indexdata.save</button>\r\n  </div>\r\n</eo-dialog>\r\n",
                 styles: [".object-form-edit{background:var(--color-white);display:grid;grid-template-areas:\"form\" \"buttons\";grid-template-columns:1fr;grid-template-rows:1fr auto;min-width:300px}.object-form-edit eo-object-form{-ms-grid-column:1;-ms-grid-row:1;grid-area:form}.object-form-edit .form-controls{-ms-grid-column:1;-ms-grid-row:2;box-sizing:border-box;grid-area:buttons}.object-form-edit .form-controls .err-msg{background-color:var(--color-error);color:#fff;display:none;flex:1 1 auto;order:0;padding:calc(var(--app-pane-padding)/2) var(--app-pane-padding)}.object-form-edit .form-controls .buttons{align-items:center;display:flex;flex:1 1 auto;flex-flow:row wrap;justify-content:flex-end;order:1;padding:var(--app-pane-padding) calc(var(--app-pane-padding)*0.875)}.object-form-edit .form-controls .buttons button{flex:0 0 auto;margin:0 calc(var(--app-pane-padding)*0.125)}.object-form-edit .form-controls .buttons .loader{flex:1 1 auto}.object-form-edit .form-controls .buttons .loader eo-icon{display:none}.object-form-edit .form-controls .buttons .loader.saving eo-icon,.object-form-edit.invalid .form-controls .err-msg{display:block}::ng-deep .conflict__dialog{min-height:unset!important;padding:8px}::ng-deep .conflict__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}"]
             },] }
 ];
@@ -9870,7 +9923,7 @@ class FormElementComponent {
 FormElementComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-form-element',
-                template: "<div class=\"form-element\" [formGroup]=\"element\" *ngIf=\"element\">\r\n\r\n  <div class=\"form-field t-{{formElementRef._eoFormElement.type}}\" #formField\r\n       [ngSwitch]=\"formElementRef._eoFormElement.type\"\r\n       [ngClass]=\"{disabled: !!formElementRef._eoFormElement.readonly}\">\r\n\r\n    <!-- STRING -->\r\n    <eo-form-input *ngSwitchCase=\"'STRING'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-string\r\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification !== 'selector'\"\r\n        [situation]=\"element._eoFormControlWrapper.situation\"\r\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n        [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\r\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n        [multiline]=\"formElementRef._eoFormElement.multiline\"\r\n        [classification]=\"formElementRef._eoFormElement.classification\"\r\n        [regex]=\"formElementRef._eoFormElement.regex\"\r\n        [qname]=\"formElementRef._eoFormElement.qname\"\r\n        [size]=\"formElementRef._eoFormElement.size\"\r\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n        [minLength]=\"formElementRef._eoFormElement.minlen\"\r\n        [maxLength]=\"formElementRef._eoFormElement.maxlen\"\r\n      ></eo-string>\r\n\r\n      <!-- Dynamic List -->\r\n      <eo-dynamic-list\r\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification === 'selector'\"\r\n        [situation]=\"element._eoFormControlWrapper.situation\"\r\n        [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n        [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\r\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n        [listObject]=\"formElementRef._eoFormElement.list\"\r\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-dynamic-list>\r\n\r\n\r\n      <!-- Reference -->\r\n      <eo-reference *ngIf=\"formElementRef._eoFormElement.reference\"\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [reference]=\"formElementRef._eoFormElement.reference\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [minLength]=\"formElementRef._eoFormElement.minlen\"\r\n                    [maxLength]=\"formElementRef._eoFormElement.maxlen\"\r\n      ></eo-reference>\r\n    </eo-form-input>\r\n\r\n    <!-- ID-Reference -->\r\n    <eo-form-input *ngSwitchCase=\"'REFERENCE'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-id-reference\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [situation]=\"element._eoFormControlWrapper.situation\"\r\n                    [dataToRender]=\"formElementRef._eoFormElement.dataToRender\"\r\n                    [reference]=\"formElementRef._eoFormElement.reference\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [contextId]=\"formElementRef._eoFormElement.contextId\"\r\n                    [exceptionIDs]=\"formElementRef._eoFormElement.exceptionIDs\"\r\n                    [queryFilters]=\"formElementRef._eoFormElement.queryFilters\"\r\n                    [objectTypesFilter]=\"formElementRef._eoFormElement.objectTypesFilter\"\r\n      ></eo-id-reference>\r\n    </eo-form-input>\r\n\r\n    <!-- ID -->\r\n    <eo-form-input *ngSwitchCase=\"'ID'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-string\r\n                    [situation]=\"element._eoFormControlWrapper.situation\"\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [regex]=\"'^[0-9a-fA-F]*$'\"\r\n                    [qname]=\"formElementRef._eoFormElement.qname\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [minLength]=\"32\"\r\n                    [maxLength]=\"32\"\r\n      ></eo-string>\r\n\r\n    </eo-form-input>\r\n\r\n\r\n    <!-- BOOLEAN -->\r\n    <eo-form-input *ngSwitchCase=\"'BOOLEAN'\" [tag]=\"tag\" class=\"checkbox\" [label]=\"formElementRef._eoFormElement.label\"\r\n                    [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-checkbox [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                   [tristate]=\"true\"></eo-checkbox>\r\n    </eo-form-input>\r\n\r\n    <!-- CODESYSTEM -->\r\n    <eo-form-input *ngSwitchCase=\"'CODESYSTEM'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-codesystem [situation]=\"element._eoFormControlWrapper.situation\"\r\n                     [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                     [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                     [codesystem]=\"formElementRef._eoFormElement.codesystem\"\r\n                     [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                     [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\r\n                     [disablingFilterFunction]=\"formElementRef._eoFormElement.disablingFilterFunction\"\r\n                     [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-codesystem>\r\n    </eo-form-input>\r\n\r\n    <!-- ORGANIZATION -->\r\n    <eo-form-input *ngSwitchCase=\"'ORGANIZATION'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-organization [situation]=\"element._eoFormControlWrapper.situation\"\r\n                       [dataMeta]=\"formElementRef._eoFormElement.dataMeta\"\r\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                       [filterObject]=\"formElementRef._eoFormElement.filter\"\r\n                       [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                       (onDataMetaChanged)=\"organizationDataMetaResolved($event)\"\r\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-organization>\r\n    </eo-form-input>\r\n\r\n    <!-- NUMBER -->\r\n\r\n    <eo-form-input *ngSwitchCase=\"'NUMBER'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-number *ngIf=\"situation !== 'SEARCH'\"\r\n                 [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                 [precision]=\"formElementRef._eoFormElement.precision\"\r\n                 [scale]=\"formElementRef._eoFormElement.scale\"\r\n                 [grouping]=\"formElementRef._eoFormElement.grouping\"\r\n                 [pattern]=\"formElementRef._eoFormElement.pattern\"\r\n                 [formControlName]=\"element._eoFormControlWrapper.controlName\">\r\n      </eo-number>\r\n\r\n      <eo-number-range *ngIf=\"situation === 'SEARCH'\"\r\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                       [precision]=\"formElementRef._eoFormElement.precision\"\r\n                       [scale]=\"formElementRef._eoFormElement.scale\"\r\n                       [grouping]=\"formElementRef._eoFormElement.grouping\"\r\n                       [pattern]=\"formElementRef._eoFormElement.pattern\"\r\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-number-range>\r\n    </eo-form-input>\r\n\r\n    <!-- TABLE -->\r\n    <div class=\"table\" *ngSwitchCase=\"'TABLE'\">\r\n      <eo-table [params]=\"{\r\n        situation: element._eoFormControlWrapper.situation,\r\n        element: formElementRef._eoFormElement,\r\n        size: formElementRef._eoFormElement.size\r\n      }\" [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-table>\r\n    </div>\r\n\r\n    <!-- DATE AND DATETIME -->\r\n    <eo-form-input *ngSwitchCase=\"'DATETIME'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-datetime *ngIf=\"situation !== 'SEARCH'\"\r\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                   [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                   [withTime]=\"formElementRef._eoFormElement.withtime\"\r\n                   [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-datetime>\r\n\r\n      <eo-datetime-range *ngIf=\"situation === 'SEARCH'\"\r\n                         [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                         [withTime]=\"formElementRef._eoFormElement.withtime\"\r\n                         [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-datetime-range>\r\n    </eo-form-input>\r\n\r\n\r\n    <!-- print out the type if it's not matching anything -->\r\n    <div *ngSwitchDefault><b>{{formElementRef._eoFormElement.type}}</b></div>\r\n\r\n\r\n    <!-- the fields description -->\r\n    <div class=\"description\" *ngIf=\"formElementRef._eoFormElement.description\">{{formElementRef._eoFormElement.description}}</div>\r\n\r\n    <!-- error/validation messages -->\r\n    <div class=\"err-msg\" *ngIf=\"formElementRef.errors\">\r\n\r\n      <div *ngIf=\"formElementRef.errors.daterange\" translate>eo.form.property.daterange.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.numberrange\" translate>eo.form.property.numberrange.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.number\" translate>eo.form.property.number</div>\r\n      <div *ngIf=\"formElementRef.errors.precision\" translate\r\n           [translateParams]=\"formElementRef.errors.precision.translateValues\">{{formElementRef.errors.precision.translateKey}}</div>\r\n      <div *ngIf=\"formElementRef.errors.scale\" translate\r\n           [translateParams]=\"formElementRef.errors.scale.translateValues\">{{formElementRef.errors.scale.translateKey}}</div>\r\n\r\n      <div *ngIf=\"formElementRef.errors.regex || formElementRef.errors.pattern\" translate>eo.form.property.string.regex.nomatch</div>\r\n      <div *ngIf=\"formElementRef.errors.classificationemail\" translate>eo.form.property.string.error.classification.email</div>\r\n      <div *ngIf=\"formElementRef.errors.classificationurl\" translate>eo.form.property.string.error.classification.url</div>\r\n      <div *ngIf=\"formElementRef.errors.onlyWhitespaces\" translate>eo.form.property.string.error.whitespaces</div>\r\n      <div *ngIf=\"formElementRef.errors.datecontrol\" translate>eo.form.property.date.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.codesystem\" translate>eo.form.property.codesystem.value.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.eoformScript\">{{formElementRef._eoFormElement.error.msg}}</div>\r\n      <div *ngIf=\"formElementRef.errors.required\" translate>eo.form.property.required</div>\r\n      <div *ngIf=\"formElementRef.errors.maxlength\" translate [translateParams]=\"{maxlength: formElementRef._eoFormElement.maxlen}\">eo.form.property.maxlength</div>\r\n      <div *ngIf=\"formElementRef.errors.minlength\" translate [translateParams]=\"{minlength: formElementRef._eoFormElement.minlen}\">eo.form.property.minlength</div>\r\n      <div *ngIf=\"formElementRef.errors.deletedIDReference\" translate>eo.form.property.idreference.deleted</div>\r\n      <div *ngIf=\"formElementRef.errors.deletedOrgObject\" translate>eo.form.property.orgobject.deleted</div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"form-element\" [formGroup]=\"element\" *ngIf=\"element\">\r\n\r\n  <div class=\"form-field t-{{formElementRef._eoFormElement.type}}\" #formField\r\n       [ngSwitch]=\"formElementRef._eoFormElement.type\"\r\n       [ngClass]=\"{disabled: !!formElementRef._eoFormElement.readonly}\">\r\n\r\n    <!-- STRING -->\r\n    <eo-form-input *ngSwitchCase=\"'STRING'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-string\r\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification !== 'selector'\"\r\n        [situation]=\"element._eoFormControlWrapper.situation\"\r\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n        [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\r\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n        [multiline]=\"formElementRef._eoFormElement.multiline\"\r\n        [classification]=\"formElementRef._eoFormElement.classification\"\r\n        [regex]=\"formElementRef._eoFormElement.regex\"\r\n        [qname]=\"formElementRef._eoFormElement.qname\"\r\n        [size]=\"formElementRef._eoFormElement.size\"\r\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n        [minLength]=\"formElementRef._eoFormElement.minlen\"\r\n        [maxLength]=\"formElementRef._eoFormElement.maxlen\"\r\n      ></eo-string>\r\n\r\n      <!-- Dynamic List -->\r\n      <eo-dynamic-list\r\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification === 'selector'\"\r\n        [situation]=\"element._eoFormControlWrapper.situation\"\r\n        [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n        [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\r\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n        [listObject]=\"formElementRef._eoFormElement.list\"\r\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-dynamic-list>\r\n\r\n\r\n      <!-- Reference -->\r\n      <eo-reference *ngIf=\"formElementRef._eoFormElement.reference\"\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [reference]=\"formElementRef._eoFormElement.reference\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [minLength]=\"formElementRef._eoFormElement.minlen\"\r\n                    [maxLength]=\"formElementRef._eoFormElement.maxlen\"\r\n      ></eo-reference>\r\n    </eo-form-input>\r\n\r\n    <!-- ID-Reference -->\r\n    <eo-form-input *ngSwitchCase=\"'REFERENCE'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-id-reference\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [situation]=\"element._eoFormControlWrapper.situation\"\r\n                    [dataToRender]=\"formElementRef._eoFormElement.dataToRender\"\r\n                    [reference]=\"formElementRef._eoFormElement.reference\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [contextId]=\"formElementRef._eoFormElement.contextId\"\r\n                    [exceptionIDs]=\"formElementRef._eoFormElement.exceptionIDs\"\r\n                    [queryFilters]=\"formElementRef._eoFormElement.queryFilters\"\r\n                    [objectTypesFilter]=\"formElementRef._eoFormElement.objectTypesFilter\"\r\n      ></eo-id-reference>\r\n    </eo-form-input>\r\n\r\n    <!-- ID -->\r\n    <eo-form-input *ngSwitchCase=\"'ID'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-string\r\n                    [situation]=\"element._eoFormControlWrapper.situation\"\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [regex]=\"'^[0-9a-fA-F]*$'\"\r\n                    [qname]=\"formElementRef._eoFormElement.qname\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [minLength]=\"32\"\r\n                    [maxLength]=\"32\"\r\n      ></eo-string>\r\n\r\n    </eo-form-input>\r\n\r\n\r\n    <!-- BOOLEAN -->\r\n    <eo-form-input *ngSwitchCase=\"'BOOLEAN'\" [tag]=\"tag\" class=\"checkbox\" [label]=\"formElementRef._eoFormElement.label\"\r\n                    [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-checkbox [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                   [tristate]=\"true\"></eo-checkbox>\r\n    </eo-form-input>\r\n\r\n    <!-- CODESYSTEM -->\r\n    <eo-form-input *ngSwitchCase=\"'CODESYSTEM'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-codesystem [situation]=\"element._eoFormControlWrapper.situation\"\r\n                     [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                     [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                     [codesystem]=\"formElementRef._eoFormElement.codesystem\"\r\n                     [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                     [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\r\n                     [disablingFilterFunction]=\"formElementRef._eoFormElement.disablingFilterFunction\"\r\n                     [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-codesystem>\r\n    </eo-form-input>\r\n\r\n    <!-- ORGANIZATION -->\r\n    <eo-form-input *ngSwitchCase=\"'ORGANIZATION'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-organization [situation]=\"element._eoFormControlWrapper.situation\"\r\n                       [dataMeta]=\"formElementRef._eoFormElement.dataMeta\"\r\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                       [filterObject]=\"formElementRef._eoFormElement.filter\"\r\n                       [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                       (onDataMetaChanged)=\"organizationDataMetaResolved($event)\"\r\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-organization>\r\n    </eo-form-input>\r\n\r\n    <!-- NUMBER -->\r\n\r\n    <eo-form-input *ngSwitchCase=\"'NUMBER'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-number *ngIf=\"situation !== 'SEARCH'\"\r\n                 [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                 [precision]=\"formElementRef._eoFormElement.precision\"\r\n                 [scale]=\"formElementRef._eoFormElement.scale\"\r\n                 [grouping]=\"formElementRef._eoFormElement.grouping\"\r\n                 [pattern]=\"formElementRef._eoFormElement.pattern\"\r\n                 [formControlName]=\"element._eoFormControlWrapper.controlName\">\r\n      </eo-number>\r\n\r\n      <eo-number-range *ngIf=\"situation === 'SEARCH'\"\r\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                       [precision]=\"formElementRef._eoFormElement.precision\"\r\n                       [scale]=\"formElementRef._eoFormElement.scale\"\r\n                       [grouping]=\"formElementRef._eoFormElement.grouping\"\r\n                       [pattern]=\"formElementRef._eoFormElement.pattern\"\r\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-number-range>\r\n    </eo-form-input>\r\n\r\n    <!-- TABLE -->\r\n    <div class=\"table\" *ngSwitchCase=\"'TABLE'\">\r\n      <eo-table [dmsObject]=\"dmsObject\" [params]=\"{\r\n        situation: element._eoFormControlWrapper.situation,\r\n        element: formElementRef._eoFormElement,\r\n        size: formElementRef._eoFormElement.size\r\n      }\" [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-table>\r\n    </div>\r\n\r\n    <!-- DATE AND DATETIME -->\r\n    <eo-form-input *ngSwitchCase=\"'DATETIME'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-datetime *ngIf=\"situation !== 'SEARCH'\"\r\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                   [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                   [withTime]=\"formElementRef._eoFormElement.withtime\"\r\n                   [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                   [validateDatabaseTimeRange]=\"formElementRef._eoFormElement.withtime\"\r\n      ></eo-datetime>\r\n\r\n      <eo-datetime-range *ngIf=\"situation === 'SEARCH'\"\r\n                         [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                         [withTime]=\"formElementRef._eoFormElement.withtime\"\r\n                         [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-datetime-range>\r\n    </eo-form-input>\r\n\r\n\r\n    <!-- print out the type if it's not matching anything -->\r\n    <div *ngSwitchDefault><b>{{formElementRef._eoFormElement.type}}</b></div>\r\n\r\n\r\n    <!-- the fields description -->\r\n    <div class=\"description\" *ngIf=\"formElementRef._eoFormElement.description\">{{formElementRef._eoFormElement.description}}</div>\r\n\r\n    <!-- error/validation messages -->\r\n    <div class=\"err-msg\" *ngIf=\"formElementRef.errors\">\r\n\r\n      <div *ngIf=\"formElementRef.errors.daterange\" translate>eo.form.property.daterange.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.numberrange\" translate>eo.form.property.numberrange.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.number\" translate>eo.form.property.number</div>\r\n      <div *ngIf=\"formElementRef.errors.precision\" translate\r\n           [translateParams]=\"formElementRef.errors.precision.translateValues\">{{formElementRef.errors.precision.translateKey}}</div>\r\n      <div *ngIf=\"formElementRef.errors.scale\" translate\r\n           [translateParams]=\"formElementRef.errors.scale.translateValues\">{{formElementRef.errors.scale.translateKey}}</div>\r\n\r\n      <div *ngIf=\"formElementRef.errors.regex || formElementRef.errors.pattern\" translate>eo.form.property.string.regex.nomatch</div>\r\n      <div *ngIf=\"formElementRef.errors.classificationemail\" translate>eo.form.property.string.error.classification.email</div>\r\n      <div *ngIf=\"formElementRef.errors.classificationurl\" translate>eo.form.property.string.error.classification.url</div>\r\n      <div *ngIf=\"formElementRef.errors.onlyWhitespaces\" translate>eo.form.property.string.error.whitespaces</div>\r\n      <div *ngIf=\"formElementRef.errors.datecontrol\" translate>eo.form.property.date.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.codesystem\" translate>eo.form.property.codesystem.value.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.eoformScript\">{{formElementRef._eoFormElement.error.msg}}</div>\r\n      <div *ngIf=\"formElementRef.errors.required\" translate>eo.form.property.required</div>\r\n      <div *ngIf=\"formElementRef.errors.maxlength\" translate [translateParams]=\"{maxlength: formElementRef._eoFormElement.maxlen}\">eo.form.property.maxlength</div>\r\n      <div *ngIf=\"formElementRef.errors.minlength\" translate [translateParams]=\"{minlength: formElementRef._eoFormElement.minlen}\">eo.form.property.minlength</div>\r\n      <div *ngIf=\"formElementRef.errors.deletedIDReference\" translate>eo.form.property.idreference.deleted</div>\r\n      <div *ngIf=\"formElementRef.errors.deletedOrgObject\" translate>eo.form.property.orgobject.deleted</div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
                 styles: [":host-context(.dark) .form-element .form-field .err-msg{background-color:var(--color-error);border:0;border-radius:2px;color:var(--color-white);margin:calc(var(--app-pane-padding)/4) 0;padding:calc(var(--app-pane-padding)/4)}:host{flex:1 1 auto}:host.label-toggled::ng-deep eo-form-input label{text-decoration:line-through}.form-element{box-sizing:border-box}.form-element .form-field{margin:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}.form-element .form-field .description{border:0;font-size:var(--font-hint);font-style:italic;padding:calc(var(--app-pane-padding)/8) calc(var(--app-pane-padding)/8) 0 calc(var(--app-pane-padding)/8)}.form-element .form-field .err-msg{border:0;color:var(--color-error);padding:calc(var(--app-pane-padding)/4) 0}.form-element .form-field .table{align-items:flex-start;border-color:transparent;flex-flow:column}.form-element .form-field .table .label{padding-bottom:calc(var(--app-pane-padding)/4)}.form-element.ng-dirty:not(.ng-invalid)>.form-field:not(.focused)::ng-deep label{background-color:var(--color-dirty-background);color:var(--color-dirty-font)!important}"]
             },] }
 ];
@@ -9882,6 +9935,7 @@ FormElementComponent.ctorParameters = () => [
 FormElementComponent.propDecorators = {
     situation: [{ type: Input }],
     skipToggle: [{ type: Input }],
+    dmsObject: [{ type: Input }],
     elementSetter: [{ type: Input, args: ['element',] }],
     formField: [{ type: ViewChild, args: ['formField',] }]
 };
@@ -9897,6 +9951,7 @@ class FormElementTableComponent extends UnsubscribeOnDestroy {
         this.modules = [ClientSideRowModelModule, CsvExportModule];
         this.gridReady = false;
         this.showDialog = false;
+        this.showPreview = false;
         this.propagateChange = (_) => {
         };
         this.gridOptions = {
@@ -9952,6 +10007,7 @@ class FormElementTableComponent extends UnsubscribeOnDestroy {
         });
         this._cachedColumns = this.storageService.getItem(FormElementTableComponent.COLUMNS_DEFINITION) || [];
         this._cachedColumnsOverlay = this.storageService.getItem(FormElementTableComponent.COLUMNS_DEFINITION_OVERLAY) || [];
+        this.showPreview = !!this.storageService.getItem('showPreview');
     }
     set params(p) {
         if (p) {
@@ -10287,13 +10343,17 @@ class FormElementTableComponent extends UnsubscribeOnDestroy {
         }
         this.storageService.setItem(columnsDefinition, cachedColumns);
     }
+    togglePreview() {
+        this.showPreview = !this.showPreview;
+        this.storageService.setItem('showPreview', this.showPreview);
+    }
 }
 FormElementTableComponent.COLUMNS_DEFINITION = 'eo.framework.cache.tables.columns.definition';
 FormElementTableComponent.COLUMNS_DEFINITION_OVERLAY = 'eo.framework.cache.tables.overlay.columns.definition';
 FormElementTableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-table',
-                template: "<div class=\"object-form-table\" [ngClass]=\"{medium: _params.size === 'medium', large: _params.size === 'large'}\">\r\n  <div class=\"label\">\r\n    <span>{{_params.element.label}}</span>\r\n    <ng-container *ngIf=\"_params.situation !== 'SEARCH'\">\r\n\r\n      <eo-icon class=\"stf\" [iconSrc]=\"'assets/_default/svg/ic_expand.svg'\" [iconTitle]=\"('eo.form.table.options.btn.open'| translate)\" (click)=\"openDialog()\"></eo-icon>\r\n      <eo-icon class=\"stf\" [iconSrc]=\"'assets/_default/svg/ic_size_to_fit.svg'\" [iconTitle]=\"('eo.form.table.options.btn.fit'| translate)\" (click)=\"sizeToFit()\"></eo-icon>\r\n      <eo-icon class=\"stf\" *ngIf=\"gridOptions.rowData.length\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\" [iconTitle]=\"('eo.form.table.options.btn.csv'| translate)\" (click)=\"exportCSV()\"></eo-icon>\r\n      <eo-icon class=\"stf add-row\" *ngIf=\"!_params.element.readonly\" [iconSrc]=\"'assets/_default/svg/ic_add.svg'\" [iconTitle]=\"('eo.form.table.options.btn.add'| translate)\" (click)=\"addRow()\"></eo-icon>\r\n\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"grid-body size-{{ params.size }}\">\r\n    <ag-grid-angular #agGrid *ngIf=\"gridReady\" class=\"ag-theme-balham\" [modules]=\"modules\"\r\n                     [gridOptions]=\"gridOptions\"\r\n                     (rowDoubleClicked)=\"editRow($event)\"\r\n                     (cellClicked)=\"onCellClicked($event)\"\r\n                     (sortChanged)=\"onSortChanged()\"\r\n                     (cellValueChanged)=\"onEditComplete($event)\"\r\n                     (columnResized)=\"onColumnResized($event.column)\">\r\n    </ag-grid-angular>\r\n  </div>\r\n</div>\r\n\r\n\r\n<eo-dialog\r\n[title]=\"params.element.label\"\r\n[visible]=\"showDialog\"\r\n[dirtyCheck]=\"rowEdit?.pendingTaskId\"\r\n[minWidth]=\"_params.situation === 'SEARCH' ? 500 : null\"\r\n[fullscreen]=\"_params.situation !== 'SEARCH'\"\r\n[styleClass]=\"'object-form-table-dialog'\"\r\n(hide)=\"onClose()\" #dialog>\r\n\r\n  <div class=\"body\">\r\n\r\n      <eo-split [gutterSize]=\"16\" [switchable]=\"true\">\r\n\r\n        <eo-split-area *ngIf=\"_params.situation !== 'SEARCH'\" class=\"table-area\" [size]=\"75\" [minSizePixel]=\"100\">\r\n          <div class=\"table-body\">\r\n            <div class=\"object-form-table\">\r\n              <div class=\"label\">\r\n                <span></span>\r\n                <ng-container>\r\n                  <eo-icon class=\"stf\" [iconSrc]=\"'assets/_default/svg/ic_size_to_fit.svg'\" [iconTitle]=\"('eo.form.table.options.btn.fit'| translate)\" (click)=\"sizeToFit(true)\"></eo-icon>\r\n                  <eo-icon class=\"stf\" *ngIf=\"gridOptions.rowData.length\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\" [iconTitle]=\"('eo.form.table.options.btn.csv'| translate)\" (click)=\"exportCSV()\"></eo-icon>\r\n                  <eo-icon class=\"stf add-row\" *ngIf=\"!_params.element.readonly\" [iconSrc]=\"'assets/_default/svg/ic_add.svg'\" [iconTitle]=\"('eo.form.table.options.btn.add'| translate)\" (click)=\"addRow()\"></eo-icon>\r\n                </ng-container>\r\n              </div>\r\n              <div class=\"grid-body\">\r\n                <ag-grid-angular #agGrid2 *ngIf=\"gridReady\" class=\"ag-theme-balham\" [modules]=\"modules\"\r\n                                [gridOptions]=\"overlayGridOptions\"\r\n                                (cellClicked)=\"onCellClicked($event);editRow($event)\"\r\n                                (mousedown)=\"onMouseDown($event)\"\r\n                                (sortChanged)=\"onSortChanged()\"\r\n                                 (cellValueChanged)=\"onEditComplete($event)\"\r\n                                 (columnResized)=\"onColumnResized($event.column, true)\">\r\n                </ag-grid-angular>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </eo-split-area>\r\n\r\n        <eo-split-area [size]=\"25\" [minSizePixel]=\"350\" *ngIf=\"editingRow\">\r\n          <div class=\"edit-body\">\r\n            <eo-row-edit [row]=\"editingRow\" #rowEdit\r\n                          (onSave)=\"updateRow($event)\"\r\n                          (onSaveCopy)=\"copyRow($event)\"\r\n                          (onDelete)=\"deleteRow($event)\"\r\n                          (onCancel)=\"cancelRowEdit()\"></eo-row-edit>\r\n          </div>\r\n        </eo-split-area>\r\n\r\n      </eo-split>\r\n\r\n  </div>\r\n</eo-dialog>\r\n\r\n",
+                template: "<div class=\"object-form-table\" [ngClass]=\"{medium: _params.size === 'medium', large: _params.size === 'large'}\">\r\n  <div class=\"label\">\r\n    <span>{{_params.element.label}}</span>\r\n    <ng-container *ngIf=\"_params.situation !== 'SEARCH'\">\r\n\r\n      <eo-icon class=\"stf\" [iconSrc]=\"'assets/_default/svg/ic_expand.svg'\" [iconTitle]=\"('eo.form.table.options.btn.open'| translate)\" (click)=\"openDialog()\"></eo-icon>\r\n      <eo-icon class=\"stf\" [iconSrc]=\"'assets/_default/svg/ic_size_to_fit.svg'\" [iconTitle]=\"('eo.form.table.options.btn.fit'| translate)\" (click)=\"sizeToFit()\"></eo-icon>\r\n      <eo-icon class=\"stf\" *ngIf=\"gridOptions.rowData.length\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\" [iconTitle]=\"('eo.form.table.options.btn.csv'| translate)\" (click)=\"exportCSV()\"></eo-icon>\r\n      <eo-icon class=\"stf add-row\" *ngIf=\"!_params.element.readonly\" [iconSrc]=\"'assets/_default/svg/ic_add.svg'\" [iconTitle]=\"('eo.form.table.options.btn.add'| translate)\" (click)=\"addRow()\"></eo-icon>\r\n\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"grid-body size-{{ params.size }}\">\r\n    <ag-grid-angular #agGrid *ngIf=\"gridReady\" class=\"ag-theme-balham\" [modules]=\"modules\"\r\n                     [gridOptions]=\"gridOptions\"\r\n                     (rowDoubleClicked)=\"editRow($event)\"\r\n                     (cellClicked)=\"onCellClicked($event)\"\r\n                     (sortChanged)=\"onSortChanged()\"\r\n                     (cellValueChanged)=\"onEditComplete($event)\"\r\n                     (columnResized)=\"onColumnResized($event.column)\">\r\n    </ag-grid-angular>\r\n  </div>\r\n</div>\r\n\r\n\r\n<eo-dialog\r\n[title]=\"params.element.label\"\r\n[visible]=\"showDialog\"\r\n[dirtyCheck]=\"rowEdit?.pendingTaskId\"\r\n[minWidth]=\"_params.situation !== 'SEARCH' ? '97vw' : 200\"\r\n[styleClass]=\"'object-form-table-dialog'\"\r\n(hide)=\"onClose()\"\r\n[isFormTable]=\"true\"\r\n[showPreview]=\"showPreview\"\r\n(onTogglePreview)=\"togglePreview()\">\r\n\r\n  <div class=\"body\">\r\n\r\n      <eo-split [gutterSize]=\"16\" [switchable]=\"true\">\r\n\r\n        <eo-split-area *ngIf=\"_params.situation !== 'SEARCH'\" class=\"table-area\" [size]=\"50\" [minSizePixel]=\"100\">\r\n          <div class=\"table-body\">\r\n            <div class=\"object-form-table\">\r\n              <div class=\"label\">\r\n                <span></span>\r\n                <ng-container>\r\n                  <eo-icon class=\"stf\" [iconSrc]=\"'assets/_default/svg/ic_size_to_fit.svg'\" [iconTitle]=\"('eo.form.table.options.btn.fit'| translate)\" (click)=\"sizeToFit(true)\"></eo-icon>\r\n                  <eo-icon class=\"stf\" *ngIf=\"gridOptions.rowData.length\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\" [iconTitle]=\"('eo.form.table.options.btn.csv'| translate)\" (click)=\"exportCSV()\"></eo-icon>\r\n                  <eo-icon class=\"stf add-row\" *ngIf=\"!_params.element.readonly\" [iconSrc]=\"'assets/_default/svg/ic_add.svg'\" [iconTitle]=\"('eo.form.table.options.btn.add'| translate)\" (click)=\"addRow()\"></eo-icon>\r\n                </ng-container>\r\n              </div>\r\n              <div class=\"grid-body\">\r\n                <ag-grid-angular #agGrid2 *ngIf=\"gridReady\" class=\"ag-theme-balham\" [modules]=\"modules\"\r\n                                [gridOptions]=\"overlayGridOptions\"\r\n                                (cellClicked)=\"onCellClicked($event);editRow($event)\"\r\n                                (mousedown)=\"onMouseDown($event)\"\r\n                                (sortChanged)=\"onSortChanged()\"\r\n                                 (cellValueChanged)=\"onEditComplete($event)\"\r\n                                 (columnResized)=\"onColumnResized($event.column, true)\">\r\n                </ag-grid-angular>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </eo-split-area>\r\n\r\n        <eo-split-area [size]=\"15\" [minSizePixel]=\"300\" *ngIf=\"editingRow\">\r\n          <div class=\"edit-body\">\r\n            <eo-row-edit [row]=\"editingRow\" #rowEdit\r\n                          (onSave)=\"updateRow($event)\"\r\n                          (onSaveCopy)=\"copyRow($event)\"\r\n                          (onDelete)=\"deleteRow($event)\"\r\n                          (onCancel)=\"cancelRowEdit()\"></eo-row-edit>\r\n          </div>\r\n        </eo-split-area>\r\n\r\n        <eo-split-area *ngIf=\"editingRow && showPreview\" [size]=\"10\" [minSizePixel]=\"150\">\r\n          <eo-media *ngIf=\"dmsObject\" [dmsObject]=\"dmsObject\"\r\n                    [useVersion]=\"dmsObject.id === dmsObject.content?.id\"></eo-media>\r\n        </eo-split-area>\r\n      </eo-split>\r\n  </div>\r\n</eo-dialog>\r\n\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -10318,6 +10378,7 @@ FormElementTableComponent.ctorParameters = () => [
 ];
 FormElementTableComponent.propDecorators = {
     rowEdit: [{ type: ViewChild, args: ['rowEdit',] }],
+    dmsObject: [{ type: Input }],
     params: [{ type: Input }],
     copyCellHandler: [{ type: HostListener, args: ['keydown.control.alt.shift.c', ['$event'],] }, { type: HostListener, args: ['keydown.control.shift.c', ['$event'],] }, { type: HostListener, args: ['keydown.control.alt.c', ['$event'],] }, { type: HostListener, args: ['keydown.control.c', ['$event'],] }]
 };
@@ -11603,7 +11664,7 @@ class DatetimeFilterComponent extends DatetimeComponent {
 DatetimeFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-datetime-custom',
-                template: "<!-- non web environments use native pickers -->\r\n<div class=\"eo-datepicker native\" lang=\"{{locale}}\" *ngIf=\"!isWebEnv; else web\">\r\n  <input type=\"date\" [(ngModel)]=\"value\" *ngIf=\"!withTime\" [readonly]=\"readonly\"/>\r\n  <input type=\"datetime-local\" [(ngModel)]=\"value\" [readonly]=\"readonly\" *ngIf=\"withTime\"/>\r\n</div>\r\n\r\n\r\n<ng-template #web>\r\n\r\n  <eo-dialog  [styleClass]=\"'date-picker'\" [title]=\"pickerTitle\" [(visible)]=\"showPicker\" *ngIf=\"showPicker\">\r\n    <eo-datepicker [date]=\"value\" [withTime]=\"withTime\" [withAmPm]=\"withAmPm\"\r\n                   [onylFutureDates]=\"onylFutureDates\"\r\n                   (onCanceled)=\"(showPicker = false)\"\r\n                   (onDateChanged)=\"setValueFromPicker($event)\"></eo-datepicker>\r\n  </eo-dialog>\r\n\r\n  <div class=\"eo-datepicker\">\r\n    <p-inputMask [mask]=\"maskPattern\" [(ngModel)]=\"innerValue\"\r\n                 (ngModelChange)=\"onMaskValueChange($event)\"\r\n                 (onComplete)=\"setValueFromMask()\"\r\n                 [readonly]=\"readonly\"\r\n                 [autoClear]=\"true\"\r\n                 [placeholder]=\"datePattern\"></p-inputMask>\r\n\r\n    <button class=\"ui-button\" (click)=\"(showPicker = true)\"  (keyup.arrowDown)=\"(showPicker = true)\" *ngIf=\"!readonly\">\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_datepicker.svg'\"></eo-icon>\r\n    </button>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n",
+                template: "<!-- non web environments use native pickers -->\r\n<div class=\"eo-datepicker native\" lang=\"{{locale}}\" *ngIf=\"!isWebEnv; else web\">\r\n  <input type=\"date\" [(ngModel)]=\"value\" *ngIf=\"!withTime\" [readonly]=\"readonly\"/>\r\n  <input type=\"datetime-local\" [(ngModel)]=\"value\" [readonly]=\"readonly\" *ngIf=\"withTime\"/>\r\n</div>\r\n\r\n\r\n<ng-template #web>\r\n\r\n  <eo-dialog  [styleClass]=\"'date-picker'\" [title]=\"pickerTitle\" [(visible)]=\"showPicker\" *ngIf=\"showPicker\">\r\n    <eo-datepicker [date]=\"value\" [withTime]=\"withTime\" [withAmPm]=\"withAmPm\"\r\n                   [onlyFutureDates]=\"onlyFutureDates\"\r\n                   [useDatabaseMinimumTime]=\"validateDatabaseTimeRange\"\r\n                   (onCanceled)=\"(showPicker = false)\"\r\n                   (onDateChanged)=\"setValueFromPicker($event)\"></eo-datepicker>\r\n  </eo-dialog>\r\n\r\n  <div class=\"eo-datepicker\">\r\n    <p-inputMask [mask]=\"maskPattern\" [(ngModel)]=\"innerValue\"\r\n                 (ngModelChange)=\"onMaskValueChange($event)\"\r\n                 (onComplete)=\"setValueFromMask()\"\r\n                 [readonly]=\"readonly\"\r\n                 [autoClear]=\"true\"\r\n                 [placeholder]=\"datePattern\"></p-inputMask>\r\n\r\n    <button class=\"ui-button\" (click)=\"(showPicker = true)\"  (keyup.arrowDown)=\"(showPicker = true)\" *ngIf=\"!readonly\">\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_datepicker.svg'\"></eo-icon>\r\n    </button>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\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%}"]
             },] }
 ];
@@ -13912,323 +13973,753 @@ ResultListModule.decorators = [
             },] }
 ];
 
-/**
- * @module
- * @description
- * Module rendering a dms objects form.
- */
-class ObjectFormModule {
+class ContentPreviewService {
+    static undockWin(src) {
+        const w = window[ContentPreviewService.UNDOCK_WINDOW_NAME] = window.open(src || '', ContentPreviewService.UNDOCK_WINDOW_NAME, 'directories=0, titlebar=0, toolbar=0, location=0, status=0, menubar=0, resizable=1, top=10, left=10');
+        return w;
+    }
+    static closeWin() {
+        return this.getUndockWin() && this.getUndockWin().close();
+    }
+    static getUndockWin() {
+        return window[ContentPreviewService.UNDOCK_WINDOW_NAME];
+    }
+    static undockWinActive() {
+        return !!ContentPreviewService.getUndockWin() && !ContentPreviewService.getUndockWin().closed;
+    }
+    static mapLang(lang) {
+        switch (lang) {
+            case 'en':
+                return 'en-US';
+            case 'es':
+                return 'es-ES';
+            case 'pt':
+                return 'pt-PT';
+            case 'zh':
+                return 'zh-CN';
+            case 'hi':
+                return 'hi-IN';
+            case 'bn':
+                return 'bn-BD';
+            default:
+                return lang;
+        }
+    }
 }
-ObjectFormModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    SharedModule,
-                    TabViewModule,
-                    FieldsetModule,
-                    UiModule,
-                    DialogModule,
-                    PipesModule,
-                    AgGridModule,
-                    ShortcutsModule,
-                    FormElementsModule,
-                    SplitModule,
-                    ResultListModule,
-                    ListContainerModule,
-                    GridModule
-                ],
-                exports: [ObjectFormComponent, ObjectFormGroupComponent, ObjectFormEditComponent, FormElementComponent],
-                providers: [ObjectFormHelperService],
-                declarations: [
-                    ObjectFormComponent,
-                    ObjectFormGroupComponent,
-                    ObjectFormEditComponent,
-                    FormElementComponent,
-                    FormElementTableComponent,
-                    RowEditComponent
-                ]
-            },] }
+ContentPreviewService.UNDOCK_WINDOW_NAME = 'eoViewer';
+ContentPreviewService.decorators = [
+    { type: Injectable }
 ];
 
-class AppAddDialogComponent {
-    constructor(prepareService, router, systemService, translate, pendingChanges, locationService) {
-        this.prepareService = prepareService;
-        this.router = router;
-        this.systemService = systemService;
+class MediaComponent extends UnsubscribeOnDestroy {
+    constructor(translate, dms, renderer, system, _ngZone, config, pluginsService, backend) {
+        super();
         this.translate = translate;
-        this.pendingChanges = pendingChanges;
-        this.locationService = locationService;
-        this.onClose = new EventEmitter();
-        this.rootTypes = [];
-        this.locationTypes = [];
-    }
-    prepare(type, isRootType = false) {
-        if (this.pendingChanges.check()) {
-            return;
-        }
-        let pid = null;
-        if (!isRootType && this.locationParent) {
-            pid = this.locationParent.id;
+        this.dms = dms;
+        this.renderer = renderer;
+        this.system = system;
+        this._ngZone = _ngZone;
+        this.config = config;
+        this.pluginsService = pluginsService;
+        this.backend = backend;
+        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 = [
+            {
+                "mimeType": ["application/json", "text/json", "text/plain", "text/xml", "text/java", "text/javascript", "application/javascript", "text/html", "text/markdown", "text/x-web-markdown", "text/x-markdown"],
+                "viewer": "assets/_default/api/monaco/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
+            },
+            {
+                "mimeType": ["audio/mp3", "audio/webm", "audio/ogg", "audio/mpeg", "video/mp4", "video/webm", "video/ogg", "application/ogg"],
+                "viewer": "assets/_default/api/video/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
+            },
+            {
+                "mimeType": ["image/jpeg", "image/png", "image/apng", "image/gif", "image/svg+xml", "image/webp"],
+                "viewer": "assets/_default/api/img/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
+            },
+            { "viewer": "() => parameters.defaultViewer + '#'" },
+            { "error": true, "type": "error", "viewer": "assets/_default/api/error/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}" }
+        ];
+        this.undockDisabled = false;
+        this.enableCloseBtn = false;
+        // by default, the viewer ignores the version of the dms object. This will always show the latest version.
+        // We need this to be able to refresh the viewer because otherwise pdfjs worker will fail.
+        this.useVersion = false;
+        this.fileSizePipe = new FileSizePipe(translate);
+        this.SIZE_LIMIT = this.config.getRaw('preview.fileSizeLimit') || this.SIZE_LIMIT;
+        this.customConfig = (this.config.getRaw('preview.viewers') || []).concat(this.defaultViewers);
+        this.pluginsService.api.content.catchError().subscribe((evt) => {
+            var _a, _b;
+            const { err, win, parameters } = evt.data;
+            const uri = this.pluginsService.applyFunction((_b = (_a = this.customConfig) === null || _a === void 0 ? void 0 : _a.find((v) => 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);
+        });
+        if (ContentPreviewService.undockWinActive()) {
+            this.undock(false);
         }
-        this.prepareService
-            .createPreparedItem(pid, type.name)
-            .subscribe(() => {
-            this.router.navigateByUrl('/prepare');
-        }, Utils.throw(null, this.translate.instant('eo.add.prepare.fail.title'), this.translate.instant('eo.add.prepare.fail.msg')));
-        this.onClose.emit();
     }
-    autocompleteFn(evt) {
-        this.autocompleteRes = this.autocompleteList.filter(type => {
-            return type.label.toLowerCase().indexOf(evt.query.toLowerCase()) != -1;
-        });
+    get undockWin() {
+        return ContentPreviewService.getUndockWin();
     }
-    onSelect(node) {
-        if (node.isSubfolder) {
-            this.addToSubfolder();
+    set setAttachments(attachments) {
+        this.attachments = attachments;
+        this.attachmentsShown = false;
+    }
+    set setSearchTerm(searchTerm) {
+        this.searchTerm = searchTerm || '';
+    }
+    set disabled(disabled) {
+        this._disabled = !!disabled;
+        this.toogleViewer();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set previewUri(uri) {
+        this._previewUri = uri;
+        this.toogleViewer();
+    }
+    get previewUri() {
+        return this._previewUri;
+    }
+    set previewFile(file) {
+        var _a;
+        if (file) {
+            this.viewer = this.getViewer(file);
+            this.isMedia = this.viewer.viewer !== MediaComponent.PDF_VIEWER;
+            this.isOctetStream = !!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/octet-stream/));
+            this.isLarge = file.size && file.size > this.SIZE_LIMIT;
+            this.mediaType = file.mediaTypeName && this.system.getObjectType(file.mediaTypeName);
+            this.previewUri = this.isMedia ? this.viewer.previewUri : file.uriPdf;
         }
         else {
-            this.prepare(node.type, node.isRootType);
-        }
-    }
-    preparedItemData(payload) {
-        const typeElement = this.systemService
-            .getObjectType(this.subfolder.type)
-            .elements
-            .filter(val => this.subfolder.data ? val.name === Object.keys(this.subfolder.data)[0] : null);
-        if (typeElement.length && typeElement[0].multiselect) {
-            Object.entries(payload).map(([key, value]) => payload[key] = [value]);
+            this.previewUri = '';
         }
-        return payload;
     }
-    addToSubfolder() {
-        if (this.pendingChanges.check()) {
-            return;
+    set dmsObject(item) {
+        var _a;
+        this._dmsObject = item;
+        this.dmsObjectTitle = item.title || '...';
+        this.setAttachments = [];
+        if (this.attachmentsLoading) {
+            // cancel any pending requests
+            this.attachmentsLoading.unsubscribe();
+        }
+        if (item.content && item.content.contents && item.content.contents.length) {
+            const file = item.content.contents[0] || {};
+            this.previewFile = {
+                uri: this.dms.getPreview(item.content.id, item.content.type, this.useVersion ? item.version : null),
+                uriPdf: this.dms.getPreview(item.content.id, item.content.type, this.useVersion ? item.version : null, 'PDF'),
+                mimetype: file.mimetype,
+                mimegroup: file.mimegroup,
+                size: file.size,
+                path: file.path,
+                mediaTypeName: item.typeName
+            };
+            if (!!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/^mail|octet-stream/))) {
+                this.slideUri = this.dms.getSlide(item.content.id, item.content.type, this.useVersion ? item.version : null, 256);
+                this.attachmentsLoading = this.dms.getAttachments(item).subscribe(a => this.setAttachments = a);
+            }
+        }
+        else {
+            this.previewUri = '';
         }
-        let pid = this.locationParent.id;
-        const { data, type } = this.subfolder;
-        const payload = this.preparedItemData(data);
-        this.prepareService
-            .createPreparedItem(pid, type ? type : null)
-            .pipe(mergeMap(res => this.prepareService.updatePreparedItemIndexData(res.id, payload)))
-            .subscribe(() => {
-            this.router.navigateByUrl('/prepare');
-        }, Utils.throw(null, this.translate.instant('eo.add.prepare.fail.title'), this.translate.instant('eo.add.prepare.fail.msg')));
-        this.onClose.emit();
     }
-    fetchRootTypes() {
-        this.prepareService
-            .getPrepareRootTypes()
-            .subscribe((types) => {
-            this.rootTypes = this.sortTypes(types);
-            this.createAutocompleteList();
-        });
+    selectAttachment(attachment, force) {
+        const previewUri = attachment && this.isMedia ? this.getViewer({ uriPdf: attachment === null || attachment === void 0 ? void 0 : attachment.previewUri }).previewUri : attachment === null || attachment === void 0 ? void 0 : attachment.previewUri;
+        this.loadDocument(previewUri || this.previewUri, force);
     }
-    createAutocompleteList() {
-        this.autocompleteList = this.rootTypes.map(type => {
-            return {
-                label: type.label,
-                location: this.translate.instant('eo.add.title.location.common'),
-                isRootType: true,
-                isSubfolder: false,
-                type
-            };
-        }).concat(this.locationTypes.map(type => {
-            return {
-                label: type.label,
-                location: `${this.translate.instant('eo.add.title.location')} ${this.locationParent.title}`,
-                isRootType: false,
-                isSubfolder: false,
-                type
-            };
-        }));
-        if (this.subfolder) {
-            this.autocompleteList.push({
-                label: this.subfolder.title,
-                location: `${this.translate.instant('eo.add.title.location')} ${this.locationParent.title}`,
-                isRootType: false,
-                isSubfolder: true,
-            });
+    toogleViewer() {
+        this.open = !this.disabled && !!this.previewUri;
+        if (this.undockDisabled) {
+            this.isUndocked = false;
+        }
+        if (this.open || this.isUndocked) {
+            this.loadDocument(this.previewUri, this.isUndocked);
         }
     }
-    sortTypes(types) {
-        return types.sort((a, b) => {
-            if (a.isContextFolder && !b.isContextFolder) {
-                return -1;
-            }
-            if (!a.isContextFolder && b.isContextFolder) {
-                return 1;
-            }
-            return Utils.sortValues('label').call(this, a, b);
+    refresh() {
+        this.loadDocument(this.previewUri, true);
+    }
+    openPdfViewer(uri) {
+        this.pdfjs.contentWindow.PDFViewerApplication.open(uri).then(() => (this.hasError = false)).catch((err) => {
+            this.hasError = !this.isOctetStream;
+            this.isNotSupported = this.isOctetStream;
         });
+        // this.search();
     }
-    fetchAllowedChildTypes(loc) {
-        this.prepareService
-            .getPrepareChildTypes(loc.id)
-            .subscribe((res) => {
-            const { types, parent } = res;
-            this.locationParent = Utils.truncateString(parent, 30);
-            this.locationTypes = this.sortTypes(types);
-            this.locationParent.title = Utils.truncateString(parent['title'], 30);
-            if (loc.subFolder && this.isSubFolderAllowed(loc.subFolder, this.locationTypes)) {
-                this.subfolder = loc.subFolder;
-                this.subFolderDescription = loc.title + '; ' + this.subfolder.title;
-            }
-            this.createAutocompleteList();
+    getViewer(file) {
+        var _a, _b;
+        const isVideo = !!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/^audio|^video/));
+        const defaultViewer = isVideo ? MediaComponent.VIDEO_VIEWER : MediaComponent.PDF_VIEWER;
+        const fileExtension = ((_b = file.path) === null || _b === void 0 ? void 0 : _b.includes('.')) ? file.path.split('.').pop() : '';
+        const mimeType = file.mimetype;
+        const config = this.customConfig.find((c) => {
+            const matchMT = !c.mimeType || (typeof c.mimeType === 'string' ? [c.mimeType] : c.mimeType).includes(mimeType === null || mimeType === void 0 ? void 0 : mimeType.toLowerCase());
+            const matchFE = !c.fileExtension || (typeof c.fileExtension === 'string' ? [c.fileExtension] : c.fileExtension).includes((fileExtension).toLowerCase());
+            return matchMT && matchFE && (!c.type || c.type === 'default');
         });
+        const parameters = {
+            file,
+            path: location.origin + file.uri,
+            pathPdf: location.origin + file.uriPdf,
+            viewer: (config === null || config === void 0 ? void 0 : config.viewer) || defaultViewer,
+            load: config === null || config === void 0 ? void 0 : config.load,
+            fileExtension,
+            mimeType,
+            theme: '',
+            defaultViewer,
+            previewUri: ''
+        };
+        parameters.viewer = this.pluginsService.applyFunction(parameters.viewer, 'component, dmsObject, parameters', [this, this._dmsObject, parameters]) || defaultViewer;
+        const extend = this.customConfig.find((c) => c.type === 'extend');
+        if (extend)
+            parameters.viewer = this.pluginsService.applyFunction(extend.viewer, 'component, dmsObject, parameters', [this, this._dmsObject, parameters]);
+        parameters.previewUri = this.resolveUri(parameters.viewer, parameters);
+        return parameters;
     }
-    isSubFolderAllowed(subFolder, locationTypes) {
-        return !!locationTypes.find(lt => this.systemService.implementsType(lt, subFolder.type));
+    resolveUri(viewer, parameters) {
+        return (viewer ? document.baseURI : '') + viewer
+            .replace('${originalPath}', parameters.path)
+            .replace('${path}', encodeURIComponent(parameters.path))
+            .replace('${pathPdf}', encodeURIComponent(parameters.pathPdf))
+            .replace('${fileExtension}', encodeURIComponent(parameters.fileExtension))
+            .replace('${mimeType}', encodeURIComponent(parameters.mimeType))
+            .replace('${theme}', encodeURIComponent(parameters.theme))
+            .replace('${lang}', ContentPreviewService.mapLang(this.translate.currentLang));
     }
-    ngOnInit() {
-        this.fetchRootTypes();
-        this.activeLocationSubscription = this.locationService.activeLocation$
-            .subscribe((loc) => {
-            if (loc) {
-                this.fetchAllowedChildTypes(loc);
+    undock(open = true) {
+        if (this.undockDisabled) {
+            return;
+        }
+        this.isUndocked = !this.isUndocked;
+        if (!this.isUndocked) {
+            ContentPreviewService.closeWin();
+        }
+        else {
+            this._ngZone.runOutsideAngular(_ => {
+                const interval = setInterval(() => {
+                    if (this.undockWin && !ContentPreviewService.undockWinActive()) {
+                        clearInterval(interval);
+                        this._ngZone.run(() => this.isUndocked && this.undock());
+                    }
+                }, 1000);
+                fromEvent(window, 'beforeunload')
+                    .pipe(takeWhile(() => this.isUndocked))
+                    .subscribe(e => ContentPreviewService.closeWin());
+            });
+        }
+        if (open) {
+            this.loadDocument(this.previewUri, true);
+        }
+    }
+    openWindow(src, clean = false) {
+        ContentPreviewService.undockWin(src);
+        if (clean) {
+            while (this.undockWin.document.body.firstChild) {
+                this.undockWin.document.body.removeChild(this.undockWin.document.body.firstChild);
             }
-            else {
-                this.locationTypes = [];
-                this.locationParent = null;
+        }
+        else if (!src && !this.undockWin.document.querySelector('#no-file')) {
+            this.undockWin.document.write(`<div id="no-file" style="opacity: 0.06; display: flex; height: 100%; width: 100%; align-items: center; justify-content: center;">
+          <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 48 48">
+          <path d="M29 4H14.6c-.8 0-1.5.2-2 .6l27.2 27.2v-17L29 4zm-.7 11.6V7.8l7.8 7.8h-7.8zM43.4 40.8l-2.5 2.5-3.5-3.5c-.4.1-.8.2-1.2.2H14.6c-2 
+          0-3.6-1.6-3.6-3.6V13.5L5.9 8.4l2.5-2.5L11 8.4l28.7 28.7 3.1 3.1.6.6z"/>
+          </svg>
+        <div>`);
+        }
+    }
+    loadDocument(uri, force) {
+        var _a, _b;
+        if (force) {
+            this.isLarge = false;
+        }
+        if (!force && (this.disabled || !uri || (uri === this.latestUri && !this.hasError))) {
+            return false;
+        }
+        this.latestUri = uri || '';
+        this.hasError = false;
+        this.isNotSupported = false;
+        if (this.isUndocked) {
+            this.openWindow(this.latestUri);
+            const onload = () => { var _a; return this.pluginsService.applyFunction((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load, 'iframe, component', [this.undockWin, this]); };
+            this.iframeInit(this.undockWin, ((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load) && onload);
+            return false;
+        }
+        if (this.isLarge) {
+            return false;
+        }
+        if (this.isMedia) {
+            this.renderer.setAttribute(this.iframeMedia.nativeElement, 'src', this.latestUri);
+            const onload = () => { var _a; return this.pluginsService.applyFunction((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load, 'iframe, component', [this.iframeMedia.nativeElement, this]); };
+            this.iframeInit(this.iframeMedia.nativeElement, ((_b = this.viewer) === null || _b === void 0 ? void 0 : _b.load) && onload);
+        }
+        else {
+            if (!this.pdfjs) {
+                this.pdfjs = this.iframe.nativeElement;
+                this.renderer.setAttribute(this.pdfjs, 'src', MediaComponent.PDF_VIEWER.replace(/\?.*/, '?file=&'));
+                this.renderer.listen(this.pdfjs, 'load', () => {
+                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('sidebarViewOnLoad', 0);
+                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('viewOnLoad', false);
+                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('locale', ContentPreviewService.mapLang(this.translate.currentLang));
+                    this.pdfjs.contentWindow.document.webL10n.setLanguage(ContentPreviewService.mapLang(this.translate.currentLang));
+                    this.pdfjs.contentWindow.PDFViewerApplication._initializeL10n();
+                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('viewerCssTheme', 1);
+                    this.pdfjs.contentWindow.PDFViewerApplication._forceCssTheme();
+                    this.pdfjs.contentWindow.PDFViewerApplication.appConfig.viewerContainer
+                        .addEventListener('dragenter', e => window.document.dispatchEvent(new DragEvent('dragenter', e)));
+                    this.pdfjs.contentWindow.PDFViewerApplication.appConfig.viewerContainer.addEventListener('drop', e => e.stopPropagation());
+                    this.openPdfViewer(this.latestUri);
+                });
             }
-        });
+            else if (this.pdfjs.contentWindow && this.pdfjs.contentWindow.PDFViewerApplication) {
+                this.pdfjs.contentWindow.PDFViewerApplication.pdfSidebar.close();
+                this.openPdfViewer(this.latestUri);
+            }
+        }
     }
-    ngOnDestroy() {
-        if (this.activeLocationSubscription) {
-            this.activeLocationSubscription.unsubscribe();
+    /**
+     * Custom search inside PDF.JS based on search term
+     * @param term search term
+     * @param win iframe window
+     */
+    searchPDF(term = '', win) {
+        var _a, _b;
+        // 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;
         }
     }
-    trackByFn(index, item) {
-        return index;
+    preventDropEvent(win) {
+        var _a, _b, _c, _d;
+        if ((_b = (_a = this.iframe) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.startsWith(window.location.origin)) {
+            (_c = win === null || win === void 0 ? void 0 : win.document) === null || _c === void 0 ? void 0 : _c.addEventListener('drop', (e) => e.stopPropagation());
+            // dispach drag & drop events to main window
+            (_d = win === null || win === void 0 ? void 0 : win.document) === null || _d === void 0 ? void 0 : _d.addEventListener('dragenter', (e) => {
+                window.document.dispatchEvent(new DragEvent('dragenter', e));
+                setTimeout(() => window.document.dispatchEvent(new DragEvent('dragleave', e)), 10);
+            });
+        }
+    }
+    iframeInit(iframe = this.iframe, onload) {
+        if (iframe) {
+            iframe._init || fromEvent(iframe, 'load')
+                .pipe(takeUntil(this.componentDestroyed$))
+                .subscribe(() => {
+                const win = this.setApi(iframe);
+                onload && onload();
+                setTimeout(() => {
+                    // this.loading = false;            
+                    this.searchPDF(this.searchTerm, win);
+                    this.preventDropEvent(win);
+                }, 100);
+            });
+            iframe._init = !!this.setApi(iframe);
+        }
+    }
+    setApi(iframe) {
+        // set api to iframe window
+        const win = (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) || iframe;
+        win['api'] = window['api'];
+        return win;
+    }
+    ngAfterViewInit() {
+    }
+    ngOnDestroy() {
+        // return ContentPreviewService.undockWinActive() && this.openWindow('', true);
     }
 }
-AppAddDialogComponent.decorators = [
+MediaComponent.VIDEO_VIEWER = 'assets/_default/api/video/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}';
+MediaComponent.PDF_VIEWER = 'assets/_default/api/pdf/web/viewer.html?file=&path=${path}&pathPdf=${pathPdf}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}&css=%23toolbarViewerRight%20%23print%7Bdisplay%3Ablock!important%3B%7D';
+MediaComponent.decorators = [
     { type: Component, args: [{
-                selector: 'eo-app-add-dialog',
-                template: "<section class=\"autocomplete\">\r\n  <p-autoComplete [(ngModel)]=\"selectedNode\" [minLength]=\"1\" [delay]=\"500\" #autocomplete\r\n    [suggestions]=\"autocompleteRes\" field=\"label\"\r\n    [forceSelection]=\"true\"\r\n    (onSelect)=\"onSelect($event)\"\r\n    (completeMethod)=\"autocompleteFn($event)\">\r\n    \r\n    <ng-template let-item pTemplate=\"item\">\r\n      <span class=\"ui-autocomplete-token-label\" title=\"{{item.label}} ({{item.location}})\">\r\n        <strong>{{item.label}}</strong>\r\n        <span>{{item.location}}</span>\r\n      </span>\r\n    </ng-template>\r\n  </p-autoComplete>\r\n</section>\r\n\r\n<section class=\"type-lists\">\r\n  <section class=\"section location\" *ngIf=\"locationParent\">\r\n    <div class=\"subhead\"><span translate>eo.add.title.location</span><span> \"{{locationParent.title}}\"</span></div>\r\n    <div class=\"type sub\" (click)=\"addToSubfolder()\" *ngIf=\"subfolder\">\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_create_new_folder.svg'\"></eo-icon>\r\n      <div>\r\n        <div class=\"label\">{{'eo.add.title.location.subfolder'|translate: ({folder: subfolder.title})}}</div>\r\n        <div class=\"group\">{{subFolderDescription}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"type\" *ngFor=\"let type of locationTypes; trackBy: trackByFn\" (click)=\"prepare(type)\">\r\n      <eo-icon [objectType]=\"type\"></eo-icon>\r\n      <div>\r\n        <div class=\"label\">{{type.label}}</div>\r\n        <div class=\"group\">{{type.group}}</div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  \r\n  <section class=\"section general\" *ngIf=\"rootTypes.length; else noRootTypes\">\r\n    <div class=\"subhead\"><span translate>eo.add.title.location.common</span></div>\r\n      <div class=\"type\" *ngFor=\"let type of rootTypes; trackBy: trackByFn\"\r\n           [ngClass]=\"{context: type.isContextFolder}\"\r\n           (click)=\"prepare(type, true)\">\r\n        <eo-icon [objectType]=\"type\"></eo-icon>\r\n        <div>\r\n          <div class=\"label\">{{type.label}}</div>\r\n          <div class=\"group\">{{type.group}}</div>\r\n        </div>\r\n      </div>\r\n  </section>\r\n</section>\r\n\r\n<ng-template #noRootTypes>\r\n  <div *ngIf=\"!locationParent\">\r\n    <span class=\"empty__root-types\" translate>eo.add.empty.root.types</span>\r\n  </div>\r\n</ng-template>\r\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}"]
+                selector: 'eo-media',
+                template: "<div [hidden]=\"!open\">\r\n\r\n  <!-- attachments overlay -->\r\n  <div class=\"attachments\" *ngIf=\"attachments?.length\" [ngClass]=\"{notmain: latestUri !== previewUri && !attachmentsShown, active: attachmentsShown}\"\r\n       (eoOutsideClick)=\"attachmentsShown = false\">\r\n    <div class=\"attachments-list\" *ngIf=\"attachmentsShown\">\r\n      <div class=\"attachment main\" (click)=\"selectAttachment(null, isLarge)\" [ngClass]=\"{current: latestUri === previewUri}\">{{dmsObjectTitle}}</div>\r\n      <div class=\"attachment\" *ngFor=\"let a of attachments\" (click)=\"selectAttachment(a, isLarge)\" [ngClass]=\"{current: latestUri === a.previewUri}\">\r\n        {{a.name}}\r\n      </div>\r\n    </div>\r\n\r\n    <eo-icon class=\"button\" [badge]=\"attachments?.length\"\r\n             (click)=\"attachmentsShown = !attachmentsShown\"\r\n             [iconSrc]=\"attachmentsShown ? 'assets/_default/svg/ic_clear.svg' : 'assets/_default/svg/ic_attachment.svg'\"></eo-icon>\r\n  </div>\r\n\r\n  <div class=\"preview-container\" [style.overflow]=\"'hidden'\" [hidden]=\"hasError\">\r\n    <iframe [hidden]=\"isNotSupported || isLarge || isUndocked || isMedia\" #iframe height=\"100%\" width=\"100%\" frameborder=\"0\"></iframe>\r\n    <iframe [hidden]=\"isNotSupported || isLarge || isUndocked || !isMedia\" #iframeMedia height=\"100%\" width=\"100%\" frameborder=\"0\"></iframe>\r\n    <div class=\"slide\" *ngIf=\"isNotSupported || isLarge || isUndocked\">\r\n      <!--<img *ngIf=\"!isMedia\" [src]=\"slideUri\" alt=\"preview\">-->\r\n      <eo-icon *ngIf=\"mediaType\" [objectType]=\"mediaType\"></eo-icon>\r\n      <div class=\"large-content\" *ngIf=\"isLarge && !isUndocked\" (click)=\"loadDocument(latestUri, true)\" translate>eo.object.preview.proceed</div>\r\n      <div class=\"large-content not-supported\" *ngIf=\"isNotSupported\" translate>eo.object.preview.not.supported</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div [hidden]=\"!hasError && open\" class=\"empty-container\">\r\n  <eo-icon class=\"nofile\" [iconSrc]=\"'assets/_default/svg/ic_no-file.svg'\"></eo-icon>\r\n</div>\r\n\r\n<eo-icon *ngIf=\"!undockDisabled\" class=\"button undock\" [iconSrc]=\"'assets/_default/svg/ic_undock.svg'\" (click)=\"undock()\"></eo-icon>",
+                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)}"]
             },] }
 ];
-AppAddDialogComponent.ctorParameters = () => [
-    { type: PrepareService },
-    { type: Router },
-    { type: SystemService },
+MediaComponent.ctorParameters = () => [
     { type: TranslateService },
-    { type: PendingChangesService },
-    { type: LocationService }
+    { type: DmsService },
+    { type: Renderer2 },
+    { type: SystemService },
+    { type: NgZone },
+    { type: Config },
+    { type: PluginsService },
+    { type: BackendService }
 ];
-AppAddDialogComponent.propDecorators = {
-    onClose: [{ type: Output }]
+MediaComponent.propDecorators = {
+    undockDisabled: [{ type: Input }],
+    enableCloseBtn: [{ type: Input }],
+    useVersion: [{ type: Input }],
+    open: [{ type: HostBinding, args: ['class.open',] }],
+    codesystem: [{ type: ViewChild, args: ['codesystem',] }],
+    iframe: [{ type: ViewChild, args: ['iframe', { static: true },] }],
+    iframeMedia: [{ type: ViewChild, args: ['iframeMedia', { static: true },] }],
+    setAttachments: [{ type: Input, args: ['attachments',] }],
+    setSearchTerm: [{ type: Input, args: ['searchTerm',] }],
+    disabled: [{ type: Input }],
+    previewUri: [{ type: Input }],
+    previewFile: [{ type: Input }],
+    dmsObject: [{ type: Input }]
 };
 
-class PreventDoubleClickDirective {
-    constructor() {
-        this.debounceTime = 500;
-        this.debounceClick = new EventEmitter();
-        this.clicks = new Subject();
-    }
-    ngOnInit() {
-        this.subscription = this.clicks.pipe(throttleTime(this.debounceTime)).subscribe(e => this.debounceClick.emit(e));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    clickEvent(event) {
-        //TODO: does not support LinkAction (ctrl + click)
-        event.preventDefault();
-        event.stopPropagation();
-        this.clicks.next(event);
-    }
+class MediaModule {
 }
-PreventDoubleClickDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[eoPreventDoubleClick]'
+MediaModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    UiModule,
+                    FormsModule,
+                    FormElementsModule
+                ],
+                declarations: [MediaComponent],
+                exports: [MediaComponent]
             },] }
-];
-PreventDoubleClickDirective.ctorParameters = () => [];
-PreventDoubleClickDirective.propDecorators = {
-    debounceTime: [{ type: Input }],
-    debounceClick: [{ type: Output }],
-    clickEvent: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
+];
 
-class ActionComponentAnchorDirective {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-    }
+/**
+ * @module
+ * @description
+ * Module rendering a dms objects form.
+ */
+class ObjectFormModule {
 }
-ActionComponentAnchorDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[eoActionComponentAnchor]'
+ObjectFormModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    SharedModule,
+                    TabViewModule,
+                    FieldsetModule,
+                    UiModule,
+                    DialogModule,
+                    PipesModule,
+                    AgGridModule,
+                    ShortcutsModule,
+                    FormElementsModule,
+                    SplitModule,
+                    ResultListModule,
+                    ListContainerModule,
+                    GridModule,
+                    MediaModule
+                ],
+                exports: [ObjectFormComponent, ObjectFormGroupComponent, ObjectFormEditComponent, FormElementComponent],
+                providers: [ObjectFormHelperService],
+                declarations: [
+                    ObjectFormComponent,
+                    ObjectFormGroupComponent,
+                    ObjectFormEditComponent,
+                    FormElementComponent,
+                    FormElementTableComponent,
+                    RowEditComponent
+                ]
             },] }
-];
-ActionComponentAnchorDirective.ctorParameters = () => [
-    { type: ViewContainerRef }
 ];
 
-class ActionMenuComponent extends UnsubscribeOnDestroy {
-    constructor(actionService, router, viewContainerRef, componentFactoryResolver) {
-        super();
-        this.actionService = actionService;
+class AppAddDialogComponent {
+    constructor(prepareService, router, systemService, translate, pendingChanges, locationService) {
+        this.prepareService = prepareService;
         this.router = router;
-        this.viewContainerRef = viewContainerRef;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.actionLists = {
-            common: [], further: []
-        };
-        this.subActionsListHeader = '';
-        this.showComponent = false;
-        this.showMenu = false;
-        this.loading = false;
-        // subscribe for visibility observable indicating whether to show or hide the actions
-        this.actionService
-            .actionsShowing$.pipe(takeUntil(this.componentDestroyed$))
-            .subscribe((cmd) => {
-            if (!this.showMenu && cmd.show) {
-                this.selection = cmd.selection;
-                this.target = cmd.target;
-                this.showActionMenu();
-            }
-            else if (this.showMenu && !cmd.show) {
-                this.hideActionMenu();
-            }
-        });
-        this.router.events
-            .pipe(takeUntil(this.componentDestroyed$), filter(evt => evt instanceof NavigationStart))
-            .subscribe(() => this.hide());
-    }
-    getActions() {
-        this.actionService
-            .getActionsList(this.selection, this.viewContainerRef)
-            .subscribe(actionsList => {
-            this.actionLists.common = actionsList.filter(actionListEntry => actionListEntry.action.group === 'common');
-            this.actionLists.further = actionsList.filter(actionListEntry => actionListEntry.action.group === 'further');
-        });
-    }
-    getMoreActions() {
-        this.loading = true;
-        this.actionService
-            .getMoreActions(this.selection, this.viewContainerRef)
-            .subscribe(actionList => {
-            this.loading = false;
-            this.actionLists.further = this.actionLists.further.concat(actionList).sort(Utils.sortValues('action.label'));
-        }, Utils.throw(() => this.loading = false));
+        this.systemService = systemService;
+        this.translate = translate;
+        this.pendingChanges = pendingChanges;
+        this.locationService = locationService;
+        this.onClose = new EventEmitter();
+        this.rootTypes = [];
+        this.locationTypes = [];
     }
-    hide() {
-        this.actionService.hideActions();
+    prepare(type, isRootType = false) {
+        if (this.pendingChanges.check()) {
+            return;
+        }
+        let pid = null;
+        if (!isRootType && this.locationParent) {
+            pid = this.locationParent.id;
+        }
+        this.prepareService
+            .createPreparedItem(pid, type.name)
+            .subscribe(() => {
+            this.router.navigateByUrl('/prepare');
+        }, Utils.throw(null, this.translate.instant('eo.add.prepare.fail.title'), this.translate.instant('eo.add.prepare.fail.msg')));
+        this.onClose.emit();
     }
-    showActionDescription(i, event) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.actionDescription = i === this.actionDescription ? null : i;
+    autocompleteFn(evt) {
+        this.autocompleteRes = this.autocompleteList.filter(type => {
+            return type.label.toLowerCase().indexOf(evt.query.toLowerCase()) != -1;
+        });
     }
-    showActionMenu() {
-        this.getActions();
-        if (this.target === 'DMS_OBJECT') {
-            this.getMoreActions();
+    onSelect(node) {
+        if (node.isSubfolder) {
+            this.addToSubfolder();
+        }
+        else {
+            this.prepare(node.type, node.isRootType);
         }
-        this.showMenu = true;
+    }
+    preparedItemData(payload) {
+        const typeElement = this.systemService
+            .getObjectType(this.subfolder.type)
+            .elements
+            .filter(val => this.subfolder.data ? val.name === Object.keys(this.subfolder.data)[0] : null);
+        if (typeElement.length && typeElement[0].multiselect) {
+            Object.entries(payload).map(([key, value]) => payload[key] = [value]);
+        }
+        return payload;
+    }
+    addToSubfolder() {
+        if (this.pendingChanges.check()) {
+            return;
+        }
+        let pid = this.locationParent.id;
+        const { data, type } = this.subfolder;
+        const payload = this.preparedItemData(data);
+        this.prepareService
+            .createPreparedItem(pid, type ? type : null)
+            .pipe(mergeMap(res => this.prepareService.updatePreparedItemIndexData(res.id, payload)))
+            .subscribe(() => {
+            this.router.navigateByUrl('/prepare');
+        }, Utils.throw(null, this.translate.instant('eo.add.prepare.fail.title'), this.translate.instant('eo.add.prepare.fail.msg')));
+        this.onClose.emit();
+    }
+    fetchRootTypes() {
+        this.prepareService
+            .getPrepareRootTypes()
+            .subscribe((types) => {
+            this.rootTypes = this.sortTypes(types);
+            this.createAutocompleteList();
+        });
+    }
+    createAutocompleteList() {
+        this.autocompleteList = this.rootTypes.map(type => {
+            return {
+                label: type.label,
+                location: this.translate.instant('eo.add.title.location.common'),
+                isRootType: true,
+                isSubfolder: false,
+                type
+            };
+        }).concat(this.locationTypes.map(type => {
+            return {
+                label: type.label,
+                location: `${this.translate.instant('eo.add.title.location')} ${this.locationParent.title}`,
+                isRootType: false,
+                isSubfolder: false,
+                type
+            };
+        }));
+        if (this.subfolder) {
+            this.autocompleteList.push({
+                label: this.subfolder.title,
+                location: `${this.translate.instant('eo.add.title.location')} ${this.locationParent.title}`,
+                isRootType: false,
+                isSubfolder: true,
+            });
+        }
+    }
+    sortTypes(types) {
+        return types.sort((a, b) => {
+            if (a.isContextFolder && !b.isContextFolder) {
+                return -1;
+            }
+            if (!a.isContextFolder && b.isContextFolder) {
+                return 1;
+            }
+            return Utils.sortValues('label').call(this, a, b);
+        });
+    }
+    fetchAllowedChildTypes(loc) {
+        this.prepareService
+            .getPrepareChildTypes(loc.id)
+            .subscribe((res) => {
+            const { types, parent } = res;
+            this.locationParent = Utils.truncateString(parent, 30);
+            this.locationTypes = this.sortTypes(types);
+            this.locationParent.title = Utils.truncateString(parent['title'], 30);
+            if (loc.subFolder && this.isSubFolderAllowed(loc.subFolder, this.locationTypes)) {
+                this.subfolder = loc.subFolder;
+                this.subFolderDescription = loc.title + '; ' + this.subfolder.title;
+            }
+            this.createAutocompleteList();
+        });
+    }
+    isSubFolderAllowed(subFolder, locationTypes) {
+        return !!locationTypes.find(lt => this.systemService.implementsType(lt, subFolder.type));
+    }
+    ngOnInit() {
+        this.fetchRootTypes();
+        this.activeLocationSubscription = this.locationService.activeLocation$
+            .subscribe((loc) => {
+            if (loc) {
+                this.fetchAllowedChildTypes(loc);
+            }
+            else {
+                this.locationTypes = [];
+                this.locationParent = null;
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.activeLocationSubscription) {
+            this.activeLocationSubscription.unsubscribe();
+        }
+    }
+    trackByFn(index, item) {
+        return index;
+    }
+}
+AppAddDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'eo-app-add-dialog',
+                template: "<section class=\"autocomplete\">\r\n  <p-autoComplete [(ngModel)]=\"selectedNode\" [minLength]=\"1\" [delay]=\"500\" #autocomplete\r\n    [suggestions]=\"autocompleteRes\" field=\"label\"\r\n    [forceSelection]=\"true\"\r\n    (onSelect)=\"onSelect($event)\"\r\n    (completeMethod)=\"autocompleteFn($event)\">\r\n    \r\n    <ng-template let-item pTemplate=\"item\">\r\n      <span class=\"ui-autocomplete-token-label\" title=\"{{item.label}} ({{item.location}})\">\r\n        <strong>{{item.label}}</strong>\r\n        <span>{{item.location}}</span>\r\n      </span>\r\n    </ng-template>\r\n  </p-autoComplete>\r\n</section>\r\n\r\n<section class=\"type-lists\">\r\n  <section class=\"section location\" *ngIf=\"locationParent\">\r\n    <div class=\"subhead\"><span translate>eo.add.title.location</span><span> \"{{locationParent.title}}\"</span></div>\r\n    <div class=\"type sub\" (click)=\"addToSubfolder()\" *ngIf=\"subfolder\">\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_create_new_folder.svg'\"></eo-icon>\r\n      <div>\r\n        <div class=\"label\">{{'eo.add.title.location.subfolder'|translate: ({folder: subfolder.title})}}</div>\r\n        <div class=\"group\">{{subFolderDescription}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"type\" *ngFor=\"let type of locationTypes; trackBy: trackByFn\" (click)=\"prepare(type)\">\r\n      <eo-icon [objectType]=\"type\"></eo-icon>\r\n      <div>\r\n        <div class=\"label\">{{type.label}}</div>\r\n        <div class=\"group\">{{type.group}}</div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  \r\n  <section class=\"section general\" *ngIf=\"rootTypes.length; else noRootTypes\">\r\n    <div class=\"subhead\"><span translate>eo.add.title.location.common</span></div>\r\n      <div class=\"type\" *ngFor=\"let type of rootTypes; trackBy: trackByFn\"\r\n           [ngClass]=\"{context: type.isContextFolder}\"\r\n           (click)=\"prepare(type, true)\">\r\n        <eo-icon [objectType]=\"type\"></eo-icon>\r\n        <div>\r\n          <div class=\"label\">{{type.label}}</div>\r\n          <div class=\"group\">{{type.group}}</div>\r\n        </div>\r\n      </div>\r\n  </section>\r\n</section>\r\n\r\n<ng-template #noRootTypes>\r\n  <div *ngIf=\"!locationParent\">\r\n    <span class=\"empty__root-types\" translate>eo.add.empty.root.types</span>\r\n  </div>\r\n</ng-template>\r\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}"]
+            },] }
+];
+AppAddDialogComponent.ctorParameters = () => [
+    { type: PrepareService },
+    { type: Router },
+    { type: SystemService },
+    { type: TranslateService },
+    { type: PendingChangesService },
+    { type: LocationService }
+];
+AppAddDialogComponent.propDecorators = {
+    onClose: [{ type: Output }]
+};
+
+class PreventDoubleClickDirective {
+    constructor() {
+        this.debounceTime = 500;
+        this.debounceClick = new EventEmitter();
+        this.clicks = new Subject();
+    }
+    ngOnInit() {
+        this.subscription = this.clicks.pipe(throttleTime(this.debounceTime)).subscribe(e => this.debounceClick.emit(e));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    clickEvent(event) {
+        //TODO: does not support LinkAction (ctrl + click)
+        event.preventDefault();
+        event.stopPropagation();
+        this.clicks.next(event);
+    }
+}
+PreventDoubleClickDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[eoPreventDoubleClick]'
+            },] }
+];
+PreventDoubleClickDirective.ctorParameters = () => [];
+PreventDoubleClickDirective.propDecorators = {
+    debounceTime: [{ type: Input }],
+    debounceClick: [{ type: Output }],
+    clickEvent: [{ type: HostListener, args: ['click', ['$event'],] }]
+};
+
+class ActionComponentAnchorDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+}
+ActionComponentAnchorDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[eoActionComponentAnchor]'
+            },] }
+];
+ActionComponentAnchorDirective.ctorParameters = () => [
+    { type: ViewContainerRef }
+];
+
+class ActionMenuComponent extends UnsubscribeOnDestroy {
+    constructor(actionService, router, viewContainerRef, componentFactoryResolver) {
+        super();
+        this.actionService = actionService;
+        this.router = router;
+        this.viewContainerRef = viewContainerRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.actionLists = {
+            common: [], further: []
+        };
+        this.subActionsListHeader = '';
+        this.showComponent = false;
+        this.showMenu = false;
+        this.loading = false;
+        // subscribe for visibility observable indicating whether to show or hide the actions
+        this.actionService
+            .actionsShowing$.pipe(takeUntil(this.componentDestroyed$))
+            .subscribe((cmd) => {
+            if (!this.showMenu && cmd.show) {
+                this.selection = cmd.selection;
+                this.target = cmd.target;
+                this.showActionMenu();
+            }
+            else if (this.showMenu && !cmd.show) {
+                this.hideActionMenu();
+            }
+        });
+        this.router.events
+            .pipe(takeUntil(this.componentDestroyed$), filter(evt => evt instanceof NavigationStart))
+            .subscribe(() => this.hide());
+    }
+    getActions() {
+        this.actionService
+            .getActionsList(this.selection, this.viewContainerRef)
+            .subscribe(actionsList => {
+            this.actionLists.common = actionsList.filter(actionListEntry => actionListEntry.action.group === 'common');
+            this.actionLists.further = actionsList.filter(actionListEntry => actionListEntry.action.group === 'further');
+        });
+    }
+    getMoreActions() {
+        this.loading = true;
+        this.actionService
+            .getMoreActions(this.selection, this.viewContainerRef)
+            .subscribe(actionList => {
+            this.loading = false;
+            this.actionLists.further = this.actionLists.further.concat(actionList).sort(Utils.sortValues('action.label'));
+        }, Utils.throw(() => this.loading = false));
+    }
+    hide() {
+        this.actionService.hideActions();
+    }
+    showActionDescription(i, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.actionDescription = i === this.actionDescription ? null : i;
+    }
+    showActionMenu() {
+        this.getActions();
+        if (this.target === 'DMS_OBJECT') {
+            this.getMoreActions();
+        }
+        this.showMenu = true;
     }
     hideActionMenu() {
         this.clear();
@@ -15628,7 +16119,7 @@ class AddResubmissionComponent {
 AddResubmissionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-add-resubmission',
-                template: "<div class=\"eo-resubmission\">\r\n  <h2>{{header}}</h2>\r\n  <form [formGroup]=\"addResubmissionForm\">\r\n    <eo-form-input [skipToggle]=\"true\" [label]=\"dueFieldLabel\">\r\n      <eo-datetime [withTime]=\"true\" [onylFutureDates]=\"true\" formControlName=\"dueFieldFCN\"></eo-datetime>\r\n    </eo-form-input>\r\n    <eo-form-input [skipToggle]=\"true\" [label]=\"titleFieldLabel\" [required]=\"true\" [invalid]=\"titleValidity\" *ngIf=\"selection.length === 1\">\r\n      <eo-string formControlName=\"titleFieldFCN\"></eo-string>\r\n    </eo-form-input>\r\n    <div class=\"err-msg\" *ngIf=\"titleValidity\">\r\n      <div translate>eo.form.property.required</div>\r\n    </div>\r\n    <eo-form-input [skipToggle]=\"true\" [label]=\"inboxCbLabel\">\r\n      <eo-checkbox formControlName=\"inboxCbFCN\" [tristate]=\"false\"></eo-checkbox>\r\n    </eo-form-input>\r\n    <eo-form-input [skipToggle]=\"true\" [label]=\"emailCbLabel\">\r\n      <eo-checkbox formControlName=\"emailCbFCN\" [tristate]=\"false\" [readonly]=\"!hasEmail\"></eo-checkbox>\r\n    </eo-form-input>\r\n  </form>\r\n\r\n  <!-- error/validation messages -->\r\n  <div class=\"errors\">\r\n    <div class=\"err-msg\" *ngIf=\"notificationMethodValidation\" translate>eo.resubmission.error.msg</div>\r\n    <div class=\"err-msg\" *ngIf=\"dateValidation\" translate>eo.resubmission.error.msg.date</div>\r\n  </div>\r\n\r\n  <div class=\"form-buttons\" *ngIf=\"!processing; else indicator\">\r\n    <button class=\"secondary\" (click)=\"cancel()\" translate>eo.resubmission.cancel</button>\r\n    <button class=\"secondary\" *ngIf=\"selection[0].resubmissions.length\" (click)=\"removeResubmission()\" translate>eo.resubmission.delete</button>\r\n    <button class=\"primary\" [disabled]=\"addResubmissionForm.errors || titleValidity\" *ngIf=\"selection[0].resubmissions.length\" (click)=\"updateResubmission()\" translate>eo.resubmission.apply</button>\r\n    <button class=\"primary\" [disabled]=\"addResubmissionForm.errors || titleValidity\" *ngIf=\"!selection[0].resubmissions.length\" (click)=\"createResubmission()\" translate>eo.resubmission.add</button>\r\n  </div>\r\n\r\n  <ng-template #indicator>\r\n    <div class=\"process-indicator\"><eo-icon [iconSrc]=\"'ic_kitt-loader.svg'\"></eo-icon></div>\r\n  </ng-template>\r\n</div>\r\n\r\n",
+                template: "<div class=\"eo-resubmission\">\r\n  <h2>{{header}}</h2>\r\n  <form [formGroup]=\"addResubmissionForm\">\r\n    <eo-form-input [skipToggle]=\"true\" [label]=\"dueFieldLabel\">\r\n      <eo-datetime [withTime]=\"true\" [onlyFutureDates]=\"true\" formControlName=\"dueFieldFCN\"></eo-datetime>\r\n    </eo-form-input>\r\n    <eo-form-input [skipToggle]=\"true\" [label]=\"titleFieldLabel\" [required]=\"true\" [invalid]=\"titleValidity\" *ngIf=\"selection.length === 1\">\r\n      <eo-string formControlName=\"titleFieldFCN\"></eo-string>\r\n    </eo-form-input>\r\n    <div class=\"err-msg\" *ngIf=\"titleValidity\">\r\n      <div translate>eo.form.property.required</div>\r\n    </div>\r\n    <eo-form-input [skipToggle]=\"true\" [label]=\"inboxCbLabel\">\r\n      <eo-checkbox formControlName=\"inboxCbFCN\" [tristate]=\"false\"></eo-checkbox>\r\n    </eo-form-input>\r\n    <eo-form-input [skipToggle]=\"true\" [label]=\"emailCbLabel\">\r\n      <eo-checkbox formControlName=\"emailCbFCN\" [tristate]=\"false\" [readonly]=\"!hasEmail\"></eo-checkbox>\r\n    </eo-form-input>\r\n  </form>\r\n\r\n  <!-- error/validation messages -->\r\n  <div class=\"errors\">\r\n    <div class=\"err-msg\" *ngIf=\"notificationMethodValidation\" translate>eo.resubmission.error.msg</div>\r\n    <div class=\"err-msg\" *ngIf=\"dateValidation\" translate>eo.resubmission.error.msg.date</div>\r\n  </div>\r\n\r\n  <div class=\"form-buttons\" *ngIf=\"!processing; else indicator\">\r\n    <button class=\"secondary\" (click)=\"cancel()\" translate>eo.resubmission.cancel</button>\r\n    <button class=\"secondary\" *ngIf=\"selection[0].resubmissions.length\" (click)=\"removeResubmission()\" translate>eo.resubmission.delete</button>\r\n    <button class=\"primary\" [disabled]=\"addResubmissionForm.errors || titleValidity\" *ngIf=\"selection[0].resubmissions.length\" (click)=\"updateResubmission()\" translate>eo.resubmission.apply</button>\r\n    <button class=\"primary\" [disabled]=\"addResubmissionForm.errors || titleValidity\" *ngIf=\"!selection[0].resubmissions.length\" (click)=\"createResubmission()\" translate>eo.resubmission.add</button>\r\n  </div>\r\n\r\n  <ng-template #indicator>\r\n    <div class=\"process-indicator\"><eo-icon [iconSrc]=\"'ic_kitt-loader.svg'\"></eo-icon></div>\r\n  </ng-template>\r\n</div>\r\n\r\n",
                 styles: [".eo-resubmission{display:flex;flex-flow:column;justify-content:center;margin:var(--app-pane-padding)}.eo-resubmission h2{font-size:var(--font-subhead);font-weight:var(--font-weight-light)}.eo-resubmission .form-buttons{padding:5px 0;text-align:right}.eo-resubmission .form-buttons button:nth-child(2n):not(:last-child){margin:0 calc(var(--app-pane-padding)/2)}.eo-resubmission .form-buttons button:nth-child(2n):last-child{margin-left:calc(var(--app-pane-padding)/2);margin-right:0}.eo-resubmission .process-indicator{display:flex;justify-content:flex-end}.eo-resubmission .err-msg{background-color:var(--color-error);border:0;border-radius:2px;color:var(--color-white);margin:calc(var(--app-pane-padding)/4) 0;padding:calc(var(--app-pane-padding)/4)}.eo-resubmission .errors .err-msg:before{content:\"!\";padding:0 calc(var(--app-pane-padding)/4)}"]
             },] }
 ];
@@ -16251,16 +16742,65 @@ AppLayoutComponent.propDecorators = {
 };
 
 /**
- * Module holding the base components of the application shell like application bar, side, search etc.
+ * This directive traps the focus inside the element it is applied to.
+ * When applied, a users can't "tab out" of the element.
+ * You need at least two focusable children in the element for it to work properly.
+ * See the querySelector in the trapFocus method to know which elements count as focusable.
+ * Additionally you can add the attribute "focusable" to an element if you are unsure.
  */
-class EoAppShellModule {
+class TrapFocusDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterViewInit() {
+        this.trapFocus(this.el.nativeElement);
+    }
+    trapFocus(element) {
+        let focusableElements = element.querySelectorAll('a[href], button, textarea, input[type="text"],' +
+            'input[type="radio"], input[type="checkbox"], select, [focusable]');
+        focusableElements = Array.from(focusableElements)
+            .filter((el) => !el.disabled && !el.classList.contains('disabled'));
+        const firstFocusableElement = focusableElements[0];
+        const lastFocusableElement = focusableElements[focusableElements.length - 1];
+        element.addEventListener('keydown', ((event) => {
+            const isTabPressed = event.keyCode === 9; // tab key code
+            if (!isTabPressed)
+                return;
+            if (event.shiftKey) /* shift + tab */ {
+                if (document.activeElement === firstFocusableElement) {
+                    lastFocusableElement.focus();
+                    event.preventDefault();
+                }
+            }
+            else /* tab */ {
+                if (document.activeElement === lastFocusableElement) {
+                    firstFocusableElement.focus();
+                    event.preventDefault();
+                }
+            }
+        }));
+    }
 }
-EoAppShellModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    AppShellRoutingModule,
-                    CommonModule,
-                    FormsModule,
+TrapFocusDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[eoTrapFocus]'
+            },] }
+];
+TrapFocusDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+/**
+ * Module holding the base components of the application shell like application bar, side, search etc.
+ */
+class EoAppShellModule {
+}
+EoAppShellModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    AppShellRoutingModule,
+                    CommonModule,
+                    FormsModule,
                     UiModule,
                     UtilModule,
                     AutoCompleteModule,
@@ -16272,7 +16812,7 @@ EoAppShellModule.decorators = [
                     ShortcutsModule,
                     ActionModule,
                     CtaModule,
-                    ProcessFormModule
+                    ProcessFormModule,
                 ],
                 exports: [AppBarComponent],
                 declarations: [
@@ -16283,7 +16823,8 @@ EoAppShellModule.decorators = [
                     AppAddDialogComponent,
                     AppLayoutComponent,
                     ContextSearchComponent,
-                    AppProcessComponent
+                    AppProcessComponent,
+                    TrapFocusDirective,
                 ]
             },] }
 ];
@@ -16522,851 +17063,422 @@ PluginService.ctorParameters = () => [
     { type: Array, decorators: [{ type: Inject, args: [ENTRY_COMPONENTS,] }] },
     { type: Array, decorators: [{ type: Inject, args: [ENTRY_LINKS,] }] },
     { type: ComponentFactoryResolver }
-];
-
-class PluginComponent {
-    constructor(pluginService) {
-        this.pluginService = pluginService;
-    }
-    set type(type) {
-        this.pluginService.loadByType(type, this.eoPlugin.viewContainerRef);
-    }
-    set id(id) {
-        this.pluginService.loadById(id, this.eoPlugin.viewContainerRef);
-    }
-}
-PluginComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'eo-plugin',
-                template: `
-    <ng-template eoPlugin></ng-template>`
-            },] }
-];
-PluginComponent.ctorParameters = () => [
-    { type: PluginService }
-];
-PluginComponent.propDecorators = {
-    eoPlugin: [{ type: ViewChild, args: [PluginDirective, { static: true },] }],
-    type: [{ type: Input }],
-    id: [{ type: Input }]
-};
-class TabPluginComponent {
-    constructor(pluginService) {
-        this.pluginService = pluginService;
-    }
-    set type(type) {
-        this.types = this.pluginService.loadTabs(type);
-    }
-}
-TabPluginComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'eo-tab-plugin',
-                template: `
-    <eo-tab-panel *ngFor="let t of types" [id]="t.id" [header]="t.id | translate">
-      <eo-plugin [id]="t.id"></eo-plugin>
-    </eo-tab-panel>`
-            },] }
-];
-TabPluginComponent.ctorParameters = () => [
-    { type: PluginService }
-];
-TabPluginComponent.propDecorators = {
-    tabPanels: [{ type: ViewChildren, args: [TabPanelComponent,] }],
-    type: [{ type: Input }]
-};
-class SidebarPluginComponent {
-    constructor(pluginService) {
-        this.pluginService = pluginService;
-    }
-    set type(type) {
-        this._links = this.pluginService.loadLinks(type);
-    }
-}
-SidebarPluginComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'eo-sidebar-plugin',
-                template: `
-    <div #navItem class="nav-item" *ngFor="let l of _links">
-      <a [href]="l.path" *ngIf="l.path.startsWith('http');else link">{{l.id | translate}}</a>
-      <ng-template #link>
-        <a [routerLink]="l.path" [queryParams]="l.queryParams" routerLinkActive="active-link">{{l.id | translate}}</a>
-      </ng-template>
-    </div>`
-            },] }
-];
-SidebarPluginComponent.ctorParameters = () => [
-    { type: PluginService }
-];
-SidebarPluginComponent.propDecorators = {
-    links: [{ type: ViewChildren, args: ['navItem',] }],
-    type: [{ type: Input }]
-};
-
-class ContentPreviewService {
-    static undockWin(src) {
-        const w = window[ContentPreviewService.UNDOCK_WINDOW_NAME] = window.open(src || '', ContentPreviewService.UNDOCK_WINDOW_NAME, 'directories=0, titlebar=0, toolbar=0, location=0, status=0, menubar=0, resizable=1, top=10, left=10');
-        return w;
-    }
-    static closeWin() {
-        return this.getUndockWin() && this.getUndockWin().close();
-    }
-    static getUndockWin() {
-        return window[ContentPreviewService.UNDOCK_WINDOW_NAME];
-    }
-    static undockWinActive() {
-        return !!ContentPreviewService.getUndockWin() && !ContentPreviewService.getUndockWin().closed;
-    }
-    static mapLang(lang) {
-        switch (lang) {
-            case 'en':
-                return 'en-US';
-            case 'es':
-                return 'es-ES';
-            case 'pt':
-                return 'pt-PT';
-            case 'zh':
-                return 'zh-CN';
-            case 'hi':
-                return 'hi-IN';
-            case 'bn':
-                return 'bn-BD';
-            default:
-                return lang;
-        }
-    }
-}
-ContentPreviewService.UNDOCK_WINDOW_NAME = 'eoViewer';
-ContentPreviewService.decorators = [
-    { type: Injectable }
-];
-
-class ObjectDetailsComponent extends UnsubscribeOnDestroy {
-    constructor(router, route, system, empty, agentService, backend, dmsService, selection, actionService, capabilityService, uploadRegistry, eventService, configService, translate) {
-        super();
-        this.router = router;
-        this.route = route;
-        this.system = system;
-        this.empty = empty;
-        this.agentService = agentService;
-        this.backend = backend;
-        this.dmsService = dmsService;
-        this.selection = selection;
-        this.actionService = actionService;
-        this.capabilityService = capabilityService;
-        this.uploadRegistry = uploadRegistry;
-        this.eventService = eventService;
-        this.configService = configService;
-        this.translate = translate;
-        // generate unique id to pass to upload registry
-        this.uploadTarget = new UploadTarget(Utils.uuid(), UploadTarget.OBJECT);
-        this.hasError = false;
-        this.nodmsobject = false;
-        this.showLoader = false;
-        this.panelOrder = { 'master': ['summary', 'indexdata', 'history', 'links'], 'slave': ['preview'] };
-        this.agentIsConnected$ = this.agentService.isConnected$;
-        this.enableCompare = false;
-        this.enableDiff = true;
-        this.enableSync = true;
-        this._emptyState = { icon: 'ic_no-file.svg', text: '', className: '' };
-        this.externalPanels = new QueryList();
-        // shortcut actions
-        this.shortcuts = {
-            id: 'eo.object-details',
-            label: this.translate.instant('eo.shortcuts.eo-object-details.title'),
-            labelKey: 'eo.shortcuts.eo-object-details.title',
-            actions: [
-                {
-                    name: this.translate.instant('eo.shortcuts.action.open.context'),
-                    nameKey: 'eo.shortcuts.action.open.context',
-                    shortcut: new Shortcut('O', false, false),
-                    onExecuteAction: () => {
-                        this.openObject(this.item.id, this.item.typeName);
-                    },
-                    isHidden: () => {
-                        return false;
-                    }
-                }
-            ]
-        };
-        this.parseDmsParams = this.getDmsParams;
-        this.hasContent = new EventEmitter();
-        this.undockWinActive = false;
-        this.panelOrder = this.configService.getRaw('objectDetailsTabs') || this.panelOrder;
-        this.undockWinActive = ContentPreviewService.undockWinActive();
-        this.agentService.setAgentStatus(this.route.snapshot.queryParams['connectagent']).subscribe((hasStatus) => {
-            if (hasStatus) {
-                this.router.navigate([], { queryParams: { connectagent: null }, queryParamsHandling: 'merge' });
-            }
-        });
-    }
-    set reference(isRef) {
-        this.isReference = isRef;
-    }
-    set emptyState(e) {
-        this._emptyState = e || EmptyStateService.defaultEmptyState();
-    }
-    get emptyState() {
-        return this._emptyState;
-    }
-    set dmsParams(params) {
-        this.showLoader = true;
-        this.loadDmsObject(params).subscribe((res) => {
-            this.dmsObject = res;
-            this.showLoader = false;
-        }, Utils.throw(() => this.onHasError(true, true, false)));
-    }
-    set dmsParams2(params) {
-        this.loadDmsObject(params)
-            .subscribe((res) => {
-            this.dmsObject2 = res;
-        }, Utils.throw(() => this.onHasError(true, true, false)));
-    }
-    set dmsObject(v) {
-        var _a;
-        this.item = v;
-        this.onHasError();
-        // prepare indexdata preview
-        this.onIndexDataSaved(null, this.item);
-        this.eventService.trigger(EnaioEvent.DMS_OBJECT_LOADED, this.item);
-        if (this.item) {
-            if (this.item.isActiveVersion && !this.enableCompare) {
-                this.uploadTarget.referenceObject = this.item;
-                this.uploadTarget.onUploadSuccess = () => this.dmsParams = { id: v.id, type: v.typeName };
-                this.uploadRegistry.register(this.uploadTarget);
-            }
-            if (this.item.lock) {
-                this.lockTooltip = this.translate.instant('eo.object.lock') + ' '
-                    + (new LocaleDatePipe(this.translate).transform(this.item.lock.on))
-                    + ', ' + this.item.lock.by.label + ' (' + this.item.lock.by.name + ')';
-            }
-        }
-        else {
-            this.emptyState = this.empty.getEmptyState(0);
-        }
-        if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.subscriptions.length) {
-            this.subscriptionIconTooltip = this.createSubscriptionIconTooltip(this.item);
-        }
-    }
-    set dmsObject2(v) {
-        this.item2 = v;
-        this.onHasError();
-        this.onIndexDataSaved(null, this.item2);
-    }
-    get dataType() {
-        return this.item ? this.item.typeName : 'none';
-    }
-    getDmsParams(data) {
-        return data ? Object.assign(Object.assign({}, data), { type: data.typeName || data.type }) : null;
-    }
-    updateContent() {
-        if (this.applySelection) {
-            if (this.enableCompare) {
-                this.selection
-                    .find(this.applySelection.in)
-                    .selection$
-                    .pipe(takeUntil(this.componentDestroyed$))
-                    .subscribe((res) => {
-                    this.dmsParams = this.parseDmsParams(res[0]);
-                    this.dmsParams2 = this.parseDmsParams(res[1]);
-                });
-                return;
-            }
-            else {
-                this.selection
-                    .find(this.applySelection.in)
-                    .focus$
-                    .pipe(takeUntil(this.componentDestroyed$))
-                    .subscribe(res => {
-                    this.showLoader = true;
-                    this.loadDmsObject(this.parseDmsParams(res)).subscribe((res) => {
-                        // refreshing object details may result in an updated version of the object
-                        // so we'll use this trigger to also emitt those changes to other listening components
-                        if (this.item && res && (this.item.id === res.id) && res.version > this.item.version) {
-                            this.eventService.trigger(EnaioEvent.DMS_OBJECT_UPDATED, res);
-                        }
-                        this.dmsObject = res;
-                        this.showLoader = false;
-                    }, Utils.throw((error) => {
-                        this.uploadRegistry.unregister(this.uploadTarget.id);
-                        return this.onHasError(true, true, false);
-                    }));
-                });
-            }
-        }
-    }
-    refreshContent() {
-        this.updateContent();
-    }
-    prepareIndexDataPreview(item, formData) {
-        const { id, data, type, created, modified, content, contentFileName, contentFileSize, version } = item;
-        return this.system
-            .getObjectTypeForm(type.name, 'EDIT')
-            .pipe(map(form => {
-            let indexDataPreview = {
-                form,
-                data: formData || data
-            };
-            let baseparams = {
-                id,
-                type: type.name,
-                createdOn: new Date(created.on),
-                modifiedOn: new Date(modified.on),
-                createdBy: `${created.by.title} (${created.by.name})`,
-                modifiedBy: `${modified.by.title} (${modified.by.name})`,
-                contentFileName: contentFileName ? contentFileName : null,
-                contentFileSize: contentFileSize ? Number(contentFileSize) : null,
-                version: version || 0,
-                mimeGroup: content ? content.contents ? content.contents[0].mimegroup : null : null,
-                digest: content ? content.contents ? content.contents[0].digest : null : null,
-                contentId: content ? content.contents ? content.id : null : null
-            };
-            return { indexDataPreview, baseparams };
-        }));
-    }
-    onHasError(hasError = false, nodmsobject = false, showLoader = false) {
-        this.hasError = hasError;
-        this.nodmsobject = nodmsobject;
-        this.showLoader = showLoader;
-        this.hasContent.emit(!hasError);
-    }
-    loadDmsObject(params) {
-        var _a;
-        if (!this.enableCompare && params) {
-            delete params.version;
-        }
-        // check for valid id
-        return ((_a = params === null || params === void 0 ? void 0 : params.id) === null || _a === void 0 ? void 0 : _a.length) === 32 ? this.dmsService.getDmsObjectByParams(params) : of(null);
-    }
-    downloadOriginalContent() {
-        this.backend.downloadContent([this.item]);
-    }
-    showActions() {
-        const actions = [this.item, this.item2].filter(v => v);
-        this.actionService.showActions(actions, 'DMS_OBJECT');
-    }
-    openObject(id, _type) {
-        const queryParams = { queryParams: { 'type': _type } };
-        return this.router.navigate(['/object', id], queryParams);
-    }
-    // executed when the dms object changed due to saving its indexdata
-    onIndexDataSaved(formData, item) {
-        if (!this.item) {
-            this.indexDataPreview = null;
-            this.baseparams = null;
-        }
-        if (!this.item2) {
-            this.indexDataPreview2 = null;
-            this.baseparams2 = null;
-        }
-        if (item) {
-            this.prepareIndexDataPreview(item, formData)
-                .subscribe(data => {
-                if (item === this.item) {
-                    this.indexDataPreview = data.indexDataPreview;
-                    this.baseparams = data.baseparams;
-                }
-                else {
-                    this.indexDataPreview2 = data.indexDataPreview;
-                    this.baseparams2 = data.baseparams;
-                }
-            });
-        }
-    }
-    get referenceTitle() {
-        return this.item.contextFolder ? this.item.contextFolder.title : this.item.title;
-    }
-    isJournalObject(item) {
-        return item.type.supertypes.find(sT => sT === 'sysjournalobject');
-    }
-    isVisible(id) {
-        return this.panelOrder.master.includes(id) || this.panelOrder.slave.includes(id);
-    }
-    createSubscriptionIconTooltip(item) {
-        let tooltip = '';
-        const modes = this.item.subscriptions.map(subscription => subscription.mode);
-        const subscribedToAllChanges = modes.includes(SubscriptionMode.DMS_OBJECT_CHANGED) || (modes.includes(SubscriptionMode.ONLY_DOCUMENT_CONTENT_CHANGED) && modes.includes(SubscriptionMode.ONLY_INDEX_DATA_CHANGED));
-        const subscribedToMetaChangesOnly = modes.includes(SubscriptionMode.ONLY_INDEX_DATA_CHANGED) && !modes.includes(SubscriptionMode.ONLY_DOCUMENT_CONTENT_CHANGED) && !modes.includes(SubscriptionMode.DMS_OBJECT_CHANGED);
-        const subscribedToContentChangesOnly = modes.includes(SubscriptionMode.ONLY_DOCUMENT_CONTENT_CHANGED) && !modes.includes(SubscriptionMode.ONLY_INDEX_DATA_CHANGED) && !modes.includes(SubscriptionMode.DMS_OBJECT_CHANGED);
-        if (subscribedToAllChanges) {
-            tooltip = this.translate.instant('eo.object.subscription.icon.tooltip.allChanges');
-        }
-        else if (subscribedToMetaChangesOnly) {
-            tooltip = this.translate.instant('eo.object.subscription.icon.tooltip.meta');
-        }
-        else if (subscribedToContentChangesOnly) {
-            tooltip = this.translate.instant('eo.object.subscription.icon.tooltip.content');
-        }
-        return tooltip;
+];
+
+class PluginComponent {
+    constructor(pluginService) {
+        this.pluginService = pluginService;
     }
-    ngOnInit() {
-        this.capabilities = this.capabilityService.getCapabilities();
-        this.updateContent();
-        this.eventService
-            .on(EnaioEvent.DMS_OBJECT_UPDATED)
-            .pipe(takeUntil(this.componentDestroyed$))
-            .subscribe(event => {
-            if (event.data && this.item.id === event.data.id) {
-                this.dmsObject = this.dmsService.createLocalCopyOfDMSObject(event.data);
-                if (this.preview && !this.preview.disabled) {
-                    this.preview.refresh();
-                }
-            }
-        });
-        this.eventService
-            .on(EnaioEvent.INBOX_ITEM_CONFIRMED)
-            .pipe(takeUntil(this.componentDestroyed$))
-            .subscribe(event => {
-            if (this.item && this.item.id === event.data.target.id) {
-                this.dmsParams = null;
-            }
-        });
+    set type(type) {
+        this.pluginService.loadByType(type, this.eoPlugin.viewContainerRef);
     }
-    ngAfterViewInit() {
-        let panels = this.tabPanels.toArray();
-        this.tabPlugins.forEach(p => panels = panels.concat(p.tabPanels.toArray()));
-        this.externalPanels.reset(panels);
+    set id(id) {
+        this.pluginService.loadById(id, this.eoPlugin.viewContainerRef);
     }
-    ngOnDestroy() {
-        this.uploadRegistry.unregister(this.uploadTarget.id);
+}
+PluginComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'eo-plugin',
+                template: `
+    <ng-template eoPlugin></ng-template>`
+            },] }
+];
+PluginComponent.ctorParameters = () => [
+    { type: PluginService }
+];
+PluginComponent.propDecorators = {
+    eoPlugin: [{ type: ViewChild, args: [PluginDirective, { static: true },] }],
+    type: [{ type: Input }],
+    id: [{ type: Input }]
+};
+class TabPluginComponent {
+    constructor(pluginService) {
+        this.pluginService = pluginService;
+    }
+    set type(type) {
+        this.types = this.pluginService.loadTabs(type);
     }
 }
-ObjectDetailsComponent.decorators = [
+TabPluginComponent.decorators = [
     { type: Component, args: [{
-                selector: 'eo-object-details',
-                template: "<div class=\"loader-overlay__mask\" *ngIf=\"showLoader\">\r\n  <eo-loading-spinner class=\"object-detail__loader\"></eo-loading-spinner>\r\n</div>\r\n<ng-container *ngIf=\"item && !hasError; else noItem\">\r\n\r\n  <div class=\"eo-head eo-head-tabs\" [eoShortcuts]=\"shortcuts\">\r\n    <header class=\"eo-header\">\r\n      <eo-icon class=\"eo-header-icon\" [objectType]=\"item.type\" [iconTitle]=\"item.type.label\"></eo-icon>\r\n      <div class=\"eo-header-info\">\r\n        <h2 class=\"eo-header-title\">{{item.title}}</h2>\r\n        <h3 class=\"eo-header-subtitle\">{{item.description}}</h3>\r\n      </div>\r\n\r\n      <div class=\"eo-header-actions-container\">\r\n        <div class=\"eo-header-actions\">\r\n          <ng-container *ngIf=\"!isReference; else tplHeadReference\">\r\n            <eo-icon class=\"button refresh-button\" [iconSrc]=\"'assets/_default/svg/ic_refresh.svg'\"\r\n              [iconTitle]=\"('eo.list.refresh' | translate)\" (click)=\"refreshContent()\"></eo-icon>\r\n            <eo-icon class=\"button sync-tab-btn\" *ngIf=\"enableCompare\" [ngClass]=\"{'enabled': enableSync}\"\r\n              [iconSrc]=\"'assets/_default/svg/ic_link.svg'\" [iconTitle]=\"'eo.versions.detail.glue.tooltip' | translate\"\r\n              (click)=\"enableSync = !enableSync\"></eo-icon>\r\n            <eo-favorite-icon [item]=\"item\" *ngIf=\"!enableCompare && capabilities.favorites && !isJournalObject(item)\">\r\n            </eo-favorite-icon>\r\n            <eo-icon class=\"button oc-button\" *ngIf=\"!enableCompare && item.content\" (click)=\"downloadOriginalContent()\"\r\n              [iconTitle]=\"('eo.action.download.dms.object.content.label' | translate)\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\"></eo-icon>\r\n            <eo-edit-icon [item]=\"item\" *ngIf=\"!enableCompare && item.content && item.rights.edit && (agentIsConnected$ | async)\">\r\n            </eo-edit-icon>\r\n            <eo-icon class=\"button am-button\" (click)=\"showActions()\"\r\n              [iconTitle]=\"('eo.object.details.actions.title' | translate)\"\r\n              [iconSrc]=\"'assets/_default/svg/ic_more.svg'\"></eo-icon>\r\n          </ng-container>\r\n\r\n          <ng-template #tplHeadReference>\r\n            <a class=\"button reference primary\"\r\n               [title]=\"('eo.object.reference.tooltip' | translate:{title:referenceTitle})\"\r\n               [routerLink]=\"['/object', item.id]\"\r\n               [queryParams]=\"{type: item.typeName}\">{{'eo.object.reference.open'|translate}}</a>\r\n          </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"eo-header-status-icons\">\r\n          <a class=\"content-link\" [title]=\"'eo.object.contentlink.tooltip' | translate\" *ngIf=\"item.content?.linked\"\r\n            [routerLink]=\"'/object/' + item.content.id\" [queryParams]=\"{type: item.content.type}\">\r\n            <span>{{'eo.object.contentlink' | translate}}</span>\r\n          </a>\r\n          <eo-icon class=\"subscription-icon\" *ngIf=\"item.subscriptions.length\"\r\n            [iconSrc]=\"'assets/_default/svg/ic_subscription.svg'\"\r\n            [iconTitle]=\"subscriptionIconTooltip\"></eo-icon>\r\n          <eo-icon class=\"resubmission-icon\" *ngIf=\"item.resubmissions.length\"\r\n            [iconSrc]=\"'assets/_default/svg/ic_resubmission.svg'\"\r\n            [iconTitle]=\"'eo.object.resubmission.tooltip' | translate\"></eo-icon>\r\n          <eo-icon class=\"lock\" [ngClass]=\"{'myLock': item.lock.by.me}\" *ngIf=\"item.lock\"\r\n            [iconSrc]=\"'assets/_default/svg/ic_lock.svg'\" [iconTitle]=\"lockTooltip\"></eo-icon>\r\n          <eo-icon class=\"finalized-icon\" *ngIf=\"item.isFinalized\" [iconSrc]=\"'assets/_default/svg/ic_finalized.svg'\"\r\n            [iconTitle]=\"'eo.object.finalized.tooltip' | translate\"></eo-icon>\r\n        </div>\r\n      </div>\r\n    </header>\r\n  </div>\r\n  <div class=\"eo-body\">\r\n    <eo-tab-container [pluginPanels]=\"externalPanels\" [cacheLayout]=\"!enableCompare && cacheLayout\" [defaultPanelOrder]=\"!enableCompare && panelOrder\"\r\n      [dndEnabled]=\"!enableCompare\" [enableSlave]=\"!enableCompare || item2\" [enableSync]=\"enableCompare && enableSync\"\r\n      [version]=\"enableCompare && {master: item && item.version, slave: item2 && item2.version}\">\r\n\r\n      <eo-tab-panel [id]=\"'summary'\" *ngIf=\"isVisible('summary')\" header=\"{{'eo.object.summary.title' | translate}}\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-indexdata-summary [indexdata]=\"indexDataPreview\" [baseparams]=\"baseparams\" [dmsObject]=\"item\"\r\n            [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel [id]=\"'indexdata'\" *ngIf=\"isVisible('indexdata')\" header=\"{{'eo.object.indexdata.title' | translate}}\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-object-form-edit [dmsObject]=\"item\" (indexDataSaved)=\"onIndexDataSaved($event, item)\"\r\n            [formDisabled]=\"enableCompare || isReference\"></eo-object-form-edit>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n      \r\n      <eo-tab-panel [id]=\"'preview'\" *ngIf=\"isVisible('preview')\" header=\"{{'eo.object.content.title' | translate}}\" [isSlave]=\"!enableCompare\"\r\n        #preview>\r\n        <ng-template pTemplate=\"content\" *ngIf=\"!undockWinActive; else loadPreview\">\r\n          <eo-media *ngIf=\"item\" [dmsObject]=\"item\" [disabled]=\"!preview.selected\"\r\n            [useVersion]=\"item.id === item.content?.id\" [searchTerm]=\"searchTerm\" #viewer></eo-media>\r\n        </ng-template>\r\n        <ng-template #loadPreview>\r\n          <eo-media *ngIf=\"item\" [dmsObject]=\"item\"\r\n            [useVersion]=\"item.id === item.content?.id\" [searchTerm]=\"searchTerm\" #viewer></eo-media>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('history') && !enableCompare\" [id]=\"'history'\" header=\"{{'eo.object.history.title' | translate}}\" #history>\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-object-history *ngIf=\"history.selected\" [params]=\"{id: item.id, type: item.type?.qname}\">\r\n          </eo-object-history>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('links') && !enableCompare\" [id]=\"'links'\" header=\"{{'eo.object.links.title' | translate}}\" #links>\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-object-links *ngIf=\"links.selected\" [dmsObject]=\"item\"></eo-object-links>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <!-- slave tabs -->\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('summary') && enableCompare\" [id]=\"'summary2'\" header=\"{{'eo.object.summary.title' | translate}}\"\r\n        [isSlave]=\"true\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-indexdata-summary *ngIf=\"item2\" [indexdata]=\"indexDataPreview2\" [baseparams]=\"baseparams2\"\r\n            [dmsObject]=\"item2\" [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('indexdata') && enableCompare\" [id]=\"'indexdata2'\" header=\"{{'eo.object.indexdata.title' | translate}}\"\r\n        [isSlave]=\"true\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-object-form-edit *ngIf=\"item2\" [dmsObject]=\"item2\" (indexDataSaved)=\"onIndexDataSaved($event, item2)\"\r\n            [formDisabled]=\"enableCompare || isReference\"></eo-object-form-edit>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('preview') && enableCompare\" [id]=\"'preview2'\" header=\"{{'eo.object.content.title' | translate}}\"\r\n        [isSlave]=\"true\" #preview2>\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-media *ngIf=\"item2\" [dmsObject]=\"item2\" [disabled]=\"!preview2.selected\" [undockDisabled]=\"enableCompare\"\r\n            [useVersion]=\"true\" [searchTerm]=\"searchTerm\" #viewer2></eo-media>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n      \r\n      <eo-tab-panel *ngIf=\"enableCompare && enableDiff\" [id]=\"'changes'\" header=\"{{'eo.object.changes.title' | translate}}\"\r\n        [isSlave]=\"true\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-indexdata-summary *ngIf=\"item2\" [diff]=\"{indexdata : indexDataPreview, indexdata2: indexDataPreview2, baseparams: baseparams, baseparams2: baseparams2}\" \r\n          [dmsObject]=\"item2\" [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <ng-content></ng-content>\r\n\r\n    </eo-tab-container>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #noItem>\r\n  <span class=\"not-found\" *ngIf=\"nodmsobject\" translate>eo.bpm.nodmsobject</span>\r\n  <eo-error-message *ngIf=\"!showLoader\"\r\n    [emptyState]=\"{icon: emptyState.icon, text: emptyState.text, className: emptyState.className}\">\r\n    <ng-content select=\".error\"></ng-content>\r\n  </eo-error-message>\r\n</ng-template>",
-                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}"]
+                selector: 'eo-tab-plugin',
+                template: `
+    <eo-tab-panel *ngFor="let t of types" [id]="t.id" [header]="t.id | translate">
+      <eo-plugin [id]="t.id"></eo-plugin>
+    </eo-tab-panel>`
             },] }
 ];
-ObjectDetailsComponent.ctorParameters = () => [
-    { type: Router },
-    { type: ActivatedRoute },
-    { type: SystemService },
-    { type: EmptyStateService },
-    { type: AgentService },
-    { type: BackendService },
-    { type: DmsService },
-    { type: SelectionService },
-    { type: ActionService },
-    { type: CapabilitiesService },
-    { type: UploadRegistryService },
-    { type: EventService },
-    { type: Config },
-    { type: TranslateService }
+TabPluginComponent.ctorParameters = () => [
+    { type: PluginService }
 ];
-ObjectDetailsComponent.propDecorators = {
-    preview: [{ type: ViewChild, args: ['viewer',] }],
-    isReference: [{ type: HostBinding, args: ['class.reference',] }],
-    reference: [{ type: Input }],
-    searchTerm: [{ type: Input }],
-    enableCompare: [{ type: Input }],
-    enableDiff: [{ type: Input }],
-    enableSync: [{ type: Input }],
-    cacheLayout: [{ type: Input }],
-    emptyState: [{ type: Input }],
-    dmsParams: [{ type: Input, args: ['params',] }],
-    dmsParams2: [{ type: Input, args: ['params2',] }],
-    dmsObject: [{ type: Input, args: ['item',] }],
-    dmsObject2: [{ type: Input, args: ['item2',] }],
-    tabPanels: [{ type: ContentChildren, args: [TabPanelComponent,] }],
-    tabPlugins: [{ type: ContentChildren, args: [TabPluginComponent,] }],
-    applySelection: [{ type: Input }],
-    parseDmsParams: [{ type: Input }],
-    hasContent: [{ type: Output }],
-    dataType: [{ type: HostBinding, args: ['attr.data-type',] }]
+TabPluginComponent.propDecorators = {
+    tabPanels: [{ type: ViewChildren, args: [TabPanelComponent,] }],
+    type: [{ type: Input }]
+};
+class SidebarPluginComponent {
+    constructor(pluginService) {
+        this.pluginService = pluginService;
+    }
+    set type(type) {
+        this._links = this.pluginService.loadLinks(type);
+    }
+}
+SidebarPluginComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'eo-sidebar-plugin',
+                template: `
+    <div #navItem class="nav-item" *ngFor="let l of _links">
+      <a [href]="l.path" *ngIf="l.path.startsWith('http');else link">{{l.id | translate}}</a>
+      <ng-template #link>
+        <a [routerLink]="l.path" [queryParams]="l.queryParams" routerLinkActive="active-link">{{l.id | translate}}</a>
+      </ng-template>
+    </div>`
+            },] }
+];
+SidebarPluginComponent.ctorParameters = () => [
+    { type: PluginService }
+];
+SidebarPluginComponent.propDecorators = {
+    links: [{ type: ViewChildren, args: ['navItem',] }],
+    type: [{ type: Input }]
 };
 
-class MediaComponent extends UnsubscribeOnDestroy {
-    constructor(translate, dms, renderer, system, _ngZone, config, pluginsService, backend) {
+class ObjectDetailsComponent extends UnsubscribeOnDestroy {
+    constructor(router, route, system, empty, agentService, backend, dmsService, selection, actionService, capabilityService, uploadRegistry, eventService, configService, translate) {
         super();
-        this.translate = translate;
-        this.dms = dms;
-        this.renderer = renderer;
+        this.router = router;
+        this.route = route;
         this.system = system;
-        this._ngZone = _ngZone;
-        this.config = config;
-        this.pluginsService = pluginsService;
+        this.empty = empty;
+        this.agentService = agentService;
         this.backend = backend;
-        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.dmsService = dmsService;
+        this.selection = selection;
+        this.actionService = actionService;
+        this.capabilityService = capabilityService;
+        this.uploadRegistry = uploadRegistry;
+        this.eventService = eventService;
+        this.configService = configService;
+        this.translate = translate;
+        // generate unique id to pass to upload registry
+        this.uploadTarget = new UploadTarget(Utils.uuid(), UploadTarget.OBJECT);
         this.hasError = false;
-        this.customConfig = [];
-        this.defaultViewers = [
-            {
-                "mimeType": ["application/json", "text/json", "text/plain", "text/xml", "text/java", "text/javascript", "application/javascript", "text/html", "text/markdown", "text/x-web-markdown", "text/x-markdown"],
-                "viewer": "assets/_default/api/monaco/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
-            },
-            {
-                "mimeType": ["audio/mp3", "audio/webm", "audio/ogg", "audio/mpeg", "video/mp4", "video/webm", "video/ogg", "application/ogg"],
-                "viewer": "assets/_default/api/video/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
-            },
-            {
-                "mimeType": ["image/jpeg", "image/png", "image/apng", "image/gif", "image/svg+xml", "image/webp"],
-                "viewer": "assets/_default/api/img/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}"
-            },
-            { "viewer": "() => parameters.defaultViewer + '#'" },
-            { "error": true, "type": "error", "viewer": "assets/_default/api/error/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}" }
-        ];
-        this.undockDisabled = false;
-        this.enableCloseBtn = false;
-        // by default, the viewer ignores the version of the dms object. This will always show the latest version.
-        // We need this to be able to refresh the viewer because otherwise pdfjs worker will fail.
-        this.useVersion = false;
-        this.fileSizePipe = new FileSizePipe(translate);
-        this.SIZE_LIMIT = this.config.getRaw('preview.fileSizeLimit') || this.SIZE_LIMIT;
-        this.customConfig = (this.config.getRaw('preview.viewers') || []).concat(this.defaultViewers);
-        this.pluginsService.api.content.catchError().subscribe((evt) => {
-            var _a, _b;
-            const { err, win, parameters } = evt.data;
-            const uri = this.pluginsService.applyFunction((_b = (_a = this.customConfig) === null || _a === void 0 ? void 0 : _a.find((v) => 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);
+        this.nodmsobject = false;
+        this.showLoader = false;
+        this.panelOrder = { 'master': ['summary', 'indexdata', 'history', 'links'], 'slave': ['preview'] };
+        this.agentIsConnected$ = this.agentService.isConnected$;
+        this.enableCompare = false;
+        this.enableDiff = true;
+        this.enableSync = true;
+        this._emptyState = { icon: 'ic_no-file.svg', text: '', className: '' };
+        this.externalPanels = new QueryList();
+        // shortcut actions
+        this.shortcuts = {
+            id: 'eo.object-details',
+            label: this.translate.instant('eo.shortcuts.eo-object-details.title'),
+            labelKey: 'eo.shortcuts.eo-object-details.title',
+            actions: [
+                {
+                    name: this.translate.instant('eo.shortcuts.action.open.context'),
+                    nameKey: 'eo.shortcuts.action.open.context',
+                    shortcut: new Shortcut('O', false, false),
+                    onExecuteAction: () => {
+                        this.openObject(this.item.id, this.item.typeName);
+                    },
+                    isHidden: () => {
+                        return false;
+                    }
+                }
+            ]
+        };
+        this.parseDmsParams = this.getDmsParams;
+        this.hasContent = new EventEmitter();
+        this.undockWinActive = false;
+        this.panelOrder = this.configService.getRaw('objectDetailsTabs') || this.panelOrder;
+        this.undockWinActive = ContentPreviewService.undockWinActive();
+        this.agentService.setAgentStatus(this.route.snapshot.queryParams['connectagent']).subscribe((hasStatus) => {
+            if (hasStatus) {
+                this.router.navigate([], { queryParams: { connectagent: null }, queryParamsHandling: 'merge' });
+            }
         });
-        if (ContentPreviewService.undockWinActive()) {
-            this.undock(false);
-        }
-    }
-    get undockWin() {
-        return ContentPreviewService.getUndockWin();
-    }
-    set setAttachments(attachments) {
-        this.attachments = attachments;
-        this.attachmentsShown = false;
-    }
-    set setSearchTerm(searchTerm) {
-        this.searchTerm = searchTerm || '';
     }
-    set disabled(disabled) {
-        this._disabled = !!disabled;
-        this.toogleViewer();
+    set reference(isRef) {
+        this.isReference = isRef;
     }
-    get disabled() {
-        return this._disabled;
+    set emptyState(e) {
+        this._emptyState = e || EmptyStateService.defaultEmptyState();
     }
-    set previewUri(uri) {
-        this._previewUri = uri;
-        this.toogleViewer();
+    get emptyState() {
+        return this._emptyState;
     }
-    get previewUri() {
-        return this._previewUri;
+    set dmsParams(params) {
+        this.showLoader = true;
+        this.loadDmsObject(params).subscribe((res) => {
+            this.dmsObject = res;
+            this.showLoader = false;
+        }, Utils.throw(() => this.onHasError(true, true, false)));
     }
-    set previewFile(file) {
-        var _a;
-        if (file) {
-            this.viewer = this.getViewer(file);
-            this.isMedia = this.viewer.viewer !== MediaComponent.PDF_VIEWER;
-            this.isOctetStream = !!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/octet-stream/));
-            this.isLarge = file.size && file.size > this.SIZE_LIMIT;
-            this.mediaType = file.mediaTypeName && this.system.getObjectType(file.mediaTypeName);
-            this.previewUri = this.isMedia ? this.viewer.previewUri : file.uriPdf;
-        }
-        else {
-            this.previewUri = '';
-        }
+    set dmsParams2(params) {
+        this.loadDmsObject(params)
+            .subscribe((res) => {
+            this.dmsObject2 = res;
+        }, Utils.throw(() => this.onHasError(true, true, false)));
     }
-    set dmsObject(item) {
+    set dmsObject(v) {
         var _a;
-        this._dmsObject = item;
-        this.dmsObjectTitle = item.title || '...';
-        this.setAttachments = [];
-        if (this.attachmentsLoading) {
-            // cancel any pending requests
-            this.attachmentsLoading.unsubscribe();
-        }
-        if (item.content && item.content.contents && item.content.contents.length) {
-            const file = item.content.contents[0] || {};
-            this.previewFile = {
-                uri: this.dms.getPreview(item.content.id, item.content.type, this.useVersion ? item.version : null),
-                uriPdf: this.dms.getPreview(item.content.id, item.content.type, this.useVersion ? item.version : null, 'PDF'),
-                mimetype: file.mimetype,
-                mimegroup: file.mimegroup,
-                size: file.size,
-                path: file.path,
-                mediaTypeName: item.typeName
-            };
-            if (!!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/^mail|octet-stream/))) {
-                this.slideUri = this.dms.getSlide(item.content.id, item.content.type, this.useVersion ? item.version : null, 256);
-                this.attachmentsLoading = this.dms.getAttachments(item).subscribe(a => this.setAttachments = a);
+        this.item = v;
+        this.onHasError();
+        // prepare indexdata preview
+        this.onIndexDataSaved(null, this.item);
+        this.eventService.trigger(EnaioEvent.DMS_OBJECT_LOADED, this.item);
+        if (this.item) {
+            if (this.item.isActiveVersion && !this.enableCompare) {
+                this.uploadTarget.referenceObject = this.item;
+                this.uploadTarget.onUploadSuccess = () => this.dmsParams = { id: v.id, type: v.typeName };
+                this.uploadRegistry.register(this.uploadTarget);
+            }
+            if (this.item.lock) {
+                this.lockTooltip = this.translate.instant('eo.object.lock') + ' '
+                    + (new LocaleDatePipe(this.translate).transform(this.item.lock.on))
+                    + ', ' + this.item.lock.by.label + ' (' + this.item.lock.by.name + ')';
             }
         }
         else {
-            this.previewUri = '';
-        }
-    }
-    selectAttachment(attachment, force) {
-        const previewUri = attachment && this.isMedia ? this.getViewer({ uriPdf: attachment === null || attachment === void 0 ? void 0 : attachment.previewUri }).previewUri : attachment === null || attachment === void 0 ? void 0 : attachment.previewUri;
-        this.loadDocument(previewUri || this.previewUri, force);
-    }
-    toogleViewer() {
-        this.open = !this.disabled && !!this.previewUri;
-        if (this.undockDisabled) {
-            this.isUndocked = false;
+            this.emptyState = this.empty.getEmptyState(0);
         }
-        if (this.open || this.isUndocked) {
-            this.loadDocument(this.previewUri, this.isUndocked);
+        if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.subscriptions.length) {
+            this.subscriptionIconTooltip = this.createSubscriptionIconTooltip(this.item);
         }
     }
-    refresh() {
-        this.loadDocument(this.previewUri, true);
-    }
-    openPdfViewer(uri) {
-        this.pdfjs.contentWindow.PDFViewerApplication.open(uri).then(() => (this.hasError = false)).catch((err) => {
-            this.hasError = !this.isOctetStream;
-            this.isNotSupported = this.isOctetStream;
-        });
-        // this.search();
-    }
-    getViewer(file) {
-        var _a, _b;
-        const isVideo = !!((_a = file.mimegroup) === null || _a === void 0 ? void 0 : _a.match(/^audio|^video/));
-        const defaultViewer = isVideo ? MediaComponent.VIDEO_VIEWER : MediaComponent.PDF_VIEWER;
-        const fileExtension = ((_b = file.path) === null || _b === void 0 ? void 0 : _b.includes('.')) ? file.path.split('.').pop() : '';
-        const mimeType = file.mimetype;
-        const config = this.customConfig.find((c) => {
-            const matchMT = !c.mimeType || (typeof c.mimeType === 'string' ? [c.mimeType] : c.mimeType).includes(mimeType === null || mimeType === void 0 ? void 0 : mimeType.toLowerCase());
-            const matchFE = !c.fileExtension || (typeof c.fileExtension === 'string' ? [c.fileExtension] : c.fileExtension).includes((fileExtension).toLowerCase());
-            return matchMT && matchFE && (!c.type || c.type === 'default');
-        });
-        const parameters = {
-            file,
-            path: location.origin + file.uri,
-            pathPdf: location.origin + file.uriPdf,
-            viewer: (config === null || config === void 0 ? void 0 : config.viewer) || defaultViewer,
-            load: config === null || config === void 0 ? void 0 : config.load,
-            fileExtension,
-            mimeType,
-            theme: '',
-            defaultViewer,
-            previewUri: ''
-        };
-        parameters.viewer = this.pluginsService.applyFunction(parameters.viewer, 'component, dmsObject, parameters', [this, this._dmsObject, parameters]) || defaultViewer;
-        const extend = this.customConfig.find((c) => c.type === 'extend');
-        if (extend)
-            parameters.viewer = this.pluginsService.applyFunction(extend.viewer, 'component, dmsObject, parameters', [this, this._dmsObject, parameters]);
-        parameters.previewUri = this.resolveUri(parameters.viewer, parameters);
-        return parameters;
+    set dmsObject2(v) {
+        this.item2 = v;
+        this.onHasError();
+        this.onIndexDataSaved(null, this.item2);
     }
-    resolveUri(viewer, parameters) {
-        return (viewer ? document.baseURI : '') + viewer
-            .replace('${originalPath}', parameters.path)
-            .replace('${path}', encodeURIComponent(parameters.path))
-            .replace('${pathPdf}', encodeURIComponent(parameters.pathPdf))
-            .replace('${fileExtension}', encodeURIComponent(parameters.fileExtension))
-            .replace('${mimeType}', encodeURIComponent(parameters.mimeType))
-            .replace('${theme}', encodeURIComponent(parameters.theme))
-            .replace('${lang}', ContentPreviewService.mapLang(this.translate.currentLang));
+    get dataType() {
+        return this.item ? this.item.typeName : 'none';
     }
-    undock(open = true) {
-        if (this.undockDisabled) {
-            return;
-        }
-        this.isUndocked = !this.isUndocked;
-        if (!this.isUndocked) {
-            ContentPreviewService.closeWin();
-        }
-        else {
-            this._ngZone.runOutsideAngular(_ => {
-                const interval = setInterval(() => {
-                    if (this.undockWin && !ContentPreviewService.undockWinActive()) {
-                        clearInterval(interval);
-                        this._ngZone.run(() => this.isUndocked && this.undock());
-                    }
-                }, 1000);
-                fromEvent(window, 'beforeunload')
-                    .pipe(takeWhile(() => this.isUndocked))
-                    .subscribe(e => ContentPreviewService.closeWin());
-            });
-        }
-        if (open) {
-            this.loadDocument(this.previewUri, true);
-        }
+    getDmsParams(data) {
+        return data ? Object.assign(Object.assign({}, data), { type: data.typeName || data.type }) : null;
     }
-    openWindow(src, clean = false) {
-        ContentPreviewService.undockWin(src);
-        if (clean) {
-            while (this.undockWin.document.body.firstChild) {
-                this.undockWin.document.body.removeChild(this.undockWin.document.body.firstChild);
+    updateContent() {
+        if (this.applySelection) {
+            if (this.enableCompare) {
+                this.selection
+                    .find(this.applySelection.in)
+                    .selection$
+                    .pipe(takeUntil(this.componentDestroyed$))
+                    .subscribe((res) => {
+                    this.dmsParams = this.parseDmsParams(res[0]);
+                    this.dmsParams2 = this.parseDmsParams(res[1]);
+                });
+                return;
             }
-        }
-        else if (!src && !this.undockWin.document.querySelector('#no-file')) {
-            this.undockWin.document.write(`<div id="no-file" style="opacity: 0.06; display: flex; height: 100%; width: 100%; align-items: center; justify-content: center;">
-          <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 48 48">
-          <path d="M29 4H14.6c-.8 0-1.5.2-2 .6l27.2 27.2v-17L29 4zm-.7 11.6V7.8l7.8 7.8h-7.8zM43.4 40.8l-2.5 2.5-3.5-3.5c-.4.1-.8.2-1.2.2H14.6c-2 
-          0-3.6-1.6-3.6-3.6V13.5L5.9 8.4l2.5-2.5L11 8.4l28.7 28.7 3.1 3.1.6.6z"/>
-          </svg>
-        <div>`);
-        }
-    }
-    loadDocument(uri, force) {
-        var _a, _b;
-        if (force) {
-            this.isLarge = false;
-        }
-        if (!force && (this.disabled || !uri || (uri === this.latestUri && !this.hasError))) {
-            return false;
-        }
-        this.latestUri = uri || '';
-        this.hasError = false;
-        this.isNotSupported = false;
-        if (this.isUndocked) {
-            this.openWindow(this.latestUri);
-            const onload = () => { var _a; return this.pluginsService.applyFunction((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load, 'iframe, component', [this.undockWin, this]); };
-            this.iframeInit(this.undockWin, ((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load) && onload);
-            return false;
-        }
-        if (this.isLarge) {
-            return false;
-        }
-        if (this.isMedia) {
-            this.renderer.setAttribute(this.iframeMedia.nativeElement, 'src', this.latestUri);
-            const onload = () => { var _a; return this.pluginsService.applyFunction((_a = this.viewer) === null || _a === void 0 ? void 0 : _a.load, 'iframe, component', [this.iframeMedia.nativeElement, this]); };
-            this.iframeInit(this.iframeMedia.nativeElement, ((_b = this.viewer) === null || _b === void 0 ? void 0 : _b.load) && onload);
-        }
-        else {
-            if (!this.pdfjs) {
-                this.pdfjs = this.iframe.nativeElement;
-                this.renderer.setAttribute(this.pdfjs, 'src', MediaComponent.PDF_VIEWER.replace(/\?.*/, '?file=&'));
-                this.renderer.listen(this.pdfjs, 'load', () => {
-                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('sidebarViewOnLoad', 0);
-                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('viewOnLoad', false);
-                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('locale', ContentPreviewService.mapLang(this.translate.currentLang));
-                    this.pdfjs.contentWindow.document.webL10n.setLanguage(ContentPreviewService.mapLang(this.translate.currentLang));
-                    this.pdfjs.contentWindow.PDFViewerApplication._initializeL10n();
-                    this.pdfjs.contentWindow.PDFViewerApplicationOptions.set('viewerCssTheme', 1);
-                    this.pdfjs.contentWindow.PDFViewerApplication._forceCssTheme();
-                    this.pdfjs.contentWindow.PDFViewerApplication.appConfig.viewerContainer
-                        .addEventListener('dragenter', e => window.document.dispatchEvent(new DragEvent('dragenter', e)));
-                    this.pdfjs.contentWindow.PDFViewerApplication.appConfig.viewerContainer.addEventListener('drop', e => e.stopPropagation());
-                    this.openPdfViewer(this.latestUri);
+            else {
+                this.selection
+                    .find(this.applySelection.in)
+                    .focus$
+                    .pipe(takeUntil(this.componentDestroyed$))
+                    .subscribe(res => {
+                    this.showLoader = true;
+                    this.loadDmsObject(this.parseDmsParams(res)).subscribe((res) => {
+                        // refreshing object details may result in an updated version of the object
+                        // so we'll use this trigger to also emitt those changes to other listening components
+                        if (this.item && res && (this.item.id === res.id) && res.version > this.item.version) {
+                            this.eventService.trigger(EnaioEvent.DMS_OBJECT_UPDATED, res);
+                        }
+                        this.dmsObject = res;
+                        this.showLoader = false;
+                    }, Utils.throw((error) => {
+                        this.uploadRegistry.unregister(this.uploadTarget.id);
+                        return this.onHasError(true, true, false);
+                    }));
                 });
             }
-            else if (this.pdfjs.contentWindow && this.pdfjs.contentWindow.PDFViewerApplication) {
-                this.pdfjs.contentWindow.PDFViewerApplication.pdfSidebar.close();
-                this.openPdfViewer(this.latestUri);
-            }
         }
     }
-    /**
-     * Custom search inside PDF.JS based on search term
-     * @param term search term
-     * @param win iframe window
-     */
-    searchPDF(term = '', win) {
-        var _a, _b;
-        // 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;
+    refreshContent() {
+        this.updateContent();
+    }
+    prepareIndexDataPreview(item, formData) {
+        const { id, data, type, created, modified, content, contentFileName, contentFileSize, version } = item;
+        return this.system
+            .getObjectTypeForm(type.name, 'EDIT')
+            .pipe(map(form => {
+            let indexDataPreview = {
+                form,
+                data: formData || data
+            };
+            let baseparams = {
+                id,
+                type: type.name,
+                createdOn: new Date(created.on),
+                modifiedOn: new Date(modified.on),
+                createdBy: `${created.by.title} (${created.by.name})`,
+                modifiedBy: `${modified.by.title} (${modified.by.name})`,
+                contentFileName: contentFileName ? contentFileName : null,
+                contentFileSize: contentFileSize ? Number(contentFileSize) : null,
+                version: version || 0,
+                mimeGroup: content ? content.contents ? content.contents[0].mimegroup : null : null,
+                digest: content ? content.contents ? content.contents[0].digest : null : null,
+                contentId: content ? content.contents ? content.id : null : null
+            };
+            return { indexDataPreview, baseparams };
+        }));
+    }
+    onHasError(hasError = false, nodmsobject = false, showLoader = false) {
+        this.hasError = hasError;
+        this.nodmsobject = nodmsobject;
+        this.showLoader = showLoader;
+        this.hasContent.emit(!hasError);
+    }
+    loadDmsObject(params) {
+        var _a;
+        if (!this.enableCompare && params) {
+            delete params.version;
         }
+        // check for valid id
+        return ((_a = params === null || params === void 0 ? void 0 : params.id) === null || _a === void 0 ? void 0 : _a.length) === 32 ? this.dmsService.getDmsObjectByParams(params) : of(null);
     }
-    preventDropEvent(win) {
-        var _a, _b, _c, _d;
-        if ((_b = (_a = this.iframe) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.startsWith(window.location.origin)) {
-            (_c = win === null || win === void 0 ? void 0 : win.document) === null || _c === void 0 ? void 0 : _c.addEventListener('drop', (e) => e.stopPropagation());
-            // dispach drag & drop events to main window
-            (_d = win === null || win === void 0 ? void 0 : win.document) === null || _d === void 0 ? void 0 : _d.addEventListener('dragenter', (e) => {
-                window.document.dispatchEvent(new DragEvent('dragenter', e));
-                setTimeout(() => window.document.dispatchEvent(new DragEvent('dragleave', e)), 10);
+    downloadOriginalContent() {
+        this.backend.downloadContent([this.item]);
+    }
+    showActions() {
+        const actions = [this.item, this.item2].filter(v => v);
+        this.actionService.showActions(actions, 'DMS_OBJECT');
+    }
+    openObject(id, _type) {
+        const queryParams = { queryParams: { 'type': _type } };
+        return this.router.navigate(['/object', id], queryParams);
+    }
+    // executed when the dms object changed due to saving its indexdata
+    onIndexDataSaved(formData, item) {
+        if (!this.item) {
+            this.indexDataPreview = null;
+            this.baseparams = null;
+        }
+        if (!this.item2) {
+            this.indexDataPreview2 = null;
+            this.baseparams2 = null;
+        }
+        if (item) {
+            this.prepareIndexDataPreview(item, formData)
+                .subscribe(data => {
+                if (item === this.item) {
+                    this.indexDataPreview = data.indexDataPreview;
+                    this.baseparams = data.baseparams;
+                }
+                else {
+                    this.indexDataPreview2 = data.indexDataPreview;
+                    this.baseparams2 = data.baseparams;
+                }
             });
         }
     }
-    iframeInit(iframe = this.iframe, onload) {
-        if (iframe) {
-            iframe._init || fromEvent(iframe, 'load')
-                .pipe(takeUntil(this.componentDestroyed$))
-                .subscribe(() => {
-                const win = this.setApi(iframe);
-                onload && onload();
-                setTimeout(() => {
-                    // this.loading = false;            
-                    this.searchPDF(this.searchTerm, win);
-                    this.preventDropEvent(win);
-                }, 100);
-            });
-            iframe._init = !!this.setApi(iframe);
+    get referenceTitle() {
+        return this.item.contextFolder ? this.item.contextFolder.title : this.item.title;
+    }
+    isJournalObject(item) {
+        return item.type.supertypes.find(sT => sT === 'sysjournalobject');
+    }
+    isVisible(id) {
+        return this.panelOrder.master.includes(id) || this.panelOrder.slave.includes(id);
+    }
+    createSubscriptionIconTooltip(item) {
+        let tooltip = '';
+        const modes = this.item.subscriptions.map(subscription => subscription.mode);
+        const subscribedToAllChanges = modes.includes(SubscriptionMode.DMS_OBJECT_CHANGED) || (modes.includes(SubscriptionMode.ONLY_DOCUMENT_CONTENT_CHANGED) && modes.includes(SubscriptionMode.ONLY_INDEX_DATA_CHANGED));
+        const subscribedToMetaChangesOnly = modes.includes(SubscriptionMode.ONLY_INDEX_DATA_CHANGED) && !modes.includes(SubscriptionMode.ONLY_DOCUMENT_CONTENT_CHANGED) && !modes.includes(SubscriptionMode.DMS_OBJECT_CHANGED);
+        const subscribedToContentChangesOnly = modes.includes(SubscriptionMode.ONLY_DOCUMENT_CONTENT_CHANGED) && !modes.includes(SubscriptionMode.ONLY_INDEX_DATA_CHANGED) && !modes.includes(SubscriptionMode.DMS_OBJECT_CHANGED);
+        if (subscribedToAllChanges) {
+            tooltip = this.translate.instant('eo.object.subscription.icon.tooltip.allChanges');
+        }
+        else if (subscribedToMetaChangesOnly) {
+            tooltip = this.translate.instant('eo.object.subscription.icon.tooltip.meta');
+        }
+        else if (subscribedToContentChangesOnly) {
+            tooltip = this.translate.instant('eo.object.subscription.icon.tooltip.content');
         }
+        return tooltip;
     }
-    setApi(iframe) {
-        // set api to iframe window
-        const win = (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) || iframe;
-        win['api'] = window['api'];
-        return win;
+    ngOnInit() {
+        this.capabilities = this.capabilityService.getCapabilities();
+        this.updateContent();
+        this.eventService
+            .on(EnaioEvent.DMS_OBJECT_UPDATED)
+            .pipe(takeUntil(this.componentDestroyed$))
+            .subscribe(event => {
+            if (event.data && this.item.id === event.data.id) {
+                this.dmsObject = this.dmsService.createLocalCopyOfDMSObject(event.data);
+                if (this.preview && !this.preview.disabled) {
+                    this.preview.refresh();
+                }
+            }
+        });
+        this.eventService
+            .on(EnaioEvent.INBOX_ITEM_CONFIRMED)
+            .pipe(takeUntil(this.componentDestroyed$))
+            .subscribe(event => {
+            if (this.item && this.item.id === event.data.target.id) {
+                this.dmsParams = null;
+            }
+        });
     }
     ngAfterViewInit() {
+        let panels = this.tabPanels.toArray();
+        this.tabPlugins.forEach(p => panels = panels.concat(p.tabPanels.toArray()));
+        this.externalPanels.reset(panels);
     }
     ngOnDestroy() {
-        // return ContentPreviewService.undockWinActive() && this.openWindow('', true);
+        this.uploadRegistry.unregister(this.uploadTarget.id);
     }
 }
-MediaComponent.VIDEO_VIEWER = 'assets/_default/api/video/?path=${path}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}';
-MediaComponent.PDF_VIEWER = 'assets/_default/api/pdf/web/viewer.html?file=&path=${path}&pathPdf=${pathPdf}&mimeType=${mimeType}&fileExtension=${fileExtension}&lang=${lang}&theme=${theme}&css=%23toolbarViewerRight%20%23print%7Bdisplay%3Ablock!important%3B%7D';
-MediaComponent.decorators = [
+ObjectDetailsComponent.decorators = [
     { type: Component, args: [{
-                selector: 'eo-media',
-                template: "<div [hidden]=\"!open\">\r\n\r\n  <!-- attachments overlay -->\r\n  <div class=\"attachments\" *ngIf=\"attachments?.length\" [ngClass]=\"{notmain: latestUri !== previewUri && !attachmentsShown, active: attachmentsShown}\"\r\n       (eoOutsideClick)=\"attachmentsShown = false\">\r\n    <div class=\"attachments-list\" *ngIf=\"attachmentsShown\">\r\n      <div class=\"attachment main\" (click)=\"selectAttachment(null, isLarge)\" [ngClass]=\"{current: latestUri === previewUri}\">{{dmsObjectTitle}}</div>\r\n      <div class=\"attachment\" *ngFor=\"let a of attachments\" (click)=\"selectAttachment(a, isLarge)\" [ngClass]=\"{current: latestUri === a.previewUri}\">\r\n        {{a.name}}\r\n      </div>\r\n    </div>\r\n\r\n    <eo-icon class=\"button\" [badge]=\"attachments?.length\"\r\n             (click)=\"attachmentsShown = !attachmentsShown\"\r\n             [iconSrc]=\"attachmentsShown ? 'assets/_default/svg/ic_clear.svg' : 'assets/_default/svg/ic_attachment.svg'\"></eo-icon>\r\n  </div>\r\n\r\n  <div class=\"preview-container\" [style.overflow]=\"'hidden'\" [hidden]=\"hasError\">\r\n    <iframe [hidden]=\"isNotSupported || isLarge || isUndocked || isMedia\" #iframe height=\"100%\" width=\"100%\" frameborder=\"0\"></iframe>\r\n    <iframe [hidden]=\"isNotSupported || isLarge || isUndocked || !isMedia\" #iframeMedia height=\"100%\" width=\"100%\" frameborder=\"0\"></iframe>\r\n    <div class=\"slide\" *ngIf=\"isNotSupported || isLarge || isUndocked\">\r\n      <!--<img *ngIf=\"!isMedia\" [src]=\"slideUri\" alt=\"preview\">-->\r\n      <eo-icon *ngIf=\"mediaType\" [objectType]=\"mediaType\"></eo-icon>\r\n      <div class=\"large-content\" *ngIf=\"isLarge && !isUndocked\" (click)=\"loadDocument(latestUri, true)\" translate>eo.object.preview.proceed</div>\r\n      <div class=\"large-content not-supported\" *ngIf=\"isNotSupported\" translate>eo.object.preview.not.supported</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div [hidden]=\"!hasError && open\" class=\"empty-container\">\r\n  <eo-icon class=\"nofile\" [iconSrc]=\"'assets/_default/svg/ic_no-file.svg'\"></eo-icon>\r\n</div>\r\n\r\n<eo-icon *ngIf=\"!undockDisabled\" class=\"button undock\" [iconSrc]=\"'assets/_default/svg/ic_undock.svg'\" (click)=\"undock()\"></eo-icon>",
+                selector: 'eo-object-details',
+                template: "<div class=\"loader-overlay__mask\" *ngIf=\"showLoader\">\r\n  <eo-loading-spinner class=\"object-detail__loader\"></eo-loading-spinner>\r\n</div>\r\n<ng-container *ngIf=\"item && !hasError; else noItem\">\r\n\r\n  <div class=\"eo-head eo-head-tabs\" [eoShortcuts]=\"shortcuts\">\r\n    <header class=\"eo-header\">\r\n      <eo-icon class=\"eo-header-icon\" [objectType]=\"item.type\" [iconTitle]=\"item.type.label\"></eo-icon>\r\n      <div class=\"eo-header-info\">\r\n        <h2 class=\"eo-header-title\">{{item.title}}</h2>\r\n        <h3 class=\"eo-header-subtitle\">{{item.description}}</h3>\r\n      </div>\r\n\r\n      <div class=\"eo-header-actions-container\">\r\n        <div class=\"eo-header-actions\">\r\n          <ng-container *ngIf=\"!isReference; else tplHeadReference\">\r\n            <eo-icon class=\"button refresh-button\" [iconSrc]=\"'assets/_default/svg/ic_refresh.svg'\"\r\n              [iconTitle]=\"('eo.list.refresh' | translate)\" (click)=\"refreshContent()\"></eo-icon>\r\n            <eo-icon class=\"button sync-tab-btn\" *ngIf=\"enableCompare\" [ngClass]=\"{'enabled': enableSync}\"\r\n              [iconSrc]=\"'assets/_default/svg/ic_link.svg'\" [iconTitle]=\"'eo.versions.detail.glue.tooltip' | translate\"\r\n              (click)=\"enableSync = !enableSync\"></eo-icon>\r\n            <eo-favorite-icon [item]=\"item\" *ngIf=\"!enableCompare && capabilities.favorites && !isJournalObject(item)\">\r\n            </eo-favorite-icon>\r\n            <eo-icon class=\"button oc-button\" *ngIf=\"!enableCompare && item.content\" (click)=\"downloadOriginalContent()\"\r\n              [iconTitle]=\"('eo.action.download.dms.object.content.label' | translate)\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\"></eo-icon>\r\n            <eo-edit-icon [item]=\"item\" *ngIf=\"!enableCompare && item.content && item.rights.edit && (agentIsConnected$ | async)\">\r\n            </eo-edit-icon>\r\n            <eo-icon class=\"button am-button\" (click)=\"showActions()\"\r\n              [iconTitle]=\"('eo.object.details.actions.title' | translate)\"\r\n              [iconSrc]=\"'assets/_default/svg/ic_more.svg'\"></eo-icon>\r\n          </ng-container>\r\n\r\n          <ng-template #tplHeadReference>\r\n            <a class=\"button reference primary\"\r\n               [title]=\"('eo.object.reference.tooltip' | translate:{title:referenceTitle})\"\r\n               [routerLink]=\"['/object', item.id]\"\r\n               [queryParams]=\"{type: item.typeName}\">{{'eo.object.reference.open'|translate}}</a>\r\n          </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"eo-header-status-icons\">\r\n          <a class=\"content-link\" [title]=\"'eo.object.contentlink.tooltip' | translate\" *ngIf=\"item.content?.linked\"\r\n            [routerLink]=\"'/object/' + item.content.id\" [queryParams]=\"{type: item.content.type}\">\r\n            <span>{{'eo.object.contentlink' | translate}}</span>\r\n          </a>\r\n          <eo-icon class=\"subscription-icon\" *ngIf=\"item.subscriptions.length\"\r\n            [iconSrc]=\"'assets/_default/svg/ic_subscription.svg'\"\r\n            [iconTitle]=\"subscriptionIconTooltip\"></eo-icon>\r\n          <eo-icon class=\"resubmission-icon\" *ngIf=\"item.resubmissions.length\"\r\n            [iconSrc]=\"'assets/_default/svg/ic_resubmission.svg'\"\r\n            [iconTitle]=\"'eo.object.resubmission.tooltip' | translate\"></eo-icon>\r\n          <eo-icon class=\"lock\" [ngClass]=\"{'myLock': item.lock.by.me}\" *ngIf=\"item.lock\"\r\n            [iconSrc]=\"'assets/_default/svg/ic_lock.svg'\" [iconTitle]=\"lockTooltip\"></eo-icon>\r\n          <eo-icon class=\"finalized-icon\" *ngIf=\"item.isFinalized\" [iconSrc]=\"'assets/_default/svg/ic_finalized.svg'\"\r\n            [iconTitle]=\"'eo.object.finalized.tooltip' | translate\"></eo-icon>\r\n        </div>\r\n      </div>\r\n    </header>\r\n  </div>\r\n  <div class=\"eo-body\">\r\n    <eo-tab-container [pluginPanels]=\"externalPanels\" [cacheLayout]=\"!enableCompare && cacheLayout\" [defaultPanelOrder]=\"!enableCompare && panelOrder\"\r\n      [dndEnabled]=\"!enableCompare\" [enableSlave]=\"!enableCompare || item2\" [enableSync]=\"enableCompare && enableSync\"\r\n      [version]=\"enableCompare && {master: item && item.version, slave: item2 && item2.version}\">\r\n\r\n      <eo-tab-panel [id]=\"'summary'\" *ngIf=\"isVisible('summary')\" header=\"{{'eo.object.summary.title' | translate}}\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-indexdata-summary [indexdata]=\"indexDataPreview\" [baseparams]=\"baseparams\" [dmsObject]=\"item\"\r\n            [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel [id]=\"'indexdata'\" *ngIf=\"isVisible('indexdata')\" header=\"{{'eo.object.indexdata.title' | translate}}\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-object-form-edit [dmsObject]=\"item\" (indexDataSaved)=\"onIndexDataSaved($event, item)\"\r\n            [formDisabled]=\"enableCompare || isReference\"></eo-object-form-edit>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n      \r\n      <eo-tab-panel [id]=\"'preview'\" *ngIf=\"isVisible('preview')\" header=\"{{'eo.object.content.title' | translate}}\" [isSlave]=\"!enableCompare\"\r\n        #preview>\r\n        <ng-template pTemplate=\"content\" *ngIf=\"!undockWinActive; else loadPreview\">\r\n          <eo-media *ngIf=\"item\" [dmsObject]=\"item\" [disabled]=\"!preview.selected\"\r\n            [useVersion]=\"item.id === item.content?.id\" [searchTerm]=\"searchTerm\" #viewer></eo-media>\r\n        </ng-template>\r\n        <ng-template #loadPreview>\r\n          <eo-media *ngIf=\"item\" [dmsObject]=\"item\"\r\n            [useVersion]=\"item.id === item.content?.id\" [searchTerm]=\"searchTerm\" #viewer></eo-media>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('history') && !enableCompare\" [id]=\"'history'\" header=\"{{'eo.object.history.title' | translate}}\" #history>\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-object-history *ngIf=\"history.selected\" [params]=\"{id: item.id, type: item.type?.qname}\">\r\n          </eo-object-history>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('links') && !enableCompare\" [id]=\"'links'\" header=\"{{'eo.object.links.title' | translate}}\" #links>\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-object-links *ngIf=\"links.selected\" [dmsObject]=\"item\"></eo-object-links>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <!-- slave tabs -->\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('summary') && enableCompare\" [id]=\"'summary2'\" header=\"{{'eo.object.summary.title' | translate}}\"\r\n        [isSlave]=\"true\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-indexdata-summary *ngIf=\"item2\" [indexdata]=\"indexDataPreview2\" [baseparams]=\"baseparams2\"\r\n            [dmsObject]=\"item2\" [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('indexdata') && enableCompare\" [id]=\"'indexdata2'\" header=\"{{'eo.object.indexdata.title' | translate}}\"\r\n        [isSlave]=\"true\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-object-form-edit *ngIf=\"item2\" [dmsObject]=\"item2\" (indexDataSaved)=\"onIndexDataSaved($event, item2)\"\r\n            [formDisabled]=\"enableCompare || isReference\"></eo-object-form-edit>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <eo-tab-panel *ngIf=\"isVisible('preview') && enableCompare\" [id]=\"'preview2'\" header=\"{{'eo.object.content.title' | translate}}\"\r\n        [isSlave]=\"true\" #preview2>\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-media *ngIf=\"item2\" [dmsObject]=\"item2\" [disabled]=\"!preview2.selected\" [undockDisabled]=\"enableCompare\"\r\n            [useVersion]=\"true\" [searchTerm]=\"searchTerm\" #viewer2></eo-media>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n      \r\n      <eo-tab-panel *ngIf=\"enableCompare && enableDiff\" [id]=\"'changes'\" header=\"{{'eo.object.changes.title' | translate}}\"\r\n        [isSlave]=\"true\">\r\n        <ng-template pTemplate=\"content\">\r\n          <eo-indexdata-summary *ngIf=\"item2\" [diff]=\"{indexdata : indexDataPreview, indexdata2: indexDataPreview2, baseparams: baseparams, baseparams2: baseparams2}\" \r\n          [dmsObject]=\"item2\" [enableVersions]=\"!enableCompare\"></eo-indexdata-summary>\r\n        </ng-template>\r\n      </eo-tab-panel>\r\n\r\n      <ng-content></ng-content>\r\n\r\n    </eo-tab-container>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #noItem>\r\n  <span class=\"not-found\" *ngIf=\"nodmsobject\" translate>eo.bpm.nodmsobject</span>\r\n  <eo-error-message *ngIf=\"!showLoader\"\r\n    [emptyState]=\"{icon: emptyState.icon, text: emptyState.text, className: emptyState.className}\">\r\n    <ng-content select=\".error\"></ng-content>\r\n  </eo-error-message>\r\n</ng-template>",
                 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)}"]
+                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}"]
             },] }
 ];
-MediaComponent.ctorParameters = () => [
-    { type: TranslateService },
-    { type: DmsService },
-    { type: Renderer2 },
+ObjectDetailsComponent.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute },
     { type: SystemService },
-    { type: NgZone },
+    { type: EmptyStateService },
+    { type: AgentService },
+    { type: BackendService },
+    { type: DmsService },
+    { type: SelectionService },
+    { type: ActionService },
+    { type: CapabilitiesService },
+    { type: UploadRegistryService },
+    { type: EventService },
     { type: Config },
-    { type: PluginsService },
-    { type: BackendService }
+    { type: TranslateService }
 ];
-MediaComponent.propDecorators = {
-    undockDisabled: [{ type: Input }],
-    enableCloseBtn: [{ type: Input }],
-    useVersion: [{ type: Input }],
-    open: [{ type: HostBinding, args: ['class.open',] }],
-    codesystem: [{ type: ViewChild, args: ['codesystem',] }],
-    iframe: [{ type: ViewChild, args: ['iframe', { static: true },] }],
-    iframeMedia: [{ type: ViewChild, args: ['iframeMedia', { static: true },] }],
-    setAttachments: [{ type: Input, args: ['attachments',] }],
-    setSearchTerm: [{ type: Input, args: ['searchTerm',] }],
-    disabled: [{ type: Input }],
-    previewUri: [{ type: Input }],
-    previewFile: [{ type: Input }],
-    dmsObject: [{ type: Input }]
+ObjectDetailsComponent.propDecorators = {
+    preview: [{ type: ViewChild, args: ['viewer',] }],
+    isReference: [{ type: HostBinding, args: ['class.reference',] }],
+    reference: [{ type: Input }],
+    searchTerm: [{ type: Input }],
+    enableCompare: [{ type: Input }],
+    enableDiff: [{ type: Input }],
+    enableSync: [{ type: Input }],
+    cacheLayout: [{ type: Input }],
+    emptyState: [{ type: Input }],
+    dmsParams: [{ type: Input, args: ['params',] }],
+    dmsParams2: [{ type: Input, args: ['params2',] }],
+    dmsObject: [{ type: Input, args: ['item',] }],
+    dmsObject2: [{ type: Input, args: ['item2',] }],
+    tabPanels: [{ type: ContentChildren, args: [TabPanelComponent,] }],
+    tabPlugins: [{ type: ContentChildren, args: [TabPluginComponent,] }],
+    applySelection: [{ type: Input }],
+    parseDmsParams: [{ type: Input }],
+    hasContent: [{ type: Output }],
+    dataType: [{ type: HostBinding, args: ['attr.data-type',] }]
 };
 
-class MediaModule {
-}
-MediaModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    UiModule,
-                    FormsModule,
-                    FormElementsModule
-                ],
-                declarations: [MediaComponent],
-                exports: [MediaComponent]
-            },] }
-];
-
 class TabContainerComponent {
     constructor(layout) {
         this.layout = layout;
@@ -18043,7 +18155,7 @@ class FavoriteIconComponent extends UnsubscribeOnDestroy {
 FavoriteIconComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-favorite-icon',
-                template: "<eo-icon class=\"button favorite\"\r\n         [ngClass]=\"{active: item.isFavorite}\"\r\n         [iconTitle]=\"tooltip\"\r\n         [iconSrc]=\"'assets/_default/svg/ic_favorite.svg'\"\r\n         (click)=\"toggle($event)\">\r\n</eo-icon>\r\n\r\n<eo-dialog\r\n  [title]=\"('eo.favorite.icon.dialog.title' | translate)\"\r\n  [(visible)]=\"display\"\r\n  [minWidth]=\"400\"\r\n  [focusOnShow]=\"false\"\r\n  [styleClass]=\"'favorite-form__dialog'\">\r\n\r\n  <form name=\"favoriteForm\" (ngSubmit)=\"save()\">\r\n    <eo-form-input [label]=\" 'eo.favorite.icon.dialog.input.label' | translate\">\r\n      <input [(ngModel)]=\"value\" maxlength=\"250\" [ngModelOptions]=\"{standalone: true}\" #favName />\r\n    </eo-form-input>\r\n    <div class=\"action-buttons favorite-form__dialog--action-buttons flex-row\">\r\n      <button type=\"button\" class=\"button cancel\" (click)=\"toggle($event, true)\" translate>eo.favorite.icon.dialog.cancel</button>\r\n      <button type=\"submit\" [disabled]=\"!value\" class=\"button primary\" translate>eo.favorite.icon.dialog.save</button>\r\n    </div>\r\n  </form>\r\n</eo-dialog>\r\n",
+                template: "<eo-icon class=\"button favorite\"\r\n         [ngClass]=\"{active: item.isFavorite}\"\r\n         [iconTitle]=\"tooltip\"\r\n         [iconSrc]=\"'assets/_default/svg/ic_favorite.svg'\"\r\n         (click)=\"toggle($event)\">\r\n</eo-icon>\r\n\r\n<eo-dialog\r\n  [title]=\"('eo.favorite.icon.dialog.title' | translate)\"\r\n  [(visible)]=\"display\"\r\n  [minWidth]=\"400\"\r\n  [styleClass]=\"'favorite-form__dialog'\">\r\n\r\n  <form name=\"favoriteForm\" (ngSubmit)=\"save()\">\r\n    <eo-form-input [label]=\" 'eo.favorite.icon.dialog.input.label' | translate\">\r\n      <input [(ngModel)]=\"value\" maxlength=\"250\" [ngModelOptions]=\"{standalone: true}\" #favName />\r\n    </eo-form-input>\r\n    <div class=\"action-buttons favorite-form__dialog--action-buttons flex-row\">\r\n      <button type=\"button\" class=\"button cancel\" (click)=\"toggle($event, true)\" translate>eo.favorite.icon.dialog.cancel</button>\r\n      <button type=\"submit\" [disabled]=\"!value\" class=\"button primary\" translate>eo.favorite.icon.dialog.save</button>\r\n    </div>\r\n  </form>\r\n</eo-dialog>\r\n",
                 styles: [":host eo-icon.active{color:var(--color-favorite)}::ng-deep .favorite-form__dialog{min-height:unset!important;padding:8px}::ng-deep .favorite-form__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}::ng-deep .favorite-form__dialog .eo-dialog-content{overflow:hidden}"]
             },] }
 ];
@@ -20252,7 +20364,7 @@ class PrepareDetailsComponent extends UnsubscribeOnDestroy {
 PrepareDetailsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-prepare-details',
-                template: "<div class=\"prepareDetails__wrapper\" *ngIf=\"!loading; else mainSpinner\">\r\n  <section class=\"prepareDetails\" *ngIf=\"preparedItem && preparePhase; else noItem\"\r\n    [ngClass]=\"{multifile: preparedItem.contentcount > 1, committing: committing}\">\r\n    <div class=\"eo-head\">\r\n\r\n      <div class=\"header-info\">\r\n        <div class=\"header-title\">{{header.title}}</div>\r\n        <div class=\"header-sub-title h-location\" *ngIf=\"!header.location.link; else linked\">{{header.location.label}}\r\n        </div>\r\n        <div class=\"header-sub-title h-subtitle\">{{header.subtitle}}</div>\r\n\r\n        <ng-template #linked>\r\n          <div class=\"header-sub-title h-subtitle-detailed\">\r\n            <span translate>eo.prepare.location.title.prefix</span>\r\n            <a [routerLink]=\"header.location.link\">{{header.location.label}}</a>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <div class=\"actions\">\r\n        <eo-icon class=\"btn btn-download\"\r\n          *ngIf=\"preparePhase.name === 'content' ? selectedTemplateFile : preparePhase.data.previewFile\"\r\n          [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\"\r\n          [iconTitle]=\"('eo.action.download.dms.object.content.label' | translate)\" (click)=\"download()\"></eo-icon>\r\n        <eo-icon class=\"btn btn-delete\" [iconSrc]=\"'assets/_default/svg/ic_trash.svg'\"\r\n          (click)=\"showDeleteDialog = true;\"></eo-icon>\r\n        <!-- buttons while choosing a template -->\r\n        <ng-container *ngIf=\"chooseTemplate\">\r\n          <button class=\"btn-tpl-abort\" (click)=\"showTemplateSelector(false)\"\r\n            translate>eo.prepare.template.abort</button>\r\n          <button class=\"primary btn-tpl-apply\" (click)=\"addTemplate(selectedTemplate)\" [disabled]=\"!selectedTemplate\"\r\n            translate>eo.prepare.template.select</button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"preparePhase.name === 'indexdata'\">\r\n          <button (click)=\"commit()\" class=\"btn-idx-save\"\r\n            [ngClass]=\"{primary: preparedItem.state.parentisroot && preparedItem.contentcount > 1}\"\r\n            [disabled]=\"formState?.invalid || committing\" translate>eo.prepare.save</button>\r\n\r\n          <button (click)=\"commit(true)\" [disabled]=\"formState?.invalid || committing\" class=\"primary btn-idx-saveopen\"\r\n            [hidden]=\"preparedItem?.state.parentisroot && preparedItem?.contentcount > 1\"\r\n            translate>eo.prepare.saveopen</button>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"eo-body\" [ngSwitch]=\"preparePhase.name\" *ngIf=\"!committing; else spinner\">\r\n\r\n      <!-- PHASE TYPE -->\r\n      <div class=\"phase type\" *ngSwitchCase=\"'type'\">\r\n\r\n        <!-- with preview -->\r\n        <eo-split [gutterSize]=\"16\" [gutterColor]=\"'#fff'\" [visibleTransition]=\"true\"\r\n          *ngIf=\"preparePhase.data.previewFile; else nopreview\" [cacheLayout]=\"'prepare.details.phase.type'\">\r\n          <eo-split-area [size]=\"30\">\r\n\r\n            <div class=\"form-files\">\r\n              <div class=\"object-type-select empty\" *ngIf=\"preparedItem.types.length == 0\" translate>\r\n                eo.prepare.details.type.empty</div>\r\n              <div class=\"object-type-select empty\"\r\n                *ngIf=\"!preparedItem.state.typeselectedallowed && preparedItem.state.typeselected\"\r\n                [translateParams]=\"{type: preparedItem.selectedtype.label, filename: getFileNames(preparedItem)}\"\r\n                translate>eo.prepare.details.type.notallowed</div>\r\n\r\n              <div class=\"object-type-select\">\r\n                <div class=\"object-type\" *ngFor=\"let type of preparedItem.types; trackBy: trackByIdFn\"\r\n                  (click)=\"selectObjectType(type)\">\r\n                  <div class=\"type-icon\">\r\n                    <eo-icon [iconId]=\"type.icon.id\"></eo-icon>\r\n                  </div>\r\n                  <div class=\"content\">\r\n                    <div class=\"title\">{{type.label}}</div>\r\n                    <div class=\"description\">{{type.description}}</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n\r\n              <div class=\"content-select\">\r\n                <h2 translate>eo.prepare.details.contents.title</h2>\r\n                <div class=\"content\"\r\n                  *ngFor=\"let content of preparedItem.contents; trackBy: trackByIndexFn; index as idx;\"\r\n                  [ngClass]=\"{selected: preparePhase.data.previewIndex == idx}\" (click)=\"setPreviewUri(idx)\">\r\n                  <span>{{content.path}}</span>\r\n                  <eo-icon class=\"btn btn-delete-content\" [iconSrc]=\"'assets/_default/svg/ic_trash.svg'\"\r\n                  (click)=\"showContentDeleteDialog = true; deletedContentIndex = idx;\"></eo-icon>\r\n                  <div *ngIf=\"content.existscount > 0\" class=\"attention\" title=\"{{'eo.prepare.content.existscount.message'|translate: ({count: content.existscount})}}\">!</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </eo-split-area>\r\n          <eo-split-area [size]=\"70\">\r\n            <div class=\"eo-media-wrap\">\r\n              <eo-prepare-content-exists-info [content]=\"preparedItem.contents[preparePhase.data.previewIndex]\">\r\n              </eo-prepare-content-exists-info>\r\n              <eo-media [previewFile]=\"preparePhase.data.previewFile\"></eo-media>\r\n            </div>\r\n          </eo-split-area>\r\n        </eo-split>\r\n\r\n        <!-- without preview -->\r\n        <ng-template #nopreview>\r\n          <div class=\"form-files\">\r\n            <div class=\"object-type-select\">\r\n              <div class=\"object-type\" *ngFor=\"let type of preparedItem.types; trackBy: trackByIdFn\"\r\n                (click)=\"selectObjectType(type)\">\r\n                <div class=\"type-icon\">\r\n                  <eo-icon [iconId]=\"type.icon.id\"></eo-icon>\r\n                </div>\r\n                <div class=\"content\">\r\n                  <div class=\"title\">{{type.label}}</div>\r\n                  <div class=\"description\">{{type.description}}</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n      </div>\r\n\r\n      <!-- PHASE CONTENT -->\r\n      <div class=\"phase content\" *ngSwitchCase=\"'content'\">\r\n\r\n        <!-- panel for selecting a template to be used as items content -->\r\n        <eo-split [gutterSize]=\"16\" [gutterColor]=\"'#fff'\" [visibleTransition]=\"true\"\r\n          *ngIf=\"chooseTemplate; else attach\" [cacheLayout]=\"'prepare.details.phase.content'\">\r\n          <eo-split-area [size]=\"40\">\r\n\r\n            <!-- list of available templates -->\r\n            <eo-list-container #eoList [loading]=\"false\" class=\"templates\">\r\n              <div class=\"eo-header\">\r\n                <eo-icon class=\"eo-header-icon\" [iconSrc]=\"'assets/_default/svg/ic_template.svg'\"></eo-icon>\r\n                <div class=\"eo-header-info\">\r\n                  <div class=\"eo-header-title\" translate>eo.prepare.template.list.title</div>\r\n                </div>\r\n                <div class=\"eo-header-actions\">\r\n\r\n                  <eo-overlay #oFilter [iconSrc]=\"'assets/_default/svg/ic_filter.svg'\" [iconClass]=\"'primary'\"\r\n                    class=\"overlay-filter\" [title]=\"'eo.list.filter' | translate\"\r\n                    (active)=\"oFilter.onActiveChanged($event)\">\r\n                    <eo-custom-filter #cFilter (change)=\"cFilter.updateGrid(eoList.eoGridSubject, $event)\"\r\n                      (active)=\"oFilter.onActiveChanged($event)\">\r\n                      <eo-text-filter [title]=\"'eo.prepare.template.filter.text.title' | translate\"\r\n                        [matchFields]=\"['title', 'description', 'tags']\"\r\n                        [placeholder]=\"'eo.prepare.template.filter.text.title'\"></eo-text-filter>\r\n                      <eo-set-filter [operator]=\"'OR'\" [title]=\"'eo.prepare.template.filter.set.title' | translate\"\r\n                        *ngIf=\"tagFilterOptions?.length\" [options]=\"tagFilterOptions\"></eo-set-filter>\r\n                    </eo-custom-filter>\r\n                  </eo-overlay>\r\n\r\n                </div>\r\n              </div>\r\n              <div class=\"eo-body\">\r\n                <eo-grid #eoGrid *ngIf=\"gridOptions?.rowData\" [gridOptions]=\"gridOptions\" [fullWidth]=\"true\"\r\n                  [showHeader]=\"true\" [showFooter]=\"false\" [selectionLimit]=\"1\"\r\n                  (eoGridSelectionChanged)=\"selectTemplate($event[0])\">\r\n                </eo-grid>\r\n              </div>\r\n            </eo-list-container>\r\n\r\n          </eo-split-area>\r\n          <eo-split-area [size]=\"60\">\r\n\r\n            <!-- preview of selected template -->\r\n            <eo-media [previewFile]=\"selectedTemplateFile\"></eo-media>\r\n\r\n          </eo-split-area>\r\n        </eo-split>\r\n\r\n        <!-- add content general overview (upload, template, none) -->\r\n        <ng-template #attach>\r\n\r\n          <div class=\"info\" *ngIf=\"!uploadInProgress\" translate>eo.prepare.attachment.info</div>\r\n          <input type=\"file\" #file (change)=\"fileChangeListener($event.target.files)\">\r\n\r\n          <div class=\"attachments\" *ngIf=\"!uploadInProgress; else uploadspinner\">\r\n\r\n            <!-- upload a file -->\r\n            <div class=\"attachment att-file\" *ngIf=\"preparePhase.data.file\" (click)=\"upload()\">\r\n              <div class=\"img\">\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_file_upload.svg'\"></eo-icon>\r\n              </div>\r\n              <h3 translate>eo.prepare.attachment.upload.title</h3>\r\n              <p translate>eo.prepare.attachment.upload.desc</p>\r\n            </div>\r\n\r\n            <!-- select a template -->\r\n            <div class=\"attachment att-tmpl\" *ngIf=\"preparePhase.data.templates.length > 0\"\r\n              (click)=\"showTemplateSelector(true)\">\r\n              <div class=\"img\">\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_prepare_add.svg'\"></eo-icon>\r\n              </div>\r\n              <h3 translate>eo.prepare.attachment.template.title</h3>\r\n              <p translate>eo.prepare.attachment.template.desc</p>\r\n            </div>\r\n\r\n            <!-- no file -->\r\n            <div class=\"attachment att-none\" *ngIf=\"preparePhase.data.withoutFile\" (click)=\"noFile()\">\r\n              <div class=\"img\">\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_no-file.svg'\"></eo-icon>\r\n              </div>\r\n              <h3 translate>eo.prepare.attachment.nofile.title</h3>\r\n              <p translate>eo.prepare.attachment.nofile.desc</p>\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </ng-template>\r\n\r\n        <!-- upload progress indicator -->\r\n        <ng-template #uploadspinner>\r\n          <div class=\"upload-indicator\">\r\n            <eo-loading-spinner [size]=\"'large'\"></eo-loading-spinner>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- PHASE INDEXDATA -->\r\n      <div class=\"phase indexdata\" *ngSwitchCase=\"'indexdata'\">\r\n\r\n        <!-- form and preview -->\r\n        <eo-split [gutterSize]=\"16\" [gutterColor]=\"'#fff'\" [visibleTransition]=\"true\"\r\n          *ngIf=\"preparePhase.data.previewFile; else justform\" [cacheLayout]=\"'prepare.details.phase.indexdata'\">\r\n          <eo-split-area [size]=\"50\">\r\n\r\n            <div class=\"form-files\">\r\n\r\n              <!-- indexdata form -->\r\n              <ng-container *ngTemplateOutlet=\"justform\"></ng-container>\r\n\r\n              <!-- list of contents (in case of bulk upload) that can be previewed -->\r\n              <div class=\"content-select\">\r\n\r\n                <h2 translate>eo.prepare.details.contents.title</h2>\r\n                <div class=\"content\"\r\n                  *ngFor=\"let content of preparedItem.contents; trackBy: trackByIndexFn; index as idx\"\r\n                  [ngClass]=\"{selected: preparePhase.data.previewIndex === idx}\" (click)=\"setPreviewUri(idx)\">\r\n                  {{content.path}} <span *ngIf=\"content.existscount > 0\" class=\"attention\" title=\"{{'eo.prepare.content.existscount.message'|translate: ({count: content.existscount})}}\">!</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n          </eo-split-area>\r\n          <eo-split-area [size]=\"50\">\r\n            <div class=\"eo-media-wrap\">\r\n              <eo-prepare-content-exists-info [content]=\"preparedItem.contents[preparePhase.data.previewIndex]\">\r\n              </eo-prepare-content-exists-info>\r\n              <eo-media [previewFile]=\"preparePhase.data.previewFile\"></eo-media>\r\n            </div>\r\n          </eo-split-area>\r\n        </eo-split>\r\n\r\n        <!-- just the form -->\r\n        <ng-template #justform>\r\n          <div class=\"form-container situation-create\" *ngIf=\"formOptions\">\r\n            <eo-object-form #form [formOptions]=\"formOptions\" (statusChanged)=\"onFormStatusChanged($event)\">\r\n            </eo-object-form>\r\n          </div>\r\n        </ng-template>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </section>\r\n\r\n  <ng-template #spinner>\r\n    <div class=\"eo-body\">\r\n      <eo-loading-spinner size=\"medium\"></eo-loading-spinner>\r\n    </div>\r\n  </ng-template>\r\n\r\n</div>\r\n\r\n<ng-template #mainSpinner>\r\n  <div class=\"prepareDetails__main-spinner\">\r\n    <eo-loading-spinner size=\"medium\"></eo-loading-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noItem>\r\n  <eo-error-message [emptyState]=\"{icon: emptyState.icon, text: emptyState.text, className: emptyState.className}\">\r\n    <ng-content select=\".error\"></ng-content>\r\n  </eo-error-message>\r\n</ng-template>\r\n\r\n<eo-dialog [title]=\"'eo.prepare.details.delete.dialog.title' | translate\"\r\n  [(visible)]=\"showDeleteDialog\" [focusOnShow]=\"false\" [minWidth]=\"400\" [styleClass]=\"'prepare-delete__dialog'\">\r\n\r\n<div>{{'eo.prepare.details.delete.dialog.message' | translate}}</div>\r\n\r\n  <div class=\"action-buttons prepare-delete--action-buttons flex-row\">\r\n    <button type=\"button\" class=\"button cancel\" (click)=\"showDeleteDialog = false\"\r\n      translate>eo.prepare.details.delete.dialog.cancel</button>\r\n    <button type=\"button\" #confirmDelete (click)=\"removeItem(preparedItem)\" class=\"button primary\"\r\n      translate>eo.prepare.details.delete.dialog.ok</button>\r\n  </div>\r\n</eo-dialog>\r\n\r\n<eo-dialog [title]=\"'eo.prepare.details.delete.content.dialog.title' | translate\"\r\n  [(visible)]=\"showContentDeleteDialog\" [focusOnShow]=\"false\" [minWidth]=\"400\" [styleClass]=\"'prepare-delete__dialog'\">\r\n\r\n<div>{{'eo.prepare.details.delete.content.dialog.message' | translate: ({contentPath: preparedItem?.contents ? preparedItem?.contents[deletedContentIndex]?.path : ''})}}</div>\r\n\r\n  <div class=\"action-buttons prepare-delete--action-buttons flex-row\">\r\n    <button type=\"button\" class=\"button cancel\" (click)=\"showContentDeleteDialog = false\"\r\n      translate>eo.prepare.details.delete.dialog.cancel</button>\r\n    <button type=\"button\" #confirmContentDelete (click)=\"removeItemContent(preparedItem, deletedContentIndex)\" class=\"button primary\"\r\n      translate>eo.prepare.details.delete.dialog.ok</button>\r\n  </div>\r\n</eo-dialog>\r\n",
+                template: "<div class=\"prepareDetails__wrapper\" *ngIf=\"!loading; else mainSpinner\">\r\n  <section class=\"prepareDetails\" *ngIf=\"preparedItem && preparePhase; else noItem\"\r\n    [ngClass]=\"{multifile: preparedItem.contentcount > 1, committing: committing}\">\r\n    <div class=\"eo-head\">\r\n\r\n      <div class=\"header-info\">\r\n        <div class=\"header-title\">{{header.title}}</div>\r\n        <div class=\"header-sub-title h-location\" *ngIf=\"!header.location.link; else linked\">{{header.location.label}}\r\n        </div>\r\n        <div class=\"header-sub-title h-subtitle\">{{header.subtitle}}</div>\r\n\r\n        <ng-template #linked>\r\n          <div class=\"header-sub-title h-subtitle-detailed\">\r\n            <span translate>eo.prepare.location.title.prefix</span>\r\n            <a [routerLink]=\"header.location.link\">{{header.location.label}}</a>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <div class=\"actions\">\r\n        <eo-icon class=\"btn btn-download\"\r\n          *ngIf=\"preparePhase.name === 'content' ? selectedTemplateFile : preparePhase.data.previewFile\"\r\n          [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\"\r\n          [iconTitle]=\"('eo.action.download.dms.object.content.label' | translate)\" (click)=\"download()\"></eo-icon>\r\n        <eo-icon class=\"btn btn-delete\" [iconSrc]=\"'assets/_default/svg/ic_trash.svg'\"\r\n          (click)=\"showDeleteDialog = true;\"></eo-icon>\r\n        <!-- buttons while choosing a template -->\r\n        <ng-container *ngIf=\"chooseTemplate\">\r\n          <button class=\"btn-tpl-abort\" (click)=\"showTemplateSelector(false)\"\r\n            translate>eo.prepare.template.abort</button>\r\n          <button class=\"primary btn-tpl-apply\" (click)=\"addTemplate(selectedTemplate)\" [disabled]=\"!selectedTemplate\"\r\n            translate>eo.prepare.template.select</button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"preparePhase.name === 'indexdata'\">\r\n          <button (click)=\"commit()\" class=\"btn-idx-save\"\r\n            [ngClass]=\"{primary: preparedItem.state.parentisroot && preparedItem.contentcount > 1}\"\r\n            [disabled]=\"formState?.invalid || committing\" translate>eo.prepare.save</button>\r\n\r\n          <button (click)=\"commit(true)\" [disabled]=\"formState?.invalid || committing\" class=\"primary btn-idx-saveopen\"\r\n            [hidden]=\"preparedItem?.state.parentisroot && preparedItem?.contentcount > 1\"\r\n            translate>eo.prepare.saveopen</button>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"eo-body\" [ngSwitch]=\"preparePhase.name\" *ngIf=\"!committing; else spinner\">\r\n\r\n      <!-- PHASE TYPE -->\r\n      <div class=\"phase type\" *ngSwitchCase=\"'type'\">\r\n\r\n        <!-- with preview -->\r\n        <eo-split [gutterSize]=\"16\" [gutterColor]=\"'#fff'\" [visibleTransition]=\"true\"\r\n          *ngIf=\"preparePhase.data.previewFile; else nopreview\" [cacheLayout]=\"'prepare.details.phase.type'\">\r\n          <eo-split-area [size]=\"30\">\r\n\r\n            <div class=\"form-files\">\r\n              <div class=\"object-type-select empty\" *ngIf=\"preparedItem.types.length == 0\" translate>\r\n                eo.prepare.details.type.empty</div>\r\n              <div class=\"object-type-select empty\"\r\n                *ngIf=\"!preparedItem.state.typeselectedallowed && preparedItem.state.typeselected\"\r\n                [translateParams]=\"{type: preparedItem.selectedtype.label, filename: getFileNames(preparedItem)}\"\r\n                translate>eo.prepare.details.type.notallowed</div>\r\n\r\n              <div class=\"object-type-select\">\r\n                <div class=\"object-type\" *ngFor=\"let type of preparedItem.types; trackBy: trackByIdFn\"\r\n                  (click)=\"selectObjectType(type)\">\r\n                  <div class=\"type-icon\">\r\n                    <eo-icon [iconId]=\"type.icon.id\"></eo-icon>\r\n                  </div>\r\n                  <div class=\"content\">\r\n                    <div class=\"title\">{{type.label}}</div>\r\n                    <div class=\"description\">{{type.description}}</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n\r\n              <div class=\"content-select\">\r\n                <h2 translate>eo.prepare.details.contents.title</h2>\r\n                <div class=\"content\"\r\n                  *ngFor=\"let content of preparedItem.contents; trackBy: trackByIndexFn; index as idx;\"\r\n                  [ngClass]=\"{selected: preparePhase.data.previewIndex == idx}\" (click)=\"setPreviewUri(idx)\">\r\n                  <span>{{content.path}}</span>\r\n                  <eo-icon class=\"btn btn-delete-content\" [iconSrc]=\"'assets/_default/svg/ic_trash.svg'\"\r\n                  (click)=\"showContentDeleteDialog = true; deletedContentIndex = idx;\"></eo-icon>\r\n                  <div *ngIf=\"content.existscount > 0\" class=\"attention\" title=\"{{'eo.prepare.content.existscount.message'|translate: ({count: content.existscount})}}\">!</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </eo-split-area>\r\n          <eo-split-area [size]=\"70\">\r\n            <div class=\"eo-media-wrap\">\r\n              <eo-prepare-content-exists-info [content]=\"preparedItem.contents[preparePhase.data.previewIndex]\">\r\n              </eo-prepare-content-exists-info>\r\n              <eo-media [previewFile]=\"preparePhase.data.previewFile\"></eo-media>\r\n            </div>\r\n          </eo-split-area>\r\n        </eo-split>\r\n\r\n        <!-- without preview -->\r\n        <ng-template #nopreview>\r\n          <div class=\"form-files\">\r\n            <div class=\"object-type-select\">\r\n              <div class=\"object-type\" *ngFor=\"let type of preparedItem.types; trackBy: trackByIdFn\"\r\n                (click)=\"selectObjectType(type)\">\r\n                <div class=\"type-icon\">\r\n                  <eo-icon [iconId]=\"type.icon.id\"></eo-icon>\r\n                </div>\r\n                <div class=\"content\">\r\n                  <div class=\"title\">{{type.label}}</div>\r\n                  <div class=\"description\">{{type.description}}</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n      </div>\r\n\r\n      <!-- PHASE CONTENT -->\r\n      <div class=\"phase content\" *ngSwitchCase=\"'content'\">\r\n\r\n        <!-- panel for selecting a template to be used as items content -->\r\n        <eo-split [gutterSize]=\"16\" [gutterColor]=\"'#fff'\" [visibleTransition]=\"true\"\r\n          *ngIf=\"chooseTemplate; else attach\" [cacheLayout]=\"'prepare.details.phase.content'\">\r\n          <eo-split-area [size]=\"40\">\r\n\r\n            <!-- list of available templates -->\r\n            <eo-list-container #eoList [loading]=\"false\" class=\"templates\">\r\n              <div class=\"eo-header\">\r\n                <eo-icon class=\"eo-header-icon\" [iconSrc]=\"'assets/_default/svg/ic_template.svg'\"></eo-icon>\r\n                <div class=\"eo-header-info\">\r\n                  <div class=\"eo-header-title\" translate>eo.prepare.template.list.title</div>\r\n                </div>\r\n                <div class=\"eo-header-actions\">\r\n\r\n                  <eo-overlay #oFilter [iconSrc]=\"'assets/_default/svg/ic_filter.svg'\" [iconClass]=\"'primary'\"\r\n                    class=\"overlay-filter\" [title]=\"'eo.list.filter' | translate\"\r\n                    (active)=\"oFilter.onActiveChanged($event)\">\r\n                    <eo-custom-filter #cFilter (change)=\"cFilter.updateGrid(eoList.eoGridSubject, $event)\"\r\n                      (active)=\"oFilter.onActiveChanged($event)\">\r\n                      <eo-text-filter [title]=\"'eo.prepare.template.filter.text.title' | translate\"\r\n                        [matchFields]=\"['title', 'description', 'tags']\"\r\n                        [placeholder]=\"'eo.prepare.template.filter.text.title'\"></eo-text-filter>\r\n                      <eo-set-filter [operator]=\"'OR'\" [title]=\"'eo.prepare.template.filter.set.title' | translate\"\r\n                        *ngIf=\"tagFilterOptions?.length\" [options]=\"tagFilterOptions\"></eo-set-filter>\r\n                    </eo-custom-filter>\r\n                  </eo-overlay>\r\n\r\n                </div>\r\n              </div>\r\n              <div class=\"eo-body\">\r\n                <eo-grid #eoGrid *ngIf=\"gridOptions?.rowData\" [gridOptions]=\"gridOptions\" [fullWidth]=\"true\"\r\n                  [showHeader]=\"true\" [showFooter]=\"false\" [selectionLimit]=\"1\"\r\n                  (eoGridSelectionChanged)=\"selectTemplate($event[0])\">\r\n                </eo-grid>\r\n              </div>\r\n            </eo-list-container>\r\n\r\n          </eo-split-area>\r\n          <eo-split-area [size]=\"60\">\r\n\r\n            <!-- preview of selected template -->\r\n            <eo-media [previewFile]=\"selectedTemplateFile\"></eo-media>\r\n\r\n          </eo-split-area>\r\n        </eo-split>\r\n\r\n        <!-- add content general overview (upload, template, none) -->\r\n        <ng-template #attach>\r\n\r\n          <div class=\"info\" *ngIf=\"!uploadInProgress\" translate>eo.prepare.attachment.info</div>\r\n          <input type=\"file\" #file (change)=\"fileChangeListener($event.target.files)\">\r\n\r\n          <div class=\"attachments\" *ngIf=\"!uploadInProgress; else uploadspinner\">\r\n\r\n            <!-- upload a file -->\r\n            <div class=\"attachment att-file\" *ngIf=\"preparePhase.data.file\" (click)=\"upload()\">\r\n              <div class=\"img\">\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_file_upload.svg'\"></eo-icon>\r\n              </div>\r\n              <h3 translate>eo.prepare.attachment.upload.title</h3>\r\n              <p translate>eo.prepare.attachment.upload.desc</p>\r\n            </div>\r\n\r\n            <!-- select a template -->\r\n            <div class=\"attachment att-tmpl\" *ngIf=\"preparePhase.data.templates.length > 0\"\r\n              (click)=\"showTemplateSelector(true)\">\r\n              <div class=\"img\">\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_prepare_add.svg'\"></eo-icon>\r\n              </div>\r\n              <h3 translate>eo.prepare.attachment.template.title</h3>\r\n              <p translate>eo.prepare.attachment.template.desc</p>\r\n            </div>\r\n\r\n            <!-- no file -->\r\n            <div class=\"attachment att-none\" *ngIf=\"preparePhase.data.withoutFile\" (click)=\"noFile()\">\r\n              <div class=\"img\">\r\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_no-file.svg'\"></eo-icon>\r\n              </div>\r\n              <h3 translate>eo.prepare.attachment.nofile.title</h3>\r\n              <p translate>eo.prepare.attachment.nofile.desc</p>\r\n            </div>\r\n\r\n          </div>\r\n\r\n        </ng-template>\r\n\r\n        <!-- upload progress indicator -->\r\n        <ng-template #uploadspinner>\r\n          <div class=\"upload-indicator\">\r\n            <eo-loading-spinner [size]=\"'large'\"></eo-loading-spinner>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- PHASE INDEXDATA -->\r\n      <div class=\"phase indexdata\" *ngSwitchCase=\"'indexdata'\">\r\n\r\n        <!-- form and preview -->\r\n        <eo-split [gutterSize]=\"16\" [gutterColor]=\"'#fff'\" [visibleTransition]=\"true\"\r\n          *ngIf=\"preparePhase.data.previewFile; else justform\" [cacheLayout]=\"'prepare.details.phase.indexdata'\">\r\n          <eo-split-area [size]=\"50\">\r\n\r\n            <div class=\"form-files\">\r\n\r\n              <!-- indexdata form -->\r\n              <ng-container *ngTemplateOutlet=\"justform\"></ng-container>\r\n\r\n              <!-- list of contents (in case of bulk upload) that can be previewed -->\r\n              <div class=\"content-select\">\r\n\r\n                <h2 translate>eo.prepare.details.contents.title</h2>\r\n                <div class=\"content\"\r\n                  *ngFor=\"let content of preparedItem.contents; trackBy: trackByIndexFn; index as idx\"\r\n                  [ngClass]=\"{selected: preparePhase.data.previewIndex === idx}\" (click)=\"setPreviewUri(idx)\">\r\n                  {{content.path}} <span *ngIf=\"content.existscount > 0\" class=\"attention\" title=\"{{'eo.prepare.content.existscount.message'|translate: ({count: content.existscount})}}\">!</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n          </eo-split-area>\r\n          <eo-split-area [size]=\"50\">\r\n            <div class=\"eo-media-wrap\">\r\n              <eo-prepare-content-exists-info [content]=\"preparedItem.contents[preparePhase.data.previewIndex]\">\r\n              </eo-prepare-content-exists-info>\r\n              <eo-media [previewFile]=\"preparePhase.data.previewFile\"></eo-media>\r\n            </div>\r\n          </eo-split-area>\r\n        </eo-split>\r\n\r\n        <!-- just the form -->\r\n        <ng-template #justform>\r\n          <div class=\"form-container situation-create\" *ngIf=\"formOptions\">\r\n            <eo-object-form #form [formOptions]=\"formOptions\" (statusChanged)=\"onFormStatusChanged($event)\">\r\n            </eo-object-form>\r\n          </div>\r\n        </ng-template>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </section>\r\n\r\n  <ng-template #spinner>\r\n    <div class=\"eo-body\">\r\n      <eo-loading-spinner size=\"medium\"></eo-loading-spinner>\r\n    </div>\r\n  </ng-template>\r\n\r\n</div>\r\n\r\n<ng-template #mainSpinner>\r\n  <div class=\"prepareDetails__main-spinner\">\r\n    <eo-loading-spinner size=\"medium\"></eo-loading-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noItem>\r\n  <eo-error-message [emptyState]=\"{icon: emptyState.icon, text: emptyState.text, className: emptyState.className}\">\r\n    <ng-content select=\".error\"></ng-content>\r\n  </eo-error-message>\r\n</ng-template>\r\n\r\n<eo-dialog [title]=\"'eo.prepare.details.delete.dialog.title' | translate\"\r\n  [(visible)]=\"showDeleteDialog\" [focusOnShow]=\"false\" [minWidth]=\"400\" [styleClass]=\"'prepare-delete__dialog'\">\r\n\r\n<div>{{'eo.prepare.details.delete.dialog.message' | translate}}</div>\r\n\r\n  <div class=\"action-buttons prepare-delete--action-buttons flex-row\">\r\n    <button type=\"button\" class=\"button cancel\" (click)=\"showDeleteDialog = false\"\r\n      translate>eo.prepare.details.delete.dialog.cancel</button>\r\n    <button type=\"button\" #confirmDelete (click)=\"removeItem(preparedItem)\" class=\"button primary\"\r\n      translate>eo.prepare.details.delete.dialog.ok</button>\r\n  </div>\r\n</eo-dialog>\r\n\r\n<eo-dialog [title]=\"'eo.prepare.details.delete.content.dialog.title' | translate\"\r\n  [(visible)]=\"showContentDeleteDialog\" [minWidth]=\"400\" [styleClass]=\"'prepare-delete__dialog'\">\r\n\r\n<div>{{'eo.prepare.details.delete.content.dialog.message' | translate: ({contentPath: preparedItem?.contents ? preparedItem?.contents[deletedContentIndex]?.path : ''})}}</div>\r\n\r\n  <div class=\"action-buttons prepare-delete--action-buttons flex-row\">\r\n    <button type=\"button\" class=\"button cancel\" (click)=\"showContentDeleteDialog = false\"\r\n      translate>eo.prepare.details.delete.dialog.cancel</button>\r\n    <button type=\"button\" #confirmContentDelete (click)=\"removeItemContent(preparedItem, deletedContentIndex)\" class=\"button primary\"\r\n      translate>eo.prepare.details.delete.dialog.ok</button>\r\n  </div>\r\n</eo-dialog>\r\n",
                 styles: [":host{height:100%}:host .prepareDetails{background:var(--panel-background-grey);display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0;overflow-y:auto}:host .prepareDetails .eo-media-wrap{display:flex;flex-flow:column;height:100%}:host .prepareDetails .eo-media-wrap eo-media{flex:1;position:relative}:host .prepareDetails__wrapper{height:100%}:host .prepareDetails__main-spinner{align-items:center;display:flex;height:100%;justify-content:center}:host .prepareDetails .content-select{display:none}:host .prepareDetails .eo-head{background-color:var(--color-white);display:flex;flex-flow:row nowrap}:host .prepareDetails .eo-head .header-info{color:var(--text-color-caption);flex:1 1 auto;font-size:var(--font-caption)}:host .prepareDetails .eo-head .header-info .header-title{color:var(--text-color-body);font-size:var(--font-title);padding-bottom:calc(var(--app-pane-padding)/2)}:host .prepareDetails .eo-head .header-info a{color:var(--color-accent);cursor:pointer;text-decoration:none}:host .prepareDetails .eo-head .actions{align-items:center;align-self:flex-start;display:flex}[dir=ltr] :host .prepareDetails .eo-head .actions button{margin-left:calc(var(--app-pane-padding)/2)}[dir=rtl] :host .prepareDetails .eo-head .actions button{margin-right:calc(var(--app-pane-padding)/2)}:host .prepareDetails .eo-head .actions eo-icon{cursor:pointer;padding:calc(var(--app-pane-padding)/4)}:host .prepareDetails .eo-body{overflow-y:hidden}:host .prepareDetails .eo-body eo-split-area{border-top:1px solid rgba(var(--color-black-rgb),.08);box-sizing:border-box}:host .prepareDetails .phase{height:100%;overflow-y:auto}:host .prepareDetails .phase.content{align-items:center;display:flex;flex-flow:column;justify-content:center}:host .prepareDetails .phase.content ::ng-deep eo-list-container.templates{background:linear-gradient(90deg,#fff 70%,var(--panel-background-lightgrey))}:host .prepareDetails .phase.content ::ng-deep eo-list-container.templates eo-grid ag-grid-angular.ag-theme-balham .chip:last-of-type:after{background:transparent!important}:host .prepareDetails .phase.content input[type=file]{display:none}:host .prepareDetails .phase.content .info{color:var(--text-color-caption);flex:0 0 auto;margin-bottom:var(--app-pane-padding)}:host .prepareDetails .phase.content .attachments{display:flex;flex:0 0 auto;flex-flow:row}:host .prepareDetails .phase.content .attachments .attachment:hover .img eo-icon{opacity:1}:host .prepareDetails .phase.content .attachments .attachment{background:var(--color-white);border-bottom:1px solid rgba(var(--color-black-rgb),.1);cursor:pointer;margin:calc(var(--app-pane-padding)/2);max-width:200px}:host .prepareDetails .phase.content .attachments .attachment .img{align-items:center;background:var(--color-accent);display:flex;flex-flow:column;justify-content:center;padding:calc(var(--app-pane-padding)*2) 0}:host .prepareDetails .phase.content .attachments .attachment .img 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}:host .prepareDetails .phase.content .attachments .attachment h3{font-size:var(--font-subhead);font-weight:var(--font-weight-normal);margin:0;padding:calc(var(--app-pane-padding)/2) var(--app-pane-padding)}:host .prepareDetails .phase.content .attachments .attachment p{color:var(--text-color-caption);margin:0;padding:0 var(--app-pane-padding) var(--app-pane-padding) var(--app-pane-padding)}:host .prepareDetails .phase div[eosplitgutter]{background-color:var(--color-light-blue)!important}:host .prepareDetails .phase.type .form-files .object-type-select{flex:1 1 auto;overflow-y:auto;padding:var(--app-pane-padding)}:host .prepareDetails .phase.type .form-files .object-type-select .object-type{-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:var(--color-white);cursor:pointer;display:flex;flex-flow:row nowrap;margin-bottom:1px;padding:calc(var(--app-pane-padding)/2);transition:all var(--app-default-transition-duration) ease-in-out}:host .prepareDetails .phase.type .form-files .object-type-select .object-type .type-icon{color:var(--text-color-hint)}:host .prepareDetails .phase.type .form-files .object-type-select .object-type .content{overflow:hidden;padding-left:calc(var(--app-pane-padding)/2)}:host .prepareDetails .phase.type .form-files .object-type-select .object-type .content .title{font-weight:var(--font-weight-bold);overflow:hidden;text-overflow:ellipsis}:host .prepareDetails .phase.type .form-files .object-type-select .object-type .content .description{color:var(--text-color-caption);overflow:hidden;text-overflow:ellipsis}:host .prepareDetails .phase .form-container eo-object-form{display:block;margin:var(--app-pane-padding)}:host .prepareDetails.committing .eo-head .actions .btn,:host .prepareDetails.committing .eo-head .actions button{display:none}:host .prepareDetails.committing .eo-body{align-items:center;display:flex;flex-flow:column;justify-content:center}:host .prepareDetails.multifile .form-files{bottom:0;display:flex;flex-flow:column;left:0;position:absolute;right:0;top:0}:host .prepareDetails.multifile .form-files .form-container{flex:1 1 auto;overflow-y:auto}:host .prepareDetails.multifile .content-select{border-top:1px solid var(--main-background);box-sizing:border-box;display:block;flex:0 0 30%;overflow-y:auto;padding:calc(var(--app-pane-padding)/2)}:host .prepareDetails.multifile .content-select h2{color:var(--text-color-caption);font-size:var(--font-subhead);font-weight:var(--font-weight-normal);margin:0;padding:calc(var(--app-pane-padding)/2);padding-bottom:var(--app-pane-padding)}:host .prepareDetails.multifile .content-select .content{-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:var(--color-white);color:var(--text-color-caption);cursor:pointer;display:flex;gap:8px;justify-content:space-between;margin-bottom:calc(var(--app-pane-padding)/2);overflow:hidden;padding:calc(var(--app-pane-padding)/2);text-overflow:ellipsis;transition:all var(--app-default-transition-duration) ease-in-out}:host .prepareDetails.multifile .content-select .content>span{flex:1;overflow:hidden;text-overflow:ellipsis}:host .prepareDetails.multifile .content-select .content .btn-delete-content{color:var(--text-color-caption);flex:0 0 16px;height:16px;width:16px}:host .prepareDetails.multifile .content-select .content .btn-delete-content:hover{background-color:var(--text-color-hint)}:host .prepareDetails.multifile .content-select .content div.attention{border:1px solid var(--color-warning);border-radius:2px;color:var(--color-warning);display:block;flex:0 0 auto;line-height:1em;padding:0 4px;right:4px;top:8px}:host .prepareDetails.multifile .content-select .content.selected{color:var(--color-accent)}:host .prepareDetails.multifile .content-select .content:hover{background:var(--panel-background-lightgrey)}:host ::ng-deep eo-grid,:host ::ng-deep eo-grid ag-grid-angular.ag-theme-balham,:host ::ng-deep eo-grid ag-grid-angular.ag-theme-balham .ag-row{background:transparent}:host ::ng-deep eo-grid ag-grid-angular.ag-theme-balham .ag-row:hover{background:var(--panel-background-lightgrey)}:host ::ng-deep eo-grid ag-grid-angular.ag-theme-balham .ag-row .ag-cell{border-bottom-color:var(--panel-header-border-bottom-color)}:host ::ng-deep eo-list-container .eo-head{height:48px}:host ::ng-deep eo-list-container .eo-grid-footer,:host ::ng-deep eo-list-container .eo-grid-header,:host ::ng-deep eo-list-container .eo-head{background:transparent;border-color:var(--panel-header-border-bottom-color)}:host ::ng-deep .eo-head .eo-header .eo-header-actions eo-icon{color:var(--text-color-hint)!important}:host ::ng-deep .eo-head .eo-header .eo-header-actions eo-icon:hover{color:var(--text-color-caption)!important}:host ::ng-deep .eo-head .eo-header .eo-header-actions eo-icon.active{color:var(--color-accent)!important}:host ::ng-deep .eo-header-icon,:host ::ng-deep .eo-header-title,:host ::ng-deep .template{color:var(--text-color-caption)}:host ::ng-deep .template{cursor:pointer;margin-bottom:1px}:host ::ng-deep .template .title{font-size:var(--font-body);font-weight:var(--font-weight-bold)}:host ::ng-deep .template .description{color:var(--text-color-caption)}:host ::ng-deep .template .chip{display:initial!important}::ng-deep .prepare-delete__dialog{min-height:unset!important;padding:8px}::ng-deep .prepare-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}"]
             },] }
 ];
@@ -22218,10 +22330,10 @@ class AboutStateComponent {
         this.http = http;
         this.userService = userService;
         this.config = config;
-        this.__libraries__ = [{ "name": "@ag-grid-community/angular", "version": "22.1.2", "license": "MIT" }, { "name": "@ag-grid-community/client-side-row-model", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/core", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/csv-export", "version": "22.1.1", "license": "MIT" }, { "name": "@angular/animations", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/cdk", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/common", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/compiler", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/core", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/forms", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser-dynamic", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/router", "version": "11.2.0", "license": "MIT" }, { "name": "@eo-sdk/core", "version": "8.14.0", "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": "6.0.0-beta.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": "8.15.0-rc.1", "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: '8.14.0'
+            clientVersion: '8.15.0-rc.1'
         };
         this.licenses = {
             'MIT': {
@@ -22263,6 +22375,7 @@ class AboutStateComponent {
         this.getUserLang();
         this.getDocumentation();
         this.backgroundImage = `url(${this.config.getDashboardBackgroundImage()})`;
+        this.headerLogo = this.config.getRaw("about.headerLogo");
     }
     getDocumentation() {
         const docu = this.config.getRaw('about.docu');
@@ -22281,8 +22394,8 @@ class AboutStateComponent {
 AboutStateComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-about-state',
-                template: "<div class=\"eo-about-state\">\r\n\r\n  <div class=\"about\">\r\n    <div class=\"header\" [style.background-image]=\"backgroundImage\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 708.7 212.6\"><path fill=\"#fff\" d=\"M708.7 20.6c0-11.3-9.2-20.6-20.6-20.6s-20.6 9.2-20.6 20.6c0 11.3 9.2 20.6 20.6 20.6s20.6-9.3 20.6-20.6zm-2.7 0c0 9.9-8 17.9-17.9 17.9-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9zm-9.9-5.4c0-2.7 0-6.7-7-6.7h-7.7c-.7 0-1.3.6-1.3 1.3v21.4c0 .7.6 1.3 1.3 1.3.7 0 1.3-.6 1.3-1.3v-9.4h5.9l5 10c.2.5.7.7 1.2.7.2 0 .4 0 .6-.1.7-.3.9-1.1.6-1.8l-4.5-9c4.6-.8 4.6-4.6 4.6-6.4zm-2.6 0c0 2.5-.3 4-4 4h-6.7v-8h6.4c2.1 0 3.4.4 3.9 1.1.4.6.4 1.7.4 2.9zM589.4 73.7c0-4.8 10.4-7.7 27.8-7.7 12.5 0 28.4 3.3 41.6 8.6l4.2 1.7V52.2l-2-.7c-12.6-4.4-29-6.9-44.9-6.9-33.3 0-56.6 12.9-56.6 31.3 0 13.2 14.6 24.1 37.1 27.9l21.4 3.7c23.1 3.9 25.6 8.6 25.6 10.5 0 4.6-5.2 7.7-9.7 9.5-5.3 2.4-11.7 3.4-22 3.4-16.7 0-33.7-2.8-47.8-8l-4.1-1.5V144l2.1.6c15.2 4.7 31.9 7.2 48.4 7.2 14.9 0 27.7-1.9 38-5.8 15.7-5.8 25.5-16.4 25.5-27.7 0-7.5-4.4-15-11.6-19.8-7.3-4.7-19.2-8.9-30.3-10.8l-19.8-3.5c-6.3-1-8-1.5-10.8-2.4l-1.1-.3c-7.2-2.1-11-4.7-11-7.8zm-29.6 110.8c-.2.3-.3.7-.2 1.2l8.4 25.7c.2.8.8 1.2 1.5 1.2h2.5c.8 0 1.3-.5 1.5-1.2l8.4-25.6c.2-.5.1-.9-.1-1.2-.1-.2-.4-.5-1-.5H579c-.3 0-1.1.1-1.4 1.2l-6.8 21.9-6.8-21.9c-.2-.8-.7-1.2-1.4-1.2h-1.7c-.7 0-1 .2-1.1.4zm-8.5 25.8c1.5-1.5 2.3-3.7 2.3-6.3v-11.2c0-2.6-.8-4.8-2.3-6.3-1.6-1.5-3.7-2.3-6.3-2.3h-4.8c-2.6 0-4.7.8-6.2 2.3-1.5 1.5-2.3 3.7-2.3 6.3V204c0 2.6.8 4.8 2.3 6.3 1.5 1.6 3.6 2.3 6.2 2.3h4.8c2.6 0 4.7-.8 6.3-2.3zm-2-6.4c0 1.5-.4 2.7-1.2 3.5-.8.8-1.9 1.2-3.4 1.2h-4.3c-1.5 0-2.6-.4-3.4-1.2-.8-.8-1.1-2-1.1-3.5v-11.1c0-1.5.4-2.7 1.1-3.5.8-.8 1.8-1.2 3.4-1.2h4.3c1.5 0 2.6.4 3.4 1.2.8.8 1.2 2 1.2 3.5v11.1zm-33.1-54.1h26.4V46h-26.4v103.8zm0-120.7h26.4V5.7h-26.4v23.4zm4.4 157.4c-1.5-1.6-3.6-2.3-6.2-2.3h-3.7c-2.3 0-4 .6-5.3 1.7v-.3c0-.9-.5-1.4-1.4-1.4h-1.6c-.8 0-1.3.6-1.3 1.4v25.7c0 .9.5 1.4 1.3 1.4h1.6c.8 0 1.4-.6 1.4-1.4v-18.4c0-1.5.4-2.7 1.3-3.5.9-.8 2.1-1.2 3.7-1.2h3.6c1.5 0 2.6.4 3.3 1.2.8.8 1.1 2 1.1 3.6v18.3c0 .9.5 1.4 1.4 1.4h1.6c.8 0 1.3-.6 1.3-1.4v-18.4c.2-2.8-.6-4.9-2.1-6.4zm-57-36.8l35.6-57.3V46l-38.5 59.1c-6.7 10.5-11.5 19.6-11.5 19.6s-5.1-9.5-12.2-20.6L400.2 46h-30.7l63.8 103.7h30.3zm-94.2-49.1c0 11.3-1 15.3-4.9 20.5-3.6 4.7-13.4 7.6-25.6 7.6-14.5 0-26.5-5.4-29.3-13.1-1-3.3-1.7-11.2-1.7-20V46h-27.4v54.1c0 15.2 1.1 19.9 4.8 26.9 10 19.1 37.2 26.1 53.1 26.1 18.9 0 36.6-7.9 45.8-15.8 6-5.1 9.3-9.8 11-17.1l-25.8-41.8v22.2zM277 211.2v-33.1c0-.9-.5-1.4-1.4-1.4H274c-.6 0-1.3.4-1.3 1.4v7.7c-1.3-1.2-3-1.7-5.3-1.7h-3.7c-2.6 0-4.6.8-6.2 2.3-1.5 1.5-2.3 3.7-2.3 6.3v11.2c0 2.6.8 4.8 2.3 6.3 1.5 1.6 3.6 2.3 6.2 2.3h3.7c2.3 0 4.1-.6 5.3-1.7v.3c0 1 .7 1.4 1.3 1.4h1.6c.9.1 1.4-.5 1.4-1.3zm-4.3-7.3c0 1.5-.4 2.7-1.3 3.5-.9.8-2.1 1.2-3.7 1.2H264c-1.5 0-2.6-.4-3.4-1.2-.8-.8-1.1-2-1.1-3.6v-11c0-1.5.4-2.7 1.1-3.6.8-.8 1.8-1.2 3.4-1.2h3.7c1.6 0 2.8.4 3.7 1.2.9.8 1.3 1.9 1.3 3.5v11.2zm-9.1-103.8V46h-27.4v54.6c0 11.3-1 15.3-4.9 20.5-3.6 4.7-13.4 7.6-25.6 7.6-14.5 0-26.5-5.4-29.3-13.1-1-3.3-1.7-11.2-1.7-20V46h-27.4v54.1c0 15.2 1.1 19.9 4.8 26.9 10 19.1 37.2 26.1 53.1 26.1 18.9 0 36.6-7.9 45.8-15.8 10.2-8.7 12.6-16 12.6-37.2zm-116.2 78v33.1c0 .9.5 1.4 1.3 1.4h1.6c.8 0 1.4-.6 1.4-1.4V197h12.7c.8 0 1.4-.5 1.4-1.4v-1.3c0-.8-.5-1.4-1.4-1.4h-12.7v-12.3h14.2c.9 0 1.4-.5 1.4-1.4v-1.3c0-.8-.6-1.4-1.4-1.4h-17.2c-.8.2-1.3.8-1.3 1.6zm-49.7-29.2L130.4 94V46h-.1l-36.9 58.2c-7.1 11.1-12.2 20.6-12.2 20.6s-4.8-9.1-11.6-19.6L31 46H0l67.7 105.5v24.9h30v-27.5zm77.5 36.6v25.7c0 .9.5 1.4 1.3 1.4h1.6c.8 0 1.4-.6 1.4-1.4v-17.6c0-1.7.4-3 1.3-4s2.1-1.4 3.7-1.4h2.5c.5 0 .9-.1 1-.3.2-.2.4-.5.4-1v-1.3c0-.8-.5-1.4-1.4-1.4h-2c-1.6 0-3.1.3-4.2 1-.5.3-.9.6-1.3.9v-.5c0-.9-.5-1.4-1.4-1.4h-1.6c-.8-.1-1.3.5-1.3 1.3zm22 .9c-1.5 1.5-2.3 3.7-2.3 6.3v11.2c0 2.6.8 4.8 2.3 6.3 1.5 1.6 3.6 2.3 6.2 2.3H215c.8 0 1.4-.5 1.4-1.4V210c0-.8-.5-1.4-1.4-1.4h-11.4c-1.5 0-2.6-.4-3.4-1.2-.8-.8-1.1-2-1.1-3.5v-3.3h16.2c.9 0 1.4-.6 1.4-1.4v-6.4c0-2.6-.8-4.8-2.3-6.3-1.6-1.5-3.7-2.3-6.3-2.3h-4.8c-2.5-.1-4.6.7-6.1 2.2zm1.9 6.4c0-1.5.4-2.7 1.1-3.5.7-.8 1.8-1.2 3.4-1.2h4.4c1.5 0 2.6.4 3.4 1.2.8.8 1.1 2 1.1 3.5v4h-13.4v-4zm28.2-6.4c-1.5 1.6-2.3 3.7-2.3 6.3v11.2c0 2.6.8 4.8 2.3 6.3 1.5 1.6 3.6 2.3 6.2 2.3h11.6c.8 0 1.4-.5 1.4-1.4V210c0-.8-.5-1.4-1.4-1.4h-11.4c-1.5 0-2.6-.4-3.4-1.2-.8-.8-1.1-2-1.1-3.5v-3.3h16.2c.9 0 1.4-.6 1.4-1.4v-6.4c0-2.6-.8-4.8-2.3-6.3-1.5-1.5-3.7-2.3-6.3-2.3h-4.8c-2.4-.1-4.5.7-6.1 2.2zm2 6.4c0-1.5.4-2.7 1.1-3.5.8-.8 1.8-1.2 3.4-1.2h4.4c1.5 0 2.6.4 3.4 1.2.8.8 1.1 2 1.1 3.5v4h-13.4v-4zm59.1-6.4c-1.5 1.5-2.3 3.7-2.3 6.3v11.2c0 2.6.8 4.8 2.3 6.3 1.5 1.6 3.6 2.3 6.2 2.3h4.8c2.6 0 4.7-.8 6.3-2.3 1.5-1.5 2.3-3.7 2.3-6.3v-11.2c0-2.6-.8-4.8-2.3-6.3-1.6-1.5-3.7-2.3-6.3-2.3h-4.8c-2.6 0-4.7.8-6.2 2.3zm2 6.4c0-1.5.4-2.7 1.1-3.5.7-.8 1.8-1.2 3.4-1.2h4.3c1.5 0 2.6.4 3.4 1.2.8.8 1.2 2 1.2 3.5v11.1c0 1.6-.4 2.7-1.2 3.5-.8.8-1.9 1.2-3.4 1.2h-4.3c-1.5 0-2.6-.4-3.4-1.2-.8-.8-1.1-2-1.1-3.5v-11.1zm26.7-7.3v25.7c0 1 .7 1.4 1.3 1.4h1.6c.8 0 1.4-.6 1.4-1.4v-18.4c0-1.5.4-2.7 1.3-3.5.9-.8 2.1-1.2 3.7-1.2h2.2c1.5 0 2.6.4 3.4 1.2.8.8 1.1 2 1.1 3.6v18.3c0 .9.5 1.4 1.4 1.4h1.6c.8 0 1.4-.6 1.4-1.4V193c0-1.5.4-2.7 1.3-3.6.9-.9 2.1-1.3 3.7-1.3h2.1c1.5 0 2.6.4 3.4 1.2.8.8 1.1 2 1.1 3.6v18.3c0 .9.5 1.4 1.4 1.4h1.6c.8 0 1.4-.6 1.4-1.4v-18.4c0-2.6-.8-4.8-2.3-6.3-1.5-1.6-3.6-2.3-6.2-2.3h-2.1c-1.5 0-3 .4-4.5 1.1-1.1.5-1.9 1.2-2.5 2.1-1.5-2.1-3.7-3.1-6.8-3.1h-2.3c-2.3 0-4.1.6-5.4 1.8v-.4c0-.9-.5-1.4-1.4-1.4h-1.6c-.6-.2-1.3.2-1.3 1.2zm60.1-7.4v1.3c0 .8.6 1.4 1.4 1.4h7.9v30.5c0 .9.5 1.4 1.4 1.4h1.6c.6 0 1.3-.4 1.3-1.4v-30.5h7.9c.9 0 1.4-.5 1.4-1.4v-1.3c0-.8-.6-1.4-1.4-1.4h-20.1c-.9 0-1.4.5-1.4 1.4zm31.1 8.3c-1.5 1.6-2.3 3.7-2.3 6.3v11.2c0 2.6.8 4.8 2.3 6.3 1.5 1.6 3.6 2.3 6.2 2.3h4.8c2.6 0 4.7-.8 6.3-2.3 1.5-1.5 2.3-3.7 2.3-6.3v-11.2c0-2.6-.8-4.8-2.3-6.3-1.6-1.5-3.7-2.3-6.3-2.3h-4.8c-2.6 0-4.7.8-6.2 2.3zm1.9 6.4c0-1.5.4-2.7 1.1-3.5.8-.8 1.8-1.2 3.4-1.2h4.3c1.5 0 2.6.4 3.4 1.2.8.8 1.2 2 1.2 3.5v11.1c0 1.5-.4 2.7-1.2 3.5-.8.8-1.9 1.2-3.4 1.2h-4.3c-1.5 0-2.6-.4-3.4-1.2-.8-.8-1.1-2-1.1-3.5v-11.1zm45.2-14.7v33.1c0 .9.5 1.4 1.3 1.4h1.6c.8 0 1.4-.6 1.4-1.4v-33.1c0-.9-.5-1.4-1.4-1.4h-1.6c-.8 0-1.3.6-1.3 1.4zm14.8 7.4v25.7c0 .9.5 1.4 1.3 1.4h1.6c.8 0 1.4-.6 1.4-1.4v-18.4c0-1.5.4-2.7 1.3-3.5.9-.8 2.1-1.2 3.7-1.2h3.6c1.5 0 2.6.4 3.4 1.2.8.8 1.1 2 1.1 3.6v18.3c0 .9.5 1.4 1.4 1.4h1.6c.8 0 1.3-.6 1.3-1.4v-18.4c0-2.6-.8-4.8-2.3-6.3-1.5-1.6-3.6-2.3-6.2-2.3h-3.7c-2.3 0-4 .6-5.3 1.7v-.3c0-.9-.5-1.4-1.4-1.4h-1.6c-.7-.1-1.2.5-1.2 1.3zm120.1.9c-1.5 1.5-2.3 3.7-2.3 6.3v11.2c0 2.6.8 4.8 2.3 6.3 1.5 1.6 3.6 2.3 6.2 2.3h3.6c2.3 0 4-.6 5.3-1.7v.3c0 .9.5 1.4 1.4 1.4h1.6c.8 0 1.3-.6 1.3-1.4v-25.7c0-.9-.5-1.4-1.3-1.4h-11.8c-2.6.1-4.7.9-6.3 2.4zm2 6.5c0-1.5.4-2.7 1.1-3.6.8-.8 1.8-1.2 3.3-1.2h8.6v15.8c0 1.5-.4 2.7-1.3 3.5-.9.8-2.1 1.2-3.7 1.2h-3.6c-1.5 0-2.6-.4-3.3-1.2-.8-.8-1.1-2-1.1-3.6v-10.9zm24.3-7.4v1.3c0 .8.5 1.3 1.4 1.3h3.2v16c0 2.6.8 4.7 2.5 6.2 1.6 1.5 3.8 2.3 6.4 2.3h2.4c.8 0 1.4-.5 1.4-1.4V210c0-.8-.5-1.4-1.4-1.4h-2.2c-1.6 0-2.7-.4-3.5-1.2-.8-.8-1.2-1.9-1.2-3.4v-15.9h6.4c.8 0 1.4-.5 1.4-1.3v-1.3c0-.8-.5-1.4-1.4-1.4h-6.4v-6c0-.9-.5-1.4-1.4-1.4h-1.6c-.8 0-1.4.6-1.4 1.4v6H618c-.9 0-1.4.5-1.4 1.4zm26.6.9c-1.5 1.5-2.3 3.7-2.3 6.3v11.2c0 2.6.8 4.8 2.3 6.3 1.5 1.6 3.6 2.3 6.2 2.3H661c.8 0 1.4-.5 1.4-1.4V210c0-.8-.5-1.4-1.4-1.4h-11.4c-1.5 0-2.6-.4-3.4-1.2-.8-.8-1.1-2-1.1-3.5v-3.3h16.2c.9 0 1.4-.6 1.4-1.4v-6.4c0-2.6-.8-4.8-2.3-6.3-1.6-1.5-3.7-2.3-6.3-2.3h-4.8c-2.5-.1-4.6.7-6.1 2.2zm2 6.4c0-1.5.4-2.7 1.1-3.5.8-.8 1.8-1.2 3.4-1.2h4.4c1.5 0 2.6.4 3.4 1.2.8.8 1.1 2 1.1 3.5v4h-13.4v-4z\"/></svg>\r\n\r\n    </div>\r\n\r\n    <div class=\"body\">\r\n      <div class=\"claim\" translate>eo.help.about.claim</div>\r\n\r\n      <div class=\"wrap\">\r\n      <table>\r\n        <tbody>\r\n        <tr>\r\n          <th translate>eo.help.about.product.label</th>\r\n          <td>{{ctrl.productName}}</td>\r\n        </tr>\r\n        <tr>\r\n          <th translate>eo.help.about.client.version.label</th>\r\n          <td>{{ctrl.clientVersion}}</td>\r\n        </tr>\r\n        <tr>\r\n          <th translate>eo.help.about.producer.label</th>\r\n          <td translate>eo.help.about.producer.text</td>\r\n        </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <ul class=\"links\">\r\n        <li>\r\n          <a href=\"{{docu.link}}\" target=\"_blank\">{{docu.label | translate}}</a>\r\n        </li>\r\n      </ul>\r\n      </div>\r\n\r\n\r\n      <h2 translate>eo.help.license.title</h2>\r\n      <p translate>eo.help.license.intro</p>\r\n      <div class=\"showLic\" (click)=\"licenseShow = !licenseShow\">\r\n        <span class=\"toggle\"><span translate>eo.help.license.title</span><span class=\"toggle-indicator\">{{licenseShow ? '-' : '+'}}</span></span></div>\r\n      <div class=\"licenses\" *ngIf=\"licenseShow\">\r\n        <div class=\"lib\" *ngFor=\"let lib of __libraries__; trackBy: trackByFn\">\r\n          <div class=\"name\">{{lib.name}}</div>\r\n          <div class=\"lic\" *ngIf=\"licenses[lib.license]\">\r\n            <a href=\"{{licenses[lib.license].url}}\" target=\"_blank\" *ngIf=\"licenses[lib.license].url\">{{licenses[lib.license].label}}</a>\r\n            <span *ngIf=\"!licenses[lib.license].url\">{{licenses[lib.license].label}}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n",
-                styles: [":host{--about-header-height:300px;bottom:0;display:flex;flex-flow:row;justify-content:center;left:0;overflow-y:auto;position:absolute;right:0;top:0}.eo-about-state{box-sizing:border-box;display:flex;flex-flow:column;width:800px}@media (max-width:832px){.eo-about-state{margin:0;min-width:inherit;width:100%}}.eo-about-state .about{background:var(--color-white);box-shadow:0 2px 5px 0 rgba(0,0,0,.2);margin:var(--app-pane-padding)}.eo-about-state .about .header{background-size:cover;height:var(--about-header-height);position:relative}.eo-about-state .about .header:after{background-color:rgba(var(--color-accent-rgb),.8);bottom:0;content:\"\";left:0;position:absolute;right:0;top:0}.eo-about-state .about .header svg{bottom:18%;position:absolute;right:8%;width:40%;z-index:20}.eo-about-state .about .body{padding:var(--app-pane-padding)}.eo-about-state .about .body .claim{padding:var(--app-pane-padding) 0}.eo-about-state .about .body h2{color:var(--text-color-caption);font-size:var(--font-title);font-weight:var(--font-weight-light);margin:1.5em 0 0}.eo-about-state .about .body .wrap{display:flex;flex-flow:row wrap}.eo-about-state .about .body ul.links{color:var(--color-accent);list-style-type:none}.eo-about-state .about .body ul.links li{padding:2px 0}.eo-about-state .about .body ul.links a{color:var(--color-accent);text-decoration:none}.eo-about-state .about .body ul.links a:hover{text-decoration:underline}.eo-about-state .about .body table{background-color:rgba(var(--color-black-rgb),.06);border-radius:2px;margin:var(--app-pane-padding);padding:calc(var(--app-pane-padding)/4) 0}.eo-about-state .about .body table th{align-items:flex-start;color:var(--text-color-caption);display:flex;flex-flow:column;font-size:var(--font-hint);justify-content:center}.eo-about-state .about .body table td,.eo-about-state .about .body table th{padding:calc(var(--app-pane-padding)/8) calc(var(--app-pane-padding)/2)}.eo-about-state .about .body .showLic span.toggle{border:1px solid var(--color-accent);border-radius:4px;color:var(--color-accent);cursor:pointer;display:inline-block;padding:0 4px 2px}.eo-about-state .about .body .showLic .toggle-indicator{padding:0 4px}.eo-about-state .about .body .licenses{padding-top:var(--app-pane-padding)}.eo-about-state .about .body .licenses .lib{border-top:1px solid var(--list-item-border-color);display:flex;flex-flow:row nowrap;padding:calc(var(--app-pane-padding)/4)}.eo-about-state .about .body .licenses .lib .name{flex:1 1 auto}.eo-about-state .about .body .licenses .lib .lic{color:var(--text-color-caption);flex:0 0 auto;font-size:var(--font-hint)}.eo-about-state .about .body .licenses .lib .lic a{background-color:rgba(var(--color-black-rgb),.06);border:1px solid var(--color-accent);border-radius:2px;color:var(--color-accent);display:inline-block;line-height:1em;padding:2px 4px;text-decoration:none}"]
+                template: "<div class=\"eo-about-state\">\r\n\r\n  <div class=\"about\">\r\n    <div class=\"header\" [style.background-image]=\"backgroundImage\">\r\n      <img [src]=\"headerLogo\"/>\r\n    </div>\r\n\r\n    <div class=\"body\">\r\n      <div class=\"claim\" translate>eo.help.about.claim</div>\r\n\r\n      <div class=\"wrap\">\r\n      <table>\r\n        <tbody>\r\n        <tr>\r\n          <th translate>eo.help.about.product.label</th>\r\n          <td>{{ctrl.productName}}</td>\r\n        </tr>\r\n        <tr>\r\n          <th translate>eo.help.about.client.version.label</th>\r\n          <td>{{ctrl.clientVersion}}</td>\r\n        </tr>\r\n        <tr>\r\n          <th translate>eo.help.about.producer.label</th>\r\n          <td translate>eo.help.about.producer.text</td>\r\n        </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <ul class=\"links\">\r\n        <li>\r\n          <a href=\"{{docu.link}}\" target=\"_blank\">{{docu.label | translate}}</a>\r\n        </li>\r\n      </ul>\r\n      </div>\r\n\r\n\r\n      <h2 translate>eo.help.license.title</h2>\r\n      <p translate>eo.help.license.intro</p>\r\n      <div class=\"showLic\" (click)=\"licenseShow = !licenseShow\">\r\n        <span class=\"toggle\"><span translate>eo.help.license.title</span><span class=\"toggle-indicator\">{{licenseShow ? '-' : '+'}}</span></span></div>\r\n      <div class=\"licenses\" *ngIf=\"licenseShow\">\r\n        <div class=\"lib\" *ngFor=\"let lib of __libraries__; trackBy: trackByFn\">\r\n          <div class=\"name\">{{lib.name}}</div>\r\n          <div class=\"lic\" *ngIf=\"licenses[lib.license]\">\r\n            <a href=\"{{licenses[lib.license].url}}\" target=\"_blank\" *ngIf=\"licenses[lib.license].url\">{{licenses[lib.license].label}}</a>\r\n            <span *ngIf=\"!licenses[lib.license].url\">{{licenses[lib.license].label}}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n",
+                styles: [":host{--about-header-height:300px;bottom:0;display:flex;flex-flow:row;justify-content:center;left:0;overflow-y:auto;position:absolute;right:0;top:0}.eo-about-state{box-sizing:border-box;display:flex;flex-flow:column;width:800px}@media (max-width:832px){.eo-about-state{margin:0;min-width:inherit;width:100%}}.eo-about-state .about{background:var(--color-white);box-shadow:0 2px 5px 0 rgba(0,0,0,.2);margin:var(--app-pane-padding)}.eo-about-state .about .header{background-size:cover;height:var(--about-header-height);position:relative}.eo-about-state .about .header:after{background-color:rgba(var(--color-accent-rgb),.8);bottom:0;content:\"\";left:0;position:absolute;right:0;top:0}.eo-about-state .about .header img{bottom:18%;position:absolute;right:8%;width:40%;z-index:20}.eo-about-state .about .body{padding:var(--app-pane-padding)}.eo-about-state .about .body .claim{padding:var(--app-pane-padding) 0}.eo-about-state .about .body h2{color:var(--text-color-caption);font-size:var(--font-title);font-weight:var(--font-weight-light);margin:1.5em 0 0}.eo-about-state .about .body .wrap{display:flex;flex-flow:row wrap}.eo-about-state .about .body ul.links{color:var(--color-accent);list-style-type:none}.eo-about-state .about .body ul.links li{padding:2px 0}.eo-about-state .about .body ul.links a{color:var(--color-accent);text-decoration:none}.eo-about-state .about .body ul.links a:hover{text-decoration:underline}.eo-about-state .about .body table{background-color:rgba(var(--color-black-rgb),.06);border-radius:2px;margin:var(--app-pane-padding);padding:calc(var(--app-pane-padding)/4) 0}.eo-about-state .about .body table th{align-items:flex-start;color:var(--text-color-caption);display:flex;flex-flow:column;font-size:var(--font-hint);justify-content:center}.eo-about-state .about .body table td,.eo-about-state .about .body table th{padding:calc(var(--app-pane-padding)/8) calc(var(--app-pane-padding)/2)}.eo-about-state .about .body .showLic span.toggle{border:1px solid var(--color-accent);border-radius:4px;color:var(--color-accent);cursor:pointer;display:inline-block;padding:0 4px 2px}.eo-about-state .about .body .showLic .toggle-indicator{padding:0 4px}.eo-about-state .about .body .licenses{padding-top:var(--app-pane-padding)}.eo-about-state .about .body .licenses .lib{border-top:1px solid var(--list-item-border-color);display:flex;flex-flow:row nowrap;padding:calc(var(--app-pane-padding)/4)}.eo-about-state .about .body .licenses .lib .name{flex:1 1 auto}.eo-about-state .about .body .licenses .lib .lic{color:var(--text-color-caption);flex:0 0 auto;font-size:var(--font-hint)}.eo-about-state .about .body .licenses .lib .lic a{background-color:rgba(var(--color-black-rgb),.06);border:1px solid var(--color-accent);border-radius:2px;color:var(--color-accent);display:inline-block;line-height:1em;padding:2px 4px;text-decoration:none}"]
             },] }
 ];
 AboutStateComponent.ctorParameters = () => [
@@ -24063,5 +24176,5 @@ EoClientModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIONS, AboutStateComponent, AbstractFilterComponent, AccordionModule, ActionMenuComponent, ActionModule, ActionService, ActionTarget, AgentService, AppAddComponent, AppAddDialogComponent, AppBarComponent, AppLayoutComponent, AppSearchComponent, AppSearchService, AreaState, AuthGuard, CUSTOM_ACTIONS, CapabilitiesGuard, CellRenderer, ChangePasswordFormComponent, CheckboxComponent, ClipboardComponent, CodesystemComponent, CodesystemFilterComponent, ColumnConfiguratorComponent, ContentPreviewService, ContextSearchComponent, ContextType, CtaComponent, CtaModule, CustomFilterComponent, CustomSortComponent, DashboardComponent, DatepickerComponent, DatetimeComponent, DatetimeFilterComponent, DatetimeRangeComponent, DmsObjectTarget, DynamicListComponent, DynamicPropertySwitchComponent, ENTRY_COMPONENTS, ENTRY_LINKS, EmptyComponent, EmptyStateService, EnaioErrorKeys, EoAppShellModule, EoClientModule, EoDialogComponent, EoFrameworkCoreModule, EoFrameworkModule, EoIconComponent, Error404Component, ErrorHandlerService, ErrorMessageComponent, ErrorModule, FavoriteIconComponent, FavoriteStateComponent, FileSizePipe, FormElementComponent, FormElementTableComponent, FormElementsModule, FormInputComponent, FrameComponent, GlobalShortcutsComponent, GlobalShortcutsSectionComponent, GridComponent, GridFilter, GridModule, GridService, HistoryFilterComponent, HistoryFilterPipe, IdReferenceComponent, InboxDetailsComponent, InboxItemTarget, InboxStateComponent, InboxStateModule, InboxTypes, InboxTypesFilter, IndexdataSummaryComponent, InputFocusDirective, KeysPipe, LayoutService, ListContainerComponent, ListContainerModule, ListSettingsService, LoadingSpinnerComponent, LocaleCurrencyPipe, LocaleDatePipe, LocaleDecimalPipe, LocaleNumberPipe, LocalePercentPipe, LocationService, LockSettings, LoginComponent, MediaComponent, MediaModule, NotFoundComponent, NotificationsStateComponent, NumberComponent, NumberRangeComponent, ObjectDetailsComponent, ObjectDetailsModule, ObjectFormComponent, ObjectFormControl, ObjectFormControlWrapper, ObjectFormEditComponent, ObjectFormGroup, ObjectFormGroupComponent, ObjectFormHelperService, ObjectFormModule, ObjectFormScriptService, ObjectFormScriptingScope, ObjectHistoryComponent, ObjectLinksComponent, ObjectStateComponent, ObjectStateDetailsComponent, ObjectStateModule, ObjectStateService, OrganizationComponent, OrganizationFilterComponent, OutsideClickDirective, OverlayComponent, PageTitleService, PanelLoading, PasswordComponent, PendingChangesService, PermissionsComponent, PluginComponent, PluginDirective, PluginService, PluginsModule, PluginsService, PrepareDetailsComponent, PrepareStateComponent, PrepareStateModule, PreparedItemTarget, ProcessDetailsComponent, ProcessFileComponent, ProcessHistoryComponent, ProcessItemTarget, QuickFilterComponent, QuickSearchComponent, QuickSearchModule, ReferenceComponent, ReferenceService, ResetFilterComponent, ResultListComponent, ResultListModule, ResultStateComponent, RouterLinkDirective, RowEditComponent, RtlAwareDirective, STATE, SafeHtmlPipe, SelectionRange, SelectionService, SetFilterComponent, SettingsComponent, SettingsModule, Shortcut, ShortcutsDirective, ShortcutsModule, ShortcutsService, SideBarComponent, SidebarPluginComponent, SimpleAccordionComponent, SplitAreaComponent, SplitComponent, SplitGutterDirective, SplitModule, StoredQueriesStateComponent, StoredQueryComponent, StoredQueryDetailsComponent, StoredQueryModule, StoredQueryTarget, StringComponent, TabContainerComponent, TabContainerModule, TabPanelComponent, TabPluginComponent, TabViewComponent, TabViewNavComponent, TextFilterComponent, TotalCountComponent, TreeComponent, TreeModule, TypeFilter, UNDOCK_WINDOW_NAME, UiModule, UndockSplitComponent, UndockSplitService, UnsubscribeOnDestroy, UploadOverlayComponent, UserAvatarComponent, UtilModule, UtilitiesService, VersionStateComponent, WorkItemTarget, agentConfigKeys, entryComponents, listAnimation, panelLoadingAnimations, ɵ0, ɵ1, PendingChangesGuard as ɵa, UploadOverlayGuard as ɵb, DownloadPdfActionComponent as ɵba, OpenDocumentActionComponent as ɵbb, EmailActionComponent as ɵbc, EmailLinkActionComponent as ɵbd, EmailOriginalActionComponent as ɵbe, EmailPdfActionComponent as ɵbf, ClipboardActionComponent as ɵbg, ClipboardLinkActionComponent as ɵbh, ClipboardOriginalActionComponent as ɵbi, ClipboardPdfActionComponent as ɵbj, FavoriteActionComponent as ɵbk, DeleteActionComponent as ɵbl, DeleteComponent as ɵbm, OpenVersionsActionComponent as ɵbn, RestoreVersionActionComponent as ɵbo, DeletePreparedActionComponent as ɵbp, AddSubscriptionActionComponent as ɵbq, AddSubscriptionComponent as ɵbr, RemoveSubscriptionActionComponent as ɵbs, WorkflowActionComponent as ɵbt, WorkflowComponent as ɵbu, CustomActionsComponent as ɵbv, AddResubmissionActionComponent as ɵbw, AddResubmissionComponent as ɵbx, UpdateResubmissionActionComponent as ɵby, ShareObjectActionComponent as ɵbz, AppShellRoutingModule as ɵc, ShareObjectComponent as ɵca, CutActionComponent as ɵcb, FinalizeActionComponent as ɵcc, DefinalizeActionComponent as ɵcd, DeleteContentActionComponent as ɵce, UnlockActionComponent as ɵcf, SimpleWorkflowActionComponent as ɵcg, PreventDoubleClickDirective as ɵch, EditIconComponent as ɵci, DuetimeInfoComponent as ɵcj, PrepareContentExistsInfoComponent as ɵck, ObjectStateRoutingModule as ɵcl, InboxStateRoutingModule as ɵcm, PrepareStateRoutingModule as ɵcn, EoClientRoutingModule as ɵco, ProcessStateComponent as ɵcp, AppProcessComponent as ɵd, PipesModule as ɵe, QueryScopeSelectComponent as ɵf, IndexdataSummaryEntryComponent as ɵg, OrderByPipe as ɵh, TreeNodeComponent as ɵi, DatepickerService as ɵj, YearRangeDirective as ɵk, ReferenceFinderComponent as ɵl, fadeInOut as ɵm, ReferenceFinderService as ɵn, ReferenceFinderEntryComponent as ɵo, DynamicListFilterComponent as ɵp, ListFilterComponent as ɵq, PaginationComponent as ɵr, ProcessFormModule as ɵs, ProcessFormComponent as ɵt, ActionComponentAnchorDirective as ɵu, OpenDocumentComponent as ɵv, CopyActionComponent as ɵw, OpenContextActionComponent as ɵx, DownloadActionComponent as ɵy, DownloadOriginalActionComponent as ɵz };
+export { ACTIONS, AboutStateComponent, AbstractFilterComponent, AccordionModule, ActionMenuComponent, ActionModule, ActionService, ActionTarget, AgentService, AppAddComponent, AppAddDialogComponent, AppBarComponent, AppLayoutComponent, AppSearchComponent, AppSearchService, AreaState, AuthGuard, CUSTOM_ACTIONS, CapabilitiesGuard, CellRenderer, ChangePasswordFormComponent, CheckboxComponent, ClipboardComponent, CodesystemComponent, CodesystemFilterComponent, ColumnConfiguratorComponent, ContentPreviewService, ContextSearchComponent, ContextType, CtaComponent, CtaModule, CustomFilterComponent, CustomSortComponent, DashboardComponent, DatepickerComponent, DatetimeComponent, DatetimeFilterComponent, DatetimeRangeComponent, DmsObjectTarget, DynamicListComponent, DynamicPropertySwitchComponent, ENTRY_COMPONENTS, ENTRY_LINKS, EmptyComponent, EmptyStateService, EnaioErrorKeys, EoAppShellModule, EoClientModule, EoDialogComponent, EoFrameworkCoreModule, EoFrameworkModule, EoIconComponent, Error404Component, ErrorHandlerService, ErrorMessageComponent, ErrorModule, FavoriteIconComponent, FavoriteStateComponent, FileSizePipe, FormElementComponent, FormElementTableComponent, FormElementsModule, FormInputComponent, FrameComponent, GlobalShortcutsComponent, GlobalShortcutsSectionComponent, GridComponent, GridFilter, GridModule, GridService, HistoryFilterComponent, HistoryFilterPipe, IdReferenceComponent, InboxDetailsComponent, InboxItemTarget, InboxStateComponent, InboxStateModule, InboxTypes, InboxTypesFilter, IndexdataSummaryComponent, InputFocusDirective, KeysPipe, LayoutService, ListContainerComponent, ListContainerModule, ListSettingsService, LoadingSpinnerComponent, LocaleCurrencyPipe, LocaleDatePipe, LocaleDecimalPipe, LocaleNumberPipe, LocalePercentPipe, LocationService, LockSettings, LoginComponent, MediaComponent, MediaModule, NotFoundComponent, NotificationsStateComponent, NumberComponent, NumberRangeComponent, ObjectDetailsComponent, ObjectDetailsModule, ObjectFormComponent, ObjectFormControl, ObjectFormControlWrapper, ObjectFormEditComponent, ObjectFormGroup, ObjectFormGroupComponent, ObjectFormHelperService, ObjectFormModule, ObjectFormScriptService, ObjectFormScriptingScope, ObjectHistoryComponent, ObjectLinksComponent, ObjectStateComponent, ObjectStateDetailsComponent, ObjectStateModule, ObjectStateService, OrganizationComponent, OrganizationFilterComponent, OutsideClickDirective, OverlayComponent, PageTitleService, PanelLoading, PasswordComponent, PendingChangesService, PermissionsComponent, PluginComponent, PluginDirective, PluginService, PluginsModule, PluginsService, PrepareDetailsComponent, PrepareStateComponent, PrepareStateModule, PreparedItemTarget, ProcessDetailsComponent, ProcessFileComponent, ProcessHistoryComponent, ProcessItemTarget, QuickFilterComponent, QuickSearchComponent, QuickSearchModule, ReferenceComponent, ReferenceService, ResetFilterComponent, ResultListComponent, ResultListModule, ResultStateComponent, RouterLinkDirective, RowEditComponent, RtlAwareDirective, STATE, SafeHtmlPipe, SelectionRange, SelectionService, SetFilterComponent, SettingsComponent, SettingsModule, Shortcut, ShortcutsDirective, ShortcutsModule, ShortcutsService, SideBarComponent, SidebarPluginComponent, SimpleAccordionComponent, SplitAreaComponent, SplitComponent, SplitGutterDirective, SplitModule, StoredQueriesStateComponent, StoredQueryComponent, StoredQueryDetailsComponent, StoredQueryModule, StoredQueryTarget, StringComponent, TabContainerComponent, TabContainerModule, TabPanelComponent, TabPluginComponent, TabViewComponent, TabViewNavComponent, TextFilterComponent, TotalCountComponent, TreeComponent, TreeModule, TypeFilter, UNDOCK_WINDOW_NAME, UiModule, UndockSplitComponent, UndockSplitService, UnsubscribeOnDestroy, UploadOverlayComponent, UserAvatarComponent, UtilModule, UtilitiesService, VersionStateComponent, WorkItemTarget, agentConfigKeys, entryComponents, listAnimation, panelLoadingAnimations, ɵ0, ɵ1, PendingChangesGuard as ɵa, UploadOverlayGuard as ɵb, OpenContextActionComponent as ɵba, DownloadActionComponent as ɵbb, DownloadOriginalActionComponent as ɵbc, DownloadPdfActionComponent as ɵbd, OpenDocumentActionComponent as ɵbe, EmailActionComponent as ɵbf, EmailLinkActionComponent as ɵbg, EmailOriginalActionComponent as ɵbh, EmailPdfActionComponent as ɵbi, ClipboardActionComponent as ɵbj, ClipboardLinkActionComponent as ɵbk, ClipboardOriginalActionComponent as ɵbl, ClipboardPdfActionComponent as ɵbm, FavoriteActionComponent as ɵbn, DeleteActionComponent as ɵbo, DeleteComponent as ɵbp, OpenVersionsActionComponent as ɵbq, RestoreVersionActionComponent as ɵbr, DeletePreparedActionComponent as ɵbs, AddSubscriptionActionComponent as ɵbt, AddSubscriptionComponent as ɵbu, RemoveSubscriptionActionComponent as ɵbv, WorkflowActionComponent as ɵbw, WorkflowComponent as ɵbx, CustomActionsComponent as ɵby, AddResubmissionActionComponent as ɵbz, AppShellRoutingModule as ɵc, AddResubmissionComponent as ɵca, UpdateResubmissionActionComponent as ɵcb, ShareObjectActionComponent as ɵcc, ShareObjectComponent as ɵcd, CutActionComponent as ɵce, FinalizeActionComponent as ɵcf, DefinalizeActionComponent as ɵcg, DeleteContentActionComponent as ɵch, UnlockActionComponent as ɵci, SimpleWorkflowActionComponent as ɵcj, PreventDoubleClickDirective as ɵck, TrapFocusDirective as ɵcl, EditIconComponent as ɵcm, DuetimeInfoComponent as ɵcn, PrepareContentExistsInfoComponent as ɵco, ObjectStateRoutingModule as ɵcp, InboxStateRoutingModule as ɵcq, PrepareStateRoutingModule as ɵcr, EoClientRoutingModule as ɵcs, ProcessStateComponent as ɵct, AppProcessComponent as ɵd, PipesModule as ɵe, UnsubscribeOnDestroy as ɵf, PendingChangesService as ɵg, QueryScopeSelectComponent as ɵh, IndexdataSummaryEntryComponent as ɵi, OrderByPipe as ɵj, TreeNodeComponent as ɵk, DatepickerService as ɵl, YearRangeDirective as ɵm, ReferenceFinderComponent as ɵn, fadeInOut as ɵo, ReferenceFinderService as ɵp, ReferenceFinderEntryComponent as ɵq, DynamicListFilterComponent as ɵr, ListFilterComponent as ɵs, PaginationComponent as ɵt, MediaModule as ɵu, ProcessFormModule as ɵv, ProcessFormComponent as ɵw, ActionComponentAnchorDirective as ɵx, OpenDocumentComponent as ɵy, CopyActionComponent as ɵz };
 //# sourceMappingURL=eo-sdk-client.js.map