@smartbit4all/ng-client 4.0.27 → 4.0.29

package/fesm2022/smartbit4all-ng-client.mjs

@@ -10472,6 +10472,442 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: GridService }] });
 
+class SmartFilterService {
+    constructor() {
+        this._destroy$ = new Subject();
+        this.shouldSubmit = new Subject();
+        this.reSubscribeToSubmit = new Subject();
+        this.change = new Subject();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    async submit() {
+        this.shouldSubmit.next();
+        await this.shouldSubmit.pipe(takeUntil(this._destroy$)).toPromise();
+        this.shouldSubmit = new Subject();
+        this.reSubscribeToSubmit.next();
+        return this.filter;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * 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.
+ */
+var FilterExpressionBoolOperator$1;
+(function (FilterExpressionBoolOperator) {
+    FilterExpressionBoolOperator["AND"] = "AND";
+    FilterExpressionBoolOperator["OR"] = "OR";
+})(FilterExpressionBoolOperator$1 || (FilterExpressionBoolOperator$1 = {}));
+
+/**
+ * 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.
+ */
+var FilterExpressionDataType;
+(function (FilterExpressionDataType) {
+    FilterExpressionDataType["STRING"] = "STRING";
+    FilterExpressionDataType["NUMBER"] = "NUMBER";
+    FilterExpressionDataType["DATE"] = "DATE";
+    FilterExpressionDataType["DATE_TIME"] = "DATE_TIME";
+    FilterExpressionDataType["BOOLEAN"] = "BOOLEAN";
+})(FilterExpressionDataType || (FilterExpressionDataType = {}));
+
+/**
+ * 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.
+ */
+var FilterExpressionFieldWidgetType;
+(function (FilterExpressionFieldWidgetType) {
+    FilterExpressionFieldWidgetType["TEXT_FIELD"] = "TEXT_FIELD";
+    FilterExpressionFieldWidgetType["TEXT_FIELD_CHIPS"] = "TEXT_FIELD_CHIPS";
+    FilterExpressionFieldWidgetType["TEXT_FIELD_NUMBER"] = "TEXT_FIELD_NUMBER";
+    FilterExpressionFieldWidgetType["TEXT_BOX"] = "TEXT_BOX";
+    FilterExpressionFieldWidgetType["SELECT"] = "SELECT";
+    FilterExpressionFieldWidgetType["SELECT_MULTIPLE"] = "SELECT_MULTIPLE";
+    FilterExpressionFieldWidgetType["DATE"] = "DATE";
+    FilterExpressionFieldWidgetType["TIME"] = "TIME";
+    FilterExpressionFieldWidgetType["DATE_TIME"] = "DATE_TIME";
+    FilterExpressionFieldWidgetType["CHECK_BOX"] = "CHECK_BOX";
+    FilterExpressionFieldWidgetType["RADIO_BUTTON"] = "RADIO_BUTTON";
+    FilterExpressionFieldWidgetType["RANGE"] = "RANGE";
+})(FilterExpressionFieldWidgetType || (FilterExpressionFieldWidgetType = {}));
+
+/**
+ * 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.
+ */
+var FilterExpressionOperation;
+(function (FilterExpressionOperation) {
+    FilterExpressionOperation["EXPRESSION"] = "EXPRESSION";
+    FilterExpressionOperation["EQUAL"] = "EQUAL";
+    FilterExpressionOperation["NOT_EQUAL"] = "NOT_EQUAL";
+    FilterExpressionOperation["LESS"] = "LESS";
+    FilterExpressionOperation["LESS_OR_EQUAL"] = "LESS_OR_EQUAL";
+    FilterExpressionOperation["GREATER"] = "GREATER";
+    FilterExpressionOperation["GREATER_OR_EQUAL"] = "GREATER_OR_EQUAL";
+    FilterExpressionOperation["LIKE"] = "LIKE";
+    FilterExpressionOperation["NOT_LIKE"] = "NOT_LIKE";
+    FilterExpressionOperation["BETWEEN"] = "BETWEEN";
+    FilterExpressionOperation["NOT_BETWEEN"] = "NOT_BETWEEN";
+    FilterExpressionOperation["IS_EMPTY"] = "IS_EMPTY";
+    FilterExpressionOperation["IS_NOT_EMPTY"] = "IS_NOT_EMPTY";
+    FilterExpressionOperation["EXISTS"] = "EXISTS";
+    FilterExpressionOperation["NOT_EXISTS"] = "NOT_EXISTS";
+    FilterExpressionOperation["IN"] = "IN";
+    FilterExpressionOperation["NOT_IN"] = "NOT_IN";
+})(FilterExpressionOperation || (FilterExpressionOperation = {}));
+
+/**
+ * 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.
+ */
+var FilterExpressionOrderByOrderEnum;
+(function (FilterExpressionOrderByOrderEnum) {
+    FilterExpressionOrderByOrderEnum["ASC"] = "ASC";
+    FilterExpressionOrderByOrderEnum["DESC"] = "DESC";
+})(FilterExpressionOrderByOrderEnum || (FilterExpressionOrderByOrderEnum = {}));
+;
+
+/**
+ * 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.
+ */
+
+var FilterExpressionBuilderGroupBuilderGroupKindEnum;
+(function (FilterExpressionBuilderGroupBuilderGroupKindEnum) {
+    FilterExpressionBuilderGroupBuilderGroupKindEnum["DIPLAY"] = "DIPLAY";
+    FilterExpressionBuilderGroupBuilderGroupKindEnum["BRACKET"] = "BRACKET";
+    FilterExpressionBuilderGroupBuilderGroupKindEnum["EXIST"] = "EXIST";
+})(FilterExpressionBuilderGroupBuilderGroupKindEnum || (FilterExpressionBuilderGroupBuilderGroupKindEnum = {}));
+;
+
+class SmartFilterSimpleFieldComponent {
+    constructor(service, cfService) {
+        this.service = service;
+        this.cfService = cfService;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.operation = this.filterExpressionField.expressionData?.currentOperation;
+        this.currentOperation = this.getOptionLabel(this.operation);
+    }
+    ngAfterViewInit() {
+        this.constructForm();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    constructFormWidget(key, label, widgetType, possibleValues, placeholder) {
+        let type = widgetType;
+        if (type === FilterExpressionFieldWidgetType.DATE) {
+            type = SmartFormWidgetType.DATE_PICKER;
+        }
+        else if (type === FilterExpressionFieldWidgetType.DATE_TIME) {
+            type = SmartFormWidgetType.DATE_TIME_PICKER;
+        }
+        let widget = {
+            key,
+            label,
+            type,
+            value: '',
+            placeholder: placeholder,
+            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;
+    }
+    constructForm() {
+        this.vcRefForm?.clear();
+        let widgets = [];
+        let key;
+        if (this.filterExpressionField.widgetType === 'SELECT_MULTIPLE') {
+            key = 'expressionData.operand2.selectedValues';
+        }
+        if (this.filterExpressionField.expressionData?.operand2) {
+            if (key !== 'expressionData.operand2.selectedValues') {
+                key = 'expressionData.operand2.valueAsString';
+            }
+            widgets.push(this.constructFormWidget(key, this.filterExpressionField.label2, this.filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, this.filterExpressionField.possibleValues, this.filterExpressionField.placeholder2));
+        }
+        if (this.filterExpressionField.expressionData?.operand3) {
+            if (key !== 'selectedValues') {
+                key = 'expressionData.operand3.valueAsString';
+            }
+            widgets.push(this.constructFormWidget(key, this.filterExpressionField.label3, this.filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, this.filterExpressionField.possibleValues, this.filterExpressionField.placeholder3));
+        }
+        this.operation = this.filterExpressionField.expressionData?.currentOperation;
+        this.currentOperation = this.getOptionLabel(this.operation);
+        this.smartForm = {
+            direction: SmartFormWidgetDirection.ROW,
+            componentModel: { data: this.filterExpressionField },
+            useOnValueChangeEvent: true,
+            useOnBlurEvent: true,
+            submitOnEnter: this.service.filter?.submitOnEnter,
+            widgets,
+            translateService: this.service.filter?.translateService,
+        };
+        // Show form on page
+        this.componentRefForm = this.cfService.createComponent(this.vcRefForm, SmartformComponent, new Map([['smartForm', this.smartForm]]));
+        this.componentRefForm.instance.onValueChangeSubject
+            ?.pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.submit();
+            this.service.change.next();
+        });
+        this.componentRefForm.instance.onBlurSubject?.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.submit();
+            this.service.change.next();
+        });
+    }
+    submit() {
+        let form = this.componentRefForm.instance.submitForm();
+        this.filterExpressionField = form.componentModel?.data;
+        this.simpleFieldChildren.forEach((smartFilterFieldComponent, index) => {
+            let filterExpressionField = smartFilterFieldComponent.submit();
+            this.filterExpressionField.subFieldList.filters[index] = filterExpressionField;
+        });
+        return this.filterExpressionField;
+    }
+    optionSelected(option) {
+        let oldOption = this.componentRefForm.instance.smartForm.componentModel.data.expressionData
+            .currentOperation;
+        this.componentRefForm.instance.smartForm.componentModel.data.expressionData.currentOperation =
+            option;
+        this.operation = option;
+        this.currentOperation = this.getOptionLabel(this.operation);
+        if (oldOption !== FilterExpressionOperation.BETWEEN &&
+            option === FilterExpressionOperation.BETWEEN) {
+            this.submit();
+            let label = this.filterExpressionField.label2;
+            this.filterExpressionField.label2 = `${label} - tól`;
+            this.filterExpressionField.label3 = `${label} - ig`;
+            this.filterExpressionField.expressionData.operand3 = {
+                isDataName: this.filterExpressionField.expressionData.operand2?.isDataName,
+                type: this.filterExpressionField.expressionData.operand3?.type,
+                valueAsString: this.filterExpressionField.expressionData.operand3?.valueAsString,
+                selectedValues: this.filterExpressionField.expressionData.operand3?.selectedValues,
+            };
+            this.constructForm();
+        }
+        else if (oldOption === FilterExpressionOperation.BETWEEN &&
+            option !== FilterExpressionOperation.BETWEEN) {
+            let label = this.filterExpressionField.label2.replace(' - tól', '');
+            this.filterExpressionField.label2 = `${label}`;
+            this.filterExpressionField.label3 = undefined;
+            this.filterExpressionField.expressionData.operand3 = undefined;
+            this.constructForm();
+        }
+    }
+    getOptionLabel(option) {
+        if (!option) {
+            return '';
+        }
+        else if (this.operationTranslator) {
+            return this.operationTranslator(option);
+        }
+        return option;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterSimpleFieldComponent, deps: [{ token: SmartFilterService }, { token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartFilterSimpleFieldComponent, selector: "smart-filter-simple-field", inputs: { operationTranslator: "operationTranslator", filterExpressionField: "filterExpressionField", showPossibleActions: "showPossibleActions" }, viewQueries: [{ propertyName: "vcRefForm", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div class=\"smart-filter-simple-field-container\">\r\n  <div class=\"smart-filter-simple-field-form-widget\">\r\n    <div\r\n      class=\"smart-filter-simple-field-form-widget-row\"\r\n      *ngIf=\"showPossibleActions\"\r\n    >\r\n      <p>({{ currentOperation }})</p>\r\n      <button\r\n        mat-icon-button\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-label=\"Example icon-button with a menu\"\r\n      >\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button\r\n          mat-menu-item\r\n          *ngFor=\"let option of filterExpressionField.possibleOperations\"\r\n          (click)=\"optionSelected(option)\"\r\n        >\r\n          <span>\r\n            {{ getOptionLabel(option) }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <ng-template #form></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-unelevated-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-outlined-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterSimpleFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-filter-simple-field', template: "<div class=\"smart-filter-simple-field-container\">\r\n  <div class=\"smart-filter-simple-field-form-widget\">\r\n    <div\r\n      class=\"smart-filter-simple-field-form-widget-row\"\r\n      *ngIf=\"showPossibleActions\"\r\n    >\r\n      <p>({{ currentOperation }})</p>\r\n      <button\r\n        mat-icon-button\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-label=\"Example icon-button with a menu\"\r\n      >\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button\r\n          mat-menu-item\r\n          *ngFor=\"let option of filterExpressionField.possibleOperations\"\r\n          (click)=\"optionSelected(option)\"\r\n        >\r\n          <span>\r\n            {{ getOptionLabel(option) }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <ng-template #form></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-unelevated-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-outlined-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"] }]
+        }], ctorParameters: () => [{ type: SmartFilterService }, { type: ComponentFactoryService }], propDecorators: { simpleFieldChildren: [{
+                type: ViewChildren,
+                args: ['simpleField']
+            }], operationTranslator: [{
+                type: Input
+            }], filterExpressionField: [{
+                type: Input
+            }], showPossibleActions: [{
+                type: Input
+            }], vcRefForm: [{
+                type: ViewChild,
+                args: ['form', { read: ViewContainerRef }]
+            }] } });
+
+class SmartFilterSimpleComponent {
+    constructor(service) {
+        this.service = service;
+        this._destroy$ = new Subject();
+        this.service.reSubscribeToSubmit.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.subscribeToSubmit();
+        });
+        this.subscribeToSubmit();
+    }
+    ngOnInit() {
+        this.smartFilter = this.service.filter;
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    subscribeToSubmit() {
+        this.service.shouldSubmit.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.submit();
+        });
+    }
+    submit() {
+        this.simpleFieldChildren.forEach((smartFilterFieldComponent, index) => {
+            this.smartFilter.data[index] = smartFilterFieldComponent.submit();
+        });
+        this.service.filter = this.smartFilter;
+        this.service.shouldSubmit.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterSimpleComponent, deps: [{ token: SmartFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartFilterSimpleComponent, selector: "smart-filter-simple", viewQueries: [{ propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"smartFilter\" class=\"smart-simple-fields-container\">\r\n    <div *ngFor=\"let filterExpressionField of smartFilter.data; let i = index\">\r\n        <smart-filter-simple-field\r\n            #simpleField\r\n            [filterExpressionField]=\"filterExpressionField\"\r\n            [operationTranslator]=\"smartFilter.operationTranslator\"\r\n            [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n        ></smart-filter-simple-field>\r\n        <div *ngFor=\"let subfilterExpressionField of filterExpressionField.subFieldList?.filters\">\r\n            <smart-filter-simple-field\r\n                #simpleField\r\n                [filterExpressionField]=\"filterExpressionField\"\r\n                [operationTranslator]=\"smartFilter.operationTranslator\"\r\n                [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n            ></smart-filter-simple-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartFilterSimpleFieldComponent, selector: "smart-filter-simple-field", inputs: ["operationTranslator", "filterExpressionField", "showPossibleActions"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterSimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "smart-filter-simple", template: "<div *ngIf=\"smartFilter\" class=\"smart-simple-fields-container\">\r\n    <div *ngFor=\"let filterExpressionField of smartFilter.data; let i = index\">\r\n        <smart-filter-simple-field\r\n            #simpleField\r\n            [filterExpressionField]=\"filterExpressionField\"\r\n            [operationTranslator]=\"smartFilter.operationTranslator\"\r\n            [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n        ></smart-filter-simple-field>\r\n        <div *ngFor=\"let subfilterExpressionField of filterExpressionField.subFieldList?.filters\">\r\n            <smart-filter-simple-field\r\n                #simpleField\r\n                [filterExpressionField]=\"filterExpressionField\"\r\n                [operationTranslator]=\"smartFilter.operationTranslator\"\r\n                [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n            ></smart-filter-simple-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"] }]
+        }], ctorParameters: () => [{ type: SmartFilterService }], propDecorators: { simpleFieldChildren: [{
+                type: ViewChildren,
+                args: ["simpleField"]
+            }] } });
+
+class SmartFilterComponent {
+    constructor(service) {
+        this.service = service;
+    }
+    ngOnInit() {
+        if (this.filter) {
+            this.setUp();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['filter'].currentValue) {
+            this.setUp();
+        }
+    }
+    setUp() {
+        this.service.filter = this.filter;
+    }
+    async submit() {
+        return await this.service.submit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterComponent, deps: [{ token: SmartFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartFilterComponent, selector: "smart-filter", inputs: { filter: "filter" }, providers: [SmartFilterService], usesOnChanges: true, ngImport: i0, template: "<smart-filter-simple *ngIf=\"filter\" #simpleFilter></smart-filter-simple>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartFilterSimpleComponent, selector: "smart-filter-simple" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-filter', providers: [SmartFilterService], template: "<smart-filter-simple *ngIf=\"filter\" #simpleFilter></smart-filter-simple>\r\n" }]
+        }], ctorParameters: () => [{ type: SmartFilterService }], propDecorators: { filter: [{
+                type: Input
+            }] } });
+
+class SmartFilterExpressionFieldComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterExpressionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartFilterExpressionFieldComponent, selector: "lib-smart-filter-expression-field", ngImport: i0, template: "", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterExpressionFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-smart-filter-expression-field', template: "" }]
+        }], ctorParameters: () => [] });
+
+class SmartFilterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterModule, declarations: [SmartFilterComponent,
+            SmartFilterExpressionFieldComponent,
+            SmartFilterSimpleComponent,
+            SmartFilterSimpleFieldComponent], imports: [BrowserModule, SmartViewContextModule, MatMenuModule, MatIconModule, MatButtonModule], exports: [SmartFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterModule, imports: [BrowserModule, SmartViewContextModule, MatMenuModule, MatIconModule, MatButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SmartFilterComponent,
+                        SmartFilterExpressionFieldComponent,
+                        SmartFilterSimpleComponent,
+                        SmartFilterSimpleFieldComponent,
+                    ],
+                    imports: [BrowserModule, SmartViewContextModule, MatMenuModule, MatIconModule, MatButtonModule],
+                    exports: [SmartFilterComponent],
+                }]
+        }] });
+
+var SmartFilterPosition;
+(function (SmartFilterPosition) {
+    SmartFilterPosition[SmartFilterPosition["TOP"] = 0] = "TOP";
+    SmartFilterPosition[SmartFilterPosition["BOTTOM"] = 1] = "BOTTOM";
+    SmartFilterPosition[SmartFilterPosition["LEFT"] = 2] = "LEFT";
+    SmartFilterPosition[SmartFilterPosition["RIGHT"] = 3] = "RIGHT";
+})(SmartFilterPosition || (SmartFilterPosition = {}));
+var SmartFilterType;
+(function (SmartFilterType) {
+    SmartFilterType[SmartFilterType["SIMPLE"] = 0] = "SIMPLE";
+    SmartFilterType[SmartFilterType["ADVANCED"] = 1] = "ADVANCED";
+})(SmartFilterType || (SmartFilterType = {}));
+
+/*
+ * Public API Surface of smart-filter
+ */
+
 var ExpandableSectionButtonType;
 (function (ExpandableSectionButtonType) {
     ExpandableSectionButtonType[ExpandableSectionButtonType["BUTTON"] = 0] = "BUTTON";
@@ -10732,7 +11168,7 @@ class SmartGridComponent {
             this.smartGrid?.gridModel.view?.orderedColumnNames.map((orderedCol) => {
                 this.smartGrid?.gridModel.view?.descriptor?.columns.map((colum) => {
                     if (orderedCol === colum.propertyName) {
-                        this.columns.push(colum.label);
+                        this.columns.push(colum);
                     }
                 });
             });
@@ -11315,12 +11751,56 @@ class SmartGridComponent {
         });
         this.menu.toggle(event);
     }
+    gridSort(event) {
+        let orderByList = [];
+        event.multiSortMeta?.map((meta, index) => {
+            if (this.previousmultiSortMeta && this.previousmultiSortMeta.length > 0) {
+                this.previousmultiSortMeta.map((order) => {
+                    console.log(order);
+                    if (meta.field === order.field && order.order != meta.order) {
+                        switch (order.order) {
+                            case -1:
+                                event.multiSortMeta.splice(index, 1);
+                                break;
+                        }
+                    }
+                });
+            }
+            else {
+                this.previousmultiSortMeta = event.multiSortMeta;
+            }
+        });
+        event.multiSortMeta?.map((meta) => {
+            orderByList.push({
+                propertyName: meta.field,
+                order: meta.order === 1
+                    ? FilterExpressionOrderByOrderEnum.ASC
+                    : meta.order === -1
+                        ? FilterExpressionOrderByOrderEnum.DESC
+                        : undefined,
+            });
+        });
+        this.service.sort(this.smartGrid, {
+            orderByList: orderByList,
+            orderedColumnNames: this.smartGrid?.gridModel.view?.orderedColumnNames,
+        });
+    }
+    lazyLoad(event) {
+        this.previousmultiSortMeta = [];
+        this.smartGrid?.gridModel.view?.orderByList.map((order) => {
+            this.previousmultiSortMeta?.push({
+                field: order.propertyName,
+                order: order.order === FilterExpressionOrderByOrderEnum.ASC ? 1 : -1,
+            });
+        });
+        event.multiSortMeta = this.previousmultiSortMeta;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridComponent, deps: [{ token: SmartGridService }, { token: ComponentFactoryService }, { token: i1$1.MatDialog }, { token: UiActionDescriptorService }, { token: COMPONENT_LIBRARY }, { token: 'gridMenuIcon' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(compLib === componentLibrary.PRIMENG) {\r\n<div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n  <p-table #pTable [value]=\"smartGrid.gridModel.page.rows!\">\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        <th *ngFor=\"let col of columns\">\r\n          {{ col }}\r\n        </th>\r\n        <th></th>\r\n      </tr>\r\n      <!--  <tr>\r\n        <th *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          <p-columnFilter\r\n            type=\"text\"\r\n            [field]=\"'data.' + col\"\r\n            [placeholder]=\"'Search by ' + col\"\r\n            [ariaLabel]=\"'Filter ' + col\"\r\n          />\r\n        </th>\r\n      </tr> -->\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-row>\r\n      <tr>\r\n        <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          {{ row.data[col] }}\r\n        </td>\r\n        <td>\r\n          <p-button\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            *ngIf=\"row.actions && row.actions.length > 0\"\r\n            (onClick)=\"onOptionsClick($event, row)\"\r\n          >\r\n            <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n          </p-button>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <p-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    [first]=\"pageIndex!\"\r\n    [totalRecords]=\"length!\"\r\n    [rows]=\"pageSize\"\r\n    [rowsPerPageOptions]=\"pageSizeOptions\"\r\n    (onPageChange)=\"onPrimeChangePage($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n  />\r\n  <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\"> </p-menu>\r\n</div>\r\n}@else {\r\n<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    <button\r\n      (click)=\"editColumns()\"\r\n      mat-mini-fab\r\n      color=\"text-primary\"\r\n      *ngIf=\"smartGrid.showEditColumns\"\r\n    >\r\n      <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n        >view_columns</mat-icon\r\n      >\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }, { kind: "component", type: i14.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i17$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i18$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "onSelect"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(compLib === componentLibrary.PRIMENG) {\r\n<div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n  <p-table\r\n    #pTable\r\n    [value]=\"smartGrid.gridModel.page.rows!\"\r\n    (sortFunction)=\"gridSort($event)\"\r\n    [customSort]=\"true\"\r\n    [sortMode]=\"'multiple'\"\r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\"\r\n  >\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        <th [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\">\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        <th></th>\r\n      </tr>\r\n      <!--  <tr>\r\n        <th *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          <p-columnFilter\r\n            type=\"text\"\r\n            [field]=\"'data.' + col\"\r\n            [placeholder]=\"'Search by ' + col\"\r\n            [ariaLabel]=\"'Filter ' + col\"\r\n          />\r\n        </th>\r\n      </tr> -->\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-row>\r\n      <tr *ngIf=\"row && row.data\">\r\n        <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          {{ row.data[col] }}\r\n        </td>\r\n        <td>\r\n          <p-button\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            *ngIf=\"row.actions && row.actions.length > 0\"\r\n            (onClick)=\"onOptionsClick($event, row)\"\r\n          >\r\n            <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n          </p-button>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <p-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    [first]=\"pageIndex!\"\r\n    [totalRecords]=\"length!\"\r\n    [rows]=\"pageSize\"\r\n    [rowsPerPageOptions]=\"pageSizeOptions\"\r\n    (onPageChange)=\"onPrimeChangePage($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n  />\r\n  <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\"> </p-menu>\r\n</div>\r\n}@else {\r\n<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    <button\r\n      (click)=\"editColumns()\"\r\n      mat-mini-fab\r\n      color=\"text-primary\"\r\n      *ngIf=\"smartGrid.showEditColumns\"\r\n    >\r\n      <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n        >view_columns</mat-icon\r\n      >\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }, { kind: "component", type: i14.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i14.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i14.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i17$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i18$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "onSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-grid', providers: [SmartGridService], template: "@if(compLib === componentLibrary.PRIMENG) {\r\n<div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n  <p-table #pTable [value]=\"smartGrid.gridModel.page.rows!\">\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        <th *ngFor=\"let col of columns\">\r\n          {{ col }}\r\n        </th>\r\n        <th></th>\r\n      </tr>\r\n      <!--  <tr>\r\n        <th *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          <p-columnFilter\r\n            type=\"text\"\r\n            [field]=\"'data.' + col\"\r\n            [placeholder]=\"'Search by ' + col\"\r\n            [ariaLabel]=\"'Filter ' + col\"\r\n          />\r\n        </th>\r\n      </tr> -->\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-row>\r\n      <tr>\r\n        <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          {{ row.data[col] }}\r\n        </td>\r\n        <td>\r\n          <p-button\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            *ngIf=\"row.actions && row.actions.length > 0\"\r\n            (onClick)=\"onOptionsClick($event, row)\"\r\n          >\r\n            <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n          </p-button>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <p-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    [first]=\"pageIndex!\"\r\n    [totalRecords]=\"length!\"\r\n    [rows]=\"pageSize\"\r\n    [rowsPerPageOptions]=\"pageSizeOptions\"\r\n    (onPageChange)=\"onPrimeChangePage($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n  />\r\n  <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\"> </p-menu>\r\n</div>\r\n}@else {\r\n<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    <button\r\n      (click)=\"editColumns()\"\r\n      mat-mini-fab\r\n      color=\"text-primary\"\r\n      *ngIf=\"smartGrid.showEditColumns\"\r\n    >\r\n      <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n        >view_columns</mat-icon\r\n      >\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}\n"] }]
+            args: [{ selector: 'smart-grid', providers: [SmartGridService], template: "@if(compLib === componentLibrary.PRIMENG) {\r\n<div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n  <p-table\r\n    #pTable\r\n    [value]=\"smartGrid.gridModel.page.rows!\"\r\n    (sortFunction)=\"gridSort($event)\"\r\n    [customSort]=\"true\"\r\n    [sortMode]=\"'multiple'\"\r\n    [lazy]=\"true\"\r\n    (onLazyLoad)=\"lazyLoad($event)\"\r\n  >\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        <th [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\">\r\n          <p-sortIcon [field]=\"col.propertyName\" />\r\n          {{ col.label }}\r\n        </th>\r\n        <th></th>\r\n      </tr>\r\n      <!--  <tr>\r\n        <th *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          <p-columnFilter\r\n            type=\"text\"\r\n            [field]=\"'data.' + col\"\r\n            [placeholder]=\"'Search by ' + col\"\r\n            [ariaLabel]=\"'Filter ' + col\"\r\n          />\r\n        </th>\r\n      </tr> -->\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-row>\r\n      <tr *ngIf=\"row && row.data\">\r\n        <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n          {{ row.data[col] }}\r\n        </td>\r\n        <td>\r\n          <p-button\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            *ngIf=\"row.actions && row.actions.length > 0\"\r\n            (onClick)=\"onOptionsClick($event, row)\"\r\n          >\r\n            <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n          </p-button>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  <p-paginator\r\n    *ngIf=\"smartGrid.paginator\"\r\n    [first]=\"pageIndex!\"\r\n    [totalRecords]=\"length!\"\r\n    [rows]=\"pageSize\"\r\n    [rowsPerPageOptions]=\"pageSizeOptions\"\r\n    (onPageChange)=\"onPrimeChangePage($event)\"\r\n    [showCurrentPageReport]=\"true\"\r\n  />\r\n  <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\"> </p-menu>\r\n</div>\r\n}@else {\r\n<div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n  <div class=\"smart-grid-toolbar\">\r\n    <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    <button\r\n      (click)=\"editColumns()\"\r\n      mat-mini-fab\r\n      color=\"text-primary\"\r\n      *ngIf=\"smartGrid.showEditColumns\"\r\n    >\r\n      <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n        >view_columns</mat-icon\r\n      >\r\n    </button>\r\n  </div>\r\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n  <div class=\"smartGridContent\">\r\n    <div>\r\n      <div *ngIf=\"smartGrid.showResultCount\">\r\n        <div class=\"smartGrid-data-number\">\r\n          {{ smartGrid.gridModel.totalRowCount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"smart-grid-table-container\">\r\n      <ng-template #table></ng-template>\r\n    </div>\r\n\r\n    <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n      <smart-expandable-section\r\n        #gridExpandableSection\r\n        *ngFor=\"let expandableSection of expandableSections\"\r\n        [data]=\"expandableSection\"\r\n      ></smart-expandable-section>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n      class=\"tree-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : ''\r\n      }\"\r\n    >\r\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node\"\r\n          matTreeNodeToggle\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button mat-icon-button disabled class=\"tree-button\"></button>\r\n          <mat-checkbox\r\n            class=\"checklist-leaf-node\"\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n\r\n        <mat-tree-node\r\n          *matTreeNodeDef=\"let node; when: hasChild\"\r\n          matTreeNodePadding\r\n          matTreeNodePaddingIndent=\"24\"\r\n        >\r\n          <button\r\n            mat-icon-button\r\n            matTreeNodeToggle\r\n            class=\"tree-button\"\r\n            [attr.aria-label]=\"'Toggle ' + node.item\"\r\n          >\r\n            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </mat-icon>\r\n          </button>\r\n          <mat-checkbox\r\n            [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n            [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n            (change)=\"treeNodeSelectionToggle(node)\"\r\n            >{{ getTreeItem(node) }}</mat-checkbox\r\n          >\r\n        </mat-tree-node>\r\n      </mat-tree>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-paginator\r\n    *ngIf=\"smartGrid.paginator && !treeControl\"\r\n    #paginator\r\n    [length]=\"length\"\r\n    [pageIndex]=\"pageIndex\"\r\n    [pageSize]=\"pageSize\"\r\n    [pageSizeOptions]=\"pageSizeOptions\"\r\n    (page)=\"onChangePage($event)\"\r\n  ></mat-paginator>\r\n</div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}\n"] }]
         }], ctorParameters: () => [{ type: SmartGridService }, { type: ComponentFactoryService }, { type: i1$1.MatDialog }, { type: UiActionDescriptorService }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -12196,214 +12676,10 @@ class TreeService {
     }
     getRootNodes(viewUuid, treeId, observe = 'body', reportProgress = false, options) {
         if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling getRootNodes.');
-        }
-        if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling getRootNodes.');
-        }
-        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 = `/tree/${this.configuration.encodeParam({
-            name: 'viewUuid',
-            value: viewUuid,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: 'uuid',
-        })}/${this.configuration.encodeParam({
-            name: 'treeId',
-            value: treeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}`;
-        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress,
-        });
-    }
-    getRootNodes2(viewUuid, treeId, observe = 'body', reportProgress = false, options) {
-        if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling getRootNodes2.');
-        }
-        if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling getRootNodes2.');
-        }
-        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 = `/tree2/${this.configuration.encodeParam({
-            name: 'viewUuid',
-            value: viewUuid,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: 'uuid',
-        })}/${this.configuration.encodeParam({
-            name: 'treeId',
-            value: treeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}`;
-        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress,
-        });
-    }
-    performAction(viewUuid, treeId, nodeId, body, observe = 'body', reportProgress = false, options) {
-        if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling performAction.');
-        }
-        if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling performAction.');
-        }
-        if (nodeId === null || nodeId === undefined) {
-            throw new Error('Required parameter nodeId was null or undefined when calling performAction.');
-        }
-        if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performAction.');
-        }
-        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 = `/tree/${this.configuration.encodeParam({
-            name: 'viewUuid',
-            value: viewUuid,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: 'uuid',
-        })}/${this.configuration.encodeParam({
-            name: 'treeId',
-            value: treeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}/${this.configuration.encodeParam({
-            name: 'nodeId',
-            value: nodeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}/action`;
-        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,
-        });
-    }
-    performAction2(viewUuid, treeId, nodeId, body, observe = 'body', reportProgress = false, options) {
-        if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling performAction2.');
+            throw new Error('Required parameter viewUuid was null or undefined when calling getRootNodes.');
         }
         if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling performAction2.');
-        }
-        if (nodeId === null || nodeId === undefined) {
-            throw new Error('Required parameter nodeId was null or undefined when calling performAction2.');
-        }
-        if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performAction2.');
+            throw new Error('Required parameter treeId was null or undefined when calling getRootNodes.');
         }
         let localVarHeaders = this.defaultHeaders;
         let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
@@ -12419,12 +12695,6 @@ class TreeService {
         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')) {
@@ -12437,7 +12707,7 @@ class TreeService {
                 responseType_ = 'blob';
             }
         }
-        let localVarPath = `/tree2/${this.configuration.encodeParam({
+        let localVarPath = `/tree/${this.configuration.encodeParam({
             name: 'viewUuid',
             value: viewUuid,
             in: 'path',
@@ -12453,18 +12723,9 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
-        })}/${this.configuration.encodeParam({
-            name: 'nodeId',
-            value: nodeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}/action`;
-        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+        })}`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
-            body: body,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
             headers: localVarHeaders,
@@ -12472,15 +12733,12 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    performMainAction(viewUuid, treeId, body, observe = 'body', reportProgress = false, options) {
+    getRootNodes2(viewUuid, treeId, observe = 'body', reportProgress = false, options) {
         if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling performMainAction.');
+            throw new Error('Required parameter viewUuid was null or undefined when calling getRootNodes2.');
         }
         if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling performMainAction.');
-        }
-        if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performMainAction.');
+            throw new Error('Required parameter treeId was null or undefined when calling getRootNodes2.');
         }
         let localVarHeaders = this.defaultHeaders;
         let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
@@ -12496,12 +12754,6 @@ class TreeService {
         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')) {
@@ -12514,7 +12766,7 @@ class TreeService {
                 responseType_ = 'blob';
             }
         }
-        let localVarPath = `/tree/${this.configuration.encodeParam({
+        let localVarPath = `/tree2/${this.configuration.encodeParam({
             name: 'viewUuid',
             value: viewUuid,
             in: 'path',
@@ -12530,10 +12782,9 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
-        })}/action`;
-        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+        })}`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
-            body: body,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
             headers: localVarHeaders,
@@ -12541,15 +12792,18 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    performMainAction2(viewUuid, treeId, body, observe = 'body', reportProgress = false, options) {
+    performAction(viewUuid, treeId, nodeId, body, observe = 'body', reportProgress = false, options) {
         if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling performMainAction2.');
+            throw new Error('Required parameter viewUuid was null or undefined when calling performAction.');
         }
         if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling performMainAction2.');
+            throw new Error('Required parameter treeId was null or undefined when calling performAction.');
+        }
+        if (nodeId === null || nodeId === undefined) {
+            throw new Error('Required parameter nodeId was null or undefined when calling performAction.');
         }
         if (body === null || body === undefined) {
-            throw new Error('Required parameter body was null or undefined when calling performMainAction2.');
+            throw new Error('Required parameter body was null or undefined when calling performAction.');
         }
         let localVarHeaders = this.defaultHeaders;
         let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
@@ -12583,7 +12837,7 @@ class TreeService {
                 responseType_ = 'blob';
             }
         }
-        let localVarPath = `/tree2/${this.configuration.encodeParam({
+        let localVarPath = `/tree/${this.configuration.encodeParam({
             name: 'viewUuid',
             value: viewUuid,
             in: 'path',
@@ -12599,6 +12853,14 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
+        })}/${this.configuration.encodeParam({
+            name: 'nodeId',
+            value: nodeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
         })}/action`;
         return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
@@ -12610,15 +12872,18 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    selectNode(viewUuid, treeId, nodeId, observe = 'body', reportProgress = false, options) {
+    performAction2(viewUuid, treeId, nodeId, body, observe = 'body', reportProgress = false, options) {
         if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling selectNode.');
+            throw new Error('Required parameter viewUuid was null or undefined when calling performAction2.');
         }
         if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling selectNode.');
+            throw new Error('Required parameter treeId was null or undefined when calling performAction2.');
         }
         if (nodeId === null || nodeId === undefined) {
-            throw new Error('Required parameter nodeId was null or undefined when calling selectNode.');
+            throw new Error('Required parameter nodeId was null or undefined when calling performAction2.');
+        }
+        if (body === null || body === undefined) {
+            throw new Error('Required parameter body was null or undefined when calling performAction2.');
         }
         let localVarHeaders = this.defaultHeaders;
         let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
@@ -12634,6 +12899,12 @@ class TreeService {
         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')) {
@@ -12646,7 +12917,7 @@ class TreeService {
                 responseType_ = 'blob';
             }
         }
-        let localVarPath = `/tree/${this.configuration.encodeParam({
+        let localVarPath = `/tree2/${this.configuration.encodeParam({
             name: 'viewUuid',
             value: viewUuid,
             in: 'path',
@@ -12670,9 +12941,10 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
-        })}/select`;
+        })}/action`;
         return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
+            body: body,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
             headers: localVarHeaders,
@@ -12680,15 +12952,15 @@ class TreeService {
             reportProgress: reportProgress,
         });
     }
-    selectNode2(viewUuid, treeId, nodeId, observe = 'body', reportProgress = false, options) {
+    performMainAction(viewUuid, treeId, body, observe = 'body', reportProgress = false, options) {
         if (viewUuid === null || viewUuid === undefined) {
-            throw new Error('Required parameter viewUuid was null or undefined when calling selectNode2.');
+            throw new Error('Required parameter viewUuid was null or undefined when calling performMainAction.');
         }
         if (treeId === null || treeId === undefined) {
-            throw new Error('Required parameter treeId was null or undefined when calling selectNode2.');
+            throw new Error('Required parameter treeId was null or undefined when calling performMainAction.');
         }
-        if (nodeId === null || nodeId === undefined) {
-            throw new Error('Required parameter nodeId was null or undefined when calling selectNode2.');
+        if (body === null || body === undefined) {
+            throw new Error('Required parameter body was null or undefined when calling performMainAction.');
         }
         let localVarHeaders = this.defaultHeaders;
         let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
@@ -12704,6 +12976,12 @@ class TreeService {
         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')) {
@@ -12716,7 +12994,7 @@ class TreeService {
                 responseType_ = 'blob';
             }
         }
-        let localVarPath = `/tree2/${this.configuration.encodeParam({
+        let localVarPath = `/tree/${this.configuration.encodeParam({
             name: 'viewUuid',
             value: viewUuid,
             in: 'path',
@@ -12732,1338 +13010,909 @@ class TreeService {
             explode: false,
             dataType: 'string',
             dataFormat: undefined,
-        })}/${this.configuration.encodeParam({
-            name: 'nodeId',
-            value: nodeId,
-            in: 'path',
-            style: 'simple',
-            explode: false,
-            dataType: 'string',
-            dataFormat: undefined,
-        })}/select`;
+        })}/action`;
         return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$2, optional: true }, { token: Configuration$2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [BASE_PATH$2]
-                }] }, { type: Configuration$2, decorators: [{
-                    type: Optional
-                }] }] });
-
-var SmartTreeNodeButtonType;
-(function (SmartTreeNodeButtonType) {
-    SmartTreeNodeButtonType["MENU"] = "MENU";
-    SmartTreeNodeButtonType["ICON"] = "ICON";
-    SmartTreeNodeButtonType["NORMAL"] = "NORMAL";
-})(SmartTreeNodeButtonType || (SmartTreeNodeButtonType = {}));
-
-class SmarttreeService {
-    get uiActionModels() {
-        return this._uiActionModels;
-    }
-    set uiActionModels(uiActionModels) {
-        this._uiActionModels = uiActionModels;
-        this.uiActionModelsChanged.next();
-    }
-    constructor() {
-        this.errorMessage = 'The tree is currently unavailable';
-        this.smartTreeModelChanged = new Subject();
-        this.uiActionModelsChanged = new Subject();
-    }
-    async initialize() {
-        await this.downloadTree().then((rootNodes) => {
-            this.treeFromBackend = rootNodes;
-            this.syncTree();
-        });
-    }
-    async downloadTree() {
-        throw new Error('downloadTree method not implemented.');
-    }
-    async downloadChildren(parentNode) {
-        throw new Error('downloadChildren method not implemented.');
-    }
-    onTreeNodeClick(treeNode) {
-        throw new Error('onTreeNodeClick method not implemented.');
-    }
-    onTreeNodeOpen(treeNode) {
-        throw new Error('onTreeNodeOpen method not implemented.');
-    }
-    syncTree() {
-        throw new Error('syncTree method not implemented.');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class SmarttreeGenericService extends SmarttreeService {
-    constructor(inject, pageName, treeId, treeMenuIcon) {
-        super();
-        this.pageName = pageName;
-        this.treeId = treeId;
-        this.treeMenuIcon = treeMenuIcon;
-        // UseUiAction properties
-        this.submit = new Subject();
-        this.reSubscribeToChange = new Subject();
-        this.uiActionDescriptors = new Map();
-        if (!this.treeMenuIcon) {
-            this.treeMenuIcon = inject.get('treeMenuIcon');
-        }
-        this.configureTree({
-            pageName: this.pageName,
-            treeid: this.treeId,
-        });
-        this.viewContext = inject.get(SmartViewContextService);
-        this.service = inject.get(TreeService);
-        this.uiActionService = inject.get(UiActionService);
-        this.uiActionDescriptorService = inject.get(UiActionDescriptorService);
-        this.initialize();
-    }
-    constructUiActionModels(uiActions) {
-        this.uiActionModels = uiActions.map((uiAction) => {
-            return {
-                serviceToUse: this,
-                uiAction,
-            };
-        });
-    }
-    configureTree(configuration) {
-        this.treeId = configuration.treeid;
-        this.pageName = configuration.pageName;
-    }
-    async initialize() {
-        if (this.viewContext.hasViewContextUuid()) {
-            await this.downloadTree().then((rootNodes) => {
-                if (!deepEqual(this.treeFromBackend, rootNodes)) {
-                    this.treeFromBackend = rootNodes;
-                    this.syncTree();
-                }
-            });
-        }
-    }
-    async downloadTree() {
-        let uuid = this.viewContext.getUuidOfPage(this.pageName);
-        const rootNodes = await this.viewContext.handlePerformActionResponse(await this.service.getRootNodes2(uuid, this.treeId).toPromise());
-        const uiActions = await this.viewContext.handlePerformActionResponse(await this.service.getMainActions2(uuid, this.treeId).toPromise());
-        if (uiActions) {
-            this.constructUiActionModels(uiActions);
-        }
-        if (!rootNodes) {
-            throw new Error('RootNodes are undefined!');
-        }
-        return rootNodes;
+            body: body,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress,
+        });
     }
-    async downloadChildren(parentNode) {
-        let uuid = this.viewContext.getUuidOfPage(this.pageName);
-        const children = await this.viewContext.handlePerformActionResponse(await this.service.getChildrenNodes2(uuid, this.treeId, parentNode.identifier).toPromise());
-        if (!children) {
-            throw new Error(`Node with identifier ${parentNode.identifier} does not have children.`);
+    performMainAction2(viewUuid, treeId, body, observe = 'body', reportProgress = false, options) {
+        if (viewUuid === null || viewUuid === undefined) {
+            throw new Error('Required parameter viewUuid was null or undefined when calling performMainAction2.');
         }
-        return children;
-    }
-    async onTreeNodeOpen(treeNode) {
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        if (treeNode?.expanded) {
-            let tempTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.collapseNode2(viewUuid, this.treeId, treeNode.identifier).toPromise());
-            treeNode = tempTreeNode;
+        if (treeId === null || treeId === undefined) {
+            throw new Error('Required parameter treeId was null or undefined when calling performMainAction2.');
         }
-        else if (!treeNode?.expanded) {
-            let tempTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.expandNode2(viewUuid, this.treeId, treeNode?.identifier).toPromise());
-            treeNode = tempTreeNode;
+        if (body === null || body === undefined) {
+            throw new Error('Required parameter body was null or undefined when calling performMainAction2.');
         }
-        let node = this.deepSearchTreeNode(treeNode?.identifier, this.treeFromBackend);
-        node.expanded = treeNode?.expanded;
-        node.childrenNodes = treeNode?.childrenNodes;
-        this.syncTree();
-    }
-    onTreeNodeClick(treeNode) {
-        this.selectFolder(treeNode.identifier, treeNode);
-    }
-    async selectFolder(folderUri, treeNode) {
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        let updatedTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.selectNode2(viewUuid, this.treeId, treeNode.identifier).toPromise());
-        if (this.selectedNode) {
-            this.selectedNode.selected = false;
+        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);
         }
-        this.selectedNode = updatedTreeNode;
-        let node = this.deepSearchTreeNode(updatedTreeNode?.identifier, this.treeFromBackend);
-        if (!node) {
-            throw Error('Tree node does not exist');
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        node.expanded = updatedTreeNode?.expanded;
-        node.childrenNodes = updatedTreeNode?.childrenNodes;
-        node.selected = updatedTreeNode?.selected;
-        treeNode = updatedTreeNode;
-        this.syncTree();
-        //this.viewContext.getAndSyncViewContext(this.viewContext.getViewContextUuid());
-    }
-    async updateTreeOnTheFly() {
-        await this.initialize();
-    }
-    async syncTree() {
-        if (this.treeFromBackend === null || this.treeFromBackend === undefined) {
-            //throw new Error('There is no treeFromBackend available!');
-            console.warn('There is no treeFromBackend available in syncTree!');
-            return;
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
         }
-        await this.cacheActionDesciptors(this.getAllNodes(this.treeFromBackend));
-        if (!this.smartTreeModel) {
-            this.smartTreeModel = {
-                rootNodes: [],
-            };
+        // 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 smartTreeNodes = this.createButtonsForTreeNodes(this.treeFromBackend);
-        this.smartTreeModel = undefined;
-        this.smartTreeModel = {
-            rootNodes: [],
-        };
-        this.smartTreeModelChanged.next(this.smartTreeModel);
-        this.smartTreeModel.rootNodes = smartTreeNodes;
-        this.findSelected(this.smartTreeModel.rootNodes);
-        this.smartTreeModelChanged.next(this.smartTreeModel);
-    }
-    deepSearchTreeNode(identifier, nodes) {
-        let treeNode;
-        for (let index = 0; index < nodes.length; index++) {
-            const node = nodes[index];
-            if (node.identifier === identifier) {
-                treeNode = node;
-                break;
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
             }
-            if (node.childrenNodes && node.childrenNodes.length) {
-                treeNode = this.deepSearchTreeNode(identifier, node.childrenNodes);
-                if (treeNode) {
-                    break;
-                }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
             }
         }
-        return treeNode;
+        let localVarPath = `/tree2/${this.configuration.encodeParam({
+            name: 'viewUuid',
+            value: viewUuid,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: 'uuid',
+        })}/${this.configuration.encodeParam({
+            name: 'treeId',
+            value: treeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/action`;
+        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,
+        });
     }
-    findSelected(nodes) {
-        return nodes.forEach((node) => {
-            if (node.selected) {
-                this.selectedNode = node;
-                return;
+    selectNode(viewUuid, treeId, nodeId, observe = 'body', reportProgress = false, options) {
+        if (viewUuid === null || viewUuid === undefined) {
+            throw new Error('Required parameter viewUuid was null or undefined when calling selectNode.');
+        }
+        if (treeId === null || treeId === undefined) {
+            throw new Error('Required parameter treeId was null or undefined when calling selectNode.');
+        }
+        if (nodeId === null || nodeId === undefined) {
+            throw new Error('Required parameter nodeId was null or undefined when calling selectNode.');
+        }
+        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 (node.childrenNodes && node.childrenNodes.length) {
-                return this.findSelected(node.childrenNodes);
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
             }
-        });
-    }
-    createButtonsForTreeNodes(nodes) {
-        let icon = this.treeMenuIcon ?? 'more_vert';
-        nodes.map((node) => {
-            node.button = node.actions?.length
-                ? {
-                    type: SmartTreeNodeButtonType.MENU,
-                    icon: icon,
-                    menuItemButtons: node.actions.map((action) => {
-                        return {
-                            type: SmartTreeNodeButtonType.NORMAL,
-                            label: this.getLabelByAction(action),
-                            callback: this.doAction.bind(this),
-                            args: [action, node.identifier],
-                        };
-                    }),
-                }
-                : undefined;
-            node.icon = 'Folders';
-            if (node.childrenNodes) {
-                node.childrenNodes = this.createButtonsForTreeNodes(node.childrenNodes);
+            else {
+                responseType_ = 'blob';
             }
-        });
-        return nodes;
-    }
-    async doAction(args) {
-        let uiAction = args[0];
-        let nodeUuid = args[1];
-        if (uiAction.params) {
-            uiAction.params['nodeUuid'] = nodeUuid;
         }
-        else {
-            uiAction.params = {
-                nodeUuid: nodeUuid,
-            };
-        }
-        let uiActionModel = {
-            serviceToUse: this,
-            uiAction,
-        };
-        this.uiActionService.uiActionModel = uiActionModel;
-        this.uiActionService.execute(uiAction);
-    }
-    getAllNodes(nodes) {
-        return nodes.flatMap((n) => [n, ...this.getAllNodes(n.childrenNodes)]);
-    }
-    async cacheActionDesciptors(nodes) {
-        let newUiActions = new Set();
-        nodes.forEach((node) => {
-            node.actions
-                ?.filter((uiAction) => !this.uiActionDescriptors.get(uiAction.code))
-                .forEach((action) => newUiActions.add(action));
+        let localVarPath = `/tree/${this.configuration.encodeParam({
+            name: 'viewUuid',
+            value: viewUuid,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: 'uuid',
+        })}/${this.configuration.encodeParam({
+            name: 'treeId',
+            value: treeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/${this.configuration.encodeParam({
+            name: 'nodeId',
+            value: nodeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/select`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress,
         });
-        for (let action of newUiActions) {
-            if (!this.uiActionDescriptors.get(action.code)) {
-                let descriptor = await this.uiActionDescriptorService.getActionDescriptor(action);
-                this.uiActionDescriptors.set(action.code, descriptor);
-            }
-        }
-    }
-    getLabelByAction(action) {
-        let desc = this.uiActionDescriptors.get(action.code);
-        return desc.title;
     }
-    // #region UseUiAction
-    getAdditionalParams(uiAction) {
-        if (uiAction.params && uiAction.params['nodeUuid']) {
-            let nodeUuid = uiAction.params['nodeUuid'];
-            let nodeName;
-            if (uiAction.code === 'RENAME') {
-                nodeName = this.deepSearchTreeNode(nodeUuid, this.treeFromBackend)?.caption;
-            }
-            return {
-                forTextArea: '',
-                forTextField: nodeName ? nodeName : '',
-            };
+    selectNode2(viewUuid, treeId, nodeId, observe = 'body', reportProgress = false, options) {
+        if (viewUuid === null || viewUuid === undefined) {
+            throw new Error('Required parameter viewUuid was null or undefined when calling selectNode2.');
         }
-        return {
-            forTextArea: '',
-            forTextField: '',
-        };
-    }
-    getModel() {
-        return {};
-    }
-    async performUiActionRequest(uiActionRequest) {
-        if (uiActionRequest.params['nodeUuid']) {
-            await this.performNodeUiActionRequest(uiActionRequest);
+        if (treeId === null || treeId === undefined) {
+            throw new Error('Required parameter treeId was null or undefined when calling selectNode2.');
         }
-        else {
-            await this.performMainUiActionRequest(uiActionRequest);
+        if (nodeId === null || nodeId === undefined) {
+            throw new Error('Required parameter nodeId was null or undefined when calling selectNode2.');
         }
-        //await this.viewContext.getAndSyncViewContext();
-        this.syncTree();
-    }
-    async performNodeUiActionRequest(uiActionRequest) {
-        let nodeId = uiActionRequest.params['nodeUuid'];
-        delete uiActionRequest.params['nodeUuid'];
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performAction2(viewUuid, this.treeId, nodeId, uiActionRequest).toPromise());
-    }
-    async performMainUiActionRequest(uiActionRequest) {
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
-        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performMainAction2(viewUuid, this.treeId, uiActionRequest).toPromise());
-    }
-    handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
-        throw new Error('Method not implemented.');
+        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 = `/tree2/${this.configuration.encodeParam({
+            name: 'viewUuid',
+            value: viewUuid,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: 'uuid',
+        })}/${this.configuration.encodeParam({
+            name: 'treeId',
+            value: treeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/${this.configuration.encodeParam({
+            name: 'nodeId',
+            value: nodeId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/select`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeGenericService, deps: [{ token: i0.Injector }, { token: 'pageName' }, { token: 'treeId' }, { token: 'treeMenuIcon' }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeGenericService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$2, optional: true }, { token: Configuration$2, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeGenericService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TreeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['pageName']
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['treeId']
-                }] }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
-                    args: ['treeMenuIcon']
+                    args: [BASE_PATH$2]
+                }] }, { type: Configuration$2, decorators: [{
+                    type: Optional
                 }] }] });
 
-class SmartTreeComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this._destroy$ = new Subject();
-        this.treeControl = new NestedTreeControl((node) => node.childrenNodes);
-        this.dataSource = new MatTreeNestedDataSource();
-        this.smartTreeNodeButtonType = SmartTreeNodeButtonType;
-        this.uiActionModels = [];
-        this.hasChild = (_, node) => node.hasChildren;
-    }
-    ngOnInit() {
-        if (!this.treeService) {
-            throw new Error('TreeService has not been given!');
-        }
-        this.errorMessage = this.treeService.errorMessage;
-        this.treeService.smartTreeModelChanged.subscribe((newSmartTree) => {
-            this.treeData = newSmartTree;
-            this.dataSource.data = this.treeData.rootNodes;
-            this.expandTreeNodes();
-        });
-        this.treeService.uiActionModelsChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            if (this.treeService.uiActionModels) {
-                this.uiActionModels = this.treeService.uiActionModels;
-            }
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    getIfExpanded(node) {
-        return this.treeControl.isExpanded(node);
-    }
-    expandTreeNodes() {
-        this.expandTreeNodesDeeply(this.dataSource.data);
-    }
-    expandTreeNodesDeeply(nodes) {
-        nodes.forEach((node) => {
-            if (node.expanded) {
-                this.treeControl.expand(node);
-                this.cdr.markForCheck();
-                if (node.childrenNodes && node.childrenNodes.length) {
-                    this.expandTreeNodesDeeply(node.childrenNodes);
-                }
-            }
-            else {
-                this.treeControl.collapse(node);
-            }
-        });
-    }
-    onNodeClick(event, node) {
-        event.stopPropagation();
-        if (this.tempActiveNode)
-            this.tempActiveNode.selected = false;
-        node.selected = true;
-        this.tempActiveNode = node;
-        this.treeService.onTreeNodeClick(node);
-    }
-    onOpenNode(event, node) {
-        event.stopPropagation();
-        this.treeService.onTreeNodeOpen(node);
-    }
-    getNodeStyle(node) {
-        if (this.treeStyle) {
-            var style = node.selected
-                ? {
-                    background: this.treeStyle.activeStyle?.backgroundColor,
-                    color: this.treeStyle.activeStyle?.color,
-                }
-                : {
-                    background: this.treeStyle.levelBackgroundColor[node.level],
-                    color: this.treeStyle.color,
-                };
-            return style;
-        }
-        return {};
-    }
-    getNodePadding(node) {
-        if (this.treeStyle) {
-            var style = node.selected
-                ? {
-                    'padding-left': 15 * node.level + 'px',
-                }
-                : {
-                    'padding-left': 15 * node.level + 'px',
-                };
-            return style;
-        }
-        return {};
+var SmartTreeNodeButtonType;
+(function (SmartTreeNodeButtonType) {
+    SmartTreeNodeButtonType["MENU"] = "MENU";
+    SmartTreeNodeButtonType["ICON"] = "ICON";
+    SmartTreeNodeButtonType["NORMAL"] = "NORMAL";
+})(SmartTreeNodeButtonType || (SmartTreeNodeButtonType = {}));
+
+class SmarttreeService {
+    get uiActionModels() {
+        return this._uiActionModels;
     }
-    customButtonClicked(event, button, close) {
-        event.stopPropagation();
-        if (button.type === SmartTreeNodeButtonType.MENU) {
-            return;
-        }
-        if (!button.callback) {
-            throw new Error(`Button with name ${button.label || button.icon} does not have a callback!`);
-        }
-        button.callback(button.args);
-        if (close) {
-            let openMenus = this.trigger.filter((matMenuTrigger) => matMenuTrigger.menuOpen);
-            openMenus.forEach((matMenuTrigger) => {
-                matMenuTrigger.closeMenu();
-            });
-        }
+    set uiActionModels(uiActionModels) {
+        this._uiActionModels = uiActionModels;
+        this.uiActionModelsChanged.next();
     }
-    getClassesForTreeNode(node) {
-        let classes = [];
-        if (node.expanded) {
-            classes.push(this.getCustomClass('expanded', node.level));
-        }
-        else {
-            classes.push(this.getCustomClass('collapsed', node.level));
-        }
-        if (node.selected) {
-            classes.push(this.getCustomClass('selected', node.level));
-        }
-        else {
-            classes.push(this.getCustomClass('unselected', node.level));
-        }
-        if (node.level !== 0) {
-            classes.push(this.getCustomClass('child', node.level));
-        }
-        return classes;
+    constructor() {
+        this.errorMessage = 'The tree is currently unavailable';
+        this.smartTreeModelChanged = new Subject();
+        this.uiActionModelsChanged = new Subject();
     }
-    getInnerClassesForTreeNode(node) {
-        let classes = [];
-        if (node.expanded) {
-            classes.push(this.getCustomClass('inner-expanded', node.level));
-        }
-        else {
-            classes.push(this.getCustomClass('inner-collapsed', node.level));
-        }
-        if (node.selected) {
-            classes.push(this.getCustomClass('inner-selected', node.level));
-        }
-        else {
-            classes.push(this.getCustomClass('inner-unselected', node.level));
-        }
-        return classes;
+    async initialize() {
+        await this.downloadTree().then((rootNodes) => {
+            this.treeFromBackend = rootNodes;
+            this.syncTree();
+        });
     }
-    getClassesForTreeNodeChildren(node) {
-        let classes = [];
-        classes.push(this.getCustomClass('group', node.level));
-        return classes;
+    async downloadTree() {
+        throw new Error('downloadTree method not implemented.');
     }
-    getCustomClass(cssClass, plusProperty) {
-        return `${cssClass}-${plusProperty}`;
+    async downloadChildren(parentNode) {
+        throw new Error('downloadChildren method not implemented.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartTreeComponent, selector: "smart-tree", inputs: { treeStyle: "treeStyle", treeService: "treeService" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror\"\r\n            matTreeNodeToggle\r\n            (click)=\"onOpenNode($event, node)\"\r\n          >\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartTreeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smart-tree', template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror\"\r\n            matTreeNodeToggle\r\n            (click)=\"onOpenNode($event, node)\"\r\n          >\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
-                type: ViewChildren,
-                args: [MatMenuTrigger]
-            }], tree: [{
-                type: ViewChild,
-                args: ['tree']
-            }], treeStyle: [{
-                type: Input
-            }], treeService: [{
-                type: Input
-            }] } });
-
-class SmarttreeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, declarations: [SmartTreeComponent], imports: [BrowserModule,
-            MatCommonModule,
-            MatButtonModule,
-            MatIconModule,
-            MatTreeModule,
-            MatMenuModule,
-            SmartIconModule,
-            SmartViewContextModule], exports: [SmartTreeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, providers: [
-            SmarttreeService,
-            SmarttreeGenericService,
-            { provide: 'treeMenuIcon', useValue: 'more_vert' },
-        ], imports: [BrowserModule,
-            MatCommonModule,
-            MatButtonModule,
-            MatIconModule,
-            MatTreeModule,
-            MatMenuModule,
-            SmartIconModule,
-            SmartViewContextModule] }); }
+    onTreeNodeClick(treeNode) {
+        throw new Error('onTreeNodeClick method not implemented.');
+    }
+    onTreeNodeOpen(treeNode) {
+        throw new Error('onTreeNodeOpen method not implemented.');
+    }
+    syncTree() {
+        throw new Error('syncTree method not implemented.');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeService, decorators: [{
+            type: Injectable,
             args: [{
-                    declarations: [SmartTreeComponent],
-                    imports: [
-                        BrowserModule,
-                        MatCommonModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTreeModule,
-                        MatMenuModule,
-                        SmartIconModule,
-                        SmartViewContextModule,
-                    ],
-                    exports: [SmartTreeComponent],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    providers: [
-                        SmarttreeService,
-                        SmarttreeGenericService,
-                        { provide: 'treeMenuIcon', useValue: 'more_vert' },
-                    ],
+                    providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-/**
- * Custom HttpParameterCodec
- * Workaround for https://github.com/angular/angular/issues/18261
- */
-let CustomHttpParameterCodec$1 = class CustomHttpParameterCodec {
-    encodeKey(k) {
-        return encodeURIComponent(k);
-    }
-    encodeValue(v) {
-        return encodeURIComponent(v);
+class SmarttreeGenericService extends SmarttreeService {
+    constructor(inject, pageName, treeId, treeMenuIcon) {
+        super();
+        this.pageName = pageName;
+        this.treeId = treeId;
+        this.treeMenuIcon = treeMenuIcon;
+        // UseUiAction properties
+        this.submit = new Subject();
+        this.reSubscribeToChange = new Subject();
+        this.uiActionDescriptors = new Map();
+        if (!this.treeMenuIcon) {
+            this.treeMenuIcon = inject.get('treeMenuIcon');
+        }
+        this.configureTree({
+            pageName: this.pageName,
+            treeid: this.treeId,
+        });
+        this.viewContext = inject.get(SmartViewContextService);
+        this.service = inject.get(TreeService);
+        this.uiActionService = inject.get(UiActionService);
+        this.uiActionDescriptorService = inject.get(UiActionDescriptorService);
+        this.initialize();
     }
-    decodeKey(k) {
-        return decodeURIComponent(k);
+    constructUiActionModels(uiActions) {
+        this.uiActionModels = uiActions.map((uiAction) => {
+            return {
+                serviceToUse: this,
+                uiAction,
+            };
+        });
     }
-    decodeValue(v) {
-        return decodeURIComponent(v);
+    configureTree(configuration) {
+        this.treeId = configuration.treeid;
+        this.pageName = configuration.pageName;
     }
-};
-
-const BASE_PATH$1 = new InjectionToken('basePath');
-const COLLECTION_FORMATS$1 = {
-    'csv': ',',
-    'tsv': '   ',
-    'ssv': ' ',
-    'pipes': '|'
-};
-
-let Configuration$1 = 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);
+    async initialize() {
+        if (this.viewContext.hasViewContextUuid()) {
+            await this.downloadTree().then((rootNodes) => {
+                if (!deepEqual(this.treeFromBackend, rootNodes)) {
+                    this.treeFromBackend = rootNodes;
+                    this.syncTree();
+                }
+            });
         }
-        if (configurationParameters.credentials) {
-            this.credentials = configurationParameters.credentials;
+    }
+    async downloadTree() {
+        let uuid = this.viewContext.getUuidOfPage(this.pageName);
+        const rootNodes = await this.viewContext.handlePerformActionResponse(await this.service.getRootNodes2(uuid, this.treeId).toPromise());
+        const uiActions = await this.viewContext.handlePerformActionResponse(await this.service.getMainActions2(uuid, this.treeId).toPromise());
+        if (uiActions) {
+            this.constructUiActionModels(uiActions);
         }
-        else {
-            this.credentials = {};
+        if (!rootNodes) {
+            throw new Error('RootNodes are undefined!');
         }
+        return rootNodes;
     }
-    /**
-     * 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];
+    async downloadChildren(parentNode) {
+        let uuid = this.viewContext.getUuidOfPage(this.pageName);
+        const children = await this.viewContext.handlePerformActionResponse(await this.service.getChildrenNodes2(uuid, this.treeId, parentNode.identifier).toPromise());
+        if (!children) {
+            throw new Error(`Node with identifier ${parentNode.identifier} does not have children.`);
         }
-        return type;
+        return children;
     }
-    /**
-     * 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;
+    async onTreeNodeOpen(treeNode) {
+        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        if (treeNode?.expanded) {
+            let tempTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.collapseNode2(viewUuid, this.treeId, treeNode.identifier).toPromise());
+            treeNode = tempTreeNode;
         }
-        const type = accepts.find((x) => this.isJsonMime(x));
-        if (type === undefined) {
-            return accepts[0];
+        else if (!treeNode?.expanded) {
+            let tempTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.expandNode2(viewUuid, this.treeId, treeNode?.identifier).toPromise());
+            treeNode = tempTreeNode;
         }
-        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;
+        let node = this.deepSearchTreeNode(treeNode?.identifier, this.treeFromBackend);
+        node.expanded = treeNode?.expanded;
+        node.childrenNodes = treeNode?.childrenNodes;
+        this.syncTree();
     }
-    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));
+    onTreeNodeClick(treeNode) {
+        this.selectFolder(treeNode.identifier, treeNode);
     }
-};
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * 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.
- */
-/* tslint:disable:no-unused-variable member-ordering */
-class DefaultService {
-    constructor(httpClient, basePath, configuration) {
-        this.httpClient = httpClient;
-        this.basePath = 'http://localhost';
-        this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration$1();
-        if (configuration) {
-            this.configuration = configuration;
+    async selectFolder(folderUri, treeNode) {
+        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        let updatedTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.selectNode2(viewUuid, this.treeId, treeNode.identifier).toPromise());
+        if (this.selectedNode) {
+            this.selectedNode.selected = false;
         }
-        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.selectedNode = updatedTreeNode;
+        let node = this.deepSearchTreeNode(updatedTreeNode?.identifier, this.treeFromBackend);
+        if (!node) {
+            throw Error('Tree node does not exist');
         }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec$1();
+        node.expanded = updatedTreeNode?.expanded;
+        node.childrenNodes = updatedTreeNode?.childrenNodes;
+        node.selected = updatedTreeNode?.selected;
+        treeNode = updatedTreeNode;
+        this.syncTree();
+        //this.viewContext.getAndSyncViewContext(this.viewContext.getViewContextUuid());
     }
-    // @ts-ignore
-    addToHttpParams(httpParams, value, key) {
-        if (typeof value === "object" && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+    async updateTreeOnTheFly() {
+        await this.initialize();
+    }
+    async syncTree() {
+        if (this.treeFromBackend === null || this.treeFromBackend === undefined) {
+            //throw new Error('There is no treeFromBackend available!');
+            console.warn('There is no treeFromBackend available in syncTree!');
+            return;
         }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        await this.cacheActionDesciptors(this.getAllNodes(this.treeFromBackend));
+        if (!this.smartTreeModel) {
+            this.smartTreeModel = {
+                rootNodes: [],
+            };
         }
-        return httpParams;
+        let smartTreeNodes = this.createButtonsForTreeNodes(this.treeFromBackend);
+        this.smartTreeModel = undefined;
+        this.smartTreeModel = {
+            rootNodes: [],
+        };
+        this.smartTreeModelChanged.next(this.smartTreeModel);
+        this.smartTreeModel.rootNodes = smartTreeNodes;
+        this.findSelected(this.smartTreeModel.rootNodes);
+        this.smartTreeModelChanged.next(this.smartTreeModel);
     }
-    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));
+    deepSearchTreeNode(identifier, nodes) {
+        let treeNode;
+        for (let index = 0; index < nodes.length; index++) {
+            const node = nodes[index];
+            if (node.identifier === identifier) {
+                treeNode = node;
+                break;
             }
-            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");
+            if (node.childrenNodes && node.childrenNodes.length) {
+                treeNode = this.deepSearchTreeNode(identifier, node.childrenNodes);
+                if (treeNode) {
+                    break;
                 }
             }
-            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;
+        return treeNode;
     }
-    nopePost(observe = 'body', reportProgress = false, options) {
-        let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = [];
-            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';
+    findSelected(nodes) {
+        return nodes.forEach((node) => {
+            if (node.selected) {
+                this.selectedNode = node;
+                return;
             }
-            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
+            else if (node.childrenNodes && node.childrenNodes.length) {
+                return this.findSelected(node.childrenNodes);
             }
-            else {
-                responseType_ = 'blob';
+        });
+    }
+    createButtonsForTreeNodes(nodes) {
+        let icon = this.treeMenuIcon ?? 'more_vert';
+        nodes.map((node) => {
+            node.button = node.actions?.length
+                ? {
+                    type: SmartTreeNodeButtonType.MENU,
+                    icon: icon,
+                    menuItemButtons: node.actions.map((action) => {
+                        return {
+                            type: SmartTreeNodeButtonType.NORMAL,
+                            label: this.getLabelByAction(action),
+                            callback: this.doAction.bind(this),
+                            args: [action, node.identifier],
+                        };
+                    }),
+                }
+                : undefined;
+            node.icon = 'Folders';
+            if (node.childrenNodes) {
+                node.childrenNodes = this.createButtonsForTreeNodes(node.childrenNodes);
             }
+        });
+        return nodes;
+    }
+    async doAction(args) {
+        let uiAction = args[0];
+        let nodeUuid = args[1];
+        if (uiAction.params) {
+            uiAction.params['nodeUuid'] = nodeUuid;
         }
-        let localVarPath = `/nope`;
-        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
-            context: localVarHttpContext,
-            responseType: responseType_,
-            withCredentials: this.configuration.withCredentials,
-            headers: localVarHeaders,
-            observe: observe,
-            reportProgress: reportProgress
+        else {
+            uiAction.params = {
+                nodeUuid: nodeUuid,
+            };
+        }
+        let uiActionModel = {
+            serviceToUse: this,
+            uiAction,
+        };
+        this.uiActionService.uiActionModel = uiActionModel;
+        this.uiActionService.execute(uiAction);
+    }
+    getAllNodes(nodes) {
+        return nodes.flatMap((n) => [n, ...this.getAllNodes(n.childrenNodes)]);
+    }
+    async cacheActionDesciptors(nodes) {
+        let newUiActions = new Set();
+        nodes.forEach((node) => {
+            node.actions
+                ?.filter((uiAction) => !this.uiActionDescriptors.get(uiAction.code))
+                .forEach((action) => newUiActions.add(action));
         });
+        for (let action of newUiActions) {
+            if (!this.uiActionDescriptors.get(action.code)) {
+                let descriptor = await this.uiActionDescriptorService.getActionDescriptor(action);
+                this.uiActionDescriptors.set(action.code, descriptor);
+            }
+        }
+    }
+    getLabelByAction(action) {
+        let desc = this.uiActionDescriptors.get(action.code);
+        return desc.title;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$1, optional: true }, { token: Configuration$1, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [BASE_PATH$1]
-                }] }, { type: Configuration$1, decorators: [{
-                    type: Optional
-                }] }] });
-
-const APIS = [DefaultService];
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * 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.
- */
-var ComponentType;
-(function (ComponentType) {
-    ComponentType["CONTAINER"] = "container";
-    ComponentType["FORM"] = "form";
-    ComponentType["WIDGET"] = "widget";
-})(ComponentType || (ComponentType = {}));
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * 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.
- */
-var ComponentWidgetType;
-(function (ComponentWidgetType) {
-    ComponentWidgetType["GRID"] = "grid";
-    ComponentWidgetType["FILTER"] = "filter";
-    ComponentWidgetType["TREE"] = "tree";
-    ComponentWidgetType["TOOLBAR"] = "toolbar";
-})(ComponentWidgetType || (ComponentWidgetType = {}));
-
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * 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.
- */
-var LayoutDirection;
-(function (LayoutDirection) {
-    LayoutDirection["HORIZONTAL"] = "horizontal";
-    LayoutDirection["VERTICAL"] = "vertical";
-})(LayoutDirection || (LayoutDirection = {}));
-
-class ApiModule {
-    static forRoot(configurationFactory) {
+    // #region UseUiAction
+    getAdditionalParams(uiAction) {
+        if (uiAction.params && uiAction.params['nodeUuid']) {
+            let nodeUuid = uiAction.params['nodeUuid'];
+            let nodeName;
+            if (uiAction.code === 'RENAME') {
+                nodeName = this.deepSearchTreeNode(nodeUuid, this.treeFromBackend)?.caption;
+            }
+            return {
+                forTextArea: '',
+                forTextField: nodeName ? nodeName : '',
+            };
+        }
         return {
-            ngModule: ApiModule,
-            providers: [{ provide: Configuration$1, useFactory: configurationFactory }]
+            forTextArea: '',
+            forTextField: '',
         };
     }
-    constructor(parentModule, http) {
-        if (parentModule) {
-            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+    getModel() {
+        return {};
+    }
+    async performUiActionRequest(uiActionRequest) {
+        if (uiActionRequest.params['nodeUuid']) {
+            await this.performNodeUiActionRequest(uiActionRequest);
         }
-        if (!http) {
-            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
-                'See also https://github.com/angular/angular/issues/20575');
+        else {
+            await this.performMainUiActionRequest(uiActionRequest);
         }
+        //await this.viewContext.getAndSyncViewContext();
+        this.syncTree();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
+    async performNodeUiActionRequest(uiActionRequest) {
+        let nodeId = uiActionRequest.params['nodeUuid'];
+        delete uiActionRequest.params['nodeUuid'];
+        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performAction2(viewUuid, this.treeId, nodeId, uiActionRequest).toPromise());
+    }
+    async performMainUiActionRequest(uiActionRequest) {
+        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.service.performMainAction2(viewUuid, this.treeId, uiActionRequest).toPromise());
+    }
+    handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
+        throw new Error('Method not implemented.');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeGenericService, deps: [{ token: i0.Injector }, { token: 'pageName' }, { token: 'treeId' }, { token: 'treeMenuIcon' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeGenericService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeGenericService, decorators: [{
+            type: Injectable,
             args: [{
-                    imports: [],
-                    declarations: [],
-                    exports: [],
-                    providers: []
+                    providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: ApiModule, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }, { type: i1.HttpClient, decorators: [{
-                    type: Optional
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['pageName']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['treeId']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['treeMenuIcon']
                 }] }] });
 
-/*
- * Public API Surface of smart-grid
- */
-
-class SmartComponentLayoutComponent {
-    constructor(layoutService, element, renderer) {
-        this.layoutService = layoutService;
-        this.element = element;
-        this.renderer = renderer;
+class SmartTreeComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
         this._destroy$ = new Subject();
+        this.treeControl = new NestedTreeControl((node) => node.childrenNodes);
+        this.dataSource = new MatTreeNestedDataSource();
+        this.smartTreeNodeButtonType = SmartTreeNodeButtonType;
+        this.uiActionModels = [];
+        this.hasChild = (_, node) => node.hasChildren;
     }
-    ngAfterViewInit() {
-        if (this.smartFormList?.first) {
-            this.setFormComponent(this.smartFormList?.first);
-        }
-        this.smartFormList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            this.setFormComponent(list.first);
-        });
-        if (this.smartGridList?.first) {
-            this.setGridComponent(this.smartGridList?.first);
+    ngOnInit() {
+        if (!this.treeService) {
+            throw new Error('TreeService has not been given!');
         }
-        this.smartGridList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            this.setGridComponent(list.first);
+        this.errorMessage = this.treeService.errorMessage;
+        this.treeService.smartTreeModelChanged.subscribe((newSmartTree) => {
+            this.treeData = newSmartTree;
+            this.dataSource.data = this.treeData.rootNodes;
+            this.expandTreeNodes();
         });
-        this.smartFilterList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            if (!this.smartFilterComponent) {
-                this.smartFilterComponent = list.first;
-                this.bindFilter();
+        this.treeService.uiActionModelsChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            if (this.treeService.uiActionModels) {
+                this.uiActionModels = this.treeService.uiActionModels;
             }
         });
-        if (this.toolbarList?.first) {
-            this.setToolbarComponent(this.toolbarList?.first);
-        }
-        this.toolbarList.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((list) => {
-            this.setToolbarComponent(list.first);
-        });
-        this.setUp();
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    ngOnChanges(changes) {
-        this.setUp();
-    }
-    setUp() {
-        if (!this.parentSmartComponent || !this.smartComponentLayout) {
-            return;
-        }
-        if (deepEqual(this.smartComponentLayout, this.currentLayout)) {
-            // no layout change, keep current state
-            this.smartComponentLayout = this.currentLayout;
-            return;
-        }
-        // layout changed, render, but save current
-        // this.currentLayout = JSON.parse(JSON.stringify(this.smartComponentLayout));
-        this.currentLayout = this.smartComponentLayout;
-        this.uuid = this.parentSmartComponent.uuid;
-        this.treeService = this.parentSmartComponent.smartTreeService;
-        this.smartComponentLayout?.direction;
-        if (this.smartComponentLayout?.expandable) {
-            this.constructExpandableSection();
-        }
-        else if (this.smartComponentLayout?.type === ComponentType.FORM) {
-            this.constructForm();
-        }
-        else if (this.smartComponentLayout?.type === ComponentType.WIDGET) {
-            if (this.smartComponentLayout.widget?.type === ComponentWidgetType.GRID) {
-                this.constructGrid();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.FILTER) {
-                console.warn('ComponentWidgetType.FILTER is not supported');
-                // this.constructFilter();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TREE) {
-                this.constructTree();
-            }
-            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TOOLBAR) {
-                this.constructToolbar();
-            }
-            if (!this.parentLayoutComponent) {
-                // only top level component should call init actions
-                this.parentSmartComponent.initActions();
-            }
-        }
-        SmartStyleUtility.applyStyle(this.smartComponentLayout.style, this.element, this.renderer);
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-    type() {
-        return ComponentType;
+    getIfExpanded(node) {
+        return this.treeControl.isExpanded(node);
     }
-    constructExpandableSection() {
-        let data = { ...this.smartComponentLayout };
-        data.expandable = false;
-        this.expandableSection = {
-            title: this.smartComponentLayout?.expandableSectionLabel ?? '',
-            inputs: new Map([
-                ['smartComponentLayout', data],
-                ['parentSmartComponent', this.parentSmartComponent],
-                ['parentLayoutComponent', this.parentLayoutComponent],
-            ]),
-            customComponent: SmartComponentLayoutComponent,
-        };
+    expandTreeNodes() {
+        this.expandTreeNodesDeeply(this.dataSource.data);
     }
-    constructForm() {
-        const widgets = this.layoutService.render({
-            layoutDefinitions: this.smartComponentLayout?.form,
+    expandTreeNodesDeeply(nodes) {
+        nodes.forEach((node) => {
+            if (node.expanded) {
+                this.treeControl.expand(node);
+                this.cdr.markForCheck();
+                if (node.childrenNodes && node.childrenNodes.length) {
+                    this.expandTreeNodesDeeply(node.childrenNodes);
+                }
+            }
+            else {
+                this.treeControl.collapse(node);
+            }
         });
-        this.smartForm = {
-            direction: this.getFormLayout(),
-            componentModel: this.parentSmartComponent?.model,
-            widgets,
-        };
-        this.bindForm();
     }
-    getFormLayout() {
-        if (this.smartComponentLayout?.direction) {
-            return this.smartComponentLayout?.direction === LayoutDirection.HORIZONTAL
-                ? SmartFormWidgetDirection.ROW
-                : SmartFormWidgetDirection.COL;
+    onNodeClick(event, node) {
+        event.stopPropagation();
+        if (this.tempActiveNode)
+            this.tempActiveNode.selected = false;
+        node.selected = true;
+        this.tempActiveNode = node;
+        this.treeService.onTreeNodeClick(node);
+    }
+    onOpenNode(event, node) {
+        event.stopPropagation();
+        this.treeService.onTreeNodeOpen(node);
+    }
+    getNodeStyle(node) {
+        if (this.treeStyle) {
+            var style = node.selected
+                ? {
+                    background: this.treeStyle.activeStyle?.backgroundColor,
+                    color: this.treeStyle.activeStyle?.color,
+                }
+                : {
+                    background: this.treeStyle.levelBackgroundColor[node.level],
+                    color: this.treeStyle.color,
+                };
+            return style;
         }
-        return SmartFormWidgetDirection.COL;
+        return {};
     }
-    setFormComponent(comp) {
-        if (!this.smartFormComponent) {
-            this.smartFormComponent = comp;
-            this.bindForm();
+    getNodePadding(node) {
+        if (this.treeStyle) {
+            var style = node.selected
+                ? {
+                    'padding-left': 15 * node.level + 'px',
+                }
+                : {
+                    'padding-left': 15 * node.level + 'px',
+                };
+            return style;
         }
+        return {};
     }
-    bindForm() {
-        if (this.parentSmartComponent?.useQueryLists) {
+    customButtonClicked(event, button, close) {
+        event.stopPropagation();
+        if (button.type === SmartTreeNodeButtonType.MENU) {
             return;
         }
-        if (this.smartForm && this.smartFormComponent) {
-            this.parentSmartComponent?.addForm(
-            // unique identifier for the form
-            `form_${this.makeid(5)}`, this.smartForm, this.smartFormComponent);
+        if (!button.callback) {
+            throw new Error(`Button with name ${button.label || button.icon} does not have a callback!`);
         }
-    }
-    makeid(length) {
-        let result = '';
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        const charactersLength = characters.length;
-        let counter = 0;
-        while (counter < length) {
-            result += characters.charAt(Math.floor(Math.random() * charactersLength));
-            counter += 1;
+        button.callback(button.args);
+        if (close) {
+            let openMenus = this.trigger.filter((matMenuTrigger) => matMenuTrigger.menuOpen);
+            openMenus.forEach((matMenuTrigger) => {
+                matMenuTrigger.closeMenu();
+            });
         }
-        return result;
-    }
-    constructGrid() {
-        this.smartGrid = {
-            gridIdentifier: this.smartComponentLayout?.widget?.identifier,
-            gridModel: {
-                page: {},
-            },
-            options: {
-                rowUiActionType: GridUiActionType.POPUP_MENU,
-            },
-            layoutDef: SmartLayoutDef.TABLE,
-            paginator: true,
-        };
-        this.bindGrid();
     }
-    setGridComponent(comp) {
-        if (!this.smartGridComponent) {
-            this.smartGridComponent = comp;
-            this.bindGrid();
+    getClassesForTreeNode(node) {
+        let classes = [];
+        if (node.expanded) {
+            classes.push(this.getCustomClass('expanded', node.level));
         }
-    }
-    bindGrid() {
-        if (this.parentSmartComponent?.useQueryLists) {
-            return;
+        else {
+            classes.push(this.getCustomClass('collapsed', node.level));
         }
-        if (this.smartGrid && this.smartGridComponent) {
-            this.smartGrid = this.parentSmartComponent?.addGrid(this.smartGrid, {
-                rowUiActionType: GridUiActionType.POPUP_MENU,
-            }, false, this.smartGridComponent);
+        if (node.selected) {
+            classes.push(this.getCustomClass('selected', node.level));
         }
-    }
-    setToolbarComponent(comp) {
-        this.toolbar = comp;
-    }
-    // NOT USED, DOESN'T WORK
-    // constructFilter(): void {
-    //   this.smartFilter = (this.smartComponentLayout!.parentComponent as any).addFilter(
-    //     `filter_${this.makeid(5)}`,
-    //     this.smartComponentLayout?.widget?.filterExpressionFieldList,
-    //     this.smartComponentLayout?.widget?.filterType,
-    //     this.smartFilterComponent
-    //   );
-    // }
-    bindFilter() {
-        // TODO
-    }
-    constructTree() {
-        if (this.parentSmartComponent?.useQueryLists) {
-            return;
+        else {
+            classes.push(this.getCustomClass('unselected', node.level));
         }
-        this.parentSmartComponent.setUpDefaultTree(this.smartComponentLayout?.widget?.identifier);
-        this.treeService?.initialize();
+        if (node.level !== 0) {
+            classes.push(this.getCustomClass('child', node.level));
+        }
+        return classes;
     }
-    constructToolbar() {
-        let toolbarId = this.smartComponentLayout?.widget?.identifier;
-        if (this.toolbarId !== toolbarId) {
-            this.toolbarId = toolbarId;
+    getInnerClassesForTreeNode(node) {
+        let classes = [];
+        if (node.expanded) {
+            classes.push(this.getCustomClass('inner-expanded', node.level));
+        }
+        else {
+            classes.push(this.getCustomClass('inner-collapsed', node.level));
+        }
+        if (node.selected) {
+            classes.push(this.getCustomClass('inner-selected', node.level));
+        }
+        else {
+            classes.push(this.getCustomClass('inner-unselected', node.level));
         }
+        return classes;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent" }, viewQueries: [{ propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar *ngIf=\"!!toolbarId\" #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent"] }] }); }
+    getClassesForTreeNodeChildren(node) {
+        let classes = [];
+        classes.push(this.getCustomClass('group', node.level));
+        return classes;
+    }
+    getCustomClass(cssClass, plusProperty) {
+        return `${cssClass}-${plusProperty}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartTreeComponent, selector: "smart-tree", inputs: { treeStyle: "treeStyle", treeService: "treeService" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror\"\r\n            matTreeNodeToggle\r\n            (click)=\"onOpenNode($event, node)\"\r\n          >\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar *ngIf=\"!!toolbarId\" #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [{ type: SmartformLayoutDefinitionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { smartComponentLayout: [{
-                type: Input
-            }], parentLayoutComponent: [{
+            args: [{ selector: 'smart-tree', template: "<div class=\"smartTreeContainer\">\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"uiActionModels.length\"\r\n    [uiActionModels]=\"uiActionModels\"\r\n  ></smart-ui-action-toolbar>\r\n  <mat-tree\r\n    #tree\r\n    *ngIf=\"treeData\"\r\n    [dataSource]=\"dataSource\"\r\n    [treeControl]=\"treeControl\"\r\n    class=\"sm-tree\"\r\n  >\r\n    <mat-nested-tree-node\r\n      *matTreeNodeDef=\"let node; when: hasChild\"\r\n      matTreeNodeToggle=\"{{ getIfExpanded(node) }}\"\r\n      [ngClass]=\"getClassesForTreeNode(node)\"\r\n      [ngStyle]=\"getNodeStyle(node)\"\r\n    >\r\n      <div\r\n        [ngStyle]=\"getNodePadding(node)\"\r\n        [ngClass]=\"getInnerClassesForTreeNode(node)\"\r\n        class=\"mat-tree-node sm-tree-node\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n      >\r\n        <button mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\">\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror\"\r\n            matTreeNodeToggle\r\n            (click)=\"onOpenNode($event, node)\"\r\n          >\r\n            <div *ngIf=\"hasChild(node.level, node)\">\r\n              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n            </div>\r\n          </mat-icon>\r\n        </button>\r\n        <smart-icon [icon]=\"node.icon\"> </smart-icon>\r\n        <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\r\n          <div class=\"sm-tree-row-caption\">\r\n            {{ node.caption }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-spacer\"></div>\r\n          <div class=\"sm-tree-row-shortDescription\">\r\n            {{ node.shortDescription }}\r\n          </div>\r\n          <div class=\"sm-shortDescription-button-spacer\"></div>\r\n          <div *ngIf=\"node.button\" class=\"sm-tree-node-button\" [ngSwitch]=\"node.button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.ICON\"\r\n              mat-icon-button\r\n            >\r\n              <smart-icon title=\"{{ node.button.icon }}\" [icon]=\"node.button.icon\"></smart-icon>\r\n            </button>\r\n            <div *ngSwitchCase=\"smartTreeNodeButtonType.MENU\">\r\n              <button\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, node.button, true)\"\r\n              >\r\n                <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon\r\n                >{{ node.button.label }}\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button\r\n                  *ngFor=\"let button of node.button.menuItemButtons\"\r\n                  (click)=\"customButtonClicked($event, button, true)\"\r\n                  mat-menu-item\r\n                >\r\n                  <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon\r\n                  >{{ button.label }}\r\n                </button>\r\n              </mat-menu>\r\n            </div>\r\n            <button\r\n              (click)=\"customButtonClicked($event, node.button)\"\r\n              *ngSwitchCase=\"smartTreeNodeButtonType.NORMAL\"\r\n              mat-raised-button\r\n            >\r\n              <smart-icon *ngIf=\"node.button.icon\" [icon]=\"node.button.icon\"></smart-icon>\r\n              {{ node.button.icon }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n        [ngClass]=\"getClassesForTreeNodeChildren(node)\"\r\n        role=\"group\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </div>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n  <div *ngIf=\"!treeData\">\r\n    <h3>\r\n      {{ errorMessage }}\r\n    </h3>\r\n  </div>\r\n</div>\r\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
+                type: ViewChildren,
+                args: [MatMenuTrigger]
+            }], tree: [{
+                type: ViewChild,
+                args: ['tree']
+            }], treeStyle: [{
                 type: Input
-            }], parentSmartComponent: [{
+            }], treeService: [{
                 type: Input
-            }], smartFormList: [{
-                type: ViewChildren,
-                args: ['form']
-            }], smartGridList: [{
-                type: ViewChildren,
-                args: ['grid']
-            }], smartFilterList: [{
-                type: ViewChildren,
-                args: ['filter']
-            }], toolbarList: [{
-                type: ViewChildren,
-                args: ['toolbar']
-            }], expandableComponents: [{
-                type: ViewChildren,
-                args: [ExpandableSectionComponent]
-            }], components: [{
-                type: ViewChildren,
-                args: [SmartComponentLayoutComponent]
             }] } });
 
-class SmartComponentLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, declarations: [SmartComponentLayoutComponent], imports: [BrowserModule,
+class SmarttreeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, declarations: [SmartTreeComponent], imports: [BrowserModule,
             MatCommonModule,
-            SmartGridModule,
-            SmartExpandableSectionModule,
-            SmarttreeModule,
-            SmartViewContextModule], exports: [SmartComponentLayoutComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, imports: [BrowserModule,
+            MatButtonModule,
+            MatIconModule,
+            MatTreeModule,
+            MatMenuModule,
+            SmartIconModule,
+            SmartViewContextModule], exports: [SmartTreeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, providers: [
+            SmarttreeService,
+            SmarttreeGenericService,
+            { provide: 'treeMenuIcon', useValue: 'more_vert' },
+        ], imports: [BrowserModule,
             MatCommonModule,
-            SmartGridModule,
-            SmartExpandableSectionModule,
-            SmarttreeModule,
+            MatButtonModule,
+            MatIconModule,
+            MatTreeModule,
+            MatMenuModule,
+            SmartIconModule,
             SmartViewContextModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmarttreeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SmartComponentLayoutComponent],
+                    declarations: [SmartTreeComponent],
                     imports: [
                         BrowserModule,
                         MatCommonModule,
-                        SmartGridModule,
-                        SmartExpandableSectionModule,
-                        SmarttreeModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTreeModule,
+                        MatMenuModule,
+                        SmartIconModule,
                         SmartViewContextModule,
                     ],
-                    exports: [SmartComponentLayoutComponent],
-                    providers: [],
+                    exports: [SmartTreeComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    providers: [
+                        SmarttreeService,
+                        SmarttreeGenericService,
+                        { provide: 'treeMenuIcon', useValue: 'more_vert' },
+                    ],
                 }]
         }] });
 
-class SmartFilterParamComponent {
-    constructor() { }
-    onItemClick(item) {
-        this.data.serviceToUse.peformWidgetAction({
-            code: 'ADD_FILTER_EXPRESSION',
-            params: {
-                model: item,
-            },
-        });
+/**
+ * Custom HttpParameterCodec
+ * Workaround for https://github.com/angular/angular/issues/18261
+ */
+let CustomHttpParameterCodec$1 = class CustomHttpParameterCodec {
+    encodeKey(k) {
+        return encodeURIComponent(k);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterParamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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: () => [], propDecorators: { data: [{
-                type: Input
-            }] } });
-
-class SmartFilterParamsComponent {
-    constructor() {
-        this._destroy$ = new Subject();
-        this.expandableSections = [];
+    encodeValue(v) {
+        return encodeURIComponent(v);
     }
-    ngOnInit() {
-        this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.setUp(this.service.model);
-        });
-        this.setUp(this.service.model);
+    decodeKey(k) {
+        return decodeURIComponent(k);
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    decodeValue(v) {
+        return decodeURIComponent(v);
     }
-    setUp(model) {
-        if (model?.model) {
-            this.filterBuilder = model.model;
-            this.constructExpandableSections();
+};
+
+const BASE_PATH$1 = new InjectionToken('basePath');
+const COLLECTION_FORMATS$1 = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+};
+
+let Configuration$1 = 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 = {};
         }
     }
-    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,
-                };
-            });
+    /**
+     * 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;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", 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: () => [], propDecorators: { service: [{
-                type: Input
-            }], filterVcRef: [{
-                type: ViewChild,
-                args: ['smartFilter', { read: ViewContainerRef }]
-            }] } });
-
-class SmartFilterService {
-    constructor() {
-        this._destroy$ = new Subject();
-        this.shouldSubmit = new Subject();
-        this.reSubscribeToSubmit = new Subject();
-        this.change = new Subject();
+    /**
+     * 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;
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    /**
+     * 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');
     }
-    async submit() {
-        this.shouldSubmit.next();
-        await this.shouldSubmit.pipe(takeUntil(this._destroy$)).toPromise();
-        this.shouldSubmit = new Subject();
-        this.reSubscribeToSubmit.next();
-        return this.filter;
+    lookupCredential(key) {
+        const value = this.credentials[key];
+        return typeof value === 'function'
+            ? value()
+            : value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * 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.
- */
-var FilterExpressionBoolOperator$1;
-(function (FilterExpressionBoolOperator) {
-    FilterExpressionBoolOperator["AND"] = "AND";
-    FilterExpressionBoolOperator["OR"] = "OR";
-})(FilterExpressionBoolOperator$1 || (FilterExpressionBoolOperator$1 = {}));
-
-/**
- * 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.
- */
-var FilterExpressionDataType;
-(function (FilterExpressionDataType) {
-    FilterExpressionDataType["STRING"] = "STRING";
-    FilterExpressionDataType["NUMBER"] = "NUMBER";
-    FilterExpressionDataType["DATE"] = "DATE";
-    FilterExpressionDataType["DATE_TIME"] = "DATE_TIME";
-    FilterExpressionDataType["BOOLEAN"] = "BOOLEAN";
-})(FilterExpressionDataType || (FilterExpressionDataType = {}));
+    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
+ * Form layout definition
+ * Contains form layout definition objects.
  *
  * The version of the OpenAPI document: 1.0.0
  * Contact: info@it4all.hu
@@ -14072,25 +13921,124 @@ var FilterExpressionDataType;
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
-var FilterExpressionFieldWidgetType;
-(function (FilterExpressionFieldWidgetType) {
-    FilterExpressionFieldWidgetType["TEXT_FIELD"] = "TEXT_FIELD";
-    FilterExpressionFieldWidgetType["TEXT_FIELD_CHIPS"] = "TEXT_FIELD_CHIPS";
-    FilterExpressionFieldWidgetType["TEXT_FIELD_NUMBER"] = "TEXT_FIELD_NUMBER";
-    FilterExpressionFieldWidgetType["TEXT_BOX"] = "TEXT_BOX";
-    FilterExpressionFieldWidgetType["SELECT"] = "SELECT";
-    FilterExpressionFieldWidgetType["SELECT_MULTIPLE"] = "SELECT_MULTIPLE";
-    FilterExpressionFieldWidgetType["DATE"] = "DATE";
-    FilterExpressionFieldWidgetType["TIME"] = "TIME";
-    FilterExpressionFieldWidgetType["DATE_TIME"] = "DATE_TIME";
-    FilterExpressionFieldWidgetType["CHECK_BOX"] = "CHECK_BOX";
-    FilterExpressionFieldWidgetType["RADIO_BUTTON"] = "RADIO_BUTTON";
-    FilterExpressionFieldWidgetType["RANGE"] = "RANGE";
-})(FilterExpressionFieldWidgetType || (FilterExpressionFieldWidgetType = {}));
+/* tslint:disable:no-unused-variable member-ordering */
+class DefaultService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration$1();
+        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$1();
+    }
+    // @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;
+    }
+    nopePost(observe = 'body', reportProgress = false, options) {
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [];
+            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 = `/nope`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            reportProgress: reportProgress
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH$1, optional: true }, { token: Configuration$1, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DefaultService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH$1]
+                }] }, { type: Configuration$1, decorators: [{
+                    type: Optional
+                }] }] });
+
+const APIS = [DefaultService];
 
 /**
- * Filter API 2
- * Filter API 2
+ * Form layout definition
+ * Contains form layout definition objects.
  *
  * The version of the OpenAPI document: 1.0.0
  * Contact: info@it4all.hu
@@ -14099,30 +14047,16 @@ var FilterExpressionFieldWidgetType;
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
-var FilterExpressionOperation;
-(function (FilterExpressionOperation) {
-    FilterExpressionOperation["EXPRESSION"] = "EXPRESSION";
-    FilterExpressionOperation["EQUAL"] = "EQUAL";
-    FilterExpressionOperation["NOT_EQUAL"] = "NOT_EQUAL";
-    FilterExpressionOperation["LESS"] = "LESS";
-    FilterExpressionOperation["LESS_OR_EQUAL"] = "LESS_OR_EQUAL";
-    FilterExpressionOperation["GREATER"] = "GREATER";
-    FilterExpressionOperation["GREATER_OR_EQUAL"] = "GREATER_OR_EQUAL";
-    FilterExpressionOperation["LIKE"] = "LIKE";
-    FilterExpressionOperation["NOT_LIKE"] = "NOT_LIKE";
-    FilterExpressionOperation["BETWEEN"] = "BETWEEN";
-    FilterExpressionOperation["NOT_BETWEEN"] = "NOT_BETWEEN";
-    FilterExpressionOperation["IS_EMPTY"] = "IS_EMPTY";
-    FilterExpressionOperation["IS_NOT_EMPTY"] = "IS_NOT_EMPTY";
-    FilterExpressionOperation["EXISTS"] = "EXISTS";
-    FilterExpressionOperation["NOT_EXISTS"] = "NOT_EXISTS";
-    FilterExpressionOperation["IN"] = "IN";
-    FilterExpressionOperation["NOT_IN"] = "NOT_IN";
-})(FilterExpressionOperation || (FilterExpressionOperation = {}));
+var ComponentType;
+(function (ComponentType) {
+    ComponentType["CONTAINER"] = "container";
+    ComponentType["FORM"] = "form";
+    ComponentType["WIDGET"] = "widget";
+})(ComponentType || (ComponentType = {}));
 
 /**
- * Filter API 2
- * Filter API 2
+ * Form layout definition
+ * Contains form layout definition objects.
  *
  * The version of the OpenAPI document: 1.0.0
  * Contact: info@it4all.hu
@@ -14131,16 +14065,17 @@ var FilterExpressionOperation;
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
-var FilterExpressionOrderByOrderEnum;
-(function (FilterExpressionOrderByOrderEnum) {
-    FilterExpressionOrderByOrderEnum["ASC"] = "ASC";
-    FilterExpressionOrderByOrderEnum["DESC"] = "DESC";
-})(FilterExpressionOrderByOrderEnum || (FilterExpressionOrderByOrderEnum = {}));
-;
+var ComponentWidgetType;
+(function (ComponentWidgetType) {
+    ComponentWidgetType["GRID"] = "grid";
+    ComponentWidgetType["FILTER"] = "filter";
+    ComponentWidgetType["TREE"] = "tree";
+    ComponentWidgetType["TOOLBAR"] = "toolbar";
+})(ComponentWidgetType || (ComponentWidgetType = {}));
 
 /**
- * Filter API 2
- * Filter API 2
+ * Form layout definition
+ * Contains form layout definition objects.
  *
  * The version of the OpenAPI document: 1.0.0
  * Contact: info@it4all.hu
@@ -14149,289 +14084,398 @@ var FilterExpressionOrderByOrderEnum;
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
+var LayoutDirection;
+(function (LayoutDirection) {
+    LayoutDirection["HORIZONTAL"] = "horizontal";
+    LayoutDirection["VERTICAL"] = "vertical";
+})(LayoutDirection || (LayoutDirection = {}));
 
-var FilterExpressionBuilderGroupBuilderGroupKindEnum;
-(function (FilterExpressionBuilderGroupBuilderGroupKindEnum) {
-    FilterExpressionBuilderGroupBuilderGroupKindEnum["DIPLAY"] = "DIPLAY";
-    FilterExpressionBuilderGroupBuilderGroupKindEnum["BRACKET"] = "BRACKET";
-    FilterExpressionBuilderGroupBuilderGroupKindEnum["EXIST"] = "EXIST";
-})(FilterExpressionBuilderGroupBuilderGroupKindEnum || (FilterExpressionBuilderGroupBuilderGroupKindEnum = {}));
-;
-
-class SmartFilterSimpleFieldComponent {
-    constructor(service, cfService) {
-        this.service = service;
-        this.cfService = cfService;
-        this._destroy$ = new Subject();
+class ApiModule {
+    static forRoot(configurationFactory) {
+        return {
+            ngModule: ApiModule,
+            providers: [{ provide: Configuration$1, useFactory: configurationFactory }]
+        };
     }
-    ngOnInit() {
-        this.operation = this.filterExpressionField.expressionData?.currentOperation;
-        this.currentOperation = this.getOptionLabel(this.operation);
+    constructor(parentModule, http) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+                'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ApiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: [],
+                    providers: []
+                }]
+        }], ctorParameters: () => [{ type: ApiModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.HttpClient, decorators: [{
+                    type: Optional
+                }] }] });
+
+/*
+ * Public API Surface of smart-grid
+ */
+
+class SmartComponentLayoutComponent {
+    constructor(layoutService, element, renderer) {
+        this.layoutService = layoutService;
+        this.element = element;
+        this.renderer = renderer;
+        this._destroy$ = new Subject();
     }
     ngAfterViewInit() {
-        this.constructForm();
+        if (this.smartFormList?.first) {
+            this.setFormComponent(this.smartFormList?.first);
+        }
+        this.smartFormList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            this.setFormComponent(list.first);
+        });
+        if (this.smartGridList?.first) {
+            this.setGridComponent(this.smartGridList?.first);
+        }
+        this.smartGridList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            this.setGridComponent(list.first);
+        });
+        this.smartFilterList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            if (!this.smartFilterComponent) {
+                this.smartFilterComponent = list.first;
+                this.bindFilter();
+            }
+        });
+        if (this.toolbarList?.first) {
+            this.setToolbarComponent(this.toolbarList?.first);
+        }
+        this.toolbarList.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((list) => {
+            this.setToolbarComponent(list.first);
+        });
+        this.setUp();
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    constructFormWidget(key, label, widgetType, possibleValues, placeholder) {
-        let type = widgetType;
-        if (type === FilterExpressionFieldWidgetType.DATE) {
-            type = SmartFormWidgetType.DATE_PICKER;
+    ngOnChanges(changes) {
+        this.setUp();
+    }
+    setUp() {
+        if (!this.parentSmartComponent || !this.smartComponentLayout) {
+            return;
         }
-        else if (type === FilterExpressionFieldWidgetType.DATE_TIME) {
-            type = SmartFormWidgetType.DATE_TIME_PICKER;
+        if (deepEqual(this.smartComponentLayout, this.currentLayout)) {
+            // no layout change, keep current state
+            this.smartComponentLayout = this.currentLayout;
+            return;
         }
-        let widget = {
-            key,
-            label,
-            type,
-            value: '',
-            placeholder: placeholder,
-            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;
-    }
-    constructForm() {
-        this.vcRefForm?.clear();
-        let widgets = [];
-        let key;
-        if (this.filterExpressionField.widgetType === 'SELECT_MULTIPLE') {
-            key = 'expressionData.operand2.selectedValues';
+        // layout changed, render, but save current
+        // this.currentLayout = JSON.parse(JSON.stringify(this.smartComponentLayout));
+        this.currentLayout = this.smartComponentLayout;
+        this.uuid = this.parentSmartComponent.uuid;
+        this.treeService = this.parentSmartComponent.smartTreeService;
+        this.smartComponentLayout?.direction;
+        if (this.smartComponentLayout?.expandable) {
+            this.constructExpandableSection();
         }
-        if (this.filterExpressionField.expressionData?.operand2) {
-            if (key !== 'expressionData.operand2.selectedValues') {
-                key = 'expressionData.operand2.valueAsString';
-            }
-            widgets.push(this.constructFormWidget(key, this.filterExpressionField.label2, this.filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, this.filterExpressionField.possibleValues, this.filterExpressionField.placeholder2));
+        else if (this.smartComponentLayout?.type === ComponentType.FORM) {
+            this.constructForm();
         }
-        if (this.filterExpressionField.expressionData?.operand3) {
-            if (key !== 'selectedValues') {
-                key = 'expressionData.operand3.valueAsString';
+        else if (this.smartComponentLayout?.type === ComponentType.WIDGET) {
+            if (this.smartComponentLayout.widget?.type === ComponentWidgetType.GRID) {
+                this.constructGrid();
+            }
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.FILTER) {
+                console.warn('ComponentWidgetType.FILTER is not supported');
+                // this.constructFilter();
+            }
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TREE) {
+                this.constructTree();
+            }
+            else if (this.smartComponentLayout.widget?.type === ComponentWidgetType.TOOLBAR) {
+                this.constructToolbar();
+            }
+            if (!this.parentLayoutComponent) {
+                // only top level component should call init actions
+                this.parentSmartComponent.initActions();
             }
-            widgets.push(this.constructFormWidget(key, this.filterExpressionField.label3, this.filterExpressionField.widgetType ?? FilterExpressionFieldWidgetType.TEXT_FIELD, this.filterExpressionField.possibleValues, this.filterExpressionField.placeholder3));
         }
-        this.operation = this.filterExpressionField.expressionData?.currentOperation;
-        this.currentOperation = this.getOptionLabel(this.operation);
+        SmartStyleUtility.applyStyle(this.smartComponentLayout.style, this.element, this.renderer);
+    }
+    type() {
+        return ComponentType;
+    }
+    constructExpandableSection() {
+        let data = { ...this.smartComponentLayout };
+        data.expandable = false;
+        this.expandableSection = {
+            title: this.smartComponentLayout?.expandableSectionLabel ?? '',
+            inputs: new Map([
+                ['smartComponentLayout', data],
+                ['parentSmartComponent', this.parentSmartComponent],
+                ['parentLayoutComponent', this.parentLayoutComponent],
+            ]),
+            customComponent: SmartComponentLayoutComponent,
+        };
+    }
+    constructForm() {
+        const widgets = this.layoutService.render({
+            layoutDefinitions: this.smartComponentLayout?.form,
+        });
         this.smartForm = {
-            direction: SmartFormWidgetDirection.ROW,
-            componentModel: { data: this.filterExpressionField },
-            useOnValueChangeEvent: true,
-            useOnBlurEvent: true,
-            submitOnEnter: this.service.filter?.submitOnEnter,
+            direction: this.getFormLayout(),
+            componentModel: this.parentSmartComponent?.model,
             widgets,
-            translateService: this.service.filter?.translateService,
         };
-        // Show form on page
-        this.componentRefForm = this.cfService.createComponent(this.vcRefForm, SmartformComponent, new Map([['smartForm', this.smartForm]]));
-        this.componentRefForm.instance.onValueChangeSubject
-            ?.pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.submit();
-            this.service.change.next();
-        });
-        this.componentRefForm.instance.onBlurSubject?.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.submit();
-            this.service.change.next();
-        });
+        this.bindForm();
     }
-    submit() {
-        let form = this.componentRefForm.instance.submitForm();
-        this.filterExpressionField = form.componentModel?.data;
-        this.simpleFieldChildren.forEach((smartFilterFieldComponent, index) => {
-            let filterExpressionField = smartFilterFieldComponent.submit();
-            this.filterExpressionField.subFieldList.filters[index] = filterExpressionField;
-        });
-        return this.filterExpressionField;
+    getFormLayout() {
+        if (this.smartComponentLayout?.direction) {
+            return this.smartComponentLayout?.direction === LayoutDirection.HORIZONTAL
+                ? SmartFormWidgetDirection.ROW
+                : SmartFormWidgetDirection.COL;
+        }
+        return SmartFormWidgetDirection.COL;
     }
-    optionSelected(option) {
-        let oldOption = this.componentRefForm.instance.smartForm.componentModel.data.expressionData
-            .currentOperation;
-        this.componentRefForm.instance.smartForm.componentModel.data.expressionData.currentOperation =
-            option;
-        this.operation = option;
-        this.currentOperation = this.getOptionLabel(this.operation);
-        if (oldOption !== FilterExpressionOperation.BETWEEN &&
-            option === FilterExpressionOperation.BETWEEN) {
-            this.submit();
-            let label = this.filterExpressionField.label2;
-            this.filterExpressionField.label2 = `${label} - tól`;
-            this.filterExpressionField.label3 = `${label} - ig`;
-            this.filterExpressionField.expressionData.operand3 = {
-                isDataName: this.filterExpressionField.expressionData.operand2?.isDataName,
-                type: this.filterExpressionField.expressionData.operand3?.type,
-                valueAsString: this.filterExpressionField.expressionData.operand3?.valueAsString,
-                selectedValues: this.filterExpressionField.expressionData.operand3?.selectedValues,
-            };
-            this.constructForm();
+    setFormComponent(comp) {
+        if (!this.smartFormComponent) {
+            this.smartFormComponent = comp;
+            this.bindForm();
         }
-        else if (oldOption === FilterExpressionOperation.BETWEEN &&
-            option !== FilterExpressionOperation.BETWEEN) {
-            let label = this.filterExpressionField.label2.replace(' - tól', '');
-            this.filterExpressionField.label2 = `${label}`;
-            this.filterExpressionField.label3 = undefined;
-            this.filterExpressionField.expressionData.operand3 = undefined;
-            this.constructForm();
+    }
+    bindForm() {
+        if (this.parentSmartComponent?.useQueryLists) {
+            return;
+        }
+        if (this.smartForm && this.smartFormComponent) {
+            this.parentSmartComponent?.addForm(
+            // unique identifier for the form
+            `form_${this.makeid(5)}`, this.smartForm, this.smartFormComponent);
+        }
+    }
+    makeid(length) {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        let counter = 0;
+        while (counter < length) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            counter += 1;
+        }
+        return result;
+    }
+    constructGrid() {
+        this.smartGrid = {
+            gridIdentifier: this.smartComponentLayout?.widget?.identifier,
+            gridModel: {
+                page: {},
+            },
+            options: {
+                rowUiActionType: GridUiActionType.POPUP_MENU,
+            },
+            layoutDef: SmartLayoutDef.TABLE,
+            paginator: true,
+        };
+        this.bindGrid();
+    }
+    setGridComponent(comp) {
+        if (!this.smartGridComponent) {
+            this.smartGridComponent = comp;
+            this.bindGrid();
+        }
+    }
+    bindGrid() {
+        if (this.parentSmartComponent?.useQueryLists) {
+            return;
+        }
+        if (this.smartGrid && this.smartGridComponent) {
+            this.smartGrid = this.parentSmartComponent?.addGrid(this.smartGrid, {
+                rowUiActionType: GridUiActionType.POPUP_MENU,
+            }, false, this.smartGridComponent);
         }
     }
-    getOptionLabel(option) {
-        if (!option) {
-            return '';
+    setToolbarComponent(comp) {
+        this.toolbar = comp;
+    }
+    // NOT USED, DOESN'T WORK
+    // constructFilter(): void {
+    //   this.smartFilter = (this.smartComponentLayout!.parentComponent as any).addFilter(
+    //     `filter_${this.makeid(5)}`,
+    //     this.smartComponentLayout?.widget?.filterExpressionFieldList,
+    //     this.smartComponentLayout?.widget?.filterType,
+    //     this.smartFilterComponent
+    //   );
+    // }
+    bindFilter() {
+        // TODO
+    }
+    constructTree() {
+        if (this.parentSmartComponent?.useQueryLists) {
+            return;
         }
-        else if (this.operationTranslator) {
-            return this.operationTranslator(option);
+        this.parentSmartComponent.setUpDefaultTree(this.smartComponentLayout?.widget?.identifier);
+        this.treeService?.initialize();
+    }
+    constructToolbar() {
+        let toolbarId = this.smartComponentLayout?.widget?.identifier;
+        if (this.toolbarId !== toolbarId) {
+            this.toolbarId = toolbarId;
         }
-        return option;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterSimpleFieldComponent, deps: [{ token: SmartFilterService }, { token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartFilterSimpleFieldComponent, selector: "smart-filter-simple-field", inputs: { operationTranslator: "operationTranslator", filterExpressionField: "filterExpressionField", showPossibleActions: "showPossibleActions" }, viewQueries: [{ propertyName: "vcRefForm", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div class=\"smart-filter-simple-field-container\">\r\n  <div class=\"smart-filter-simple-field-form-widget\">\r\n    <div\r\n      class=\"smart-filter-simple-field-form-widget-row\"\r\n      *ngIf=\"showPossibleActions\"\r\n    >\r\n      <p>({{ currentOperation }})</p>\r\n      <button\r\n        mat-icon-button\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-label=\"Example icon-button with a menu\"\r\n      >\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button\r\n          mat-menu-item\r\n          *ngFor=\"let option of filterExpressionField.possibleOperations\"\r\n          (click)=\"optionSelected(option)\"\r\n        >\r\n          <span>\r\n            {{ getOptionLabel(option) }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <ng-template #form></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-unelevated-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-outlined-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent" }, viewQueries: [{ propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar *ngIf=\"!!toolbarId\" #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterSimpleFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-filter-simple-field', template: "<div class=\"smart-filter-simple-field-container\">\r\n  <div class=\"smart-filter-simple-field-form-widget\">\r\n    <div\r\n      class=\"smart-filter-simple-field-form-widget-row\"\r\n      *ngIf=\"showPossibleActions\"\r\n    >\r\n      <p>({{ currentOperation }})</p>\r\n      <button\r\n        mat-icon-button\r\n        [matMenuTriggerFor]=\"menu\"\r\n        aria-label=\"Example icon-button with a menu\"\r\n      >\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button\r\n          mat-menu-item\r\n          *ngFor=\"let option of filterExpressionField.possibleOperations\"\r\n          (click)=\"optionSelected(option)\"\r\n        >\r\n          <span>\r\n            {{ getOptionLabel(option) }}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <ng-template #form></ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".smart-filter-simple-field-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-form-widget{padding:1rem;border-radius:1rem;display:flex;flex-direction:column}.smart-filter-simple-field-form-widget-row{display:flex;flex-direction:row;justify-content:space-between}.smart-filter-simple-field-form-widget-row p{color:#00000042}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button{height:24px;width:24px}.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-unelevated-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-outlined-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-raised-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-icon-button .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-fab .mat-button-wrapper>*,.smart-filter-simple-field-form-widget ::ng-deep .mat-mdc-mini-fab .mat-button-wrapper>*{vertical-align:inherit!important}.smart-filter-simple-field-subfields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem}.smart-filter-simple-field-container ::ng-deep h4{margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: SmartFilterService }, { type: ComponentFactoryService }], propDecorators: { simpleFieldChildren: [{
-                type: ViewChildren,
-                args: ['simpleField']
-            }], operationTranslator: [{
+            args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  <div\r\n    *ngIf=\"smartComponentLayout?.type === type().CONTAINER\"\r\n    [ngClass]=\"smartComponentLayout?.direction ?? 'vertical'\"\r\n  >\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n    ></smart-component-layout>\r\n  </div>\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar *ngIf=\"!!toolbarId\" #toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\r\n</ng-template>\r\n", styles: [".horizontal{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [{ type: SmartformLayoutDefinitionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { smartComponentLayout: [{
                 type: Input
-            }], filterExpressionField: [{
+            }], parentLayoutComponent: [{
                 type: Input
-            }], showPossibleActions: [{
+            }], parentSmartComponent: [{
                 type: Input
-            }], vcRefForm: [{
-                type: ViewChild,
-                args: ['form', { read: ViewContainerRef }]
+            }], smartFormList: [{
+                type: ViewChildren,
+                args: ['form']
+            }], smartGridList: [{
+                type: ViewChildren,
+                args: ['grid']
+            }], smartFilterList: [{
+                type: ViewChildren,
+                args: ['filter']
+            }], toolbarList: [{
+                type: ViewChildren,
+                args: ['toolbar']
+            }], expandableComponents: [{
+                type: ViewChildren,
+                args: [ExpandableSectionComponent]
+            }], components: [{
+                type: ViewChildren,
+                args: [SmartComponentLayoutComponent]
             }] } });
 
-class SmartFilterSimpleComponent {
-    constructor(service) {
-        this.service = service;
-        this._destroy$ = new Subject();
-        this.service.reSubscribeToSubmit.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.subscribeToSubmit();
-        });
-        this.subscribeToSubmit();
-    }
-    ngOnInit() {
-        this.smartFilter = this.service.filter;
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    subscribeToSubmit() {
-        this.service.shouldSubmit.pipe(takeUntil(this._destroy$)).subscribe(() => {
-            this.submit();
-        });
-    }
-    submit() {
-        this.simpleFieldChildren.forEach((smartFilterFieldComponent, index) => {
-            this.smartFilter.data[index] = smartFilterFieldComponent.submit();
+class SmartComponentLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, declarations: [SmartComponentLayoutComponent], imports: [BrowserModule,
+            MatCommonModule,
+            SmartGridModule,
+            SmartExpandableSectionModule,
+            SmarttreeModule,
+            SmartViewContextModule], exports: [SmartComponentLayoutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, imports: [BrowserModule,
+            MatCommonModule,
+            SmartGridModule,
+            SmartExpandableSectionModule,
+            SmarttreeModule,
+            SmartViewContextModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SmartComponentLayoutComponent],
+                    imports: [
+                        BrowserModule,
+                        MatCommonModule,
+                        SmartGridModule,
+                        SmartExpandableSectionModule,
+                        SmarttreeModule,
+                        SmartViewContextModule,
+                    ],
+                    exports: [SmartComponentLayoutComponent],
+                    providers: [],
+                }]
+        }] });
+
+class SmartFilterParamComponent {
+    constructor() { }
+    onItemClick(item) {
+        this.data.serviceToUse.peformWidgetAction({
+            code: 'ADD_FILTER_EXPRESSION',
+            params: {
+                model: item,
+            },
         });
-        this.service.filter = this.smartFilter;
-        this.service.shouldSubmit.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterSimpleComponent, deps: [{ token: SmartFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartFilterSimpleComponent, selector: "smart-filter-simple", viewQueries: [{ propertyName: "simpleFieldChildren", predicate: ["simpleField"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"smartFilter\" class=\"smart-simple-fields-container\">\r\n    <div *ngFor=\"let filterExpressionField of smartFilter.data; let i = index\">\r\n        <smart-filter-simple-field\r\n            #simpleField\r\n            [filterExpressionField]=\"filterExpressionField\"\r\n            [operationTranslator]=\"smartFilter.operationTranslator\"\r\n            [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n        ></smart-filter-simple-field>\r\n        <div *ngFor=\"let subfilterExpressionField of filterExpressionField.subFieldList?.filters\">\r\n            <smart-filter-simple-field\r\n                #simpleField\r\n                [filterExpressionField]=\"filterExpressionField\"\r\n                [operationTranslator]=\"smartFilter.operationTranslator\"\r\n                [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n            ></smart-filter-simple-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartFilterSimpleFieldComponent, selector: "smart-filter-simple-field", inputs: ["operationTranslator", "filterExpressionField", "showPossibleActions"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterParamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterSimpleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterParamComponent, decorators: [{
             type: Component,
-            args: [{ selector: "smart-filter-simple", template: "<div *ngIf=\"smartFilter\" class=\"smart-simple-fields-container\">\r\n    <div *ngFor=\"let filterExpressionField of smartFilter.data; let i = index\">\r\n        <smart-filter-simple-field\r\n            #simpleField\r\n            [filterExpressionField]=\"filterExpressionField\"\r\n            [operationTranslator]=\"smartFilter.operationTranslator\"\r\n            [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n        ></smart-filter-simple-field>\r\n        <div *ngFor=\"let subfilterExpressionField of filterExpressionField.subFieldList?.filters\">\r\n            <smart-filter-simple-field\r\n                #simpleField\r\n                [filterExpressionField]=\"filterExpressionField\"\r\n                [operationTranslator]=\"smartFilter.operationTranslator\"\r\n                [showPossibleActions]=\"smartFilter.showPossibleActions\"\r\n            ></smart-filter-simple-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".smart-simple-fields-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:center}\n"] }]
-        }], ctorParameters: () => [{ type: SmartFilterService }], propDecorators: { simpleFieldChildren: [{
-                type: ViewChildren,
-                args: ["simpleField"]
+            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: () => [], propDecorators: { data: [{
+                type: Input
             }] } });
 
-class SmartFilterComponent {
-    constructor(service) {
-        this.service = service;
+class SmartFilterParamsComponent {
+    constructor() {
+        this._destroy$ = new Subject();
+        this.expandableSections = [];
     }
     ngOnInit() {
-        if (this.filter) {
-            this.setUp();
-        }
+        this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
+            this.setUp(this.service.model);
+        });
+        this.setUp(this.service.model);
     }
-    ngOnChanges(changes) {
-        if (changes['filter'].currentValue) {
-            this.setUp();
-        }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-    setUp() {
-        this.service.filter = this.filter;
+    setUp(model) {
+        if (model?.model) {
+            this.filterBuilder = model.model;
+            this.constructExpandableSections();
+        }
     }
-    async submit() {
-        return await this.service.submit();
+    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,
+                };
+            });
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterComponent, deps: [{ token: SmartFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartFilterComponent, selector: "smart-filter", inputs: { filter: "filter" }, providers: [SmartFilterService], usesOnChanges: true, ngImport: i0, template: "<smart-filter-simple *ngIf=\"filter\" #simpleFilter></smart-filter-simple>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartFilterSimpleComponent, selector: "smart-filter-simple" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterParamsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-filter', providers: [SmartFilterService], template: "<smart-filter-simple *ngIf=\"filter\" #simpleFilter></smart-filter-simple>\r\n" }]
-        }], ctorParameters: () => [{ type: SmartFilterService }], propDecorators: { filter: [{
+            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: () => [], propDecorators: { service: [{
                 type: Input
+            }], filterVcRef: [{
+                type: ViewChild,
+                args: ['smartFilter', { read: ViewContainerRef }]
             }] } });
 
-class SmartFilterExpressionFieldComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterExpressionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartFilterExpressionFieldComponent, selector: "lib-smart-filter-expression-field", ngImport: i0, template: "", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterExpressionFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-smart-filter-expression-field', template: "" }]
-        }], ctorParameters: () => [] });
-
-class SmartFilterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterModule, declarations: [SmartFilterComponent,
-            SmartFilterExpressionFieldComponent,
-            SmartFilterSimpleComponent,
-            SmartFilterSimpleFieldComponent], imports: [BrowserModule, SmartViewContextModule, MatMenuModule, MatIconModule, MatButtonModule], exports: [SmartFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterModule, imports: [BrowserModule, SmartViewContextModule, MatMenuModule, MatIconModule, MatButtonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartFilterModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SmartFilterComponent,
-                        SmartFilterExpressionFieldComponent,
-                        SmartFilterSimpleComponent,
-                        SmartFilterSimpleFieldComponent,
-                    ],
-                    imports: [BrowserModule, SmartViewContextModule, MatMenuModule, MatIconModule, MatButtonModule],
-                    exports: [SmartFilterComponent],
-                }]
-        }] });
-
-var SmartFilterPosition;
-(function (SmartFilterPosition) {
-    SmartFilterPosition[SmartFilterPosition["TOP"] = 0] = "TOP";
-    SmartFilterPosition[SmartFilterPosition["BOTTOM"] = 1] = "BOTTOM";
-    SmartFilterPosition[SmartFilterPosition["LEFT"] = 2] = "LEFT";
-    SmartFilterPosition[SmartFilterPosition["RIGHT"] = 3] = "RIGHT";
-})(SmartFilterPosition || (SmartFilterPosition = {}));
-var SmartFilterType;
-(function (SmartFilterType) {
-    SmartFilterType[SmartFilterType["SIMPLE"] = 0] = "SIMPLE";
-    SmartFilterType[SmartFilterType["ADVANCED"] = 1] = "ADVANCED";
-})(SmartFilterType || (SmartFilterType = {}));
-
-/*
- * Public API Surface of smart-filter
- */
-
 var FilterExpressionBuilderUiModelTypeEnum;
 (function (FilterExpressionBuilderUiModelTypeEnum) {
     FilterExpressionBuilderUiModelTypeEnum["SIMPLE"] = "SIMPLE";