@eo-sdk/client 11.14.19 → 11.14.21

package/fesm2022/eo-sdk-client.mjs

@@ -2224,14 +2224,14 @@ class CellRenderer {
         if (param.value === null && CellRenderer.situation === 'SEARCH') {
             return CellRenderer.noValueRenderer(param);
         }
-        let val = `<path class="outline" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
-                      <path d="M 5,19 L 19,5" stroke="rgba(0, 0, 0, 0.54)" stroke-width="2"/>`;
+        let val = '<path class="outline" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>' +
+            '<path d="M 5,19 L 19,5" stroke="rgba(0, 0, 0, 0.54)" stroke-width="2"/>';
         if (param.value === true || param.value === 'true') {
-            val = `<path class="outline" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
-             <polyline class="checkmark" points="6.3,11.8 7.8,10.3 10.8,13.3 16.3,7.8 17.8,9.3 10.8,16.3 6.3,11.8"/>`;
+            val = '<path class="outline" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>' +
+                '<polyline class="checkmark" points="6.3,11.8 7.8,10.3 10.8,13.3 16.3,7.8 17.8,9.3 10.8,16.3 6.3,11.8"/>';
         }
         else if (param.value === false || param.value === 'false') {
-            val = `<path class="outline" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>`;
+            val = '<path class="outline" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>';
         }
         return `<svg class="checkbox" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">${val}</svg>`;
     }
@@ -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,9 +20509,20 @@ 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]
                 };
             });
+            let superQuery = {
+                term: '',
+                options: {
+                    expertmode: true
+                }
+            };
+            Object.keys(query.filters)
+                .forEach(filterName => superQuery.term += this.createSuperQueryTermPart(query, filterName));
+            superQuery.term = superQuery.term.replace(new RegExp(',', 'g'), ' '); // replace all ',' with ' '
+            superQuery.term = superQuery.term.replace(new RegExp(' OR ' + '$'), ''); // remove last ' OR '
+            return `result?query=${encodeURIComponent(JSON.stringify(superQuery))}`;
         }
         else {
             query.options.expertmode = true;
@@ -20252,8 +20532,8 @@ class ObjectLinksComponent {
                     query.term += ' || ';
                 }
             }
+            return `result?query=${encodeURIComponent(JSON.stringify(query))}`;
         }
-        return `result?query=${encodeURIComponent(JSON.stringify(query))}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ObjectLinksComponent, deps: [{ token: ReferenceService }, { token: i1.AppCacheService }, { token: i1.SystemService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ObjectLinksComponent, selector: "eo-object-links", inputs: { dmsObject: "dmsObject" }, ngImport: i0, template: "<div class=\"eo-references\">\n  <div class=\"object-not-found\" *ngIf=\"!inReferences?.length && !outReferences?.length; else refContainer\">\n    <div>{{'eo.references.object.notfound' | translate}}</div>\n  </div>\n\n  <ng-template #refContainer>\n    <div class=\"form-buttons\">\n      <div class=\"gridlabels\">\n          <div class=\"gridlabel\" [ngClass]=\"{'active': showInReferences}\" (click)=\"switchListVisibilityTo('in')\"\n            title=\"{{'eo.references.to.label' | translate}}\">\n              <span>{{'eo.references.to.label' | translate}}</span>\n          </div>\n          <div class=\"gridlabel\" [ngClass]=\"{'active': showOutReferences}\" (click)=\"switchListVisibilityTo('out')\"\n            title=\"{{'eo.references.from.label' | translate}}\">\n              <span>{{'eo.references.from.label' | translate}}</span>\n          </div>\n      </div>\n      <a class=\"result-list-link\" [routerLink]=\"'/result'\" [queryParams]=\"superQueryParams\">\n        <eo-icon class=\"icon\" [iconSrc]=\"'assets/_default/svg/ic_open_tab.svg'\" [iconTitle]=\"('eo.references.open.resultlist' | translate)\"></eo-icon>\n      </a>\n    </div>\n\n    <div class=\"eo-references-lists\">\n\n      <!-- list of inReferences -->\n      <div class=\"resultlist-container\" [ngClass]=\"{'hidden': !showInReferences}\">\n        @if (loading) {\n          <main class=\"loader-overlay__mask\">\n            <eo-loading-spinner [size]=\"'large'\"></eo-loading-spinner>\n          </main>\n        } @else if (inReferences?.length) {\n          <div class=\"referenceList\">\n            @for (entry1Layer of inReferences; track entry1Layer) {\n              <eo-simple-accordion\n                [header]=\"entry1Layer.title\"\n                [iconObjectType]=\"getObjectType(entry1Layer.type)\"\n                [itemAmount]=\"entry1Layer.count\"\n                [resultListLink]=\"getSearchLink(entry1Layer)\">\n                @for (entry2Layer of entry1Layer.folder; track entry2Layer) {\n                  @for (entry3Layer of entry2Layer.folder; track entry3Layer) {\n                    <div class=\"content\" (click)=\"navigateToReference($event, entry3Layer)\">\n                      <div class=\"flex-row\">\n                        <div class=\"title\">\n                          {{entry3Layer?.title}}\n                        </div>\n                      </div>\n                      <div class=\"description\">\n                        {{entry3Layer?.description}}\n                      </div>\n                      <div class=\"remote-element\">\n                        {{'eo.references.field.label' | translate}} {{entry2Layer.title}}\n                      </div>\n                    </div>\n                  }\n                }\n              </eo-simple-accordion>\n            }\n          </div>\n        } @else {\n          <div class=\"notfound\">{{'eo.references.object.notfound' | translate}}</div>\n        }\n      </div>\n\n      <!-- list of outReferences -->\n      <div class=\"resultlist-container\" [ngClass]=\"{'hidden': !showOutReferences}\">\n        @if (loading) {\n          <main class=\"loader-overlay__mask\">\n            <eo-loading-spinner [size]=\"'large'\"></eo-loading-spinner>\n          </main>\n        } @else if (outReferences?.length) {\n          <div class=\"referenceList\">\n            @for (entry1Layer of outReferences; track entry1Layer) {\n              <eo-simple-accordion\n                [header]=\"entry1Layer.title\"\n                [iconObjectType]=\"entry1Layer.objectType\"\n                [itemAmount]=\"entry1Layer.folder.length\"\n                [resultListLink]=\"getSearchLink(entry1Layer)\">\n                @for (entry2Layer of entry1Layer.folder; track entry2Layer) {\n                  <div class=\"content\" (click)=\"navigateToReference($event, entry2Layer)\">\n                    <div class=\"flex-row\">\n                      <div class=\"title\">\n                        {{entry2Layer?.title}}\n                      </div>\n                    </div>\n                    <div class=\"description\">\n                      {{entry2Layer?.description}}\n                    </div>\n                    <div class=\"remote-element\">\n                      {{'eo.references.field.label' | translate}} {{entry2Layer.fieldLabel}}\n                    </div>\n                  </div>\n                }\n              </eo-simple-accordion>\n            }\n          </div>\n        } @else {\n          <div class=\"notfound\">{{'eo.references.object.notfound' | translate}}</div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".eo-references{background:var(--panel-background);border:1px solid rgba(var(--color-black-rgb),.1);margin:var(--app-pane-padding);height:calc(100% - var(--app-pane-padding) * 2);box-sizing:border-box;display:flex;flex-flow:column}.eo-references .hidden{display:none!important}.eo-references .object-not-found{height:100%;display:flex;justify-content:center;align-items:center}.eo-references .object-not-found div{color:var(--text-color-caption)}.eo-references .form-buttons{width:100%;padding:calc(var(--app-pane-padding) / 2);height:44px;display:flex;justify-content:space-between;background:var(--color-white);box-sizing:border-box}.eo-references .form-buttons .result-list-link{text-decoration:none;color:inherit}.eo-references .form-buttons .result-list-link:hover{color:var(--color-accent)}.eo-references .form-buttons .gridlabels{display:flex;width:60%}.eo-references .form-buttons .gridlabel{border:1px solid var(--list-item-border-color);border-radius:4px;padding:0 calc(var(--app-pane-padding) / 2);display:flex;align-items:center;color:var(--text-color-caption);cursor:pointer;margin-right:calc(var(--app-pane-padding) / 2);transition:all var(--app-default-transition-duration) ease-in-out;overflow:hidden}.eo-references .form-buttons .gridlabel span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.eo-references .form-buttons .gridlabel:hover{color:var(--text-color-body);border-color:#0003}.eo-references .form-buttons .active{color:var(--text-color-body);border-color:#0003;background-color:var(--panel-background-grey)}.eo-references .form-buttons a.button{display:flex;align-items:center;overflow:hidden}.eo-references .form-buttons a.button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.eo-references .eo-references-lists{flex:1;overflow:hidden;border-top:4px solid rgba(var(--color-black-rgb),.2)}.eo-references .eo-references-lists main{grid-area:main}.eo-references .eo-references-lists main.loader-overlay__mask{display:flex;width:100%;height:100%;flex-flow:column;align-items:center;justify-content:center;background:rgba(var(--color-white-rgb),.8);-webkit-animation:eoFadeIn .2s;animation:eoFadeIn .2s}.eo-references .eo-references-lists .resultlist-container{display:flex;flex-flow:column;height:100%;width:100%;overflow:auto}.eo-references .eo-references-lists .resultlist-container .notfound{color:var(--text-color-caption);display:flex;align-items:center;justify-content:center;height:100%}.eo-references .eo-references-lists .ag-result{position:absolute;inset:0}.eo-references .eo-references-lists .grid-wrapper{position:relative;flex:1}.referenceList{display:flex;flex-direction:column;border-radius:2px}.referenceList eo-simple-accordion{margin-top:var(--app-pane-padding);margin-left:calc(var(--app-pane-padding) / 2);margin-right:calc(var(--app-pane-padding) / 2)}.referenceList .content{cursor:pointer;margin-top:var(--app-pane-padding);margin-left:calc(var(--app-pane-padding) / 2);margin-bottom:calc(var(--app-pane-padding) / 2)}.referenceList .content:hover{background-color:var(--main-background-light)}.referenceList .title{padding-left:calc(var(--app-pane-padding) / 2);font-weight:var(--font-weight-bold)}.referenceList .description,.referenceList .remote-element{padding-left:calc(var(--app-pane-padding) / 2)}.referenceList .title,.referenceList .description,.referenceList .icon,.referenceList .remote-element{color:var(--text-color-caption)}\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: "directive", type: RouterLinkDirective, selector: "a[routerLink]" }, { 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: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
@@ -24447,10 +24727,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.20", "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.21',
             productName: '',
             productVersion: ''
         };
@@ -26306,6 +26586,7 @@ let CountObjectsWidgetComponent = class CountObjectsWidgetComponent {
         this.searchService = searchService;
         this.systemService = systemService;
         this.storedQueriesService = storedQueriesService;
+        this.preview = false;
         this.defaultIconId = '852786D8DA774B3487C5C63D5DEE6628';
     }
     set widgetConfig(c) {
@@ -26399,15 +26680,17 @@ let CountObjectsWidgetComponent = class CountObjectsWidgetComponent {
         window.open(url);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CountObjectsWidgetComponent, deps: [{ token: i0.ElementRef }, { token: i1.SearchService }, { token: i1.SystemService }, { token: i1.StoredQueriesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CountObjectsWidgetComponent, selector: "eo-count-objects-widget", inputs: { widgetConfig: "widgetConfig" }, ngImport: i0, template: "@if (hitlistResult && !refreshingRequest) {\n  <a class=\"info\" [ngClass]=\"{visible: isVisible, disabled: hitlistResult[0]?.type}\"\n     (click)=\"onEmitQueryClick()\">\n    <div class=\"clr\">\n      @if (hitlistResult[0]?.type) {\n        <eo-icon [objectType]=\"hitlistResult[0]?.type\"></eo-icon>\n      } @else {\n        <eo-icon [iconId]=\"defaultIconId\"></eo-icon>\n      }\n      <div class=\"count\">{{ countTileResult?.count }}</div>\n    </div>\n    <div class=\"msg\">{{ widgetConfig?.formValue.storedQuery }}</div>\n  </a>\n} @else if (refreshingRequest) {\n  <main class=\"loader-overlay__mask\">\n    <eo-loading-spinner [size]=\"'large'\"></eo-loading-spinner>\n  </main>\n} @else {\n  <div class=\"empty\">\n    <eo-error-message\n      [emptyState]=\"{icon: 'ic_saved_search.svg', text: 'eo.workspace.widget.configuration.notOk'}\"></eo-error-message>\n  </div>\n}\n", styles: [":host-context(.editMode) .info:not(.visible){opacity:1}:host{z-index:1}:host .info{color:var(--color-primary-2);padding:0 var(--app-pane-padding);margin-bottom:calc(var(--app-pane-padding) * 2);text-decoration:none;cursor:pointer}:host .info:not(.visible){opacity:0;pointer-events:none}:host .info:not(.disabled){cursor:default;pointer-events:none}:host .info:focus,:host .info:hover{color:var(--color-accent)}:host .info:focus eo-icon,:host .info:hover eo-icon{background-color:var(--color-accent)}:host .info>div{display:flex;flex:0 0 auto;align-items:center}:host .info eo-icon{flex:0 0 auto;border-radius:2px;background-color:var(--color-primary-2);color:rgba(var(--color-white-rgb),.7);padding:2px}:host .info .count{font-size:2.5rem;line-height:1em;padding:0 var(--app-pane-padding);text-align:right}:host .info .clr.success{color:var(--color-success)}:host .info .clr.warning{color:var(--color-warning)}:host .info .clr.error{color:var(--color-error)}:host .empty{display:contents}::ng-deep eo-icon.error__icon{max-width:fit-content;max-height:fit-content}::ng-deep eo-error-message{overflow-y:auto}::ng-deep .error__message{display:contents;max-width:fit-content;max-height:fit-content}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ErrorMessageComponent, selector: "eo-error-message", inputs: ["emptyState"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CountObjectsWidgetComponent, selector: "eo-count-objects-widget", inputs: { preview: "preview", widgetConfig: "widgetConfig" }, ngImport: i0, template: "@if (hitlistResult && !refreshingRequest) {\n  <a class=\"info\" [ngClass]=\"{visible: isVisible, disabled: preview}\"\n     (click)=\"onEmitQueryClick()\">\n    <div class=\"clr\">\n      @if (hitlistResult[0]?.type) {\n        <eo-icon [objectType]=\"hitlistResult[0]?.type\"></eo-icon>\n      } @else {\n        <eo-icon [iconId]=\"defaultIconId\"></eo-icon>\n      }\n      <div class=\"count\">{{ countTileResult?.count }}</div>\n    </div>\n    <div class=\"msg\">{{ widgetConfig?.formValue.storedQuery }}</div>\n  </a>\n} @else if (refreshingRequest) {\n  <main class=\"loader-overlay__mask\">\n    <eo-loading-spinner [size]=\"'large'\"></eo-loading-spinner>\n  </main>\n} @else {\n  <div class=\"empty\">\n    <eo-error-message\n      [emptyState]=\"{icon: 'ic_saved_search.svg', text: 'eo.workspace.widget.configuration.notOk'}\"></eo-error-message>\n  </div>\n}\n", styles: [":host-context(.editMode) .info:not(.visible){opacity:1}:host{z-index:1}:host .info{color:var(--color-primary-2);padding:0 var(--app-pane-padding);margin-bottom:calc(var(--app-pane-padding) * 2);text-decoration:none;cursor:pointer}:host .info:not(.visible){opacity:0;pointer-events:none}:host .info.disabled{cursor:default;pointer-events:none}:host .info:focus,:host .info:hover{color:var(--color-accent)}:host .info:focus eo-icon,:host .info:hover eo-icon{background-color:var(--color-accent)}:host .info>div{display:flex;flex:0 0 auto;align-items:center}:host .info eo-icon{flex:0 0 auto;border-radius:2px;background-color:var(--color-primary-2);color:rgba(var(--color-white-rgb),.7);padding:2px}:host .info .count{font-size:2.5rem;line-height:1em;padding:0 var(--app-pane-padding);text-align:right}:host .info .clr.success{color:var(--color-success)}:host .info .clr.warning{color:var(--color-warning)}:host .info .clr.error{color:var(--color-error)}:host .empty{display:contents}::ng-deep eo-icon.error__icon{max-width:fit-content;max-height:fit-content}::ng-deep eo-error-message{overflow-y:auto}::ng-deep .error__message{display:contents;max-width:fit-content;max-height:fit-content}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ErrorMessageComponent, selector: "eo-error-message", inputs: ["emptyState"] }] }); }
 };
 CountObjectsWidgetComponent = __decorate([
     UntilDestroy()
 ], CountObjectsWidgetComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CountObjectsWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eo-count-objects-widget', template: "@if (hitlistResult && !refreshingRequest) {\n  <a class=\"info\" [ngClass]=\"{visible: isVisible, disabled: hitlistResult[0]?.type}\"\n     (click)=\"onEmitQueryClick()\">\n    <div class=\"clr\">\n      @if (hitlistResult[0]?.type) {\n        <eo-icon [objectType]=\"hitlistResult[0]?.type\"></eo-icon>\n      } @else {\n        <eo-icon [iconId]=\"defaultIconId\"></eo-icon>\n      }\n      <div class=\"count\">{{ countTileResult?.count }}</div>\n    </div>\n    <div class=\"msg\">{{ widgetConfig?.formValue.storedQuery }}</div>\n  </a>\n} @else if (refreshingRequest) {\n  <main class=\"loader-overlay__mask\">\n    <eo-loading-spinner [size]=\"'large'\"></eo-loading-spinner>\n  </main>\n} @else {\n  <div class=\"empty\">\n    <eo-error-message\n      [emptyState]=\"{icon: 'ic_saved_search.svg', text: 'eo.workspace.widget.configuration.notOk'}\"></eo-error-message>\n  </div>\n}\n", styles: [":host-context(.editMode) .info:not(.visible){opacity:1}:host{z-index:1}:host .info{color:var(--color-primary-2);padding:0 var(--app-pane-padding);margin-bottom:calc(var(--app-pane-padding) * 2);text-decoration:none;cursor:pointer}:host .info:not(.visible){opacity:0;pointer-events:none}:host .info:not(.disabled){cursor:default;pointer-events:none}:host .info:focus,:host .info:hover{color:var(--color-accent)}:host .info:focus eo-icon,:host .info:hover eo-icon{background-color:var(--color-accent)}:host .info>div{display:flex;flex:0 0 auto;align-items:center}:host .info eo-icon{flex:0 0 auto;border-radius:2px;background-color:var(--color-primary-2);color:rgba(var(--color-white-rgb),.7);padding:2px}:host .info .count{font-size:2.5rem;line-height:1em;padding:0 var(--app-pane-padding);text-align:right}:host .info .clr.success{color:var(--color-success)}:host .info .clr.warning{color:var(--color-warning)}:host .info .clr.error{color:var(--color-error)}:host .empty{display:contents}::ng-deep eo-icon.error__icon{max-width:fit-content;max-height:fit-content}::ng-deep eo-error-message{overflow-y:auto}::ng-deep .error__message{display:contents;max-width:fit-content;max-height:fit-content}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.SearchService }, { type: i1.SystemService }, { type: i1.StoredQueriesService }], propDecorators: { widgetConfig: [{
+            args: [{ selector: 'eo-count-objects-widget', template: "@if (hitlistResult && !refreshingRequest) {\n  <a class=\"info\" [ngClass]=\"{visible: isVisible, disabled: preview}\"\n     (click)=\"onEmitQueryClick()\">\n    <div class=\"clr\">\n      @if (hitlistResult[0]?.type) {\n        <eo-icon [objectType]=\"hitlistResult[0]?.type\"></eo-icon>\n      } @else {\n        <eo-icon [iconId]=\"defaultIconId\"></eo-icon>\n      }\n      <div class=\"count\">{{ countTileResult?.count }}</div>\n    </div>\n    <div class=\"msg\">{{ widgetConfig?.formValue.storedQuery }}</div>\n  </a>\n} @else if (refreshingRequest) {\n  <main class=\"loader-overlay__mask\">\n    <eo-loading-spinner [size]=\"'large'\"></eo-loading-spinner>\n  </main>\n} @else {\n  <div class=\"empty\">\n    <eo-error-message\n      [emptyState]=\"{icon: 'ic_saved_search.svg', text: 'eo.workspace.widget.configuration.notOk'}\"></eo-error-message>\n  </div>\n}\n", styles: [":host-context(.editMode) .info:not(.visible){opacity:1}:host{z-index:1}:host .info{color:var(--color-primary-2);padding:0 var(--app-pane-padding);margin-bottom:calc(var(--app-pane-padding) * 2);text-decoration:none;cursor:pointer}:host .info:not(.visible){opacity:0;pointer-events:none}:host .info.disabled{cursor:default;pointer-events:none}:host .info:focus,:host .info:hover{color:var(--color-accent)}:host .info:focus eo-icon,:host .info:hover eo-icon{background-color:var(--color-accent)}:host .info>div{display:flex;flex:0 0 auto;align-items:center}:host .info eo-icon{flex:0 0 auto;border-radius:2px;background-color:var(--color-primary-2);color:rgba(var(--color-white-rgb),.7);padding:2px}:host .info .count{font-size:2.5rem;line-height:1em;padding:0 var(--app-pane-padding);text-align:right}:host .info .clr.success{color:var(--color-success)}:host .info .clr.warning{color:var(--color-warning)}:host .info .clr.error{color:var(--color-error)}:host .empty{display:contents}::ng-deep eo-icon.error__icon{max-width:fit-content;max-height:fit-content}::ng-deep eo-error-message{overflow-y:auto}::ng-deep .error__message{display:contents;max-width:fit-content;max-height:fit-content}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.SearchService }, { type: i1.SystemService }, { type: i1.StoredQueriesService }], propDecorators: { preview: [{
+                type: Input
+            }], widgetConfig: [{
                 type: Input
             }] } });
 
@@ -26509,14 +26792,14 @@ let CountObjectsSetupComponent = class CountObjectsSetupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CountObjectsSetupComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i4.TranslateService }, { token: i1.StoredQueriesService }, { token: WidgetsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CountObjectsSetupComponent, selector: "eo-count-objects-setup", inputs: { widgetConfig: "widgetConfig" }, outputs: { widgetConfigChange: "widgetConfigChange", widgetConfigStateChange: "widgetConfigStateChange" }, ngImport: i0, template: "<div class=\"setup\">\n  <form [formGroup]=\"setupForm\">\n    @if (storedQueriesPicker?.codesystem?.entries) {\n      <eo-form-input [skipToggle]=\"true\"\n                     [label]=\"'eo.workspace.widget.label.storedquery' | translate\" [required]=\"true\"\n                     [description]=\"'eo.workspace.widget.stored.queries.description'\"\n                     [invalid]=\"setupForm.dirty && setupForm.get('storedQuery').invalid\">\n        <eo-codesystem formControlName=\"storedQuery\" [pickerTitle]=\"storedQueriesPicker.title\"\n                       [codesystem]=\"storedQueriesPicker.codesystem\"\n                       [emptyMessage]=\"'eo.workspace.widget.stored.queries.list.notAvailable'\"></eo-codesystem>\n      </eo-form-input>\n      @if (setupForm.dirty && setupForm.get('storedQuery').hasError('required')) {\n        <div class=\"err-msg\" translate>\n          eo.form.property.required\n        </div>\n      }\n    }\n\n    @if(widgetConfig?.storedQuery){\n\n      <eo-form-input class=\"label checkbox\" [skipToggle]=\"true\"\n                      [label]=\"'eo.widget.hitcount.form.label.showZero' | translate\">\n        <eo-checkbox formControlName=\"showZero\">\n        </eo-checkbox>\n      </eo-form-input>\n    \n      <eo-form-input class=\"label checkbox\" [skipToggle]=\"true\"\n                     [label]=\"'eo.widget.hitcount.form.label.countTileThresholdInvert' | translate\">\n        <eo-checkbox formControlName=\"countTileThresholdInvert\">\n        </eo-checkbox>\n      </eo-form-input>\n      <div class=\"desc\">{{ countTileThresholdDesc }}</div>\n\n      <eo-form-input class=\"threshold-success\" [skipToggle]=\"true\"\n                    [label]=\"'eo.widget.hitcount.form.label.threshold.success' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileSuccessThreshold\">\n        </eo-number>\n      </eo-form-input>\n\n      <eo-form-input class=\"threshold-warning\" [skipToggle]=\"true\"\n                    [label]=\"'eo.widget.hitcount.form.label.threshold.warning' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileWarningThreshold\">\n        </eo-number>\n      </eo-form-input>\n\n      <eo-form-input class=\"threshold-error\" [skipToggle]=\"true\"\n                     [label]=\"'eo.widget.hitcount.form.label.threshold.error' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileErrorThreshold\">\n        </eo-number>\n      </eo-form-input>\n    }\n  </form>\n</div>\n@if (setupForm.valid) {\n  <div class=\"preview\">\n    <eo-count-objects-widget [widgetConfig]=\"widgetConfig\"></eo-count-objects-widget>\n  </div>\n} @else {\n  <div class=\"empty\">\n    <eo-error-message\n      [emptyState]=\"{icon: 'ic_saved_search.svg', text: 'eo.workspace.widget.stored.queries.list.empty'}\"></eo-error-message>\n  </div>\n}", styles: [":host{display:grid;grid-template-rows:1fr;grid-template-columns:minmax(200px,400px) 1fr;grid-template-areas:\"setup preview\";height:100%}:host .setup{grid-area:setup;padding:var(--app-pane-padding);border-right:1px solid var(--panel-divider-color)}:host .setup eo-form-input{display:block;margin-top:var(--app-pane-padding)}:host .setup .checkboxCountTitle{padding-bottom:30px;padding-top:30px}:host .setup .err-msg{color:var(--color-error)}:host .setup .desc{color:var(--text-color-caption)}:host .preview{background-color:var(--main-background);padding:var(--app-pane-padding);display:flex;justify-content:center;align-items:center;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ErrorMessageComponent, selector: "eo-error-message", inputs: ["emptyState"] }, { kind: "component", type: FormInputComponent, selector: "eo-form-input", inputs: ["label", "tag", "description", "skipToggle", "isNull", "invalid", "disabled", "required"], outputs: ["onToggleLabel"] }, { kind: "component", type: CodesystemComponent, selector: "eo-codesystem", inputs: ["situation", "pickerTitle", "placeholder", "codesystem", "multiselect", "readonly", "inputStyleClass", "emptyMessage", "isTableElement", "filterFunction", "disablingFilterFunction"] }, { kind: "component", type: NumberComponent, selector: "eo-number", inputs: ["scale", "precision", "grouping", "pattern", "readonly"] }, { kind: "component", type: CheckboxComponent, selector: "eo-checkbox", inputs: ["required", "tristate", "readonly"] }, { kind: "component", type: CountObjectsWidgetComponent, selector: "eo-count-objects-widget", inputs: ["widgetConfig"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CountObjectsSetupComponent, selector: "eo-count-objects-setup", inputs: { widgetConfig: "widgetConfig" }, outputs: { widgetConfigChange: "widgetConfigChange", widgetConfigStateChange: "widgetConfigStateChange" }, ngImport: i0, template: "<div class=\"setup\">\n  <form [formGroup]=\"setupForm\">\n    @if (storedQueriesPicker?.codesystem?.entries) {\n      <eo-form-input [skipToggle]=\"true\"\n                     [label]=\"'eo.workspace.widget.label.storedquery' | translate\" [required]=\"true\"\n                     [description]=\"'eo.workspace.widget.stored.queries.description'\"\n                     [invalid]=\"setupForm.dirty && setupForm.get('storedQuery').invalid\">\n        <eo-codesystem formControlName=\"storedQuery\" [pickerTitle]=\"storedQueriesPicker.title\"\n                       [codesystem]=\"storedQueriesPicker.codesystem\"\n                       [emptyMessage]=\"'eo.workspace.widget.stored.queries.list.notAvailable'\"></eo-codesystem>\n      </eo-form-input>\n      @if (setupForm.dirty && setupForm.get('storedQuery').hasError('required')) {\n        <div class=\"err-msg\" translate>\n          eo.form.property.required\n        </div>\n      }\n    }\n\n    @if(widgetConfig?.storedQuery){\n\n      <eo-form-input class=\"label checkbox\" [skipToggle]=\"true\"\n                      [label]=\"'eo.widget.hitcount.form.label.showZero' | translate\">\n        <eo-checkbox formControlName=\"showZero\">\n        </eo-checkbox>\n      </eo-form-input>\n\n      <eo-form-input class=\"label checkbox\" [skipToggle]=\"true\"\n                     [label]=\"'eo.widget.hitcount.form.label.countTileThresholdInvert' | translate\">\n        <eo-checkbox formControlName=\"countTileThresholdInvert\">\n        </eo-checkbox>\n      </eo-form-input>\n      <div class=\"desc\">{{ countTileThresholdDesc }}</div>\n\n      <eo-form-input class=\"threshold-success\" [skipToggle]=\"true\"\n                    [label]=\"'eo.widget.hitcount.form.label.threshold.success' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileSuccessThreshold\">\n        </eo-number>\n      </eo-form-input>\n\n      <eo-form-input class=\"threshold-warning\" [skipToggle]=\"true\"\n                    [label]=\"'eo.widget.hitcount.form.label.threshold.warning' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileWarningThreshold\">\n        </eo-number>\n      </eo-form-input>\n\n      <eo-form-input class=\"threshold-error\" [skipToggle]=\"true\"\n                     [label]=\"'eo.widget.hitcount.form.label.threshold.error' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileErrorThreshold\">\n        </eo-number>\n      </eo-form-input>\n    }\n  </form>\n</div>\n@if (setupForm.valid) {\n  <div class=\"preview\">\n    <eo-count-objects-widget [preview]=\"true\" [widgetConfig]=\"widgetConfig\"></eo-count-objects-widget>\n  </div>\n} @else {\n  <div class=\"empty\">\n    <eo-error-message\n      [emptyState]=\"{icon: 'ic_saved_search.svg', text: 'eo.workspace.widget.stored.queries.list.empty'}\"></eo-error-message>\n  </div>\n}\n", styles: [":host{display:grid;grid-template-rows:1fr;grid-template-columns:minmax(200px,400px) 1fr;grid-template-areas:\"setup preview\";height:100%}:host .setup{grid-area:setup;padding:var(--app-pane-padding);border-right:1px solid var(--panel-divider-color)}:host .setup eo-form-input{display:block;margin-top:var(--app-pane-padding)}:host .setup .checkboxCountTitle{padding-bottom:30px;padding-top:30px}:host .setup .err-msg{color:var(--color-error)}:host .setup .desc{color:var(--text-color-caption)}:host .preview{background-color:var(--main-background);padding:var(--app-pane-padding);display:flex;justify-content:center;align-items:center;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ErrorMessageComponent, selector: "eo-error-message", inputs: ["emptyState"] }, { kind: "component", type: FormInputComponent, selector: "eo-form-input", inputs: ["label", "tag", "description", "skipToggle", "isNull", "invalid", "disabled", "required"], outputs: ["onToggleLabel"] }, { kind: "component", type: CodesystemComponent, selector: "eo-codesystem", inputs: ["situation", "pickerTitle", "placeholder", "codesystem", "multiselect", "readonly", "inputStyleClass", "emptyMessage", "isTableElement", "filterFunction", "disablingFilterFunction"] }, { kind: "component", type: NumberComponent, selector: "eo-number", inputs: ["scale", "precision", "grouping", "pattern", "readonly"] }, { kind: "component", type: CheckboxComponent, selector: "eo-checkbox", inputs: ["required", "tristate", "readonly"] }, { kind: "component", type: CountObjectsWidgetComponent, selector: "eo-count-objects-widget", inputs: ["preview", "widgetConfig"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 };
 CountObjectsSetupComponent = __decorate([
     UntilDestroy()
 ], CountObjectsSetupComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CountObjectsSetupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eo-count-objects-setup', template: "<div class=\"setup\">\n  <form [formGroup]=\"setupForm\">\n    @if (storedQueriesPicker?.codesystem?.entries) {\n      <eo-form-input [skipToggle]=\"true\"\n                     [label]=\"'eo.workspace.widget.label.storedquery' | translate\" [required]=\"true\"\n                     [description]=\"'eo.workspace.widget.stored.queries.description'\"\n                     [invalid]=\"setupForm.dirty && setupForm.get('storedQuery').invalid\">\n        <eo-codesystem formControlName=\"storedQuery\" [pickerTitle]=\"storedQueriesPicker.title\"\n                       [codesystem]=\"storedQueriesPicker.codesystem\"\n                       [emptyMessage]=\"'eo.workspace.widget.stored.queries.list.notAvailable'\"></eo-codesystem>\n      </eo-form-input>\n      @if (setupForm.dirty && setupForm.get('storedQuery').hasError('required')) {\n        <div class=\"err-msg\" translate>\n          eo.form.property.required\n        </div>\n      }\n    }\n\n    @if(widgetConfig?.storedQuery){\n\n      <eo-form-input class=\"label checkbox\" [skipToggle]=\"true\"\n                      [label]=\"'eo.widget.hitcount.form.label.showZero' | translate\">\n        <eo-checkbox formControlName=\"showZero\">\n        </eo-checkbox>\n      </eo-form-input>\n    \n      <eo-form-input class=\"label checkbox\" [skipToggle]=\"true\"\n                     [label]=\"'eo.widget.hitcount.form.label.countTileThresholdInvert' | translate\">\n        <eo-checkbox formControlName=\"countTileThresholdInvert\">\n        </eo-checkbox>\n      </eo-form-input>\n      <div class=\"desc\">{{ countTileThresholdDesc }}</div>\n\n      <eo-form-input class=\"threshold-success\" [skipToggle]=\"true\"\n                    [label]=\"'eo.widget.hitcount.form.label.threshold.success' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileSuccessThreshold\">\n        </eo-number>\n      </eo-form-input>\n\n      <eo-form-input class=\"threshold-warning\" [skipToggle]=\"true\"\n                    [label]=\"'eo.widget.hitcount.form.label.threshold.warning' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileWarningThreshold\">\n        </eo-number>\n      </eo-form-input>\n\n      <eo-form-input class=\"threshold-error\" [skipToggle]=\"true\"\n                     [label]=\"'eo.widget.hitcount.form.label.threshold.error' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileErrorThreshold\">\n        </eo-number>\n      </eo-form-input>\n    }\n  </form>\n</div>\n@if (setupForm.valid) {\n  <div class=\"preview\">\n    <eo-count-objects-widget [widgetConfig]=\"widgetConfig\"></eo-count-objects-widget>\n  </div>\n} @else {\n  <div class=\"empty\">\n    <eo-error-message\n      [emptyState]=\"{icon: 'ic_saved_search.svg', text: 'eo.workspace.widget.stored.queries.list.empty'}\"></eo-error-message>\n  </div>\n}", styles: [":host{display:grid;grid-template-rows:1fr;grid-template-columns:minmax(200px,400px) 1fr;grid-template-areas:\"setup preview\";height:100%}:host .setup{grid-area:setup;padding:var(--app-pane-padding);border-right:1px solid var(--panel-divider-color)}:host .setup eo-form-input{display:block;margin-top:var(--app-pane-padding)}:host .setup .checkboxCountTitle{padding-bottom:30px;padding-top:30px}:host .setup .err-msg{color:var(--color-error)}:host .setup .desc{color:var(--text-color-caption)}:host .preview{background-color:var(--main-background);padding:var(--app-pane-padding);display:flex;justify-content:center;align-items:center;pointer-events:none}\n"] }]
+            args: [{ selector: 'eo-count-objects-setup', template: "<div class=\"setup\">\n  <form [formGroup]=\"setupForm\">\n    @if (storedQueriesPicker?.codesystem?.entries) {\n      <eo-form-input [skipToggle]=\"true\"\n                     [label]=\"'eo.workspace.widget.label.storedquery' | translate\" [required]=\"true\"\n                     [description]=\"'eo.workspace.widget.stored.queries.description'\"\n                     [invalid]=\"setupForm.dirty && setupForm.get('storedQuery').invalid\">\n        <eo-codesystem formControlName=\"storedQuery\" [pickerTitle]=\"storedQueriesPicker.title\"\n                       [codesystem]=\"storedQueriesPicker.codesystem\"\n                       [emptyMessage]=\"'eo.workspace.widget.stored.queries.list.notAvailable'\"></eo-codesystem>\n      </eo-form-input>\n      @if (setupForm.dirty && setupForm.get('storedQuery').hasError('required')) {\n        <div class=\"err-msg\" translate>\n          eo.form.property.required\n        </div>\n      }\n    }\n\n    @if(widgetConfig?.storedQuery){\n\n      <eo-form-input class=\"label checkbox\" [skipToggle]=\"true\"\n                      [label]=\"'eo.widget.hitcount.form.label.showZero' | translate\">\n        <eo-checkbox formControlName=\"showZero\">\n        </eo-checkbox>\n      </eo-form-input>\n\n      <eo-form-input class=\"label checkbox\" [skipToggle]=\"true\"\n                     [label]=\"'eo.widget.hitcount.form.label.countTileThresholdInvert' | translate\">\n        <eo-checkbox formControlName=\"countTileThresholdInvert\">\n        </eo-checkbox>\n      </eo-form-input>\n      <div class=\"desc\">{{ countTileThresholdDesc }}</div>\n\n      <eo-form-input class=\"threshold-success\" [skipToggle]=\"true\"\n                    [label]=\"'eo.widget.hitcount.form.label.threshold.success' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileSuccessThreshold\">\n        </eo-number>\n      </eo-form-input>\n\n      <eo-form-input class=\"threshold-warning\" [skipToggle]=\"true\"\n                    [label]=\"'eo.widget.hitcount.form.label.threshold.warning' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileWarningThreshold\">\n        </eo-number>\n      </eo-form-input>\n\n      <eo-form-input class=\"threshold-error\" [skipToggle]=\"true\"\n                     [label]=\"'eo.widget.hitcount.form.label.threshold.error' | translate\">\n        <eo-number [scale]=\"0\" formControlName=\"countTileErrorThreshold\">\n        </eo-number>\n      </eo-form-input>\n    }\n  </form>\n</div>\n@if (setupForm.valid) {\n  <div class=\"preview\">\n    <eo-count-objects-widget [preview]=\"true\" [widgetConfig]=\"widgetConfig\"></eo-count-objects-widget>\n  </div>\n} @else {\n  <div class=\"empty\">\n    <eo-error-message\n      [emptyState]=\"{icon: 'ic_saved_search.svg', text: 'eo.workspace.widget.stored.queries.list.empty'}\"></eo-error-message>\n  </div>\n}\n", styles: [":host{display:grid;grid-template-rows:1fr;grid-template-columns:minmax(200px,400px) 1fr;grid-template-areas:\"setup preview\";height:100%}:host .setup{grid-area:setup;padding:var(--app-pane-padding);border-right:1px solid var(--panel-divider-color)}:host .setup eo-form-input{display:block;margin-top:var(--app-pane-padding)}:host .setup .checkboxCountTitle{padding-bottom:30px;padding-top:30px}:host .setup .err-msg{color:var(--color-error)}:host .setup .desc{color:var(--text-color-caption)}:host .preview{background-color:var(--main-background);padding:var(--app-pane-padding);display:flex;justify-content:center;align-items:center;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i4.TranslateService }, { type: i1.StoredQueriesService }, { type: WidgetsService }], propDecorators: { widgetConfigChange: [{
                 type: Output
             }], widgetConfigStateChange: [{