@pepperi-addons/ngx-lib 0.4.2-beta.31 → 0.4.2-beta.310

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

@@ -1,20 +1,22 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, ViewContainerRef, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import * as i7 from '@pepperi-addons/ngx-lib/smart-filters';
+import * as i8 from '@pepperi-addons/ngx-lib/smart-filters';
 import { PepSmartFilterOperators, PepSmartFilterVariableOperators, PepSmartFilterAdditionalOperators, PepSmartFilterOperatorUnits, createSmartFilter, createSmartFilterField, PepSmartFiltersModule } from '@pepperi-addons/ngx-lib/smart-filters';
-import * as i5$1 from '@pepperi-addons/ngx-lib/select';
+import * as i6 from '@pepperi-addons/ngx-lib/select';
 import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
-import * as i4 from '@pepperi-addons/ngx-lib/button';
+import * as i4$1 from '@pepperi-addons/ngx-lib/button';
 import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
 import * as i5 from '@pepperi-addons/ngx-lib/group-buttons';
 import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
 import { BehaviorSubject } from 'rxjs';
-import * as i3$1 from '@angular/flex-layout/flex';
+import * as i3 from '@angular/flex-layout/flex';
+import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
+import { pepIconSystemBin, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
 
 class PepTypeConvertorService {
     constructor() {
@@ -97,10 +99,10 @@ class PepQueryBuilderSectionComponent {
     }
 }
 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"] }] });
+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\" 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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.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.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$1.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"] }]
+            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\" 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: [{
@@ -121,9 +123,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class PepQueryBuilderItemComponent {
-    constructor(_fb, typeConvertorService) {
+    constructor(_fb, typeConvertorService, queryStructureService) {
         this._fb = _fb;
         this.typeConvertorService = typeConvertorService;
+        this.queryStructureService = queryStructureService;
         this._fields = [];
         this._options = [];
         this._selectedField = null;
@@ -161,7 +164,7 @@ class PepQueryBuilderItemComponent {
         }
     }
     ngOnInit() {
-        //
+        //this.variableFields = this.queryStructureService.variableFields;
     }
     get f() {
         return this.form.controls;
@@ -213,12 +216,12 @@ class PepQueryBuilderItemComponent {
         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", "typeaheadDebounceInterval"], outputs: ["valueChange"] }, { 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" }] });
+PepQueryBuilderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderItemComponent, deps: [{ token: i1.FormBuilder }, { token: PepTypeConvertorService }, { token: PepQueryStructureService }], 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=\"'text'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.text\" [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=\"'multi-select'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.text\" [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\" 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.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.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.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: i6.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i4$1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i8.PepTextFilterComponent, selector: "pep-text-filter" }, { kind: "component", type: i8.PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: ["options"] }, { kind: "component", type: i8.PepDateFilterComponent, selector: "pep-date-filter" }, { kind: "component", type: i8.PepMultiSelectFilterComponent, selector: "pep-multi-select-filter" }, { kind: "component", type: i8.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: [{
+            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=\"'text'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.text\" [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=\"'multi-select'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\"\n                        [variableField]=\"variableFields?.text\" [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\" 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 }, { type: PepQueryStructureService }]; }, propDecorators: { formKey: [{
                 type: Input
             }], fields: [{
                 type: Input
@@ -271,41 +274,50 @@ var PepOperatorTypes;
 
 const Equals = {
     legacy: 'IsEqual',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.Equals,
-    type: ['boolean', 'int', 'text']
+    type: ['boolean', 'int', 'text', 'real']
 };
 const EqualsVariable = {
-    legacy: 'IsEqualVariable',
+    legacy: 'IsEqual',
+    valueType: 'Dynamic',
     smartFilter: PepSmartFilterVariableOperators.EqualsToVariable,
-    type: ['boolean', 'int', 'text', 'multi-select']
+    type: ['boolean', 'int', 'text'],
+    fieldType: ['String', 'Bool', 'Integer']
 };
 const NotEqual = {
     legacy: 'IsNotEqual',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.NotEqual,
     type: null
 };
 const NotEqualsVariable = {
-    legacy: 'IsNotEqualVariable',
+    legacy: 'IsNotEqual',
+    valueType: 'Dynamic',
     smartFilter: PepSmartFilterVariableOperators.NotEqualsToVariable,
-    type: ['boolean', 'multi-select']
+    type: ['boolean']
 };
 const LessThan = {
     legacy: '<',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.LessThan,
     type: null
 };
-const LessThanVarible = {
-    legacy: 'LessThanVarible',
+const LessThanVariable = {
+    legacy: '<',
+    valueType: 'Dynamic',
     smartFilter: PepSmartFilterVariableOperators.LessThanVariable,
     type: null
 };
 const GreaterThan = {
     legacy: '>',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.GreaterThan,
     type: null
 };
-const GreaterThanVarible = {
-    legacy: 'GreaterThanVarible',
+const GreaterThanVariable = {
+    legacy: '>',
+    valueType: 'Dynamic',
     smartFilter: PepSmartFilterVariableOperators.GreaterThanVariable,
     type: null
 };
@@ -334,159 +346,142 @@ const LessThanOrEquals: IPepQueryBuilderOperator = {
 }; */
 const NumberRange = {
     legacy: 'Between',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.NumberRange,
     type: ['int']
 };
 const Contains = {
     legacy: 'Contains',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.Contains,
     type: null
 };
 const BeginsWith = {
-    legacy: 'BeginsWith',
+    legacy: 'StartWith',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.BeginsWith,
     type: null
 };
 const EndsWith = {
-    legacy: 'EndsWith',
+    legacy: 'EndWith',
+    valueType: 'Static',
     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',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.InTheLast,
     type: null
 };
 const InTheLastCalendar = {
     legacy: 'InTheLastCalendar',
+    valueType: 'Static',
     smartFilter: PepSmartFilterAdditionalOperators.InTheLastCalendar,
     type: null
 };
 /*
 const InTheLastVariable: IPepQueryBuilderOperator = {
-    legacy: 'InTheLastVariable',
+    legacy: 'InTheLast',
+    valueType: 'Dynamic',
     smartFilter: PepSmartFilterVariableOperators.InTheLastVariable,
     type: null
 } */
 const NotInTheLast = {
     legacy: 'NotInTheLast',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.NotInTheLast,
     type: null
 };
 const NotInTheLastCalendar = {
     legacy: 'NotInTheLastCalendar',
+    valueType: 'Static',
     smartFilter: PepSmartFilterAdditionalOperators.NotInTheLastCalendar,
     type: null
 };
 const Today = {
     legacy: 'Today',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.Today,
     type: null
 };
 const ThisWeek = {
     legacy: 'ThisWeek',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.ThisWeek,
     type: null
 };
 const ThisMonth = {
     legacy: 'ThisMonth',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.ThisMonth,
     type: null
 };
 const DateRange = {
     legacy: 'Between',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.DateRange,
     type: ['date-time']
 };
 const dateRangeVariable = {
-    legacy: 'BetweenVariable',
+    legacy: 'Between',
+    valueType: 'Dynamic',
     smartFilter: PepSmartFilterVariableOperators.DateRangeVariable,
     type: ['date-time']
 };
 const DueIn = {
     legacy: 'DueIn',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.DueIn,
     type: null
 };
 const NotDueIn = {
     legacy: 'NotDueIn',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.NotDueIn,
     type: null
 };
 const On = {
     legacy: 'On',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.On,
     type: null
 };
 const IsEmpty = {
     legacy: 'IsEmpty',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.IsEmpty,
     type: null
 };
 const IsNotEmpty = {
     legacy: 'IsNotEmpty',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.IsNotEmpty,
     type: null
 };
 const In = {
     legacy: 'IsEqual',
+    valueType: 'Static',
     smartFilter: PepSmartFilterOperators.In,
     type: ['multi-select']
 };
+const InVariable = {
+    legacy: 'IsEqual',
+    valueType: 'Dynamic',
+    smartFilter: PepSmartFilterVariableOperators.InVariable,
+    type: ['multi-select', 'text'],
+    fieldType: ['MultipleStringValues']
+};
 const PepQueryBuilderOperators = [
     Equals,
     EqualsVariable,
     NotEqual,
     NotEqualsVariable,
     LessThan,
-    LessThanVarible,
+    LessThanVariable,
     //   LessThanOrEquals,
     GreaterThan,
-    GreaterThanVarible,
+    GreaterThanVariable,
     //   GreaterThanOrEquals,
     NumberRange,
     Contains,
@@ -509,7 +504,8 @@ const PepQueryBuilderOperators = [
     On,
     IsEmpty,
     IsNotEmpty,
-    In
+    In,
+    InVariable
 ];
 /**
  * gets a smart filter operator item
@@ -517,9 +513,15 @@ const PepQueryBuilderOperators = [
  * @param type smart filter's type
  * @returns smart filter operator item
  */
-function getSmartFilterOperator(operator, type) {
+function getSmartFilterOperator(operator, type, valueType, fieldType = null) {
     const smartFilterOperator = PepQueryBuilderOperators.find(item => item.legacy === operator &&
-        (item.type === null || item.type.includes(type)));
+        item.valueType === valueType &&
+        (item.type === null || item.type.includes(type)) &&
+        (fieldType == null || item.fieldType === undefined || item.fieldType?.includes(fieldType)));
+    /*
+     FieldType: (current[key].smart.operator.id === 'inv' &&
+                                current[key].smart.fieldType === 'text') ? 'MultipleStringValues' : current[key].query.fieldType,
+     */
     return smartFilterOperator ? smartFilterOperator.smartFilter : null;
 }
 /**
@@ -533,6 +535,17 @@ function getLegacyOperator(operator, type) {
         (item.type === null || item.type.includes(type)));
     return legacyOperator ? legacyOperator.legacy : null;
 }
+/**
+ * gets a value type of the operator value
+ * @param operator smart filter operator item
+ * @param type smart filter's type
+ * @returns value type operator value
+ */
+function getValueTypeOperator(operator, type) {
+    const valueType = PepQueryBuilderOperators.find(item => item.smartFilter === operator &&
+        (item.type === null || item.type.includes(type)));
+    return valueType ? valueType.valueType : 'Static';
+}
 
 const Days = {
     legacy: 'Days',
@@ -607,8 +620,10 @@ class PepOutputQueryService {
                 section = this.addToSection(section, {
                     ExpressionId: (this._expressionIdCounter++).toString(),
                     ApiName: current[key].smart.fieldId,
-                    FieldType: current[key].query.fieldType,
+                    FieldType: (current[key].smart.operator.id === 'inv' &&
+                        current[key].smart.fieldType === 'text') ? 'MultipleStringValues' : current[key].query.fieldType,
                     Operation: getLegacyOperator(current[key].smart.operator, current[key].smart.fieldType),
+                    ValueType: getValueTypeOperator(current[key].smart.operator, current[key].smart.fieldType),
                     Values: this.getItemValues(current[key].smart)
                 }, current.operator);
             }
@@ -695,7 +710,7 @@ class PepQueryBuilderService {
      * @returns smart filter object
      */
     getFilter(current, field) {
-        const operator = getSmartFilterOperator(current.Operation, field.type);
+        const operator = getSmartFilterOperator(current.Operation, field.type, current.ValueType || 'Static', current.FieldType || null);
         if (operator) {
             const filterValues = this.getFilterValues(current, operator, field);
             return createSmartFilter(current.ApiName, operator, filterValues.first, filterValues.second, filterValues.operationUnit);
@@ -789,6 +804,7 @@ class PepQueryStructureService {
         this._outputQuery$ = new BehaviorSubject(null);
         this._variableFields = {};
         this._maxStructureDepth = MAX_STRUCTURE_DEPTH;
+        this._cmpRefMap = new Map();
         this.outputQuery$ = this._outputQuery$.asObservable();
     }
     set maxDepth(value) {
@@ -809,13 +825,22 @@ class PepQueryStructureService {
             list.forEach(field => {
                 const fieldType = this.convertSmartFilterComponentType(typeMapper.getSmartFilterType(field.FieldType));
                 if (this.hasProperty(this._variableFields, fieldType)) {
-                    this._variableFields[fieldType].push(field.FieldID);
+                    if (!this._variableFields[fieldType].includes(field.FieldID)) {
+                        this._variableFields[fieldType].push(field.FieldID);
+                    }
                 }
                 else {
                     this._variableFields[fieldType] = [field.FieldID];
                 }
             });
         }
+        this._cmpRefMap.forEach((value, key) => {
+            if (value.instance.variableFields) {
+                Object.keys(value.instance.variableFields).forEach(function (key, index) {
+                    value.instance.variableFields[key] = JSON.parse(JSON.stringify(value.instance.variableFields[key]));
+                });
+            }
+        });
     }
     set form(value) {
         this._form = value;
@@ -830,6 +855,18 @@ class PepQueryStructureService {
      * @param containerRef reference to root element
      */
     buildQueryStructure(query, containerRef) {
+        // Remove all the components from the query builder.
+        this._cmpRefMap.forEach((value, key) => {
+            // console.log(key, value);
+            // value.instance.remove();
+            if (value.instance.parentForm) {
+                value.instance.parentForm.removeControl(key);
+            }
+            value.destroy();
+            this._cmpRefMap.delete(key);
+        });
+        // Clear containerRef
+        containerRef.clear();
         //update root operator        
         if (this.hasProperty(query, 'ComplexId') &&
             query?.Operation &&
@@ -910,10 +947,15 @@ class PepQueryStructureService {
             parentForm.removeControl(formKey);
             componentRef.destroy();
             this.createOutputQuery();
+            if (this._cmpRefMap.has(formKey)) {
+                this._cmpRefMap.delete(formKey);
+            }
         });
         componentRef.instance.operatorChange.subscribe(() => {
             this.createOutputQuery();
         });
+        // Add this to remove all the components when fields changes.
+        this._cmpRefMap.set(formKey, componentRef);
         return {
             containerRef: componentRef.instance.sectionContainer,
             parentForm: sectionGroup
@@ -951,7 +993,12 @@ class PepQueryStructureService {
             parentForm.removeControl(formKey);
             componentRef.destroy();
             this.createOutputQuery();
+            if (this._cmpRefMap.has(formKey)) {
+                this._cmpRefMap.delete(formKey);
+            }
         });
+        // Add this to remove all the components when fields changes.
+        this._cmpRefMap.set(formKey, componentRef);
     }
     /**
      * get smart filter field
@@ -1098,8 +1145,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class PepQueryBuilderModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemBin,
+        ]);
+    }
 }
-PepQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepQueryBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, deps: [{ token: i1$1.PepIconRegistry }], 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,
@@ -1107,6 +1160,7 @@ PepQueryBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         FlexLayoutModule,
         PepSelectModule,
         PepButtonModule,
+        PepIconModule,
         PepGroupButtonsModule,
         PepSmartFiltersModule], exports: [PepQueryBuilderComponent] });
 PepQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, providers: [
@@ -1116,6 +1170,7 @@ PepQueryBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         FlexLayoutModule,
         PepSelectModule,
         PepButtonModule,
+        PepIconModule,
         PepGroupButtonsModule,
         PepSmartFiltersModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepQueryBuilderModule, decorators: [{
@@ -1127,6 +1182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         FlexLayoutModule,
                         PepSelectModule,
                         PepButtonModule,
+                        PepIconModule,
                         PepGroupButtonsModule,
                         PepSmartFiltersModule
                     ],
@@ -1142,7 +1198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         FormBuilder
                     ]
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
 
 /*
  * Public API Surface of ngx-lib/query-builder