@smartbit4all/ng-client 3.2.4 → 3.2.6

package/fesm2015/smartbit4all-ng-client.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Optional, Inject, PLATFORM_ID, NgModule, SkipSelf, Component, Input, ViewChild, forwardRef, EventEmitter, Output, Directive, HostListener, ViewContainerRef, ViewEncapsulation, ViewChildren, Pipe, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
-import { __awaiter, __decorate, __param } from 'tslib';
+import { __awaiter } from 'tslib';
 import { Subject, takeUntil, startWith, map, distinctUntilChanged, throwError, from, catchError as catchError$1, lastValueFrom } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpParams, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
@@ -2467,8 +2467,10 @@ class SmartViewContextService {
         this.dialog = dialog;
         this.apiQueueService = apiQueueService;
         this.inject = inject;
-        this.tabIdName = 'viewContextUuid';
-        this.tabIdhttpHeaderName = 'viewContextUuid';
+        this.viewContextUuidName = 'viewContextUuid';
+        this.viewContextUuidHeaderName = 'viewContextUuid';
+        this.pageNamePrefix = 'page.';
+        this.componentNamePrefix = 'component.';
         this.viewHandlers = new Array();
         this.openedViewUuids = new Array();
         this.openedViewData = new Array();
@@ -2534,7 +2536,7 @@ class SmartViewContextService {
     getAndSyncViewContext(uuid) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!uuid) {
-                uuid = this.getUuidOfPage(this.tabIdName);
+                uuid = this.getViewContextUuid();
             }
             yield this.getViewContext(uuid).then(() => {
                 this.syncView();
@@ -2554,11 +2556,7 @@ class SmartViewContextService {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.viewContext) {
-                let viewContextUuid = sessionStorage.getItem(this.tabIdName);
-                if (!viewContextUuid) {
-                    throw new Error('View context is not initialized!');
-                }
-                yield this.getViewContext(viewContextUuid);
+                yield this.getViewContext(this.getViewContextUuid());
             }
             let pageUuid = this.getUuidOfPage(pageName);
             let viewContextByPageName = (_a = this.viewContext) === null || _a === void 0 ? void 0 : _a.views.find((view) => view.uuid === pageUuid);
@@ -2579,13 +2577,6 @@ class SmartViewContextService {
         this.openedViewData = [];
         this.openedViewUuids = [];
     }
-    setTabId(tabId) {
-        sessionStorage.setItem(this.tabIdName, tabId);
-        this.session.addHeaderParam({
-            headerName: this.tabIdhttpHeaderName,
-            value: tabId,
-        });
-    }
     startViewContext() {
         return __awaiter(this, void 0, void 0, function* () {
             this.clearSessionStorage();
@@ -2596,7 +2587,7 @@ class SmartViewContextService {
                 throw new Error('No ViewContext was created');
             }
             this.viewContext = newViewContext;
-            this.setTabId(newViewContext.uuid);
+            this.setViewContextUuid(newViewContext.uuid);
             return this.viewContext;
         });
     }
@@ -2615,7 +2606,7 @@ class SmartViewContextService {
                         throw new Error('The messageDialogName provided by the backend has not been set.');
                     }
                     if (uuid) {
-                        this.setTabId(uuid);
+                        this.setViewContextUuid(uuid);
                         try {
                             yield this.getViewContext(uuid);
                         }
@@ -2655,7 +2646,7 @@ class SmartViewContextService {
                 try {
                     this.openedViewUuids.push(view.uuid);
                     this.openedViewData.push(view);
-                    sessionStorage.setItem(view.viewName, view.uuid);
+                    this.setUuidOfPage(view.viewName, view.uuid, viewHandler.componentName);
                     dialogRef = this.dialog.openComponentAsDialog(viewHandler.component, viewHandler.name);
                 }
                 finally {
@@ -2663,9 +2654,9 @@ class SmartViewContextService {
                     if (index >= 0) {
                         this.openedViewUuids.splice(index, 1);
                         this.openedViewData.splice(index, 1);
-                        sessionStorage.removeItem(view.viewName);
+                        this.clearUuidOfPage(view.viewName, viewHandler.componentName);
                     }
-                    sessionStorage.setItem(view.viewName, view.uuid);
+                    this.setUuidOfPage(view.viewName, view.uuid, viewHandler.componentName);
                 }
                 let dialogDisableClose = true;
                 let isMessageDialog = view.viewName === this.messageDialogname;
@@ -2708,7 +2699,7 @@ class SmartViewContextService {
         view.state = ViewState.Opened;
         this.openedViewUuids.push(view.uuid);
         this.openedViewData.push(view);
-        sessionStorage.setItem(view.viewName, view.uuid);
+        this.setUuidOfPage(view.viewName, view.uuid, viewHandler.componentName);
         this.uuidOfPageHasBeenChanged.next(view.viewName);
         this.updateViewContext({
             updates: [
@@ -2749,7 +2740,7 @@ class SmartViewContextService {
         if (index >= 0) {
             this.openedViewUuids.splice(index, 1);
             this.openedViewData.splice(index, 1);
-            sessionStorage.removeItem(view.viewName);
+            this.clearUuidOfPage(view.viewName, viewHandler.componentName);
         }
         this.updateViewContext({
             updates: [
@@ -2838,13 +2829,46 @@ class SmartViewContextService {
         }));
         this.viewContextHasBeenSynced.next();
     }
+    setViewContextUuid(uuid) {
+        sessionStorage.setItem(this.viewContextUuidName, uuid);
+        this.session.addHeaderParam({
+            headerName: this.viewContextUuidHeaderName,
+            value: uuid,
+        });
+    }
+    getViewContextUuid() {
+        let viewContextUuid = sessionStorage.getItem(this.viewContextUuidName);
+        if (!viewContextUuid) {
+            throw new Error('View context is not initialized!');
+        }
+        return viewContextUuid;
+    }
+    setUuidOfPage(pageName, uuid, componentName) {
+        sessionStorage.setItem(this.pageNamePrefix + pageName, uuid);
+        if (componentName) {
+            sessionStorage.setItem(this.componentNamePrefix + componentName, pageName);
+        }
+    }
+    clearUuidOfPage(pageName, componentName) {
+        sessionStorage.removeItem(this.pageNamePrefix + pageName);
+        if (componentName) {
+            sessionStorage.removeItem(this.componentNamePrefix + componentName);
+        }
+    }
     getUuidOfPage(pageName) {
-        let uuid = sessionStorage.getItem(pageName);
+        let uuid = sessionStorage.getItem(this.pageNamePrefix + pageName);
         if (!uuid) {
             throw new Error(`The uuid of ${pageName} is not available.`);
         }
         return uuid;
     }
+    getPageNameOfComponent(componentName) {
+        let pageName = sessionStorage.getItem(this.componentNamePrefix + componentName);
+        if (!pageName) {
+            throw new Error(`The pageName of ${componentName} is not available.`);
+        }
+        return pageName;
+    }
     message(messageData, messageResult) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
@@ -3814,11 +3838,12 @@ class SmartFormService {
     }
     toFormGroup() {
         this.createFormControls(this.smartForm.widgets);
-        // if (this.formGroup) {
-        //   this.formGroup.controls = this.group;
-        // } else {
-        // }
-        this.formGroup = new FormGroup(this.group);
+        if (this.formGroup) {
+            this.formGroup.controls = this.group;
+        }
+        else {
+            this.formGroup = new FormGroup(this.group);
+        }
         if (this.smartForm.validators && this.smartForm.validators.length) {
             this.formGroup.setValidators(this.smartForm.validators.map((validator) => {
                 return validator.validator;
@@ -3828,7 +3853,7 @@ class SmartFormService {
     }
     createFormControls(widgets, parentKey) {
         widgets.map((widget) => {
-            var _a, _b, _c;
+            var _a, _b;
             if (widget.type !== SmartFormWidgetType.INDICATOR &&
                 widget.type !== SmartFormWidgetType.LABEL &&
                 widget.type !== SmartFormWidgetType.CONTAINER &&
@@ -3841,14 +3866,7 @@ class SmartFormService {
                 widget.type !== SmartFormWidgetType.COMPONENT &&
                 widget.type !== SmartFormWidgetType.MATRIX &&
                 widget.type !== SmartFormWidgetType.YOUTUBE_PLAYER) {
-                // let formControl = this.group[`${widget.key}`];
-                let formControl = new FormControl(widget.value || '', (_a = widget.validators) === null || _a === void 0 ? void 0 : _a.map((validator) => {
-                    return validator.validator;
-                }));
-                if (widget.isDisabled) {
-                    formControl.disable();
-                }
-                this.group[`${widget.key}`] = formControl;
+                this.createFormControl(`${widget.key}`, widget.value, widget.isDisabled, widget.validators);
             }
             if (widget.type === SmartFormWidgetType.MATRIX) {
                 if (widget.isMultiple) {
@@ -3856,38 +3874,24 @@ class SmartFormService {
                     let itemKeys = widget.value.columns.map((value) => value.code);
                     dataKeys.forEach((key) => {
                         itemKeys.forEach((item) => {
-                            var _a;
-                            let formControl = new FormControl(widget.value.data[key][item], (_a = widget.validators) === null || _a === void 0 ? void 0 : _a.map((validator) => {
-                                return validator.validator;
-                            }));
-                            this.group[`${widget.key}.data.${key}.${item}`] = formControl;
+                            this.createFormControl(`${widget.key}.data.${key}.${item}`, widget.value.data[key][item], undefined, // TODO really we don't pass widget.isDisabled?
+                            widget.validators);
                         });
                     });
                 }
                 else {
                     Object.keys(widget.value.data).map((key) => {
-                        var _a;
-                        let formControl = new FormControl(widget.isMultiple ? widget.value.data[key] : widget.value.data[key][0] || '', (_a = widget.validators) === null || _a === void 0 ? void 0 : _a.map((validator) => {
-                            return validator.validator;
-                        }));
-                        if (widget.isDisabled) {
-                            formControl.disable();
-                        }
-                        this.group[`${widget.key}.${key}`] = formControl;
+                        this.createFormControl(`${widget.key}.${key}`, widget.isMultiple ? widget.value.data[key] : widget.value.data[key][0], widget.isDisabled, widget.validators);
                     });
                 }
             }
             if (widget.type === SmartFormWidgetType.ITEM && parentKey) {
-                let formControl = new FormControl(widget.value);
-                if (widget.isDisabled) {
-                    formControl.disable();
-                }
-                this.group[`${parentKey}.${widget.key}`] = formControl;
+                this.createFormControl(`${parentKey}.${widget.key}`, widget.value, widget.isDisabled, undefined);
             }
-            if (widget.type === SmartFormWidgetType.CONTAINER && ((_b = widget.valueList) === null || _b === void 0 ? void 0 : _b.length)) {
+            if (widget.type === SmartFormWidgetType.CONTAINER && ((_a = widget.valueList) === null || _a === void 0 ? void 0 : _a.length)) {
                 this.createFormControls(widget.valueList);
             }
-            if (widget.type === SmartFormWidgetType.CHECK_BOX_2 && ((_c = widget.valueList) === null || _c === void 0 ? void 0 : _c.length)) {
+            if (widget.type === SmartFormWidgetType.CHECK_BOX_2 && ((_b = widget.valueList) === null || _b === void 0 ? void 0 : _b.length)) {
                 this.createFormControls(widget.valueList, widget.key);
             }
         });
@@ -3895,6 +3899,27 @@ class SmartFormService {
     isValidatorInList(validator, list) {
         return list !== undefined && list.length > 0 && list.some((v) => v === validator);
     }
+    createFormControl(key, value, isDisabled, validators) {
+        let formControl = this.group[key];
+        if (!formControl) {
+            formControl = new FormControl();
+            this.group[key] = formControl;
+        }
+        formControl.setValue(value || '');
+        formControl.clearValidators();
+        validators === null || validators === void 0 ? void 0 : validators.map((validator) => {
+            formControl.addValidators(validator.validator);
+        });
+        if (isDisabled !== undefined) {
+            if (isDisabled) {
+                formControl.disable();
+            }
+            else {
+                formControl.enable();
+            }
+        }
+        return formControl;
+    }
     copyValueFromFormToWidgetBeans(widgets, group) {
         widgets.forEach((widget) => {
             var _a;
@@ -13146,634 +13171,245 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 }]
         }] });
 
-/**
- * Custom HttpParameterCodec
- * Workaround for https://github.com/angular/angular/issues/18261
- */
-class CustomHttpParameterCodec {
-    encodeKey(k) {
-        return encodeURIComponent(k);
+class SmartFilterParamComponent {
+    constructor() { }
+    onItemClick(item) {
+        this.data.serviceToUse.peformWidgetAction({
+            code: 'ADD_FILTER_EXPRESSION',
+            params: {
+                model: item,
+            },
+        });
     }
-    encodeValue(v) {
-        return encodeURIComponent(v);
+}
+SmartFilterParamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterParamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamComponent, selector: "app-target-group-filter-param", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"targetGroupFilterParamContainer\">\r\n  <div\r\n    class=\"targetGroupFilterItem\"\r\n    *ngFor=\"let data of data?.group\"\r\n    (click)=\"onItemClick(data)\"\r\n  >\r\n    <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\r\n    <div class=\"mat-caption\">\r\n      {{ data.label }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"], components: [{ type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-target-group-filter-param', template: "<div class=\"targetGroupFilterParamContainer\">\r\n  <div\r\n    class=\"targetGroupFilterItem\"\r\n    *ngFor=\"let data of data?.group\"\r\n    (click)=\"onItemClick(data)\"\r\n  >\r\n    <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\r\n    <div class=\"mat-caption\">\r\n      {{ data.label }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class SmartFilterParamsComponent {
+    constructor() {
+        this._destroy$ = new Subject();
+        this.expandableSections = [];
     }
-    decodeKey(k) {
-        return decodeURIComponent(k);
+    ngOnInit() {
+        this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.setUp(this.service.model);
+        });
+        this.setUp(this.service.model);
     }
-    decodeValue(v) {
-        return decodeURIComponent(v);
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-}
+    setUp(model) {
+        this.filterBuilder = model.model;
+        this.constructExpandableSections();
+    }
+    constructExpandableSections() {
+        if (this.filterBuilder.groups) {
+            this.expandableSections = this.filterBuilder.groups.map((filterExpressionBuilderGroup) => {
+                return {
+                    title: filterExpressionBuilderGroup.label,
+                    cssClass: 'filterExpressionBuilderGroup',
+                    customComponent: SmartFilterParamComponent,
+                    data: {
+                        group: filterExpressionBuilderGroup.fields,
+                        serviceToUse: this.service,
+                    },
+                    inputName: 'data',
+                    isExpanded: true,
+                };
+            });
+        }
+    }
+}
+SmartFilterParamsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: { service: "service" }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <!-- <ng-template #smartFilter></ng-template> -->\r\n  <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"], components: [{ type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-filter-group-params', template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <!-- <ng-template #smartFilter></ng-template> -->\r\n  <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { service: [{
+                type: Input
+            }], filterVcRef: [{
+                type: ViewChild,
+                args: ['smartFilter', { read: ViewContainerRef }]
+            }] } });
 
-const BASE_PATH = new InjectionToken('basePath');
-const COLLECTION_FORMATS = {
-    'csv': ',',
-    'tsv': '   ',
-    'ssv': ' ',
-    'pipes': '|'
-};
+var FilterExpressionBuilderUiModel;
+(function (FilterExpressionBuilderUiModel) {
+    FilterExpressionBuilderUiModel.TypeEnum = {
+        Simple: 'SIMPLE',
+        Complex: 'COMPLEX'
+    };
+})(FilterExpressionBuilderUiModel || (FilterExpressionBuilderUiModel = {}));
 
-class Configuration {
-    constructor(configurationParameters = {}) {
-        this.apiKeys = configurationParameters.apiKeys;
-        this.username = configurationParameters.username;
-        this.password = configurationParameters.password;
-        this.accessToken = configurationParameters.accessToken;
-        this.basePath = configurationParameters.basePath;
-        this.withCredentials = configurationParameters.withCredentials;
-        this.encoder = configurationParameters.encoder;
-        if (configurationParameters.encodeParam) {
-            this.encodeParam = configurationParameters.encodeParam;
+var FilterExpressionBuilderApiActions;
+(function (FilterExpressionBuilderApiActions) {
+    FilterExpressionBuilderApiActions["OPEN_FILTER_GROUPS"] = "OPEN_FILTER_GROUPS";
+    FilterExpressionBuilderApiActions["CLOSE_FILTER_GROUPS"] = "CLOSE_FILTER_GROUPS";
+    FilterExpressionBuilderApiActions["ADD_BRACKET"] = "ADD_BRACKET";
+    FilterExpressionBuilderApiActions["ADD_FILTER_EXPRESSION"] = "ADD_FILTER_EXPRESSION";
+    FilterExpressionBuilderApiActions["REMOVE_FILTER_EXPRESSION"] = "REMOVE_FILTER_EXPRESSION";
+    FilterExpressionBuilderApiActions["REDO"] = "REDO";
+    FilterExpressionBuilderApiActions["FILTER_GROUPS"] = "AFILTER_GROUPS";
+    FilterExpressionBuilderApiActions["SELECT_FIELD"] = "SELECT_FIELD";
+    FilterExpressionBuilderApiActions["UPDATE_FILTER_EXPRESSION"] = "UPDATE_FILTER_EXPRESSION";
+    FilterExpressionBuilderApiActions["SAVE_EXPRESSION_DATA"] = "SAVE_EXPRESSION_DATA";
+    FilterExpressionBuilderApiActions["SAVE_EXPRESSION_FIELD_LIST"] = "SAVE_EXPRESSION_FIELD_LIST";
+})(FilterExpressionBuilderApiActions || (FilterExpressionBuilderApiActions = {}));
+
+class SmartFilterExpressionItemComponent {
+    constructor() {
+        this.isSelected = false;
+    }
+    ngOnInit() {
+        var _a;
+        this.isSelected =
+            JSON.stringify((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.selectedField) === JSON.stringify(this.item);
+    }
+    setOperatorTo(event, operationType) {
+        var _a;
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        if (!((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.readOnly)) {
+            this.item.expressionData.boolOperator = operationType;
+            this.service.peformWidgetAction({
+                code: 'UPDATE_FILTER_EXPRESSION',
+                params: {
+                    model: this.item,
+                },
+            });
+        }
+    }
+    select(event, item) {
+        var _a;
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        if (!((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.readOnly)) {
+            if (!this.isSelected) {
+                this.service.peformWidgetAction({
+                    code: 'SELECT_FIELD',
+                    params: {
+                        model: this.item,
+                    },
+                });
+            }
+            else {
+                this.service.peformWidgetAction({
+                    code: 'SELECT_FIELD',
+                    params: {
+                        model: this.item,
+                    },
+                });
+            }
+        }
+    }
+}
+SmartFilterExpressionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterExpressionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: { item: "item", hasNext: "hasNext", service: "service" }, ngImport: i0, template: "<div class=\"expressionItemContainer\">\r\n  <div\r\n    class=\"expressionItemInnerContainer\"\r\n    [ngClass]=\"\r\n      item.expressionData?.currentOperation === 'EXPRESSION'\r\n        ? isSelected\r\n          ? 'selectedExpressionContainer'\r\n          : 'expressionContainer'\r\n        : ''\r\n    \"\r\n    (click)=\"select($event, item)\"\r\n  >\r\n    <div\r\n      *ngIf=\"\r\n        item.expressionData?.currentOperation === 'EXPRESSION';\r\n        then expression;\r\n        else simpleItem\r\n      \"\r\n    ></div>\r\n    <ng-template #expression>\r\n      <div class=\"expressionItemBubble expression\">[</div>\r\n      <app-expression-item\r\n        [item]=\"subItem\"\r\n        [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\r\n        *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\r\n      ></app-expression-item>\r\n      <div class=\"expressionItemBubble expression\">]</div>\r\n    </ng-template>\r\n    <ng-template #simpleItem>\r\n      <div\r\n        class=\"expressionItemBubble simpleItem\"\r\n        [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\r\n      >\r\n        {{ item.label\r\n        }}{{ item.expressionData?.operand2?.valueAsString ? \": \" : \"\" }}\r\n        <b>\r\n          {{ item.expressionData?.operand2?.valueAsString }}\r\n        </b>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"hasNext\" class=\"relationItemBubble\">\r\n    <button\r\n      mat-button\r\n      (click)=\"setOperatorTo($event, 'AND')\"\r\n      [ngClass]=\"\r\n        item.expressionData?.boolOperator === 'AND' ? 'mat-raised-button' : ''\r\n      \"\r\n      color=\"black\"\r\n    >\r\n      \u00C9S\r\n    </button>\r\n    <button\r\n      mat-button\r\n      (click)=\"setOperatorTo($event, 'OR')\"\r\n      [ngClass]=\"\r\n        item.expressionData?.boolOperator === 'OR' ? 'mat-raised-button' : ''\r\n      \"\r\n      color=\"black\"\r\n    >\r\n      VAGY\r\n    </button>\r\n  </div>\r\n  <!-- <button mat-mini-fab color=\"gray\">\r\n\t\t<smart-icon icon=\"X\" color=\"gray\"></smart-icon>\r\n\t</button> -->\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-darker-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.selectedSimpleItem{border:2px solid var(--primary-color)}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem}.relationItemBubble .mat-button{border-radius:1.5rem;height:100%;margin:auto 0}\n"], components: [{ type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: ["item", "hasNext", "service"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-expression-item', template: "<div class=\"expressionItemContainer\">\r\n  <div\r\n    class=\"expressionItemInnerContainer\"\r\n    [ngClass]=\"\r\n      item.expressionData?.currentOperation === 'EXPRESSION'\r\n        ? isSelected\r\n          ? 'selectedExpressionContainer'\r\n          : 'expressionContainer'\r\n        : ''\r\n    \"\r\n    (click)=\"select($event, item)\"\r\n  >\r\n    <div\r\n      *ngIf=\"\r\n        item.expressionData?.currentOperation === 'EXPRESSION';\r\n        then expression;\r\n        else simpleItem\r\n      \"\r\n    ></div>\r\n    <ng-template #expression>\r\n      <div class=\"expressionItemBubble expression\">[</div>\r\n      <app-expression-item\r\n        [item]=\"subItem\"\r\n        [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\r\n        *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\r\n      ></app-expression-item>\r\n      <div class=\"expressionItemBubble expression\">]</div>\r\n    </ng-template>\r\n    <ng-template #simpleItem>\r\n      <div\r\n        class=\"expressionItemBubble simpleItem\"\r\n        [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\r\n      >\r\n        {{ item.label\r\n        }}{{ item.expressionData?.operand2?.valueAsString ? \": \" : \"\" }}\r\n        <b>\r\n          {{ item.expressionData?.operand2?.valueAsString }}\r\n        </b>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"hasNext\" class=\"relationItemBubble\">\r\n    <button\r\n      mat-button\r\n      (click)=\"setOperatorTo($event, 'AND')\"\r\n      [ngClass]=\"\r\n        item.expressionData?.boolOperator === 'AND' ? 'mat-raised-button' : ''\r\n      \"\r\n      color=\"black\"\r\n    >\r\n      \u00C9S\r\n    </button>\r\n    <button\r\n      mat-button\r\n      (click)=\"setOperatorTo($event, 'OR')\"\r\n      [ngClass]=\"\r\n        item.expressionData?.boolOperator === 'OR' ? 'mat-raised-button' : ''\r\n      \"\r\n      color=\"black\"\r\n    >\r\n      VAGY\r\n    </button>\r\n  </div>\r\n  <!-- <button mat-mini-fab color=\"gray\">\r\n\t\t<smart-icon icon=\"X\" color=\"gray\"></smart-icon>\r\n\t</button> -->\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-darker-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.selectedSimpleItem{border:2px solid var(--primary-color)}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem}.relationItemBubble .mat-button{border-radius:1.5rem;height:100%;margin:auto 0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                type: Input
+            }], hasNext: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }] } });
+
+class SmartFilterExpressionItemsComponent {
+    constructor() {
+        this._destroy$ = new Subject();
+        this.isSelected = false;
+    }
+    ngOnInit() {
+        var _a;
+        this.service.modelChanged.subscribe(() => {
+            var _a;
+            console.log(this.service.model);
+            this.isSelected = ((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.selectedField) === null;
+        });
+        this.isSelected = ((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.selectedField) === null;
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    select() {
+        // this.service.selectFilterExpressionField(undefined);
+    }
+    drop(event) {
+        moveItemInArray(this.items, event.previousIndex, event.currentIndex);
+    }
+}
+SmartFilterExpressionItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartFilterExpressionItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterExpressionItemsComponent, selector: "app-expression-items", inputs: { items: "items", service: "service" }, ngImport: i0, template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"expressionsContainer example-list\"\r\n  [ngClass]=\"isSelected ? 'selected' : ''\"\r\n>\r\n  <div cdkDrag class=\"expressionItem\" *ngFor=\"let item of items; let i = index\">\r\n    <app-expression-item\r\n      [item]=\"item\"\r\n      [hasNext]=\"i < items.length - 1\"\r\n      [service]=\"service\"\r\n    ></app-expression-item>\r\n  </div>\r\n</div>\r\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: ["item", "hasNext", "service"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionItemsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-expression-items', template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"expressionsContainer example-list\"\r\n  [ngClass]=\"isSelected ? 'selected' : ''\"\r\n>\r\n  <div cdkDrag class=\"expressionItem\" *ngFor=\"let item of items; let i = index\">\r\n    <app-expression-item\r\n      [item]=\"item\"\r\n      [hasNext]=\"i < items.length - 1\"\r\n      [service]=\"service\"\r\n    ></app-expression-item>\r\n  </div>\r\n</div>\r\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { items: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }] } });
+
+class SmartFilterEditorContentComponent {
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this._destroy$ = new Subject();
+        this.uiActionModels = [];
+        this.expressionUiActionModels = [];
+        this.type = FilterExpressionBuilderUiModel.TypeEnum;
+    }
+    ngAfterViewInit() {
+        var _a, _b, _c, _d;
+        if ((_a = this.simpleFilterFormChildren) === null || _a === void 0 ? void 0 : _a.first) {
+            this.subsrcibeSimpleFormChildrenEvents();
         }
         else {
-            this.encodeParam = param => this.defaultEncodeParam(param);
+            (_b = this.simpleFilterFormChildren) === null || _b === void 0 ? void 0 : _b.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
+                this.subsrcibeSimpleFormChildrenEvents();
+            });
         }
-        if (configurationParameters.credentials) {
-            this.credentials = configurationParameters.credentials;
+        if ((_c = this.formChildren) === null || _c === void 0 ? void 0 : _c.first) {
+            this.subscribeEditorFormChildrenEvents();
         }
         else {
-            this.credentials = {};
+            (_d = this.formChildren) === null || _d === void 0 ? void 0 : _d.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
+                this.subscribeEditorFormChildrenEvents();
+            });
         }
     }
-    /**
-     * Select the correct content-type to use for a request.
-     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
-     * If no content type is found return the first found type if the contentTypes is not empty
-     * @param contentTypes - the array of content types that are available for selection
-     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
-     */
-    selectHeaderContentType(contentTypes) {
-        if (contentTypes.length === 0) {
-            return undefined;
-        }
-        const type = contentTypes.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return contentTypes[0];
-        }
-        return type;
-    }
-    /**
-     * Select the correct accept content-type to use for a request.
-     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
-     * If no content type is found return the first found type if the contentTypes is not empty
-     * @param accepts - the array of content types that are available for selection.
-     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
-     */
-    selectHeaderAccept(accepts) {
-        if (accepts.length === 0) {
-            return undefined;
-        }
-        const type = accepts.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return accepts[0];
-        }
-        return type;
-    }
-    /**
-     * Check if the given MIME is a JSON MIME.
-     * JSON MIME examples:
-     *   application/json
-     *   application/json; charset=UTF8
-     *   APPLICATION/JSON
-     *   application/vnd.company+json
-     * @param mime - MIME (Multipurpose Internet Mail Extensions)
-     * @return True if the given MIME is JSON, false otherwise.
-     */
-    isJsonMime(mime) {
-        const jsonMime = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
-        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
-    }
-    lookupCredential(key) {
-        const value = this.credentials[key];
-        return typeof value === 'function'
-            ? value()
-            : value;
-    }
-    defaultEncodeParam(param) {
-        // This implementation exists as fallback for missing configuration
-        // and for backwards compatibility to older typescript-angular generator versions.
-        // It only works for the 'simple' parameter style.
-        // Date-handling only works for the 'date-time' format.
-        // All other styles and Date-formats are probably handled incorrectly.
-        //
-        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
-        const value = param.dataFormat === 'date-time' && param.value instanceof Date
-            ? param.value.toISOString()
-            : param.value;
-        return encodeURIComponent(String(value));
-    }
-}
-
-/**
- * Filter API 2
- * Filter API 2
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-class FilterService {
-    constructor(httpClient, basePath, configuration) {
-        this.httpClient = httpClient;
-        this.basePath = 'http://localhost';
-        this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration();
-        if (configuration) {
-            this.configuration = configuration;
-        }
-        if (typeof this.configuration.basePath !== 'string') {
-            if (Array.isArray(basePath) && basePath.length > 0) {
-                basePath = basePath[0];
-            }
-            if (typeof basePath !== 'string') {
-                basePath = this.basePath;
-            }
-            this.configuration.basePath = basePath;
-        }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
-    }
-    // @ts-ignore
-    addToHttpParams(httpParams, value, key) {
-        if (typeof value === "object" && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
-        }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
-        }
-        return httpParams;
-    }
-    addToHttpParamsRecursive(httpParams, value, key) {
-        if (value == null) {
-            return httpParams;
-        }
-        if (typeof value === "object") {
-            if (Array.isArray(value)) {
-                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
-            }
-            else if (value instanceof Date) {
-                if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString().substr(0, 10));
-                }
-                else {
-                    throw Error("key may not be null if value is Date");
-                }
-            }
-            else {
-                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
-            }
-        }
-        else if (key != null) {
-            httpParams = httpParams.append(key, value);
-        }
-        else {
-            throw Error("key may not be null if value is not object or array");
-        }
-        return httpParams;
-    }
-    load(uuid, filterIdentifier, observe = 'body', reportProgress = false, options) {
-        if (uuid === null || uuid === undefined) {
-            throw new Error('Required parameter uuid was null or undefined when calling load.');
-        }
-        if (filterIdentifier === null || filterIdentifier === undefined) {
-            throw new Error('Required parameter filterIdentifier was null or undefined when calling load.');
-        }
-        let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = [
-                'application/json'
-            ];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
-        }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let responseType_ = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            }
-            else {
-                responseType_ = 'blob';
-            }
-        }
-        let localVarPath = `/filter/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/${this.configuration.encodeParam({ name: "filterIdentifier", value: filterIdentifier, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/load`;
-        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress
-        });
-    }
-    performWidgetAction(uuid, filterIdentifier, body, observe = 'body', reportProgress = false, options) {
-        if (uuid === null || uuid === undefined) {
-            throw new Error('Required parameter uuid was null or undefined when calling performWidgetAction.');
-        }
-        if (filterIdentifier === null || filterIdentifier === undefined) {
-            throw new Error('Required parameter filterIdentifier was null or undefined when calling performWidgetAction.');
-        }
-        if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performWidgetAction.');
-        }
-        let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = [
-                'application/json'
-            ];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
-        }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        // to determine the Content-Type header
-        const consumes = [
-            'application/json'
-        ];
-        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
-        if (httpContentTypeSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
-        }
-        let responseType_ = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            }
-            else {
-                responseType_ = 'blob';
-            }
-        }
-        let localVarPath = `/filter/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/${this.configuration.encodeParam({ name: "filterIdentifier", value: filterIdentifier, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/performWidgetAction`;
-        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            body: body,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress
-        });
-    }
-}
-FilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-FilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [BASE_PATH]
-                    }] }, { type: Configuration, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-class SmartFilterEditorService {
-    constructor(service) {
-        this.service = service;
-        this.modelChanged = new Subject();
-        this.submit = new Subject();
-        this.reSubscribeToChange = new Subject();
-    }
-    load() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.model = yield this.service.load(this.config.uuid, this.config.identifier).toPromise();
-            this.modelChanged.next();
-        });
-    }
-    peformWidgetAction(request) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.model = yield this.service
-                .performWidgetAction(this.config.uuid, this.config.identifier, request)
-                .toPromise();
-            this.modelChanged.next();
-        });
-    }
-    getModel() {
-        return this.model;
-    }
-    performUiActionRequest(uiActionRequest, widgetId, nodeId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.peformWidgetAction(uiActionRequest);
-        });
-    }
-    handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return {
-                shouldPerformAction: true,
-                uiActionRequest: uiActionRequest,
-            };
-        });
-    }
-    getAdditionalParams(uiAction) {
-        throw new Error('Method not implemented.');
-    }
-}
-SmartFilterEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorService, deps: [{ token: FilterService }], target: i0.ɵɵFactoryTarget.Injectable });
-SmartFilterEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: FilterService }]; } });
-
-class SmartFilterParamComponent {
-    constructor(service) {
-        this.service = service;
-    }
-    ngOnInit() { }
-    onItemClick(item) {
-        this.data.serviceToUse.peformWidgetAction({
-            code: 'ADD_FILTER_EXPRESSION',
-            params: {
-                model: item,
-            },
-        });
-    }
-}
-SmartFilterParamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamComponent, deps: [{ token: SmartFilterEditorService }], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterParamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamComponent, selector: "app-target-group-filter-param", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"targetGroupFilterParamContainer\">\r\n  <div\r\n    class=\"targetGroupFilterItem\"\r\n    *ngFor=\"let data of data?.group\"\r\n    (click)=\"onItemClick(data)\"\r\n  >\r\n    <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\r\n    <div class=\"mat-caption\">\r\n      {{ data.label }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"], components: [{ type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-target-group-filter-param', template: "<div class=\"targetGroupFilterParamContainer\">\r\n  <div\r\n    class=\"targetGroupFilterItem\"\r\n    *ngFor=\"let data of data?.group\"\r\n    (click)=\"onItemClick(data)\"\r\n  >\r\n    <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\r\n    <div class=\"mat-caption\">\r\n      {{ data.label }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"] }]
-        }], ctorParameters: function () { return [{ type: SmartFilterEditorService }]; }, propDecorators: { data: [{
-                type: Input
-            }] } });
-
-class SmartFilterParamsComponent {
-    // filterComponentRef?: ComponentRef<SmartFilterComponent>;
-    // filter?: SmartFilter;
-    constructor() {
-        this._destroy$ = new Subject();
-        this.expandableSections = [];
-    }
-    ngOnInit() {
-        this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.setUp(this.service.model);
-        });
-        this.setUp(this.service.model);
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    setUp(model) {
-        this.filterBuilder = model.model;
-        // this.constructFilter();
-        this.constructExpandableSections();
-    }
-    constructExpandableSections() {
-        if (this.filterBuilder.groups) {
-            this.expandableSections = this.filterBuilder.groups.map((filterExpressionBuilderGroup) => {
-                return {
-                    title: filterExpressionBuilderGroup.label,
-                    cssClass: 'filterExpressionBuilderGroup',
-                    customComponent: SmartFilterParamComponent,
-                    data: {
-                        group: filterExpressionBuilderGroup.fields,
-                        serviceToUse: this.service,
-                    },
-                    inputName: 'data',
-                    isExpanded: true,
-                };
-            });
-        }
-        // if (this.service.model?.externalFilterGroup) {
-        //   this.expandableSectionsFromExcel = {
-        //     title: this.service.model.externalFilterGroup.label!,
-        //     cssClass: 'filterExpressionBuilderGroup',
-        //     customComponent: SmartFilterParamComponent,
-        //     data: {
-        //       group: this.service.model.externalFilterGroup.fields,
-        //     },
-        //     inputName: 'data',
-        //     isExpanded: true,
-        //   };
-        // }
-    }
-    // constructFilter(): void {
-    //   if (this.filter && this.filterComponentRef) {
-    //     return;
-    //   }
-    //   // this.filter = {
-    //   //   data: this.service.model?.groupFilter?.filters! as FilterExpressionField[],
-    //   //   type: SmartFilterType.Simple,
-    //   //   showPossibleActions: false,
-    //   // };
-    //   this.filterVcRef?.clear();
-    //   this.filterComponentRef = this.cfService.createComponent(
-    //     this.filterVcRef!,
-    //     SmartFilterComponent,
-    //     new Map<string, any>([['filter', this.filter]])
-    //   );
-    //   this.filterComponentRef.instance?.service.change
-    //     .pipe(takeUntil(this._destroy$))
-    //     .subscribe(() => {
-    //       let uiAction: UiAction = this.service.model?.filterGroupsAction!;
-    //       uiAction.params = {
-    //         filter: {
-    //           filters: this.filterComponentRef?.instance.service.filter?.data,
-    //         },
-    //       };
-    //       // let uiActionModel: UiActionModel = {
-    //       //   serviceToUse: this.service,
-    //       //   uiAction,
-    //       // };
-    //       // this.uiActionService.uiActionModel = uiActionModel;
-    //       // this.uiActionService.execute(uiAction);
-    //     });
-    // }
-    addDataSource() {
-        // this.service.addDataSource();
-    }
-}
-SmartFilterParamsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterParamsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: { service: "service" }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <ng-template #smartFilter></ng-template>\r\n  <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"], components: [{ type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterParamsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smart-filter-group-params', template: "<div\r\n  class=\"targetGroupFilterParamsContainer\"\r\n  *ngIf=\"service.model?.showGroups && !service.model?.readOnly\"\r\n>\r\n  <ng-template #smartFilter></ng-template>\r\n  <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"sections\">\r\n    <smart-expandable-section\r\n      class=\"excel\"\r\n      *ngIf=\"expandableSectionsFromExcel\"\r\n      [data]=\"expandableSectionsFromExcel!\"\r\n    ></smart-expandable-section>\r\n    <smart-expandable-section\r\n      [data]=\"data\"\r\n      *ngFor=\"let data of expandableSections\"\r\n    ></smart-expandable-section>\r\n  </div>\r\n</div>\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { service: [{
-                type: Input
-            }], filterVcRef: [{
-                type: ViewChild,
-                args: ['smartFilter', { read: ViewContainerRef }]
-            }] } });
-
-var FilterExpressionBuilderUiModel;
-(function (FilterExpressionBuilderUiModel) {
-    FilterExpressionBuilderUiModel.TypeEnum = {
-        Simple: 'SIMPLE',
-        Complex: 'COMPLEX'
-    };
-})(FilterExpressionBuilderUiModel || (FilterExpressionBuilderUiModel = {}));
-
-var FilterExpressionBuilderApiActions;
-(function (FilterExpressionBuilderApiActions) {
-    FilterExpressionBuilderApiActions["OPEN_FILTER_GROUPS"] = "OPEN_FILTER_GROUPS";
-    FilterExpressionBuilderApiActions["CLOSE_FILTER_GROUPS"] = "CLOSE_FILTER_GROUPS";
-    FilterExpressionBuilderApiActions["ADD_BRACKET"] = "ADD_BRACKET";
-    FilterExpressionBuilderApiActions["ADD_FILTER_EXPRESSION"] = "ADD_FILTER_EXPRESSION";
-    FilterExpressionBuilderApiActions["REMOVE_FILTER_EXPRESSION"] = "REMOVE_FILTER_EXPRESSION";
-    FilterExpressionBuilderApiActions["REDO"] = "REDO";
-    FilterExpressionBuilderApiActions["FILTER_GROUPS"] = "AFILTER_GROUPS";
-    FilterExpressionBuilderApiActions["SELECT_FIELD"] = "SELECT_FIELD";
-    FilterExpressionBuilderApiActions["UPDATE_FILTER_EXPRESSION"] = "UPDATE_FILTER_EXPRESSION";
-    FilterExpressionBuilderApiActions["SAVE_EXPRESSION_DATA"] = "SAVE_EXPRESSION_DATA";
-    FilterExpressionBuilderApiActions["SAVE_EXPRESSION_FIELD_LIST"] = "SAVE_EXPRESSION_FIELD_LIST";
-})(FilterExpressionBuilderApiActions || (FilterExpressionBuilderApiActions = {}));
-
-class SmartFilterExpressionItemComponent {
-    constructor(service) {
-        this.service = service;
-        this.isSelected = false;
-    }
-    ngOnInit() {
-        var _a;
-        this.isSelected =
-            JSON.stringify((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.selectedField) === JSON.stringify(this.item);
-    }
-    setOperatorTo(event, operationType) {
-        var _a;
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        if (!((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.readOnly)) {
-            this.item.expressionData.boolOperator = operationType;
-            this.service.peformWidgetAction({
-                code: 'UPDATE_FILTER_EXPRESSION',
-                params: {
-                    model: this.item,
-                },
-            });
-        }
-    }
-    select(event, item) {
-        var _a;
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        if (!((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.readOnly)) {
-            if (!this.isSelected) {
-                this.service.peformWidgetAction({
-                    code: 'SELECT_FIELD',
-                    params: {
-                        model: this.item,
-                    },
-                });
-            }
-            else {
-                this.service.peformWidgetAction({
-                    code: 'SELECT_FIELD',
-                    params: {
-                        model: this.item,
-                    },
-                });
-            }
-        }
-    }
-}
-SmartFilterExpressionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionItemComponent, deps: [{ token: SmartFilterEditorService }], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterExpressionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: { item: "item", hasNext: "hasNext" }, ngImport: i0, template: "<div class=\"expressionItemContainer\">\r\n  <div\r\n    class=\"expressionItemInnerContainer\"\r\n    [ngClass]=\"\r\n      item.expressionData?.currentOperation === 'EXPRESSION'\r\n        ? isSelected\r\n          ? 'selectedExpressionContainer'\r\n          : 'expressionContainer'\r\n        : ''\r\n    \"\r\n    (click)=\"select($event, item)\"\r\n  >\r\n    <div\r\n      *ngIf=\"\r\n        item.expressionData?.currentOperation === 'EXPRESSION';\r\n        then expression;\r\n        else simpleItem\r\n      \"\r\n    ></div>\r\n    <ng-template #expression>\r\n      <div class=\"expressionItemBubble expression\">[</div>\r\n      <app-expression-item\r\n        [item]=\"subItem\"\r\n        [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\r\n        *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\r\n      ></app-expression-item>\r\n      <div class=\"expressionItemBubble expression\">]</div>\r\n    </ng-template>\r\n    <ng-template #simpleItem>\r\n      <div\r\n        class=\"expressionItemBubble simpleItem\"\r\n        [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\r\n      >\r\n        {{ item.label\r\n        }}{{ item.expressionData?.operand2?.valueAsString ? \": \" : \"\" }}\r\n        <b>\r\n          {{ item.expressionData?.operand2?.valueAsString }}\r\n        </b>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"hasNext\" class=\"relationItemBubble\">\r\n    <button\r\n      mat-button\r\n      (click)=\"setOperatorTo($event, 'AND')\"\r\n      [ngClass]=\"\r\n        item.expressionData?.boolOperator === 'AND' ? 'mat-raised-button' : ''\r\n      \"\r\n      color=\"black\"\r\n    >\r\n      \u00C9S\r\n    </button>\r\n    <button\r\n      mat-button\r\n      (click)=\"setOperatorTo($event, 'OR')\"\r\n      [ngClass]=\"\r\n        item.expressionData?.boolOperator === 'OR' ? 'mat-raised-button' : ''\r\n      \"\r\n      color=\"black\"\r\n    >\r\n      VAGY\r\n    </button>\r\n  </div>\r\n  <!-- <button mat-mini-fab color=\"gray\">\r\n\t\t<smart-icon icon=\"X\" color=\"gray\"></smart-icon>\r\n\t</button> -->\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-darker-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.selectedSimpleItem{border:2px solid var(--primary-color)}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem}.relationItemBubble .mat-button{border-radius:1.5rem;height:100%;margin:auto 0}\n"], components: [{ type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: ["item", "hasNext"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-expression-item', template: "<div class=\"expressionItemContainer\">\r\n  <div\r\n    class=\"expressionItemInnerContainer\"\r\n    [ngClass]=\"\r\n      item.expressionData?.currentOperation === 'EXPRESSION'\r\n        ? isSelected\r\n          ? 'selectedExpressionContainer'\r\n          : 'expressionContainer'\r\n        : ''\r\n    \"\r\n    (click)=\"select($event, item)\"\r\n  >\r\n    <div\r\n      *ngIf=\"\r\n        item.expressionData?.currentOperation === 'EXPRESSION';\r\n        then expression;\r\n        else simpleItem\r\n      \"\r\n    ></div>\r\n    <ng-template #expression>\r\n      <div class=\"expressionItemBubble expression\">[</div>\r\n      <app-expression-item\r\n        [item]=\"subItem\"\r\n        [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\r\n        *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\r\n      ></app-expression-item>\r\n      <div class=\"expressionItemBubble expression\">]</div>\r\n    </ng-template>\r\n    <ng-template #simpleItem>\r\n      <div\r\n        class=\"expressionItemBubble simpleItem\"\r\n        [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\r\n      >\r\n        {{ item.label\r\n        }}{{ item.expressionData?.operand2?.valueAsString ? \": \" : \"\" }}\r\n        <b>\r\n          {{ item.expressionData?.operand2?.valueAsString }}\r\n        </b>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"hasNext\" class=\"relationItemBubble\">\r\n    <button\r\n      mat-button\r\n      (click)=\"setOperatorTo($event, 'AND')\"\r\n      [ngClass]=\"\r\n        item.expressionData?.boolOperator === 'AND' ? 'mat-raised-button' : ''\r\n      \"\r\n      color=\"black\"\r\n    >\r\n      \u00C9S\r\n    </button>\r\n    <button\r\n      mat-button\r\n      (click)=\"setOperatorTo($event, 'OR')\"\r\n      [ngClass]=\"\r\n        item.expressionData?.boolOperator === 'OR' ? 'mat-raised-button' : ''\r\n      \"\r\n      color=\"black\"\r\n    >\r\n      VAGY\r\n    </button>\r\n  </div>\r\n  <!-- <button mat-mini-fab color=\"gray\">\r\n\t\t<smart-icon icon=\"X\" color=\"gray\"></smart-icon>\r\n\t</button> -->\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-darker-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.selectedSimpleItem{border:2px solid var(--primary-color)}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem}.relationItemBubble .mat-button{border-radius:1.5rem;height:100%;margin:auto 0}\n"] }]
-        }], ctorParameters: function () { return [{ type: SmartFilterEditorService }]; }, propDecorators: { item: [{
-                type: Input
-            }], hasNext: [{
-                type: Input
-            }] } });
-
-class SmartFilterExpressionItemsComponent {
-    constructor(service) {
-        var _a;
-        this.service = service;
-        this._destroy$ = new Subject();
-        this.isSelected = false;
-        this.service.modelChanged.subscribe(() => {
-            var _a;
-            console.log(this.service.model);
-            this.isSelected = ((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.selectedField) === null;
+    subsrcibeSimpleFormChildrenEvents() {
+        var _a, _b, _c, _d;
+        (_b = (_a = this.simpleFilterFormChildren) === null || _a === void 0 ? void 0 : _a.first.onBlurSubject) === null || _b === void 0 ? void 0 : _b.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.saveFilter();
+        });
+        (_d = (_c = this.simpleFilterFormChildren) === null || _c === void 0 ? void 0 : _c.first.sophisticatedValueChange) === null || _d === void 0 ? void 0 : _d.pipe(takeUntil(this._destroy$)).subscribe((change) => {
+            if (change.kind === 'selection') {
+                this.saveFilter();
+            }
         });
-        this.isSelected = ((_a = this.service.model) === null || _a === void 0 ? void 0 : _a.selectedField) === null;
-    }
-    ngOnChanges(changes) {
-        console.log(changes);
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    select() {
-        // this.service.selectFilterExpressionField(undefined);
-    }
-    drop(event) {
-        moveItemInArray(this.items, event.previousIndex, event.currentIndex);
-    }
-}
-SmartFilterExpressionItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionItemsComponent, deps: [{ token: SmartFilterEditorService }], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterExpressionItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterExpressionItemsComponent, selector: "app-expression-items", inputs: { items: "items" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"expressionsContainer example-list\"\r\n  [ngClass]=\"isSelected ? 'selected' : ''\"\r\n>\r\n  <div cdkDrag class=\"expressionItem\" *ngFor=\"let item of items; let i = index\">\r\n    <app-expression-item\r\n      [item]=\"item\"\r\n      [hasNext]=\"i < items.length - 1\"\r\n    ></app-expression-item>\r\n  </div>\r\n</div>\r\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: ["item", "hasNext"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterExpressionItemsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-expression-items', template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"horizontal\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n  class=\"expressionsContainer example-list\"\r\n  [ngClass]=\"isSelected ? 'selected' : ''\"\r\n>\r\n  <div cdkDrag class=\"expressionItem\" *ngFor=\"let item of items; let i = index\">\r\n    <app-expression-item\r\n      [item]=\"item\"\r\n      [hasNext]=\"i < items.length - 1\"\r\n    ></app-expression-item>\r\n  </div>\r\n</div>\r\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
-        }], ctorParameters: function () { return [{ type: SmartFilterEditorService }]; }, propDecorators: { items: [{
-                type: Input
-            }] } });
-
-class SmartFilterEditorContentComponent {
-    constructor(layoutService) {
-        this.layoutService = layoutService;
-        this._destroy$ = new Subject();
-        this.uiActionModels = [];
-        this.expressionUiActionModels = [];
-        this.type = FilterExpressionBuilderUiModel.TypeEnum;
     }
-    ngAfterViewInit() {
+    subscribeEditorFormChildrenEvents() {
         var _a, _b, _c, _d;
-        if ((_a = this.simpleFilterFormChildren) === null || _a === void 0 ? void 0 : _a.first) {
-            (_b = this.simpleFilterFormChildren.first.onBlurSubject) === null || _b === void 0 ? void 0 : _b.pipe(takeUntil(this._destroy$)).subscribe(() => {
-                this.saveFilter();
-            });
-            (_c = this.simpleFilterFormChildren.first.sophisticatedValueChange) === null || _c === void 0 ? void 0 : _c.pipe(takeUntil(this._destroy$)).subscribe((change) => {
-                if (change.kind === 'selection') {
-                    this.saveFilter();
-                }
-            });
-        }
-        else {
-            (_d = this.simpleFilterFormChildren) === null || _d === void 0 ? void 0 : _d.changes.subscribe(() => {
-                var _a, _b;
-                (_a = this.simpleFilterFormChildren.first.onBlurSubject) === null || _a === void 0 ? void 0 : _a.pipe(takeUntil(this._destroy$)).subscribe(() => {
-                    this.saveFilter();
-                });
-                (_b = this.simpleFilterFormChildren.first.sophisticatedValueChange) === null || _b === void 0 ? void 0 : _b.pipe(takeUntil(this._destroy$)).subscribe((change) => {
-                    if (change.kind === 'selection') {
-                        this.saveFilter();
-                    }
-                });
-            });
-        }
+        (_b = (_a = this.formChildren) === null || _a === void 0 ? void 0 : _a.first.onBlurSubject) === null || _b === void 0 ? void 0 : _b.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.save();
+        });
+        (_d = (_c = this.formChildren) === null || _c === void 0 ? void 0 : _c.first.sophisticatedValueChange) === null || _d === void 0 ? void 0 : _d.pipe(takeUntil(this._destroy$)).subscribe((change) => {
+            if (change.key === 'expressionData.currentOperation') {
+                this.save();
+            }
+        });
     }
+    // smartFilterChangeSubscription?: Subscription;
+    // smartFilterSophisticatedChangeSubscription?: Subscription;
+    // smartformChangeSubscription?: Subscription;
+    // smartformSophisticatedChangeSubscription?: Subscription;
     ngOnInit() {
         this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => this.setUp());
         this.service.load();
@@ -13788,42 +13424,45 @@ class SmartFilterEditorContentComponent {
         let key;
         let model = {};
         (_c = (_b = (_a = this.service.model) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.workplaceList) === null || _c === void 0 ? void 0 : _c.filters.forEach((filterExpressionField, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
             model[index] = filterExpressionField;
             if (filterExpressionField.widgetType === 'SELECT_MULTIPLE') {
                 key = index + '.expressionData.operand2.selectedValues';
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, (_a = filterExpressionField.widgetType) !== null && _a !== void 0 ? _a : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, (_a = filterExpressionField.widgetType) !== null && _a !== void 0 ? _a : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, (_d = (_c = (_b = filterExpressionField.expressionData) === null || _b === void 0 ? void 0 : _b.operand2) === null || _c === void 0 ? void 0 : _c.valueAsString) !== null && _d !== void 0 ? _d : ''));
                 return;
             }
-            if (((_b = filterExpressionField.expressionData) === null || _b === void 0 ? void 0 : _b.currentOperation) === 'BETWEEN') {
+            if (((_e = filterExpressionField.expressionData) === null || _e === void 0 ? void 0 : _e.currentOperation) === 'BETWEEN') {
                 key = index + '.expressionData.operand2.valueAsString';
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, (_c = filterExpressionField.widgetType) !== null && _c !== void 0 ? _c : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, (_f = filterExpressionField.widgetType) !== null && _f !== void 0 ? _f : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, (_j = (_h = (_g = filterExpressionField.expressionData) === null || _g === void 0 ? void 0 : _g.operand2) === null || _h === void 0 ? void 0 : _h.valueAsString) !== null && _j !== void 0 ? _j : ''));
                 key = index + '.expressionData.operand3.valueAsString';
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, (_d = filterExpressionField.widgetType) !== null && _d !== void 0 ? _d : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, (_k = filterExpressionField.widgetType) !== null && _k !== void 0 ? _k : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, (_o = (_m = (_l = filterExpressionField.expressionData) === null || _l === void 0 ? void 0 : _l.operand3) === null || _m === void 0 ? void 0 : _m.valueAsString) !== null && _o !== void 0 ? _o : ''));
                 return;
             }
-            if ((_e = filterExpressionField.expressionData) === null || _e === void 0 ? void 0 : _e.operand2) {
+            if ((_p = filterExpressionField.expressionData) === null || _p === void 0 ? void 0 : _p.operand2) {
                 if (key !== index + '.expressionData.operand2.selectedValues') {
                     key = index + '.expressionData.operand2.valueAsString';
                 }
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, (_f = filterExpressionField.widgetType) !== null && _f !== void 0 ? _f : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, (_q = filterExpressionField.widgetType) !== null && _q !== void 0 ? _q : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, (_t = (_s = (_r = filterExpressionField.expressionData) === null || _r === void 0 ? void 0 : _r.operand2) === null || _s === void 0 ? void 0 : _s.valueAsString) !== null && _t !== void 0 ? _t : ''));
                 return;
             }
-            if ((_g = filterExpressionField === null || filterExpressionField === void 0 ? void 0 : filterExpressionField.expressionData) === null || _g === void 0 ? void 0 : _g.operand3) {
+            if ((_u = filterExpressionField === null || filterExpressionField === void 0 ? void 0 : filterExpressionField.expressionData) === null || _u === void 0 ? void 0 : _u.operand3) {
                 if (key !== index + '.selectedValues') {
                     key = index + '.expressionData.operand3.valueAsString';
                 }
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label3, (_h = filterExpressionField.widgetType) !== null && _h !== void 0 ? _h : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label3, (_v = filterExpressionField.widgetType) !== null && _v !== void 0 ? _v : FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues, (_y = (_x = (_w = filterExpressionField.expressionData) === null || _w === void 0 ? void 0 : _w.operand3) === null || _x === void 0 ? void 0 : _x.valueAsString) !== null && _y !== void 0 ? _y : ''));
                 return;
             }
         });
-        this.simpleFilterForm = {
+        let smartForm = {
             direction: SmartFormWidgetDirection.ROW,
             componentModel: { data: model },
             useOnValueChangeEvent: true,
             useOnBlurEvent: true,
             widgets,
         };
+        if (!deepEqual(smartForm, this.simpleFilterForm)) {
+            this.simpleFilterForm = smartForm;
+        }
     }
     extractFilterFieldFromFormModel() {
         var _a, _b;
@@ -13878,9 +13517,6 @@ class SmartFilterEditorContentComponent {
     }
     constructForm() {
         var _a, _b, _c, _d;
-        if (this.smartForm) {
-            return;
-        }
         let generatedWidgets = this.layoutService.render({
             layoutDefinitions: (_c = (_b = (_a = this.service.model) === null || _a === void 0 ? void 0 : _a.selectedFieldEditor) === null || _b === void 0 ? void 0 : _b.layoutDef) === null || _c === void 0 ? void 0 : _c.widgets,
         });
@@ -13891,24 +13527,6 @@ class SmartFilterEditorContentComponent {
             componentModel: { data: (_d = this.service.model) === null || _d === void 0 ? void 0 : _d.selectedField },
             widgets: generatedWidgets,
         };
-        if (this.smartformChangeSubscription) {
-            this.smartformChangeSubscription.unsubscribe();
-        }
-        // this.smartformChangeSubscription = this.formChild?.onBlurSubject
-        //   ?.pipe(takeUntil(this._destroy$))
-        //   .subscribe(() => {
-        //     this.save();
-        //   });
-        // if (this.smartformSophisticatedChangeSubscription) {
-        //   this.smartformSophisticatedChangeSubscription.unsubscribe();
-        // }
-        // this.smartformSophisticatedChangeSubscription = this.formChild?.sophisticatedValueChange
-        //   ?.pipe(takeUntil(this._destroy$))
-        //   .subscribe((change: SophisticatedValueChange) => {
-        //     if (change.key === 'expressionData.currentOperation') {
-        //       this.save();
-        //     }
-        //   });
     }
     save() {
         var _a, _b, _c;
@@ -13929,15 +13547,6 @@ class SmartFilterEditorContentComponent {
             },
         });
     }
-    getFilteredUiActionModels(filterPredicate) {
-        // return this.service.model!.possibleActions!.filter(filterPredicate).map((uiAction: UiAction) => {
-        //   return {
-        //     serviceToUse: this.service,
-        //     uiAction,
-        //   };
-        // });
-        return [];
-    }
     saveFilter() {
         return __awaiter(this, void 0, void 0, function* () {
             this.extractFilterFieldFromFormModel();
@@ -13949,7 +13558,7 @@ class SmartFilterEditorContentComponent {
             });
         });
     }
-    constructFormWidget(key, label, widgetType, possibleValues) {
+    constructFormWidget(key, label, widgetType, possibleValues, value) {
         let type = widgetType;
         if (type === FilterExpressionFieldWidgetType.Date) {
             type = SmartFormWidgetType.DATE_PICKER;
@@ -13958,10 +13567,11 @@ class SmartFilterEditorContentComponent {
             type = SmartFormWidgetType.DATE_TIME_PICKER;
         }
         let widget = {
+            error: undefined,
             key,
             label,
             type,
-            value: '',
+            value,
             showLabel: true,
             valueList: possibleValues.map((value) => {
                 return {
@@ -13976,10 +13586,10 @@ class SmartFilterEditorContentComponent {
     }
 }
 SmartFilterEditorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorContentComponent, deps: [{ token: SmartformLayoutDefinitionService }], target: i0.ɵɵFactoryTarget.Component });
-SmartFilterEditorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: { service: "service" }, viewQueries: [{ propertyName: "formChildren", predicate: ["form"], descendants: true }, { propertyName: "simpleFilterFormChildren", predicate: ["simpleFilterFromChild"], descendants: true }], ngImport: i0, template: "<div class=\"targetGroupContentContainer\">\r\n  <h3>{{ service.model?.model?.label }}</h3>\r\n\r\n  <div *ngIf=\"service.model?.type === type.Simple; then simpleFilter; else complexFilter\"></div>\r\n\r\n  <ng-template #simpleFilter>\r\n    <div class=\"expressionsContainer\">\r\n      <smartform #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #complexFilter>\r\n    <div class=\"uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\r\n      <div class=\"uiActionsInsideOfBar\">\r\n        <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n      </div>\r\n    </div>\r\n    <div\r\n      *ngIf=\"\r\n        service?.model?.model?.workplaceList?.filters?.length;\r\n        then withParameters;\r\n        else withoutParameters\r\n      \"\r\n    ></div>\r\n    <ng-template #withoutParameters>\r\n      <div class=\"withoutParametersContainer\">\r\n        <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #withParameters>\r\n      <div class=\"withParametersContainer\">\r\n        <div\r\n          class=\"expressionsContainer\"\r\n          *ngIf=\"service?.model?.model?.workplaceList?.filters?.length\"\r\n        >\r\n          <app-expression-items\r\n            [items]=\"(service.model?.model?.workplaceList)!.filters\"\r\n          ></app-expression-items>\r\n        </div>\r\n        <div class=\"expressionEditorContainer\">\r\n          <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n          <div *ngIf=\"smartForm\">\r\n            <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n</div>\r\n", styles: [".targetGroupContentContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.uiActionsBar{padding:1.5rem;border-radius:.25rem;background-color:var(--container-color)}.uiActionsBar,.uiActionsInsideOfBar{display:flex;flex-direction:row;gap:1rem}.uiActionsInsideOfBar{position:relative;left:-3rem}.section,.notSection{display:flex;flex-direction:row;gap:1rem}.section:before{content:\"\";border:1px solid #d9d9d9;align-self:stretch}.withoutParametersContainer{display:flex;flex-direction:column;padding:2rem;background-color:var(--container-color);border-radius:.25rem}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.withParametersContainer{display:flex;flex-direction:column;padding:1.5rem;background-color:var(--container-color);border-radius:.25rem;gap:.75rem}.expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;margin-bottom:1px solid #cdcdcd}.expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"], components: [{ type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService"] }, { type: SmartFilterExpressionItemsComponent, selector: "app-expression-items", inputs: ["items"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SmartFilterEditorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: { service: "service" }, viewQueries: [{ propertyName: "formChildren", predicate: ["form"], descendants: true }, { propertyName: "simpleFilterFormChildren", predicate: ["simpleFilterFromChild"], descendants: true }], ngImport: i0, template: "<div class=\"targetGroupContentContainer\">\r\n  <h3>{{ service.model?.model?.label }}</h3>\r\n\r\n  <div *ngIf=\"service.model?.type === type.Simple; then simpleFilter; else complexFilter\"></div>\r\n\r\n  <ng-template #simpleFilter>\r\n    <div class=\"expressionsContainer\">\r\n      <smartform #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #complexFilter>\r\n    <div class=\"uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\r\n      <div class=\"uiActionsInsideOfBar\">\r\n        <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n      </div>\r\n    </div>\r\n    <div\r\n      *ngIf=\"\r\n        service?.model?.model?.workplaceList?.filters?.length;\r\n        then withParameters;\r\n        else withoutParameters\r\n      \"\r\n    ></div>\r\n    <ng-template #withoutParameters>\r\n      <div class=\"withoutParametersContainer\">\r\n        <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #withParameters>\r\n      <div class=\"withParametersContainer\">\r\n        <div\r\n          class=\"expressionsContainer\"\r\n          *ngIf=\"service?.model?.model?.workplaceList?.filters?.length\"\r\n        >\r\n          <app-expression-items\r\n            [items]=\"(service.model?.model?.workplaceList)!.filters\"\r\n            [service]=\"service\"\r\n          ></app-expression-items>\r\n        </div>\r\n        <div class=\"expressionEditorContainer\">\r\n          <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n          <div *ngIf=\"smartForm\">\r\n            <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n</div>\r\n", styles: [".targetGroupContentContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.uiActionsBar{padding:1.5rem;border-radius:.25rem;background-color:var(--container-color)}.uiActionsBar,.uiActionsInsideOfBar{display:flex;flex-direction:row;gap:1rem}.uiActionsInsideOfBar{position:relative;left:-3rem}.section,.notSection{display:flex;flex-direction:row;gap:1rem}.section:before{content:\"\";border:1px solid #d9d9d9;align-self:stretch}.withoutParametersContainer{display:flex;flex-direction:column;padding:2rem;background-color:var(--container-color);border-radius:.25rem}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.withParametersContainer{display:flex;flex-direction:column;padding:1.5rem;background-color:var(--container-color);border-radius:.25rem;gap:.75rem}.expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;margin-bottom:1px solid #cdcdcd}.expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"], components: [{ type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService"] }, { type: SmartFilterExpressionItemsComponent, selector: "app-expression-items", inputs: ["items", "service"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-filter-expression-editor', template: "<div class=\"targetGroupContentContainer\">\r\n  <h3>{{ service.model?.model?.label }}</h3>\r\n\r\n  <div *ngIf=\"service.model?.type === type.Simple; then simpleFilter; else complexFilter\"></div>\r\n\r\n  <ng-template #simpleFilter>\r\n    <div class=\"expressionsContainer\">\r\n      <smartform #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #complexFilter>\r\n    <div class=\"uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\r\n      <div class=\"uiActionsInsideOfBar\">\r\n        <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n      </div>\r\n    </div>\r\n    <div\r\n      *ngIf=\"\r\n        service?.model?.model?.workplaceList?.filters?.length;\r\n        then withParameters;\r\n        else withoutParameters\r\n      \"\r\n    ></div>\r\n    <ng-template #withoutParameters>\r\n      <div class=\"withoutParametersContainer\">\r\n        <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #withParameters>\r\n      <div class=\"withParametersContainer\">\r\n        <div\r\n          class=\"expressionsContainer\"\r\n          *ngIf=\"service?.model?.model?.workplaceList?.filters?.length\"\r\n        >\r\n          <app-expression-items\r\n            [items]=\"(service.model?.model?.workplaceList)!.filters\"\r\n          ></app-expression-items>\r\n        </div>\r\n        <div class=\"expressionEditorContainer\">\r\n          <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n          <div *ngIf=\"smartForm\">\r\n            <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n</div>\r\n", styles: [".targetGroupContentContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.uiActionsBar{padding:1.5rem;border-radius:.25rem;background-color:var(--container-color)}.uiActionsBar,.uiActionsInsideOfBar{display:flex;flex-direction:row;gap:1rem}.uiActionsInsideOfBar{position:relative;left:-3rem}.section,.notSection{display:flex;flex-direction:row;gap:1rem}.section:before{content:\"\";border:1px solid #d9d9d9;align-self:stretch}.withoutParametersContainer{display:flex;flex-direction:column;padding:2rem;background-color:var(--container-color);border-radius:.25rem}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.withParametersContainer{display:flex;flex-direction:column;padding:1.5rem;background-color:var(--container-color);border-radius:.25rem;gap:.75rem}.expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;margin-bottom:1px solid #cdcdcd}.expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"] }]
+            args: [{ selector: 'smart-filter-expression-editor', template: "<div class=\"targetGroupContentContainer\">\r\n  <h3>{{ service.model?.model?.label }}</h3>\r\n\r\n  <div *ngIf=\"service.model?.type === type.Simple; then simpleFilter; else complexFilter\"></div>\r\n\r\n  <ng-template #simpleFilter>\r\n    <div class=\"expressionsContainer\">\r\n      <smartform #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #complexFilter>\r\n    <div class=\"uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\r\n      <div class=\"uiActionsInsideOfBar\">\r\n        <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n      </div>\r\n    </div>\r\n    <div\r\n      *ngIf=\"\r\n        service?.model?.model?.workplaceList?.filters?.length;\r\n        then withParameters;\r\n        else withoutParameters\r\n      \"\r\n    ></div>\r\n    <ng-template #withoutParameters>\r\n      <div class=\"withoutParametersContainer\">\r\n        <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #withParameters>\r\n      <div class=\"withParametersContainer\">\r\n        <div\r\n          class=\"expressionsContainer\"\r\n          *ngIf=\"service?.model?.model?.workplaceList?.filters?.length\"\r\n        >\r\n          <app-expression-items\r\n            [items]=\"(service.model?.model?.workplaceList)!.filters\"\r\n            [service]=\"service\"\r\n          ></app-expression-items>\r\n        </div>\r\n        <div class=\"expressionEditorContainer\">\r\n          <smartform #form [smartForm]=\"smartForm\"></smartform>\r\n          <div *ngIf=\"smartForm\">\r\n            <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n</div>\r\n", styles: [".targetGroupContentContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.uiActionsBar{padding:1.5rem;border-radius:.25rem;background-color:var(--container-color)}.uiActionsBar,.uiActionsInsideOfBar{display:flex;flex-direction:row;gap:1rem}.uiActionsInsideOfBar{position:relative;left:-3rem}.section,.notSection{display:flex;flex-direction:row;gap:1rem}.section:before{content:\"\";border:1px solid #d9d9d9;align-self:stretch}.withoutParametersContainer{display:flex;flex-direction:column;padding:2rem;background-color:var(--container-color);border-radius:.25rem}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.withParametersContainer{display:flex;flex-direction:column;padding:1.5rem;background-color:var(--container-color);border-radius:.25rem;gap:.75rem}.expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;margin-bottom:1px solid #cdcdcd}.expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"] }]
         }], ctorParameters: function () { return [{ type: SmartformLayoutDefinitionService }]; }, propDecorators: { service: [{
                 type: Input
             }], formChildren: [{
@@ -14184,52 +13794,408 @@ class SmartComponentLayoutUtility {
         layout.parentComponent = parent;
         (_a = layout.components) === null || _a === void 0 ? void 0 : _a.forEach((l) => this.setParent(l, parent));
     }
-    static getForms(comp) {
-        let result = [];
-        if (comp.components) {
-            result = comp.components
-                .map((c) => this.getForms(c))
-                .reduce((acc, value) => acc.concat(value), []);
+    static getForms(comp) {
+        let result = [];
+        if (comp.components) {
+            result = comp.components
+                .map((c) => this.getForms(c))
+                .reduce((acc, value) => acc.concat(value), []);
+        }
+        if (comp.smartFormComponent) {
+            result.push(comp.smartFormComponent);
+        }
+        return result;
+    }
+    static getGrids(comp) {
+        let result = [];
+        if (comp.components) {
+            result = comp.components
+                .map((c) => this.getGrids(c))
+                .reduce((acc, value) => acc.concat(value), []);
+        }
+        if (comp.smartGridComponent) {
+            result.push(comp.smartGridComponent);
+        }
+        return result;
+    }
+    static getTrees(comp) {
+        var _a;
+        let result = [];
+        if (comp.components) {
+            result = (_a = comp.components) === null || _a === void 0 ? void 0 : _a.map((c) => this.getTrees(c)).reduce((acc, value) => acc.concat(value), []);
+        }
+        if (comp.treeService) {
+            result.push(comp.treeService);
+        }
+        return result;
+    }
+}
+
+/*
+ * Public API Surface of smart-component-layout
+ */
+
+/**
+ * Custom HttpParameterCodec
+ * Workaround for https://github.com/angular/angular/issues/18261
+ */
+class CustomHttpParameterCodec {
+    encodeKey(k) {
+        return encodeURIComponent(k);
+    }
+    encodeValue(v) {
+        return encodeURIComponent(v);
+    }
+    decodeKey(k) {
+        return decodeURIComponent(k);
+    }
+    decodeValue(v) {
+        return decodeURIComponent(v);
+    }
+}
+
+const BASE_PATH = new InjectionToken('basePath');
+const COLLECTION_FORMATS = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+};
+
+class Configuration {
+    constructor(configurationParameters = {}) {
+        this.apiKeys = configurationParameters.apiKeys;
+        this.username = configurationParameters.username;
+        this.password = configurationParameters.password;
+        this.accessToken = configurationParameters.accessToken;
+        this.basePath = configurationParameters.basePath;
+        this.withCredentials = configurationParameters.withCredentials;
+        this.encoder = configurationParameters.encoder;
+        if (configurationParameters.encodeParam) {
+            this.encodeParam = configurationParameters.encodeParam;
+        }
+        else {
+            this.encodeParam = param => this.defaultEncodeParam(param);
+        }
+        if (configurationParameters.credentials) {
+            this.credentials = configurationParameters.credentials;
+        }
+        else {
+            this.credentials = {};
+        }
+    }
+    /**
+     * Select the correct content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderContentType(contentTypes) {
+        if (contentTypes.length === 0) {
+            return undefined;
+        }
+        const type = contentTypes.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return contentTypes[0];
+        }
+        return type;
+    }
+    /**
+     * Select the correct accept content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderAccept(accepts) {
+        if (accepts.length === 0) {
+            return undefined;
+        }
+        const type = accepts.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return accepts[0];
+        }
+        return type;
+    }
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    isJsonMime(mime) {
+        const jsonMime = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+    }
+    lookupCredential(key) {
+        const value = this.credentials[key];
+        return typeof value === 'function'
+            ? value()
+            : value;
+    }
+    defaultEncodeParam(param) {
+        // This implementation exists as fallback for missing configuration
+        // and for backwards compatibility to older typescript-angular generator versions.
+        // It only works for the 'simple' parameter style.
+        // Date-handling only works for the 'date-time' format.
+        // All other styles and Date-formats are probably handled incorrectly.
+        //
+        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
+        const value = param.dataFormat === 'date-time' && param.value instanceof Date
+            ? param.value.toISOString()
+            : param.value;
+        return encodeURIComponent(String(value));
+    }
+}
+
+/**
+ * Filter API 2
+ * Filter API 2
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+class FilterService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
         }
-        if (comp.smartFormComponent) {
-            result.push(comp.smartFormComponent);
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
         }
-        return result;
+        return httpParams;
     }
-    static getGrids(comp) {
-        let result = [];
-        if (comp.components) {
-            result = comp.components
-                .map((c) => this.getGrids(c))
-                .reduce((acc, value) => acc.concat(value), []);
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
         }
-        if (comp.smartGridComponent) {
-            result.push(comp.smartGridComponent);
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substr(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
         }
-        return result;
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
     }
-    static getTrees(comp) {
-        var _a;
-        let result = [];
-        if (comp.components) {
-            result = (_a = comp.components) === null || _a === void 0 ? void 0 : _a.map((c) => this.getTrees(c)).reduce((acc, value) => acc.concat(value), []);
+    load(uuid, filterIdentifier, observe = 'body', reportProgress = false, options) {
+        if (uuid === null || uuid === undefined) {
+            throw new Error('Required parameter uuid was null or undefined when calling load.');
         }
-        if (comp.treeService) {
-            result.push(comp.treeService);
+        if (filterIdentifier === null || filterIdentifier === undefined) {
+            throw new Error('Required parameter filterIdentifier was null or undefined when calling load.');
         }
-        return result;
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/filter/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/${this.configuration.encodeParam({ name: "filterIdentifier", value: filterIdentifier, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/load`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
     }
-}
+    performWidgetAction(uuid, filterIdentifier, body, observe = 'body', reportProgress = false, options) {
+        if (uuid === null || uuid === undefined) {
+            throw new Error('Required parameter uuid was null or undefined when calling performWidgetAction.');
+        }
+        if (filterIdentifier === null || filterIdentifier === undefined) {
+            throw new Error('Required parameter filterIdentifier was null or undefined when calling performWidgetAction.');
+        }
+        if (body === null || body === undefined) {
+            throw new Error('Required parameter body was null or undefined when calling performWidgetAction.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        // to determine the Content-Type header
+        const consumes = [
+            'application/json'
+        ];
+        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/filter/${this.configuration.encodeParam({ name: "uuid", value: uuid, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid" })}/${this.configuration.encodeParam({ name: "filterIdentifier", value: filterIdentifier, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/performWidgetAction`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: body,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
+    }
+}
+FilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+FilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [BASE_PATH]
+                    }] }, { type: Configuration, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
 
-/*
- * Public API Surface of smart-component-layout
- */
+class SmartFilterEditorService {
+    constructor(service) {
+        this.service = service;
+        this.modelChanged = new Subject();
+        this.submit = new Subject();
+        this.reSubscribeToChange = new Subject();
+    }
+    load() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.model = yield this.service.load(this.config.uuid, this.config.identifier).toPromise();
+            this.modelChanged.next();
+        });
+    }
+    peformWidgetAction(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.model = yield this.service
+                .performWidgetAction(this.config.uuid, this.config.identifier, request)
+                .toPromise();
+            this.modelChanged.next();
+        });
+    }
+    getModel() {
+        return this.model;
+    }
+    performUiActionRequest(uiActionRequest, widgetId, nodeId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.peformWidgetAction(uiActionRequest);
+        });
+    }
+    handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return {
+                shouldPerformAction: true,
+                uiActionRequest: uiActionRequest,
+            };
+        });
+    }
+    getAdditionalParams(uiAction) {
+        throw new Error('Method not implemented.');
+    }
+}
+SmartFilterEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorService, deps: [{ token: FilterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SmartFilterEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FilterService }]; } });
 
-let SmartComponentApiClient = class SmartComponentApiClient {
-    constructor(inject, auth, pageName) {
+class SmartComponentApiClient {
+    constructor(inject, auth, pageName, componentName) {
         this.inject = inject;
         this.auth = auth;
         this.pageName = pageName;
+        this.componentName = componentName;
         this._destroy$ = new Subject();
         this.detectChange = new SmartSubject(this._destroy$);
         this.uiActionModels = [];
@@ -14238,10 +14204,24 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         this.widgets = new WidgetMap();
         this.formWidgets = new WidgetMap();
         this.useQueryLists = false;
+        // check and calculate pageName
+        if (!this.pageName && !this.componentName) {
+            throw new Error('pageName or componentName must be specified!');
+        }
+        this.viewContext = inject.get(SmartViewContextService);
+        if (this.componentName) {
+            let pageNameForComponent = this.viewContext.getPageNameOfComponent(this.componentName);
+            if (!this.pageName) {
+                this.pageName = pageNameForComponent;
+            }
+            else if (this.pageName !== pageNameForComponent) {
+                throw new Error(`pageName (${pageName}) and componentName (${componentName}) doesn't match!`);
+            }
+        }
+        // from this point we have this.pageName
         this.detectChange.subscribe((change) => {
             this.handleChanges(change);
         });
-        this.viewContext = inject.get(SmartViewContextService);
         this.uiActionService = inject.get(UiActionService);
         this.uiActionDescriptorService = inject.get(UiActionDescriptorService);
     }
@@ -14315,23 +14295,42 @@ let SmartComponentApiClient = class SmartComponentApiClient {
         if (this.useQueryLists) {
             if (!this.getSmartComponentLayoutsQL()) {
                 console.warn('SmartComponentLayoutsQL not available!');
-                return;
             }
-            // TODO maybe we should set comp.parent, not comp.smartComponentLayout.parentComponent..
-            this.getSmartComponentLayoutsQL().forEach((comp) => {
-                if (comp.smartComponentLayout) {
-                    SmartComponentLayoutUtility.setParent(comp.smartComponentLayout, this);
-                }
-            });
-            this.getSmartComponentLayoutsQL()
-                .changes.pipe(takeUntil(this._destroy$))
-                .subscribe((list) => list.forEach((comp) => {
-                if (comp.smartComponentLayout) {
-                    SmartComponentLayoutUtility.setParent(comp.smartComponentLayout, this);
-                }
-            }));
+            else {
+                this.handleQueryList(this.getSmartComponentLayoutsQL(), (comp) => {
+                    if (comp.smartComponentLayout) {
+                        // TODO maybe we should set comp.parent, not comp.smartComponentLayout.parentComponent..
+                        SmartComponentLayoutUtility.setParent(comp.smartComponentLayout, this);
+                    }
+                    if (this.uuid && this.uuid !== comp.uuid)
+                        comp.uuid = this.uuid;
+                });
+            }
+            if (!this.getSmartGridsQL()) {
+                console.warn('SmartGridsQL not available!');
+            }
+            else {
+                this.handleQueryList(this.getSmartGridsQL(), (grid) => {
+                    if (grid) {
+                        if (grid.smartGrid) {
+                            grid.smartGrid.uiActionService = this.uiActionService;
+                            grid.smartGrid.uiActionDescriptorService = this.uiActionDescriptorService;
+                            grid.smartGrid.serviceToUse = this;
+                            grid.smartGrid.viewContextService = this.viewContext;
+                        }
+                        if (this.uuid && this.uuid !== grid.uuid)
+                            grid.uuid = this.uuid;
+                    }
+                });
+            }
         }
     }
+    handleQueryList(ql, handler) {
+        ql.forEach((el) => handler(el));
+        this.getSmartComponentLayoutsQL()
+            .changes.pipe(takeUntil(this._destroy$))
+            .subscribe((list) => list.forEach((el) => handler(el)));
+    }
     getWidgets() {
         if (this.useQueryLists) {
             let widgets = new WidgetMap();
@@ -14729,10 +14728,7 @@ let SmartComponentApiClient = class SmartComponentApiClient {
     handleConstraintChange(changes, changeKey) {
         this.model.constraints = changes[changeKey];
     }
-};
-SmartComponentApiClient = __decorate([
-    __param(2, Inject('pageName'))
-], SmartComponentApiClient);
+}
 class WidgetMap {
     constructor() {
         this._widgets = new Map();