@eo-sdk/client 8.2.0 → 8.4.0-rc.2

package/fesm2015/eo-sdk-client.js

@@ -6789,16 +6789,28 @@ InputFocusDirective.propDecorators = {
 };
 
 class IdReferenceComponent {
-    constructor(clipboardService, system, referenceService) {
+    constructor(clipboardService, system, referenceService, searchService) {
         this.clipboardService = clipboardService;
         this.system = system;
         this.referenceService = referenceService;
-        this.innerValues = []; // inner ng-model value
+        this.searchService = searchService;
+        this._innerValues = []; // inner ng-model value
         this.visibleDialog = false;
         this.propagateChange = (value) => { };
         this.clipboardService.clipboard$.subscribe(clipboard => (this.clipboard = clipboard));
         this.clipboard = this.clipboardService.get();
     }
+    set innerValues(data) {
+        if (data) {
+            this._innerValues = data;
+        }
+        else {
+            this._innerValues = [];
+        }
+    }
+    get innerValues() {
+        return this._innerValues;
+    }
     set dataToRender(data) {
         if (data) {
             this.innerValues = data;
@@ -6906,6 +6918,57 @@ class IdReferenceComponent {
     validate(c) {
         return null;
     }
+    // handler invoked when an entry was selected using the autocomplete input
+    onAutoCompleteSelect(evt) {
+        if (!Array.isArray(this.innerValues)) {
+            this.innerValues = [this.innerValues];
+        }
+        this.innerValues = uniqBy(this.innerValues, 'id');
+        if (this.multiselect) {
+            this.value = this.innerValues.map(iv => iv.id);
+        }
+        else {
+            this.value = this.innerValues[0].id;
+        }
+        this.propagateChange(this.value);
+    }
+    autocompleteFn(evt) {
+        let q = {
+            fields: ['title', 'description', 'type'],
+            types: [this.referenceType.name],
+            term: evt.query,
+            highlighting: true,
+            filters: this.queryFilters,
+            options: { withContext: true }
+        };
+        if (this.objectTypesFilter) {
+            q.types = this.objectTypesFilter;
+        }
+        if (this.contextId) {
+            if (q.filters) {
+                q.filters.contextfolderid = { v1: this.contextId, o: 'eq' };
+            }
+            else {
+                q.filters = { contextfolderid: { v1: this.contextId, o: 'eq' } };
+            }
+        }
+        this.searchService
+            .executeQuery(q)
+            .pipe(debounceTime(500), map(item => item ? this.searchService.createResultFromResponse(item) : [])).subscribe((result) => {
+            this.autocompleteRes = result.hits;
+        });
+    }
+    onAutoCompleteBlur() {
+        this.clearInnerInput();
+    }
+    clearInnerInput() {
+        if (this.autoCompleteInput.multiInputEL) {
+            this.autoCompleteInput.multiInputEL.nativeElement.value = '';
+        }
+        else {
+            this.autoCompleteInput.inputEL.nativeElement.value = '';
+        }
+    }
     ngOnInit() {
         if (this.situation === 'SEARCH') {
             this.multiselect = true;
@@ -6915,7 +6978,7 @@ class IdReferenceComponent {
 IdReferenceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-id-reference',
-                template: "<div class=\"eo-id-reference\">\r\n\r\n  <div class=\"eo-id-reference__element\" *ngIf=\"referenceType; else notFound\">\r\n    <div *ngFor=\"let item of innerValues\" class=\"chip\">\r\n      <a *ngIf=\"!item.state || item.state === 'OK'\" class=\"link router-link\" [routerLink]=\"['/object', item.id, {outlets: {modal: null}}]\" [queryParams]=\"{type: referenceType.qname}\">\r\n        <svg focusable=\"false\" class=\"ref-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n             viewBox=\"0 0 24 24\">\r\n          <path d=\"M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8\r\n          13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z\"></path>\r\n        </svg>\r\n      </a>\r\n      <eo-icon [objectType]=\"referenceType\" title=\"{{referenceType.label}}\" class=\"ref-type-icon\" [ngClass]=\"{'deleted-reference-label': item.state && (item.state === 'RECYCLED' || item.state === 'GONE')}\"></eo-icon>\r\n      <span *ngIf=\"!(item.state && (item.state === 'RECYCLED' || item.state === 'GONE')); else deleted\" class=\"label\">{{item.title || referenceType.label}}</span>\r\n      <ng-template #deleted>\r\n        <span class=\"label deleted-reference-label\">{{('eo.references.deleted' | translate)}}</span>\r\n      </ng-template>\r\n      <eo-icon *ngIf=\"!readonly\" [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"removeItem(item)\" class=\"remove-icon\"></eo-icon>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #notFound><span class=\"label\">{{innerValues && innerValues.length ? ('eo.references.not.available' | translate) : ''}}</span></ng-template>\r\n\r\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\"\r\n          title=\"{{('eo.references.search' | translate) + ' ' + tooltipTypeHint}}\"\r\n          [disabled]=\"selectionDisabled\"\r\n          (click)=\"showDialog()\">\r\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_none.svg'\"></eo-icon>\r\n  </button>\r\n</div>\r\n\r\n<eo-dialog [title]=\"('eo.references.add' | translate)\"\r\n           [subtitle]=\"referenceType.label\"\r\n           [(visible)]=\"visibleDialog\"\r\n           [minWidth]=\"577\"\r\n           [minHeight]=\"590\"\r\n           [styleClass]=\"'reference-field-dialog'\"\r\n           #dialog>\r\n\r\n          <eo-reference-finder *ngIf=\"dialog.visible\"\r\n            [isDisabled]=\"isDisabled\"\r\n            [types]=\"referenceType.qname\"\r\n            [multiselect]=\"multiselect\"\r\n            [currentSelection]=\"innerValues\"\r\n            [clipboard]=\"clipboard\"\r\n            [contextId]=\"contextId\"\r\n            [exceptionIDs]=\"exceptionIDs\"\r\n            [queryFilters]=\"queryFilters\"\r\n            (addDmsObjects)=\"paste($event)\">\r\n          </eo-reference-finder>\r\n</eo-dialog>\r\n",
+                template: "<div class=\"eo-id-reference\">\r\n  <p-autoComplete [(ngModel)]=\"innerValues\" [minLength]=\"1\" [delay]=\"500\" #autocomplete\r\n                  (onSelect)=\"onAutoCompleteSelect($event)\"\r\n                  (onUnselect)=\"removeItem($event)\"\r\n                  (onBlur)=\"onAutoCompleteBlur()\"\r\n                  [suggestions]=\"autocompleteRes\" field=\"title\"\r\n                  [readonly]=\"readonly\"\r\n                  [forceSelection]=\"true\"\r\n                  (completeMethod)=\"autocompleteFn($event)\" [multiple]=\"true\" [styleClass]=\"!multiselect && innerValues.length === 1 ? 'xxx' : ''\">\r\n    <ng-template pTemplate=\"selectedItem\" let-item>\r\n      <a *ngIf=\"!item.state || item.state === 'OK'\" class=\"link router-link\" [routerLink]=\"['/object', item.id, {outlets: {modal: null}}]\" [queryParams]=\"{type: referenceType.qname}\">\r\n        <svg focusable=\"false\" class=\"ref-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n             viewBox=\"0 0 24 24\">\r\n          <path d=\"M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8\r\n        13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z\"></path>\r\n        </svg>\r\n      </a>\r\n      <eo-icon [objectType]=\"referenceType\" title=\"{{referenceType.label}}\" class=\"ref-type-icon\" [ngClass]=\"{'deleted-reference-label': item.state && (item.state === 'RECYCLED' || item.state === 'GONE')}\"></eo-icon>\r\n      <span *ngIf=\"!(item.state && (item.state === 'RECYCLED' || item.state === 'GONE')); else deleted\" class=\"label\">{{item.title || referenceType.label}}</span>\r\n      <ng-template #deleted>\r\n        <span class=\"label deleted-reference-label\">{{('eo.references.deleted' | translate)}}</span>\r\n      </ng-template>\r\n    </ng-template>\r\n  </p-autoComplete>\r\n\r\n  <ng-template #notFound><span class=\"label\">{{innerValues && innerValues.length ? ('eo.references.not.available' | translate) : ''}}</span></ng-template>\r\n\r\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\"\r\n          title=\"{{('eo.references.search' | translate) + ' ' + tooltipTypeHint}}\"\r\n          [disabled]=\"selectionDisabled\"\r\n          (click)=\"showDialog()\">\r\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_none.svg'\"></eo-icon>\r\n  </button>\r\n</div>\r\n\r\n<eo-dialog [title]=\"('eo.references.add' | translate)\"\r\n           [subtitle]=\"referenceType.label\"\r\n           [(visible)]=\"visibleDialog\"\r\n           [minWidth]=\"577\"\r\n           [minHeight]=\"590\"\r\n           [styleClass]=\"'reference-field-dialog'\"\r\n           #dialog>\r\n\r\n          <eo-reference-finder *ngIf=\"dialog.visible\"\r\n            [isDisabled]=\"isDisabled\"\r\n            [types]=\"referenceType.qname\"\r\n            [multiselect]=\"multiselect\"\r\n            [currentSelection]=\"innerValues\"\r\n            [clipboard]=\"clipboard\"\r\n            [contextId]=\"contextId\"\r\n            [exceptionIDs]=\"exceptionIDs\"\r\n            [queryFilters]=\"queryFilters\"\r\n            (addDmsObjects)=\"paste($event)\">\r\n          </eo-reference-finder>\r\n</eo-dialog>\r\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -6928,13 +6991,14 @@ IdReferenceComponent.decorators = [
                         multi: true
                     }
                 ],
-                styles: [".eo-id-reference{align-items:center;display:flex;justify-content:space-between}.eo-id-reference__element{align-self:center;display:flex;flex-wrap:wrap}.eo-id-reference .chip{align-items:center;display:flex}.eo-id-reference .chip .ref-type-icon{height:16px;margin-right:4px;width:16px}.eo-id-reference .chip .label{display:flex;flex-flow:column;margin-right:4px}.eo-id-reference .chip .label>span{font-size:var(--font-hint)}.eo-id-reference .chip .remove-icon{color:var(--text-color-hint);flex:0 0 auto;height:14px;width:14px}.eo-id-reference .chip .remove-icon:hover{color:var(--text-color-caption);cursor:pointer}.eo-id-reference .chip .deleted-reference-label{color:var(--color-error)}.eo-id-reference .ui-button:disabled{cursor:default}::ng-deep .reference-field-dialog{width:577px}"]
+                styles: [".eo-id-reference{align-items:center;display:flex}.eo-id-reference__element{align-self:center;display:flex;flex-wrap:wrap}.eo-id-reference .ui-button:disabled{cursor:default}::ng-deep .reference-field-dialog{width:577px}::ng-deep .ref-type-icon{height:16px;width:16px}::ng-deep .deleted-reference-label{color:var(--color-error)}::ng-deep .label{display:flex;flex-flow:column;margin-right:10px}::ng-deep .label>span{font-size:var(--font-hint)}::ng-deep .remove-icon{color:var(--text-color-hint);flex:0 0 auto;height:14px;width:14px}::ng-deep .remove-icon:hover{color:var(--text-color-caption);cursor:pointer}::ng-deep .ui-autocomplete.xxx .ui-autocomplete-multiple-container.ui-inputtext{cursor:default}::ng-deep .ui-autocomplete.xxx .ui-autocomplete-input-token{display:none}p-autoComplete{width:100%}"]
             },] }
 ];
 IdReferenceComponent.ctorParameters = () => [
     { type: ClipboardService },
     { type: SystemService },
-    { type: ReferenceService }
+    { type: ReferenceService },
+    { type: SearchService }
 ];
 IdReferenceComponent.propDecorators = {
     readonly: [{ type: Input }],
@@ -6942,9 +7006,11 @@ IdReferenceComponent.propDecorators = {
     situation: [{ type: Input }],
     contextId: [{ type: Input }],
     exceptionIDs: [{ type: Input }],
+    autoCompleteInput: [{ type: ViewChild, args: ['autocomplete',] }],
     dataToRender: [{ type: Input }],
     reference: [{ type: Input }],
-    queryFilters: [{ type: Input }]
+    queryFilters: [{ type: Input }],
+    objectTypesFilter: [{ type: Input }]
 };
 
 class ReferenceFinderEntryComponent {
@@ -8603,9 +8669,9 @@ class ScopeElement {
             this.originalElement.setFilter(obj);
         }
     }
-    setQueryFilters(obj) {
+    setQueryFilters(queryFiltersObject, objectTypes) {
         if (this.originalElement.setQueryFilters) {
-            this.originalElement.setQueryFilters(obj);
+            this.originalElement.setQueryFilters(queryFiltersObject, objectTypes);
         }
     }
     get name() {
@@ -9341,8 +9407,9 @@ class ObjectFormComponent extends UnsubscribeOnDestroy {
                 };
             }
             if (formElement.type === 'REFERENCE') {
-                formControl._eoFormElement.setQueryFilters = (queryFiltersObject) => {
+                formControl._eoFormElement.setQueryFilters = (queryFiltersObject, objectTypes) => {
                     formControl._eoFormElement.queryFilters = queryFiltersObject;
+                    formControl._eoFormElement.objectTypesFilter = objectTypes;
                 };
             }
             if (this.formOptions.formModel.situation === 'SEARCH') {
@@ -9819,7 +9886,7 @@ class FormElementComponent {
 FormElementComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-form-element',
-                template: "<div class=\"form-element\" [formGroup]=\"element\" *ngIf=\"element\">\r\n\r\n  <div class=\"form-field t-{{formElementRef._eoFormElement.type}}\" #formField\r\n       [ngSwitch]=\"formElementRef._eoFormElement.type\"\r\n       [ngClass]=\"{disabled: !!formElementRef._eoFormElement.readonly}\">\r\n\r\n    <!-- STRING -->\r\n    <eo-form-input *ngSwitchCase=\"'STRING'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-string\r\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification !== 'selector'\"\r\n        [situation]=\"element._eoFormControlWrapper.situation\"\r\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n        [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\r\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n        [multiline]=\"formElementRef._eoFormElement.multiline\"\r\n        [classification]=\"formElementRef._eoFormElement.classification\"\r\n        [regex]=\"formElementRef._eoFormElement.regex\"\r\n        [qname]=\"formElementRef._eoFormElement.qname\"\r\n        [size]=\"formElementRef._eoFormElement.size\"\r\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n        [minLength]=\"formElementRef._eoFormElement.minlen\"\r\n        [maxLength]=\"formElementRef._eoFormElement.maxlen\"\r\n      ></eo-string>\r\n\r\n      <!-- Dynamic List -->\r\n      <eo-dynamic-list\r\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification === 'selector'\"\r\n        [situation]=\"element._eoFormControlWrapper.situation\"\r\n        [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n        [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\r\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n        [listObject]=\"formElementRef._eoFormElement.list\"\r\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-dynamic-list>\r\n\r\n\r\n      <!-- Reference -->\r\n      <eo-reference *ngIf=\"formElementRef._eoFormElement.reference\"\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [reference]=\"formElementRef._eoFormElement.reference\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [minLength]=\"formElementRef._eoFormElement.minlen\"\r\n                    [maxLength]=\"formElementRef._eoFormElement.maxlen\"\r\n      ></eo-reference>\r\n    </eo-form-input>\r\n\r\n    <!-- ID-Reference -->\r\n    <eo-form-input *ngSwitchCase=\"'REFERENCE'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-id-reference\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [situation]=\"element._eoFormControlWrapper.situation\"\r\n                    [dataToRender]=\"formElementRef._eoFormElement.dataToRender\"\r\n                    [reference]=\"formElementRef._eoFormElement.reference\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [contextId]=\"formElementRef._eoFormElement.contextId\"\r\n                    [exceptionIDs]=\"formElementRef._eoFormElement.exceptionIDs\"\r\n                    [queryFilters]=\"formElementRef._eoFormElement.queryFilters\"\r\n      ></eo-id-reference>\r\n    </eo-form-input>\r\n\r\n    <!-- ID -->\r\n    <eo-form-input *ngSwitchCase=\"'ID'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-string\r\n                    [situation]=\"element._eoFormControlWrapper.situation\"\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [regex]=\"'^[0-9a-fA-F]*$'\"\r\n                    [qname]=\"formElementRef._eoFormElement.qname\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [minLength]=\"32\"\r\n                    [maxLength]=\"32\"\r\n      ></eo-string>\r\n            \r\n    </eo-form-input>\r\n\r\n\r\n    <!-- BOOLEAN -->\r\n    <eo-form-input *ngSwitchCase=\"'BOOLEAN'\" [tag]=\"tag\" class=\"checkbox\" [label]=\"formElementRef._eoFormElement.label\"\r\n                    [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-checkbox [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                   [tristate]=\"true\"></eo-checkbox>\r\n    </eo-form-input>\r\n\r\n    <!-- CODESYSTEM -->\r\n    <eo-form-input *ngSwitchCase=\"'CODESYSTEM'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-codesystem [situation]=\"element._eoFormControlWrapper.situation\"\r\n                     [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                     [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                     [codesystem]=\"formElementRef._eoFormElement.codesystem\"\r\n                     [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                     [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\r\n                     [disablingFilterFunction]=\"formElementRef._eoFormElement.disablingFilterFunction\"\r\n                     [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-codesystem>\r\n    </eo-form-input>\r\n\r\n    <!-- ORGANIZATION -->\r\n    <eo-form-input *ngSwitchCase=\"'ORGANIZATION'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-organization [situation]=\"element._eoFormControlWrapper.situation\"\r\n                       [dataMeta]=\"formElementRef._eoFormElement.dataMeta\"\r\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                       [filterObject]=\"formElementRef._eoFormElement.filter\"\r\n                       [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                       (onDataMetaChanged)=\"organizationDataMetaResolved($event)\"\r\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-organization>\r\n    </eo-form-input>\r\n\r\n    <!-- NUMBER -->\r\n\r\n    <eo-form-input *ngSwitchCase=\"'NUMBER'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-number *ngIf=\"situation !== 'SEARCH'\"\r\n                 [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                 [precision]=\"formElementRef._eoFormElement.precision\"\r\n                 [scale]=\"formElementRef._eoFormElement.scale\"\r\n                 [grouping]=\"formElementRef._eoFormElement.grouping\"\r\n                 [pattern]=\"formElementRef._eoFormElement.pattern\"\r\n                 [formControlName]=\"element._eoFormControlWrapper.controlName\">\r\n      </eo-number>\r\n\r\n      <eo-number-range *ngIf=\"situation === 'SEARCH'\"\r\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                       [precision]=\"formElementRef._eoFormElement.precision\"\r\n                       [scale]=\"formElementRef._eoFormElement.scale\"\r\n                       [grouping]=\"formElementRef._eoFormElement.grouping\"\r\n                       [pattern]=\"formElementRef._eoFormElement.pattern\"\r\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-number-range>\r\n    </eo-form-input>\r\n\r\n    <!-- TABLE -->\r\n    <div class=\"table\" *ngSwitchCase=\"'TABLE'\">\r\n      <eo-table [params]=\"{\r\n        situation: element._eoFormControlWrapper.situation,\r\n        element: formElementRef._eoFormElement,\r\n        size: formElementRef._eoFormElement.size\r\n      }\" [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-table>\r\n    </div>\r\n\r\n    <!-- DATE AND DATETIME -->\r\n    <eo-form-input *ngSwitchCase=\"'DATETIME'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-datetime *ngIf=\"situation !== 'SEARCH'\"\r\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                   [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                   [withTime]=\"formElementRef._eoFormElement.withtime\"\r\n                   [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-datetime>\r\n\r\n      <eo-datetime-range *ngIf=\"situation === 'SEARCH'\"\r\n                         [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                         [withTime]=\"formElementRef._eoFormElement.withtime\"\r\n                         [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-datetime-range>\r\n    </eo-form-input>\r\n\r\n\r\n    <!-- print out the type if it's not matching anything -->\r\n    <div *ngSwitchDefault><b>{{formElementRef._eoFormElement.type}}</b></div>\r\n\r\n\r\n    <!-- the fields description -->\r\n    <div class=\"description\" *ngIf=\"formElementRef._eoFormElement.description\">{{formElementRef._eoFormElement.description}}</div>\r\n\r\n    <!-- error/validation messages -->\r\n    <div class=\"err-msg\" *ngIf=\"formElementRef.errors\">\r\n\r\n      <div *ngIf=\"formElementRef.errors.daterange\" translate>eo.form.property.daterange.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.numberrange\" translate>eo.form.property.numberrange.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.number\" translate>eo.form.property.number</div>\r\n      <div *ngIf=\"formElementRef.errors.precision\" translate\r\n           [translateParams]=\"formElementRef.errors.precision.translateValues\">{{formElementRef.errors.precision.translateKey}}</div>\r\n      <div *ngIf=\"formElementRef.errors.scale\" translate\r\n           [translateParams]=\"formElementRef.errors.scale.translateValues\">{{formElementRef.errors.scale.translateKey}}</div>\r\n\r\n      <div *ngIf=\"formElementRef.errors.regex || formElementRef.errors.pattern\" translate>eo.form.property.string.regex.nomatch</div>\r\n      <div *ngIf=\"formElementRef.errors.classificationemail\" translate>eo.form.property.string.error.classification.email</div>\r\n      <div *ngIf=\"formElementRef.errors.classificationurl\" translate>eo.form.property.string.error.classification.url</div>\r\n      <div *ngIf=\"formElementRef.errors.onlyWhitespaces\" translate>eo.form.property.string.error.whitespaces</div>\r\n      <div *ngIf=\"formElementRef.errors.datecontrol\" translate>eo.form.property.date.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.codesystem\" translate>eo.form.property.codesystem.value.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.eoformScript\">{{formElementRef._eoFormElement.error.msg}}</div>\r\n      <div *ngIf=\"formElementRef.errors.required\" translate>eo.form.property.required</div>\r\n      <div *ngIf=\"formElementRef.errors.maxlength\" translate [translateParams]=\"{maxlength: formElementRef._eoFormElement.maxlen}\">eo.form.property.maxlength</div>\r\n      <div *ngIf=\"formElementRef.errors.minlength\" translate [translateParams]=\"{minlength: formElementRef._eoFormElement.minlen}\">eo.form.property.minlength</div>\r\n      <div *ngIf=\"formElementRef.errors.deletedIDReference\" translate>eo.form.property.idreference.deleted</div>\r\n      <div *ngIf=\"formElementRef.errors.deletedOrgObject\" translate>eo.form.property.orgobject.deleted</div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"form-element\" [formGroup]=\"element\" *ngIf=\"element\">\r\n\r\n  <div class=\"form-field t-{{formElementRef._eoFormElement.type}}\" #formField\r\n       [ngSwitch]=\"formElementRef._eoFormElement.type\"\r\n       [ngClass]=\"{disabled: !!formElementRef._eoFormElement.readonly}\">\r\n\r\n    <!-- STRING -->\r\n    <eo-form-input *ngSwitchCase=\"'STRING'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-string\r\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification !== 'selector'\"\r\n        [situation]=\"element._eoFormControlWrapper.situation\"\r\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n        [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\r\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n        [multiline]=\"formElementRef._eoFormElement.multiline\"\r\n        [classification]=\"formElementRef._eoFormElement.classification\"\r\n        [regex]=\"formElementRef._eoFormElement.regex\"\r\n        [qname]=\"formElementRef._eoFormElement.qname\"\r\n        [size]=\"formElementRef._eoFormElement.size\"\r\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n        [minLength]=\"formElementRef._eoFormElement.minlen\"\r\n        [maxLength]=\"formElementRef._eoFormElement.maxlen\"\r\n      ></eo-string>\r\n\r\n      <!-- Dynamic List -->\r\n      <eo-dynamic-list\r\n        *ngIf=\"!formElementRef._eoFormElement.reference && formElementRef._eoFormElement.classification === 'selector'\"\r\n        [situation]=\"element._eoFormControlWrapper.situation\"\r\n        [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n        [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\r\n        [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n        [listObject]=\"formElementRef._eoFormElement.list\"\r\n        [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n        [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-dynamic-list>\r\n\r\n\r\n      <!-- Reference -->\r\n      <eo-reference *ngIf=\"formElementRef._eoFormElement.reference\"\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [reference]=\"formElementRef._eoFormElement.reference\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [minLength]=\"formElementRef._eoFormElement.minlen\"\r\n                    [maxLength]=\"formElementRef._eoFormElement.maxlen\"\r\n      ></eo-reference>\r\n    </eo-form-input>\r\n\r\n    <!-- ID-Reference -->\r\n    <eo-form-input *ngSwitchCase=\"'REFERENCE'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-id-reference\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [situation]=\"element._eoFormControlWrapper.situation\"\r\n                    [dataToRender]=\"formElementRef._eoFormElement.dataToRender\"\r\n                    [reference]=\"formElementRef._eoFormElement.reference\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [contextId]=\"formElementRef._eoFormElement.contextId\"\r\n                    [exceptionIDs]=\"formElementRef._eoFormElement.exceptionIDs\"\r\n                    [queryFilters]=\"formElementRef._eoFormElement.queryFilters\"\r\n                    [objectTypesFilter]=\"formElementRef._eoFormElement.objectTypesFilter\"\r\n      ></eo-id-reference>\r\n    </eo-form-input>\r\n\r\n    <!-- ID -->\r\n    <eo-form-input *ngSwitchCase=\"'ID'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-string\r\n                    [situation]=\"element._eoFormControlWrapper.situation\"\r\n                    [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                    [autocomplete]=\"formElementRef._eoFormElement.autocomplete\"\r\n                    [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                    [regex]=\"'^[0-9a-fA-F]*$'\"\r\n                    [qname]=\"formElementRef._eoFormElement.qname\"\r\n                    [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                    [minLength]=\"32\"\r\n                    [maxLength]=\"32\"\r\n      ></eo-string>\r\n\r\n    </eo-form-input>\r\n\r\n\r\n    <!-- BOOLEAN -->\r\n    <eo-form-input *ngSwitchCase=\"'BOOLEAN'\" [tag]=\"tag\" class=\"checkbox\" [label]=\"formElementRef._eoFormElement.label\"\r\n                    [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-checkbox [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                   [tristate]=\"true\"></eo-checkbox>\r\n    </eo-form-input>\r\n\r\n    <!-- CODESYSTEM -->\r\n    <eo-form-input *ngSwitchCase=\"'CODESYSTEM'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-codesystem [situation]=\"element._eoFormControlWrapper.situation\"\r\n                     [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                     [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                     [codesystem]=\"formElementRef._eoFormElement.codesystem\"\r\n                     [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                     [filterFunction]=\"formElementRef._eoFormElement.filterFunction\"\r\n                     [disablingFilterFunction]=\"formElementRef._eoFormElement.disablingFilterFunction\"\r\n                     [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-codesystem>\r\n    </eo-form-input>\r\n\r\n    <!-- ORGANIZATION -->\r\n    <eo-form-input *ngSwitchCase=\"'ORGANIZATION'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-organization [situation]=\"element._eoFormControlWrapper.situation\"\r\n                       [dataMeta]=\"formElementRef._eoFormElement.dataMeta\"\r\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                       [filterObject]=\"formElementRef._eoFormElement.filter\"\r\n                       [multiselect]=\"formElementRef._eoFormElement.multiselect\"\r\n                       (onDataMetaChanged)=\"organizationDataMetaResolved($event)\"\r\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-organization>\r\n    </eo-form-input>\r\n\r\n    <!-- NUMBER -->\r\n\r\n    <eo-form-input *ngSwitchCase=\"'NUMBER'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-number *ngIf=\"situation !== 'SEARCH'\"\r\n                 [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                 [precision]=\"formElementRef._eoFormElement.precision\"\r\n                 [scale]=\"formElementRef._eoFormElement.scale\"\r\n                 [grouping]=\"formElementRef._eoFormElement.grouping\"\r\n                 [pattern]=\"formElementRef._eoFormElement.pattern\"\r\n                 [formControlName]=\"element._eoFormControlWrapper.controlName\">\r\n      </eo-number>\r\n\r\n      <eo-number-range *ngIf=\"situation === 'SEARCH'\"\r\n                       [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                       [precision]=\"formElementRef._eoFormElement.precision\"\r\n                       [scale]=\"formElementRef._eoFormElement.scale\"\r\n                       [grouping]=\"formElementRef._eoFormElement.grouping\"\r\n                       [pattern]=\"formElementRef._eoFormElement.pattern\"\r\n                       [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-number-range>\r\n    </eo-form-input>\r\n\r\n    <!-- TABLE -->\r\n    <div class=\"table\" *ngSwitchCase=\"'TABLE'\">\r\n      <eo-table [params]=\"{\r\n        situation: element._eoFormControlWrapper.situation,\r\n        element: formElementRef._eoFormElement,\r\n        size: formElementRef._eoFormElement.size\r\n      }\" [formControlName]=\"element._eoFormControlWrapper.controlName\"></eo-table>\r\n    </div>\r\n\r\n    <!-- DATE AND DATETIME -->\r\n    <eo-form-input *ngSwitchCase=\"'DATETIME'\" [tag]=\"tag\" [label]=\"formElementRef._eoFormElement.label\"\r\n                   [isNull]=\"isNull\"\r\n                   [skipToggle]=\"skipToggle || situation !== 'SEARCH'\"\r\n                   (onToggleLabel)=\"labelToggled($event)\"\r\n                   [required]=\"formElementRef._eoFormElement.required\"\r\n                   [invalid]=\"formElementRef.invalid\">\r\n\r\n      <eo-datetime *ngIf=\"situation !== 'SEARCH'\"\r\n                   [readonly]=\"formElementRef._eoFormElement.readonly\"\r\n                   [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                   [withTime]=\"formElementRef._eoFormElement.withtime\"\r\n                   [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-datetime>\r\n\r\n      <eo-datetime-range *ngIf=\"situation === 'SEARCH'\"\r\n                         [pickerTitle]=\"formElementRef._eoFormElement.label\"\r\n                         [withTime]=\"formElementRef._eoFormElement.withtime\"\r\n                         [formControlName]=\"element._eoFormControlWrapper.controlName\"\r\n      ></eo-datetime-range>\r\n    </eo-form-input>\r\n\r\n\r\n    <!-- print out the type if it's not matching anything -->\r\n    <div *ngSwitchDefault><b>{{formElementRef._eoFormElement.type}}</b></div>\r\n\r\n\r\n    <!-- the fields description -->\r\n    <div class=\"description\" *ngIf=\"formElementRef._eoFormElement.description\">{{formElementRef._eoFormElement.description}}</div>\r\n\r\n    <!-- error/validation messages -->\r\n    <div class=\"err-msg\" *ngIf=\"formElementRef.errors\">\r\n\r\n      <div *ngIf=\"formElementRef.errors.daterange\" translate>eo.form.property.daterange.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.numberrange\" translate>eo.form.property.numberrange.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.number\" translate>eo.form.property.number</div>\r\n      <div *ngIf=\"formElementRef.errors.precision\" translate\r\n           [translateParams]=\"formElementRef.errors.precision.translateValues\">{{formElementRef.errors.precision.translateKey}}</div>\r\n      <div *ngIf=\"formElementRef.errors.scale\" translate\r\n           [translateParams]=\"formElementRef.errors.scale.translateValues\">{{formElementRef.errors.scale.translateKey}}</div>\r\n\r\n      <div *ngIf=\"formElementRef.errors.regex || formElementRef.errors.pattern\" translate>eo.form.property.string.regex.nomatch</div>\r\n      <div *ngIf=\"formElementRef.errors.classificationemail\" translate>eo.form.property.string.error.classification.email</div>\r\n      <div *ngIf=\"formElementRef.errors.classificationurl\" translate>eo.form.property.string.error.classification.url</div>\r\n      <div *ngIf=\"formElementRef.errors.onlyWhitespaces\" translate>eo.form.property.string.error.whitespaces</div>\r\n      <div *ngIf=\"formElementRef.errors.datecontrol\" translate>eo.form.property.date.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.codesystem\" translate>eo.form.property.codesystem.value.invalid</div>\r\n      <div *ngIf=\"formElementRef.errors.eoformScript\">{{formElementRef._eoFormElement.error.msg}}</div>\r\n      <div *ngIf=\"formElementRef.errors.required\" translate>eo.form.property.required</div>\r\n      <div *ngIf=\"formElementRef.errors.maxlength\" translate [translateParams]=\"{maxlength: formElementRef._eoFormElement.maxlen}\">eo.form.property.maxlength</div>\r\n      <div *ngIf=\"formElementRef.errors.minlength\" translate [translateParams]=\"{minlength: formElementRef._eoFormElement.minlen}\">eo.form.property.minlength</div>\r\n      <div *ngIf=\"formElementRef.errors.deletedIDReference\" translate>eo.form.property.idreference.deleted</div>\r\n      <div *ngIf=\"formElementRef.errors.deletedOrgObject\" translate>eo.form.property.orgobject.deleted</div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
                 styles: [":host-context(.dark) .form-element .form-field .err-msg{background-color:var(--color-error);border:0;border-radius:2px;color:var(--color-white);margin:calc(var(--app-pane-padding)/4) 0;padding:calc(var(--app-pane-padding)/4)}:host{flex:1 1 auto}:host.label-toggled::ng-deep eo-form-input label{text-decoration:line-through}.form-element{box-sizing:border-box}.form-element .form-field{margin:calc(var(--app-pane-padding)/4) calc(var(--app-pane-padding)/2)}.form-element .form-field .description{border:0;font-size:var(--font-hint);font-style:italic;padding:calc(var(--app-pane-padding)/8) calc(var(--app-pane-padding)/8) 0 calc(var(--app-pane-padding)/8)}.form-element .form-field .err-msg{border:0;color:var(--color-error);padding:calc(var(--app-pane-padding)/4) 0}.form-element .form-field .table{align-items:flex-start;border-color:transparent;flex-flow:column}.form-element .form-field .table .label{padding-bottom:calc(var(--app-pane-padding)/4)}.form-element.ng-dirty:not(.ng-invalid)>.form-field:not(.focused)::ng-deep label{background-color:var(--color-dirty-background);color:var(--color-dirty-font)!important}"]
             },] }
 ];
@@ -20627,7 +20694,7 @@ class ProcessHistoryComponent {
 ProcessHistoryComponent.decorators = [
     { type: Component, args: [{
                 selector: 'eo-process-history',
-                template: "<div class=\"process-history\">\r\n\r\n  <div class=\"filter\">\r\n    <div class=\"input\" [ngClass]=\"{inactive: !history?.length}\">\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_filter.svg'\"></eo-icon>\r\n      <input type=\"text\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"filterterm\">\r\n\r\n    </div>\r\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"filterterm = null\" *ngIf=\"filterterm\"></eo-icon>\r\n  </div>\r\n\r\n\r\n  <ng-template #empty>\r\n    <eo-error-message [emptyState]=\"{icon: 'ic_no-file.svg', text: 'eo.timeline.empty', className: 'history empty'}\"></eo-error-message>\r\n  </ng-template>\r\n\r\n\r\n  <div class=\"history eo-timeline\" [ngClass]=\"{single: history?.length === 1}\" *ngIf=\"history?.length; else empty\">\r\n\r\n    <div class=\"timeline-entry\"\r\n         *ngFor=\"let entry of history | historyFilter:filterterm; trackBy: trackByIndex\"\r\n         [ngClass]=\"{user: entry.editor, error: entry.type === 'error' || entry?.errorType}\">\r\n\r\n      <div class=\"when\">\r\n        <div class=\"date\">{{entry.time | localeDate: 'eoShortDate'}}</div>\r\n        <div class=\"time\">{{entry.time | localeDate: 'eoShortTime'}}</div>\r\n      </div>\r\n      <div class=\"marker\">\r\n        <img *ngIf=\"entry.editor\"\r\n             title=\"{{entry.editor.lastname}}, {{entry.editor.firstname}} ({{entry.editor.name}})\"\r\n             [src]=\"entry.data?.image\">\r\n      </div>\r\n      <div class=\"what\">\r\n        <div class=\"title\">{{entry.title}}</div>\r\n\r\n        <div class=\"description\" *ngIf=\"entry.data?.periodFireTime && entry.type === 'DEADLINE_START'; else description\">\r\n          <div class=\"deadline-fire\">\r\n            <eo-icon [iconSrc]=\"'assets/_default/svg/ic_timer.svg'\"></eo-icon>\r\n            <span>{{entry.data.periodFireTime | localeDate}}</span>\r\n          </div>\r\n        </div>\r\n        <ng-template #description>\r\n          <div class=\"description\">\r\n            {{'eo.process.details.history.entry.type.' + entry.type + '.title'|translate}}\r\n          </div>\r\n        </ng-template>\r\n\r\n        <div class=\"meta\" *ngIf=\"entry.performer?.length\">\r\n          <span *ngFor=\"let p of entry.performer; trackBy: trackByIndex\">\r\n            {{p.label}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"process-history\">\r\n\r\n  <div class=\"filter\">\r\n    <div class=\"input\" [ngClass]=\"{inactive: !history?.length}\">\r\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_filter.svg'\"></eo-icon>\r\n      <input type=\"text\" [ngModelOptions]=\"{standalone: true}\" [(ngModel)]=\"filterterm\">\r\n\r\n    </div>\r\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_clear.svg'\" (click)=\"filterterm = null\" *ngIf=\"filterterm\"></eo-icon>\r\n  </div>\r\n\r\n\r\n  <ng-template #empty>\r\n    <eo-error-message [emptyState]=\"{icon: 'ic_no-file.svg', text: 'eo.timeline.empty', className: 'history empty'}\"></eo-error-message>\r\n  </ng-template>\r\n\r\n\r\n  <div class=\"history eo-timeline\" [ngClass]=\"{single: history?.length === 1}\" *ngIf=\"history?.length; else empty\">\r\n\r\n    <div class=\"timeline-entry\"\r\n         *ngFor=\"let entry of history | historyFilter:filterterm; trackBy: trackByIndex\"\r\n         [ngClass]=\"{user: entry.editor, error: entry.type === 'error' || entry?.errorType}\">\r\n\r\n      <div class=\"when\">\r\n        <div class=\"date\">{{entry.time | localeDate: 'eoShortDate'}}</div>\r\n        <div class=\"time\">{{entry.time | localeDate: 'eoShortTime'}}</div>\r\n      </div>\r\n      <div class=\"marker\">\r\n        <img *ngIf=\"entry.editor\"\r\n             title=\"{{entry.editor.lastname}}, {{entry.editor.firstname}} ({{entry.editor.name}})\"\r\n             [src]=\"entry.data?.image\">\r\n      </div>\r\n      <div class=\"what\">\r\n        <div class=\"title\">{{entry.title}}</div>\r\n\r\n        <div class=\"description\" *ngIf=\"entry.data?.periodFireTime && entry.type === 'DEADLINE_START'; else description\">\r\n          <div class=\"deadline-fire\">\r\n            <eo-icon [iconSrc]=\"'assets/_default/svg/ic_timer.svg'\"></eo-icon>\r\n            <span>{{entry.data.periodFireTime | localeDate}}</span>\r\n          </div>\r\n        </div>\r\n        <ng-template #description>\r\n          <div *ngIf=\"entry.type !== 'USERDEFINED'; else userDefined\" class=\"description\">\r\n            {{'eo.process.details.history.entry.type.' + entry.type + '.title'|translate}}\r\n          </div>\r\n\r\n          <ng-template #userDefined>\r\n            <div class=\"description\">\r\n              {{entry.description}}\r\n            </div>\r\n          </ng-template>\r\n        </ng-template>\r\n\r\n        <div class=\"meta\" *ngIf=\"entry.performer?.length\">\r\n          <span *ngFor=\"let p of entry.performer; trackBy: trackByIndex\">\r\n            {{p.label}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\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 .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}"]
             },] }
@@ -22123,10 +22190,10 @@ class AboutStateComponent {
         this.http = http;
         this.userService = userService;
         this.config = config;
-        this.__libraries__ = [{ "name": "@ag-grid-community/angular", "version": "22.1.2", "license": "MIT" }, { "name": "@ag-grid-community/client-side-row-model", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/core", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/csv-export", "version": "22.1.1", "license": "MIT" }, { "name": "@angular/animations", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/cdk", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/common", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/compiler", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/core", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/forms", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser-dynamic", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/router", "version": "11.2.0", "license": "MIT" }, { "name": "@eo-sdk/core", "version": "8.2.0", "license": "MIT" }, { "name": "@ngx-pwa/local-storage", "version": "11.1.0", "license": "MIT" }, { "name": "@ngx-translate/core", "version": "13.0.0", "license": "MIT" }, { "name": "@types/lodash", "version": "4.14.88", "license": "MIT" }, { "name": "core-js", "version": "2.5.7", "license": "MIT" }, { "name": "file-saver", "version": "2.0.5", "license": "MIT" }, { "name": "font-awesome", "version": "4.7.0", "license": "(OFL-1.1 AND MIT)" }, { "name": "keyboardevent-key-polyfill", "version": "1.1.0", "license": "CC0-1.0" }, { "name": "keycode-js", "version": "0.0.4", "license": "MIT" }, { "name": "mobile-drag-drop", "version": "2.2.0", "license": "MIT" }, { "name": "moment", "version": "2.22.2", "license": "MIT" }, { "name": "ngx-toastr", "version": "13.2.0", "license": "MIT" }, { "name": "primeicons", "version": "1.0.0-beta.6", "license": "MIT" }, { "name": "primeng", "version": "6.0.0-beta.1", "license": "MIT" }, { "name": "reflect-metadata", "version": "0.1.10", "license": "Apache-2.0" }, { "name": "rxjs", "version": "6.6.3", "license": "Apache-2.0" }, { "name": "tslib", "version": "2.1.0", "license": "0BSD" }, { "name": "zone.js", "version": "0.10.3", "license": "MIT" }];
+        this.__libraries__ = [{ "name": "@ag-grid-community/angular", "version": "22.1.2", "license": "MIT" }, { "name": "@ag-grid-community/client-side-row-model", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/core", "version": "22.1.1", "license": "MIT" }, { "name": "@ag-grid-community/csv-export", "version": "22.1.1", "license": "MIT" }, { "name": "@angular/animations", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/cdk", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/common", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/compiler", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/core", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/forms", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/platform-browser-dynamic", "version": "11.2.0", "license": "MIT" }, { "name": "@angular/router", "version": "11.2.0", "license": "MIT" }, { "name": "@eo-sdk/core", "version": "8.4.0-rc.2", "license": "MIT" }, { "name": "@ngx-pwa/local-storage", "version": "11.1.0", "license": "MIT" }, { "name": "@ngx-translate/core", "version": "13.0.0", "license": "MIT" }, { "name": "@types/lodash", "version": "4.14.88", "license": "MIT" }, { "name": "core-js", "version": "2.5.7", "license": "MIT" }, { "name": "file-saver", "version": "2.0.5", "license": "MIT" }, { "name": "font-awesome", "version": "4.7.0", "license": "(OFL-1.1 AND MIT)" }, { "name": "keyboardevent-key-polyfill", "version": "1.1.0", "license": "CC0-1.0" }, { "name": "keycode-js", "version": "0.0.4", "license": "MIT" }, { "name": "mobile-drag-drop", "version": "2.2.0", "license": "MIT" }, { "name": "moment", "version": "2.22.2", "license": "MIT" }, { "name": "ngx-toastr", "version": "13.2.0", "license": "MIT" }, { "name": "primeicons", "version": "1.0.0-beta.6", "license": "MIT" }, { "name": "primeng", "version": "6.0.0-beta.1", "license": "MIT" }, { "name": "reflect-metadata", "version": "0.1.10", "license": "Apache-2.0" }, { "name": "rxjs", "version": "6.6.3", "license": "Apache-2.0" }, { "name": "tslib", "version": "2.1.0", "license": "0BSD" }, { "name": "zone.js", "version": "0.10.3", "license": "MIT" }];
         this.ctrl = {
             productName: 'yuuvis® RAD client',
-            clientVersion: '8.2.0'
+            clientVersion: '8.4.0-rc.2'
         };
         this.licenses = {
             'MIT': {