@eo-sdk/client 11.14.19 → 11.14.20

package/fesm2022/eo-sdk-client.mjs

@@ -5243,6 +5243,11 @@ class CodesystemComponent {
         this.isTableFilter = false;
         this.autocompleteValues = [];
         this.isSearch = false;
+        // Properties to prevent accidental value loss when user clicks in/out of autocomplete
+        this.userIntentionallyClearedValue = false;
+        this.lastValidSelectedNodes = null;
+        this.isRestoringValue = false;
+        this.hasFocused = false;
         this.inputStyleClass = '';
         this.emptyMessage = 'eo.error.structure.tree.not.available';
         this.isTableElement = false;
@@ -5318,21 +5323,34 @@ class CodesystemComponent {
         const wasInvalid = !this.isValid;
         this.isValid = true;
         //this.updateTree();
+        this.userIntentionallyClearedValue = false;
+        this.storeLastValidSelection();
         this.setFormControlValue(wasInvalid);
     }
-    onAutocompleteValueChange(v) {
-        if (v === undefined) {
-            this.selectedNodes = null;
+    // handler invoked when autocomplete value changes
+    onAutocompleteValueChange(newValue) {
+        // Prevent interference when restoring values
+        if (this.isRestoringValue) {
+            return;
+        }
+        // Handle value clearing
+        if (newValue === undefined) {
+            this.selectedNodes = this.multiselect ? [] : null;
             this.setFormControlValue();
+            return;
         }
+        // Normal value changes
+        this.userIntentionallyClearedValue = false;
+        this.storeLastValidSelection();
     }
     // handler invoked when an entry was deselected using the autocomplete input
     onAutoCompleteUnselect(node) {
         this.selectedNodes = this.selectedNodes.filter(sNode => sNode.id !== node.id);
         //this.updateTree();
-        this.setFormControlValue();
+        this.storeLastValidSelection();
+        this.setFormControlValue(true);
     }
-    // triggered when the selection was changed by
+    // triggered when the selection was changed by tree component
     onTreeSelectionChanged(evt) {
         if (!this.multiselect) {
             // hide the dialog
@@ -5340,13 +5358,44 @@ class CodesystemComponent {
         }
         const wasInvalid = !this.isValid;
         this.isValid = true;
+        this.userIntentionallyClearedValue = false;
+        this.storeLastValidSelection();
         this.setFormControlValue(wasInvalid);
     }
     onClear() {
+        this.userIntentionallyClearedValue = true;
+        this.lastValidSelectedNodes = null;
         if (!this.multiselect) {
             this.selectedNodes = null;
         }
-        this.setFormControlValue();
+        this.setFormControlValue(true);
+    }
+    // handler invoked when autocomplete gains focus
+    onAutocompleteFocus() {
+        this.hasFocused = true;
+        this.userIntentionallyClearedValue = false;
+        // Store current selection as backup
+        if (this.selectedNodes) {
+            this.lastValidSelectedNodes = structuredClone(this.selectedNodes);
+        }
+    }
+    // handler invoked when autocomplete loses focus
+    onAutocompleteBlur() {
+        // Skip if not properly focused or currently restoring
+        if (!this.hasFocused || this.isRestoringValue) {
+            return;
+        }
+        // Check if value was accidentally cleared (by component behavior)
+        const wasAccidentallyCleared = (!this.selectedNodes || (Array.isArray(this.selectedNodes) && this.selectedNodes.length === 0))
+            && this.lastValidSelectedNodes
+            && !this.userIntentionallyClearedValue;
+        if (wasAccidentallyCleared) {
+            this.restoreValue();
+        }
+        else if (this.userIntentionallyClearedValue) {
+            this.setFormControlValue(true);
+        }
+        this.hasFocused = false;
     }
     /**
      * Sets and propagates the form controls value based on the components inner values. Propagates only
@@ -5508,6 +5557,28 @@ class CodesystemComponent {
                 }
             };
     }
+    // Store the last valid selection for restoration purposes
+    storeLastValidSelection() {
+        if (this.selectedNodes) {
+            this.lastValidSelectedNodes = structuredClone(this.selectedNodes);
+        }
+    }
+    // Restore accidentally cleared values
+    restoreValue() {
+        if (!this.lastValidSelectedNodes) {
+            return;
+        }
+        this.isRestoringValue = true;
+        this.selectedNodes = structuredClone(this.lastValidSelectedNodes);
+        // Update the autocomplete component
+        setTimeout(() => {
+            if (this.autoCompleteInput) {
+                this.autoCompleteInput.writeValue(this.selectedNodes);
+                this.setFormControlValue(false);
+            }
+            this.isRestoringValue = false;
+        }, 10);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CodesystemComponent, deps: [{ token: i1.SystemService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CodesystemComponent, selector: "eo-codesystem", inputs: { situation: "situation", pickerTitle: "pickerTitle", placeholder: "placeholder", codesystem: "codesystem", multiselect: "multiselect", readonly: "readonly", inputStyleClass: "inputStyleClass", emptyMessage: "emptyMessage", isTableElement: "isTableElement", filterFunction: "filterFunction", disablingFilterFunction: "disablingFilterFunction" }, providers: [
             {
@@ -5520,7 +5591,7 @@ class CodesystemComponent {
                 useExisting: forwardRef(() => CodesystemComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "autoCompleteInput", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "autoCompleteButton", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<div class=\"eo-codesystem\" *ngIf=\"codesystem\"\n  [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length, readonly: readonly}\">\n  @if (isSearch && !isTableFilter && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [autocompleteValues]=\"autocompleteRes\" field=\"name\"\n    [disabled]=\"readonly\" [placeholder]=\"placeholder\" [forceSelection]=\"!readonly\" (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"multiselect\" (ngModelChange)=\"onAutocompleteValueChange($event)\" [(ngModel)]=\"selectedNodes\">\n  </yvc-autocomplete>\n  @if (!readonly) {\n    <button type=\"button\" #button (click)=\"setDialogVisible(true, $event)\" (keydown.enter)=\"setDialogVisible(true, $event)\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n    </button>\n  }\n</div>\n\n<eo-dialog [title]=\"pickerTitle || ''\" [visible]=\"display\" (hide)=\"display = false\">\n  @if (display) {\n    <eo-tree [tree]=\"tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n             [(ngModel)]=\"selectedNodes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" [readonly]=\"readonly\"\n             [emptyMessage]=\"emptyMessage\">\n    </eo-tree>\n  }\n</eo-dialog>\n", styles: [".eo-codesystem{display:flex;align-items:center;justify-content:space-between}.eo-codesystem yvc-autocomplete{display:flex;flex:1;border:0;outline:0}.eo-codesystem>button{padding:0;z-index:9}.eo-codesystem>button eo-icon{width:16px;height:16px;margin:auto}.eo-codesystem.readonly ::ng-deep .chip yvc-icon{display:none}.eo-codesystem.full ::ng-deep yvc-autocomplete .inputToken{display:none}.eo-codesystem yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}.eo-codesystem yvc-dropdown:hover{background-color:var(--list-item-selected-background)}.eo-codesystem yvc-dropdown ::ng-deep yvc-icon{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EoIconComponent, selector: "eo-icon", inputs: ["objectType", "iconId", "iconSrc", "badge", "iconTitle"] }, { kind: "component", type: EoDialogComponent, selector: "eo-dialog", inputs: ["hasPreviewFile", "title", "subtitle", "styleClass", "dirtyCheck", "minWidth", "minHeight", "height", "width", "focusOnShow", "align", "isFormTable", "showPreview", "closeOnCancelOnly", "visible"], outputs: ["onTogglePreview", "visibleChange", "hide", "show"] }, { kind: "component", type: TreeComponent, selector: "eo-tree", inputs: ["options", "isDisplayed", "readonly", "emptyMessage", "selectionKey", "highlightedNodes", "tree", "treeUpdate"], outputs: ["expandedNodesChanged", "onSelected"] }, { kind: "component", type: i11.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "component", type: i8.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
+        ], viewQueries: [{ propertyName: "autoCompleteInput", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "autoCompleteButton", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<div class=\"eo-codesystem\" *ngIf=\"codesystem\"\n  [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length, readonly: readonly}\">\n  @if (isSearch && !isTableFilter && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [autocompleteValues]=\"autocompleteRes\" field=\"name\"\n    [disabled]=\"readonly\" [placeholder]=\"placeholder\" [forceSelection]=\"false\" (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"multiselect\" (ngModelChange)=\"onAutocompleteValueChange($event)\" [(ngModel)]=\"selectedNodes\"(focus)=\"onAutocompleteFocus()\" (blur)=\"onAutocompleteBlur()\">\n  </yvc-autocomplete>\n  @if (!readonly) {\n    <button type=\"button\" #button (click)=\"setDialogVisible(true, $event)\" (keydown.enter)=\"setDialogVisible(true, $event)\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n    </button>\n  }\n</div>\n\n<eo-dialog [title]=\"pickerTitle || ''\" [visible]=\"display\" (hide)=\"display = false\">\n  @if (display) {\n    <eo-tree [tree]=\"tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n             [(ngModel)]=\"selectedNodes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" [readonly]=\"readonly\"\n             [emptyMessage]=\"emptyMessage\">\n    </eo-tree>\n  }\n</eo-dialog>\n", styles: [".eo-codesystem{display:flex;align-items:center;justify-content:space-between}.eo-codesystem yvc-autocomplete{display:flex;flex:1;border:0;outline:0}.eo-codesystem>button{padding:0;z-index:9}.eo-codesystem>button eo-icon{width:16px;height:16px;margin:auto}.eo-codesystem.readonly ::ng-deep .chip yvc-icon{display:none}.eo-codesystem.full ::ng-deep yvc-autocomplete .inputToken{display:none}.eo-codesystem yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}.eo-codesystem yvc-dropdown:hover{background-color:var(--list-item-selected-background)}.eo-codesystem yvc-dropdown ::ng-deep yvc-icon{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EoIconComponent, selector: "eo-icon", inputs: ["objectType", "iconId", "iconSrc", "badge", "iconTitle"] }, { kind: "component", type: EoDialogComponent, selector: "eo-dialog", inputs: ["hasPreviewFile", "title", "subtitle", "styleClass", "dirtyCheck", "minWidth", "minHeight", "height", "width", "focusOnShow", "align", "isFormTable", "showPreview", "closeOnCancelOnly", "visible"], outputs: ["onTogglePreview", "visibleChange", "hide", "show"] }, { kind: "component", type: TreeComponent, selector: "eo-tree", inputs: ["options", "isDisplayed", "readonly", "emptyMessage", "selectionKey", "highlightedNodes", "tree", "treeUpdate"], outputs: ["expandedNodesChanged", "onSelected"] }, { kind: "component", type: i11.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "component", type: i8.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CodesystemComponent, decorators: [{
             type: Component,
@@ -5535,7 +5606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                             useExisting: forwardRef(() => CodesystemComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"eo-codesystem\" *ngIf=\"codesystem\"\n  [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length, readonly: readonly}\">\n  @if (isSearch && !isTableFilter && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [autocompleteValues]=\"autocompleteRes\" field=\"name\"\n    [disabled]=\"readonly\" [placeholder]=\"placeholder\" [forceSelection]=\"!readonly\" (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"multiselect\" (ngModelChange)=\"onAutocompleteValueChange($event)\" [(ngModel)]=\"selectedNodes\">\n  </yvc-autocomplete>\n  @if (!readonly) {\n    <button type=\"button\" #button (click)=\"setDialogVisible(true, $event)\" (keydown.enter)=\"setDialogVisible(true, $event)\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n    </button>\n  }\n</div>\n\n<eo-dialog [title]=\"pickerTitle || ''\" [visible]=\"display\" (hide)=\"display = false\">\n  @if (display) {\n    <eo-tree [tree]=\"tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n             [(ngModel)]=\"selectedNodes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" [readonly]=\"readonly\"\n             [emptyMessage]=\"emptyMessage\">\n    </eo-tree>\n  }\n</eo-dialog>\n", styles: [".eo-codesystem{display:flex;align-items:center;justify-content:space-between}.eo-codesystem yvc-autocomplete{display:flex;flex:1;border:0;outline:0}.eo-codesystem>button{padding:0;z-index:9}.eo-codesystem>button eo-icon{width:16px;height:16px;margin:auto}.eo-codesystem.readonly ::ng-deep .chip yvc-icon{display:none}.eo-codesystem.full ::ng-deep yvc-autocomplete .inputToken{display:none}.eo-codesystem yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}.eo-codesystem yvc-dropdown:hover{background-color:var(--list-item-selected-background)}.eo-codesystem yvc-dropdown ::ng-deep yvc-icon{display:none}\n"] }]
+                    ], template: "<div class=\"eo-codesystem\" *ngIf=\"codesystem\"\n  [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length, readonly: readonly}\">\n  @if (isSearch && !isTableFilter && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [autocompleteValues]=\"autocompleteRes\" field=\"name\"\n    [disabled]=\"readonly\" [placeholder]=\"placeholder\" [forceSelection]=\"false\" (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"multiselect\" (ngModelChange)=\"onAutocompleteValueChange($event)\" [(ngModel)]=\"selectedNodes\"(focus)=\"onAutocompleteFocus()\" (blur)=\"onAutocompleteBlur()\">\n  </yvc-autocomplete>\n  @if (!readonly) {\n    <button type=\"button\" #button (click)=\"setDialogVisible(true, $event)\" (keydown.enter)=\"setDialogVisible(true, $event)\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n    </button>\n  }\n</div>\n\n<eo-dialog [title]=\"pickerTitle || ''\" [visible]=\"display\" (hide)=\"display = false\">\n  @if (display) {\n    <eo-tree [tree]=\"tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n             [(ngModel)]=\"selectedNodes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" [readonly]=\"readonly\"\n             [emptyMessage]=\"emptyMessage\">\n    </eo-tree>\n  }\n</eo-dialog>\n", styles: [".eo-codesystem{display:flex;align-items:center;justify-content:space-between}.eo-codesystem yvc-autocomplete{display:flex;flex:1;border:0;outline:0}.eo-codesystem>button{padding:0;z-index:9}.eo-codesystem>button eo-icon{width:16px;height:16px;margin:auto}.eo-codesystem.readonly ::ng-deep .chip yvc-icon{display:none}.eo-codesystem.full ::ng-deep yvc-autocomplete .inputToken{display:none}.eo-codesystem yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}.eo-codesystem yvc-dropdown:hover{background-color:var(--list-item-selected-background)}.eo-codesystem yvc-dropdown ::ng-deep yvc-icon{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.SystemService }], propDecorators: { autoCompleteInput: [{
                 type: ViewChild,
                 args: ['autocomplete']
@@ -7216,7 +7287,7 @@ class DynamicListComponent {
         this.hasFormElementChanged = false;
         this.isSearch = false;
         this.isPropagatingChange = false;
-        // options for search situation
+        this.initialValueOnFocus = null;
         this.availableSearchOptions = [
             { label: RangeValue.getOperatorLabel(SearchFilter.OPERATOR.EQUAL), value: SearchFilter.OPERATOR.IN },
             { label: RangeValue.getOperatorLabel(SearchFilter.OPERATOR.USE_NOT), value: SearchFilter.OPERATOR.USE_NOT, actualOperator: SearchFilter.OPERATOR.IN },
@@ -7226,6 +7297,13 @@ class DynamicListComponent {
         this.isValid = true;
         this.propagateChange = (_) => {
         };
+        // Prevent autocomplete from losing values when user clicks in/out
+        this.userIntentionallyClearedValue = false;
+        this.hasFocusedInput = false;
+        this.hasUserInput = false;
+        this.inputFieldValue = '';
+        this.lastValidSelectedNodes = null;
+        this.onTouchedCallback = () => { };
         // Check if the new search value is different from the previous search value and the current value.
         this.autocompleteSearchValue$.pipe(debounceTime$1(300)).subscribe(value => {
             if (value !== this.previousSearchValue && value !== this.value) {
@@ -7311,6 +7389,7 @@ class DynamicListComponent {
         }
     }
     writeValue(value) {
+        this.isPropagatingChange = true;
         this.value = value?.value || value || null;
         const values = !this.value || Array.isArray(this.value) ? this.value || [] : [this.value];
         if (value && value.operator) {
@@ -7325,6 +7404,7 @@ class DynamicListComponent {
             else {
                 this.selectedNodes = null;
             }
+            this.lastValidSelectedNodes = null;
         }
         else {
             if (this.multiselect) {
@@ -7349,11 +7429,13 @@ class DynamicListComponent {
                 }
                 this.selectedNodes = node;
             }
+            this.storeLastValidSelection();
         }
         const nodes = !this.selectedNodes || Array.isArray(this.selectedNodes) ? this.selectedNodes || [] : [this.selectedNodes];
         if (this._list && (nodes.length !== values.length || nodes.some((n, i) => n[this.title ? this.title : this.valueField] !== values[i]))) {
             this.buildTree();
         }
+        this.isPropagatingChange = false;
     }
     onValueChange() {
         this.setFormControlValue(true);
@@ -7366,6 +7448,7 @@ class DynamicListComponent {
     onAutoCompleteSelect(node) {
         const wasInvalid = !this.isValid;
         this.isValid = true;
+        this.storeLastValidSelection();
         this.setFormControlValue(wasInvalid);
         if (this.hasAutocompleteUrl) {
             this.fetchAutocompleteData();
@@ -7375,13 +7458,181 @@ class DynamicListComponent {
         this.selectedNodes = this.selectedNodes.filter((sNode) => sNode.value !== node.value);
         this.setFormControlValue();
     }
+    onAutocompleteModelChange(newValue) {
+        if (!newValue || (Array.isArray(newValue) && newValue.length === 0)) {
+            if (this.selectedNodes && this.inputFieldValue === '') {
+                this.userIntentionallyClearedValue = true;
+                this.lastValidSelectedNodes = null;
+                this.selectedNodes = null;
+                this.value = null;
+                this.setFormControlValue(true);
+                return;
+            }
+        }
+        else {
+            this.userIntentionallyClearedValue = false;
+        }
+        // Restore selection if autocomplete accidentally clears it
+        if (!this.isSearch && !this.userIntentionallyClearedValue &&
+            ((!newValue || (Array.isArray(newValue) && newValue.length === 0)) && this.lastValidSelectedNodes)) {
+            setTimeout(() => {
+                this.selectedNodes = structuredClone(this.lastValidSelectedNodes);
+            });
+            return;
+        }
+        this.onTreeSelectionChanged(newValue);
+    }
+    onAutocompleteFocus() {
+        this.hasFocusedInput = true;
+        this.hasUserInput = false;
+        this.userIntentionallyClearedValue = false;
+        // Store initial value to detect actual changes later
+        if (this.value !== null && this.value !== undefined) {
+            this.initialValueOnFocus = this.value ? structuredClone(this.value) : this.value;
+        }
+        else if (this.selectedNodes) {
+            if (Array.isArray(this.selectedNodes)) {
+                this.initialValueOnFocus = this.selectedNodes.map(node => node[this.valueField]);
+            }
+            else {
+                this.initialValueOnFocus = this.selectedNodes[this.valueField] || this.selectedNodes.value;
+            }
+        }
+        else {
+            this.initialValueOnFocus = null;
+        }
+    }
+    onAutocompleteInput(event) {
+        this.hasUserInput = true;
+        const newInputValue = event.target.value || '';
+        if (newInputValue.length > 0) {
+            this.userIntentionallyClearedValue = false;
+        }
+        else if (newInputValue === '' && this.selectedNodes) {
+            this.userIntentionallyClearedValue = true;
+        }
+        this.inputFieldValue = newInputValue;
+    }
+    onAutocompleteKeydown(event) {
+        if ((event.key === 'Delete' || event.key === 'Backspace')) {
+            if (this.selectedNodes && (this.inputFieldValue === '' || this.inputFieldValue.length <= 1)) {
+                this.userIntentionallyClearedValue = true;
+                this.setFormControlValue(true);
+            }
+        }
+    }
+    onAutocompleteBlur() {
+        // Skip form updates if user just clicked in/out without changes
+        if (!this.hasUserInput && !this.userIntentionallyClearedValue) {
+            this.onTouchedCallback();
+            this.resetTrackingFlags();
+            return;
+        }
+        if (this.inputFieldValue === '' && this.selectedNodes && this.hasUserInput) {
+            this.userIntentionallyClearedValue = true;
+        }
+        let shouldPropagateChange = false;
+        let finalValue = this.value;
+        if (this.userIntentionallyClearedValue) {
+            // Check if there was actually a value to clear
+            const hadValueBefore = (this.initialValueOnFocus !== null && this.initialValueOnFocus !== undefined) ||
+                (this.selectedNodes !== null && this.selectedNodes !== undefined);
+            this.selectedNodes = null;
+            this.value = null;
+            this.lastValidSelectedNodes = null;
+            finalValue = null;
+            if (hadValueBefore) {
+                shouldPropagateChange = true;
+            }
+        }
+        else {
+            // Check if restoration is needed (accidental clearing)
+            const needsRestoration = (!this.selectedNodes || (Array.isArray(this.selectedNodes) && this.selectedNodes.length === 0))
+                && this.lastValidSelectedNodes;
+            if (needsRestoration) {
+                this.restoreSelectionIfNeeded();
+                finalValue = this.selectedNodes && this.selectedNodes.data ? this.selectedNodes.data[this.valueField] :
+                    (this.selectedNodes ? this.selectedNodes[this.valueField] : null);
+                if (!this.valuesAreEqual(finalValue, this.initialValueOnFocus)) {
+                    shouldPropagateChange = true;
+                }
+            }
+        }
+        this.onTouchedCallback();
+        if (shouldPropagateChange) {
+            this.setFormControlValue(true);
+        }
+        this.resetTrackingFlags();
+    }
+    resetTrackingFlags() {
+        this.hasFocusedInput = false;
+        this.hasUserInput = false;
+        this.userIntentionallyClearedValue = false;
+        this.inputFieldValue = '';
+        this.initialValueOnFocus = null;
+    }
+    valuesAreEqual(value1, value2) {
+        if (value1 === value2)
+            return true;
+        if (value1 === null || value2 === null)
+            return false;
+        if (value1 === undefined || value2 === undefined)
+            return false;
+        if (Array.isArray(value1) && Array.isArray(value2)) {
+            if (value1.length !== value2.length)
+                return false;
+            return value1.every((val, index) => val === value2[index]);
+        }
+        if (typeof value1 === 'object' && typeof value2 === 'object') {
+            if (value1.operator !== value2.operator)
+                return false;
+            if (Array.isArray(value1.value) && Array.isArray(value2.value)) {
+                return this.valuesAreEqual(value1.value, value2.value);
+            }
+            return value1.value === value2.value;
+        }
+        return false;
+    }
     onTreeSelectionChanged(evt) {
-        if (!this.multiselect) {
-            this.display = false;
+        if (evt !== undefined && evt !== null) {
+            if (!this.multiselect) {
+                this.display = false;
+            }
+            const wasInvalid = !this.isValid;
+            this.isValid = true;
+            this.storeLastValidSelection();
+            this.setFormControlValue(wasInvalid);
+        }
+        else {
+            this.restoreSelectionIfNeeded();
+        }
+    }
+    onAutocompleteClear() {
+        this.userIntentionallyClearedValue = true;
+        this.lastValidSelectedNodes = null;
+        this.selectedNodes = null;
+        this.value = null;
+        this.setFormControlValue(true);
+    }
+    storeLastValidSelection() {
+        if (this.selectedNodes) {
+            this.lastValidSelectedNodes = structuredClone(this.selectedNodes);
+        }
+    }
+    restoreSelectionIfNeeded() {
+        if ((!this.selectedNodes || (Array.isArray(this.selectedNodes) && this.selectedNodes.length === 0))
+            && this.lastValidSelectedNodes && !this.userIntentionallyClearedValue) {
+            this.selectedNodes = structuredClone(this.lastValidSelectedNodes);
+        }
+    }
+    maintainSelection() {
+        if (this.selectedNodes && this.value) {
+            setTimeout(() => {
+                if (this.autoCompleteInput && this.selectedNodes) {
+                    this.autoCompleteInput.writeValue(this.selectedNodes);
+                }
+            });
         }
-        const wasInvalid = !this.isValid;
-        this.isValid = true;
-        this.setFormControlValue(wasInvalid);
     }
     /**
      * Handles the autocomplete functionality based on the provided search term.
@@ -7403,7 +7654,6 @@ class DynamicListComponent {
         if (event) {
             event.stopPropagation();
             event.preventDefault();
-            //ignore synthetized events on enter
             if (event.type === 'click' && event.detail === 0) {
                 return;
             }
@@ -7480,6 +7730,7 @@ class DynamicListComponent {
      * @param forcePropagation - forces propagation even if the value hasn't been changed
      */
     setFormControlValue(forcePropagation) {
+        this.isPropagatingChange = true;
         let v;
         let changed;
         if (this.multiselect && Array.isArray(this.selectedNodes)) {
@@ -7487,7 +7738,8 @@ class DynamicListComponent {
             changed = !this.value || !(v.length === this.value.length && v.every((val) => this.value.some((curVal) => curVal === val)));
         }
         else {
-            v = this.selectedNodes && this.selectedNodes.data ? this.selectedNodes?.data[this.valueField] : null;
+            v = this.selectedNodes && this.selectedNodes.data ? this.selectedNodes?.data[this.valueField] :
+                (this.selectedNodes ? this.selectedNodes[this.valueField] : null);
             changed = v !== this.value;
         }
         if (changed || forcePropagation) {
@@ -7502,6 +7754,7 @@ class DynamicListComponent {
             }
             this.propagateChange(this.value);
         }
+        this.isPropagatingChange = false;
     }
     buildTree() {
         this.autocompleteValues = [];
@@ -7656,7 +7909,7 @@ class DynamicListComponent {
                 useExisting: forwardRef(() => DynamicListComponent),
                 multi: true,
             }
-        ], viewQueries: [{ propertyName: "autoCompleteInput", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "autoCompleteButton", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<eo-dialog #listDialog [title]=\"pickerTitle\" [visible]=\"display\" [ngClass]=\"{empty: !(list?.entries?.length) && display}\"\n  [styleClass]=\"'dynlist-dialog'\" (hide)=\"display = false\">\n\n  <eo-tree [tree]=\"tree\" *ngIf=\"display && tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n    [(ngModel)]=\"selectedNodes\" (keyup.enter)=\"showDialog($event, false)\"\n    (ngModelChange)=\"onTreeSelectionChanged($event)\">\n  </eo-tree>\n\n  @if (!(list?.entries?.length)) {\n    <div class=\"empty\">\n      @if (isAutocompleteLoading) {\n        <eo-loading-spinner [size]=\"'small'\"></eo-loading-spinner>\n      } @else {\n        <div translate>eo.form.property.dynamic.list.empty</div>\n      }\n    </div>\n  }\n</eo-dialog>\n\n<div class=\"eo-dynamic-list\" [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length}\">\n\n  @if (isSearch && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete [(ngModel)]=\"selectedNodes\" #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    [disabled]=\"readonly\" (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [forceSelection]=\"true\"\n    [autocompleteValues]=\"autocompleteRes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" field=\"{{valueField}}\" (autocompleteFnc)=\"autocompleteFn($event)\" [multiple]=\"multiselect\" [ngClass]=\"{'hide-inputToken': !hasAutocompleteUrl}\">\n\n    <ng-template let-item #chipTemplate>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n      </div>\n    </ng-template>\n\n    <ng-template #autocompleteOptionTemplate let-item>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n        <div class=\"description\" style=\"font-style: italic; color: var(--text-color-caption)\">{{item[descriptionField]}}</div>\n      </div>\n    </ng-template>\n  </yvc-autocomplete>\n\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\" [disabled]=\"readonly\" (click)=\"showDialog($event, !!$event.detail)\"\n    (keyup.arrowDown)=\"showDialog($event)\" (keyup.enter)=\"showDialog($event)\" (keyup.space)=\"showDialog($event)\">\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n  </button>\n</div>\n", styles: [".rtl .form-element .form-field>div label{text-align:left!important}:host .eo-dynamic-list{display:flex;align-items:center;justify-content:space-between}:host .eo-dynamic-list .description{padding-left:0!important}:host .eo-dynamic-list yvc-autocomplete{flex:1 1 auto;border:0;outline:0}:host .eo-dynamic-list>button{flex:0 0 auto;padding:0}:host .eo-dynamic-list>button eo-icon{width:16px;height:16px;margin:auto}:host .eo-dynamic-list.full ::ng-deep yvc-autocomplete.hide-inputToken .inputToken{display:none}:host yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}:host yvc-dropdown:hover{background-color:var(--list-item-selected-background)}:host yvc-dropdown ::ng-deep yvc-icon{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: EoIconComponent, selector: "eo-icon", inputs: ["objectType", "iconId", "iconSrc", "badge", "iconTitle"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "eo-loading-spinner", inputs: ["size", "mode"] }, { kind: "component", type: EoDialogComponent, selector: "eo-dialog", inputs: ["hasPreviewFile", "title", "subtitle", "styleClass", "dirtyCheck", "minWidth", "minHeight", "height", "width", "focusOnShow", "align", "isFormTable", "showPreview", "closeOnCancelOnly", "visible"], outputs: ["onTogglePreview", "visibleChange", "hide", "show"] }, { kind: "component", type: TreeComponent, selector: "eo-tree", inputs: ["options", "isDisplayed", "readonly", "emptyMessage", "selectionKey", "highlightedNodes", "tree", "treeUpdate"], outputs: ["expandedNodesChanged", "onSelected"] }, { kind: "component", type: i11.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "component", type: i8.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
+        ], viewQueries: [{ propertyName: "autoCompleteInput", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "autoCompleteButton", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<eo-dialog #listDialog [title]=\"pickerTitle\" [visible]=\"display\" [ngClass]=\"{empty: !(list?.entries?.length) && display}\"\n  [styleClass]=\"'dynlist-dialog'\" (hide)=\"display = false\">\n\n  <eo-tree [tree]=\"tree\" *ngIf=\"display && tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n    [(ngModel)]=\"selectedNodes\" (keyup.enter)=\"showDialog($event, false)\"\n    (ngModelChange)=\"onTreeSelectionChanged($event)\">\n  </eo-tree>\n\n  @if (!(list?.entries?.length)) {\n    <div class=\"empty\">\n      @if (isAutocompleteLoading) {\n        <eo-loading-spinner [size]=\"'small'\"></eo-loading-spinner>\n      } @else {\n        <div translate>eo.form.property.dynamic.list.empty</div>\n      }\n    </div>\n  }\n</eo-dialog>\n\n<div class=\"eo-dynamic-list\" [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length}\">\n\n  @if (isSearch && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n    <yvc-autocomplete [(ngModel)]=\"selectedNodes\" #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\" (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" (focus)=\"onAutocompleteFocus()\" (input)=\"onAutocompleteInput($event)\" (keydown)=\"onAutocompleteKeydown($event)\" (blur)=\"onAutocompleteBlur()\" [disabled]=\"readonly\" [forceSelection]=\"true\" [autocompleteValues]=\"autocompleteRes\" (ngModelChange)=\"onAutocompleteModelChange($event)\" field=\"{{ valueField }}\" (autocompleteFnc)=\"autocompleteFn($event)\" [multiple]=\"multiselect\" [ngClass]=\"{ 'hide-inputToken': !hasAutocompleteUrl }\"\n  >\n\n    <ng-template let-item #chipTemplate>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n      </div>\n    </ng-template>\n\n    <ng-template #autocompleteOptionTemplate let-item>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n        <div class=\"description\" style=\"font-style: italic; color: var(--text-color-caption)\">{{item[descriptionField]}}</div>\n      </div>\n    </ng-template>\n  </yvc-autocomplete>\n\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\" [disabled]=\"readonly\" (click)=\"showDialog($event, !!$event.detail)\"\n    (keyup.arrowDown)=\"showDialog($event)\" (keyup.enter)=\"showDialog($event)\" (keyup.space)=\"showDialog($event)\">\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n  </button>\n</div>\n", styles: [".rtl .form-element .form-field>div label{text-align:left!important}:host .eo-dynamic-list{display:flex;align-items:center;justify-content:space-between}:host .eo-dynamic-list .description{padding-left:0!important}:host .eo-dynamic-list yvc-autocomplete{flex:1 1 auto;border:0;outline:0}:host .eo-dynamic-list>button{flex:0 0 auto;padding:0}:host .eo-dynamic-list>button eo-icon{width:16px;height:16px;margin:auto}:host .eo-dynamic-list.full ::ng-deep yvc-autocomplete.hide-inputToken .inputToken{display:none}:host yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}:host yvc-dropdown:hover{background-color:var(--list-item-selected-background)}:host yvc-dropdown ::ng-deep yvc-icon{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: EoIconComponent, selector: "eo-icon", inputs: ["objectType", "iconId", "iconSrc", "badge", "iconTitle"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "eo-loading-spinner", inputs: ["size", "mode"] }, { kind: "component", type: EoDialogComponent, selector: "eo-dialog", inputs: ["hasPreviewFile", "title", "subtitle", "styleClass", "dirtyCheck", "minWidth", "minHeight", "height", "width", "focusOnShow", "align", "isFormTable", "showPreview", "closeOnCancelOnly", "visible"], outputs: ["onTogglePreview", "visibleChange", "hide", "show"] }, { kind: "component", type: TreeComponent, selector: "eo-tree", inputs: ["options", "isDisplayed", "readonly", "emptyMessage", "selectionKey", "highlightedNodes", "tree", "treeUpdate"], outputs: ["expandedNodesChanged", "onSelected"] }, { kind: "component", type: i11.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "component", type: i8.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DynamicListComponent, decorators: [{
             type: Component,
@@ -7671,7 +7924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                             useExisting: forwardRef(() => DynamicListComponent),
                             multi: true,
                         }
-                    ], template: "<eo-dialog #listDialog [title]=\"pickerTitle\" [visible]=\"display\" [ngClass]=\"{empty: !(list?.entries?.length) && display}\"\n  [styleClass]=\"'dynlist-dialog'\" (hide)=\"display = false\">\n\n  <eo-tree [tree]=\"tree\" *ngIf=\"display && tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n    [(ngModel)]=\"selectedNodes\" (keyup.enter)=\"showDialog($event, false)\"\n    (ngModelChange)=\"onTreeSelectionChanged($event)\">\n  </eo-tree>\n\n  @if (!(list?.entries?.length)) {\n    <div class=\"empty\">\n      @if (isAutocompleteLoading) {\n        <eo-loading-spinner [size]=\"'small'\"></eo-loading-spinner>\n      } @else {\n        <div translate>eo.form.property.dynamic.list.empty</div>\n      }\n    </div>\n  }\n</eo-dialog>\n\n<div class=\"eo-dynamic-list\" [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length}\">\n\n  @if (isSearch && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete [(ngModel)]=\"selectedNodes\" #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    [disabled]=\"readonly\" (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [forceSelection]=\"true\"\n    [autocompleteValues]=\"autocompleteRes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" field=\"{{valueField}}\" (autocompleteFnc)=\"autocompleteFn($event)\" [multiple]=\"multiselect\" [ngClass]=\"{'hide-inputToken': !hasAutocompleteUrl}\">\n\n    <ng-template let-item #chipTemplate>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n      </div>\n    </ng-template>\n\n    <ng-template #autocompleteOptionTemplate let-item>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n        <div class=\"description\" style=\"font-style: italic; color: var(--text-color-caption)\">{{item[descriptionField]}}</div>\n      </div>\n    </ng-template>\n  </yvc-autocomplete>\n\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\" [disabled]=\"readonly\" (click)=\"showDialog($event, !!$event.detail)\"\n    (keyup.arrowDown)=\"showDialog($event)\" (keyup.enter)=\"showDialog($event)\" (keyup.space)=\"showDialog($event)\">\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n  </button>\n</div>\n", styles: [".rtl .form-element .form-field>div label{text-align:left!important}:host .eo-dynamic-list{display:flex;align-items:center;justify-content:space-between}:host .eo-dynamic-list .description{padding-left:0!important}:host .eo-dynamic-list yvc-autocomplete{flex:1 1 auto;border:0;outline:0}:host .eo-dynamic-list>button{flex:0 0 auto;padding:0}:host .eo-dynamic-list>button eo-icon{width:16px;height:16px;margin:auto}:host .eo-dynamic-list.full ::ng-deep yvc-autocomplete.hide-inputToken .inputToken{display:none}:host yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}:host yvc-dropdown:hover{background-color:var(--list-item-selected-background)}:host yvc-dropdown ::ng-deep yvc-icon{display:none}\n"] }]
+                    ], template: "<eo-dialog #listDialog [title]=\"pickerTitle\" [visible]=\"display\" [ngClass]=\"{empty: !(list?.entries?.length) && display}\"\n  [styleClass]=\"'dynlist-dialog'\" (hide)=\"display = false\">\n\n  <eo-tree [tree]=\"tree\" *ngIf=\"display && tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n    [(ngModel)]=\"selectedNodes\" (keyup.enter)=\"showDialog($event, false)\"\n    (ngModelChange)=\"onTreeSelectionChanged($event)\">\n  </eo-tree>\n\n  @if (!(list?.entries?.length)) {\n    <div class=\"empty\">\n      @if (isAutocompleteLoading) {\n        <eo-loading-spinner [size]=\"'small'\"></eo-loading-spinner>\n      } @else {\n        <div translate>eo.form.property.dynamic.list.empty</div>\n      }\n    </div>\n  }\n</eo-dialog>\n\n<div class=\"eo-dynamic-list\" [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length}\">\n\n  @if (isSearch && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n    <yvc-autocomplete [(ngModel)]=\"selectedNodes\" #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\" (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" (focus)=\"onAutocompleteFocus()\" (input)=\"onAutocompleteInput($event)\" (keydown)=\"onAutocompleteKeydown($event)\" (blur)=\"onAutocompleteBlur()\" [disabled]=\"readonly\" [forceSelection]=\"true\" [autocompleteValues]=\"autocompleteRes\" (ngModelChange)=\"onAutocompleteModelChange($event)\" field=\"{{ valueField }}\" (autocompleteFnc)=\"autocompleteFn($event)\" [multiple]=\"multiselect\" [ngClass]=\"{ 'hide-inputToken': !hasAutocompleteUrl }\"\n  >\n\n    <ng-template let-item #chipTemplate>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n      </div>\n    </ng-template>\n\n    <ng-template #autocompleteOptionTemplate let-item>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n        <div class=\"description\" style=\"font-style: italic; color: var(--text-color-caption)\">{{item[descriptionField]}}</div>\n      </div>\n    </ng-template>\n  </yvc-autocomplete>\n\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\" [disabled]=\"readonly\" (click)=\"showDialog($event, !!$event.detail)\"\n    (keyup.arrowDown)=\"showDialog($event)\" (keyup.enter)=\"showDialog($event)\" (keyup.space)=\"showDialog($event)\">\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n  </button>\n</div>\n", styles: [".rtl .form-element .form-field>div label{text-align:left!important}:host .eo-dynamic-list{display:flex;align-items:center;justify-content:space-between}:host .eo-dynamic-list .description{padding-left:0!important}:host .eo-dynamic-list yvc-autocomplete{flex:1 1 auto;border:0;outline:0}:host .eo-dynamic-list>button{flex:0 0 auto;padding:0}:host .eo-dynamic-list>button eo-icon{width:16px;height:16px;margin:auto}:host .eo-dynamic-list.full ::ng-deep yvc-autocomplete.hide-inputToken .inputToken{display:none}:host yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}:host yvc-dropdown:hover{background-color:var(--list-item-selected-background)}:host yvc-dropdown ::ng-deep yvc-icon{display:none}\n"] }]
         }], ctorParameters: () => [{ type: DynamicListService }, { type: i1.LocalStorageService }, { type: ObjectFormHelperService }, { type: i1.EventService }], propDecorators: { autoCompleteInput: [{
                 type: ViewChild,
                 args: ['autocomplete']
@@ -8072,14 +8325,16 @@ class ReferenceFinderComponent {
             }
         }
     }
-    constructor(referenceFinderService) {
+    constructor(referenceFinderService, elemRef) {
         this.referenceFinderService = referenceFinderService;
+        this.elemRef = elemRef;
         this.searchTerm$ = new Subject();
         this.selectedItems = [];
         this.resultList = [];
         this.clipboardItems = [];
         this.clipboardOpen = true;
         this.searching = false;
+        this.autocompleteValues = [];
         this.addDmsObjects = new EventEmitter();
         this.searching = true;
         this.searchTerm$.pipe(debounceTime(500)).subscribe(searchTerm => {
@@ -8087,11 +8342,21 @@ class ReferenceFinderComponent {
                 .subscribe((searchResult) => {
                 const hits = (this.exceptionIDs && searchResult.hits) ? searchResult.hits.filter(hit => !this.exceptionIDs.includes(hit.id)) : searchResult.hits;
                 if (hits && hits.length) {
+                    if (searchTerm === '*') {
+                        this.autocompleteValues = hits.map(hit => {
+                            return { title: hit.title, description: hit.description, type: hit.type };
+                        });
+                    }
                     this.clipboardOpen = false;
                     this.resultList = this.referenceFinderService.generateResults(this.clipboardItems, hits, this.currentSelection, this.types);
                 }
                 else {
-                    this.searchTerm$.next('*');
+                    if (!searchTerm) {
+                        this.searchTerm$.next('*');
+                    }
+                    else {
+                        this.resultList = [];
+                    }
                     this.clipboardOpen = true;
                 }
                 this.markedItem = null;
@@ -8156,23 +8421,27 @@ class ReferenceFinderComponent {
             this.entries.toArray()[0].nativeElement.scrollIntoView(false);
         }
     }
+    autocompleteFn(term) {
+        this.autocompleteRes = this.autocompleteValues.filter(value => {
+            return value.title.toLowerCase().indexOf(term.toLowerCase()) !== -1;
+        }).slice(0, 10).map(value => value.title);
+    }
     ngAfterViewInit() {
         // initially load everything and focus into the search field
         this.searchTerm$.next('*');
-        this.searchInput.nativeElement.focus();
+        setTimeout(() => {
+            this.elemRef.nativeElement.querySelector('input:not(.ghost)')?.focus();
+        }, 200);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ReferenceFinderComponent, deps: [{ token: ReferenceFinderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ReferenceFinderComponent, selector: "eo-reference-finder", inputs: { isDisabled: "isDisabled", types: "types", multiselect: "multiselect", contextId: "contextId", exceptionIDs: "exceptionIDs", queryFilters: "queryFilters", currentSelection: "currentSelection", clipboard: "clipboard" }, outputs: { addDmsObjects: "addDmsObjects" }, host: { listeners: { "keydown": "onKey($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "entries", predicate: ["entry"], descendants: true, read: ElementRef }], ngImport: i0, template: "\n<section class=\"reference-finder-search--input\">\n  <input #searchInput autofocus tabindex=\"1\" (input)=\"searchTerm$.next($event.target.value)\" class=\"search\" type=\"text\" placeholder=\"{{('eo.search.result.term' | translate)}}\"/>\n</section>\n\n<section class=\"reference-finder--content\" *ngIf=\"!searching; else loading\">\n  <div class=\"results\">\n    <eo-simple-accordion *ngIf=\"clipboardItems.length && !copyOnly\"\n    [header]=\"'eo.clipboard.type.copy' | translate\"\n    [selected]=\"true\"\n    (selectChange)=\"clipboardOpen = $event;\"\n    class=\"results-accordion\">\n        <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n          [@fadeInOut]\n          [list]=\"list\"\n          [multiselect]=\"multiselect\"\n          (selectReference)=\"selectReference($event)\"\n          [marked]=\"list.id === markedItem?.id\"\n        >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"clipboardItems.length && copyOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n    <div class=\"padding\"></div>\n\n    <eo-simple-accordion *ngIf=\"resultList.length && !searchOnly\" [selected]=\"true\" [header]=\"'eo.search.title' | translate\" class=\"results-accordion\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"resultList.length && searchOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n  </div>\n\n  <div class=\"cta\">\n    <div>\n      <button type=\"button\" *ngIf=\"multiselect\" (click)=\"selectAllEntries()\">{{('eo.cta.button.select.all' | translate)}}</button>\n      <button type=\"button\" *ngIf=\"multiselect && !searchOnly\" [disabled]=\"isDisabled\" (click)=\"selectCopiedEntries()\">{{('eo.cta.button.select.copy' | translate)}}</button>\n    </div>\n    <button type=\"button\" class=\"add\" (click)=\"addItems()\" *ngIf=\"!disableAdd\" [@fadeInOut]  [class.active]=\"!disableAdd\" [disabled]=\"disableAdd\" [title]=\"'eo.cta.button.add' | translate\">\n      {{('eo.cta.button.add' | translate)}}\n    </button>\n  </div>\n</section>\n\n<ng-template #loading>\n  <div class=\"loader-overlay__mask\">\n    <eo-loading-spinner class=\"reference__loader\" [size]=\"'large'\"></eo-loading-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:contents}.reference-finder-search--input{background-color:var(--color-accent);padding:var(--app-pane-padding);display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:\"search\"}.reference-finder--content{display:contents;align-self:center;justify-items:center}.search{grid-area:search;width:100%;border:0;box-sizing:border-box;padding:calc(var(--app-pane-padding) / 2);font-size:var(--font-title);border:1px var(--panel-background-grey) solid;box-shadow:0 2px 2px #0003}.search-result--hint{font-size:var(--font-caption)}.results{overflow:auto;height:100%;margin:calc(var(--app-pane-padding) / 2);overflow-x:hidden}.results-accordion:nth-child(odd){margin-bottom:10px}.cta{display:flex;align-items:center;justify-content:space-between;padding:var(--app-pane-padding);border-top:1px solid rgba(var(--color-black-rgb),.1)}.add{grid-area:add}.add.active{color:var(--color-white);background-color:var(--color-accent)}.padding{padding:5px}:host ::-webkit-scrollbar{width:5px}:host ::ng-deep .ui-accordion-content{padding:1em 0}.loader-overlay__mask{display:flex;width:100%;height:100%;z-index:11;position:absolute;background:rgba(var(--color-white-rgb),.8);-webkit-animation:eoFadeIn .5s;animation:eoFadeIn .5s}.loader-overlay__mask .reference__loader{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "eo-loading-spinner", inputs: ["size", "mode"] }, { kind: "component", type: SimpleAccordionComponent, selector: "eo-simple-accordion", inputs: ["header", "styles", "headerClass", "iconObjectType", "itemAmount", "resultListLink", "selected", "item"], outputs: ["selectChange"] }, { kind: "component", type: ReferenceFinderEntryComponent, selector: "eo-reference-finder-entry", inputs: ["list", "multiselect", "marked"], outputs: ["selectReference"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], animations: [fadeInOut] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ReferenceFinderComponent, deps: [{ token: ReferenceFinderService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ReferenceFinderComponent, selector: "eo-reference-finder", inputs: { isDisabled: "isDisabled", types: "types", multiselect: "multiselect", contextId: "contextId", exceptionIDs: "exceptionIDs", queryFilters: "queryFilters", currentSelection: "currentSelection", clipboard: "clipboard" }, outputs: { addDmsObjects: "addDmsObjects" }, host: { listeners: { "keydown": "onKey($event)" } }, viewQueries: [{ propertyName: "entries", predicate: ["entry"], descendants: true, read: ElementRef }], ngImport: i0, template: "\n<section class=\"reference-finder-search--input\">\n  <yvc-autocomplete class=\"search\" tabindex=\"0\" (suggestionSelect)=\"searchTerm$.next($event)\" [autocompleteValues]=\"autocompleteRes\"\n                    [placeholder]=\"'eo.search.result.term' | translate\" [forceSelection]=\"false\" (autocompleteFnc)=\"autocompleteFn($event)\"\n                    (input)=\"searchTerm$.next($event.target.value)\">\n  </yvc-autocomplete>\n</section>\n\n<section class=\"reference-finder--content\" *ngIf=\"!searching; else loading\">\n  <div class=\"results\">\n    <eo-simple-accordion *ngIf=\"clipboardItems.length && !copyOnly\"\n    [header]=\"'eo.clipboard.type.copy' | translate\"\n    [selected]=\"true\"\n    (selectChange)=\"clipboardOpen = $event;\"\n    class=\"results-accordion\">\n        <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n          [@fadeInOut]\n          [list]=\"list\"\n          [multiselect]=\"multiselect\"\n          (selectReference)=\"selectReference($event)\"\n          [marked]=\"list.id === markedItem?.id\"\n        >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"clipboardItems.length && copyOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n    <div class=\"padding\"></div>\n\n    <eo-simple-accordion *ngIf=\"resultList.length && !searchOnly\" [selected]=\"true\" [header]=\"'eo.search.title' | translate\" class=\"results-accordion\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"resultList.length && searchOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n  </div>\n\n  <div class=\"cta\">\n    <div>\n      <button type=\"button\" *ngIf=\"multiselect\" (click)=\"selectAllEntries()\">{{('eo.cta.button.select.all' | translate)}}</button>\n      <button type=\"button\" *ngIf=\"multiselect && !searchOnly\" [disabled]=\"isDisabled\" (click)=\"selectCopiedEntries()\">{{('eo.cta.button.select.copy' | translate)}}</button>\n    </div>\n    <button type=\"button\" class=\"add\" (click)=\"addItems()\" *ngIf=\"!disableAdd\" [@fadeInOut]  [class.active]=\"!disableAdd\" [disabled]=\"disableAdd\" [title]=\"'eo.cta.button.add' | translate\">\n      {{('eo.cta.button.add' | translate)}}\n    </button>\n  </div>\n</section>\n\n<ng-template #loading>\n  <div class=\"loader-overlay__mask\">\n    <eo-loading-spinner class=\"reference__loader\" [size]=\"'large'\"></eo-loading-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:contents}.reference-finder-search--input{background-color:var(--color-accent);padding:var(--app-pane-padding);display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:\"search\"}.reference-finder--content{display:contents;align-self:center;justify-items:center}.search{grid-area:search;width:100%;border:0;box-sizing:border-box;padding:calc(var(--app-pane-padding) / 2);font-size:var(--font-title);border:1px var(--panel-background-grey) solid;box-shadow:0 2px 2px #0003;background:#fff}.search-result--hint{font-size:var(--font-caption)}.results{overflow:auto;height:100%;margin:calc(var(--app-pane-padding) / 2);overflow-x:hidden}.results-accordion:nth-child(odd){margin-bottom:10px}.cta{display:flex;align-items:center;justify-content:space-between;padding:var(--app-pane-padding);border-top:1px solid rgba(var(--color-black-rgb),.1)}.add{grid-area:add}.add.active{color:var(--color-white);background-color:var(--color-accent)}.padding{padding:5px}:host ::-webkit-scrollbar{width:5px}:host ::ng-deep .ui-accordion-content{padding:1em 0}.loader-overlay__mask{display:flex;width:100%;height:100%;z-index:11;position:absolute;background:rgba(var(--color-white-rgb),.8);-webkit-animation:eoFadeIn .5s;animation:eoFadeIn .5s}.loader-overlay__mask .reference__loader{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "eo-loading-spinner", inputs: ["size", "mode"] }, { kind: "component", type: SimpleAccordionComponent, selector: "eo-simple-accordion", inputs: ["header", "styles", "headerClass", "iconObjectType", "itemAmount", "resultListLink", "selected", "item"], outputs: ["selectChange"] }, { kind: "component", type: i11.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "component", type: ReferenceFinderEntryComponent, selector: "eo-reference-finder-entry", inputs: ["list", "multiselect", "marked"], outputs: ["selectReference"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], animations: [fadeInOut] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ReferenceFinderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eo-reference-finder', animations: [fadeInOut], template: "\n<section class=\"reference-finder-search--input\">\n  <input #searchInput autofocus tabindex=\"1\" (input)=\"searchTerm$.next($event.target.value)\" class=\"search\" type=\"text\" placeholder=\"{{('eo.search.result.term' | translate)}}\"/>\n</section>\n\n<section class=\"reference-finder--content\" *ngIf=\"!searching; else loading\">\n  <div class=\"results\">\n    <eo-simple-accordion *ngIf=\"clipboardItems.length && !copyOnly\"\n    [header]=\"'eo.clipboard.type.copy' | translate\"\n    [selected]=\"true\"\n    (selectChange)=\"clipboardOpen = $event;\"\n    class=\"results-accordion\">\n        <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n          [@fadeInOut]\n          [list]=\"list\"\n          [multiselect]=\"multiselect\"\n          (selectReference)=\"selectReference($event)\"\n          [marked]=\"list.id === markedItem?.id\"\n        >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"clipboardItems.length && copyOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n    <div class=\"padding\"></div>\n\n    <eo-simple-accordion *ngIf=\"resultList.length && !searchOnly\" [selected]=\"true\" [header]=\"'eo.search.title' | translate\" class=\"results-accordion\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"resultList.length && searchOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n  </div>\n\n  <div class=\"cta\">\n    <div>\n      <button type=\"button\" *ngIf=\"multiselect\" (click)=\"selectAllEntries()\">{{('eo.cta.button.select.all' | translate)}}</button>\n      <button type=\"button\" *ngIf=\"multiselect && !searchOnly\" [disabled]=\"isDisabled\" (click)=\"selectCopiedEntries()\">{{('eo.cta.button.select.copy' | translate)}}</button>\n    </div>\n    <button type=\"button\" class=\"add\" (click)=\"addItems()\" *ngIf=\"!disableAdd\" [@fadeInOut]  [class.active]=\"!disableAdd\" [disabled]=\"disableAdd\" [title]=\"'eo.cta.button.add' | translate\">\n      {{('eo.cta.button.add' | translate)}}\n    </button>\n  </div>\n</section>\n\n<ng-template #loading>\n  <div class=\"loader-overlay__mask\">\n    <eo-loading-spinner class=\"reference__loader\" [size]=\"'large'\"></eo-loading-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:contents}.reference-finder-search--input{background-color:var(--color-accent);padding:var(--app-pane-padding);display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:\"search\"}.reference-finder--content{display:contents;align-self:center;justify-items:center}.search{grid-area:search;width:100%;border:0;box-sizing:border-box;padding:calc(var(--app-pane-padding) / 2);font-size:var(--font-title);border:1px var(--panel-background-grey) solid;box-shadow:0 2px 2px #0003}.search-result--hint{font-size:var(--font-caption)}.results{overflow:auto;height:100%;margin:calc(var(--app-pane-padding) / 2);overflow-x:hidden}.results-accordion:nth-child(odd){margin-bottom:10px}.cta{display:flex;align-items:center;justify-content:space-between;padding:var(--app-pane-padding);border-top:1px solid rgba(var(--color-black-rgb),.1)}.add{grid-area:add}.add.active{color:var(--color-white);background-color:var(--color-accent)}.padding{padding:5px}:host ::-webkit-scrollbar{width:5px}:host ::ng-deep .ui-accordion-content{padding:1em 0}.loader-overlay__mask{display:flex;width:100%;height:100%;z-index:11;position:absolute;background:rgba(var(--color-white-rgb),.8);-webkit-animation:eoFadeIn .5s;animation:eoFadeIn .5s}.loader-overlay__mask .reference__loader{margin:auto}\n"] }]
-        }], ctorParameters: () => [{ type: ReferenceFinderService }], propDecorators: { entries: [{
+            args: [{ selector: 'eo-reference-finder', animations: [fadeInOut], template: "\n<section class=\"reference-finder-search--input\">\n  <yvc-autocomplete class=\"search\" tabindex=\"0\" (suggestionSelect)=\"searchTerm$.next($event)\" [autocompleteValues]=\"autocompleteRes\"\n                    [placeholder]=\"'eo.search.result.term' | translate\" [forceSelection]=\"false\" (autocompleteFnc)=\"autocompleteFn($event)\"\n                    (input)=\"searchTerm$.next($event.target.value)\">\n  </yvc-autocomplete>\n</section>\n\n<section class=\"reference-finder--content\" *ngIf=\"!searching; else loading\">\n  <div class=\"results\">\n    <eo-simple-accordion *ngIf=\"clipboardItems.length && !copyOnly\"\n    [header]=\"'eo.clipboard.type.copy' | translate\"\n    [selected]=\"true\"\n    (selectChange)=\"clipboardOpen = $event;\"\n    class=\"results-accordion\">\n        <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n          [@fadeInOut]\n          [list]=\"list\"\n          [multiselect]=\"multiselect\"\n          (selectReference)=\"selectReference($event)\"\n          [marked]=\"list.id === markedItem?.id\"\n        >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"clipboardItems.length && copyOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of clipboardItems\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n    <div class=\"padding\"></div>\n\n    <eo-simple-accordion *ngIf=\"resultList.length && !searchOnly\" [selected]=\"true\" [header]=\"'eo.search.title' | translate\" class=\"results-accordion\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </eo-simple-accordion>\n\n    <section *ngIf=\"resultList.length && searchOnly\">\n      <eo-reference-finder-entry *ngFor=\"let list of resultList\" #entry\n        [@fadeInOut]\n        [list]=\"list\"\n        [multiselect]=\"multiselect\"\n        (selectReference)=\"selectReference($event)\"\n        [marked]=\"list.id === markedItem?.id\"\n      >\n      </eo-reference-finder-entry>\n    </section>\n  </div>\n\n  <div class=\"cta\">\n    <div>\n      <button type=\"button\" *ngIf=\"multiselect\" (click)=\"selectAllEntries()\">{{('eo.cta.button.select.all' | translate)}}</button>\n      <button type=\"button\" *ngIf=\"multiselect && !searchOnly\" [disabled]=\"isDisabled\" (click)=\"selectCopiedEntries()\">{{('eo.cta.button.select.copy' | translate)}}</button>\n    </div>\n    <button type=\"button\" class=\"add\" (click)=\"addItems()\" *ngIf=\"!disableAdd\" [@fadeInOut]  [class.active]=\"!disableAdd\" [disabled]=\"disableAdd\" [title]=\"'eo.cta.button.add' | translate\">\n      {{('eo.cta.button.add' | translate)}}\n    </button>\n  </div>\n</section>\n\n<ng-template #loading>\n  <div class=\"loader-overlay__mask\">\n    <eo-loading-spinner class=\"reference__loader\" [size]=\"'large'\"></eo-loading-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:contents}.reference-finder-search--input{background-color:var(--color-accent);padding:var(--app-pane-padding);display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:\"search\"}.reference-finder--content{display:contents;align-self:center;justify-items:center}.search{grid-area:search;width:100%;border:0;box-sizing:border-box;padding:calc(var(--app-pane-padding) / 2);font-size:var(--font-title);border:1px var(--panel-background-grey) solid;box-shadow:0 2px 2px #0003;background:#fff}.search-result--hint{font-size:var(--font-caption)}.results{overflow:auto;height:100%;margin:calc(var(--app-pane-padding) / 2);overflow-x:hidden}.results-accordion:nth-child(odd){margin-bottom:10px}.cta{display:flex;align-items:center;justify-content:space-between;padding:var(--app-pane-padding);border-top:1px solid rgba(var(--color-black-rgb),.1)}.add{grid-area:add}.add.active{color:var(--color-white);background-color:var(--color-accent)}.padding{padding:5px}:host ::-webkit-scrollbar{width:5px}:host ::ng-deep .ui-accordion-content{padding:1em 0}.loader-overlay__mask{display:flex;width:100%;height:100%;z-index:11;position:absolute;background:rgba(var(--color-white-rgb),.8);-webkit-animation:eoFadeIn .5s;animation:eoFadeIn .5s}.loader-overlay__mask .reference__loader{margin:auto}\n"] }]
+        }], ctorParameters: () => [{ type: ReferenceFinderService }, { type: i0.ElementRef }], propDecorators: { entries: [{
                 type: ViewChildren,
                 args: ['entry', { read: ElementRef }]
-            }], searchInput: [{
-                type: ViewChild,
-                args: ['searchInput']
             }], isDisabled: [{
                 type: Input
             }], types: [{
@@ -12231,11 +12500,11 @@ class CodesystemFilterComponent extends CodesystemComponent {
         // this.autoCompleteInput.multiInputEL.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CodesystemFilterComponent, deps: [{ token: i1.SystemService }, { token: i1.TranslateService }, { token: i1.EventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CodesystemFilterComponent, selector: "eo-codesystem-filter", viewQueries: [{ propertyName: "eoDialog", first: true, predicate: EoDialogComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"eo-codesystem\" *ngIf=\"codesystem\"\n  [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length, readonly: readonly}\">\n  @if (isSearch && !isTableFilter && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [autocompleteValues]=\"autocompleteRes\" field=\"name\"\n    [disabled]=\"readonly\" [placeholder]=\"placeholder\" [forceSelection]=\"!readonly\" (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"multiselect\" (ngModelChange)=\"onAutocompleteValueChange($event)\" [(ngModel)]=\"selectedNodes\">\n  </yvc-autocomplete>\n  @if (!readonly) {\n    <button type=\"button\" #button (click)=\"setDialogVisible(true, $event)\" (keydown.enter)=\"setDialogVisible(true, $event)\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n    </button>\n  }\n</div>\n\n<eo-dialog [title]=\"pickerTitle || ''\" [visible]=\"display\" (hide)=\"display = false\">\n  @if (display) {\n    <eo-tree [tree]=\"tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n             [(ngModel)]=\"selectedNodes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" [readonly]=\"readonly\"\n             [emptyMessage]=\"emptyMessage\">\n    </eo-tree>\n  }\n</eo-dialog>\n", styles: [".eo-codesystem{display:flex;align-items:center;justify-content:space-between}.eo-codesystem yvc-autocomplete{display:flex;flex:1;border:0;outline:0}.eo-codesystem>button{padding:0;z-index:9}.eo-codesystem>button eo-icon{width:16px;height:16px;margin:auto}.eo-codesystem.readonly ::ng-deep .chip yvc-icon{display:none}.eo-codesystem.full ::ng-deep yvc-autocomplete .inputToken{display:none}.eo-codesystem yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}.eo-codesystem yvc-dropdown:hover{background-color:var(--list-item-selected-background)}.eo-codesystem yvc-dropdown ::ng-deep yvc-icon{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EoIconComponent, selector: "eo-icon", inputs: ["objectType", "iconId", "iconSrc", "badge", "iconTitle"] }, { kind: "component", type: EoDialogComponent, selector: "eo-dialog", inputs: ["hasPreviewFile", "title", "subtitle", "styleClass", "dirtyCheck", "minWidth", "minHeight", "height", "width", "focusOnShow", "align", "isFormTable", "showPreview", "closeOnCancelOnly", "visible"], outputs: ["onTogglePreview", "visibleChange", "hide", "show"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TreeComponent, selector: "eo-tree", inputs: ["options", "isDisplayed", "readonly", "emptyMessage", "selectionKey", "highlightedNodes", "tree", "treeUpdate"], outputs: ["expandedNodesChanged", "onSelected"] }, { kind: "component", type: i11.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "component", type: i8.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CodesystemFilterComponent, selector: "eo-codesystem-filter", viewQueries: [{ propertyName: "eoDialog", first: true, predicate: EoDialogComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"eo-codesystem\" *ngIf=\"codesystem\"\n  [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length, readonly: readonly}\">\n  @if (isSearch && !isTableFilter && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [autocompleteValues]=\"autocompleteRes\" field=\"name\"\n    [disabled]=\"readonly\" [placeholder]=\"placeholder\" [forceSelection]=\"false\" (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"multiselect\" (ngModelChange)=\"onAutocompleteValueChange($event)\" [(ngModel)]=\"selectedNodes\"(focus)=\"onAutocompleteFocus()\" (blur)=\"onAutocompleteBlur()\">\n  </yvc-autocomplete>\n  @if (!readonly) {\n    <button type=\"button\" #button (click)=\"setDialogVisible(true, $event)\" (keydown.enter)=\"setDialogVisible(true, $event)\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n    </button>\n  }\n</div>\n\n<eo-dialog [title]=\"pickerTitle || ''\" [visible]=\"display\" (hide)=\"display = false\">\n  @if (display) {\n    <eo-tree [tree]=\"tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n             [(ngModel)]=\"selectedNodes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" [readonly]=\"readonly\"\n             [emptyMessage]=\"emptyMessage\">\n    </eo-tree>\n  }\n</eo-dialog>\n", styles: [".eo-codesystem{display:flex;align-items:center;justify-content:space-between}.eo-codesystem yvc-autocomplete{display:flex;flex:1;border:0;outline:0}.eo-codesystem>button{padding:0;z-index:9}.eo-codesystem>button eo-icon{width:16px;height:16px;margin:auto}.eo-codesystem.readonly ::ng-deep .chip yvc-icon{display:none}.eo-codesystem.full ::ng-deep yvc-autocomplete .inputToken{display:none}.eo-codesystem yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}.eo-codesystem yvc-dropdown:hover{background-color:var(--list-item-selected-background)}.eo-codesystem yvc-dropdown ::ng-deep yvc-icon{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EoIconComponent, selector: "eo-icon", inputs: ["objectType", "iconId", "iconSrc", "badge", "iconTitle"] }, { kind: "component", type: EoDialogComponent, selector: "eo-dialog", inputs: ["hasPreviewFile", "title", "subtitle", "styleClass", "dirtyCheck", "minWidth", "minHeight", "height", "width", "focusOnShow", "align", "isFormTable", "showPreview", "closeOnCancelOnly", "visible"], outputs: ["onTogglePreview", "visibleChange", "hide", "show"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TreeComponent, selector: "eo-tree", inputs: ["options", "isDisplayed", "readonly", "emptyMessage", "selectionKey", "highlightedNodes", "tree", "treeUpdate"], outputs: ["expandedNodesChanged", "onSelected"] }, { kind: "component", type: i11.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "component", type: i8.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CodesystemFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eo-codesystem-filter', template: "<div class=\"eo-codesystem\" *ngIf=\"codesystem\"\n  [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length, readonly: readonly}\">\n  @if (isSearch && !isTableFilter && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [autocompleteValues]=\"autocompleteRes\" field=\"name\"\n    [disabled]=\"readonly\" [placeholder]=\"placeholder\" [forceSelection]=\"!readonly\" (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"multiselect\" (ngModelChange)=\"onAutocompleteValueChange($event)\" [(ngModel)]=\"selectedNodes\">\n  </yvc-autocomplete>\n  @if (!readonly) {\n    <button type=\"button\" #button (click)=\"setDialogVisible(true, $event)\" (keydown.enter)=\"setDialogVisible(true, $event)\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n    </button>\n  }\n</div>\n\n<eo-dialog [title]=\"pickerTitle || ''\" [visible]=\"display\" (hide)=\"display = false\">\n  @if (display) {\n    <eo-tree [tree]=\"tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n             [(ngModel)]=\"selectedNodes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" [readonly]=\"readonly\"\n             [emptyMessage]=\"emptyMessage\">\n    </eo-tree>\n  }\n</eo-dialog>\n", styles: [".eo-codesystem{display:flex;align-items:center;justify-content:space-between}.eo-codesystem yvc-autocomplete{display:flex;flex:1;border:0;outline:0}.eo-codesystem>button{padding:0;z-index:9}.eo-codesystem>button eo-icon{width:16px;height:16px;margin:auto}.eo-codesystem.readonly ::ng-deep .chip yvc-icon{display:none}.eo-codesystem.full ::ng-deep yvc-autocomplete .inputToken{display:none}.eo-codesystem yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}.eo-codesystem yvc-dropdown:hover{background-color:var(--list-item-selected-background)}.eo-codesystem yvc-dropdown ::ng-deep yvc-icon{display:none}\n"] }]
+            args: [{ selector: 'eo-codesystem-filter', template: "<div class=\"eo-codesystem\" *ngIf=\"codesystem\"\n  [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length, readonly: readonly}\">\n  @if (isSearch && !isTableFilter && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [autocompleteValues]=\"autocompleteRes\" field=\"name\"\n    [disabled]=\"readonly\" [placeholder]=\"placeholder\" [forceSelection]=\"false\" (autocompleteFnc)=\"autocompleteFn($event)\"\n    [multiple]=\"multiselect\" (ngModelChange)=\"onAutocompleteValueChange($event)\" [(ngModel)]=\"selectedNodes\"(focus)=\"onAutocompleteFocus()\" (blur)=\"onAutocompleteBlur()\">\n  </yvc-autocomplete>\n  @if (!readonly) {\n    <button type=\"button\" #button (click)=\"setDialogVisible(true, $event)\" (keydown.enter)=\"setDialogVisible(true, $event)\">\n      <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n    </button>\n  }\n</div>\n\n<eo-dialog [title]=\"pickerTitle || ''\" [visible]=\"display\" (hide)=\"display = false\">\n  @if (display) {\n    <eo-tree [tree]=\"tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n             [(ngModel)]=\"selectedNodes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" [readonly]=\"readonly\"\n             [emptyMessage]=\"emptyMessage\">\n    </eo-tree>\n  }\n</eo-dialog>\n", styles: [".eo-codesystem{display:flex;align-items:center;justify-content:space-between}.eo-codesystem yvc-autocomplete{display:flex;flex:1;border:0;outline:0}.eo-codesystem>button{padding:0;z-index:9}.eo-codesystem>button eo-icon{width:16px;height:16px;margin:auto}.eo-codesystem.readonly ::ng-deep .chip yvc-icon{display:none}.eo-codesystem.full ::ng-deep yvc-autocomplete .inputToken{display:none}.eo-codesystem yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}.eo-codesystem yvc-dropdown:hover{background-color:var(--list-item-selected-background)}.eo-codesystem yvc-dropdown ::ng-deep yvc-icon{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.SystemService }, { type: i1.TranslateService }, { type: i1.EventService }], propDecorators: { eoDialog: [{
                 type: ViewChild,
                 args: [EoDialogComponent]
@@ -12331,11 +12600,11 @@ class DynamicListFilterComponent extends DynamicListComponent {
         this.pickerTitle = this.params.colDef.headerName;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DynamicListFilterComponent, deps: [{ token: i1.LocalStorageService }, { token: ObjectFormHelperService }, { token: DynamicListService }, { token: i1.EventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DynamicListFilterComponent, selector: "eo-dynamic-list-filter", viewQueries: [{ propertyName: "eoDialog", first: true, predicate: EoDialogComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<eo-dialog #listDialog [title]=\"pickerTitle\" [visible]=\"display\" [ngClass]=\"{empty: !(list?.entries?.length) && display}\"\n  [styleClass]=\"'dynlist-dialog'\" (hide)=\"display = false\">\n\n  <eo-tree [tree]=\"tree\" *ngIf=\"display && tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n    [(ngModel)]=\"selectedNodes\" (keyup.enter)=\"showDialog($event, false)\"\n    (ngModelChange)=\"onTreeSelectionChanged($event)\">\n  </eo-tree>\n\n  @if (!(list?.entries?.length)) {\n    <div class=\"empty\">\n      @if (isAutocompleteLoading) {\n        <eo-loading-spinner [size]=\"'small'\"></eo-loading-spinner>\n      } @else {\n        <div translate>eo.form.property.dynamic.list.empty</div>\n      }\n    </div>\n  }\n</eo-dialog>\n\n<div class=\"eo-dynamic-list\" [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length}\">\n\n  @if (isSearch && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete [(ngModel)]=\"selectedNodes\" #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    [disabled]=\"readonly\" (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [forceSelection]=\"true\"\n    [autocompleteValues]=\"autocompleteRes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" field=\"{{valueField}}\" (autocompleteFnc)=\"autocompleteFn($event)\" [multiple]=\"multiselect\" [ngClass]=\"{'hide-inputToken': !hasAutocompleteUrl}\">\n\n    <ng-template let-item #chipTemplate>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n      </div>\n    </ng-template>\n\n    <ng-template #autocompleteOptionTemplate let-item>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n        <div class=\"description\" style=\"font-style: italic; color: var(--text-color-caption)\">{{item[descriptionField]}}</div>\n      </div>\n    </ng-template>\n  </yvc-autocomplete>\n\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\" [disabled]=\"readonly\" (click)=\"showDialog($event, !!$event.detail)\"\n    (keyup.arrowDown)=\"showDialog($event)\" (keyup.enter)=\"showDialog($event)\" (keyup.space)=\"showDialog($event)\">\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n  </button>\n</div>\n", styles: [".rtl .form-element .form-field>div label{text-align:left!important}:host .eo-dynamic-list{display:flex;align-items:center;justify-content:space-between}:host .eo-dynamic-list .description{padding-left:0!important}:host .eo-dynamic-list yvc-autocomplete{flex:1 1 auto;border:0;outline:0}:host .eo-dynamic-list>button{flex:0 0 auto;padding:0}:host .eo-dynamic-list>button eo-icon{width:16px;height:16px;margin:auto}:host .eo-dynamic-list.full ::ng-deep yvc-autocomplete.hide-inputToken .inputToken{display:none}:host yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}:host yvc-dropdown:hover{background-color:var(--list-item-selected-background)}:host yvc-dropdown ::ng-deep yvc-icon{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: EoIconComponent, selector: "eo-icon", inputs: ["objectType", "iconId", "iconSrc", "badge", "iconTitle"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "eo-loading-spinner", inputs: ["size", "mode"] }, { kind: "component", type: EoDialogComponent, selector: "eo-dialog", inputs: ["hasPreviewFile", "title", "subtitle", "styleClass", "dirtyCheck", "minWidth", "minHeight", "height", "width", "focusOnShow", "align", "isFormTable", "showPreview", "closeOnCancelOnly", "visible"], outputs: ["onTogglePreview", "visibleChange", "hide", "show"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TreeComponent, selector: "eo-tree", inputs: ["options", "isDisplayed", "readonly", "emptyMessage", "selectionKey", "highlightedNodes", "tree", "treeUpdate"], outputs: ["expandedNodesChanged", "onSelected"] }, { kind: "component", type: i11.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "component", type: i8.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DynamicListFilterComponent, selector: "eo-dynamic-list-filter", viewQueries: [{ propertyName: "eoDialog", first: true, predicate: EoDialogComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<eo-dialog #listDialog [title]=\"pickerTitle\" [visible]=\"display\" [ngClass]=\"{empty: !(list?.entries?.length) && display}\"\n  [styleClass]=\"'dynlist-dialog'\" (hide)=\"display = false\">\n\n  <eo-tree [tree]=\"tree\" *ngIf=\"display && tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n    [(ngModel)]=\"selectedNodes\" (keyup.enter)=\"showDialog($event, false)\"\n    (ngModelChange)=\"onTreeSelectionChanged($event)\">\n  </eo-tree>\n\n  @if (!(list?.entries?.length)) {\n    <div class=\"empty\">\n      @if (isAutocompleteLoading) {\n        <eo-loading-spinner [size]=\"'small'\"></eo-loading-spinner>\n      } @else {\n        <div translate>eo.form.property.dynamic.list.empty</div>\n      }\n    </div>\n  }\n</eo-dialog>\n\n<div class=\"eo-dynamic-list\" [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length}\">\n\n  @if (isSearch && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n    <yvc-autocomplete [(ngModel)]=\"selectedNodes\" #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\" (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" (focus)=\"onAutocompleteFocus()\" (input)=\"onAutocompleteInput($event)\" (keydown)=\"onAutocompleteKeydown($event)\" (blur)=\"onAutocompleteBlur()\" [disabled]=\"readonly\" [forceSelection]=\"true\" [autocompleteValues]=\"autocompleteRes\" (ngModelChange)=\"onAutocompleteModelChange($event)\" field=\"{{ valueField }}\" (autocompleteFnc)=\"autocompleteFn($event)\" [multiple]=\"multiselect\" [ngClass]=\"{ 'hide-inputToken': !hasAutocompleteUrl }\"\n  >\n\n    <ng-template let-item #chipTemplate>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n      </div>\n    </ng-template>\n\n    <ng-template #autocompleteOptionTemplate let-item>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n        <div class=\"description\" style=\"font-style: italic; color: var(--text-color-caption)\">{{item[descriptionField]}}</div>\n      </div>\n    </ng-template>\n  </yvc-autocomplete>\n\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\" [disabled]=\"readonly\" (click)=\"showDialog($event, !!$event.detail)\"\n    (keyup.arrowDown)=\"showDialog($event)\" (keyup.enter)=\"showDialog($event)\" (keyup.space)=\"showDialog($event)\">\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n  </button>\n</div>\n", styles: [".rtl .form-element .form-field>div label{text-align:left!important}:host .eo-dynamic-list{display:flex;align-items:center;justify-content:space-between}:host .eo-dynamic-list .description{padding-left:0!important}:host .eo-dynamic-list yvc-autocomplete{flex:1 1 auto;border:0;outline:0}:host .eo-dynamic-list>button{flex:0 0 auto;padding:0}:host .eo-dynamic-list>button eo-icon{width:16px;height:16px;margin:auto}:host .eo-dynamic-list.full ::ng-deep yvc-autocomplete.hide-inputToken .inputToken{display:none}:host yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}:host yvc-dropdown:hover{background-color:var(--list-item-selected-background)}:host yvc-dropdown ::ng-deep yvc-icon{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: EoIconComponent, selector: "eo-icon", inputs: ["objectType", "iconId", "iconSrc", "badge", "iconTitle"] }, { kind: "component", type: LoadingSpinnerComponent, selector: "eo-loading-spinner", inputs: ["size", "mode"] }, { kind: "component", type: EoDialogComponent, selector: "eo-dialog", inputs: ["hasPreviewFile", "title", "subtitle", "styleClass", "dirtyCheck", "minWidth", "minHeight", "height", "width", "focusOnShow", "align", "isFormTable", "showPreview", "closeOnCancelOnly", "visible"], outputs: ["onTogglePreview", "visibleChange", "hide", "show"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TreeComponent, selector: "eo-tree", inputs: ["options", "isDisplayed", "readonly", "emptyMessage", "selectionKey", "highlightedNodes", "tree", "treeUpdate"], outputs: ["expandedNodesChanged", "onSelected"] }, { kind: "component", type: i11.AutoComplete, selector: "yvc-autocomplete", inputs: ["field", "placeholder", "minLength", "multiple", "typeahead", "distinctValues", "forceSelection", "autocompleteValues", "disabled"], outputs: ["autocompleteFnc", "blur", "focus", "suggestionUnselect", "suggestionSelect"] }, { kind: "component", type: i8.Dropdown, selector: "yvc-dropdown", inputs: ["options", "filter", "disabled", "multiple", "disableClearButton"], outputs: ["onDropdownOptionsClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DynamicListFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eo-dynamic-list-filter', template: "<eo-dialog #listDialog [title]=\"pickerTitle\" [visible]=\"display\" [ngClass]=\"{empty: !(list?.entries?.length) && display}\"\n  [styleClass]=\"'dynlist-dialog'\" (hide)=\"display = false\">\n\n  <eo-tree [tree]=\"tree\" *ngIf=\"display && tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n    [(ngModel)]=\"selectedNodes\" (keyup.enter)=\"showDialog($event, false)\"\n    (ngModelChange)=\"onTreeSelectionChanged($event)\">\n  </eo-tree>\n\n  @if (!(list?.entries?.length)) {\n    <div class=\"empty\">\n      @if (isAutocompleteLoading) {\n        <eo-loading-spinner [size]=\"'small'\"></eo-loading-spinner>\n      } @else {\n        <div translate>eo.form.property.dynamic.list.empty</div>\n      }\n    </div>\n  }\n</eo-dialog>\n\n<div class=\"eo-dynamic-list\" [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length}\">\n\n  @if (isSearch && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n  <yvc-autocomplete [(ngModel)]=\"selectedNodes\" #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\"\n    [disabled]=\"readonly\" (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" [forceSelection]=\"true\"\n    [autocompleteValues]=\"autocompleteRes\" (ngModelChange)=\"onTreeSelectionChanged($event)\" field=\"{{valueField}}\" (autocompleteFnc)=\"autocompleteFn($event)\" [multiple]=\"multiselect\" [ngClass]=\"{'hide-inputToken': !hasAutocompleteUrl}\">\n\n    <ng-template let-item #chipTemplate>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n      </div>\n    </ng-template>\n\n    <ng-template #autocompleteOptionTemplate let-item>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n        <div class=\"description\" style=\"font-style: italic; color: var(--text-color-caption)\">{{item[descriptionField]}}</div>\n      </div>\n    </ng-template>\n  </yvc-autocomplete>\n\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\" [disabled]=\"readonly\" (click)=\"showDialog($event, !!$event.detail)\"\n    (keyup.arrowDown)=\"showDialog($event)\" (keyup.enter)=\"showDialog($event)\" (keyup.space)=\"showDialog($event)\">\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n  </button>\n</div>\n", styles: [".rtl .form-element .form-field>div label{text-align:left!important}:host .eo-dynamic-list{display:flex;align-items:center;justify-content:space-between}:host .eo-dynamic-list .description{padding-left:0!important}:host .eo-dynamic-list yvc-autocomplete{flex:1 1 auto;border:0;outline:0}:host .eo-dynamic-list>button{flex:0 0 auto;padding:0}:host .eo-dynamic-list>button eo-icon{width:16px;height:16px;margin:auto}:host .eo-dynamic-list.full ::ng-deep yvc-autocomplete.hide-inputToken .inputToken{display:none}:host yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}:host yvc-dropdown:hover{background-color:var(--list-item-selected-background)}:host yvc-dropdown ::ng-deep yvc-icon{display:none}\n"] }]
+            args: [{ selector: 'eo-dynamic-list-filter', template: "<eo-dialog #listDialog [title]=\"pickerTitle\" [visible]=\"display\" [ngClass]=\"{empty: !(list?.entries?.length) && display}\"\n  [styleClass]=\"'dynlist-dialog'\" (hide)=\"display = false\">\n\n  <eo-tree [tree]=\"tree\" *ngIf=\"display && tree\" [isDisplayed]=\"display\" [options]=\"{multiselect: multiselect}\"\n    [(ngModel)]=\"selectedNodes\" (keyup.enter)=\"showDialog($event, false)\"\n    (ngModelChange)=\"onTreeSelectionChanged($event)\">\n  </eo-tree>\n\n  @if (!(list?.entries?.length)) {\n    <div class=\"empty\">\n      @if (isAutocompleteLoading) {\n        <eo-loading-spinner [size]=\"'small'\"></eo-loading-spinner>\n      } @else {\n        <div translate>eo.form.property.dynamic.list.empty</div>\n      }\n    </div>\n  }\n</eo-dialog>\n\n<div class=\"eo-dynamic-list\" [ngClass]=\"{full: selectedNodes && selectedNodes.length === autocompleteValues.length}\">\n\n  @if (isSearch && !isTableElement) {\n    <yvc-dropdown [(ngModel)]=\"searchOption\" (ngModelChange)=\"onValueChange()\" [options]=\"availableSearchOptions\"\n                  [disabled]=\"readonly\" [disableClearButton]=\"true\"></yvc-dropdown>\n  }\n\n    <yvc-autocomplete [(ngModel)]=\"selectedNodes\" #autocomplete (suggestionSelect)=\"onAutoCompleteSelect($event)\" (suggestionUnselect)=\"onAutoCompleteUnselect($event)\" (focus)=\"onAutocompleteFocus()\" (input)=\"onAutocompleteInput($event)\" (keydown)=\"onAutocompleteKeydown($event)\" (blur)=\"onAutocompleteBlur()\" [disabled]=\"readonly\" [forceSelection]=\"true\" [autocompleteValues]=\"autocompleteRes\" (ngModelChange)=\"onAutocompleteModelChange($event)\" field=\"{{ valueField }}\" (autocompleteFnc)=\"autocompleteFn($event)\" [multiple]=\"multiselect\" [ngClass]=\"{ 'hide-inputToken': !hasAutocompleteUrl }\"\n  >\n\n    <ng-template let-item #chipTemplate>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n      </div>\n    </ng-template>\n\n    <ng-template #autocompleteOptionTemplate let-item>\n      <div>\n        <div class=\"value\">{{item[valueField]}}</div>\n        <div class=\"description\" style=\"font-style: italic; color: var(--text-color-caption)\">{{item[descriptionField]}}</div>\n      </div>\n    </ng-template>\n  </yvc-autocomplete>\n\n  <button #button class=\"ui-button\" *ngIf=\"!readonly\" [disabled]=\"readonly\" (click)=\"showDialog($event, !!$event.detail)\"\n    (keyup.arrowDown)=\"showDialog($event)\" (keyup.enter)=\"showDialog($event)\" (keyup.space)=\"showDialog($event)\">\n    <eo-icon [iconSrc]=\"'assets/_default/svg/ic_arrow_down.svg'\"></eo-icon>\n  </button>\n</div>\n", styles: [".rtl .form-element .form-field>div label{text-align:left!important}:host .eo-dynamic-list{display:flex;align-items:center;justify-content:space-between}:host .eo-dynamic-list .description{padding-left:0!important}:host .eo-dynamic-list yvc-autocomplete{flex:1 1 auto;border:0;outline:0}:host .eo-dynamic-list>button{flex:0 0 auto;padding:0}:host .eo-dynamic-list>button eo-icon{width:16px;height:16px;margin:auto}:host .eo-dynamic-list.full ::ng-deep yvc-autocomplete.hide-inputToken .inputToken{display:none}:host yvc-dropdown{min-width:min-content;border:0;cursor:pointer;border-radius:2px;outline:1px solid rgba(0,0,0,.2);background-color:var(--list-item-hover-background);margin-right:4px}:host yvc-dropdown:hover{background-color:var(--list-item-selected-background)}:host yvc-dropdown ::ng-deep yvc-icon{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.LocalStorageService }, { type: ObjectFormHelperService }, { type: DynamicListService }, { type: i1.EventService }], propDecorators: { eoDialog: [{
                 type: ViewChild,
                 args: [EoDialogComponent]
@@ -20240,7 +20509,7 @@ class ObjectLinksComponent {
             entry.folder.forEach(entry2Layer => {
                 query.filters[entry2Layer.referencefield] = {
                     o: 'in',
-                    v1: [this.item.id]
+                    v1: Array.isArray(entry2Layer.referencevalue) ? entry2Layer.referencevalue : [entry2Layer.referencevalue]
                 };
             });
         }
@@ -24447,10 +24716,10 @@ class AboutStateComponent {
         this.config = config;
         this.titleService = titleService;
         this.translate = translate;
-        this.__libraries__ = [{ "name": "@ag-grid-community/angular", "version": "31.3.2", "license": "MIT" }, { "name": "@ag-grid-community/client-side-row-model", "version": "31.3.2", "license": "MIT" }, { "name": "@ag-grid-community/core", "version": "31.3.2", "license": "MIT" }, { "name": "@ag-grid-community/csv-export", "version": "31.3.2", "license": "MIT" }, { "name": "@ag-grid-community/styles", "version": "31.3.2", "license": "MIT" }, { "name": "@angular/animations", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/cdk", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/common", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/compiler", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/core", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/forms", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/platform-browser", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/platform-browser-dynamic", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/router", "version": "18.1.0", "license": "MIT" }, { "name": "@carbon/charts-angular", "version": "1.16.3", "license": "Apache-2.0" }, { "name": "@eo-sdk/core", "version": "11.14.18", "license": "MIT" }, { "name": "@ngneat/until-destroy", "version": "10.0.0", "license": "MIT" }, { "name": "@ngx-pwa/local-storage", "version": "18.0.0", "license": "MIT" }, { "name": "@ngx-translate/core", "version": "15.0.0", "license": "SEE LICENSE IN LICENSE" }, { "name": "@yuuvis/components", "version": "18.1.23", "license": "MIT" }, { "name": "@yuuvis/widget-grid", "version": "18.0.0", "license": "MIT" }, { "name": "core-js", "version": "2.6.12", "license": "MIT" }, { "name": "fast-xml-parser", "version": "4.5.3", "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": "karma-coverage-istanbul-reporter", "version": "3.0.3", "license": "MIT" }, { "name": "lodash-es", "version": "4.17.21", "license": "MIT" }, { "name": "moment", "version": "2.30.1", "license": "MIT" }, { "name": "ngx-toastr", "version": "19.0.0", "license": "MIT" }, { "name": "rxjs", "version": "7.8.1", "license": "Apache-2.0" }, { "name": "tslib", "version": "2.6.3", "license": "0BSD" }, { "name": "zone.js", "version": "0.14.7", "license": "MIT" }];
+        this.__libraries__ = [{ "name": "@ag-grid-community/angular", "version": "31.3.2", "license": "MIT" }, { "name": "@ag-grid-community/client-side-row-model", "version": "31.3.2", "license": "MIT" }, { "name": "@ag-grid-community/core", "version": "31.3.2", "license": "MIT" }, { "name": "@ag-grid-community/csv-export", "version": "31.3.2", "license": "MIT" }, { "name": "@ag-grid-community/styles", "version": "31.3.2", "license": "MIT" }, { "name": "@angular/animations", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/cdk", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/common", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/compiler", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/core", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/forms", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/platform-browser", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/platform-browser-dynamic", "version": "18.1.0", "license": "MIT" }, { "name": "@angular/router", "version": "18.1.0", "license": "MIT" }, { "name": "@carbon/charts-angular", "version": "1.16.3", "license": "Apache-2.0" }, { "name": "@eo-sdk/core", "version": "11.14.19", "license": "MIT" }, { "name": "@ngneat/until-destroy", "version": "10.0.0", "license": "MIT" }, { "name": "@ngx-pwa/local-storage", "version": "18.0.0", "license": "MIT" }, { "name": "@ngx-translate/core", "version": "15.0.0", "license": "SEE LICENSE IN LICENSE" }, { "name": "@yuuvis/components", "version": "18.1.23", "license": "MIT" }, { "name": "@yuuvis/widget-grid", "version": "18.0.0", "license": "MIT" }, { "name": "core-js", "version": "2.6.12", "license": "MIT" }, { "name": "fast-xml-parser", "version": "4.5.3", "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": "karma-coverage-istanbul-reporter", "version": "3.0.3", "license": "MIT" }, { "name": "lodash-es", "version": "4.17.21", "license": "MIT" }, { "name": "moment", "version": "2.30.1", "license": "MIT" }, { "name": "ngx-toastr", "version": "19.0.0", "license": "MIT" }, { "name": "rxjs", "version": "7.8.1", "license": "Apache-2.0" }, { "name": "tslib", "version": "2.6.3", "license": "0BSD" }, { "name": "zone.js", "version": "0.14.7", "license": "MIT" }];
         this.ctrl = {
             componentName: 'yuuvis® RAD client',
-            componentVersion: '11.14.19',
+            componentVersion: '11.14.20',
             productName: '',
             productVersion: ''
         };