@smartbit4all/ng-client 3.2.4 → 3.2.5

package/fesm2020/smartbit4all-ng-client.mjs

@@ -13022,827 +13022,419 @@ 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;
-        }
-        else {
-            this.encodeParam = param => this.defaultEncodeParam(param);
-        }
-        if (configurationParameters.credentials) {
-            this.credentials = configurationParameters.credentials;
-        }
-        else {
-            this.credentials = {};
-        }
+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;
     }
-    /**
-     * 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;
+    ngOnInit() {
+        this.isSelected =
+            JSON.stringify(this.service.model?.selectedField) === JSON.stringify(this.item);
     }
-    /**
-     * 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;
+    setOperatorTo(event, operationType) {
+        event?.stopPropagation();
+        if (!this.service.model?.readOnly) {
+            this.item.expressionData.boolOperator = operationType;
+            this.service.peformWidgetAction({
+                code: 'UPDATE_FILTER_EXPRESSION',
+                params: {
+                    model: this.item,
+                },
+            });
         }
-        const type = accepts.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return accepts[0];
+    }
+    select(event, item) {
+        event?.stopPropagation();
+        if (!this.service.model?.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,
+                    },
+                });
+            }
         }
-        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');
+}
+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;
     }
-    lookupCredential(key) {
-        const value = this.credentials[key];
-        return typeof value === 'function'
-            ? value()
-            : value;
+    ngOnInit() {
+        this.service.modelChanged.subscribe(() => {
+            console.log(this.service.model);
+            this.isSelected = this.service.model?.selectedField === null;
+        });
+        this.isSelected = this.service.model?.selectedField === null;
     }
-    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));
+    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
+            }] } });
 
-/**
- * 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;
+class SmartFilterEditorContentComponent {
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this._destroy$ = new Subject();
+        this.uiActionModels = [];
+        this.expressionUiActionModels = [];
+        this.type = FilterExpressionBuilderUiModel.TypeEnum;
+    }
+    ngAfterViewInit() {
+        if (this.simpleFilterFormChildren?.first) {
+            this.subsrcibeSimpleFormChildrenEvents();
         }
-        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;
+        else {
+            this.simpleFilterFormChildren?.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
+                this.subsrcibeSimpleFormChildrenEvents();
+            });
         }
-        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 (this.formChildren?.first) {
+            this.subscribeEditorFormChildrenEvents();
         }
         else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+            this.formChildren?.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
+                this.subscribeEditorFormChildrenEvents();
+            });
         }
-        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");
-                }
+    subsrcibeSimpleFormChildrenEvents() {
+        this.simpleFilterFormChildren?.first.onBlurSubject
+            ?.pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.saveFilter();
+        });
+        this.simpleFilterFormChildren?.first.sophisticatedValueChange
+            ?.pipe(takeUntil(this._destroy$))
+            .subscribe((change) => {
+            if (change.kind === 'selection') {
+                this.saveFilter();
             }
-            else {
-                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+        });
+    }
+    subscribeEditorFormChildrenEvents() {
+        this.formChildren?.first.onBlurSubject?.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.save();
+        });
+        this.formChildren?.first.sophisticatedValueChange
+            ?.pipe(takeUntil(this._destroy$))
+            .subscribe((change) => {
+            if (change.key === 'expressionData.currentOperation') {
+                this.save();
             }
-        }
-        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';
+    // smartFilterChangeSubscription?: Subscription;
+    // smartFilterSophisticatedChangeSubscription?: Subscription;
+    // smartformChangeSubscription?: Subscription;
+    // smartformSophisticatedChangeSubscription?: Subscription;
+    ngOnInit() {
+        this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => this.setUp());
+        this.service.load();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    setupSimpleFilter() {
+        let widgets = [];
+        let key;
+        let model = {};
+        this.service.model?.model?.workplaceList?.filters.forEach((filterExpressionField, index) => {
+            model[index] = filterExpressionField;
+            if (filterExpressionField.widgetType === 'SELECT_MULTIPLE') {
+                key = index + '.expressionData.operand2.selectedValues';
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                return;
             }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
+            if (filterExpressionField.expressionData?.currentOperation === 'BETWEEN') {
+                key = index + '.expressionData.operand2.valueAsString';
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                key = index + '.expressionData.operand3.valueAsString';
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                return;
             }
-            else {
-                responseType_ = 'blob';
+            if (filterExpressionField.expressionData?.operand2) {
+                if (key !== index + '.expressionData.operand2.selectedValues') {
+                    key = index + '.expressionData.operand2.valueAsString';
+                }
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                return;
+            }
+            if (filterExpressionField?.expressionData?.operand3) {
+                if (key !== index + '.selectedValues') {
+                    key = index + '.expressionData.operand3.valueAsString';
+                }
+                widgets.push(this.constructFormWidget(key, filterExpressionField.label3, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
+                return;
             }
-        }
-        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
         });
+        this.simpleFilterForm = {
+            direction: SmartFormWidgetDirection.ROW,
+            componentModel: { data: model },
+            useOnValueChangeEvent: true,
+            useOnBlurEvent: true,
+            widgets,
+        };
     }
-    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);
+    extractFilterFieldFromFormModel() {
+        let simpleFilter = this.simpleFilterFormChildren?.first?.submitForm(false).componentModel.data;
+        let result = [];
+        Object.keys(simpleFilter).forEach((key) => {
+            result.push(simpleFilter[key]);
+        });
+        this.service.model.model.workplaceList.filters = result;
+    }
+    setUp() {
+        if (this.service.model?.type === this.type.Simple) {
+            this.setupSimpleFilter();
         }
-        let responseType_ = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
+        else {
+            this.constructUiActionModels();
+            if (this.service.model.selectedFieldEditor) {
+                this.constructForm();
             }
             else {
-                responseType_ = 'blob';
+                this.smartForm = undefined;
             }
         }
-        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();
-    }
-    async load() {
-        this.model = await this.service.load(this.config.uuid, this.config.identifier).toPromise();
-        this.modelChanged.next();
-    }
-    async peformWidgetAction(request) {
-        this.model = await this.service
-            .performWidgetAction(this.config.uuid, this.config.identifier, request)
-            .toPromise();
-        this.modelChanged.next();
-    }
-    getModel() {
-        return this.model;
-    }
-    async performUiActionRequest(uiActionRequest, widgetId, nodeId) {
-        await this.peformWidgetAction(uiActionRequest);
+    constructUiActionModels() {
+        if (this.service.model?.possibleActions) {
+            this.uiActionModels = this.service.model.possibleActions.map((action) => {
+                return {
+                    serviceToUse: this.service,
+                    uiAction: action,
+                };
+            });
+        }
+        if (this.service.model?.selectedFieldEditor?.possibleActions) {
+            this.expressionUiActionModels = this.service.model?.selectedFieldEditor.possibleActions.map((uiAction) => {
+                let copiedUiAction = {};
+                Object.keys(uiAction).map((key) => {
+                    copiedUiAction[key] = uiAction[key];
+                });
+                copiedUiAction.params = {
+                    field: this.service.model?.selectedField,
+                };
+                return {
+                    serviceToUse: this.service,
+                    uiAction: copiedUiAction,
+                };
+            });
+        }
     }
-    async handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
-        return {
-            shouldPerformAction: true,
-            uiActionRequest: uiActionRequest,
+    constructForm() {
+        let generatedWidgets = this.layoutService.render({
+            layoutDefinitions: this.service.model?.selectedFieldEditor?.layoutDef?.widgets,
+        });
+        this.smartForm = {
+            direction: SmartFormWidgetDirection.ROW,
+            useOnBlurEvent: true,
+            useOnValueChangeEvent: true,
+            componentModel: { data: this.service.model?.selectedField },
+            widgets: generatedWidgets,
         };
     }
-    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',
+    save() {
+        this.formChildren?.first?.submitForm(false);
+        this.service.peformWidgetAction({
+            code: 'UPDATE_FILTER_EXPRESSION',
             params: {
-                model: item,
+                model: this.service.model?.selectedField,
             },
         });
     }
-}
-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);
+    remove() {
+        this.service.peformWidgetAction({
+            code: 'REMOVE_FILTER_EXPRESSION',
+            params: {
+                model: this.service.model?.selectedField,
+            },
         });
-        this.setUp(this.service.model);
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
     }
-    setUp(model) {
-        this.filterBuilder = model.model;
-        // this.constructFilter();
-        this.constructExpandableSections();
+    async saveFilter() {
+        this.extractFilterFieldFromFormModel();
+        this.service.performUiActionRequest({
+            code: FilterExpressionBuilderApiActions.SAVE_EXPRESSION_FIELD_LIST,
+            params: {
+                model: this.service.model,
+            },
+        });
     }
-    constructExpandableSections() {
-        if (this.filterBuilder.groups) {
-            this.expandableSections = this.filterBuilder.groups.map((filterExpressionBuilderGroup) => {
+    constructFormWidget(key, label, widgetType, possibleValues) {
+        let type = widgetType;
+        if (type === FilterExpressionFieldWidgetType.Date) {
+            type = SmartFormWidgetType.DATE_PICKER;
+        }
+        else if (type === FilterExpressionFieldWidgetType.DateTime) {
+            type = SmartFormWidgetType.DATE_TIME_PICKER;
+        }
+        let widget = {
+            key,
+            label,
+            type,
+            value: '',
+            showLabel: true,
+            valueList: possibleValues.map((value) => {
                 return {
-                    title: filterExpressionBuilderGroup.label,
-                    cssClass: 'filterExpressionBuilderGroup',
-                    customComponent: SmartFilterParamComponent,
-                    data: {
-                        group: filterExpressionBuilderGroup.fields,
-                        serviceToUse: this.service,
-                    },
-                    inputName: 'data',
-                    isExpanded: true,
+                    key: value.objectUri ? value.objectUri : value.code,
+                    label: value.displayValue,
+                    type: SmartFormWidgetType.ITEM,
+                    value: value.objectUri ? value.objectUri : value.code,
                 };
-            });
-        }
-        // 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();
+            }),
+        };
+        return widget;
     }
 }
-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: [{
+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            [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-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: [{
+            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
-            }], filterVcRef: [{
-                type: ViewChild,
-                args: ['smartFilter', { read: ViewContainerRef }]
+            }], formChildren: [{
+                type: ViewChildren,
+                args: ['form']
+            }], simpleFilterFormChildren: [{
+                type: ViewChildren,
+                args: ['simpleFilterFromChild']
             }] } });
 
-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() {
-        this.isSelected =
-            JSON.stringify(this.service.model?.selectedField) === JSON.stringify(this.item);
-    }
-    setOperatorTo(event, operationType) {
-        event?.stopPropagation();
-        if (!this.service.model?.readOnly) {
-            this.item.expressionData.boolOperator = operationType;
-            this.service.peformWidgetAction({
-                code: 'UPDATE_FILTER_EXPRESSION',
-                params: {
-                    model: this.item,
-                },
-            });
-        }
-    }
-    select(event, item) {
-        event?.stopPropagation();
-        if (!this.service.model?.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) {
-        this.service = service;
-        this._destroy$ = new Subject();
-        this.isSelected = false;
-        this.service.modelChanged.subscribe(() => {
-            console.log(this.service.model);
-            this.isSelected = this.service.model?.selectedField === null;
-        });
-        this.isSelected = this.service.model?.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() {
-        if (this.simpleFilterFormChildren?.first) {
-            this.simpleFilterFormChildren.first.onBlurSubject
-                ?.pipe(takeUntil(this._destroy$))
-                .subscribe(() => {
-                this.saveFilter();
-            });
-            this.simpleFilterFormChildren.first.sophisticatedValueChange
-                ?.pipe(takeUntil(this._destroy$))
-                .subscribe((change) => {
-                if (change.kind === 'selection') {
-                    this.saveFilter();
-                }
-            });
-        }
-        else {
-            this.simpleFilterFormChildren?.changes.subscribe(() => {
-                this.simpleFilterFormChildren.first.onBlurSubject?.pipe(takeUntil(this._destroy$)).subscribe(() => {
-                    this.saveFilter();
-                });
-                this.simpleFilterFormChildren.first.sophisticatedValueChange?.pipe(takeUntil(this._destroy$)).subscribe((change) => {
-                    if (change.kind === 'selection') {
-                        this.saveFilter();
-                    }
-                });
-            });
-        }
-    }
-    ngOnInit() {
-        this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => this.setUp());
-        this.service.load();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    setupSimpleFilter() {
-        let widgets = [];
-        let key;
-        let model = {};
-        this.service.model?.model?.workplaceList?.filters.forEach((filterExpressionField, index) => {
-            model[index] = filterExpressionField;
-            if (filterExpressionField.widgetType === 'SELECT_MULTIPLE') {
-                key = index + '.expressionData.operand2.selectedValues';
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
-                return;
-            }
-            if (filterExpressionField.expressionData?.currentOperation === 'BETWEEN') {
-                key = index + '.expressionData.operand2.valueAsString';
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
-                key = index + '.expressionData.operand3.valueAsString';
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
-                return;
-            }
-            if (filterExpressionField.expressionData?.operand2) {
-                if (key !== index + '.expressionData.operand2.selectedValues') {
-                    key = index + '.expressionData.operand2.valueAsString';
-                }
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label2, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
-                return;
-            }
-            if (filterExpressionField?.expressionData?.operand3) {
-                if (key !== index + '.selectedValues') {
-                    key = index + '.expressionData.operand3.valueAsString';
-                }
-                widgets.push(this.constructFormWidget(key, filterExpressionField.label3, filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TextField, filterExpressionField.possibleValues));
-                return;
-            }
-        });
-        this.simpleFilterForm = {
-            direction: SmartFormWidgetDirection.ROW,
-            componentModel: { data: model },
-            useOnValueChangeEvent: true,
-            useOnBlurEvent: true,
-            widgets,
-        };
-    }
-    extractFilterFieldFromFormModel() {
-        let simpleFilter = this.simpleFilterFormChildren?.first?.submitForm(false).componentModel.data;
-        let result = [];
-        Object.keys(simpleFilter).forEach((key) => {
-            result.push(simpleFilter[key]);
-        });
-        this.service.model.model.workplaceList.filters = result;
-    }
-    setUp() {
-        if (this.service.model?.type === this.type.Simple) {
-            this.setupSimpleFilter();
-        }
-        else {
-            this.constructUiActionModels();
-            if (this.service.model.selectedFieldEditor) {
-                this.constructForm();
-            }
-            else {
-                this.smartForm = undefined;
-            }
-        }
-    }
-    constructUiActionModels() {
-        if (this.service.model?.possibleActions) {
-            this.uiActionModels = this.service.model.possibleActions.map((action) => {
-                return {
-                    serviceToUse: this.service,
-                    uiAction: action,
-                };
-            });
-        }
-        if (this.service.model?.selectedFieldEditor?.possibleActions) {
-            this.expressionUiActionModels = this.service.model?.selectedFieldEditor.possibleActions.map((uiAction) => {
-                let copiedUiAction = {};
-                Object.keys(uiAction).map((key) => {
-                    copiedUiAction[key] = uiAction[key];
-                });
-                copiedUiAction.params = {
-                    field: this.service.model?.selectedField,
-                };
-                return {
-                    serviceToUse: this.service,
-                    uiAction: copiedUiAction,
-                };
-            });
-        }
-    }
-    constructForm() {
-        if (this.smartForm) {
-            return;
-        }
-        let generatedWidgets = this.layoutService.render({
-            layoutDefinitions: this.service.model?.selectedFieldEditor?.layoutDef?.widgets,
-        });
-        this.smartForm = {
-            direction: SmartFormWidgetDirection.ROW,
-            useOnBlurEvent: true,
-            useOnValueChangeEvent: true,
-            componentModel: { data: this.service.model?.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() {
-        this.formChildren?.first?.submitForm(false);
-        this.service.peformWidgetAction({
-            code: 'UPDATE_FILTER_EXPRESSION',
-            params: {
-                model: this.service.model?.selectedField,
-            },
-        });
-    }
-    remove() {
-        this.service.peformWidgetAction({
-            code: 'REMOVE_FILTER_EXPRESSION',
-            params: {
-                model: this.service.model?.selectedField,
-            },
-        });
-    }
-    getFilteredUiActionModels(filterPredicate) {
-        // return this.service.model!.possibleActions!.filter(filterPredicate).map((uiAction: UiAction) => {
-        //   return {
-        //     serviceToUse: this.service,
-        //     uiAction,
-        //   };
-        // });
-        return [];
-    }
-    async saveFilter() {
-        this.extractFilterFieldFromFormModel();
-        this.service.performUiActionRequest({
-            code: FilterExpressionBuilderApiActions.SAVE_EXPRESSION_FIELD_LIST,
-            params: {
-                model: this.service.model,
-            },
-        });
-    }
-    constructFormWidget(key, label, widgetType, possibleValues) {
-        let type = widgetType;
-        if (type === FilterExpressionFieldWidgetType.Date) {
-            type = SmartFormWidgetType.DATE_PICKER;
-        }
-        else if (type === FilterExpressionFieldWidgetType.DateTime) {
-            type = SmartFormWidgetType.DATE_TIME_PICKER;
-        }
-        let widget = {
-            key,
-            label,
-            type,
-            value: '',
-            showLabel: true,
-            valueList: possibleValues.map((value) => {
-                return {
-                    key: value.objectUri ? value.objectUri : value.code,
-                    label: value.displayValue,
-                    type: SmartFormWidgetType.ITEM,
-                    value: value.objectUri ? value.objectUri : value.code,
-                };
-            }),
-        };
-        return widget;
-    }
-}
-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"] }] });
-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"] }]
-        }], ctorParameters: function () { return [{ type: SmartformLayoutDefinitionService }]; }, propDecorators: { service: [{
-                type: Input
-            }], formChildren: [{
-                type: ViewChildren,
-                args: ['form']
-            }], simpleFilterFormChildren: [{
-                type: ViewChildren,
-                args: ['simpleFilterFromChild']
-            }] } });
-
-class SmartFilterEditorModule {
+class SmartFilterEditorModule {
 }
 SmartFilterEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SmartFilterEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SmartFilterEditorModule, declarations: [SmartFilterParamsComponent,
@@ -14077,6 +13669,351 @@ class SmartComponentLayoutUtility {
  * 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);
+        }
+        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();
+    }
+    async load() {
+        this.model = await this.service.load(this.config.uuid, this.config.identifier).toPromise();
+        this.modelChanged.next();
+    }
+    async peformWidgetAction(request) {
+        this.model = await this.service
+            .performWidgetAction(this.config.uuid, this.config.identifier, request)
+            .toPromise();
+        this.modelChanged.next();
+    }
+    getModel() {
+        return this.model;
+    }
+    async performUiActionRequest(uiActionRequest, widgetId, nodeId) {
+        await this.peformWidgetAction(uiActionRequest);
+    }
+    async handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
+        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) {
         this.inject = inject;