@pepperi-addons/ngx-lib 0.4.0-angular14.36 → 0.4.0-angular14.39

package/fesm2020/pepperi-addons-ngx-lib-query-builder.mjs

@@ -16,1140 +16,1140 @@ import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
 import { BehaviorSubject } from 'rxjs';
 import * as i3$1 from '@angular/flex-layout/flex';
 
-class PepTypeConvertorService {
-    constructor() {
-        this._operators = [];
-        this._booleans = [];
-        this.initOperators();
-        this.initBooleans();
-    }
-    get operators() {
-        return this._operators;
-    }
-    get booleans() {
-        return this._booleans;
-    }
-    initOperators() {
-        this._operators.push({
-            key: 'AND',
-            value: 'And'
-        });
-        this._operators.push({
-            key: 'OR',
-            value: 'Or'
-        });
-    }
-    initBooleans() {
-        this._booleans.push({
-            key: 'True',
-            value: 'True'
-        });
-        this._booleans.push({
-            key: 'False',
-            value: 'False'
-        });
-    }
-}
-PepTypeConvertorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTypeConvertorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PepTypeConvertorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTypeConvertorService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTypeConvertorService, decorators: [{
-            type: Injectable
+class PepTypeConvertorService {
+    constructor() {
+        this._operators = [];
+        this._booleans = [];
+        this.initOperators();
+        this.initBooleans();
+    }
+    get operators() {
+        return this._operators;
+    }
+    get booleans() {
+        return this._booleans;
+    }
+    initOperators() {
+        this._operators.push({
+            key: 'AND',
+            value: 'And'
+        });
+        this._operators.push({
+            key: 'OR',
+            value: 'Or'
+        });
+    }
+    initBooleans() {
+        this._booleans.push({
+            key: 'True',
+            value: 'True'
+        });
+        this._booleans.push({
+            key: 'False',
+            value: 'False'
+        });
+    }
+}
+PepTypeConvertorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTypeConvertorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PepTypeConvertorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTypeConvertorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTypeConvertorService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return []; } });
 
-class PepQueryBuilderSectionComponent {
-    constructor(_typeConvertorService) {
-        this._typeConvertorService = _typeConvertorService;
-        this.hasFields = true;
-        this.createSection = new EventEmitter();
-        this.createItem = new EventEmitter();
-        this.remove = new EventEmitter();
-        this.operatorChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.initOperators();
-    }
-    get f() {
-        return this.form.controls;
-    }
-    initOperators() {
-        this.toggleButtons = this._typeConvertorService.operators.map((operator) => {
-            return {
-                key: operator.key,
-                value: operator.value,
-                callback: (event) => this.onOperatorChanged(event)
-            };
-        });
-    }
-    onOperatorChanged(event) {
-        if (event?.source?.key) {
-            this.f.operator.setValue(event.source.key);
-            this.operatorChange.emit();
-        }
-    }
-    onAddRuleClicked() {
-        this.createItem.emit();
-    }
-    onAddRuleSetClicked() {
-        this.createSection.emit();
-    }
-    onDeleteSectionClicked() {
-        this.remove.emit();
-    }
-}
-PepQueryBuilderSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderSectionComponent, deps: [{ token: PepTypeConvertorService }], target: i0.ɵɵFactoryTarget.Component });
-PepQueryBuilderSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepQueryBuilderSectionComponent, selector: "pep-query-builder-section", inputs: { form: "form", depth: "depth", hasFields: "hasFields" }, outputs: { createSection: "createSection", createItem: "createItem", remove: "remove", operatorChange: "operatorChange" }, viewQueries: [{ propertyName: "sectionContainer", first: true, predicate: ["sectionContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n    <div class=\"query-section-container\" fxLayout=\"column\" fxLayoutGap=\".5rem\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n            <pep-group-buttons [buttons]=\"toggleButtons\" [selectedButtonKey]=\"f.operator?.value || ''\" styleType=\"weak\"\n                sizeType=\"sm\" [viewType]=\"'toggle'\" [buttonsDisabled]=\"!hasFields\">\n            </pep-group-buttons>\n            <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n                <pep-button value=\"Add Filter\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\" classNames=\"\"\n                    [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                    (buttonClick)=\"onAddRuleClicked()\"></pep-button>\n                <ng-container *ngIf=\"depth.current < depth.max-1\">\n                    <pep-button value=\"Add Filter Group\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\"\n                        classNames=\"\" [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                        (buttonClick)=\"onAddRuleSetClicked()\"></pep-button>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container #sectionContainer></ng-container>\n    </div>\n    <pep-button *ngIf=\"depth.current > 0\" styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\"\n        [disabled]=\"false\" iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\"\n        (buttonClick)=\"onDeleteSectionClicked()\">\n    </pep-button>\n</div>", styles: [".query-section-container{border-radius:var(--pep-border-radius-md, .25rem);padding:.5rem;width:100%}\n", ".query-section-container{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i4.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-query-builder-section', template: "<div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n    <div class=\"query-section-container\" fxLayout=\"column\" fxLayoutGap=\".5rem\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n            <pep-group-buttons [buttons]=\"toggleButtons\" [selectedButtonKey]=\"f.operator?.value || ''\" styleType=\"weak\"\n                sizeType=\"sm\" [viewType]=\"'toggle'\" [buttonsDisabled]=\"!hasFields\">\n            </pep-group-buttons>\n            <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n                <pep-button value=\"Add Filter\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\" classNames=\"\"\n                    [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                    (buttonClick)=\"onAddRuleClicked()\"></pep-button>\n                <ng-container *ngIf=\"depth.current < depth.max-1\">\n                    <pep-button value=\"Add Filter Group\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\"\n                        classNames=\"\" [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                        (buttonClick)=\"onAddRuleSetClicked()\"></pep-button>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container #sectionContainer></ng-container>\n    </div>\n    <pep-button *ngIf=\"depth.current > 0\" styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\"\n        [disabled]=\"false\" iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\"\n        (buttonClick)=\"onDeleteSectionClicked()\">\n    </pep-button>\n</div>", styles: [".query-section-container{border-radius:var(--pep-border-radius-md, .25rem);padding:.5rem;width:100%}\n", ".query-section-container{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}\n"] }]
-        }], ctorParameters: function () { return [{ type: PepTypeConvertorService }]; }, propDecorators: { form: [{
-                type: Input
-            }], depth: [{
-                type: Input
-            }], hasFields: [{
-                type: Input
-            }], createSection: [{
-                type: Output
-            }], createItem: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], operatorChange: [{
-                type: Output
-            }], sectionContainer: [{
-                type: ViewChild,
-                args: ['sectionContainer', { read: ViewContainerRef, static: true }]
+class PepQueryBuilderSectionComponent {
+    constructor(_typeConvertorService) {
+        this._typeConvertorService = _typeConvertorService;
+        this.hasFields = true;
+        this.createSection = new EventEmitter();
+        this.createItem = new EventEmitter();
+        this.remove = new EventEmitter();
+        this.operatorChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.initOperators();
+    }
+    get f() {
+        return this.form.controls;
+    }
+    initOperators() {
+        this.toggleButtons = this._typeConvertorService.operators.map((operator) => {
+            return {
+                key: operator.key,
+                value: operator.value,
+                callback: (event) => this.onOperatorChanged(event)
+            };
+        });
+    }
+    onOperatorChanged(event) {
+        if (event?.source?.key) {
+            this.f.operator.setValue(event.source.key);
+            this.operatorChange.emit();
+        }
+    }
+    onAddRuleClicked() {
+        this.createItem.emit();
+    }
+    onAddRuleSetClicked() {
+        this.createSection.emit();
+    }
+    onDeleteSectionClicked() {
+        this.remove.emit();
+    }
+}
+PepQueryBuilderSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderSectionComponent, deps: [{ token: PepTypeConvertorService }], target: i0.ɵɵFactoryTarget.Component });
+PepQueryBuilderSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepQueryBuilderSectionComponent, selector: "pep-query-builder-section", inputs: { form: "form", depth: "depth", hasFields: "hasFields" }, outputs: { createSection: "createSection", createItem: "createItem", remove: "remove", operatorChange: "operatorChange" }, viewQueries: [{ propertyName: "sectionContainer", first: true, predicate: ["sectionContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n    <div class=\"query-section-container\" fxLayout=\"column\" fxLayoutGap=\".5rem\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n            <pep-group-buttons [buttons]=\"toggleButtons\" [selectedButtonKey]=\"f.operator?.value || ''\" styleType=\"weak\"\n                sizeType=\"sm\" [viewType]=\"'toggle'\" [buttonsDisabled]=\"!hasFields\">\n            </pep-group-buttons>\n            <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n                <pep-button value=\"Add Filter\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\" classNames=\"\"\n                    [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                    (buttonClick)=\"onAddRuleClicked()\"></pep-button>\n                <ng-container *ngIf=\"depth.current < depth.max-1\">\n                    <pep-button value=\"Add Filter Group\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\"\n                        classNames=\"\" [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                        (buttonClick)=\"onAddRuleSetClicked()\"></pep-button>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container #sectionContainer></ng-container>\n    </div>\n    <pep-button *ngIf=\"depth.current > 0\" styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\"\n        [disabled]=\"false\" iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\"\n        (buttonClick)=\"onDeleteSectionClicked()\">\n    </pep-button>\n</div>", styles: [".query-section-container{border-radius:var(--pep-border-radius-md, .25rem);padding:.5rem;width:100%}\n", ".query-section-container{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i4.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-query-builder-section', template: "<div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n    <div class=\"query-section-container\" fxLayout=\"column\" fxLayoutGap=\".5rem\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n            <pep-group-buttons [buttons]=\"toggleButtons\" [selectedButtonKey]=\"f.operator?.value || ''\" styleType=\"weak\"\n                sizeType=\"sm\" [viewType]=\"'toggle'\" [buttonsDisabled]=\"!hasFields\">\n            </pep-group-buttons>\n            <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n                <pep-button value=\"Add Filter\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\" classNames=\"\"\n                    [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                    (buttonClick)=\"onAddRuleClicked()\"></pep-button>\n                <ng-container *ngIf=\"depth.current < depth.max-1\">\n                    <pep-button value=\"Add Filter Group\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\"\n                        classNames=\"\" [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                        (buttonClick)=\"onAddRuleSetClicked()\"></pep-button>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container #sectionContainer></ng-container>\n    </div>\n    <pep-button *ngIf=\"depth.current > 0\" styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\"\n        [disabled]=\"false\" iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\"\n        (buttonClick)=\"onDeleteSectionClicked()\">\n    </pep-button>\n</div>", styles: [".query-section-container{border-radius:var(--pep-border-radius-md, .25rem);padding:.5rem;width:100%}\n", ".query-section-container{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.24)}\n"] }]
+        }], ctorParameters: function () { return [{ type: PepTypeConvertorService }]; }, propDecorators: { form: [{
+                type: Input
+            }], depth: [{
+                type: Input
+            }], hasFields: [{
+                type: Input
+            }], createSection: [{
+                type: Output
+            }], createItem: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], operatorChange: [{
+                type: Output
+            }], sectionContainer: [{
+                type: ViewChild,
+                args: ['sectionContainer', { read: ViewContainerRef, static: true }]
             }] } });
 
-class PepQueryBuilderItemComponent {
-    constructor(_fb, typeConvertorService) {
-        this._fb = _fb;
-        this.typeConvertorService = typeConvertorService;
-        this._fields = [];
-        this._options = [];
-        this._selectedField = null;
-        this.variableFields = {};
-        this.filterChange = new EventEmitter();
-        this.remove = new EventEmitter();
-        this.setupForm();
-    }
-    set fields(list) {
-        if (list?.length > 0) {
-            this._fields = list;
-            this._options = list.map(field => {
-                return {
-                    key: field.smart.id,
-                    value: field.smart.name
-                };
-            });
-        }
-    }
-    set selected(value) {
-        if (value) {
-            this._selectedField = value.smart;
-            this.queryForm.fieldType.setValue(value.query.fieldType);
-        }
-    }
-    set filter(value) {
-        if (value) {
-            this._filter = value;
-        }
-    }
-    set parentForm(value) {
-        if (value) {
-            this._parentForm = value;
-            this.addToParentForm();
-        }
-    }
-    ngOnInit() {
-        //
-    }
-    get f() {
-        return this.form.controls;
-    }
-    get queryForm() {
-        return this.f.query.controls;
-    }
-    setupForm() {
-        this.form = this._fb.group({
-            smart: this._fb.group({
-                fieldId: this._fb.control(null),
-                fieldType: this._fb.control(null),
-                operator: this._fb.control(null),
-                operatorUnit: this._fb.control(null),
-                values: this._fb.group({
-                    first: this._fb.control(null),
-                    second: this._fb.control(null)
-                })
-            }),
-            query: this._fb.group({
-                fieldType: this._fb.control(null)
-            })
-        });
-    }
-    addToParentForm() {
-        this._parentForm.setControl(this.formKey, this.form);
-    }
-    onFieldChanged(key) {
-        const item = this._fields.find(field => field.smart.id === key);
-        this.setupForm();
-        this.queryForm.fieldType.setValue(item.query.fieldType);
-        this.addToParentForm();
-        /**
-         * hack due to angular's change detection bug -
-         * ERROR Error: There is no FormControl instance attached to form control element with name: [formControlName]
-         */
-        this._selectedField = null;
-        setTimeout(() => {
-            this._selectedField = item ? item.smart : null;
-        }, 0);
-        this._filter = null;
-    }
-    onFilterChanged() {
-        if (this.form.valid) {
-            this.filterChange.emit();
-        }
-    }
-    onDeleteItemClicked() {
-        this.remove.emit();
-    }
-}
-PepQueryBuilderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderItemComponent, deps: [{ token: i1.FormBuilder }, { token: PepTypeConvertorService }], target: i0.ɵɵFactoryTarget.Component });
-PepQueryBuilderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepQueryBuilderItemComponent, selector: "pep-query-builder-item", inputs: { formKey: "formKey", fields: "fields", selected: "selected", filter: "filter", parentForm: "parentForm", variableFields: "variableFields" }, outputs: { filterChange: "filterChange", remove: "remove" }, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n    <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n        <pep-select fxFlex=\"25%\" [value]=\"_selectedField?.id\" xAlignment=\"left\" [options]=\"_options\"\n            [renderTitle]=\"false\" (valueChange)=\"onFieldChanged($event)\"></pep-select>\n        <ng-container *ngIf=\"_selectedField?.componentType\">\n            <ng-container [ngSwitch]=\"_selectedField.componentType\">\n                <ng-container *ngSwitchCase=\"'text'\">\n                    <pep-text-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [variableField]=\"variableFields?.text\"\n                        [field]=\"_selectedField\" [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\"\n                        [inline]=\"true\" [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-text-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'boolean'\">\n                    <pep-boolean-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.boolean\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [options]=\"typeConvertorService.booleans\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-boolean-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'date'\">\n                    <pep-date-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [showAdditionalOperators]=\"true\"\n                        [variableField]=\"variableFields?.date\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-date-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'multi-select'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.['multi-select']\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-multi-select-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'number'\">\n                    <pep-number-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.number\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-number-filter>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <pep-button styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\" [disabled]=\"false\"\n            iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\" (buttonClick)=\"onDeleteItemClicked()\">\n        </pep-button>\n    </div>\n</div>", styles: ["::ng-deep .pep-field-no-spacing{min-height:0!important;margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5$1.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i4.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i7.PepTextFilterComponent, selector: "pep-text-filter" }, { kind: "component", type: i7.PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: ["options"] }, { kind: "component", type: i7.PepDateFilterComponent, selector: "pep-date-filter" }, { kind: "component", type: i7.PepMultiSelectFilterComponent, selector: "pep-multi-select-filter" }, { kind: "component", type: i7.PepNumberFilterComponent, selector: "pep-number-filter" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-query-builder-item', template: "<div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n    <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n        <pep-select fxFlex=\"25%\" [value]=\"_selectedField?.id\" xAlignment=\"left\" [options]=\"_options\"\n            [renderTitle]=\"false\" (valueChange)=\"onFieldChanged($event)\"></pep-select>\n        <ng-container *ngIf=\"_selectedField?.componentType\">\n            <ng-container [ngSwitch]=\"_selectedField.componentType\">\n                <ng-container *ngSwitchCase=\"'text'\">\n                    <pep-text-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [variableField]=\"variableFields?.text\"\n                        [field]=\"_selectedField\" [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\"\n                        [inline]=\"true\" [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-text-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'boolean'\">\n                    <pep-boolean-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.boolean\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [options]=\"typeConvertorService.booleans\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-boolean-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'date'\">\n                    <pep-date-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [showAdditionalOperators]=\"true\"\n                        [variableField]=\"variableFields?.date\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-date-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'multi-select'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.['multi-select']\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-multi-select-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'number'\">\n                    <pep-number-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.number\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-number-filter>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <pep-button styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\" [disabled]=\"false\"\n            iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\" (buttonClick)=\"onDeleteItemClicked()\">\n        </pep-button>\n    </div>\n</div>", styles: ["::ng-deep .pep-field-no-spacing{min-height:0!important;margin-bottom:0!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: PepTypeConvertorService }]; }, propDecorators: { formKey: [{
-                type: Input
-            }], fields: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], parentForm: [{
-                type: Input
-            }], variableFields: [{
-                type: Input
-            }], filterChange: [{
-                type: Output
-            }], remove: [{
-                type: Output
+class PepQueryBuilderItemComponent {
+    constructor(_fb, typeConvertorService) {
+        this._fb = _fb;
+        this.typeConvertorService = typeConvertorService;
+        this._fields = [];
+        this._options = [];
+        this._selectedField = null;
+        this.variableFields = {};
+        this.filterChange = new EventEmitter();
+        this.remove = new EventEmitter();
+        this.setupForm();
+    }
+    set fields(list) {
+        if (list?.length > 0) {
+            this._fields = list;
+            this._options = list.map(field => {
+                return {
+                    key: field.smart.id,
+                    value: field.smart.name
+                };
+            });
+        }
+    }
+    set selected(value) {
+        if (value) {
+            this._selectedField = value.smart;
+            this.queryForm.fieldType.setValue(value.query.fieldType);
+        }
+    }
+    set filter(value) {
+        if (value) {
+            this._filter = value;
+        }
+    }
+    set parentForm(value) {
+        if (value) {
+            this._parentForm = value;
+            this.addToParentForm();
+        }
+    }
+    ngOnInit() {
+        //
+    }
+    get f() {
+        return this.form.controls;
+    }
+    get queryForm() {
+        return this.f.query.controls;
+    }
+    setupForm() {
+        this.form = this._fb.group({
+            smart: this._fb.group({
+                fieldId: this._fb.control(null),
+                fieldType: this._fb.control(null),
+                operator: this._fb.control(null),
+                operatorUnit: this._fb.control(null),
+                values: this._fb.group({
+                    first: this._fb.control(null),
+                    second: this._fb.control(null)
+                })
+            }),
+            query: this._fb.group({
+                fieldType: this._fb.control(null)
+            })
+        });
+    }
+    addToParentForm() {
+        this._parentForm.setControl(this.formKey, this.form);
+    }
+    onFieldChanged(key) {
+        const item = this._fields.find(field => field.smart.id === key);
+        this.setupForm();
+        this.queryForm.fieldType.setValue(item.query.fieldType);
+        this.addToParentForm();
+        /**
+         * hack due to angular's change detection bug -
+         * ERROR Error: There is no FormControl instance attached to form control element with name: [formControlName]
+         */
+        this._selectedField = null;
+        setTimeout(() => {
+            this._selectedField = item ? item.smart : null;
+        }, 0);
+        this._filter = null;
+    }
+    onFilterChanged() {
+        if (this.form.valid) {
+            this.filterChange.emit();
+        }
+    }
+    onDeleteItemClicked() {
+        this.remove.emit();
+    }
+}
+PepQueryBuilderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderItemComponent, deps: [{ token: i1.FormBuilder }, { token: PepTypeConvertorService }], target: i0.ɵɵFactoryTarget.Component });
+PepQueryBuilderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepQueryBuilderItemComponent, selector: "pep-query-builder-item", inputs: { formKey: "formKey", fields: "fields", selected: "selected", filter: "filter", parentForm: "parentForm", variableFields: "variableFields" }, outputs: { filterChange: "filterChange", remove: "remove" }, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n    <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n        <pep-select fxFlex=\"25%\" [value]=\"_selectedField?.id\" xAlignment=\"left\" [options]=\"_options\"\n            [renderTitle]=\"false\" (valueChange)=\"onFieldChanged($event)\"></pep-select>\n        <ng-container *ngIf=\"_selectedField?.componentType\">\n            <ng-container [ngSwitch]=\"_selectedField.componentType\">\n                <ng-container *ngSwitchCase=\"'text'\">\n                    <pep-text-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [variableField]=\"variableFields?.text\"\n                        [field]=\"_selectedField\" [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\"\n                        [inline]=\"true\" [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-text-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'boolean'\">\n                    <pep-boolean-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.boolean\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [options]=\"typeConvertorService.booleans\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-boolean-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'date'\">\n                    <pep-date-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [showAdditionalOperators]=\"true\"\n                        [variableField]=\"variableFields?.date\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-date-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'multi-select'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.['multi-select']\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-multi-select-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'number'\">\n                    <pep-number-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.number\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-number-filter>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <pep-button styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\" [disabled]=\"false\"\n            iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\" (buttonClick)=\"onDeleteItemClicked()\">\n        </pep-button>\n    </div>\n</div>", styles: ["::ng-deep .pep-field-no-spacing{min-height:0!important;margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5$1.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i4.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i7.PepTextFilterComponent, selector: "pep-text-filter" }, { kind: "component", type: i7.PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: ["options"] }, { kind: "component", type: i7.PepDateFilterComponent, selector: "pep-date-filter" }, { kind: "component", type: i7.PepMultiSelectFilterComponent, selector: "pep-multi-select-filter" }, { kind: "component", type: i7.PepNumberFilterComponent, selector: "pep-number-filter" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-query-builder-item', template: "<div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n    <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n        <pep-select fxFlex=\"25%\" [value]=\"_selectedField?.id\" xAlignment=\"left\" [options]=\"_options\"\n            [renderTitle]=\"false\" (valueChange)=\"onFieldChanged($event)\"></pep-select>\n        <ng-container *ngIf=\"_selectedField?.componentType\">\n            <ng-container [ngSwitch]=\"_selectedField.componentType\">\n                <ng-container *ngSwitchCase=\"'text'\">\n                    <pep-text-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [variableField]=\"variableFields?.text\"\n                        [field]=\"_selectedField\" [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\"\n                        [inline]=\"true\" [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-text-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'boolean'\">\n                    <pep-boolean-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.boolean\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [options]=\"typeConvertorService.booleans\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-boolean-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'date'\">\n                    <pep-date-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [showAdditionalOperators]=\"true\"\n                        [variableField]=\"variableFields?.date\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-date-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'multi-select'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.['multi-select']\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-multi-select-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'number'\">\n                    <pep-number-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.number\" [field]=\"_selectedField\" [filter]=\"_filter\"\n                        [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\" [renderTitle]=\"false\"\n                        (filterChange)=\"onFilterChanged()\">\n                    </pep-number-filter>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <pep-button styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\" [disabled]=\"false\"\n            iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\" (buttonClick)=\"onDeleteItemClicked()\">\n        </pep-button>\n    </div>\n</div>", styles: ["::ng-deep .pep-field-no-spacing{min-height:0!important;margin-bottom:0!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: PepTypeConvertorService }]; }, propDecorators: { formKey: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], parentForm: [{
+                type: Input
+            }], variableFields: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }], remove: [{
+                type: Output
             }] } });
 
-class PepQueryBuilderTypeMap {
-    constructor() {
-        this.loadTypes();
-    }
-    loadTypes() {
-        this.map = new Map();
-        this.map.set('Bool', 'boolean');
-        this.map.set('JsonBool', 'boolean');
-        this.map.set('Integer', 'int');
-        this.map.set('Double', 'int');
-        this.map.set('String', 'text');
-        this.map.set('Guid', 'text');
-        this.map.set('Date', 'date');
-        this.map.set('DateTime', 'date-time');
-        this.map.set('MultipleStringValues', 'multi-select');
-    }
-    /**
-     * Converts legacy field type to smart filter type
-     * @param type legacy type
-     * @returns smart filter field type
-     */
-    getSmartFilterType(key) {
-        const item = this.map.get(key);
-        return item ? item : null;
-    }
+class PepQueryBuilderTypeMap {
+    constructor() {
+        this.loadTypes();
+    }
+    loadTypes() {
+        this.map = new Map();
+        this.map.set('Bool', 'boolean');
+        this.map.set('JsonBool', 'boolean');
+        this.map.set('Integer', 'int');
+        this.map.set('Double', 'int');
+        this.map.set('String', 'text');
+        this.map.set('Guid', 'text');
+        this.map.set('Date', 'date');
+        this.map.set('DateTime', 'date-time');
+        this.map.set('MultipleStringValues', 'multi-select');
+    }
+    /**
+     * Converts legacy field type to smart filter type
+     * @param type legacy type
+     * @returns smart filter field type
+     */
+    getSmartFilterType(key) {
+        const item = this.map.get(key);
+        return item ? item : null;
+    }
 }
 
-var PepOperatorTypes;
-(function (PepOperatorTypes) {
-    PepOperatorTypes["And"] = "AND";
-    PepOperatorTypes["Or"] = "OR";
+var PepOperatorTypes;
+(function (PepOperatorTypes) {
+    PepOperatorTypes["And"] = "AND";
+    PepOperatorTypes["Or"] = "OR";
 })(PepOperatorTypes || (PepOperatorTypes = {}));
 
-const Equals = {
-    legacy: 'IsEqual',
-    smartFilter: PepSmartFilterOperators.Equals,
-    type: ['boolean', 'int', 'text']
-};
-const EqualsVariable = {
-    legacy: 'IsEqualVariable',
-    smartFilter: PepSmartFilterVariableOperators.EqualsToVariable,
-    type: ['boolean', 'int', 'text', 'multi-select']
-};
-const NotEqual = {
-    legacy: 'IsNotEqual',
-    smartFilter: PepSmartFilterOperators.NotEqual,
-    type: null
-};
-const NotEqualsVariable = {
-    legacy: 'IsNotEqualVariable',
-    smartFilter: PepSmartFilterVariableOperators.NotEqualsToVariable,
-    type: ['boolean', 'multi-select']
-};
-const LessThan = {
-    legacy: '<',
-    smartFilter: PepSmartFilterOperators.LessThan,
-    type: null
-};
-const LessThanVarible = {
-    legacy: 'LessThanVarible',
-    smartFilter: PepSmartFilterVariableOperators.LessThanVariable,
-    type: null
-};
-const GreaterThan = {
-    legacy: '>',
-    smartFilter: PepSmartFilterOperators.GreaterThan,
-    type: null
-};
-const GreaterThanVarible = {
-    legacy: 'GreaterThanVarible',
-    smartFilter: PepSmartFilterVariableOperators.GreaterThanVariable,
-    type: null
-};
-/*
-const GreaterThanOrEquals: IPepQueryBuilderOperator = {
-    legacy: {
-        operator: '>=',
-        type: 'Integer'
-    },
-    smartFilter: {
-        item: PepSmartFilterOperators.GreaterThanOrEquals,
-        type: 'int'
-    }
-};
-
-const LessThanOrEquals: IPepQueryBuilderOperator = {
-    legacy: {
-        operator: '<=',
-        type: 'Integer'
-    },
-    smartFilter: {
-        item: PepSmartFilterOperators.LessThanOrEquals,
-        type: 'int',
-        type: 'Integer'
-    }
-}; */
-const NumberRange = {
-    legacy: 'Between',
-    smartFilter: PepSmartFilterOperators.NumberRange,
-    type: ['int']
-};
-const Contains = {
-    legacy: 'Contains',
-    smartFilter: PepSmartFilterOperators.Contains,
-    type: null
-};
-const BeginsWith = {
-    legacy: 'BeginsWith',
-    smartFilter: PepSmartFilterOperators.BeginsWith,
-    type: null
-};
-const EndsWith = {
-    legacy: 'EndsWith',
-    smartFilter: PepSmartFilterOperators.EndsWith,
-    type: null
-};
-/*
-const BeginsWith: IPepQueryBuilderOperator = {
-    legacy: {
-        operator: 'BeginsWith',
-        type: 'String'
-    },
-    smartFilter: {
-        item: PepSmartFilterOperators.BeginsWith,
-        type: 'text'
-    }
-};
-
-const EndsWith: IPepQueryBuilderOperator = {
-    legacy: {
-        operator: 'EndsWith',
-        type: 'String'
-    },
-    smartFilter: {
-        item: PepSmartFilterOperators.EndsWith,
-        type: 'text'
-    }
-};
-
-const Before: IPepQueryBuilderOperator = {
-    legacy: {
-        operator: 'Before',
-        type: 'Date'
-    },
-    smartFilter: {
-        item: PepSmartFilterOperators.Before,
-        type: 'date'
-    }
-};
-
-const After: IPepQueryBuilderOperator = {
-    legacy: {
-        operator: 'After',
-        type: 'Date'
-    },
-    smartFilter: {
-        item: PepSmartFilterOperators.After,
-        type: 'date'
-    }
-}; */
-const InTheLast = {
-    legacy: 'InTheLast',
-    smartFilter: PepSmartFilterOperators.InTheLast,
-    type: null
-};
-const InTheLastCalendar = {
-    legacy: 'InTheLastCalendar',
-    smartFilter: PepSmartFilterAdditionalOperators.InTheLastCalendar,
-    type: null
-};
-/*
-const InTheLastVariable: IPepQueryBuilderOperator = {
-    legacy: 'InTheLastVariable',
-    smartFilter: PepSmartFilterVariableOperators.InTheLastVariable,
-    type: null
-} */
-const NotInTheLast = {
-    legacy: 'NotInTheLast',
-    smartFilter: PepSmartFilterOperators.NotInTheLast,
-    type: null
-};
-const NotInTheLastCalendar = {
-    legacy: 'NotInTheLastCalendar',
-    smartFilter: PepSmartFilterAdditionalOperators.NotInTheLastCalendar,
-    type: null
-};
-const Today = {
-    legacy: 'Today',
-    smartFilter: PepSmartFilterOperators.Today,
-    type: null
-};
-const ThisWeek = {
-    legacy: 'ThisWeek',
-    smartFilter: PepSmartFilterOperators.ThisWeek,
-    type: null
-};
-const ThisMonth = {
-    legacy: 'ThisMonth',
-    smartFilter: PepSmartFilterOperators.ThisMonth,
-    type: null
-};
-const DateRange = {
-    legacy: 'Between',
-    smartFilter: PepSmartFilterOperators.DateRange,
-    type: ['date-time']
-};
-const dateRangeVariable = {
-    legacy: 'BetweenVariable',
-    smartFilter: PepSmartFilterVariableOperators.DateRangeVariable,
-    type: ['date-time']
-};
-const DueIn = {
-    legacy: 'DueIn',
-    smartFilter: PepSmartFilterOperators.DueIn,
-    type: null
-};
-const NotDueIn = {
-    legacy: 'NotDueIn',
-    smartFilter: PepSmartFilterOperators.NotDueIn,
-    type: null
-};
-const On = {
-    legacy: 'On',
-    smartFilter: PepSmartFilterOperators.On,
-    type: null
-};
-const IsEmpty = {
-    legacy: 'IsEmpty',
-    smartFilter: PepSmartFilterOperators.IsEmpty,
-    type: null
-};
-const IsNotEmpty = {
-    legacy: 'IsNotEmpty',
-    smartFilter: PepSmartFilterOperators.IsNotEmpty,
-    type: null
-};
-const In = {
-    legacy: 'IsEqual',
-    smartFilter: PepSmartFilterOperators.In,
-    type: ['multi-select']
-};
-const PepQueryBuilderOperators = [
-    Equals,
-    EqualsVariable,
-    NotEqual,
-    NotEqualsVariable,
-    LessThan,
-    LessThanVarible,
-    //   LessThanOrEquals,
-    GreaterThan,
-    GreaterThanVarible,
-    //   GreaterThanOrEquals,
-    NumberRange,
-    Contains,
-    BeginsWith,
-    EndsWith,
-    //   After,
-    //   Before,
-    InTheLast,
-    // InTheLastVariable,
-    InTheLastCalendar,
-    NotInTheLast,
-    NotInTheLastCalendar,
-    Today,
-    ThisWeek,
-    ThisMonth,
-    DateRange,
-    dateRangeVariable,
-    DueIn,
-    NotDueIn,
-    On,
-    IsEmpty,
-    IsNotEmpty,
-    In
-];
-/**
- * gets a smart filter operator item
- * @param operator legacy operator
- * @param type smart filter's type
- * @returns smart filter operator item
- */
-function getSmartFilterOperator(operator, type) {
-    const smartFilterOperator = PepQueryBuilderOperators.find(item => item.legacy === operator &&
-        (item.type === null || item.type.includes(type)));
-    return smartFilterOperator ? smartFilterOperator.smartFilter : null;
-}
-/**
- * gets a legacy operator value
- * @param operator smart filter operator item
- * @param type smart filter's type
- * @returns legacy operator value
- */
-function getLegacyOperator(operator, type) {
-    const legacyOperator = PepQueryBuilderOperators.find(item => item.smartFilter === operator &&
-        (item.type === null || item.type.includes(type)));
-    return legacyOperator ? legacyOperator.legacy : null;
+const Equals = {
+    legacy: 'IsEqual',
+    smartFilter: PepSmartFilterOperators.Equals,
+    type: ['boolean', 'int', 'text']
+};
+const EqualsVariable = {
+    legacy: 'IsEqualVariable',
+    smartFilter: PepSmartFilterVariableOperators.EqualsToVariable,
+    type: ['boolean', 'int', 'text', 'multi-select']
+};
+const NotEqual = {
+    legacy: 'IsNotEqual',
+    smartFilter: PepSmartFilterOperators.NotEqual,
+    type: null
+};
+const NotEqualsVariable = {
+    legacy: 'IsNotEqualVariable',
+    smartFilter: PepSmartFilterVariableOperators.NotEqualsToVariable,
+    type: ['boolean', 'multi-select']
+};
+const LessThan = {
+    legacy: '<',
+    smartFilter: PepSmartFilterOperators.LessThan,
+    type: null
+};
+const LessThanVarible = {
+    legacy: 'LessThanVarible',
+    smartFilter: PepSmartFilterVariableOperators.LessThanVariable,
+    type: null
+};
+const GreaterThan = {
+    legacy: '>',
+    smartFilter: PepSmartFilterOperators.GreaterThan,
+    type: null
+};
+const GreaterThanVarible = {
+    legacy: 'GreaterThanVarible',
+    smartFilter: PepSmartFilterVariableOperators.GreaterThanVariable,
+    type: null
+};
+/*
+const GreaterThanOrEquals: IPepQueryBuilderOperator = {
+    legacy: {
+        operator: '>=',
+        type: 'Integer'
+    },
+    smartFilter: {
+        item: PepSmartFilterOperators.GreaterThanOrEquals,
+        type: 'int'
+    }
+};
+
+const LessThanOrEquals: IPepQueryBuilderOperator = {
+    legacy: {
+        operator: '<=',
+        type: 'Integer'
+    },
+    smartFilter: {
+        item: PepSmartFilterOperators.LessThanOrEquals,
+        type: 'int',
+        type: 'Integer'
+    }
+}; */
+const NumberRange = {
+    legacy: 'Between',
+    smartFilter: PepSmartFilterOperators.NumberRange,
+    type: ['int']
+};
+const Contains = {
+    legacy: 'Contains',
+    smartFilter: PepSmartFilterOperators.Contains,
+    type: null
+};
+const BeginsWith = {
+    legacy: 'BeginsWith',
+    smartFilter: PepSmartFilterOperators.BeginsWith,
+    type: null
+};
+const EndsWith = {
+    legacy: 'EndsWith',
+    smartFilter: PepSmartFilterOperators.EndsWith,
+    type: null
+};
+/*
+const BeginsWith: IPepQueryBuilderOperator = {
+    legacy: {
+        operator: 'BeginsWith',
+        type: 'String'
+    },
+    smartFilter: {
+        item: PepSmartFilterOperators.BeginsWith,
+        type: 'text'
+    }
+};
+
+const EndsWith: IPepQueryBuilderOperator = {
+    legacy: {
+        operator: 'EndsWith',
+        type: 'String'
+    },
+    smartFilter: {
+        item: PepSmartFilterOperators.EndsWith,
+        type: 'text'
+    }
+};
+
+const Before: IPepQueryBuilderOperator = {
+    legacy: {
+        operator: 'Before',
+        type: 'Date'
+    },
+    smartFilter: {
+        item: PepSmartFilterOperators.Before,
+        type: 'date'
+    }
+};
+
+const After: IPepQueryBuilderOperator = {
+    legacy: {
+        operator: 'After',
+        type: 'Date'
+    },
+    smartFilter: {
+        item: PepSmartFilterOperators.After,
+        type: 'date'
+    }
+}; */
+const InTheLast = {
+    legacy: 'InTheLast',
+    smartFilter: PepSmartFilterOperators.InTheLast,
+    type: null
+};
+const InTheLastCalendar = {
+    legacy: 'InTheLastCalendar',
+    smartFilter: PepSmartFilterAdditionalOperators.InTheLastCalendar,
+    type: null
+};
+/*
+const InTheLastVariable: IPepQueryBuilderOperator = {
+    legacy: 'InTheLastVariable',
+    smartFilter: PepSmartFilterVariableOperators.InTheLastVariable,
+    type: null
+} */
+const NotInTheLast = {
+    legacy: 'NotInTheLast',
+    smartFilter: PepSmartFilterOperators.NotInTheLast,
+    type: null
+};
+const NotInTheLastCalendar = {
+    legacy: 'NotInTheLastCalendar',
+    smartFilter: PepSmartFilterAdditionalOperators.NotInTheLastCalendar,
+    type: null
+};
+const Today = {
+    legacy: 'Today',
+    smartFilter: PepSmartFilterOperators.Today,
+    type: null
+};
+const ThisWeek = {
+    legacy: 'ThisWeek',
+    smartFilter: PepSmartFilterOperators.ThisWeek,
+    type: null
+};
+const ThisMonth = {
+    legacy: 'ThisMonth',
+    smartFilter: PepSmartFilterOperators.ThisMonth,
+    type: null
+};
+const DateRange = {
+    legacy: 'Between',
+    smartFilter: PepSmartFilterOperators.DateRange,
+    type: ['date-time']
+};
+const dateRangeVariable = {
+    legacy: 'BetweenVariable',
+    smartFilter: PepSmartFilterVariableOperators.DateRangeVariable,
+    type: ['date-time']
+};
+const DueIn = {
+    legacy: 'DueIn',
+    smartFilter: PepSmartFilterOperators.DueIn,
+    type: null
+};
+const NotDueIn = {
+    legacy: 'NotDueIn',
+    smartFilter: PepSmartFilterOperators.NotDueIn,
+    type: null
+};
+const On = {
+    legacy: 'On',
+    smartFilter: PepSmartFilterOperators.On,
+    type: null
+};
+const IsEmpty = {
+    legacy: 'IsEmpty',
+    smartFilter: PepSmartFilterOperators.IsEmpty,
+    type: null
+};
+const IsNotEmpty = {
+    legacy: 'IsNotEmpty',
+    smartFilter: PepSmartFilterOperators.IsNotEmpty,
+    type: null
+};
+const In = {
+    legacy: 'IsEqual',
+    smartFilter: PepSmartFilterOperators.In,
+    type: ['multi-select']
+};
+const PepQueryBuilderOperators = [
+    Equals,
+    EqualsVariable,
+    NotEqual,
+    NotEqualsVariable,
+    LessThan,
+    LessThanVarible,
+    //   LessThanOrEquals,
+    GreaterThan,
+    GreaterThanVarible,
+    //   GreaterThanOrEquals,
+    NumberRange,
+    Contains,
+    BeginsWith,
+    EndsWith,
+    //   After,
+    //   Before,
+    InTheLast,
+    // InTheLastVariable,
+    InTheLastCalendar,
+    NotInTheLast,
+    NotInTheLastCalendar,
+    Today,
+    ThisWeek,
+    ThisMonth,
+    DateRange,
+    dateRangeVariable,
+    DueIn,
+    NotDueIn,
+    On,
+    IsEmpty,
+    IsNotEmpty,
+    In
+];
+/**
+ * gets a smart filter operator item
+ * @param operator legacy operator
+ * @param type smart filter's type
+ * @returns smart filter operator item
+ */
+function getSmartFilterOperator(operator, type) {
+    const smartFilterOperator = PepQueryBuilderOperators.find(item => item.legacy === operator &&
+        (item.type === null || item.type.includes(type)));
+    return smartFilterOperator ? smartFilterOperator.smartFilter : null;
+}
+/**
+ * gets a legacy operator value
+ * @param operator smart filter operator item
+ * @param type smart filter's type
+ * @returns legacy operator value
+ */
+function getLegacyOperator(operator, type) {
+    const legacyOperator = PepQueryBuilderOperators.find(item => item.smartFilter === operator &&
+        (item.type === null || item.type.includes(type)));
+    return legacyOperator ? legacyOperator.legacy : null;
 }
 
-const Days = {
-    legacy: 'Days',
-    smartFilter: PepSmartFilterOperatorUnits.Days
-};
-const Weeks = {
-    legacy: 'Weeks',
-    smartFilter: PepSmartFilterOperatorUnits.Weeks
-};
-const Months = {
-    legacy: 'Months',
-    smartFilter: PepSmartFilterOperatorUnits.Months
-};
-const Years = {
-    legacy: 'Years',
-    smartFilter: PepSmartFilterOperatorUnits.Years
-};
-const PepQueryBuilderOperationUnit = [
-    Days,
-    Weeks,
-    Months,
-    Years,
-];
-/**
- * gets a smart filter operation unit item
- * @param operationUnit legacy operation unit
- * @returns smart filter operation unit item
- */
-function getSmartFilterOperationUnit(operationUnit) {
-    const smartFilterOperationUnit = PepQueryBuilderOperationUnit.find(unit => unit.legacy === operationUnit);
-    return smartFilterOperationUnit ? smartFilterOperationUnit.smartFilter : null;
-}
-/**
- * gets a legacy operation unit value
- * @param operationUnit smart filter operation unit item
- * @returns legacy operation unit value
- */
-function getLegacyOperationUnit(operationUnit) {
-    const legacyOperationUnit = PepQueryBuilderOperationUnit.find(unit => unit.smartFilter === operationUnit);
-    return legacyOperationUnit ? legacyOperationUnit.legacy : null;
+const Days = {
+    legacy: 'Days',
+    smartFilter: PepSmartFilterOperatorUnits.Days
+};
+const Weeks = {
+    legacy: 'Weeks',
+    smartFilter: PepSmartFilterOperatorUnits.Weeks
+};
+const Months = {
+    legacy: 'Months',
+    smartFilter: PepSmartFilterOperatorUnits.Months
+};
+const Years = {
+    legacy: 'Years',
+    smartFilter: PepSmartFilterOperatorUnits.Years
+};
+const PepQueryBuilderOperationUnit = [
+    Days,
+    Weeks,
+    Months,
+    Years,
+];
+/**
+ * gets a smart filter operation unit item
+ * @param operationUnit legacy operation unit
+ * @returns smart filter operation unit item
+ */
+function getSmartFilterOperationUnit(operationUnit) {
+    const smartFilterOperationUnit = PepQueryBuilderOperationUnit.find(unit => unit.legacy === operationUnit);
+    return smartFilterOperationUnit ? smartFilterOperationUnit.smartFilter : null;
+}
+/**
+ * gets a legacy operation unit value
+ * @param operationUnit smart filter operation unit item
+ * @returns legacy operation unit value
+ */
+function getLegacyOperationUnit(operationUnit) {
+    const legacyOperationUnit = PepQueryBuilderOperationUnit.find(unit => unit.smartFilter === operationUnit);
+    return legacyOperationUnit ? legacyOperationUnit.legacy : null;
 }
 
-class PepOutputQueryService {
-    constructor() {
-        //
-    }
-    /**
-     * generates a legacy query structure
-     * @param filters UI smart filters structure
-     * @returns legacy query
-     */
-    generateQuery(filters) {
-        this.initParams();
-        return this.sectionWalk(filters);
-    }
-    /**
-     * init params
-     */
-    initParams() {
-        this._complexIdCounter = 1;
-        this._expressionIdCounter = 1;
-    }
-    /**
-     * a recursive function dynamically builds legacy query structure
-     * @param current UI object represents either a section or filter component
-     * @returns section query data
-     */
-    sectionWalk(current) {
-        let section = null;
-        Object.keys(current).forEach(key => {
-            if (key.includes('item')) {
-                section = this.addToSection(section, {
-                    ExpressionId: (this._expressionIdCounter++).toString(),
-                    ApiName: current[key].smart.fieldId,
-                    FieldType: current[key].query.fieldType,
-                    Operation: getLegacyOperator(current[key].smart.operator, current[key].smart.fieldType),
-                    Values: this.getItemValues(current[key].smart)
-                }, current.operator);
-            }
-            else if (key.includes('section')) {
-                const childSection = this.sectionWalk(current[key]);
-                if (childSection) {
-                    section = this.addToSection(section, childSection, current.operator);
-                }
-            }
-        });
-        return section;
-    }
-    /**
-     * adds a legacy filter object to the current query structure
-     * @param section section query data
-     * @param item filter item
-     * @param operator query operator
-     * @returns
-     */
-    addToSection(section, item, operator) {
-        return section ? this.createSection(section, item, operator) : item;
-    }
-    /**
-     * creates a legacy complex object
-     * @param left LeftNode object
-     * @param right RightNode object
-     * @param operator query operator
-     * @returns legacy complex object
-     */
-    createSection(left, right, operator) {
-        return {
-            ComplexId: (this._complexIdCounter++).toString(),
-            LeftNode: left,
-            RightNode: right,
-            Operation: operator
-        };
-    }
-    /**
-     * gets legacy filter values object
-     * @param current UI filter object's values
-     * @returns an array represents legacy values
-     */
-    getItemValues(current) {
-        let values = [];
-        if (current?.values?.first) {
-            if (current.operator === PepSmartFilterOperators.In) { //multi select 
-                values = current.values.first;
-            }
-            else if (current.operator === PepSmartFilterOperators.InTheLast ||
-                current.operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
-                current.operator === PepSmartFilterOperators.NotInTheLast ||
-                current.operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
-                current.operator === PepSmartFilterOperators.DueIn ||
-                current.operator === PepSmartFilterOperators.NotDueIn) { //operation unit            
-                values.push(current.values.first);
-                if (current.operatorUnit) {
-                    values.push(getLegacyOperationUnit(current.operatorUnit));
-                }
-            }
-            else {
-                values.push(current.values.first);
-                if (current.values.second) {
-                    values.push(current.values.second);
-                }
-            }
-        }
-        return values;
-    }
-}
-PepOutputQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepOutputQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PepOutputQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepOutputQueryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepOutputQueryService, decorators: [{
-            type: Injectable
+class PepOutputQueryService {
+    constructor() {
+        //
+    }
+    /**
+     * generates a legacy query structure
+     * @param filters UI smart filters structure
+     * @returns legacy query
+     */
+    generateQuery(filters) {
+        this.initParams();
+        return this.sectionWalk(filters);
+    }
+    /**
+     * init params
+     */
+    initParams() {
+        this._complexIdCounter = 1;
+        this._expressionIdCounter = 1;
+    }
+    /**
+     * a recursive function dynamically builds legacy query structure
+     * @param current UI object represents either a section or filter component
+     * @returns section query data
+     */
+    sectionWalk(current) {
+        let section = null;
+        Object.keys(current).forEach(key => {
+            if (key.includes('item')) {
+                section = this.addToSection(section, {
+                    ExpressionId: (this._expressionIdCounter++).toString(),
+                    ApiName: current[key].smart.fieldId,
+                    FieldType: current[key].query.fieldType,
+                    Operation: getLegacyOperator(current[key].smart.operator, current[key].smart.fieldType),
+                    Values: this.getItemValues(current[key].smart)
+                }, current.operator);
+            }
+            else if (key.includes('section')) {
+                const childSection = this.sectionWalk(current[key]);
+                if (childSection) {
+                    section = this.addToSection(section, childSection, current.operator);
+                }
+            }
+        });
+        return section;
+    }
+    /**
+     * adds a legacy filter object to the current query structure
+     * @param section section query data
+     * @param item filter item
+     * @param operator query operator
+     * @returns
+     */
+    addToSection(section, item, operator) {
+        return section ? this.createSection(section, item, operator) : item;
+    }
+    /**
+     * creates a legacy complex object
+     * @param left LeftNode object
+     * @param right RightNode object
+     * @param operator query operator
+     * @returns legacy complex object
+     */
+    createSection(left, right, operator) {
+        return {
+            ComplexId: (this._complexIdCounter++).toString(),
+            LeftNode: left,
+            RightNode: right,
+            Operation: operator
+        };
+    }
+    /**
+     * gets legacy filter values object
+     * @param current UI filter object's values
+     * @returns an array represents legacy values
+     */
+    getItemValues(current) {
+        let values = [];
+        if (current?.values?.first) {
+            if (current.operator === PepSmartFilterOperators.In) { //multi select 
+                values = current.values.first;
+            }
+            else if (current.operator === PepSmartFilterOperators.InTheLast ||
+                current.operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
+                current.operator === PepSmartFilterOperators.NotInTheLast ||
+                current.operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
+                current.operator === PepSmartFilterOperators.DueIn ||
+                current.operator === PepSmartFilterOperators.NotDueIn) { //operation unit            
+                values.push(current.values.first);
+                if (current.operatorUnit) {
+                    values.push(getLegacyOperationUnit(current.operatorUnit));
+                }
+            }
+            else {
+                values.push(current.values.first);
+                if (current.values.second) {
+                    values.push(current.values.second);
+                }
+            }
+        }
+        return values;
+    }
+}
+PepOutputQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepOutputQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PepOutputQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepOutputQueryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepOutputQueryService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return []; } });
 
-class PepQueryBuilderService {
-    constructor() {
-        //
-    }
-    /**
-     * creates a smart filter object
-     * @param current filter legacy element
-     * @param field filter's selected field
-     * @returns smart filter object
-     */
-    getFilter(current, field) {
-        const operator = getSmartFilterOperator(current.Operation, field.type);
-        if (operator) {
-            const filterValues = this.getFilterValues(current, operator, field);
-            return createSmartFilter(current.ApiName, operator, filterValues.first, filterValues.second, filterValues.operationUnit);
-        }
-        else {
-            return null;
-        }
-    }
-    /**
-     * converts legacy fields to smart filter fields
-     * @param fields legacy fields array
-     * @returns smart filter fields array
-     */
-    convertToSmartFilterFields(fields) {
-        if (fields?.length > 0) {
-            const typeMapper = new PepQueryBuilderTypeMap();
-            return fields.map((field) => {
-                return {
-                    smart: createSmartFilterField({
-                        id: field.FieldID,
-                        name: field.Title,
-                        options: field.OptionalValues?.map(option => {
-                            return {
-                                key: option.Key,
-                                value: option.Value
-                            };
-                        })
-                    }, typeMapper.getSmartFilterType(field.FieldType)),
-                    query: {
-                        fieldType: field.FieldType
-                    }
-                };
-            });
-        }
-        else {
-            return [];
-        }
-    }
-    /**
-     * gets smart filter's values data
-     * @param current filter legacy element
-     * @param operator smart filter operator
-     * @param field filter's selected field
-     * @returns object contains the filter values data
-     */
-    getFilterValues(current, operator, field) {
-        const data = {
-            first: null,
-            second: null,
-            operationUnit: null
-        };
-        if (operator === PepSmartFilterOperators.In) { //multi select                        
-            //filter keys don't exist on field options
-            data.first = current?.Values?.length > 0 ? current.Values.filter(item => {
-                return field.options.find(option => option.key === item);
-            }) : null;
-        }
-        else if (operator === PepSmartFilterOperators.InTheLast ||
-            operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
-            operator === PepSmartFilterOperators.NotInTheLast ||
-            operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
-            operator === PepSmartFilterOperators.DueIn ||
-            operator === PepSmartFilterOperators.NotDueIn) { //operation unit
-            data.first = current?.Values?.length > 0 ? current.Values[0] : null;
-            if (current?.Values?.length === 2) {
-                data.operationUnit = getSmartFilterOperationUnit(current.Values[1]);
-            }
-        }
-        else {
-            data.first = current?.Values?.length > 0 ? current.Values[0] : null;
-            data.second = current?.Values?.length === 2 ? current.Values[1] : null;
-        }
-        return data;
-    }
-}
-PepQueryBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PepQueryBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+class PepQueryBuilderService {
+    constructor() {
+        //
+    }
+    /**
+     * creates a smart filter object
+     * @param current filter legacy element
+     * @param field filter's selected field
+     * @returns smart filter object
+     */
+    getFilter(current, field) {
+        const operator = getSmartFilterOperator(current.Operation, field.type);
+        if (operator) {
+            const filterValues = this.getFilterValues(current, operator, field);
+            return createSmartFilter(current.ApiName, operator, filterValues.first, filterValues.second, filterValues.operationUnit);
+        }
+        else {
+            return null;
+        }
+    }
+    /**
+     * converts legacy fields to smart filter fields
+     * @param fields legacy fields array
+     * @returns smart filter fields array
+     */
+    convertToSmartFilterFields(fields) {
+        if (fields?.length > 0) {
+            const typeMapper = new PepQueryBuilderTypeMap();
+            return fields.map((field) => {
+                return {
+                    smart: createSmartFilterField({
+                        id: field.FieldID,
+                        name: field.Title,
+                        options: field.OptionalValues?.map(option => {
+                            return {
+                                key: option.Key,
+                                value: option.Value
+                            };
+                        })
+                    }, typeMapper.getSmartFilterType(field.FieldType)),
+                    query: {
+                        fieldType: field.FieldType
+                    }
+                };
+            });
+        }
+        else {
+            return [];
+        }
+    }
+    /**
+     * gets smart filter's values data
+     * @param current filter legacy element
+     * @param operator smart filter operator
+     * @param field filter's selected field
+     * @returns object contains the filter values data
+     */
+    getFilterValues(current, operator, field) {
+        const data = {
+            first: null,
+            second: null,
+            operationUnit: null
+        };
+        if (operator === PepSmartFilterOperators.In) { //multi select                        
+            //filter keys don't exist on field options
+            data.first = current?.Values?.length > 0 ? current.Values.filter(item => {
+                return field.options.find(option => option.key === item);
+            }) : null;
+        }
+        else if (operator === PepSmartFilterOperators.InTheLast ||
+            operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
+            operator === PepSmartFilterOperators.NotInTheLast ||
+            operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
+            operator === PepSmartFilterOperators.DueIn ||
+            operator === PepSmartFilterOperators.NotDueIn) { //operation unit
+            data.first = current?.Values?.length > 0 ? current.Values[0] : null;
+            if (current?.Values?.length === 2) {
+                data.operationUnit = getSmartFilterOperationUnit(current.Values[1]);
+            }
+        }
+        else {
+            data.first = current?.Values?.length > 0 ? current.Values[0] : null;
+            data.second = current?.Values?.length === 2 ? current.Values[1] : null;
+        }
+        return data;
+    }
+}
+PepQueryBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PepQueryBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
         }], ctorParameters: function () { return []; } });
 
-const MAX_STRUCTURE_DEPTH = 3;
-class PepQueryStructureService {
-    constructor(_resolver, _outputQueryService, _queryBuilderService) {
-        this._resolver = _resolver;
-        this._outputQueryService = _outputQueryService;
-        this._queryBuilderService = _queryBuilderService;
-        this._outputQuery$ = new BehaviorSubject(null);
-        this._variableFields = {};
-        this._maxStructureDepth = MAX_STRUCTURE_DEPTH;
-        this.outputQuery$ = this._outputQuery$.asObservable();
-    }
-    set maxDepth(value) {
-        this._maxStructureDepth = value;
-    }
-    get maxDepth() {
-        return this._maxStructureDepth;
-    }
-    set fields(list) {
-        this._smartFilterFields = this._queryBuilderService.convertToSmartFilterFields(list);
-    }
-    get hasFields() {
-        return this._smartFilterFields?.length > 0;
-    }
-    set variableFields(list) {
-        if (list?.length) {
-            const typeMapper = new PepQueryBuilderTypeMap();
-            list.forEach(field => {
-                const fieldType = this.convertSmartFilterComponentType(typeMapper.getSmartFilterType(field.FieldType));
-                if (this.hasProperty(this._variableFields, fieldType)) {
-                    this._variableFields[fieldType].push(field.FieldID);
-                }
-                else {
-                    this._variableFields[fieldType] = [field.FieldID];
-                }
-            });
-        }
-    }
-    set form(value) {
-        this._form = value;
-    }
-    get form() {
-        return this._form;
-    }
-    /**
-     * builds a dynamic UI query structure
-     * might has a different structure than the query's due to parent-child elements merge
-     * @param query legacy query
-     * @param containerRef reference to root element
-     */
-    buildQueryStructure(query, containerRef) {
-        //update root operator        
-        if (this.hasProperty(query, 'ComplexId') &&
-            query?.Operation &&
-            query.Operation !== this._form.get('operator').value) {
-            this._form.get('operator').setValue(query.Operation);
-        }
-        this.flatten(this._form.get('operator').value, query, containerRef, this._form, 0);
-    }
-    /**
-    * checks if the object contains property
-    * @param obj object
-    * @param prop property name
-    * @returns true if contains, false otherwise
-    */
-    hasProperty(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    }
-    /**
-     * a recursive function dynamically builds UI filters structure
-     * @param parentOperator parent legacy complex operator
-     * @param current child legacy object (either another complex or expression type)
-     * @param containerRef parent element
-     * @param parentForm parent form
-     */
-    flatten(parentOperator, current, containerRef, parentForm, depth) {
-        if (this.hasProperty(current, 'ComplexId')) {
-            const section = current;
-            if (parentOperator === current.Operation) {
-                this.flatten(current.Operation, section.LeftNode, containerRef, parentForm, depth);
-                this.flatten(current.Operation, section.RightNode, containerRef, parentForm, depth);
-            }
-            else {
-                const result = this.createSection(section.Operation, containerRef, parentForm, depth + 1);
-                this.flatten(section.Operation, section.LeftNode, result.containerRef, result.parentForm, depth + 1);
-                this.flatten(section.Operation, section.RightNode, result.containerRef, result.parentForm, depth + 1);
-            }
-        }
-        else if (this.hasProperty(current, 'ExpressionId')) {
-            this.createItem(current, containerRef, parentForm);
-        }
-    }
-    /**
-     * creates a container object of two or more child filter items
-     * @param operator AND/OR operator
-     * @param containerRef parent element
-     * @param parentForm parent form
-     * @param depth
-     * @returns an object containing the current element and current form
-     */
-    createSection(operator, containerRef, parentForm, depth) {
-        const factory = this._resolver.resolveComponentFactory(PepQueryBuilderSectionComponent);
-        const componentRef = containerRef.createComponent(factory);
-        // const sectionGroup = this._fb.group({
-        //     operator: this._fb.control(operator)
-        // });
-        const sectionGroup = new FormGroup({
-            operator: new FormControl(operator)
-        });
-        let counter = 1;
-        Object.keys(parentForm.controls).forEach(item => { if (item.includes('section')) {
-            counter++;
-        } });
-        const formKey = `section${counter}`;
-        parentForm.addControl(formKey, sectionGroup);
-        componentRef.instance.form = sectionGroup;
-        componentRef.instance.depth = {
-            current: depth,
-            max: this._maxStructureDepth
-        };
-        componentRef.instance.createSection.subscribe(() => {
-            const section = this.createSection(PepOperatorTypes.And, componentRef.instance.sectionContainer, sectionGroup, depth + 1);
-            this.createItem(null, section.containerRef, section.parentForm);
-        });
-        componentRef.instance.createItem.subscribe(() => {
-            this.createItem(null, componentRef.instance.sectionContainer, sectionGroup);
-        });
-        componentRef.instance.remove.subscribe(() => {
-            parentForm.removeControl(formKey);
-            componentRef.destroy();
-            this.createOutputQuery();
-        });
-        componentRef.instance.operatorChange.subscribe(() => {
-            this.createOutputQuery();
-        });
-        return {
-            containerRef: componentRef.instance.sectionContainer,
-            parentForm: sectionGroup
-        };
-    }
-    /**
-     * creates a component represents filter item (leaf element - has no childs)
-     * @param current filter legacy element
-     * @param containerRef parent element
-     * @param parentForm parent form
-     */
-    createItem(current, containerRef, parentForm) {
-        const factory = this._resolver.resolveComponentFactory(PepQueryBuilderItemComponent);
-        const componentRef = containerRef.createComponent(factory);
-        let counter = 1;
-        Object.keys(parentForm.controls).forEach(item => { if (item.includes('item')) {
-            counter++;
-        } });
-        const formKey = `item${counter}`;
-        componentRef.instance.formKey = formKey;
-        componentRef.instance.fields = this._smartFilterFields;
-        componentRef.instance.variableFields = this._variableFields;
-        const selectedField = this.getSelectedField(current);
-        if (selectedField) {
-            componentRef.instance.selected = selectedField;
-            if (current) {
-                componentRef.instance.filter = this._queryBuilderService.getFilter(current, selectedField.smart);
-            }
-        }
-        componentRef.instance.parentForm = parentForm;
-        componentRef.instance.filterChange.subscribe(() => {
-            this.createOutputQuery();
-        });
-        componentRef.instance.remove.subscribe(() => {
-            parentForm.removeControl(formKey);
-            componentRef.destroy();
-            this.createOutputQuery();
-        });
-    }
-    /**
-     * get smart filter field
-     * @param current filter legacy element
-     * @returns smart filter field, if not found returns the first field
-     */
-    getSelectedField(current) {
-        if (current) {
-            const item = this._smartFilterFields.find(field => field.smart.id === current.ApiName);
-            return item ? item : this._smartFilterFields?.length > 0 ? this._smartFilterFields[0] : null;
-        }
-        else {
-            return this._smartFilterFields?.length > 0 ? this._smartFilterFields[0] : null;
-        }
-    }
-    convertSmartFilterComponentType(type) {
-        switch (type) {
-            case 'int':
-            case 'currency':
-            case 'real':
-            case 'percentage':
-                return 'number';
-            case 'date-time':
-                return 'date';
-            default:
-                return type;
-        }
-    }
-    /**
-     * creates a legacy output query
-     */
-    createOutputQuery() {
-        if (this._form.valid) {
-            const query = this._outputQueryService.generateQuery(this._form.value);
-            this._outputQuery$.next(query);
-        }
-    }
-}
-PepQueryStructureService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryStructureService, deps: [{ token: i0.ComponentFactoryResolver }, { token: PepOutputQueryService }, { token: PepQueryBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
-PepQueryStructureService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryStructureService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryStructureService, decorators: [{
-            type: Injectable
+const MAX_STRUCTURE_DEPTH = 3;
+class PepQueryStructureService {
+    constructor(_resolver, _outputQueryService, _queryBuilderService) {
+        this._resolver = _resolver;
+        this._outputQueryService = _outputQueryService;
+        this._queryBuilderService = _queryBuilderService;
+        this._outputQuery$ = new BehaviorSubject(null);
+        this._variableFields = {};
+        this._maxStructureDepth = MAX_STRUCTURE_DEPTH;
+        this.outputQuery$ = this._outputQuery$.asObservable();
+    }
+    set maxDepth(value) {
+        this._maxStructureDepth = value;
+    }
+    get maxDepth() {
+        return this._maxStructureDepth;
+    }
+    set fields(list) {
+        this._smartFilterFields = this._queryBuilderService.convertToSmartFilterFields(list);
+    }
+    get hasFields() {
+        return this._smartFilterFields?.length > 0;
+    }
+    set variableFields(list) {
+        if (list?.length) {
+            const typeMapper = new PepQueryBuilderTypeMap();
+            list.forEach(field => {
+                const fieldType = this.convertSmartFilterComponentType(typeMapper.getSmartFilterType(field.FieldType));
+                if (this.hasProperty(this._variableFields, fieldType)) {
+                    this._variableFields[fieldType].push(field.FieldID);
+                }
+                else {
+                    this._variableFields[fieldType] = [field.FieldID];
+                }
+            });
+        }
+    }
+    set form(value) {
+        this._form = value;
+    }
+    get form() {
+        return this._form;
+    }
+    /**
+     * builds a dynamic UI query structure
+     * might has a different structure than the query's due to parent-child elements merge
+     * @param query legacy query
+     * @param containerRef reference to root element
+     */
+    buildQueryStructure(query, containerRef) {
+        //update root operator        
+        if (this.hasProperty(query, 'ComplexId') &&
+            query?.Operation &&
+            query.Operation !== this._form.get('operator').value) {
+            this._form.get('operator').setValue(query.Operation);
+        }
+        this.flatten(this._form.get('operator').value, query, containerRef, this._form, 0);
+    }
+    /**
+    * checks if the object contains property
+    * @param obj object
+    * @param prop property name
+    * @returns true if contains, false otherwise
+    */
+    hasProperty(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+    /**
+     * a recursive function dynamically builds UI filters structure
+     * @param parentOperator parent legacy complex operator
+     * @param current child legacy object (either another complex or expression type)
+     * @param containerRef parent element
+     * @param parentForm parent form
+     */
+    flatten(parentOperator, current, containerRef, parentForm, depth) {
+        if (this.hasProperty(current, 'ComplexId')) {
+            const section = current;
+            if (parentOperator === current.Operation) {
+                this.flatten(current.Operation, section.LeftNode, containerRef, parentForm, depth);
+                this.flatten(current.Operation, section.RightNode, containerRef, parentForm, depth);
+            }
+            else {
+                const result = this.createSection(section.Operation, containerRef, parentForm, depth + 1);
+                this.flatten(section.Operation, section.LeftNode, result.containerRef, result.parentForm, depth + 1);
+                this.flatten(section.Operation, section.RightNode, result.containerRef, result.parentForm, depth + 1);
+            }
+        }
+        else if (this.hasProperty(current, 'ExpressionId')) {
+            this.createItem(current, containerRef, parentForm);
+        }
+    }
+    /**
+     * creates a container object of two or more child filter items
+     * @param operator AND/OR operator
+     * @param containerRef parent element
+     * @param parentForm parent form
+     * @param depth
+     * @returns an object containing the current element and current form
+     */
+    createSection(operator, containerRef, parentForm, depth) {
+        const factory = this._resolver.resolveComponentFactory(PepQueryBuilderSectionComponent);
+        const componentRef = containerRef.createComponent(factory);
+        // const sectionGroup = this._fb.group({
+        //     operator: this._fb.control(operator)
+        // });
+        const sectionGroup = new FormGroup({
+            operator: new FormControl(operator)
+        });
+        let counter = 1;
+        Object.keys(parentForm.controls).forEach(item => { if (item.includes('section')) {
+            counter++;
+        } });
+        const formKey = `section${counter}`;
+        parentForm.addControl(formKey, sectionGroup);
+        componentRef.instance.form = sectionGroup;
+        componentRef.instance.depth = {
+            current: depth,
+            max: this._maxStructureDepth
+        };
+        componentRef.instance.createSection.subscribe(() => {
+            const section = this.createSection(PepOperatorTypes.And, componentRef.instance.sectionContainer, sectionGroup, depth + 1);
+            this.createItem(null, section.containerRef, section.parentForm);
+        });
+        componentRef.instance.createItem.subscribe(() => {
+            this.createItem(null, componentRef.instance.sectionContainer, sectionGroup);
+        });
+        componentRef.instance.remove.subscribe(() => {
+            parentForm.removeControl(formKey);
+            componentRef.destroy();
+            this.createOutputQuery();
+        });
+        componentRef.instance.operatorChange.subscribe(() => {
+            this.createOutputQuery();
+        });
+        return {
+            containerRef: componentRef.instance.sectionContainer,
+            parentForm: sectionGroup
+        };
+    }
+    /**
+     * creates a component represents filter item (leaf element - has no childs)
+     * @param current filter legacy element
+     * @param containerRef parent element
+     * @param parentForm parent form
+     */
+    createItem(current, containerRef, parentForm) {
+        const factory = this._resolver.resolveComponentFactory(PepQueryBuilderItemComponent);
+        const componentRef = containerRef.createComponent(factory);
+        let counter = 1;
+        Object.keys(parentForm.controls).forEach(item => { if (item.includes('item')) {
+            counter++;
+        } });
+        const formKey = `item${counter}`;
+        componentRef.instance.formKey = formKey;
+        componentRef.instance.fields = this._smartFilterFields;
+        componentRef.instance.variableFields = this._variableFields;
+        const selectedField = this.getSelectedField(current);
+        if (selectedField) {
+            componentRef.instance.selected = selectedField;
+            if (current) {
+                componentRef.instance.filter = this._queryBuilderService.getFilter(current, selectedField.smart);
+            }
+        }
+        componentRef.instance.parentForm = parentForm;
+        componentRef.instance.filterChange.subscribe(() => {
+            this.createOutputQuery();
+        });
+        componentRef.instance.remove.subscribe(() => {
+            parentForm.removeControl(formKey);
+            componentRef.destroy();
+            this.createOutputQuery();
+        });
+    }
+    /**
+     * get smart filter field
+     * @param current filter legacy element
+     * @returns smart filter field, if not found returns the first field
+     */
+    getSelectedField(current) {
+        if (current) {
+            const item = this._smartFilterFields.find(field => field.smart.id === current.ApiName);
+            return item ? item : this._smartFilterFields?.length > 0 ? this._smartFilterFields[0] : null;
+        }
+        else {
+            return this._smartFilterFields?.length > 0 ? this._smartFilterFields[0] : null;
+        }
+    }
+    convertSmartFilterComponentType(type) {
+        switch (type) {
+            case 'int':
+            case 'currency':
+            case 'real':
+            case 'percentage':
+                return 'number';
+            case 'date-time':
+                return 'date';
+            default:
+                return type;
+        }
+    }
+    /**
+     * creates a legacy output query
+     */
+    createOutputQuery() {
+        if (this._form.valid) {
+            const query = this._outputQueryService.generateQuery(this._form.value);
+            this._outputQuery$.next(query);
+        }
+    }
+}
+PepQueryStructureService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryStructureService, deps: [{ token: i0.ComponentFactoryResolver }, { token: PepOutputQueryService }, { token: PepQueryBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
+PepQueryStructureService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryStructureService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryStructureService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: PepOutputQueryService }, { type: PepQueryBuilderService }]; } });
 
-class PepQueryBuilderComponent {
-    constructor(_fb, queryStructureService) {
-        this._fb = _fb;
-        this.queryStructureService = queryStructureService;
-        this._query = null;
-        this.queryChange = new EventEmitter();
-        this.formValidationChange = new EventEmitter();
-        this._lastFormValidStatus = true;
-        this.hasFields = false;
-        this.setupForm();
-        this.initDepth();
-        this._formSubscription$ = this.queryStructureService.form.valueChanges.subscribe((val) => {
-            if (this.queryStructureService.form.valid !== this._lastFormValidStatus) {
-                this._lastFormValidStatus = this.queryStructureService.form.valid;
-                this.formValidationChange.emit(this._lastFormValidStatus);
-            }
-        });
-        this._outputQuerySubscription$ = this.queryStructureService.outputQuery$.subscribe((outputQuery) => {
-            this.queryChange.emit(outputQuery);
-        });
-    }
-    set query(object) {
-        this._query = object;
-        this.loadQuery();
-    }
-    set fields(list) {
-        this.queryStructureService.fields = list;
-        this.hasFields = this.queryStructureService.hasFields;
-        this.loadQuery();
-    }
-    set variableFields(list) {
-        this.queryStructureService.variableFields = list;
-    }
-    set maxDepth(value) {
-        this.queryStructureService.maxDepth = value;
-    }
-    ngOnInit() {
-        //
-    }
-    setupForm() {
-        this.queryStructureService.form = this._fb.group({
-            operator: this._fb.control(PepOperatorTypes.And)
-        });
-    }
-    initDepth() {
-        this.depth = {
-            current: 0,
-            max: this.queryStructureService.maxDepth
-        };
-    }
-    /**
-     * builds UI query structure as soon as both the fields and query loads
-     */
-    loadQuery() {
-        if (this._query &&
-            this.queryStructureService.hasFields &&
-            this.root?.sectionContainer) {
-            this.queryStructureService.buildQueryStructure(this._query, this.root.sectionContainer);
-        }
-    }
-    onCreateSection() {
-        const section = this.queryStructureService.createSection(PepOperatorTypes.And, this.root.sectionContainer, this.queryStructureService.form, 1);
-        this.queryStructureService.createItem(null, section.containerRef, section.parentForm);
-    }
-    onCreateItem() {
-        this.queryStructureService.createItem(null, this.root.sectionContainer, this.queryStructureService.form);
-    }
-    onOperatorChange() {
-        this.queryStructureService.createOutputQuery();
-    }
-    ngOnDestroy() {
-        if (this._formSubscription$) {
-            this._formSubscription$.unsubscribe();
-        }
-        if (this._outputQuerySubscription$) {
-            this._outputQuerySubscription$.unsubscribe();
-        }
-    }
-}
-PepQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderComponent, deps: [{ token: i1.FormBuilder }, { token: PepQueryStructureService }], target: i0.ɵɵFactoryTarget.Component });
-PepQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepQueryBuilderComponent, selector: "pep-query-builder", inputs: { query: "query", fields: "fields", variableFields: "variableFields", maxDepth: "maxDepth" }, outputs: { queryChange: "queryChange", formValidationChange: "formValidationChange" }, providers: [PepQueryStructureService, PepTypeConvertorService, PepOutputQueryService], viewQueries: [{ propertyName: "root", first: true, predicate: ["rootContainer"], descendants: true, static: true }], ngImport: i0, template: "<pep-query-builder-section #rootContainer [form]=\"queryStructureService.form\" [depth]=\"depth\" [hasFields]=\"hasFields\"\n    (createSection)=\"onCreateSection()\" (createItem)=\"onCreateItem()\" (operatorChange)=\"onOperatorChange()\">\n</pep-query-builder-section>", styles: [""], dependencies: [{ kind: "component", type: PepQueryBuilderSectionComponent, selector: "pep-query-builder-section", inputs: ["form", "depth", "hasFields"], outputs: ["createSection", "createItem", "remove", "operatorChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-query-builder', providers: [PepQueryStructureService, PepTypeConvertorService, PepOutputQueryService], template: "<pep-query-builder-section #rootContainer [form]=\"queryStructureService.form\" [depth]=\"depth\" [hasFields]=\"hasFields\"\n    (createSection)=\"onCreateSection()\" (createItem)=\"onCreateItem()\" (operatorChange)=\"onOperatorChange()\">\n</pep-query-builder-section>" }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: PepQueryStructureService }]; }, propDecorators: { query: [{
-                type: Input
-            }], fields: [{
-                type: Input
-            }], variableFields: [{
-                type: Input
-            }], maxDepth: [{
-                type: Input
-            }], queryChange: [{
-                type: Output
-            }], formValidationChange: [{
-                type: Output
-            }], root: [{
-                type: ViewChild,
-                args: ['rootContainer', { static: true }]
+class PepQueryBuilderComponent {
+    constructor(_fb, queryStructureService) {
+        this._fb = _fb;
+        this.queryStructureService = queryStructureService;
+        this._query = null;
+        this.queryChange = new EventEmitter();
+        this.formValidationChange = new EventEmitter();
+        this._lastFormValidStatus = true;
+        this.hasFields = false;
+        this.setupForm();
+        this.initDepth();
+        this._formSubscription$ = this.queryStructureService.form.valueChanges.subscribe((val) => {
+            if (this.queryStructureService.form.valid !== this._lastFormValidStatus) {
+                this._lastFormValidStatus = this.queryStructureService.form.valid;
+                this.formValidationChange.emit(this._lastFormValidStatus);
+            }
+        });
+        this._outputQuerySubscription$ = this.queryStructureService.outputQuery$.subscribe((outputQuery) => {
+            this.queryChange.emit(outputQuery);
+        });
+    }
+    set query(object) {
+        this._query = object;
+        this.loadQuery();
+    }
+    set fields(list) {
+        this.queryStructureService.fields = list;
+        this.hasFields = this.queryStructureService.hasFields;
+        this.loadQuery();
+    }
+    set variableFields(list) {
+        this.queryStructureService.variableFields = list;
+    }
+    set maxDepth(value) {
+        this.queryStructureService.maxDepth = value;
+    }
+    ngOnInit() {
+        //
+    }
+    setupForm() {
+        this.queryStructureService.form = this._fb.group({
+            operator: this._fb.control(PepOperatorTypes.And)
+        });
+    }
+    initDepth() {
+        this.depth = {
+            current: 0,
+            max: this.queryStructureService.maxDepth
+        };
+    }
+    /**
+     * builds UI query structure as soon as both the fields and query loads
+     */
+    loadQuery() {
+        if (this._query &&
+            this.queryStructureService.hasFields &&
+            this.root?.sectionContainer) {
+            this.queryStructureService.buildQueryStructure(this._query, this.root.sectionContainer);
+        }
+    }
+    onCreateSection() {
+        const section = this.queryStructureService.createSection(PepOperatorTypes.And, this.root.sectionContainer, this.queryStructureService.form, 1);
+        this.queryStructureService.createItem(null, section.containerRef, section.parentForm);
+    }
+    onCreateItem() {
+        this.queryStructureService.createItem(null, this.root.sectionContainer, this.queryStructureService.form);
+    }
+    onOperatorChange() {
+        this.queryStructureService.createOutputQuery();
+    }
+    ngOnDestroy() {
+        if (this._formSubscription$) {
+            this._formSubscription$.unsubscribe();
+        }
+        if (this._outputQuerySubscription$) {
+            this._outputQuerySubscription$.unsubscribe();
+        }
+    }
+}
+PepQueryBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderComponent, deps: [{ token: i1.FormBuilder }, { token: PepQueryStructureService }], target: i0.ɵɵFactoryTarget.Component });
+PepQueryBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepQueryBuilderComponent, selector: "pep-query-builder", inputs: { query: "query", fields: "fields", variableFields: "variableFields", maxDepth: "maxDepth" }, outputs: { queryChange: "queryChange", formValidationChange: "formValidationChange" }, providers: [PepQueryStructureService, PepTypeConvertorService, PepOutputQueryService], viewQueries: [{ propertyName: "root", first: true, predicate: ["rootContainer"], descendants: true, static: true }], ngImport: i0, template: "<pep-query-builder-section #rootContainer [form]=\"queryStructureService.form\" [depth]=\"depth\" [hasFields]=\"hasFields\"\n    (createSection)=\"onCreateSection()\" (createItem)=\"onCreateItem()\" (operatorChange)=\"onOperatorChange()\">\n</pep-query-builder-section>", styles: [""], dependencies: [{ kind: "component", type: PepQueryBuilderSectionComponent, selector: "pep-query-builder-section", inputs: ["form", "depth", "hasFields"], outputs: ["createSection", "createItem", "remove", "operatorChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-query-builder', providers: [PepQueryStructureService, PepTypeConvertorService, PepOutputQueryService], template: "<pep-query-builder-section #rootContainer [form]=\"queryStructureService.form\" [depth]=\"depth\" [hasFields]=\"hasFields\"\n    (createSection)=\"onCreateSection()\" (createItem)=\"onCreateItem()\" (operatorChange)=\"onOperatorChange()\">\n</pep-query-builder-section>" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: PepQueryStructureService }]; }, propDecorators: { query: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], variableFields: [{
+                type: Input
+            }], maxDepth: [{
+                type: Input
+            }], queryChange: [{
+                type: Output
+            }], formValidationChange: [{
+                type: Output
+            }], root: [{
+                type: ViewChild,
+                args: ['rootContainer', { static: true }]
             }] } });
 
-class PepQueryBuilderModule {
-}
-PepQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, declarations: [PepQueryBuilderComponent,
-        PepQueryBuilderSectionComponent,
-        PepQueryBuilderItemComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        FlexLayoutModule,
-        PepSelectModule,
-        PepButtonModule,
-        PepGroupButtonsModule,
-        PepSmartFiltersModule], exports: [PepQueryBuilderComponent] });
-PepQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, providers: [
-        FormBuilder
-    ], imports: [CommonModule,
-        ReactiveFormsModule,
-        FlexLayoutModule,
-        PepSelectModule,
-        PepButtonModule,
-        PepGroupButtonsModule,
-        PepSmartFiltersModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FlexLayoutModule,
-                        PepSelectModule,
-                        PepButtonModule,
-                        PepGroupButtonsModule,
-                        PepSmartFiltersModule
-                    ],
-                    exports: [
-                        PepQueryBuilderComponent
-                    ],
-                    declarations: [
-                        PepQueryBuilderComponent,
-                        PepQueryBuilderSectionComponent,
-                        PepQueryBuilderItemComponent
-                    ],
-                    providers: [
-                        FormBuilder
-                    ]
-                }]
+class PepQueryBuilderModule {
+}
+PepQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, declarations: [PepQueryBuilderComponent,
+        PepQueryBuilderSectionComponent,
+        PepQueryBuilderItemComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FlexLayoutModule,
+        PepSelectModule,
+        PepButtonModule,
+        PepGroupButtonsModule,
+        PepSmartFiltersModule], exports: [PepQueryBuilderComponent] });
+PepQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, providers: [
+        FormBuilder
+    ], imports: [CommonModule,
+        ReactiveFormsModule,
+        FlexLayoutModule,
+        PepSelectModule,
+        PepButtonModule,
+        PepGroupButtonsModule,
+        PepSmartFiltersModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FlexLayoutModule,
+                        PepSelectModule,
+                        PepButtonModule,
+                        PepGroupButtonsModule,
+                        PepSmartFiltersModule
+                    ],
+                    exports: [
+                        PepQueryBuilderComponent
+                    ],
+                    declarations: [
+                        PepQueryBuilderComponent,
+                        PepQueryBuilderSectionComponent,
+                        PepQueryBuilderItemComponent
+                    ],
+                    providers: [
+                        FormBuilder
+                    ]
+                }]
         }] });
 
-/*
- * Public API Surface of ngx-lib/query-builder
+/*
+ * Public API Surface of ngx-lib/query-builder
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepQueryBuilderComponent, PepQueryBuilderModule, PepQueryBuilderService };