@eo-sdk/client 8.16.36 → 8.16.37

package/esm2015/app/eo-framework/prepare-details/prepare-details.component.js

@@ -494,7 +494,7 @@ PrepareDetailsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-prepare-details',
                 template: "<div class=\"prepareDetails__wrapper\" *ngIf=\"!loading; else mainSpinner\">\n  <section class=\"prepareDetails\" *ngIf=\"preparedItem && preparePhase; else noItem\"\n    [ngClass]=\"{multifile: preparedItem.contentcount > 1, committing: committing}\">\n    <div class=\"eo-head\">\n\n      <div class=\"header-info\">\n        <div class=\"header-title\">{{header.title}}</div>\n        <div class=\"header-sub-title h-location\" *ngIf=\"!header.location.link; else linked\">{{header.location.label}}\n        </div>\n        <div class=\"header-sub-title h-subtitle\">{{header.subtitle}}</div>\n\n        <ng-template #linked>\n          <div class=\"header-sub-title h-subtitle-detailed\">\n            <span translate>eo.prepare.location.title.prefix</span>\n            <a [routerLink]=\"header.location.link\">{{header.location.label}}</a>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"actions\">\n        <eo-icon class=\"btn btn-download\"\n          *ngIf=\"preparePhase.name === 'content' ? selectedTemplateFile : preparePhase.data.previewFile\"\n          [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\"\n          [iconTitle]=\"('eo.action.download.dms.object.content.label' | translate)\" (click)=\"download()\"></eo-icon>\n        <eo-icon class=\"btn btn-delete\" [iconSrc]=\"'assets/_default/svg/ic_trash.svg'\"\n          (click)=\"showDeleteDialog = true;\"></eo-icon>\n        <!-- buttons while choosing a template -->\n        <ng-container *ngIf=\"chooseTemplate\">\n          <button class=\"btn-tpl-abort\" (click)=\"showTemplateSelector(false)\"\n            translate>eo.prepare.template.abort</button>\n          <button class=\"primary btn-tpl-apply\" (click)=\"addTemplate(selectedTemplate)\" [disabled]=\"!selectedTemplate\"\n            translate>eo.prepare.template.select</button>\n        </ng-container>\n\n        <ng-container *ngIf=\"preparePhase.name === 'indexdata'\">\n          <button (click)=\"commit()\" class=\"btn-idx-save\"\n            [ngClass]=\"{primary: preparedItem.state.parentisroot && preparedItem.contentcount > 1}\"\n            [disabled]=\"formState?.invalid || committing\" translate>eo.prepare.save</button>\n\n          <button (click)=\"commit(true)\" [disabled]=\"formState?.invalid || committing\" class=\"primary btn-idx-saveopen\"\n            [hidden]=\"preparedItem?.state.parentisroot && preparedItem?.contentcount > 1\"\n            translate>eo.prepare.saveopen</button>\n\n        </ng-container>\n      </div>\n\n    </div>\n\n    <div class=\"eo-body\" [ngSwitch]=\"preparePhase.name\" *ngIf=\"!committing; else spinner\">\n\n      <!-- PHASE TYPE -->\n      <div class=\"phase type\" *ngSwitchCase=\"'type'\">\n\n        <!-- with preview -->\n        <eo-split [gutterSize]=\"16\" [gutterColor]=\"'#fff'\" [visibleTransition]=\"true\"\n          *ngIf=\"preparePhase.data.previewFile; else nopreview\" [cacheLayout]=\"'prepare.details.phase.type'\">\n          <eo-split-area [size]=\"30\">\n\n            <div class=\"form-files\">\n              <div class=\"object-type-select empty\" *ngIf=\"preparedItem.types.length == 0\" translate>\n                eo.prepare.details.type.empty</div>\n              <div class=\"object-type-select empty\"\n                *ngIf=\"!preparedItem.state.typeselectedallowed && preparedItem.state.typeselected\"\n                [translateParams]=\"{type: preparedItem.selectedtype.label, filename: getFileNames(preparedItem)}\"\n                translate>eo.prepare.details.type.notallowed</div>\n\n              <div class=\"object-type-select\">\n                <div class=\"object-type\" *ngFor=\"let type of preparedItem.types; trackBy: trackByIdFn\"\n                  (click)=\"selectObjectType(type)\">\n                  <div class=\"type-icon\">\n                    <eo-icon [iconId]=\"type.icon.id\"></eo-icon>\n                  </div>\n                  <div class=\"content\">\n                    <div class=\"title\">{{type.label}}</div>\n                    <div class=\"description\">{{type.description}}</div>\n                  </div>\n                </div>\n              </div>\n\n\n              <div class=\"content-select\">\n                <h2 translate>eo.prepare.details.contents.title</h2>\n                <div class=\"content\"\n                  *ngFor=\"let content of preparedItem.contents; trackBy: trackByIndexFn; index as idx;\"\n                  [ngClass]=\"{selected: preparePhase.data.previewIndex == idx}\" (click)=\"setPreviewUri(idx)\">\n                  <span>{{content.path}}</span>\n                  <eo-icon class=\"btn btn-delete-content\" [iconSrc]=\"'assets/_default/svg/ic_trash.svg'\"\n                  (click)=\"showContentDeleteDialog = true; deletedContentIndex = idx;\"></eo-icon>\n                  <div *ngIf=\"content.existscount > 0\" class=\"attention\" title=\"{{'eo.prepare.content.existscount.message'|translate: ({count: content.existscount})}}\">!</div>\n                </div>\n              </div>\n            </div>\n          </eo-split-area>\n          <eo-split-area [size]=\"70\">\n            <div class=\"eo-media-wrap\">\n              <eo-prepare-content-exists-info [content]=\"preparedItem.contents[preparePhase.data.previewIndex]\">\n              </eo-prepare-content-exists-info>\n              <eo-media [previewFile]=\"preparePhase.data.previewFile\"></eo-media>\n            </div>\n          </eo-split-area>\n        </eo-split>\n\n        <!-- without preview -->\n        <ng-template #nopreview>\n          <div class=\"form-files\">\n            <div class=\"object-type-select\">\n              <div class=\"object-type\" *ngFor=\"let type of preparedItem.types; trackBy: trackByIdFn\"\n                (click)=\"selectObjectType(type)\">\n                <div class=\"type-icon\">\n                  <eo-icon [iconId]=\"type.icon.id\"></eo-icon>\n                </div>\n                <div class=\"content\">\n                  <div class=\"title\">{{type.label}}</div>\n                  <div class=\"description\">{{type.description}}</div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n\n      </div>\n\n      <!-- PHASE CONTENT -->\n      <div class=\"phase content\" *ngSwitchCase=\"'content'\">\n\n        <!-- panel for selecting a template to be used as items content -->\n        <eo-split [gutterSize]=\"16\" [gutterColor]=\"'#fff'\" [visibleTransition]=\"true\"\n          *ngIf=\"chooseTemplate; else attach\" [cacheLayout]=\"'prepare.details.phase.content'\">\n          <eo-split-area [size]=\"40\">\n\n            <!-- list of available templates -->\n            <eo-list-container #eoList [loading]=\"false\" class=\"templates\">\n              <div class=\"eo-header\">\n                <eo-icon class=\"eo-header-icon\" [iconSrc]=\"'assets/_default/svg/ic_template.svg'\"></eo-icon>\n                <div class=\"eo-header-info\">\n                  <div class=\"eo-header-title\" translate>eo.prepare.template.list.title</div>\n                </div>\n                <div class=\"eo-header-actions\">\n\n                  <eo-overlay #oFilter [iconSrc]=\"'assets/_default/svg/ic_filter.svg'\" [iconClass]=\"'primary'\"\n                    class=\"overlay-filter\" [title]=\"'eo.list.filter' | translate\"\n                    (active)=\"oFilter.onActiveChanged($event)\">\n                    <eo-custom-filter #cFilter (change)=\"cFilter.updateGrid(eoList.eoGridSubject, $event)\"\n                      (active)=\"oFilter.onActiveChanged($event)\">\n                      <eo-text-filter [title]=\"'eo.prepare.template.filter.text.title' | translate\"\n                        [matchFields]=\"['title', 'description', 'tags']\"\n                        [placeholder]=\"'eo.prepare.template.filter.text.title'\"></eo-text-filter>\n                      <eo-set-filter [operator]=\"'OR'\" [title]=\"'eo.prepare.template.filter.set.title' | translate\"\n                        *ngIf=\"tagFilterOptions?.length\" [options]=\"tagFilterOptions\"></eo-set-filter>\n                    </eo-custom-filter>\n                  </eo-overlay>\n\n                </div>\n              </div>\n              <div class=\"eo-body\">\n                <eo-grid #eoGrid *ngIf=\"gridOptions?.rowData\" [gridOptions]=\"gridOptions\" [fullWidth]=\"true\"\n                  [showHeader]=\"true\" [showFooter]=\"false\" [selectionLimit]=\"1\"\n                  (eoGridSelectionChanged)=\"selectTemplate($event[0])\">\n                </eo-grid>\n              </div>\n            </eo-list-container>\n\n          </eo-split-area>\n          <eo-split-area [size]=\"60\">\n\n            <!-- preview of selected template -->\n            <eo-media [previewFile]=\"selectedTemplateFile\"></eo-media>\n\n          </eo-split-area>\n        </eo-split>\n\n        <!-- add content general overview (upload, template, none) -->\n        <ng-template #attach>\n\n          <div class=\"info\" *ngIf=\"!uploadInProgress\" translate>eo.prepare.attachment.info</div>\n          <input type=\"file\" #file (change)=\"fileChangeListener($event.target.files)\">\n\n          <div class=\"attachments\" *ngIf=\"!uploadInProgress; else uploadspinner\">\n\n            <!-- upload a file -->\n            <div class=\"attachment att-file\" *ngIf=\"preparePhase.data.file\" (click)=\"upload()\">\n              <div class=\"img\">\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_file_upload.svg'\"></eo-icon>\n              </div>\n              <h3 translate>eo.prepare.attachment.upload.title</h3>\n              <p translate>eo.prepare.attachment.upload.desc</p>\n            </div>\n\n            <!-- select a template -->\n            <div class=\"attachment att-tmpl\" *ngIf=\"preparePhase.data.templates.length > 0 && hasTemplateCapability()\"\n              (click)=\"showTemplateSelector(true)\">\n              <div class=\"img\">\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_prepare_add.svg'\"></eo-icon>\n              </div>\n              <h3 translate>eo.prepare.attachment.template.title</h3>\n              <p translate>eo.prepare.attachment.template.desc</p>\n            </div>\n\n            <!-- no file -->\n            <div class=\"attachment att-none\" *ngIf=\"preparePhase.data.withoutFile\" (click)=\"noFile()\">\n              <div class=\"img\">\n                <eo-icon [iconSrc]=\"'assets/_default/svg/ic_no-file.svg'\"></eo-icon>\n              </div>\n              <h3 translate>eo.prepare.attachment.nofile.title</h3>\n              <p translate>eo.prepare.attachment.nofile.desc</p>\n            </div>\n\n          </div>\n\n        </ng-template>\n\n        <!-- upload progress indicator -->\n        <ng-template #uploadspinner>\n          <div class=\"upload-indicator\">\n            <eo-loading-spinner [size]=\"'large'\"></eo-loading-spinner>\n          </div>\n        </ng-template>\n      </div>\n\n      <!-- PHASE INDEXDATA -->\n      <div class=\"phase indexdata\" *ngSwitchCase=\"'indexdata'\">\n\n        <!-- form and preview -->\n        <eo-split [gutterSize]=\"16\" [gutterColor]=\"'#fff'\" [visibleTransition]=\"true\"\n          *ngIf=\"preparePhase.data.previewFile; else justform\" [cacheLayout]=\"'prepare.details.phase.indexdata'\">\n          <eo-split-area [size]=\"50\">\n\n            <div class=\"form-files\">\n\n              <!-- indexdata form -->\n              <ng-container *ngTemplateOutlet=\"justform\"></ng-container>\n\n              <!-- list of contents (in case of bulk upload) that can be previewed -->\n              <div class=\"content-select\">\n\n                <h2 translate>eo.prepare.details.contents.title</h2>\n                <div class=\"content\"\n                  *ngFor=\"let content of preparedItem.contents; trackBy: trackByIndexFn; index as idx\"\n                  [ngClass]=\"{selected: preparePhase.data.previewIndex === idx}\" (click)=\"setPreviewUri(idx)\">\n                  {{content.path}} <span *ngIf=\"content.existscount > 0\" class=\"attention\" title=\"{{'eo.prepare.content.existscount.message'|translate: ({count: content.existscount})}}\">!</span>\n                </div>\n              </div>\n            </div>\n\n          </eo-split-area>\n          <eo-split-area [size]=\"50\">\n            <div class=\"eo-media-wrap\">\n              <eo-prepare-content-exists-info [content]=\"preparedItem.contents[preparePhase.data.previewIndex]\">\n              </eo-prepare-content-exists-info>\n              <eo-media [previewFile]=\"preparePhase.data.previewFile\"></eo-media>\n            </div>\n          </eo-split-area>\n        </eo-split>\n\n        <!-- just the form -->\n        <ng-template #justform>\n          <div class=\"form-container situation-create\" *ngIf=\"formOptions\">\n            <eo-object-form #form [formOptions]=\"formOptions\" (statusChanged)=\"onFormStatusChanged($event)\">\n            </eo-object-form>\n          </div>\n        </ng-template>\n\n      </div>\n\n    </div>\n\n  </section>\n\n  <ng-template #spinner>\n    <div class=\"eo-body\">\n      <eo-loading-spinner size=\"medium\"></eo-loading-spinner>\n    </div>\n  </ng-template>\n\n</div>\n\n<ng-template #mainSpinner>\n  <div class=\"prepareDetails__main-spinner\">\n    <eo-loading-spinner size=\"medium\"></eo-loading-spinner>\n  </div>\n</ng-template>\n\n\n<ng-template #noItem>\n  <eo-error-message [emptyState]=\"{icon: emptyState.icon, text: emptyState.text, className: emptyState.className}\">\n    <ng-content select=\".error\"></ng-content>\n  </eo-error-message>\n</ng-template>\n\n<eo-dialog [title]=\"'eo.prepare.details.delete.dialog.title' | translate\"\n  [(visible)]=\"showDeleteDialog\" [focusOnShow]=\"false\" [minWidth]=\"400\" [styleClass]=\"'prepare-delete__dialog'\">\n\n<div>{{'eo.prepare.details.delete.dialog.message' | translate}}</div>\n\n  <div class=\"action-buttons prepare-delete--action-buttons flex-row\">\n    <button type=\"button\" class=\"button cancel\" (click)=\"showDeleteDialog = false\"\n      translate>eo.prepare.details.delete.dialog.cancel</button>\n    <button type=\"button\" #confirmDelete (click)=\"removeItem(preparedItem)\" class=\"button primary\"\n      translate>eo.prepare.details.delete.dialog.ok</button>\n  </div>\n</eo-dialog>\n\n<eo-dialog [title]=\"'eo.prepare.details.delete.content.dialog.title' | translate\"\n  [(visible)]=\"showContentDeleteDialog\" [minWidth]=\"400\" [styleClass]=\"'prepare-delete__dialog'\">\n\n<div>{{'eo.prepare.details.delete.content.dialog.message' | translate: ({contentPath: preparedItem?.contents ? preparedItem?.contents[deletedContentIndex]?.path : ''})}}</div>\n\n  <div class=\"action-buttons prepare-delete--action-buttons flex-row\">\n    <button type=\"button\" class=\"button cancel\" (click)=\"showContentDeleteDialog = false\"\n      translate>eo.prepare.details.delete.dialog.cancel</button>\n    <button type=\"button\" #confirmContentDelete (click)=\"removeItemContent(preparedItem, deletedContentIndex)\" class=\"button primary\"\n      translate>eo.prepare.details.delete.dialog.ok</button>\n  </div>\n</eo-dialog>\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}"]
+                styles: [":host{height:100%}:host .prepareDetails{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;background:var(--panel-background-grey);height:100%;overflow-y:auto}:host .prepareDetails .eo-media-wrap{height:100%;display:flex;flex-flow:column}:host .prepareDetails .eo-media-wrap eo-media{flex:1;position:relative}:host .prepareDetails__wrapper{height:100%}:host .prepareDetails__main-spinner{height:100%;display:flex;justify-content:center;align-items: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{font-size:var(--font-caption);color:var(--text-color-caption);flex:1 1 auto}:host .prepareDetails .eo-head .header-info .header-title{font-size:var(--font-title);color:var(--text-color-body);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{display:flex;align-items:center;align-self:flex-start}[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{padding:calc(var(--app-pane-padding) / 4);cursor:pointer}: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{display:flex;flex-flow:column;align-items:center;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{flex:0 0 auto;color:var(--text-color-caption);margin-bottom:var(--app-pane-padding)}:host .prepareDetails .phase.content .attachments{flex:0 0 auto;display:flex;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);cursor:pointer;margin:calc(var(--app-pane-padding) / 2);max-width:200px;border-bottom:1px solid rgba(var(--color-black-rgb),.1)}:host .prepareDetails .phase.content .attachments .attachment .img{display:flex;flex-flow:column;align-items:center;justify-content:center;padding:calc(var(--app-pane-padding) * 2) 0;background:var(--color-accent)}:host .prepareDetails .phase.content .attachments .attachment .img eo-icon{color:var(--color-white);width:48px;height:48px;opacity:.5;transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out}:host .prepareDetails .phase.content .attachments .attachment h3{font-weight:var(--font-weight-normal);margin:0;padding:calc(var(--app-pane-padding) / 2) var(--app-pane-padding);font-size:var(--font-subhead)}:host .prepareDetails .phase.content .attachments .attachment p{margin:0;padding:0 var(--app-pane-padding) var(--app-pane-padding) var(--app-pane-padding);color:var(--text-color-caption)}: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{display:flex;flex-flow:row nowrap;align-items:center;background:var(--color-white);padding:calc(var(--app-pane-padding) / 2);margin-bottom:1px;cursor:pointer;transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-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{padding-left:calc(var(--app-pane-padding) / 2);overflow:hidden}: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{display:flex;flex-flow:column;align-items:center;justify-content:center}:host .prepareDetails.multifile .form-files{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-flow:column}: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);overflow-y:auto;box-sizing:border-box;display:block;padding:calc(var(--app-pane-padding) / 2);flex:0 0 30%}:host .prepareDetails.multifile .content-select h2{margin:0;padding:calc(var(--app-pane-padding) / 2);padding-bottom:var(--app-pane-padding);font-size:var(--font-subhead);font-weight:var(--font-weight-normal);color:var(--text-color-caption)}:host .prepareDetails.multifile .content-select .content{overflow:hidden;text-overflow:ellipsis;padding:calc(var(--app-pane-padding) / 2);margin-bottom:calc(var(--app-pane-padding) / 2);color:var(--text-color-caption);cursor:pointer;transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;display:flex;background:var(--color-white);justify-content:space-between;gap:8px}:host .prepareDetails.multifile .content-select .content>span{text-overflow:ellipsis;overflow:hidden;flex:1}:host .prepareDetails.multifile .content-select .content .btn-delete-content{width:16px;flex:0 0 16px;height:16px;color:var(--text-color-caption)}:host .prepareDetails.multifile .content-select .content .btn-delete-content:hover{background-color:var(--text-color-hint)}:host .prepareDetails.multifile .content-select .content div.attention{display:block;flex:0 0 auto;right:4px;top:8px;border-radius:2px;padding:0 4px;color:var(--color-warning);line-height:1em;border:1px solid var(--color-warning)}: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{margin-bottom:1px;cursor:pointer}: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{padding:8px;min-height:unset!important}::ng-deep .prepare-delete__dialog--header{font-size:1.17em!important;font-weight:400!important;color:rgba(var(--color-black-rgb),.54)!important;padding:0 0 1em!important;margin:0;background:#fff!important}"]
             },] }
 ];
 PrepareDetailsComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/process/details/process-details.component.js

@@ -200,7 +200,7 @@ ProcessDetailsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-process-details',
                 template: "<div class=\"process-details\" *ngIf=\"item; else noItem\">\n\n  <div class=\"eo-head\">\n    <header class=\"eo-header\">\n      <eo-icon class=\"eo-header-icon\" [ngClass]=\"{error: item.state === 'ERRORSUSPENDED'}\" *ngIf=\"!item.iconid\" [iconTitle]=\"item.modelname\"\n               [iconSrc]=\"item.iconurl\"></eo-icon>\n      <eo-icon class=\"eo-header-icon\" *ngIf=\"item.iconid\" [iconId]=\"item.iconid\" [iconTitle]=\"item.modelname\"></eo-icon>\n      <div class=\"eo-header-info eo-header__content\">\n        <div class=\"eo-header__title\">\n          <h2 class=\"eo-header-title\">{{item.localizedsubject}}</h2>\n          <h3 class=\"eo-header-subtitle\">{{item.modelname}}<span class=\"starter\" *ngIf=\"organisation && organisation.name !== 'sysroot' && organisation.name !== 'system'\">{{organisation.title}} ({{organisation.name}})</span></h3>\n        </div>\n      </div>\n      <div class=\"eo-header-actions\">\n        <eo-loading-spinner *ngIf=\"loading\" [size]=\"'small'\"></eo-loading-spinner>\n      </div>\n    </header>\n  </div>\n\n  <div class=\"eo-body\">\n\n    <div class=\"load-error\" *ngIf=\"loadError\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_error.svg'\"></eo-icon>\n    </div>\n\n    <!-- details for BPM items -->\n    <eo-tab-container [cacheLayout]=\"'process-details'\" [enableSlave]=\"false\" [pluginPanels]=\"externalPanels\">\n\n      <!-- HISTORY PANEL -->\n      <eo-tab-panel [id]=\"'history'\" header=\"{{'eo.process.details.tab.progress' | translate}}\">\n\n        <div class=\"tab-panel\">\n          <div class=\"panel process-history\">\n            <eo-process-history [history]=\"history\"></eo-process-history>\n          </div>\n        </div>\n      </eo-tab-panel>\n\n      <!-- FILE PANEL -->\n      <eo-tab-panel [id]=\"'file'\" header=\"{{'eo.process.details.tab.attachments' | translate}}\">\n        <div class=\"tab-panel\">\n          <!-- list content attached to the work item -->\n          <div class=\"panel process-files\">\n            <eo-process-file [processFile]=\"item?.file\"\n                             [isDisabled]=\"false\"\n                             [clipboard]=\"clipboard\"\n                             [editable]=\"true\"\n                             [selectedContentFileId]=\"selectedContentFileId\"\n                             (onRemoveWorkItemContent)=\"removeWorkItemContent($event)\"\n                             (onOpenWorkItemContentInContext)=\"openWorkItemContentInContext($event)\"\n                             (onOpenWorkItemContent)=\"openWorkItemContent($event)\"\n                             (onRemoveWorkItemContent)=\"removeWorkItemContent($event)\"\n                             (onPasteProcessFile)=\"addPastedProcessFile($event)\">\n            </eo-process-file>\n          </div>\n        </div>\n\n      </eo-tab-panel>\n\n      <ng-content></ng-content>\n\n    </eo-tab-container>\n\n  </div>\n</div>\n\n<ng-template #noItem>\n  <eo-error-message class=\"process-details__empty\" [emptyState]=\"{icon: emptyState.icon, text: emptyState.text, className: emptyState.className}\">\n    <ng-content select=\".error\"></ng-content>\n  </eo-error-message>\n</ng-template>\n",
-                styles: [".process-details{background-color:var(--panel-background-grey);height:100%;position:relative}.process-details .eo-head{background-color:var(--color-white);height:calc(var(--app-pane-header-height) - 30px)}.process-details .eo-header .avatar{-webkit-border-radius:50%;background-position:50%;background-repeat:no-repeat;border-radius:50%;height:44px;width:44px}.process-details .eo-header-subtitle .starter{background-color:rgba(var(--color-black-rgb),.08);border-radius:2px;color:var(--text-color-caption);display:inline-block;font-size:var(--font-hint);line-height:1em;margin:0 calc(var(--app-pane-padding)/2);padding:2px calc(var(--app-pane-padding)/2) 3px calc(var(--app-pane-padding)/2)}.process-details .eo-header__title{color:var(--text-color-caption);display:flex;flex-direction:column;font-size:var(--font-caption)}.process-details .eo-body{bottom:0;left:0;position:absolute;right:0;top:calc(var(--app-pane-header-height) - 30px)}.process-details .eo-body .load-error{align-items:center;background-color:var(--panel-background-grey);bottom:0;display:flex;flex-flow:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:5}.process-details .eo-body .load-error eo-icon{color:var(--text-color-hint);opacity:.5;width:20%}.process-details .eo-body .tab-panel{display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0}.process-details .eo-body .tab-panel .panel:not(.process-history){display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow-y:auto;padding:var(--app-pane-padding)}.process-details .eo-body .tab-panel .panel.process-history{height:100%}.process-details .eo-body .tab-panel .process-actions{display:flex;flex:none;flex-direction:row;flex-wrap:wrap;justify-content:space-between;min-height:0;min-width:0;padding:0 calc(var(--app-pane-padding)*0.75) 0!important}.process-details .eo-body .tab-panel .process-actions button{margin:0 calc(var(--app-pane-padding)*0.25)}.process-details .eo-body .tab-panel .process-actions button.ext{position:relative}.process-details .eo-body .tab-panel .process-actions button.ext:after{border-color:rgba(var(--color-white-rgb),.7);border-style:solid;border-width:2px 2px 0 0;box-sizing:border-box;content:\"\";height:calc(var(--app-pane-padding)*0.5);position:absolute;right:calc(var(--app-pane-padding)/8);top:calc(var(--app-pane-padding)/8);width:calc(var(--app-pane-padding)*0.5)}.process-details .eo-body .tab-panel .process-actions div.primary{display:flex;flex:none;flex:1 1 auto;flex-direction:row;justify-content:flex-end;min-height:0;min-width:0;padding:var(--app-pane-padding) 0}.process-details .eo-body .tab-panel .process-actions div.secondary{display:flex;flex:none;flex-direction:row;min-height:0;min-width:0;padding:var(--app-pane-padding) 0}.process-details .eo-body .tab-panel .process-actions.disabled{opacity:.5}.process-details .eo-body .tab-panel .process-actions.disabled button{cursor:default;pointer-events:none}.process-details .eo-body .notice{background-color:rgba(var(--color-black-rgb),.06);border-radius:2px;margin-bottom:var(--app-pane-padding);padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}.process-details .eo-body .notice.pastDue{background-color:var(--color-error);color:var(--color-white)}.process-details .eo-body .indexdata{margin-top:calc(var(--app-pane-padding)/2)}.process-details .eo-body .process-description{margin-bottom:var(--app-pane-padding)}.process-details .eo-body .process-performer{margin:calc(var(--app-pane-padding)/4) 0}.process-details .eo-body .process-performer .head{align-items:center;display:flex;flex-flow:row nowrap}.process-details .eo-body .process-performer .head .label{flex:1 1 auto}.process-details .eo-body .process-performer .head .action{-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:1px solid rgba(var(--color-black-rgb),.1);border-radius:2px;cursor:pointer;display:flex;flex-flow:row nowrap;overflow:hidden;padding:0 0 0 calc(var(--app-pane-padding)/2);transition:all var(--app-default-transition-duration) ease-in-out}.process-details .eo-body .process-performer .head .action .count{color:var(--text-color-caption);line-height:1em}.process-details .eo-body .process-performer .head .action 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(--text-color-hint);transition:all var(--app-default-transition-duration) ease-in-out}.process-details .eo-body .process-performer .head .action:hover{background:rgba(var(--color-black-rgb),.1)}.process-details .eo-body .process-performer .head.performerShow .action eo-icon{transform:rotate(180deg)}.process-details .eo-body .process-performer .body{padding:calc(var(--app-pane-padding)/2) 0}.process-details .eo-body .process-performer .body .performer{-moz-user-select:none;-webkit-animation:eoFadeInDown var(--app-default-transition-duration);-webkit-user-select:none;align-items:center;animation:eoFadeInDown var(--app-default-transition-duration);background-color:var(--color-white);border-radius:2px;display:flex;flex-flow:row nowrap;margin-bottom:2px;padding:2px;user-select:none}.process-details .eo-body .process-performer .body .performer .icon-wrap{background-color:var(--color-primary-3);border-radius:2px;color:var(--color-white);flex:0 0 auto;padding:2px}.process-details .eo-body .process-performer .body .performer .name{flex:1 1 auto;padding:0 var(--app-pane-padding)}.process-details .eo-body .process-performer .body .performer .name .qname{background-color:rgba(var(--color-black-rgb),.08);border-radius:2px;color:var(--text-color-caption);display:inline-block;font-size:var(--font-hint);margin:0 calc(var(--app-pane-padding)/2);padding:2px calc(var(--app-pane-padding)/2)}.process-details .eo-body .process-files .file-item{align-items:center;background-color:var(--color-white);border-left:calc(var(--app-pane-padding)/4) solid transparent;cursor:pointer;display:flex;flex-flow:row nowrap;margin-bottom:calc(var(--app-pane-padding)/4);padding:var(--app-pane-padding) var(--app-pane-padding) var(--app-pane-padding) 0}.process-details .eo-body .process-files .file-item>div{flex:1 1 auto}.process-details .eo-body .process-files .file-item>div .title{font-weight:700}.process-details .eo-body .process-files .file-item eo-icon{flex:0 0 auto;margin:0 var(--app-pane-padding)}.process-details .eo-body .process-files .file-item eo-icon.button{box-sizing:border-box;color:var(--text-color-hint);margin:0;padding:0}.process-details .eo-body .process-files .file-item.selected{border-color:var(--color-accent);cursor:default}.process-details .eo-body .content-paste{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;align-items:center;background-color:rgba(var(--color-black-rgb),.06);border-radius:2px;cursor:pointer;display:flex;flex-flow:row nowrap;margin:var(--app-pane-padding) 0;padding:calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/4);transition:all var(--app-default-transition-duration) ease-in-out}.process-details .eo-body .content-paste eo-icon{-moz-transition:none;-o-transition:none;-webkit-transition:none;margin:0 calc(var(--app-pane-padding)/4);transition:none}.process-details .eo-body .content-paste .label{margin:0 calc(var(--app-pane-padding)/4)}.process-details .eo-body .content-paste.disabled{cursor:default;opacity:.5;pointer-events:none}.process-details .eo-body .content-paste:not(.disabled):hover{background-color:var(--color-accent);color:var(--color-white)}.process-details .eo-body .no-files{padding:var(--app-pane-padding)}.process-details__empty{background:var(--color-white-smoke)}"]
+                styles: [".process-details{background-color:var(--panel-background-grey);height:100%;position:relative}.process-details .eo-head{height:calc(var(--app-pane-header-height) - 30px);background-color:var(--color-white)}.process-details .eo-header .avatar{border-radius:50%;-webkit-border-radius:50%;background-repeat:no-repeat;background-position:50%;width:44px;height:44px}.process-details .eo-header-subtitle .starter{display:inline-block;font-size:var(--font-hint);border-radius:2px;background-color:rgba(var(--color-black-rgb),.08);color:var(--text-color-caption);line-height:1em;margin:0 calc(var(--app-pane-padding) / 2);padding:2px calc(var(--app-pane-padding) / 2) 3px calc(var(--app-pane-padding) / 2)}.process-details .eo-header__title{display:flex;flex-direction:column;color:var(--text-color-caption);font-size:var(--font-caption)}.process-details .eo-body{position:absolute;top:calc(var(--app-pane-header-height) - 30px);left:0;right:0;bottom:0}.process-details .eo-body .load-error{position:absolute;left:0;right:0;top:0;bottom:0;background-color:var(--panel-background-grey);z-index:5;display:flex;flex-flow:column;justify-content:center;align-items:center}.process-details .eo-body .load-error eo-icon{width:20%;color:var(--text-color-hint);opacity:.5}.process-details .eo-body .tab-panel{height:100%;display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.process-details .eo-body .tab-panel .panel:not(.process-history){padding:var(--app-pane-padding);display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow-y:auto}.process-details .eo-body .tab-panel .panel.process-history{height:100%}.process-details .eo-body .tab-panel .process-actions{display:flex;flex:none;flex-direction:row;min-height:0;min-width:0;flex-wrap:wrap;justify-content:space-between;padding:0 calc(var(--app-pane-padding) * .75) 0!important}.process-details .eo-body .tab-panel .process-actions button{margin:0 calc(var(--app-pane-padding) * .25)}.process-details .eo-body .tab-panel .process-actions button.ext{position:relative}.process-details .eo-body .tab-panel .process-actions button.ext:after{content:\"\";position:absolute;right:calc(var(--app-pane-padding) / 8);top:calc(var(--app-pane-padding) / 8);height:calc(var(--app-pane-padding) * .5);width:calc(var(--app-pane-padding) * .5);box-sizing:border-box;border-color:rgba(var(--color-white-rgb),.7);border-style:solid;border-width:2px 2px 0 0}.process-details .eo-body .tab-panel .process-actions div.primary{justify-content:flex-end;display:flex;flex:none;flex-direction:row;min-height:0;min-width:0;flex:1 1 auto;padding:var(--app-pane-padding) 0}.process-details .eo-body .tab-panel .process-actions div.secondary{padding:var(--app-pane-padding) 0;display:flex;flex:none;flex-direction:row;min-height:0;min-width:0}.process-details .eo-body .tab-panel .process-actions.disabled{opacity:.5}.process-details .eo-body .tab-panel .process-actions.disabled button{pointer-events:none;cursor:default}.process-details .eo-body .notice{background-color:rgba(var(--color-black-rgb),.06);border-radius:2px;padding:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2);margin-bottom:var(--app-pane-padding)}.process-details .eo-body .notice.pastDue{background-color:var(--color-error);color:var(--color-white)}.process-details .eo-body .indexdata{margin-top:calc(var(--app-pane-padding) / 2)}.process-details .eo-body .process-description{margin-bottom:var(--app-pane-padding)}.process-details .eo-body .process-performer{margin:calc(var(--app-pane-padding) / 4) 0}.process-details .eo-body .process-performer .head{display:flex;flex-flow:row nowrap;align-items:center}.process-details .eo-body .process-performer .head .label{flex:1 1 auto}.process-details .eo-body .process-performer .head .action{border-radius:2px;border:1px solid rgba(var(--color-black-rgb),.1);padding:0 0 0 calc(var(--app-pane-padding) / 2);display:flex;flex-flow:row nowrap;align-items:center;cursor:pointer;overflow:hidden;transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out}.process-details .eo-body .process-performer .head .action .count{line-height:1em;color:var(--text-color-caption)}.process-details .eo-body .process-performer .head .action eo-icon{color:var(--text-color-hint);transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out}.process-details .eo-body .process-performer .head .action:hover{background:rgba(var(--color-black-rgb),.1)}.process-details .eo-body .process-performer .head.performerShow .action eo-icon{transform:rotate(180deg)}.process-details .eo-body .process-performer .body{padding:calc(var(--app-pane-padding) / 2) 0}.process-details .eo-body .process-performer .body .performer{display:flex;flex-flow:row nowrap;align-items:center;border-radius:2px;padding:2px;margin-bottom:2px;background-color:var(--color-white);animation:eoFadeInDown var(--app-default-transition-duration);-webkit-user-select:none;-moz-user-select:none;user-select:none}.process-details .eo-body .process-performer .body .performer .icon-wrap{border-radius:2px;flex:0 0 auto;background-color:var(--color-primary-3);color:var(--color-white);padding:2px}.process-details .eo-body .process-performer .body .performer .name{flex:1 1 auto;padding:0 var(--app-pane-padding)}.process-details .eo-body .process-performer .body .performer .name .qname{display:inline-block;border-radius:2px;background-color:rgba(var(--color-black-rgb),.08);font-size:var(--font-hint);padding:2px calc(var(--app-pane-padding) / 2);margin:0 calc(var(--app-pane-padding) / 2);color:var(--text-color-caption)}.process-details .eo-body .process-files .file-item{background-color:var(--color-white);padding:var(--app-pane-padding) var(--app-pane-padding) var(--app-pane-padding) 0;margin-bottom:calc(var(--app-pane-padding) / 4);display:flex;flex-flow:row nowrap;align-items:center;cursor:pointer;border-left:calc(var(--app-pane-padding) / 4) solid transparent}.process-details .eo-body .process-files .file-item>div{flex:1 1 auto}.process-details .eo-body .process-files .file-item>div .title{font-weight:700}.process-details .eo-body .process-files .file-item eo-icon{flex:0 0 auto;margin:0 var(--app-pane-padding)}.process-details .eo-body .process-files .file-item eo-icon.button{padding:0;box-sizing:border-box;margin:0;color:var(--text-color-hint)}.process-details .eo-body .process-files .file-item.selected{border-color:var(--color-accent);cursor:default}.process-details .eo-body .content-paste{display:flex;flex-flow:row nowrap;align-items:center;cursor:pointer;margin:var(--app-pane-padding) 0;padding:calc(var(--app-pane-padding) / 2) calc(var(--app-pane-padding) / 4);background-color:rgba(var(--color-black-rgb),.06);border-radius:2px;transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out}.process-details .eo-body .content-paste eo-icon{margin:0 calc(var(--app-pane-padding) / 4);transition:none;-webkit-transition:none;-moz-transition:none;-o-transition:none}.process-details .eo-body .content-paste .label{margin:0 calc(var(--app-pane-padding) / 4)}.process-details .eo-body .content-paste.disabled{opacity:.5;pointer-events:none;cursor:default}.process-details .eo-body .content-paste:not(.disabled):hover{background-color:var(--color-accent);color:var(--color-white)}.process-details .eo-body .no-files{padding:var(--app-pane-padding)}.process-details__empty{background:var(--color-white-smoke)}"]
             },] }
 ];
 ProcessDetailsComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/process/history/process-history.component.js

@@ -9,7 +9,7 @@ ProcessHistoryComponent.decorators = [
                 selector: 'eo-process-history',
                 template: "<div class=\"process-history\">\n\n  <div class=\"filter\">\n    <div class=\"input\" [ngClass]=\"{inactive: !history?.length}\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_filter.svg'\"></eo-icon>\n      <input type=\"text\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"filterterm\">\n\n    </div>\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"filterterm = null\" *ngIf=\"filterterm\"></eo-icon>\n  </div>\n\n\n  <ng-template #empty>\n    <eo-error-message [emptyState]=\"{icon: 'ic_no-file.svg', text: 'eo.timeline.empty', className: 'history empty'}\"></eo-error-message>\n  </ng-template>\n\n\n  <div class=\"history eo-timeline\" [ngClass]=\"{single: history?.length === 1}\" *ngIf=\"history?.length; else empty\">\n\n    <div class=\"timeline-entry\"\n         *ngFor=\"let entry of history | historyFilter:filterterm; trackBy: trackByIndex\"\n         [ngClass]=\"{user: entry.editor, error: entry.type === 'error' || entry?.errorType}\">\n\n      <div class=\"when\">\n        <div class=\"date\">{{entry.time | localeDate: 'eoShortDate'}}</div>\n        <div class=\"time\">{{entry.time | localeDate: 'eoShortTime'}}</div>\n      </div>\n      <div class=\"marker\">\n        <img *ngIf=\"entry.editor\"\n             title=\"{{entry.editor.lastname}}, {{entry.editor.firstname}} ({{entry.editor.name}})\"\n             [src]=\"entry.data?.image\">\n      </div>\n      <div class=\"what\">\n        <div class=\"title\">{{entry.title}}</div>\n\n        <div class=\"description\" *ngIf=\"entry.data?.periodFireTime && entry.type === 'DEADLINE_START'; else description\">\n          <div class=\"deadline-fire\">\n            <eo-icon [iconSrc]=\"'assets/_default/svg/ic_timer.svg'\"></eo-icon>\n            <span>{{entry.data.periodFireTime | localeDate}}</span>\n          </div>\n        </div>\n        <ng-template #description>\n          <div *ngIf=\"entry.type !== 'USERDEFINED'; else userDefined\" class=\"description\">\n            {{'eo.process.details.history.entry.type.' + entry.type + '.title'|translate}}\n          </div>\n\n          <ng-template #userDefined>\n            <div class=\"description\">\n              {{entry.description}}\n            </div>\n          </ng-template>\n        </ng-template>\n\n        <div class=\"performer\" *ngIf=\"entry.editor\">\n          <span *ngIf=\"entry.editor.lastname\">{{entry.editor.lastname}}, </span>\n          <span *ngIf=\"entry.editor.firstname\">{{entry.editor.firstname}}</span>\n          ({{entry.editor.name}})\n        </div>\n\n        <div class=\"meta\" *ngIf=\"entry.performer?.length\">\n          <span *ngFor=\"let p of entry.performer; trackBy: trackByIndex\">\n            {{p.label}}\n          </span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n</div>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host .process-history{display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0}:host .history{flex:1 1 auto;overflow-y:auto;padding:var(--app-pane-padding)}:host .filter{background-color:var(--panel-background-lightgrey);border-bottom:1px solid var(--main-background);display:flex;flex:1;flex:0 0 auto;flex-direction:row;justify-content:space-between;min-height:0;min-width:0}:host .filter .input{background-color:var(--color-white);border:1px solid var(--main-background);display:flex;flex-flow:row nowrap;margin:calc(var(--app-pane-padding)/2);padding:2px 2px 2px 0}:host .filter .input.inactive{opacity:.5;pointer-events:none}:host .filter .input input{background-color:transparent;border:0}:host .filter .input eo-icon{margin:0 calc(var(--app-pane-padding)/4)}:host .filter .input eo-icon,:host .filter>eo-icon{align-self:center;color:var(--text-color-hint);height:16px;width:16px}:host .filter>eo-icon{box-sizing:content-box;cursor:pointer;flex:0 0 auto;padding:calc(var(--app-pane-padding)/2)}:host .timeline-entry.user img{border:2px solid var(--text-color-hint);border-radius:50%;height:30px;width:30px;z-index:1}:host .timeline-entry.user .marker:before{display:none}:host .timeline-entry .what{padding-bottom:0;width:66%}:host .timeline-entry .what .deadline-fire{align-items:center;display:flex;padding-bottom:4px}:host .timeline-entry .what .description{color:var(--text-color-body)}.deadline-fire :host .timeline-entry .what .description{align-items:center;display:flex;flex-flow:row nowrap}.deadline-fire :host .timeline-entry .what .description eo-icon{color:var(--text-color-hint);height:18px;width:18px}.deadline-fire :host .timeline-entry .what .description span{padding:0 calc(var(--app-pane-padding)/4)}:host .timeline-entry .what .performer{color:var(--text-color-body);font-size:var(--font-hint);margin-bottom:calc(var(--app-pane-padding)/4)}:host .timeline-entry .what .meta{display:flex;flex-flow:row wrap;margin-bottom:calc(var(--app-pane-padding)/4)}:host .timeline-entry .what .meta span{background-color:rgba(var(--color-black-rgb),.08);border-radius:2px;display:block;font-size:var(--font-caption);margin:0 calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/4) 0;padding:2px 4px}:host .timeline-entry.error .what .title{color:var(--color-error)}:host .timeline-entry.error .marker:before{align-items:center;border-color:var(--color-error);border-width:4px;color:var(--color-error);content:\"!\";display:flex;flex-flow:column;font-weight:var(--font-weight-bold);justify-content:center}"]
+                styles: [":host .process-history{height:100%;display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}:host .history{flex:1 1 auto;overflow-y:auto;padding:var(--app-pane-padding)}:host .filter{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0;flex:0 0 auto;justify-content:space-between;background-color:var(--panel-background-lightgrey);border-bottom:1px solid var(--main-background)}:host .filter .input{display:flex;flex-flow:row nowrap;background-color:var(--color-white);border:1px solid var(--main-background);margin:calc(var(--app-pane-padding) / 2);padding:2px 2px 2px 0}:host .filter .input.inactive{opacity:.5;pointer-events:none}:host .filter .input input{background-color:transparent;border:0}:host .filter .input eo-icon{margin:0 calc(var(--app-pane-padding) / 4)}:host .filter .input eo-icon,:host .filter>eo-icon{align-self:center;width:16px;height:16px;color:var(--text-color-hint)}:host .filter>eo-icon{padding:calc(var(--app-pane-padding) / 2);flex:0 0 auto;box-sizing:content-box;cursor:pointer}:host .timeline-entry.user img{width:30px;height:30px;border:2px solid var(--text-color-hint);z-index:1;border-radius:50%}:host .timeline-entry.user .marker:before{display:none}:host .timeline-entry .what{padding-bottom:0;width:66%}:host .timeline-entry .what .deadline-fire{display:flex;align-items:center;padding-bottom:4px}:host .timeline-entry .what .description{color:var(--text-color-body)}.deadline-fire :host .timeline-entry .what .description{display:flex;flex-flow:row nowrap;align-items:center}.deadline-fire :host .timeline-entry .what .description eo-icon{color:var(--text-color-hint);width:18px;height:18px}.deadline-fire :host .timeline-entry .what .description span{padding:0 calc(var(--app-pane-padding) / 4)}:host .timeline-entry .what .performer{color:var(--text-color-body);font-size:var(--font-hint);margin-bottom:calc(var(--app-pane-padding) / 4)}:host .timeline-entry .what .meta{display:flex;flex-flow:row wrap;margin-bottom:calc(var(--app-pane-padding) / 4)}:host .timeline-entry .what .meta span{display:block;border-radius:2px;padding:2px 4px;font-size:var(--font-caption);background-color:rgba(var(--color-black-rgb),.08);margin:0 calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 4) 0}:host .timeline-entry.error .what .title{color:var(--color-error)}:host .timeline-entry.error .marker:before{border-color:var(--color-error);content:\"!\";display:flex;flex-flow:column;align-items:center;justify-content:center;color:var(--color-error);border-width:4px;font-weight:var(--font-weight-bold)}"]
             },] }
 ];
 ProcessHistoryComponent.propDecorators = {

package/esm2015/app/eo-framework/process/process-file/process-file.component.js

@@ -53,7 +53,7 @@ ProcessFileComponent.decorators = [
                 selector: 'eo-process-file',
                 template: " <div class=\"process-files\" *ngIf=\"processFile.length; else noFile\">\n\n\n  <!-- section for adding new items to the work items attachments -->\n  <div class=\"content-paste\"\n       *ngIf=\"permissions.add && clipboard?.elements.length && !hasAlreadyAllCopiedFiles()\"\n       (click)=\"addFromClipboard()\"\n       [ngClass]=\"{disabled: isDisabled}\"\n  >\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_content_paste.svg'\"></eo-icon>\n    <span class=\"label ct\" translate>eo.process.file.add.label</span>\n  </div>\n\n  <!-- list of files attached to the work item -->\n  <div class=\"file-item\"\n       *ngFor=\"let file of processFile; trackBy: trackByIndex\"\n       [ngClass]=\"{selected: file.id === selectedContentFileId}\"\n       (dblclick)=\"openWorkItemContentInContext(file, $event)\"\n       (click)=\"openWorkItemContent(file)\">\n\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_attachment.svg'\"></eo-icon>\n    <div>\n      <div *ngIf=\"file.title; else tplNoTitle\" class=\"title\">{{file.title}}</div>\n      <ng-template #tplNoTitle>\n        <div class=\"title no-dms-object\" translate>eo.bpm.dmsobject.notavailable</div>\n      </ng-template>\n      <div class=\"description\">{{file.description}}</div>\n    </div>\n    <eo-icon class=\"button\"\n             *ngIf=\"editable && permissions.remove\"\n             [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\"\n             (click)=\"removeWorkItemContent(file, $event)\">\n    </eo-icon>\n  </div>\n\n</div>\n\n<!-- no files attached to the work item -->\n<ng-template #noFile>\n  <div class=\"no-file\">\n    <!-- section for adding new items to the work items attachments -->\n    <div class=\"content-paste\"\n         *ngIf=\"permissions.add && clipboard?.elements.length\"\n         (click)=\"addFromClipboard()\"\n         [ngClass]=\"{disabled: isDisabled}\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_content_paste.svg'\"></eo-icon>\n      <span class=\"label ct\" translate>eo.process.file.add.label</span>\n    </div>\n    <div class=\"eo-error-message-wrapper\">\n      <eo-error-message [emptyState]=\"{icon: 'ic_no-file.svg', text: 'eo.process.file.empty.label', className: 'no-files history empty'}\">\n      </eo-error-message>\n    </div>\n  </div>\n</ng-template>\n\n",
                 animations: [],
-                styles: [":host{height:100%;width:100%}:host .content-paste{-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;align-items:center;background-color:rgba(var(--color-black-rgb),.06);border-radius:2px;cursor:pointer;display:flex;flex:0 0 auto;flex-flow:row nowrap;margin:0 0 var(--app-pane-padding) 0;padding:calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/4);transition:all var(--app-default-transition-duration) ease-in-out}:host .content-paste eo-icon{-moz-transition:none;-o-transition:none;-webkit-transition:none;transition:none}:host .content-paste .label,:host .content-paste eo-icon{margin:0 calc(var(--app-pane-padding)/4)}:host .content-paste.disabled{cursor:default;opacity:.5;pointer-events:none}:host .content-paste:not(.disabled):hover{background-color:var(--color-accent);color:var(--color-white)}.process-files{display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0}.process-files .file-item{-webkit-animation:eoFadeIn .5s;align-items:center;animation:eoFadeIn .5s;background-color:var(--color-white);border-left:calc(var(--app-pane-padding)/4) solid transparent;cursor:pointer;display:flex;flex:0 0 auto;flex-flow:row nowrap;margin-bottom:calc(var(--app-pane-padding)/4);padding:var(--app-pane-padding) var(--app-pane-padding) var(--app-pane-padding) 0}.process-files .file-item>div{flex:1 1 auto}.process-files .file-item>div .title{font-weight:700}.process-files .file-item eo-icon{flex:0 0 auto;margin:0 var(--app-pane-padding)}.process-files .file-item eo-icon.button{box-sizing:border-box;color:var(--text-color-hint);margin:0;padding:0}.process-files .file-item.selected{border-color:var(--color-accent);cursor:default}.no-file{height:100%}.no-file .eo-error-message-wrapper{bottom:0;left:0;position:absolute;right:0;top:56px}.no-dms-object{color:var(--color-error)}"]
+                styles: [":host{width:100%;height:100%}:host .content-paste{display:flex;flex:0 0 auto;flex-flow:row nowrap;align-items:center;cursor:pointer;margin:0 0 var(--app-pane-padding) 0;padding:calc(var(--app-pane-padding) / 2) calc(var(--app-pane-padding) / 4);background-color:rgba(var(--color-black-rgb),.06);border-radius:2px;transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out}:host .content-paste eo-icon{transition:none;-webkit-transition:none;-moz-transition:none;-o-transition:none}:host .content-paste .label,:host .content-paste eo-icon{margin:0 calc(var(--app-pane-padding) / 4)}:host .content-paste.disabled{opacity:.5;pointer-events:none;cursor:default}:host .content-paste:not(.disabled):hover{background-color:var(--color-accent);color:var(--color-white)}.process-files{height:100%;display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.process-files .file-item{flex:0 0 auto;background-color:var(--color-white);padding:var(--app-pane-padding) var(--app-pane-padding) var(--app-pane-padding) 0;margin-bottom:calc(var(--app-pane-padding) / 4);display:flex;flex-flow:row nowrap;align-items:center;cursor:pointer;animation:eoFadeIn .5s;border-left:calc(var(--app-pane-padding) / 4) solid transparent}.process-files .file-item>div{flex:1 1 auto}.process-files .file-item>div .title{font-weight:700}.process-files .file-item eo-icon{flex:0 0 auto;margin:0 var(--app-pane-padding)}.process-files .file-item eo-icon.button{padding:0;box-sizing:border-box;margin:0;color:var(--text-color-hint)}.process-files .file-item.selected{border-color:var(--color-accent);cursor:default}.no-file{height:100%}.no-file .eo-error-message-wrapper{position:absolute;top:56px;bottom:0;left:0;right:0}.no-dms-object{color:var(--color-error)}"]
             },] }
 ];
 ProcessFileComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/process-form/process-form.component.js

@@ -27,7 +27,7 @@ ProcessFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-process-form',
                 template: "<section class=\"process-form form-container\">\n\n  <div class=\"form\">\n    <eo-object-form [formOptions]=\"formOptions\" #bpmForm\n                    (statusChanged)=\"onIndexDataChanged($event)\">\n    </eo-object-form>\n  </div>\n\n  <div class=\"actions\">\n    <div *ngIf=\"form?.invalid\" class=\"invalid\" translate>eo.object.indexdata.form.invalid</div>\n    <eo-cta [active]=\"true\">\n      <button *ngIf=\"form?.dirty\" (click)=\"bpmForm.resetForm()\" class=\"button-reset\" translate>eo.object.indexdata.reset</button>\n      <button (click)=\"cancel()\" class=\"button-cancel\" translate>eo.resubmission.cancel</button>\n      <button (click)=\"saveForm()\" [disabled]=\"form?.invalid\" class=\"primary\" translate>eo.executable.processes.execute</button>\n    </eo-cta>\n  </div>\n\n</section>\n",
-                styles: [":host,:host .process-form{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}:host .process-form .form{overflow:auto}:host .process-form .invalid{color:var(--color-error)}:host .process-form .actions{align-items:center;display:flex;flex:0;flex-direction:row;justify-content:flex-end;margin:0 var(--app-pane-padding) var(--app-pane-padding);min-height:0;min-height:3em;min-width:0}:host .process-form .actions button{white-space:nowrap}:host .process-form .actions eo-cta{display:flex;justify-content:flex-end}:host .process-form .actions eo-cta button:nth-child(odd){margin:0 5px}@media (max-width:800px){:host .process-form .actions{align-items:flex-end;flex-direction:column}}"]
+                styles: [":host,:host .process-form{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}:host .process-form .form{overflow:auto}:host .process-form .invalid{color:var(--color-error)}:host .process-form .actions{display:flex;flex:0;flex-direction:row;min-height:0;min-width:0;align-items:center;justify-content:flex-end;margin:0 var(--app-pane-padding) var(--app-pane-padding);min-height:3em}:host .process-form .actions button{white-space:nowrap}:host .process-form .actions eo-cta{display:flex;justify-content:flex-end}:host .process-form .actions eo-cta button:nth-child(odd){margin:0 5px}@media (max-width:800px){:host .process-form .actions{flex-direction:column;align-items:flex-end}}"]
             },] }
 ];
 ProcessFormComponent.propDecorators = {

package/esm2015/app/eo-framework/quick-search/quick-search/quick-search.component.js

@@ -187,7 +187,7 @@ QuickSearchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-quick-search',
                 template: "<div class=\"quick-search\" eoRtlAware>\n\n  <form class=\"search-box\" (ngSubmit)=\"executeSearch()\"\n        [ngClass]=\"{invalid: invalidTerm}\"\n        [formGroup]=\"searchForm\">\n\n    <eo-icon (click)=\"executeSearch()\" [iconSrc]=\"'assets/_default/svg/ic_search.svg'\"></eo-icon>\n    <div class=\"input\">\n      <label>{{'eo.quicksearch.label' | translate}}</label>\n      <input autofocus=\"autofocus\" formControlName=\"searchInput\">\n    </div>\n    <eo-loading-spinner *ngIf=\"loading\" [size]=\"'small'\"></eo-loading-spinner>\n    <eo-icon class=\"small\" [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" [iconTitle]=\"('eo.search.clear.search' | translate)\"\n    *ngIf=\"query.term\" [ngClass]=\"{active: query.term}\" (click)=\"setTerm()\"></eo-icon>\n    <eo-icon class=\"small\" [iconSrc]=\"'assets/_default/svg/ic_refresh.svg'\" [iconTitle]=\"('eo.search.result.term' | translate) + ' : &quot;' + lastTerm + '&quot;'\"\n    *ngIf=\"lastTerm && !query.term\" (click)=\"setTerm(lastTerm)\"></eo-icon>\n\n    <div class=\"count\" *ngIf=\"showResults && !queryState.isEmpty\">\n      <span class=\"count-total\">{{queryState.totalCount | localeDecimal}}</span><span translate>eo.quicksearch.hits</span>\n    </div>\n  </form>\n\n  <div class=\"result\" *ngIf=\"showResults && !queryState.isEmpty\">\n    <div class=\"r\"><div class=\"ri\">\n      <div class=\"group\" *ngFor=\"let key of resultGroups | keys; index as i\">\n        <h2 *ngIf=\"key !== '0'; else maingroup\">{{key}}</h2>\n        <ng-template #maingroup>\n          <h2 translate>eo.quicksearch.result.group.global</h2>\n        </ng-template>\n\n        <div class=\"type\" *ngFor=\"let type of resultGroups[key]\" (click)=\"executeSearch(type.data)\" [ngClass]=\"{selected: selected.name === type.data.name}\">\n          <span class=\"count\">{{type.count}}</span>\n          <span class=\"label\">{{type.label}}</span>\n        </div>\n      </div></div>\n      </div>\n  </div>\n</div>\n",
-                styles: [".quick-search{--quick-search-icon-size:40px;display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0}.quick-search .search-box{-webkit-box-shadow:0 2px 5px 0 rgba(var(--color-black-rgb),.26);align-items:center;background:rgba(var(--color-white-rgb),.9);border-radius:2px;box-shadow:0 2px 5px 0 rgba(var(--color-black-rgb),.26);display:flex;flex:0 0 auto;flex-flow:row nowrap;position:relative}.quick-search .search-box.invalid .input input{color:var(--color-error)}.quick-search .search-box eo-icon{cursor:pointer;flex:0 0 auto;height:var(--quick-search-icon-size);margin:0 var(--app-pane-padding);opacity:.2;width:var(--quick-search-icon-size)}.quick-search .search-box eo-icon.small{box-sizing:border-box;padding:calc(var(--app-pane-padding)/2)}.quick-search .search-box eo-icon:hover{color:var(--color-accent);opacity:1}.quick-search .search-box eo-loading-spinner{margin:0 var(--app-pane-padding);position:absolute;right:calc(var(--app-pane-padding)*2)}.quick-search .search-box .count{align-items:baseline;bottom:0;color:var(--color-black);display:flex;font-size:var(--font-display);opacity:.3;position:absolute;right:0}.quick-search .search-box .count .count-label{font-size:var(--font-body);font-weight:var(--font-weight-bold);padding:4px}.quick-search .search-box .input{align-items:stretch;display:flex;flex:1 1 auto;flex-flow:column}.quick-search .search-box .input label{color:rgba(var(--color-black-rgb),.5)}.quick-search .search-box .input input{background:transparent;border:0;color:var(--color-black);font-size:var(--font-display);margin:4px 0;width:100%}.quick-search .search-box .input input::-ms-clear{display:none}.quick-search .result{flex:1 1 auto;height:100%;margin-top:var(--app-pane-padding);position:relative}.quick-search .result .r{bottom:0;left:0;position:absolute;right:0;top:0}.quick-search .result .r .ri{max-height:100%;overflow-y:auto}.quick-search .result .group{-webkit-animation:eoFadeIn var(--app-default-transition-duration);-webkit-animation-fill-mode:forwards;animation:eoFadeIn var(--app-default-transition-duration);animation-fill-mode:forwards;background:rgba(var(--color-white-rgb),.7);border-radius:2px;margin:0 var(--app-pane-padding) var(--app-pane-padding) var(--app-pane-padding);opacity:0;padding:calc(var(--app-pane-padding)/2)}.quick-search .result .group h2{font-size:var(--font-subhead);font-weight:var(--font-weight-medium);margin:0 0 var(--app-pane-padding) 0;opacity:.7;padding:0}.quick-search .result .group:last-child{margin-bottom:0}.quick-search .result .type{cursor:pointer;margin-bottom:2px}.quick-search .result .type 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;transition:all var(--app-default-transition-duration) ease-in-out}.quick-search .result .type span.count{background:rgba(var(--color-black-rgb),.2);border-radius:2px;color:var(--color-white);display:inline-block;margin-right:calc(var(--app-pane-padding)/2);padding:0 calc(var(--app-pane-padding)/4);text-align:right;width:4em}.quick-search .result .type.selected,.quick-search .result .type:hover{color:var(--color-accent)}.quick-search .result .type.selected span.count,.quick-search .result .type:hover span.count{background:var(--color-accent)}.quick-search.rtl .result{padding-left:0;padding-right:calc(var(--quick-search-icon-size) + var(--app-pane-padding))}.quick-search.rtl .result .type span.count{margin-left:calc(var(--app-pane-padding)/2);margin-right:auto;text-align:left}.quick-search.rtl .search-box .count{left:0;right:auto}"]
+                styles: [".quick-search{--quick-search-icon-size:40px;height:100%;display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.quick-search .search-box{display:flex;flex:0 0 auto;flex-flow:row nowrap;border-radius:2px;align-items:center;position:relative;background:rgba(var(--color-white-rgb),.9);box-shadow:0 2px 5px 0 rgba(var(--color-black-rgb),.26);-webkit-box-shadow:0 2px 5px 0 rgba(var(--color-black-rgb),.26)}.quick-search .search-box.invalid .input input{color:var(--color-error)}.quick-search .search-box eo-icon{flex:0 0 auto;width:var(--quick-search-icon-size);height:var(--quick-search-icon-size);opacity:.2;margin:0 var(--app-pane-padding);cursor:pointer}.quick-search .search-box eo-icon.small{padding:calc(var(--app-pane-padding) / 2);box-sizing:border-box}.quick-search .search-box eo-icon:hover{color:var(--color-accent);opacity:1}.quick-search .search-box eo-loading-spinner{position:absolute;right:calc(var(--app-pane-padding) * 2);margin:0 var(--app-pane-padding)}.quick-search .search-box .count{font-size:var(--font-display);position:absolute;right:0;bottom:0;color:var(--color-black);opacity:.3;display:flex;align-items:baseline}.quick-search .search-box .count .count-label{font-size:var(--font-body);font-weight:var(--font-weight-bold);padding:4px}.quick-search .search-box .input{flex:1 1 auto;display:flex;flex-flow:column;align-items:stretch}.quick-search .search-box .input label{color:rgba(var(--color-black-rgb),.5)}.quick-search .search-box .input input{border:0;font-size:var(--font-display);background:transparent;margin:4px 0;width:100%;color:var(--color-black)}.quick-search .search-box .input input::-ms-clear{display:none}.quick-search .result{flex:1 1 auto;position:relative;height:100%;margin-top:var(--app-pane-padding)}.quick-search .result .r{position:absolute;left:0;top:0;right:0;bottom:0}.quick-search .result .r .ri{max-height:100%;overflow-y:auto}.quick-search .result .group{opacity:0;animation:eoFadeIn var(--app-default-transition-duration);animation-fill-mode:forwards;background:rgba(var(--color-white-rgb),.7);padding:calc(var(--app-pane-padding) / 2);border-radius:2px;margin:0 var(--app-pane-padding) var(--app-pane-padding) var(--app-pane-padding)}.quick-search .result .group h2{margin:0 0 var(--app-pane-padding) 0;padding:0;font-size:var(--font-subhead);font-weight:var(--font-weight-medium);opacity:.7}.quick-search .result .group:last-child{margin-bottom:0}.quick-search .result .type{margin-bottom:2px;cursor:pointer}.quick-search .result .type span{transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out}.quick-search .result .type span.count{border-radius:2px;padding:0 calc(var(--app-pane-padding) / 4);background:rgba(var(--color-black-rgb),.2);color:var(--color-white);width:4em;display:inline-block;text-align:right;margin-right:calc(var(--app-pane-padding) / 2)}.quick-search .result .type.selected,.quick-search .result .type:hover{color:var(--color-accent)}.quick-search .result .type.selected span.count,.quick-search .result .type:hover span.count{background:var(--color-accent)}.quick-search.rtl .result{padding-left:0;padding-right:calc(var(--quick-search-icon-size) + var(--app-pane-padding))}.quick-search.rtl .result .type span.count{margin-right:auto;margin-left:calc(var(--app-pane-padding) / 2);text-align:left}.quick-search.rtl .search-box .count{right:auto;left:0}"]
             },] }
 ];
 QuickSearchComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/result-list/result-list.component.js

@@ -228,7 +228,7 @@ ResultListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-result-list',
                 template: "<div class=\"loader-overlay__mask\" *ngIf=\"showLoader\">\n  <eo-loading-spinner class=\"result-list__loader\" [size]=\"'medium'\"></eo-loading-spinner>\n</div>\n<eo-column-configurator *ngIf=\"visibleConfig\" [visible]=\"visibleConfig\"\n                        [configType]=\"configType\" [configContext]=\"configContext\" [eoGrid]=\"grid\"\n                        (onConfigChanged)=\"visibleConfig = false; onConfigChanged($event)\" ></eo-column-configurator>\n\n<eo-list-container #eoList [applySelection]=\"{}\" [loading]=\"false\" [parseDmsParams]=\"parseDmsParams\">\n  <div class=\"eo-header\">\n    <eo-icon class=\"eo-header-icon\" *ngIf=\"hasIcon\" [iconSrc]=\"'assets/_default/svg/ic_search.svg'\"></eo-icon>\n    <div class=\"eo-header-info\">\n      <div class=\"eo-header-title\">{{title || ('eo.search.title' | translate)}}</div>\n      <div class=\"eo-header-subtitle\">\n        <span class=\"eo-header-subtitle__label\" *ngIf=\"query?.types.length === 1\">{{query.types[0].label}}</span>\n        <span *ngIf=\"query?.contextFolderTypes.length === 1\" translate\n              [translateParams]=\"{type: query.contextFolderTypes[0].label}\">eo.search.objecttype.form.context</span>\n        <span class=\"term\" *ngIf=\"query?.term && !clearAfterExecute\">{{'eo.search.result.term' | translate}} : \"{{query.term}}\"</span>\n        <div class=\"suggest\" *ngIf=\"searchResult?.suggests\">{{'eo.search.suggest' | translate}}<a href=\"javascript:void(0)\" (click)=\"executeSuggestSearch()\">{{searchResult.suggests[0]}}</a> ?\n        </div>\n      </div>\n    </div>\n    <div class=\"eo-header-actions\">\n      <eo-icon class=\"button refresh-button\" [iconSrc]=\"'assets/_default/svg/ic_refresh.svg'\" (click)=\"refreshGrid()\"\n               [iconTitle]=\"('eo.list.refresh' | translate)\"></eo-icon>\n      <eo-icon class=\"button export-button\" [hidden]=\"!query\" [iconSrc]=\"'assets/_default/svg/ic_content-download.svg'\" [iconTitle]=\"('eo.resultlist.export.csv' | translate)\"\n               (click)=\"exportCSV()\" *ngIf=\"!csvLoadingSpinnerVisibility\"></eo-icon>\n      <eo-loading-spinner [size]=\"'small'\" *ngIf=\"csvLoadingSpinnerVisibility\" class=\"spinner\"></eo-loading-spinner>\n      <eo-icon class=\"button config-button\" [iconSrc]=\"'assets/_default/svg/ic_settings.svg'\" [iconTitle]=\"('eo.column.config.title' | translate)\"\n               (click)=\"visibleConfig = !visibleConfig\"></eo-icon>\n      <eo-icon class=\"button actions-button\" (click)=\"eoList.showActions()\" [iconTitle]=\"('eo.object.actions.title' | translate)\"\n               [iconSrc]=\"'assets/_default/svg/ic_more.svg'\" *ngIf=\"!reference\"></eo-icon>\n    </div>\n  </div>\n  <div class=\"eo-body\">\n    <eo-grid #eoGrid [gridOptions]=\"resultGridOptions\" *ngIf=\"hasGridOptions; else error\"\n             [showFooter]=\"true\" (eoGridColumnResized)=\"onColumnResized($event)\" [selectFirst]=\"selectFirst\"\n             (eoGridCountChanged)=\"eoList.onCountChanged($event);onCountChanged.emit($event);\"\n             (eoGridContextMenuClick)=\"eoList.onContextMenu($event);onContextMenu.emit($event)\"\n             (eoGridSelectionChanged)=\"eoList.onSelectionChanged($event);onSelectionChanged.emit($event)\"\n             (eoGridDoubleClick)=\"eoList.onDoubleClick($event);onDoubleClick.emit($event)\"\n             (eoGridFocusChanged)=\"eoList.onFocusChanged($event);onFocusChanged.emit($event)\">\n\n      <div class=\"footer\">\n        <eo-total-count [gridCount]=\"eoList.gridCount\" [outsideGrid]=\"false\" class=\"flex-row\"></eo-total-count>\n        <!--<eo-quick-filter [eoGrid]=\"eoGrid\"></eo-quick-filter>-->\n        <eo-pagination [settings]=\"settings\" (pageChanged)=\"onPageChanged($event)\"></eo-pagination>\n      </div>\n\n      <div class=\"empty\">\n        <eo-error-message [emptyState]=\"{text: emptyMessage || 'eo.search.result.expired'}\"></eo-error-message>\n      </div>\n    </eo-grid>\n  </div>\n  <ng-template #error>\n\n    <eo-error-message *ngIf=\"hasGridOptions\" [emptyState]=\"{text:'eo.search.mode.expert.result.empty'}\">\n    </eo-error-message>\n\n  </ng-template>\n</eo-list-container>\n",
-                styles: [":host{background:var(--panel-background);display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0}:host .spinner{padding:calc(var(--app-pane-padding)/4)}:host .result-head{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0}:host .result-head .header-info{flex:1}:host .result-head .header-info .header-sub-title .term{margin:0 var(--app-pane-padding)}:host .result-head .header-info .header-title{-moz-user-select:none;-webkit-user-select:none;font-size:20px;padding-bottom:calc(var(--app-pane-padding)/4);user-select:none}:host .result-head .header-info .status{display:flex}:host .result-head .header-info .status .term{flex:1}:host .result-head .actions eo-icon{cursor:pointer;padding:calc(var(--app-pane-padding)/4)}:host .loader-overlay__mask{-webkit-animation:eoFadeIn .5s;animation:eoFadeIn .5s;background:rgba(var(--color-white-rgb),.8);display:flex;height:100%;position:absolute;width:100%;z-index:11}:host .loader-overlay__mask .result-list__loader{margin:auto}"]
+                styles: [":host{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;background:var(--panel-background);height:100%}:host .spinner{padding:calc(var(--app-pane-padding) / 4)}:host .result-head{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0}:host .result-head .header-info{flex:1}:host .result-head .header-info .header-sub-title .term{margin:0 var(--app-pane-padding)}:host .result-head .header-info .header-title{padding-bottom:calc(var(--app-pane-padding) / 4);font-size:20px;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host .result-head .header-info .status{display:flex}:host .result-head .header-info .status .term{flex:1}:host .result-head .actions eo-icon{padding:calc(var(--app-pane-padding) / 4);cursor:pointer}:host .loader-overlay__mask{display:flex;width:100%;height:100%;z-index:11;position:absolute;background:rgba(var(--color-white-rgb),.8);animation:eoFadeIn .5s}:host .loader-overlay__mask .result-list__loader{margin:auto}"]
             },] }
 ];
 ResultListComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/settings/change-password/change-password-form/change-password-form.component.js

@@ -110,7 +110,7 @@ ChangePasswordFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-change-password-form',
                 template: "<section class=\"change-password\">\n  <form #changePasswordFormElement [formGroup]=\"changePasswordForm\" (ngSubmit)=\"onSubmit()\" autocomplete=\"off\">\n    <div class=\"form-item\">\n\n      <eo-form-input [label]=\"('eo.password.reset.current-password' | translate)\" [required]=\"true\" [invalid]=\"passwordIsNew\">\n        <eo-password [parent]=\"changePasswordForm\"\n                     [element]=\"'currentPassword'\"\n                     [canChangepasswordVisiblety]=\"false\"\n                     [passwordVisible]=\"passwordIsVisible\"\n                     [placeholder]=\"('eo.password.reset.current-password' | translate)\"></eo-password>\n      </eo-form-input>\n\n      <eo-form-input [label]=\"('eo.password.reset.new-password' | translate)\" [required]=\"true\" [invalid]=\"matchingPasswords || passwordIsNew\">\n        <eo-password [parent]=\"changePasswordForm\"\n                     [element]=\"'password'\"\n                     [canChangepasswordVisiblety]=\"false\"\n                     [passwordVisible]=\"passwordIsVisible\"\n                     [placeholder]=\"('eo.password.reset.new-password' | translate)\"></eo-password>\n      </eo-form-input>\n\n      <eo-form-input [label]=\"('eo.password.reset.confirm-password' | translate)\" [required]=\"true\" [invalid]=\"matchingPasswords\">\n        <eo-password [parent]=\"changePasswordForm\"\n                     [element]=\"'confirmPassword'\"\n                     [canChangepasswordVisiblety]=\"false\"\n                     [passwordVisible]=\"passwordIsVisible\"\n                     [placeholder]=\"('eo.password.reset.confirm-password' | translate)\"></eo-password>\n      </eo-form-input>\n\n      <div class=\"invalid error\" *ngIf=\"passwordIsNew\">\n        {{'eo.password.reset.error.same.password' | translate}}\n      </div>\n\n      <div class=\"invalid error\" *ngIf=\"matchingPasswords\">\n        {{'eo.password.reset.error.matiching.password' | translate}}\n      </div>\n\n      <div class=\"invalid error\" translate [translateParams]=\"{amount: passwordValidation.amount}\" *ngIf=\"passwordValidation.type === 'short'\">\n        eo.password.reset.error.new.password.short\n      </div>\n\n      <div class=\"invalid error\" translate [translateParams]=\"{amount: passwordValidation.amount}\" *ngIf=\"passwordValidation.type === 'number'\">\n       eo.password.reset.error.new.password.number\n      </div>\n\n      <div class=\"invalid error\" translate [translateParams]=\"{amount: passwordValidation.amount}\" *ngIf=\"passwordValidation.type === 'specialchars'\">\n       eo.password.reset.error.new.password.specialchars\n      </div>\n\n      <section class=\"change-password__cta\">\n        <button class=\"change-password__submit-button\" type=\"submit\"\n                [disabled]=\"changePasswordForm.invalid || passwordValidation.type !== 'valid'\" translate>eo.password.reset.confirm-button</button>\n\n        <a (click)=\"showPasswords()\">\n          <eo-icon class=\"change-password__icon-show\"\n                   [iconSrc]=\"'assets/_default/svg/ic_eye.svg'\"\n                   [iconTitle]=\"('eo.password.reset.toogle.icon' | translate)\"\n                   [ngClass]=\"{'visible': passwordIsVisible}\"></eo-icon>\n        </a>\n      </section>\n    </div>\n  </form>\n\n</section>\n",
-                styles: [".change-password .invalid.error{color:var(--color-error);padding:5px 0}.change-password__cta{align-items:center;display:flex;margin-top:10px}.change-password__submit-button{margin-right:10px}.change-password__icon-show{color:var(--color-primary-4)}.change-password__icon-show.visible{color:var(--color-primary-3)}"]
+                styles: [".change-password .invalid.error{color:var(--color-error);padding:5px 0}.change-password__cta{margin-top:10px;display:flex;align-items:center}.change-password__submit-button{margin-right:10px}.change-password__icon-show{color:var(--color-primary-4)}.change-password__icon-show.visible{color:var(--color-primary-3)}"]
             },] }
 ];
 ChangePasswordFormComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/settings/permissions/permissions.component.js

@@ -8,7 +8,7 @@ PermissionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-permissions',
                 template: "<div class=\"role\" *ngFor=\"let role of roles\">\n  <eo-icon [iconSrc]=\"'assets/_default/svg/ic_shield.svg'\"></eo-icon>\n  <div>\n    <div class=\"name\">{{role.name}}</div>\n    <div class=\"description\">{{role.description}}</div>\n  </div>\n</div>\n",
-                styles: [".role{display:flex;flex-flow:row nowrap;margin-bottom:calc(var(--app-pane-padding)/2);word-break:break-all}.role eo-icon{color:var(--text-color-hint);height:18px;width:18px}.role>div{padding:0 calc(var(--app-pane-padding)/2)}.role>div .description{color:var(--text-color-caption);font-size:var(--font-caption)}"]
+                styles: [".role{display:flex;flex-flow:row nowrap;margin-bottom:calc(var(--app-pane-padding) / 2);word-break:break-all}.role eo-icon{width:18px;height:18px;color:var(--text-color-hint)}.role>div{padding:0 calc(var(--app-pane-padding) / 2)}.role>div .description{font-size:var(--font-caption);color:var(--text-color-caption)}"]
             },] }
 ];
 PermissionsComponent.propDecorators = {

package/esm2015/app/eo-framework/shortcuts/global-shortcuts/global-shortcuts-section/global-shortcuts-section.component.js

@@ -47,7 +47,7 @@ GlobalShortcutsSectionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-global-shortcuts-section',
                 template: "<div class=\"gsc-component\" [ngClass]=\"{active: _component.focused}\" tabindex=\"-1\">\n  <h2>{{_component.labelKey ? (_component.labelKey | translate) : _component.label}}</h2>\n  <div class=\"action\" *ngFor=\"let action of _actions; let idx = index\"\n       [ngClass]=\"{active: idx === activeActionIndex, hasshortcut: action.shortcut}\"\n       (click)=\"executeAction(action)\" tabindex=\"-1\">\n    <span class=\"name\">{{action.nameKey ? (action.nameKey | translate) : action.name}}</span>\n    <span class=\"shortcut\">{{action.shortcut && action.shortcut.toString()}}</span>\n  </div>\n</div>\n",
-                styles: ["h2{color:var(--color-white);font-size:var(--font-subhead);font-weight:var(--font-weight-light);line-height:1em;margin:0;padding:0 calc(var(--app-pane-padding)/4) var(--app-pane-padding) calc(var(--app-pane-padding)/4)}.gsc-component{-webkit-animation:eoFadeInUp var(--app-default-transition-duration);animation:eoFadeInUp var(--app-default-transition-duration);margin:calc(var(--app-pane-padding)/4);padding:calc(var(--app-pane-padding)/2)}.gsc-component .action{background:rgba(var(--color-white-rgb),.15);color:var(--color-white);cursor:pointer;display:flex;justify-content:space-between;margin-bottom:2px;padding:4px}.gsc-component .action span{display:inline-block;padding:0 4px}.gsc-component .action span.shortcut{border:1px solid rgba(var(--color-white-rgb),.5);border-radius:2px;display:none;margin:0 calc(var(--app-pane-padding)/4)}.gsc-component .action.active{background:rgba(var(--color-white-rgb),.25)}.gsc-component .action:hover{background:var(--color-accent)}.gsc-component .action.hasshortcut span.shortcut{display:inline-block}.gsc-component.active h2{color:var(--color-accent)}.gsc-component.active .action.active{background:var(--color-accent);color:var(--color-white)}"]
+                styles: ["h2{font-size:var(--font-subhead);line-height:1em;font-weight:var(--font-weight-light);color:var(--color-white);margin:0;padding:0 calc(var(--app-pane-padding) / 4) var(--app-pane-padding) calc(var(--app-pane-padding) / 4)}.gsc-component{padding:calc(var(--app-pane-padding) / 2);margin:calc(var(--app-pane-padding) / 4);animation:eoFadeInUp var(--app-default-transition-duration)}.gsc-component .action{color:var(--color-white);background:rgba(var(--color-white-rgb),.15);padding:4px;display:flex;justify-content:space-between;cursor:pointer;margin-bottom:2px}.gsc-component .action span{display:inline-block;padding:0 4px}.gsc-component .action span.shortcut{display:none;border-radius:2px;border:1px solid rgba(var(--color-white-rgb),.5);margin:0 calc(var(--app-pane-padding) / 4)}.gsc-component .action.active{background:rgba(var(--color-white-rgb),.25)}.gsc-component .action:hover{background:var(--color-accent)}.gsc-component .action.hasshortcut span.shortcut{display:inline-block}.gsc-component.active h2{color:var(--color-accent)}.gsc-component.active .action.active{background:var(--color-accent);color:var(--color-white)}"]
             },] }
 ];
 GlobalShortcutsSectionComponent.ctorParameters = () => [];

package/esm2015/app/eo-framework/shortcuts/global-shortcuts/global-shortcuts.component.js

@@ -114,7 +114,7 @@ GlobalShortcutsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-global-shortcuts',
                 template: "<div class=\"eo-global-shortcuts\" *ngIf=\"shortcutsVisible\" #shortcuts tabindex=\"-1\">\n  <eo-icon class=\"button white close\" [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" [iconTitle]=\"('eo.search.storedquery.close' | translate)\"\n           (click)=\"hideShortcutsPanel()\">\n  </eo-icon>\n  <h1 translate>eo.shortcuts.title</h1>\n  <div class=\"sections\" tabindex=\"-1\">\n    <eo-global-shortcuts-section [component]=\"cmp\"\n                                 [target]=\"target\"\n                                 (onActionExecuted)=\"onActionExecuted($event)\"\n                                 *ngFor=\"let cmp of items\"></eo-global-shortcuts-section>\n  </div>\n</div>\n",
-                styles: [".eo-global-shortcuts{-webkit-animation:eoFadeIn var(--app-default-transition-duration);align-items:center;animation:eoFadeIn var(--app-default-transition-duration);background:rgba(var(--color-black-rgb),.8);bottom:0;display:flex;flex-flow:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:9000}.eo-global-shortcuts h1{-webkit-animation:eoFadeInDown var(--app-default-transition-duration);animation:eoFadeInDown var(--app-default-transition-duration);color:rgba(var(--color-white-rgb),.5);font-size:4em;font-weight:var(--font-weight-light)}.eo-global-shortcuts .sections{display:flex;flex-flow:row wrap}.eo-global-shortcuts .close{height:36px;position:absolute;right:var(--app-pane-padding);top:var(--app-pane-padding);width:36px}"]
+                styles: [".eo-global-shortcuts{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(var(--color-black-rgb),.8);z-index:9000;display:flex;flex-flow:column;align-items:center;justify-content:center;animation:eoFadeIn var(--app-default-transition-duration)}.eo-global-shortcuts h1{font-size:4em;font-weight:var(--font-weight-light);color:rgba(var(--color-white-rgb),.5);animation:eoFadeInDown var(--app-default-transition-duration)}.eo-global-shortcuts .sections{display:flex;flex-flow:row wrap}.eo-global-shortcuts .close{position:absolute;top:var(--app-pane-padding);right:var(--app-pane-padding);width:36px;height:36px}"]
             },] }
 ];
 GlobalShortcutsComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/split/split/split.component.js

@@ -320,7 +320,7 @@ SplitComponent.decorators = [
                 selector: 'eo-split',
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: "<ng-content></ng-content>\n<ng-template ngFor let-area [ngForOf]=\"areas\" let-index=\"index\" let-last=\"last\">\n  <div eoSplitGutter *ngIf=\"last === false && area.component.visible === true && !isLastVisibleArea(area)\"\n                [order]=\"index*2+1\"\n                [style.background-color]=\"gutterColor ? gutterColor : 'transparent'\"\n                [direction]=\"direction\"\n                [size]=\"gutterSize\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"startDragging($event, index*2+1)\"\n                (dblclick)=\"toggleDirection()\"\n                (touchstart)=\"startDragging($event, index*2+1)\"></div>\n</ng-template>\n",
-                styles: [":host{align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}:host.vertical{flex-direction:column}:host.vertical div[eosplitgutter]{width:100%}div[eosplitgutter]{background-position:50%;background-repeat:no-repeat;flex-grow:0;flex-shrink:0}:host ::ng-deep eo-split-area{min-width:0;position:relative;transition:flex-basis .3s}:host ::ng-deep eo-split-area:not(.visible){flex-basis:0!important;flex-grow:0!important;overflow:hidden!important}:host.dragging ::ng-deep eo-split-area:before{bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;z-index:5}:host.notransition ::ng-deep eo-split-area{transition:none!important}:host.vertical ::ng-deep eo-split-area:not(.visible){max-width:0}"]
+                styles: [":host{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;flex-direction:row}:host.vertical{flex-direction:column}:host.vertical div[eosplitgutter]{width:100%}div[eosplitgutter]{flex-grow:0;flex-shrink:0;background-position:50%;background-repeat:no-repeat}:host ::ng-deep eo-split-area{transition:flex-basis .3s;position:relative;min-width:0}:host ::ng-deep eo-split-area:not(.visible){flex-basis:0!important;flex-grow:0!important;overflow:hidden!important}:host.dragging ::ng-deep eo-split-area:before{content:\"\";z-index:5;position:absolute;left:0;right:0;top:0;bottom:0}:host.notransition ::ng-deep eo-split-area{transition:none!important}:host.vertical ::ng-deep eo-split-area:not(.visible){max-width:0}"]
             },] }
 ];
 SplitComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/stored-query/stored-query/stored-query.component.js

@@ -200,7 +200,7 @@ StoredQueryComponent.decorators = [
     { type: Component, args: [{
                 selector: "eo-stored-query",
                 template: "<div *ngIf=\"query\" class=\"eo-stored-query\" [ngClass]=\"{hasForm: queryFormControls?.length > 0}\">\n\n  <div class=\"title\" *ngIf=\"!_formOnly\">{{query.name}}</div>\n  <div class=\"qform\">\n\n    <div class=\"query-form\" [formGroup]=\"queryForm\" *ngIf=\"queryForm\">\n\n      <div class=\"form-field fulltext\" *ngIf=\"fulltextFormControl\">\n        <eo-query-scope-select [selection]=\"queryScope\" (select)=\"setQueryScope($event)\"></eo-query-scope-select>\n        <eo-form-element [element]=\"fulltextFormControl\" [situation]=\"'SEARCH'\"></eo-form-element>\n      </div>\n\n      <div class=\"form-field\" *ngFor=\"let element of queryFormControls\"\n           [ngClass]=\"{sfe: element.controls[element._eoFormControlWrapper.controlName]._eoFormElement.selectedforenrichment}\">\n        <eo-form-element [element]=\"element\" [situation]=\"'SEARCH'\"></eo-form-element>\n      </div>\n    </div>\n\n    <div class=\"actions\">\n      <div class=\"state\">\n        <span class=\"count\">{{query.state?.totalCount | localeDecimal}}</span>\n        <span translate>eo.storedquery.res.count.label</span>\n      </div>\n      <div class=\"buttons\" *ngIf=\"!_formOnly\">\n        <button class=\"secondary\" (click)=\"load()\" translate>eo.storedquery.load</button>\n        <button class=\"primary\" [disabled]=\"(queryForm && queryForm.invalid) || query.state?.isEmpty\"\n                (click)=\"execute()\" translate>eo.storedquery.run</button>\n      </div>\n    </div>\n\n  </div>\n</div>\n",
-                styles: [":host .eo-stored-query{width:100%}:host .eo-stored-query .title{color:var(--color-primary-2);font-size:var(--font-title);margin-bottom:var(--app-pane-padding);padding:calc(var(--app-pane-padding)/8) 0}:host .eo-stored-query ::ng-deep eo-query-scope-select .query-scope .query-scope__button{background-color:rgba(0,0,0,.1);border:0;color:var(--text-color-caption)}:host .eo-stored-query .actions{align-items:center;display:flex;flex-flow:row wrap;margin:0 -2px}:host .eo-stored-query .actions .state{color:var(--text-color-caption);flex:1 1 auto;padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}:host .eo-stored-query .actions .state .count{padding-right:5px}:host .eo-stored-query .actions .buttons{align-items:center;display:flex;flex-flow:row wrap;justify-content:flex-end}:host .eo-stored-query .actions .buttons button{flex:0 0 auto;margin:0 2px 2px}:host .eo-stored-query.hasForm .actions{padding-top:var(--app-pane-padding)}:host.open .eo-stored-query .title{font-weight:var(--font-weight-bold)}:host.open .eo-stored-query .title eo-icon{transform:rotate(180deg)}:host::ng-deep .form-field.sfe .fe-wrapper>label:before{background-color:var(--color-primary-3);border-radius:2px;color:var(--color-white)!important;content:\"*\";display:inline-block;margin:4px;padding:0 2px}"]
+                styles: [":host .eo-stored-query{width:100%}:host .eo-stored-query .title{padding:calc(var(--app-pane-padding) / 8) 0;font-size:var(--font-title);color:var(--color-primary-2);margin-bottom:var(--app-pane-padding)}:host .eo-stored-query ::ng-deep eo-query-scope-select .query-scope .query-scope__button{border:0;color:var(--text-color-caption);background-color:rgba(0,0,0,.1)}:host .eo-stored-query .actions{display:flex;flex-flow:row wrap;align-items:center;margin:0 -2px}:host .eo-stored-query .actions .state{flex:1 1 auto;padding:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2);color:var(--text-color-caption)}:host .eo-stored-query .actions .state .count{padding-right:5px}:host .eo-stored-query .actions .buttons{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-end}:host .eo-stored-query .actions .buttons button{flex:0 0 auto;margin:0 2px 2px}:host .eo-stored-query.hasForm .actions{padding-top:var(--app-pane-padding)}:host.open .eo-stored-query .title{font-weight:var(--font-weight-bold)}:host.open .eo-stored-query .title eo-icon{transform:rotate(180deg)}:host::ng-deep .form-field.sfe .fe-wrapper>label:before{content:\"*\";display:inline-block;padding:0 2px;margin:4px;border-radius:2px;background-color:var(--color-primary-3);color:var(--color-white)!important}"]
             },] }
 ];
 StoredQueryComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/stored-query/stored-query-details/dynamic-property-switch/dynamic-property-switch.component.js

@@ -31,7 +31,7 @@ DynamicPropertySwitchComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-dynamic-property-switch',
                 template: "<eo-icon [ngClass]=\"{active: value}\"\n         [iconSrc]=\"'assets/_default/svg/ic_input.svg'\"\n         (click)=\"toggleValue()\" >\n</eo-icon>\n",
-                styles: [":host{background-color:rgba(var(--color-black-rgb),.06);color:var(--text-color-caption);cursor:pointer;display:block}:host.disabled{background-color:transparent;cursor:default}:host.disabled eo-icon{opacity:.1;pointer-events:none}:host eo-icon{border-radius:2px;opacity:.5;padding:calc(var(--app-pane-padding)/4)}:host eo-icon.active{background-color:var(--color-accent);color:var(--color-white);opacity:1}:host eo-icon:hover{opacity:1}:host-context(.dark){background-color:rgba(var(--color-white-rgb),.1);color:var(--color-white)}"]
+                styles: [":host{display:block;color:var(--text-color-caption);cursor:pointer;background-color:rgba(var(--color-black-rgb),.06)}:host.disabled{background-color:transparent;cursor:default}:host.disabled eo-icon{opacity:.1;pointer-events:none}:host eo-icon{padding:calc(var(--app-pane-padding) / 4);border-radius:2px;opacity:.5}:host eo-icon.active{color:var(--color-white);opacity:1;background-color:var(--color-accent)}:host eo-icon:hover{opacity:1}:host-context(.dark){color:var(--color-white);background-color:rgba(var(--color-white-rgb),.1)}"]
             },] }
 ];
 DynamicPropertySwitchComponent.ctorParameters = () => [];

package/esm2015/app/eo-framework/stored-query/stored-query-details/stored-query-details.component.js

@@ -469,7 +469,7 @@ StoredQueryDetailsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-stored-query-details',
                 template: "<ng-container *ngIf=\"storedQuery\">\n  <div class=\"eo-head\">\n    <header class=\"eo-header\">\n      <eo-icon class=\"eo-header-icon\"\n               [iconSrc]=\"'assets/_default/svg/ic_search.svg'\"\n               [iconTitle]=\"('eo.sidebar.navigation.storedqueries' | translate)\">\n      </eo-icon>\n      <div class=\"eo-header-info\">\n        <h2 class=\"eo-header-title\">{{storedQuery.name}}</h2>\n        <h3 class=\"eo-header-subtitle\" translate>eo.search.title.storedqueries</h3>\n      </div>\n    </header>\n  </div>\n\n  <div class=\"eo-body\">\n\n    <div class=\"form\">\n\n      <ng-template #queryForm>\n        <eo-stored-query [query]=\"storedQuery\" [formOnly]=\"true\" #storedQueryForm\n                         (onQueryLoaded)=\"onStoredQueryLoaded()\"\n                         (onQueryExecute)=\"onStoredQueryExecute($event)\"></eo-stored-query>\n      </ng-template>\n\n      <form class=\"edit-form\" [formGroup]=\"editForm.form\" *ngIf=\"editForm.form; else queryForm\">\n\n        <div class=\"context dark\">\n\n          <!-- title and fulltext term fields -->\n          <eo-form-input class=\"title\">\n            <input type=\"text\" name=\"storedQueryTitle\" maxlength=\"64\" autofocus=\"autofocus\" [formControlName]=\"'storedQueryTitle'\"/>\n          </eo-form-input>\n\n          <eo-query-scope-select [selection]=\"queryScope\" (select)=\"setQueryScope($event)\"></eo-query-scope-select>\n          <div class=\"form-field\">\n            <eo-form-element [skipToggle]=\"true\" [element]=\"editForm.fulltextFormControl\" [situation]=\"'SEARCH'\"></eo-form-element>\n            <eo-dynamic-property-switch [parentFormControl]=\"editForm.fulltextFormControl\"\n                                        (onPropertyChanged)=\"parameterChanged($event)\"></eo-dynamic-property-switch>\n          </div>\n\n          <!-- context type form controls -->\n          <h3>{{storedQuery.contextFolderTypes[0]?.label}}</h3>\n          <div class=\"form-field\" *ngFor=\"let ctxElement of editForm.contextControls; trackBy: trackByQName\">\n            <eo-form-element [element]=\"ctxElement\" [situation]=\"'SEARCH'\"></eo-form-element>\n            <eo-dynamic-property-switch [parentFormControl]=\"ctxElement\" (onPropertyChanged)=\"parameterChanged($event)\"></eo-dynamic-property-switch>\n          </div>\n        </div>\n\n        <!-- object type form controls -->\n        <div class=\"form-fields\" [ngClass]=\"{empty: !editForm.controls?.length}\">\n          <div class=\"form-field\" *ngFor=\"let element of editForm.controls; trackBy: trackByQName\">\n            <eo-form-element [element]=\"element\" [situation]=\"'SEARCH'\"></eo-form-element>\n            <eo-dynamic-property-switch [parentFormControl]=\"element\" (onPropertyChanged)=\"parameterChanged($event)\"></eo-dynamic-property-switch>\n          </div>\n        </div>\n      </form>\n    </div>\n\n    <aside class=\"aside\" *ngIf=\"!isNewQuery\">\n\n      <!-- favorite and share -->\n      <div class=\"meta-actions\">\n\n        <ng-container *ngIf=\"isOwnQuery; else sharedWithMe\">\n          <eo-icon class=\"button btn-share\" [iconSrc]=\"'assets/_default/svg/ic_share.svg'\" *ngIf=\"enableSharing\"\n                   [ngClass]=\"{active: storedQuery.shared || storedQuery.roles.length, editing: editingShare}\"\n                   (click)=\"toggleShareEdit()\"\n                   [iconTitle]=\"iconTitles.share\"></eo-icon>\n\n          <eo-icon class=\"button btn-fav\" [iconSrc]=\"'assets/_default/svg/ic_favorite.svg'\"\n                   [ngClass]=\"{active: storedQuery.favorite}\"\n                   (click)=\"toggleFavoriteState()\"\n                   [iconTitle]=\"iconTitles.favor\"></eo-icon>\n        </ng-container>\n\n        <ng-template #sharedWithMe>\n          <eo-icon class=\"sharedWithMe\" [iconSrc]=\"'assets/_default/svg/ic_share.svg'\" [iconTitle]=\"iconTitles.shared\"></eo-icon>\n          <eo-icon class=\"sharedWithMe\" [iconSrc]=\"'assets/_default/svg/ic_favorite.svg'\" [iconTitle]=\"iconTitles.favored\"></eo-icon>\n        </ng-template>\n\n      </div>\n\n      <!-- roles that share this query -->\n      <div class=\"meta-roles\" [ngClass]=\"{dark: editingShare, empty: !storedQuery.roles?.length}\">\n\n        <div class=\"label\" translate>eo.storedquery.share.sharedwith</div>\n        <div class=\"form-field\" *ngIf=\"rolesPicker?.codesystem?.entries\">\n          <eo-codesystem [pickerTitle]=\"rolesPicker.title\"\n                         [codesystem]=\"rolesPicker.codesystem\"\n                         [multiselect]=\"true\"\n                         [readonly]=\"!editingShare\"\n                         [inputStyleClass]=\"'stored-query__share'\"\n                         [(ngModel)]=\"rolesPicker.value\"></eo-codesystem>\n        </div>\n\n        <div class=\"share-actions\" *ngIf=\"editingShare\">\n          <button class=\"secondary\" (click)=\"cancelShare()\" translate>eo.storedquery.share.cancel</button>\n          <button class=\"primary\" (click)=\"share()\" translate>eo.storedquery.share.ok</button>\n        </div>\n      </div>\n\n      <!-- queries meta info like baseparam settings -->\n      <div class=\"meta-data\" *ngIf=\"restrictions?.length\">\n        <div class=\"restriction\" *ngFor=\"let restriction of restrictions; trackBy: trackByIndex\">\n          <div class=\"label\">{{restriction.label}}</div>\n          <div class=\"items\">\n            <div *ngFor=\"let item of restriction.items; trackBy: trackByIndex\">{{item}}</div>\n          </div>\n        </div>\n      </div>\n\n    </aside>\n\n  </div>\n\n  <div class=\"actions\">\n    <ng-container *ngIf=\"!editForm.form; else actionEdit\">\n      <button class=\"secondary btn-delete\" (click)=\"delete()\" [disabled]=\"!isOwnQuery\" translate>eo.storedquery.action.delete</button>\n      <button class=\"secondary btn-open\" (click)=\"setQueryToAppSearch()\" translate>eo.storedquery.load</button>\n      <button class=\"primary grey btn-edit\" (click)=\"edit()\" [disabled]=\"!isOwnQuery\" translate>eo.storedquery.action.edit</button>\n      <button class=\"primary btn-search\" [disabled]=\"storedQuery.state?.isEmpty\" (click)=\"executeQuery()\" translate>eo.storedquery.run</button>\n    </ng-container>\n\n    <ng-template #actionEdit>\n      <!-- action while editing the query form -->\n      <button class=\"secondary btn-cancel\" (click)=\"cancelEdit()\" translate>eo.storedquery.action.cancel</button>\n      <button class=\"primary btn-save\" (click)=\"updateStoredQuery()\" [disabled]=\"editForm.form.invalid\" translate>eo.storedquery.action.save</button>\n    </ng-template>\n  </div>\n\n</ng-container>\n",
-                styles: [":host{--stored-query-aside-width:300px;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{background-color:var(--color-white);border-bottom:1px solid var(--panel-header-border-bottom-color)}:host .eo-body{overflow-y:hidden}:host .eo-body .form{overflow-y:auto;padding:var(--app-pane-padding);padding-right:calc(var(--stored-query-aside-width) + var(--app-pane-padding)*2)}:host .eo-body .form eo-stored-query{background-color:var(--color-white);padding:var(--app-pane-padding)}:host .eo-body .aside{background-color:rgba(var(--color-black-rgb),.02);border:1px solid rgba(var(--color-black-rgb),.1);box-sizing:border-box;padding:var(--app-pane-padding);position:absolute;right:var(--app-pane-padding);top:var(--app-pane-padding);width:var(--stored-query-aside-width)}:host .eo-body .aside .meta-actions{display:flex;justify-content:flex-end;margin:0 -2px}:host .eo-body .aside .meta-actions eo-icon{color:var(--text-color-hint);margin:0 2px;padding:4px}:host .eo-body .aside .meta-actions eo-icon.active{color:var(--color-favorite)}:host .eo-body .aside .meta-actions eo-icon.editing{background-color:var(--color-primary-2);border-radius:2px 2px 0 0;color:var(--color-white)}:host .eo-body .aside .meta-actions eo-icon.sharedWithMe{background-color:var(--text-color-hint);border-radius:2px;color:var(--color-white)}:host .eo-body .aside .meta-roles.dark{background-color:var(--color-primary-2);border-radius:2px;color:var(--color-white);margin-bottom:var(--app-pane-padding);padding:calc(var(--app-pane-padding)/2)}:host .eo-body .aside .meta-roles.dark .actions{display:flex}:host .eo-body .aside .meta-roles.dark .label{display:none}:host .eo-body .aside .meta-roles.dark .form-field,:host .eo-body .aside .meta-roles .form-field{background-color:rgba(var(--color-white-rgb),.2)}:host .eo-body .aside .meta-roles .form-field{border:1px solid rgba(var(--color-black-rgb),.1);margin-bottom:calc(var(--app-pane-padding)/2);padding:2px 2px 4px 4px}:host .eo-body .aside .meta-roles .label{color:var(--text-color-caption);font-style:italic;margin-bottom:calc(var(--app-pane-padding)/4)}:host .eo-body .aside .meta-roles .share-actions{display:flex;justify-content:flex-end;margin:0 calc(var(--app-pane-padding)/8*-1)}:host .eo-body .aside .meta-roles .share-actions button{margin:0 calc(var(--app-pane-padding)/8);padding:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}:host .eo-body .aside .meta-roles.empty:not(.dark) .form-field,:host .eo-body .aside .meta-roles.empty:not(.dark) .label{display:none}:host .eo-body .aside .meta-data{border-collapse:collapse;display:table;flex:1 1 40%;margin:0 0 var(--app-pane-padding) 0;order:1}:host .eo-body .aside .meta-data .restriction{display:table-row}:host .eo-body .aside .meta-data .restriction .label{color:var(--text-color-caption);display:table-cell;font-style:italic;padding-right:calc(var(--app-pane-padding)/2)}:host .eo-body .aside .meta-data .restriction .items{border-left:1px solid rgba(var(--color-black-rgb),.1);display:table-cell;padding:0 0 calc(var(--app-pane-padding)/2) calc(var(--app-pane-padding)/2)}:host .actions{background-color:var(--color-white);border-top:1px solid var(--panel-header-border-bottom-color);display:flex;flex-flow:row;justify-content:flex-end;padding:var(--app-pane-padding) calc(var(--app-pane-padding) - 2px)}:host .actions button{margin:0 2px}:host .edit-form{background-color:var(--color-white);max-width:500px}:host .edit-form .context{background-color:var(--color-primary-2);padding:calc(var(--app-pane-padding)/2)}:host .edit-form .context h3{color:var(--color-white);display:flex;font-size:var(--font-subhead);font-weight:var(--font-weight-light);justify-content:flex-end;margin:0;padding:var(--app-pane-padding) 0 calc(var(--app-pane-padding)/2) 0}:host .edit-form .form-fields{padding:calc(var(--app-pane-padding)/2)}:host .edit-form .form-fields.empty{display:none}:host .edit-form .form-field{align-items:center;display:flex;flex-flow:row nowrap}:host .edit-form .form-field eo-form-element{flex:1 1 auto}:host .edit-form .form-field eo-dynamic-property-switch{flex:0 0 auto}:host eo-stored-query{display:block;max-width:500px}:host ::ng-deep eo-form-input.title{display:block;margin-bottom:var(--app-pane-padding)}:host ::ng-deep eo-form-input.title input{font-size:var(--font-title);font-weight:var(--font-weight-light)}"]
+                styles: [":host{--stored-query-aside-width:300px;display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;background:var(--panel-background-grey);height:100%;overflow-y:auto}:host .eo-head{background-color:var(--color-white);border-bottom:1px solid var(--panel-header-border-bottom-color)}:host .eo-body{overflow-y:hidden}:host .eo-body .form{overflow-y:auto;padding:var(--app-pane-padding);padding-right:calc(var(--stored-query-aside-width) + var(--app-pane-padding) * 2)}:host .eo-body .form eo-stored-query{background-color:var(--color-white);padding:var(--app-pane-padding)}:host .eo-body .aside{width:var(--stored-query-aside-width);position:absolute;right:var(--app-pane-padding);top:var(--app-pane-padding);background-color:rgba(var(--color-black-rgb),.02);border:1px solid rgba(var(--color-black-rgb),.1);box-sizing:border-box;padding:var(--app-pane-padding)}:host .eo-body .aside .meta-actions{display:flex;justify-content:flex-end;margin:0 -2px}:host .eo-body .aside .meta-actions eo-icon{margin:0 2px;padding:4px;color:var(--text-color-hint)}:host .eo-body .aside .meta-actions eo-icon.active{color:var(--color-favorite)}:host .eo-body .aside .meta-actions eo-icon.editing{background-color:var(--color-primary-2);color:var(--color-white);border-radius:2px 2px 0 0}:host .eo-body .aside .meta-actions eo-icon.sharedWithMe{background-color:var(--text-color-hint);color:var(--color-white);border-radius:2px}:host .eo-body .aside .meta-roles.dark{background-color:var(--color-primary-2);color:var(--color-white);border-radius:2px;padding:calc(var(--app-pane-padding) / 2);margin-bottom:var(--app-pane-padding)}:host .eo-body .aside .meta-roles.dark .actions{display:flex}:host .eo-body .aside .meta-roles.dark .label{display:none}:host .eo-body .aside .meta-roles.dark .form-field,:host .eo-body .aside .meta-roles .form-field{background-color:rgba(var(--color-white-rgb),.2)}:host .eo-body .aside .meta-roles .form-field{border:1px solid rgba(var(--color-black-rgb),.1);padding:2px 2px 4px 4px;margin-bottom:calc(var(--app-pane-padding) / 2)}:host .eo-body .aside .meta-roles .label{color:var(--text-color-caption);font-style:italic;margin-bottom:calc(var(--app-pane-padding) / 4)}:host .eo-body .aside .meta-roles .share-actions{display:flex;justify-content:flex-end;margin:0 calc(var(--app-pane-padding) / 8 * -1)}:host .eo-body .aside .meta-roles .share-actions button{margin:0 calc(var(--app-pane-padding) / 8);padding:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2)}:host .eo-body .aside .meta-roles.empty:not(.dark) .form-field,:host .eo-body .aside .meta-roles.empty:not(.dark) .label{display:none}:host .eo-body .aside .meta-data{order:1;flex:1 1 40%;margin:0 0 var(--app-pane-padding) 0;display:table;border-collapse:collapse}:host .eo-body .aside .meta-data .restriction{display:table-row}:host .eo-body .aside .meta-data .restriction .label{display:table-cell;padding-right:calc(var(--app-pane-padding) / 2);color:var(--text-color-caption);font-style:italic}:host .eo-body .aside .meta-data .restriction .items{display:table-cell;border-left:1px solid rgba(var(--color-black-rgb),.1);padding:0 0 calc(var(--app-pane-padding) / 2) calc(var(--app-pane-padding) / 2)}:host .actions{display:flex;flex-flow:row;justify-content:flex-end;padding:var(--app-pane-padding) calc(var(--app-pane-padding) - 2px);background-color:var(--color-white);border-top:1px solid var(--panel-header-border-bottom-color)}:host .actions button{margin:0 2px}:host .edit-form{background-color:var(--color-white);max-width:500px}:host .edit-form .context{background-color:var(--color-primary-2);padding:calc(var(--app-pane-padding) / 2)}:host .edit-form .context h3{padding:var(--app-pane-padding) 0 calc(var(--app-pane-padding) / 2) 0;margin:0;font-weight:var(--font-weight-light);font-size:var(--font-subhead);color:var(--color-white);display:flex;justify-content:flex-end}:host .edit-form .form-fields{padding:calc(var(--app-pane-padding) / 2)}:host .edit-form .form-fields.empty{display:none}:host .edit-form .form-field{display:flex;flex-flow:row nowrap;align-items:center}:host .edit-form .form-field eo-form-element{flex:1 1 auto}:host .edit-form .form-field eo-dynamic-property-switch{flex:0 0 auto}:host eo-stored-query{max-width:500px;display:block}:host ::ng-deep eo-form-input.title{display:block;margin-bottom:var(--app-pane-padding)}:host ::ng-deep eo-form-input.title input{font-size:var(--font-title);font-weight:var(--font-weight-light)}"]
             },] }
 ];
 StoredQueryDetailsComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/tab-container/tab-container.component.js

@@ -133,7 +133,7 @@ TabContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-tab-container',
                 template: "<eo-split [gutterSize]=\"16\" [visibleTransition]=\"true\" [cacheLayout]=\"cacheLayout\" cdkDropListGroup>\n  <eo-split-area [visible]=\"visibility.master\" [size]=\"50\" [minSizePixel]=\"300\">\n    <div class=\"tab-version-zone\" *ngIf=\"version?.master\">\n      <span>{{'eo.versions.details.label' | translate}}</span>\n      <span class=\"number\">{{version.master}}</span>\n    </div>\n    <div class=\"tab-drop-zone\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"[]\" (cdkDropListDropped)=\"onZoneDrop($event, 'slave')\"\n         [ngClass]=\"{'hidden-zone': !(enableSlave && !visibility.slave && dndEnabled)}\"\n         >\n    </div>\n    <eo-tab-view #mainTabView\n                 [dndEnabled]=\"dndEnabled\"\n                 (onChange)=\"onChangeTab($event, 'master')\"\n                 (onSort)=\"saveCacheOrder($event)\"\n                 (onTabSwitch)=\"toggleSplitPane();saveCacheOrder($event);onTabSwitch.emit($event)\">\n      <ng-content></ng-content>\n    </eo-tab-view>\n  </eo-split-area>\n  <eo-split-area [visible]=\"!!enableSlave && visibility.slave\" [size]=\"50\" [minSizePixel]=\"300\">\n    <div class=\"tab-version-zone\" *ngIf=\"version?.slave\">\n      <span>{{'eo.versions.details.label' | translate}}</span>\n      <span class=\"number\">{{version.slave}}</span>\n    </div>\n    <div class=\"tab-drop-zone\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"[]\" (cdkDropListDropped)=\"onZoneDrop($event, 'master')\"\n         [ngClass]=\"{'hidden-zone': !(enableSlave && !visibility.master && dndEnabled)}\"\n         title=\"{{ 'eo.tabcontainer.arrange' | translate }}\">\n    </div>\n    <eo-tab-view #slaveTabView\n                 [dndEnabled]=\"dndEnabled\"\n                 (onChange)=\"onChangeTab($event, 'slave')\"\n                 (onSort)=\"saveCacheOrder($event)\"\n                 (onTabSwitch)=\"toggleSplitPane();saveCacheOrder($event);onTabSwitch.emit($event)\">\n    </eo-tab-view>\n  </eo-split-area>\n</eo-split>\n",
-                styles: [":host{height:100%}:host .tab-drop-zone{background:rgba(var(--color-black-rgb),.06);border:1px dashed rgba(var(--color-black-rgb),.2);border-radius:4px;display:flex;height:20px;justify-content:center;position:absolute;top:4px;width:25px;z-index:2}[dir=ltr] :host .tab-drop-zone{right:3px}[dir=rtl] :host .tab-drop-zone{left:3px}:host .tab-drop-zone.dnd-drag-over{border:1px dashed}:host .tab-drop-zone.hidden-zone{display:none}:host .tab-drop-zone eo-icon{color:var(--text-color-hint);height:20px;width:20px}:host .tab-drop-zone:hover{background-color:rgba(var(--color-success),.3)}:host .tab-version-zone{align-items:center;background:var(--color-white);color:var(--color-accent);display:flex;height:25px;position:absolute;top:0;width:auto;z-index:3}[dir=ltr] :host .tab-version-zone{right:4px}[dir=rtl] :host .tab-version-zone{left:4px}:host .tab-version-zone .number{font-size:2em;padding:0 4px}:host ::ng-deep .dnd-sortable-drag{border:0}"]
+                styles: [":host{height:100%}:host .tab-drop-zone{position:absolute;top:4px;height:20px;width:25px;display:flex;justify-content:center;background:rgba(var(--color-black-rgb),.06);border:1px dashed rgba(var(--color-black-rgb),.2);border-radius:4px;z-index:2}[dir=ltr] :host .tab-drop-zone{right:3px}[dir=rtl] :host .tab-drop-zone{left:3px}:host .tab-drop-zone.dnd-drag-over{border:1px dashed}:host .tab-drop-zone.hidden-zone{display:none}:host .tab-drop-zone eo-icon{color:var(--text-color-hint);width:20px;height:20px}:host .tab-drop-zone:hover{background-color:rgba(var(--color-success),.3)}:host .tab-version-zone{position:absolute;top:0;height:25px;width:auto;display:flex;align-items:center;color:var(--color-accent);background:var(--color-white);z-index:3}[dir=ltr] :host .tab-version-zone{right:4px}[dir=rtl] :host .tab-version-zone{left:4px}:host .tab-version-zone .number{font-size:2em;padding:0 4px}:host ::ng-deep .dnd-sortable-drag{border:0}"]
             },] }
 ];
 TabContainerComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/tab-container/tab-panel/tab-panel.component.js

@@ -14,7 +14,7 @@ TabPanelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-tab-panel',
                 template: "<div [attr.id]=\"id\" class=\"ui-tabview-panel ui-widget-content eo-tab-panel\" [ngClass]=\"{'ui-helper-hidden': !selected}\"\n     role=\"tabpanel\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"id + '-label'\" *ngIf=\"!closed\">\n  <ng-content></ng-content>\n  <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n  </ng-container>\n</div>\n",
-                styles: [":host{display:none}:host .eo-tab-panel{bottom:0;left:0;overflow-y:auto;position:absolute;right:0;top:0}:host.selected{display:block}"]
+                styles: [":host{display:none}:host .eo-tab-panel{overflow-y:auto;position:absolute;left:0;top:0;right:0;bottom:0}:host.selected{display:block}"]
             },] }
 ];
 TabPanelComponent.ctorParameters = () => [

package/esm2015/app/eo-framework/tab-container/tab-view/tab-view.component.js

@@ -44,7 +44,7 @@ TabViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-tab-view',
                 template: "<div [ngClass]=\"'ui-tabview ui-widget ui-widget-content ui-corner-all ui-tabview-' + orientation\" [ngStyle]=\"style\" [class]=\"styleClass\">\n  <eo-tab-view-nav role=\"tablist\"\n                   *ngIf=\"orientation!='bottom'\"\n                   [style.minHeight.px]=\"30\"\n                   [tabs]=\"tabs\"\n                   [orientation]=\"orientation\"\n                   (onTabClick)=\"open($event.originalEvent, $event.tab)\"\n                   (onTabCloseClick)=\"close($event.originalEvent, $event.tab)\"\n                   \n                   [dndEnabled]=\"dndEnabled\"\n                   (onHeaderDrop)=\"dndEnabled && onHeaderDrop($event)\">\n  </eo-tab-view-nav>\n  <div class=\"ui-tabview-panels\" #panels>\n    <ng-content></ng-content>\n  </div>\n</div>\n",
-                styles: [":host{height:100%}:host .ui-tabview{background:transparent;display:flex;flex:1;flex-direction:column;height:100%;min-height:0;min-width:0}:host .ui-tabview .ui-tabview-nav{background:var(--color-white)}:host .ui-tabview .ui-tabview-panels{flex:1;position:relative}:host ::ng-deep eo-tab-view{display:block}"]
+                styles: [":host{height:100%}:host .ui-tabview{background:transparent;height:100%;display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}:host .ui-tabview .ui-tabview-nav{background:var(--color-white)}:host .ui-tabview .ui-tabview-panels{flex:1;position:relative}:host ::ng-deep eo-tab-view{display:block}"]
             },] }
 ];
 TabViewComponent.propDecorators = {

package/esm2015/app/eo-framework/tab-container/tab-view-nav/tab-view-nav.component.js

@@ -12,7 +12,7 @@ TabViewNavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-tab-view-nav',
                 template: "<div cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"tabs\" (cdkDropListDropped)=\"onHeaderDrop.emit($event)\">\n  <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n        <li cdkDrag [cdkDragData]=\"tab\" [cdkDragDisabled]=\"!dndEnabled\" [class]=\"getDefaultHeaderClass(tab)\" [ngStyle]=\"tab.headerStyle\" role=\"presentation\"\n            [ngClass]=\"{'ui-tabview-selected ui-state-active': tab.selected, 'ui-state-disabled': tab.disabled}\"\n            (click)=\"clickTab($event,tab)\" *ngIf=\"!tab.closed\">\n            <a [attr.id]=\"tab.id + '-label'\" href=\"#\" role=\"tab\" [attr.aria-selected]=\"tab.selected\" [attr.aria-controls]=\"tab.id\">\n                <span class=\"ui-tabview-left-icon fa\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon\"></span>\n                <span class=\"ui-tabview-title\">{{tab.header}}</span>\n                <span class=\"ui-tabview-right-icon fa\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon\"></span>\n          </a>\n            <span *ngIf=\"tab.closable\" class=\"ui-tabview-close pi pi-times\" (click)=\"clickClose($event,tab)\"></span>\n      </li>\n  </ng-template>\n</div>",
-                styles: [".cdk-drop-list{display:flex;flex-wrap:wrap;margin-right:30px;overflow:auto hidden;width:100%}.cdk-drop-list::-webkit-scrollbar{height:0}.cdk-drag{cursor:pointer}.cdk-drag a{pointer-events:none}.cdk-drag-preview{border:none;list-style:none;opacity:.3}.cdk-drag-placeholder{border:none;list-style:none;opacity:.7}.cdk-drop-list-dragging .cdk-drag{cursor:move;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}"]
+                styles: [".cdk-drop-list{width:100%;flex-wrap:wrap;overflow:auto hidden;display:flex;margin-right:30px}.cdk-drop-list::-webkit-scrollbar{height:0}.cdk-drag{cursor:pointer}.cdk-drag a{pointer-events:none}.cdk-drag-preview{opacity:.3;list-style:none;border:none}.cdk-drag-placeholder{opacity:.7;list-style:none;border:none}.cdk-drop-list-dragging .cdk-drag{cursor:move;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}"]
             },] }
 ];
 TabViewNavComponent.propDecorators = {

package/esm2015/app/eo-framework/tree/tree-node/tree-node.component.js

@@ -13,7 +13,7 @@ TreeNodeComponent.decorators = [
                 selector: 'eo-tree-node',
                 template: "<div class=\"tree-node\"\n     [ngClass]=\"{selected: node.selected,\n          expanded: node.expanded,\n          notSelectable: !node.selectable && !(node.children?.length),\n          branch: node.children && node.children.length > 0}\">\n  <div class=\"node-line\"></div>\n  <div class=\"node-content\">\n\n    <div class=\"node-item\">\n      <div class=\"spacer\"></div>\n      <div class=\"ico\" (click)=\"node.children?.length ? onNodeExpandedChanged.emit(node) : onNodeSelected.emit(node)\"></div>\n      <div class=\"values\">\n        <div class=\"label\" (click)=\"onNodeSelected.emit(node)\" [ngClass]=\"{focused: node.focused}\">\n          <span>{{node.name}}</span>\n        </div>\n        <div class=\"badge\" *ngIf=\"node.badges && node.badges.length > 0\">\n              <span *ngFor=\"let badge of node.badges\"\n                    class=\"{{badge.cssClass}}\"\n                    [ngClass]=\"{highlighted: node.highlighted}\">\n                    {{badge.value}}\n              </span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"node-children\" *ngIf=\"node.children?.length\">\n      <eo-tree-node [node]=\"_node\" *ngFor=\"let _node of node.children; trackBy: trackById\"\n                    (onNodeExpandedChanged)=\"onNodeExpandedChanged.emit($event)\"\n                    (onNodeSelected)=\"onNodeSelected.emit($event)\"></eo-tree-node>\n    </div>\n  </div>\n</div>\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: [".eo-tree.rtl .tree-node .node-content .node-children{padding-left:0;padding-right:var(--app-pane-padding)}.eo-tree.rtl .tree-node .node-content .node-item .label{margin-left:0;margin-right:calc(var(--app-pane-padding)/4)}.eo-tree{color:var(--text-color-caption)}.eo-tree eo-tree-node{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0}.eo-tree>eo-tree-node:last-child>.tree-node>.node-line{height:calc(var(--app-pane-padding)/2 + var(--app-pane-padding)/2 + 1px)}.eo-tree>eo-tree-node:first-child>.tree-node>.node-line{margin-top:calc(var(--app-pane-padding)/2 + var(--app-pane-padding)/2)}.eo-tree .tree-node{display:flex;flex:1;flex-direction:row;flex-wrap:nowrap;min-height:0;min-width:0}.eo-tree .tree-node.notSelectable{color:var(--text-color-hint);display:none}.eo-tree .tree-node.notSelectable .label{cursor:default!important}.eo-tree .tree-node.notSelectable .label.focused span,.eo-tree .tree-node.notSelectable .label:hover span{border-color:transparent!important;color:var(--text-color-hint)!important}.eo-tree .tree-node .node-line{align-self:stretch;background:rgba(var(--color-black-rgb),.2);flex:0 0 auto;width:1px}.eo-tree .tree-node .node-content{flex:1 1 auto;min-width:0;padding:calc(var(--app-pane-padding)/2) 0}.eo-tree .tree-node .node-content .node-item{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap;height:var(--app-pane-padding);min-height:0;min-width:0}.eo-tree .tree-node .node-content .node-item .spacer{align-self:stretch;display:flex;flex-flow:column;width:calc(var(--app-pane-padding)/2)}.eo-tree .tree-node .node-content .node-item .spacer:before{border-bottom:1px solid rgba(var(--color-black-rgb),.2);content:\"\";flex:0 0 50%}.eo-tree .tree-node .node-content .node-item .ico{align-items:center;border:1px solid rgba(var(--color-black-rgb),.2);border-radius:50%;box-sizing:border-box;display:flex;flex-flow:row nowrap;height:var(--app-pane-padding);justify-content:center;width:var(--app-pane-padding)}.eo-tree .tree-node .node-content .node-item .values{align-items:center;display:flex;flex:1;flex-direction:row;justify-content:space-between;min-height:0;min-width:0}.eo-tree .tree-node .node-content .node-item .label{-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;cursor:pointer;display:inline-block;margin-left:calc(var(--app-pane-padding)/4);max-width:none;overflow:hidden;padding:1px;text-overflow:ellipsis;transition:all var(--app-default-transition-duration) ease-in-out;white-space:nowrap;width:100%;word-wrap:break-word}.eo-tree .tree-node .node-content .node-item .label.focused span,.eo-tree .tree-node .node-content .node-item .label:hover span{border-color:var(--color-accent);color:var(--color-accent)}.eo-tree .tree-node .node-content .node-item .label 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:1px solid transparent;border-radius:3px;box-sizing:border-box;display:inline-block;padding:0 calc(var(--app-pane-padding)/4);transition:all var(--app-default-transition-duration) ease-in-out;white-space:nowrap}.eo-tree .tree-node .node-content .node-item .badge span{border:1px solid var(--text-color-hint);border-radius:calc(var(--app-pane-padding)/4);box-sizing:content-box;color:var(--text-color-caption);font-size:var(--font-hint);line-height:1em;margin:0 calc(var(--app-pane-padding)/4);padding:0 calc(var(--app-pane-padding)/4) 1px calc(var(--app-pane-padding)/4)}.eo-tree .tree-node .node-content .node-item .badge span:last-child{background:var(--color-primary-3);border-color:transparent;color:var(--color-white)}.eo-tree .tree-node .node-content .node-item .badge span.highlighted:last-child{background:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-white)}.eo-tree .tree-node .node-content .node-children{display:none;padding-left:var(--app-pane-padding)}.eo-tree .tree-node .node-content .node-children>eo-tree-node:last-child>.tree-node>.node-line{height:calc(var(--app-pane-padding)/2 + var(--app-pane-padding)/2 + 1px)}.eo-tree .tree-node.selected>.node-content>.node-item>.label span{background:var(--color-accent);color:var(--color-white)}.eo-tree .tree-node.selected>.node-content>.node-item>.label.focused,.eo-tree .tree-node.selected>.node-content>.node-item>.label:hover{border-color:var(--color-accent)}.eo-tree .tree-node.selected:not(.branch)>.node-content>.node-item .ico:before{background:var(--color-accent);border-radius:50%;content:\"\";height:calc(var(--app-pane-padding)/2);width:calc(var(--app-pane-padding)/2)}.eo-tree .tree-node.selected.branch>.node-content>.node-item .ico{border-color:var(--color-accent)}.eo-tree .tree-node.selected.branch>.node-content>.node-item .ico:before{background:var(--color-accent);color:var(--color-white)}.eo-tree .tree-node.branch>.node-content>.node-item>.ico{border-radius:2px}.eo-tree .tree-node.branch>.node-content>.node-item>.ico:hover{background:rgba(var(--color-black-rgb),.1)}.eo-tree .tree-node.branch>.node-content>.node-item>.ico:before{color:var(--text-color-caption);content:\"+\";font-family:monospace;font-size:14px;height:calc(var(--app-pane-padding) - 2px);line-height:calc(var(--app-pane-padding) - 2px);text-align:center;width:calc(var(--app-pane-padding) - 2px)}.eo-tree .tree-node.branch.expanded>.node-content>.node-item>.ico:before{content:\"-\"}.eo-tree .tree-node.branch.expanded>.node-content>.node-children{display:block}"]
+                styles: [".eo-tree.rtl .tree-node .node-content .node-children{padding-left:0;padding-right:var(--app-pane-padding)}.eo-tree.rtl .tree-node .node-content .node-item .label{margin-left:0;margin-right:calc(var(--app-pane-padding) / 4)}.eo-tree{color:var(--text-color-caption)}.eo-tree eo-tree-node{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0}.eo-tree>eo-tree-node:last-child>.tree-node>.node-line{height:calc(var(--app-pane-padding) / 2 + var(--app-pane-padding) / 2 + 1px)}.eo-tree>eo-tree-node:first-child>.tree-node>.node-line{margin-top:calc(var(--app-pane-padding) / 2 + var(--app-pane-padding) / 2)}.eo-tree .tree-node{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0;flex-wrap:nowrap}.eo-tree .tree-node.notSelectable{display:none;color:var(--text-color-hint)}.eo-tree .tree-node.notSelectable .label{cursor:default!important}.eo-tree .tree-node.notSelectable .label.focused span,.eo-tree .tree-node.notSelectable .label:hover span{border-color:transparent!important;color:var(--text-color-hint)!important}.eo-tree .tree-node .node-line{width:1px;background:rgba(var(--color-black-rgb),.2);align-self:stretch;flex:0 0 auto}.eo-tree .tree-node .node-content{padding:calc(var(--app-pane-padding) / 2) 0;flex:1 1 auto;min-width:0}.eo-tree .tree-node .node-content .node-item{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0;flex-wrap:nowrap;align-items:center;height:var(--app-pane-padding)}.eo-tree .tree-node .node-content .node-item .spacer{display:flex;flex-flow:column;width:calc(var(--app-pane-padding) / 2);align-self:stretch}.eo-tree .tree-node .node-content .node-item .spacer:before{content:\"\";flex:0 0 50%;border-bottom:1px solid rgba(var(--color-black-rgb),.2)}.eo-tree .tree-node .node-content .node-item .ico{width:var(--app-pane-padding);height:var(--app-pane-padding);box-sizing:border-box;border:1px solid rgba(var(--color-black-rgb),.2);display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;border-radius:50%}.eo-tree .tree-node .node-content .node-item .values{display:flex;flex:1;flex-direction:row;min-height:0;min-width:0;align-items:center;justify-content:space-between}.eo-tree .tree-node .node-content .node-item .label{margin-left:calc(var(--app-pane-padding) / 4);transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;cursor:pointer;padding:1px;display:inline-block;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:break-word;width:100%}.eo-tree .tree-node .node-content .node-item .label.focused span,.eo-tree .tree-node .node-content .node-item .label:hover span{border-color:var(--color-accent);color:var(--color-accent)}.eo-tree .tree-node .node-content .node-item .label span{transition:all var(--app-default-transition-duration) ease-in-out;-webkit-transition:all var(--app-default-transition-duration) ease-in-out;-moz-transition:all var(--app-default-transition-duration) ease-in-out;-o-transition:all var(--app-default-transition-duration) ease-in-out;display:inline-block;box-sizing:border-box;border-radius:3px;border:1px solid transparent;white-space:nowrap;padding:0 calc(var(--app-pane-padding) / 4)}.eo-tree .tree-node .node-content .node-item .badge span{margin:0 calc(var(--app-pane-padding) / 4);line-height:1em;color:var(--text-color-caption);border-radius:calc(var(--app-pane-padding) / 4);box-sizing:content-box;font-size:var(--font-hint);padding:0 calc(var(--app-pane-padding) / 4) 1px calc(var(--app-pane-padding) / 4);border:1px solid var(--text-color-hint)}.eo-tree .tree-node .node-content .node-item .badge span:last-child{background:var(--color-primary-3);color:var(--color-white);border-color:transparent}.eo-tree .tree-node .node-content .node-item .badge span.highlighted:last-child{background:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-white)}.eo-tree .tree-node .node-content .node-children{padding-left:var(--app-pane-padding);display:none}.eo-tree .tree-node .node-content .node-children>eo-tree-node:last-child>.tree-node>.node-line{height:calc(var(--app-pane-padding) / 2 + var(--app-pane-padding) / 2 + 1px)}.eo-tree .tree-node.selected>.node-content>.node-item>.label span{background:var(--color-accent);color:var(--color-white)}.eo-tree .tree-node.selected>.node-content>.node-item>.label.focused,.eo-tree .tree-node.selected>.node-content>.node-item>.label:hover{border-color:var(--color-accent)}.eo-tree .tree-node.selected:not(.branch)>.node-content>.node-item .ico:before{content:\"\";width:calc(var(--app-pane-padding) / 2);height:calc(var(--app-pane-padding) / 2);border-radius:50%;background:var(--color-accent)}.eo-tree .tree-node.selected.branch>.node-content>.node-item .ico{border-color:var(--color-accent)}.eo-tree .tree-node.selected.branch>.node-content>.node-item .ico:before{background:var(--color-accent);color:var(--color-white)}.eo-tree .tree-node.branch>.node-content>.node-item>.ico{border-radius:2px}.eo-tree .tree-node.branch>.node-content>.node-item>.ico:hover{background:rgba(var(--color-black-rgb),.1)}.eo-tree .tree-node.branch>.node-content>.node-item>.ico:before{content:\"+\";font-family:monospace;font-size:14px;color:var(--text-color-caption);text-align:center;width:calc(var(--app-pane-padding) - 2px);height:calc(var(--app-pane-padding) - 2px);line-height:calc(var(--app-pane-padding) - 2px)}.eo-tree .tree-node.branch.expanded>.node-content>.node-item>.ico:before{content:\"-\"}.eo-tree .tree-node.branch.expanded>.node-content>.node-children{display:block}"]
             },] }
 ];
 TreeNodeComponent.ctorParameters = () => [];