@pepperi-addons/ngx-lib 0.3.15-beta.60 → 0.3.15-beta.61

package/bundles/pepperi-addons-ngx-lib-query-builder.umd.js

@@ -26,1213 +26,1213 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
 
-    var Equals = {
-        legacy: 'IsEqual',
-        smartFilter: smartFilters.PepSmartFilterOperators.Equals,
-        type: ['boolean', 'int', 'text']
-    };
-    var EqualsVariable = {
-        legacy: 'IsEqualVariable',
-        smartFilter: smartFilters.PepSmartFilterVariableOperators.EqualsToVariable,
-        type: ['boolean', 'int', 'text', 'multi-select']
-    };
-    var NotEqual = {
-        legacy: 'IsNotEqual',
-        smartFilter: smartFilters.PepSmartFilterOperators.NotEqual,
-        type: null
-    };
-    var NotEqualsVariable = {
-        legacy: 'IsNotEqualVariable',
-        smartFilter: smartFilters.PepSmartFilterVariableOperators.NotEqualsToVariable,
-        type: ['boolean', 'multi-select']
-    };
-    var LessThan = {
-        legacy: '<',
-        smartFilter: smartFilters.PepSmartFilterOperators.LessThan,
-        type: null
-    };
-    var LessThanVarible = {
-        legacy: 'LessThanVarible',
-        smartFilter: smartFilters.PepSmartFilterVariableOperators.LessThanVariable,
-        type: null
-    };
-    var GreaterThan = {
-        legacy: '>',
-        smartFilter: smartFilters.PepSmartFilterOperators.GreaterThan,
-        type: null
-    };
-    var GreaterThanVarible = {
-        legacy: 'GreaterThanVarible',
-        smartFilter: smartFilters.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'
-        }
-    }; */
-    var NumberRange = {
-        legacy: 'Between',
-        smartFilter: smartFilters.PepSmartFilterOperators.NumberRange,
-        type: ['int']
-    };
-    var Contains = {
-        legacy: 'Contains',
-        smartFilter: smartFilters.PepSmartFilterOperators.Contains,
-        type: null
-    };
-    var BeginsWith = {
-        legacy: 'BeginsWith',
-        smartFilter: smartFilters.PepSmartFilterOperators.BeginsWith,
-        type: null
-    };
-    var EndsWith = {
-        legacy: 'EndsWith',
-        smartFilter: smartFilters.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'
-        }
-    }; */
-    var InTheLast = {
-        legacy: 'InTheLast',
-        smartFilter: smartFilters.PepSmartFilterOperators.InTheLast,
-        type: null
-    };
-    var InTheLastCalendar = {
-        legacy: 'InTheLastCalendar',
-        smartFilter: smartFilters.PepSmartFilterAdditionalOperators.InTheLastCalendar,
-        type: null
-    };
-    /*
-    const InTheLastVariable: IPepQueryBuilderOperator = {
-        legacy: 'InTheLastVariable',
-        smartFilter: PepSmartFilterVariableOperators.InTheLastVariable,
-        type: null
-    } */
-    var NotInTheLast = {
-        legacy: 'NotInTheLast',
-        smartFilter: smartFilters.PepSmartFilterOperators.NotInTheLast,
-        type: null
-    };
-    var NotInTheLastCalendar = {
-        legacy: 'NotInTheLastCalendar',
-        smartFilter: smartFilters.PepSmartFilterAdditionalOperators.NotInTheLastCalendar,
-        type: null
-    };
-    var Today = {
-        legacy: 'Today',
-        smartFilter: smartFilters.PepSmartFilterOperators.Today,
-        type: null
-    };
-    var ThisWeek = {
-        legacy: 'ThisWeek',
-        smartFilter: smartFilters.PepSmartFilterOperators.ThisWeek,
-        type: null
-    };
-    var ThisMonth = {
-        legacy: 'ThisMonth',
-        smartFilter: smartFilters.PepSmartFilterOperators.ThisMonth,
-        type: null
-    };
-    var DateRange = {
-        legacy: 'Between',
-        smartFilter: smartFilters.PepSmartFilterOperators.DateRange,
-        type: ['date-time']
-    };
-    var dateRangeVariable = {
-        legacy: 'BetweenVariable',
-        smartFilter: smartFilters.PepSmartFilterVariableOperators.DateRangeVariable,
-        type: ['date-time']
-    };
-    var DueIn = {
-        legacy: 'DueIn',
-        smartFilter: smartFilters.PepSmartFilterOperators.DueIn,
-        type: null
-    };
-    var NotDueIn = {
-        legacy: 'NotDueIn',
-        smartFilter: smartFilters.PepSmartFilterOperators.NotDueIn,
-        type: null
-    };
-    var On = {
-        legacy: 'On',
-        smartFilter: smartFilters.PepSmartFilterOperators.On,
-        type: null
-    };
-    var IsEmpty = {
-        legacy: 'IsEmpty',
-        smartFilter: smartFilters.PepSmartFilterOperators.IsEmpty,
-        type: null
-    };
-    var IsNotEmpty = {
-        legacy: 'IsNotEmpty',
-        smartFilter: smartFilters.PepSmartFilterOperators.IsNotEmpty,
-        type: null
-    };
-    var In = {
-        legacy: 'IsEqual',
-        smartFilter: smartFilters.PepSmartFilterOperators.In,
-        type: ['multi-select']
-    };
-    var 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) {
-        var smartFilterOperator = PepQueryBuilderOperators.find(function (item) { return 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) {
-        var legacyOperator = PepQueryBuilderOperators.find(function (item) { return item.smartFilter === operator &&
-            (item.type === null || item.type.includes(type)); });
-        return legacyOperator ? legacyOperator.legacy : null;
+    var Equals = {
+        legacy: 'IsEqual',
+        smartFilter: smartFilters.PepSmartFilterOperators.Equals,
+        type: ['boolean', 'int', 'text']
+    };
+    var EqualsVariable = {
+        legacy: 'IsEqualVariable',
+        smartFilter: smartFilters.PepSmartFilterVariableOperators.EqualsToVariable,
+        type: ['boolean', 'int', 'text', 'multi-select']
+    };
+    var NotEqual = {
+        legacy: 'IsNotEqual',
+        smartFilter: smartFilters.PepSmartFilterOperators.NotEqual,
+        type: null
+    };
+    var NotEqualsVariable = {
+        legacy: 'IsNotEqualVariable',
+        smartFilter: smartFilters.PepSmartFilterVariableOperators.NotEqualsToVariable,
+        type: ['boolean', 'multi-select']
+    };
+    var LessThan = {
+        legacy: '<',
+        smartFilter: smartFilters.PepSmartFilterOperators.LessThan,
+        type: null
+    };
+    var LessThanVarible = {
+        legacy: 'LessThanVarible',
+        smartFilter: smartFilters.PepSmartFilterVariableOperators.LessThanVariable,
+        type: null
+    };
+    var GreaterThan = {
+        legacy: '>',
+        smartFilter: smartFilters.PepSmartFilterOperators.GreaterThan,
+        type: null
+    };
+    var GreaterThanVarible = {
+        legacy: 'GreaterThanVarible',
+        smartFilter: smartFilters.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'
+        }
+    }; */
+    var NumberRange = {
+        legacy: 'Between',
+        smartFilter: smartFilters.PepSmartFilterOperators.NumberRange,
+        type: ['int']
+    };
+    var Contains = {
+        legacy: 'Contains',
+        smartFilter: smartFilters.PepSmartFilterOperators.Contains,
+        type: null
+    };
+    var BeginsWith = {
+        legacy: 'BeginsWith',
+        smartFilter: smartFilters.PepSmartFilterOperators.BeginsWith,
+        type: null
+    };
+    var EndsWith = {
+        legacy: 'EndsWith',
+        smartFilter: smartFilters.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'
+        }
+    }; */
+    var InTheLast = {
+        legacy: 'InTheLast',
+        smartFilter: smartFilters.PepSmartFilterOperators.InTheLast,
+        type: null
+    };
+    var InTheLastCalendar = {
+        legacy: 'InTheLastCalendar',
+        smartFilter: smartFilters.PepSmartFilterAdditionalOperators.InTheLastCalendar,
+        type: null
+    };
+    /*
+    const InTheLastVariable: IPepQueryBuilderOperator = {
+        legacy: 'InTheLastVariable',
+        smartFilter: PepSmartFilterVariableOperators.InTheLastVariable,
+        type: null
+    } */
+    var NotInTheLast = {
+        legacy: 'NotInTheLast',
+        smartFilter: smartFilters.PepSmartFilterOperators.NotInTheLast,
+        type: null
+    };
+    var NotInTheLastCalendar = {
+        legacy: 'NotInTheLastCalendar',
+        smartFilter: smartFilters.PepSmartFilterAdditionalOperators.NotInTheLastCalendar,
+        type: null
+    };
+    var Today = {
+        legacy: 'Today',
+        smartFilter: smartFilters.PepSmartFilterOperators.Today,
+        type: null
+    };
+    var ThisWeek = {
+        legacy: 'ThisWeek',
+        smartFilter: smartFilters.PepSmartFilterOperators.ThisWeek,
+        type: null
+    };
+    var ThisMonth = {
+        legacy: 'ThisMonth',
+        smartFilter: smartFilters.PepSmartFilterOperators.ThisMonth,
+        type: null
+    };
+    var DateRange = {
+        legacy: 'Between',
+        smartFilter: smartFilters.PepSmartFilterOperators.DateRange,
+        type: ['date-time']
+    };
+    var dateRangeVariable = {
+        legacy: 'BetweenVariable',
+        smartFilter: smartFilters.PepSmartFilterVariableOperators.DateRangeVariable,
+        type: ['date-time']
+    };
+    var DueIn = {
+        legacy: 'DueIn',
+        smartFilter: smartFilters.PepSmartFilterOperators.DueIn,
+        type: null
+    };
+    var NotDueIn = {
+        legacy: 'NotDueIn',
+        smartFilter: smartFilters.PepSmartFilterOperators.NotDueIn,
+        type: null
+    };
+    var On = {
+        legacy: 'On',
+        smartFilter: smartFilters.PepSmartFilterOperators.On,
+        type: null
+    };
+    var IsEmpty = {
+        legacy: 'IsEmpty',
+        smartFilter: smartFilters.PepSmartFilterOperators.IsEmpty,
+        type: null
+    };
+    var IsNotEmpty = {
+        legacy: 'IsNotEmpty',
+        smartFilter: smartFilters.PepSmartFilterOperators.IsNotEmpty,
+        type: null
+    };
+    var In = {
+        legacy: 'IsEqual',
+        smartFilter: smartFilters.PepSmartFilterOperators.In,
+        type: ['multi-select']
+    };
+    var 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) {
+        var smartFilterOperator = PepQueryBuilderOperators.find(function (item) { return 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) {
+        var legacyOperator = PepQueryBuilderOperators.find(function (item) { return item.smartFilter === operator &&
+            (item.type === null || item.type.includes(type)); });
+        return legacyOperator ? legacyOperator.legacy : null;
     }
 
-    var PepQueryBuilderTypeMap = /** @class */ (function () {
-        function PepQueryBuilderTypeMap() {
-            this.loadTypes();
-        }
-        PepQueryBuilderTypeMap.prototype.loadTypes = function () {
-            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
-         */
-        PepQueryBuilderTypeMap.prototype.getSmartFilterType = function (key) {
-            var item = this.map.get(key);
-            return item ? item : null;
-        };
-        return PepQueryBuilderTypeMap;
+    var PepQueryBuilderTypeMap = /** @class */ (function () {
+        function PepQueryBuilderTypeMap() {
+            this.loadTypes();
+        }
+        PepQueryBuilderTypeMap.prototype.loadTypes = function () {
+            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
+         */
+        PepQueryBuilderTypeMap.prototype.getSmartFilterType = function (key) {
+            var item = this.map.get(key);
+            return item ? item : null;
+        };
+        return PepQueryBuilderTypeMap;
     }());
 
-    var Days = {
-        legacy: 'Days',
-        smartFilter: smartFilters.PepSmartFilterOperatorUnits.Days
-    };
-    var Weeks = {
-        legacy: 'Weeks',
-        smartFilter: smartFilters.PepSmartFilterOperatorUnits.Weeks
-    };
-    var Months = {
-        legacy: 'Months',
-        smartFilter: smartFilters.PepSmartFilterOperatorUnits.Months
-    };
-    var Years = {
-        legacy: 'Years',
-        smartFilter: smartFilters.PepSmartFilterOperatorUnits.Years
-    };
-    var 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) {
-        var smartFilterOperationUnit = PepQueryBuilderOperationUnit.find(function (unit) { return 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) {
-        var legacyOperationUnit = PepQueryBuilderOperationUnit.find(function (unit) { return unit.smartFilter === operationUnit; });
-        return legacyOperationUnit ? legacyOperationUnit.legacy : null;
+    var Days = {
+        legacy: 'Days',
+        smartFilter: smartFilters.PepSmartFilterOperatorUnits.Days
+    };
+    var Weeks = {
+        legacy: 'Weeks',
+        smartFilter: smartFilters.PepSmartFilterOperatorUnits.Weeks
+    };
+    var Months = {
+        legacy: 'Months',
+        smartFilter: smartFilters.PepSmartFilterOperatorUnits.Months
+    };
+    var Years = {
+        legacy: 'Years',
+        smartFilter: smartFilters.PepSmartFilterOperatorUnits.Years
+    };
+    var 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) {
+        var smartFilterOperationUnit = PepQueryBuilderOperationUnit.find(function (unit) { return 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) {
+        var legacyOperationUnit = PepQueryBuilderOperationUnit.find(function (unit) { return unit.smartFilter === operationUnit; });
+        return legacyOperationUnit ? legacyOperationUnit.legacy : null;
     }
 
-    var PepQueryBuilderService = /** @class */ (function () {
-        function PepQueryBuilderService() {
-            //
-        }
-        /**
-         * creates a smart filter object
-         * @param current filter legacy element
-         * @param field filter's selected field
-         * @returns smart filter object
-         */
-        PepQueryBuilderService.prototype.getFilter = function (current, field) {
-            var operator = getSmartFilterOperator(current.Operation, field.type);
-            if (operator) {
-                var filterValues = this.getFilterValues(current, operator, field);
-                return smartFilters.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
-         */
-        PepQueryBuilderService.prototype.convertToSmartFilterFields = function (fields) {
-            if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
-                var typeMapper_1 = new PepQueryBuilderTypeMap();
-                return fields.map(function (field) {
-                    var _a;
-                    return {
-                        smart: smartFilters.createSmartFilterField({
-                            id: field.FieldID,
-                            name: field.Title,
-                            options: (_a = field.OptionalValues) === null || _a === void 0 ? void 0 : _a.map(function (option) {
-                                return {
-                                    key: option.Key,
-                                    value: option.Value
-                                };
-                            })
-                        }, typeMapper_1.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
-         */
-        PepQueryBuilderService.prototype.getFilterValues = function (current, operator, field) {
-            var _a, _b, _c, _d, _e;
-            var data = {
-                first: null,
-                second: null,
-                operationUnit: null
-            };
-            if (operator === smartFilters.PepSmartFilterOperators.In) { //multi select                        
-                //filter keys don't exist on field options
-                data.first = ((_a = current === null || current === void 0 ? void 0 : current.Values) === null || _a === void 0 ? void 0 : _a.length) > 0 ? current.Values.filter(function (item) {
-                    return field.options.find(function (option) { return option.key === item; });
-                }) : null;
-            }
-            else if (operator === smartFilters.PepSmartFilterOperators.InTheLast ||
-                operator === smartFilters.PepSmartFilterAdditionalOperators.InTheLastCalendar ||
-                operator === smartFilters.PepSmartFilterOperators.NotInTheLast ||
-                operator === smartFilters.PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
-                operator === smartFilters.PepSmartFilterOperators.DueIn ||
-                operator === smartFilters.PepSmartFilterOperators.NotDueIn) { //operation unit
-                data.first = ((_b = current === null || current === void 0 ? void 0 : current.Values) === null || _b === void 0 ? void 0 : _b.length) > 0 ? current.Values[0] : null;
-                if (((_c = current === null || current === void 0 ? void 0 : current.Values) === null || _c === void 0 ? void 0 : _c.length) === 2) {
-                    data.operationUnit = getSmartFilterOperationUnit(current.Values[1]);
-                }
-            }
-            else {
-                data.first = ((_d = current === null || current === void 0 ? void 0 : current.Values) === null || _d === void 0 ? void 0 : _d.length) > 0 ? current.Values[0] : null;
-                data.second = ((_e = current === null || current === void 0 ? void 0 : current.Values) === null || _e === void 0 ? void 0 : _e.length) === 2 ? current.Values[1] : null;
-            }
-            return data;
-        };
-        return PepQueryBuilderService;
-    }());
-    PepQueryBuilderService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PepQueryBuilderService_Factory() { return new PepQueryBuilderService(); }, token: PepQueryBuilderService, providedIn: "root" });
-    PepQueryBuilderService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
+    var PepQueryBuilderService = /** @class */ (function () {
+        function PepQueryBuilderService() {
+            //
+        }
+        /**
+         * creates a smart filter object
+         * @param current filter legacy element
+         * @param field filter's selected field
+         * @returns smart filter object
+         */
+        PepQueryBuilderService.prototype.getFilter = function (current, field) {
+            var operator = getSmartFilterOperator(current.Operation, field.type);
+            if (operator) {
+                var filterValues = this.getFilterValues(current, operator, field);
+                return smartFilters.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
+         */
+        PepQueryBuilderService.prototype.convertToSmartFilterFields = function (fields) {
+            if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
+                var typeMapper_1 = new PepQueryBuilderTypeMap();
+                return fields.map(function (field) {
+                    var _a;
+                    return {
+                        smart: smartFilters.createSmartFilterField({
+                            id: field.FieldID,
+                            name: field.Title,
+                            options: (_a = field.OptionalValues) === null || _a === void 0 ? void 0 : _a.map(function (option) {
+                                return {
+                                    key: option.Key,
+                                    value: option.Value
+                                };
+                            })
+                        }, typeMapper_1.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
+         */
+        PepQueryBuilderService.prototype.getFilterValues = function (current, operator, field) {
+            var _a, _b, _c, _d, _e;
+            var data = {
+                first: null,
+                second: null,
+                operationUnit: null
+            };
+            if (operator === smartFilters.PepSmartFilterOperators.In) { //multi select                        
+                //filter keys don't exist on field options
+                data.first = ((_a = current === null || current === void 0 ? void 0 : current.Values) === null || _a === void 0 ? void 0 : _a.length) > 0 ? current.Values.filter(function (item) {
+                    return field.options.find(function (option) { return option.key === item; });
+                }) : null;
+            }
+            else if (operator === smartFilters.PepSmartFilterOperators.InTheLast ||
+                operator === smartFilters.PepSmartFilterAdditionalOperators.InTheLastCalendar ||
+                operator === smartFilters.PepSmartFilterOperators.NotInTheLast ||
+                operator === smartFilters.PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
+                operator === smartFilters.PepSmartFilterOperators.DueIn ||
+                operator === smartFilters.PepSmartFilterOperators.NotDueIn) { //operation unit
+                data.first = ((_b = current === null || current === void 0 ? void 0 : current.Values) === null || _b === void 0 ? void 0 : _b.length) > 0 ? current.Values[0] : null;
+                if (((_c = current === null || current === void 0 ? void 0 : current.Values) === null || _c === void 0 ? void 0 : _c.length) === 2) {
+                    data.operationUnit = getSmartFilterOperationUnit(current.Values[1]);
+                }
+            }
+            else {
+                data.first = ((_d = current === null || current === void 0 ? void 0 : current.Values) === null || _d === void 0 ? void 0 : _d.length) > 0 ? current.Values[0] : null;
+                data.second = ((_e = current === null || current === void 0 ? void 0 : current.Values) === null || _e === void 0 ? void 0 : _e.length) === 2 ? current.Values[1] : null;
+            }
+            return data;
+        };
+        return PepQueryBuilderService;
+    }());
+    PepQueryBuilderService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PepQueryBuilderService_Factory() { return new PepQueryBuilderService(); }, token: PepQueryBuilderService, providedIn: "root" });
+    PepQueryBuilderService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
     PepQueryBuilderService.ctorParameters = function () { return []; };
 
-    var PepOutputQueryService = /** @class */ (function () {
-        function PepOutputQueryService() {
-            //
-        }
-        /**
-         * generates a legacy query structure
-         * @param filters UI smart filters structure
-         * @returns legacy query
-         */
-        PepOutputQueryService.prototype.generateQuery = function (filters) {
-            this.initParams();
-            return this.sectionWalk(filters);
-        };
-        /**
-         * init params
-         */
-        PepOutputQueryService.prototype.initParams = function () {
-            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
-         */
-        PepOutputQueryService.prototype.sectionWalk = function (current) {
-            var _this = this;
-            var section = null;
-            Object.keys(current).forEach(function (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')) {
-                    var 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
-         */
-        PepOutputQueryService.prototype.addToSection = function (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
-         */
-        PepOutputQueryService.prototype.createSection = function (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
-         */
-        PepOutputQueryService.prototype.getItemValues = function (current) {
-            var _a;
-            var values = [];
-            if ((_a = current === null || current === void 0 ? void 0 : current.values) === null || _a === void 0 ? void 0 : _a.first) {
-                if (current.operator === smartFilters.PepSmartFilterOperators.In) { //multi select 
-                    values = current.values.first;
-                }
-                else if (current.operator === smartFilters.PepSmartFilterOperators.InTheLast ||
-                    current.operator === smartFilters.PepSmartFilterAdditionalOperators.InTheLastCalendar ||
-                    current.operator === smartFilters.PepSmartFilterOperators.NotInTheLast ||
-                    current.operator === smartFilters.PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
-                    current.operator === smartFilters.PepSmartFilterOperators.DueIn ||
-                    current.operator === smartFilters.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;
-        };
-        return PepOutputQueryService;
-    }());
-    PepOutputQueryService.decorators = [
-        { type: i0.Injectable }
-    ];
+    var PepOutputQueryService = /** @class */ (function () {
+        function PepOutputQueryService() {
+            //
+        }
+        /**
+         * generates a legacy query structure
+         * @param filters UI smart filters structure
+         * @returns legacy query
+         */
+        PepOutputQueryService.prototype.generateQuery = function (filters) {
+            this.initParams();
+            return this.sectionWalk(filters);
+        };
+        /**
+         * init params
+         */
+        PepOutputQueryService.prototype.initParams = function () {
+            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
+         */
+        PepOutputQueryService.prototype.sectionWalk = function (current) {
+            var _this = this;
+            var section = null;
+            Object.keys(current).forEach(function (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')) {
+                    var 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
+         */
+        PepOutputQueryService.prototype.addToSection = function (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
+         */
+        PepOutputQueryService.prototype.createSection = function (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
+         */
+        PepOutputQueryService.prototype.getItemValues = function (current) {
+            var _a;
+            var values = [];
+            if ((_a = current === null || current === void 0 ? void 0 : current.values) === null || _a === void 0 ? void 0 : _a.first) {
+                if (current.operator === smartFilters.PepSmartFilterOperators.In) { //multi select 
+                    values = current.values.first;
+                }
+                else if (current.operator === smartFilters.PepSmartFilterOperators.InTheLast ||
+                    current.operator === smartFilters.PepSmartFilterAdditionalOperators.InTheLastCalendar ||
+                    current.operator === smartFilters.PepSmartFilterOperators.NotInTheLast ||
+                    current.operator === smartFilters.PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
+                    current.operator === smartFilters.PepSmartFilterOperators.DueIn ||
+                    current.operator === smartFilters.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;
+        };
+        return PepOutputQueryService;
+    }());
+    PepOutputQueryService.decorators = [
+        { type: i0.Injectable }
+    ];
     PepOutputQueryService.ctorParameters = function () { return []; };
 
-    var PepTypeConvertorService = /** @class */ (function () {
-        function PepTypeConvertorService() {
-            this._operators = [];
-            this._booleans = [];
-            this.initOperators();
-            this.initBooleans();
-        }
-        Object.defineProperty(PepTypeConvertorService.prototype, "operators", {
-            get: function () {
-                return this._operators;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepTypeConvertorService.prototype, "booleans", {
-            get: function () {
-                return this._booleans;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepTypeConvertorService.prototype.initOperators = function () {
-            this._operators.push({
-                key: 'AND',
-                value: 'And'
-            });
-            this._operators.push({
-                key: 'OR',
-                value: 'Or'
-            });
-        };
-        PepTypeConvertorService.prototype.initBooleans = function () {
-            this._booleans.push({
-                key: 'True',
-                value: 'True'
-            });
-            this._booleans.push({
-                key: 'False',
-                value: 'False'
-            });
-        };
-        return PepTypeConvertorService;
-    }());
-    PepTypeConvertorService.decorators = [
-        { type: i0.Injectable }
-    ];
+    var PepTypeConvertorService = /** @class */ (function () {
+        function PepTypeConvertorService() {
+            this._operators = [];
+            this._booleans = [];
+            this.initOperators();
+            this.initBooleans();
+        }
+        Object.defineProperty(PepTypeConvertorService.prototype, "operators", {
+            get: function () {
+                return this._operators;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepTypeConvertorService.prototype, "booleans", {
+            get: function () {
+                return this._booleans;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepTypeConvertorService.prototype.initOperators = function () {
+            this._operators.push({
+                key: 'AND',
+                value: 'And'
+            });
+            this._operators.push({
+                key: 'OR',
+                value: 'Or'
+            });
+        };
+        PepTypeConvertorService.prototype.initBooleans = function () {
+            this._booleans.push({
+                key: 'True',
+                value: 'True'
+            });
+            this._booleans.push({
+                key: 'False',
+                value: 'False'
+            });
+        };
+        return PepTypeConvertorService;
+    }());
+    PepTypeConvertorService.decorators = [
+        { type: i0.Injectable }
+    ];
     PepTypeConvertorService.ctorParameters = function () { return []; };
 
-    var PepQueryBuilderSectionComponent = /** @class */ (function () {
-        function PepQueryBuilderSectionComponent(_typeConvertorService) {
-            this._typeConvertorService = _typeConvertorService;
-            this.hasFields = true;
-            this.createSection = new i0.EventEmitter();
-            this.createItem = new i0.EventEmitter();
-            this.remove = new i0.EventEmitter();
-            this.operatorChange = new i0.EventEmitter();
-        }
-        PepQueryBuilderSectionComponent.prototype.ngOnInit = function () {
-            this.initOperators();
-        };
-        Object.defineProperty(PepQueryBuilderSectionComponent.prototype, "f", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepQueryBuilderSectionComponent.prototype.initOperators = function () {
-            var _this = this;
-            this.toggleButtons = this._typeConvertorService.operators.map(function (operator) {
-                return {
-                    key: operator.key,
-                    value: operator.value,
-                    callback: function (event) { return _this.onOperatorChanged(event); }
-                };
-            });
-        };
-        PepQueryBuilderSectionComponent.prototype.onOperatorChanged = function (event) {
-            var _a;
-            if ((_a = event === null || event === void 0 ? void 0 : event.source) === null || _a === void 0 ? void 0 : _a.key) {
-                this.f.operator.setValue(event.source.key);
-                this.operatorChange.emit();
-            }
-        };
-        PepQueryBuilderSectionComponent.prototype.onAddRuleClicked = function () {
-            this.createItem.emit();
-        };
-        PepQueryBuilderSectionComponent.prototype.onAddRuleSetClicked = function () {
-            this.createSection.emit();
-        };
-        PepQueryBuilderSectionComponent.prototype.onDeleteSectionClicked = function () {
-            this.remove.emit();
-        };
-        return PepQueryBuilderSectionComponent;
-    }());
-    PepQueryBuilderSectionComponent.decorators = [
-        { type: i0.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:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding:.5rem;width:100%}", ".query-section-container{box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);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 rgba(26,26,26,.24);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)}"]
-                },] }
-    ];
-    PepQueryBuilderSectionComponent.ctorParameters = function () { return [
-        { type: PepTypeConvertorService }
-    ]; };
-    PepQueryBuilderSectionComponent.propDecorators = {
-        form: [{ type: i0.Input }],
-        depth: [{ type: i0.Input }],
-        hasFields: [{ type: i0.Input }],
-        createSection: [{ type: i0.Output }],
-        createItem: [{ type: i0.Output }],
-        remove: [{ type: i0.Output }],
-        operatorChange: [{ type: i0.Output }],
-        sectionContainer: [{ type: i0.ViewChild, args: ['sectionContainer', { read: i0.ViewContainerRef, static: true },] }]
+    var PepQueryBuilderSectionComponent = /** @class */ (function () {
+        function PepQueryBuilderSectionComponent(_typeConvertorService) {
+            this._typeConvertorService = _typeConvertorService;
+            this.hasFields = true;
+            this.createSection = new i0.EventEmitter();
+            this.createItem = new i0.EventEmitter();
+            this.remove = new i0.EventEmitter();
+            this.operatorChange = new i0.EventEmitter();
+        }
+        PepQueryBuilderSectionComponent.prototype.ngOnInit = function () {
+            this.initOperators();
+        };
+        Object.defineProperty(PepQueryBuilderSectionComponent.prototype, "f", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepQueryBuilderSectionComponent.prototype.initOperators = function () {
+            var _this = this;
+            this.toggleButtons = this._typeConvertorService.operators.map(function (operator) {
+                return {
+                    key: operator.key,
+                    value: operator.value,
+                    callback: function (event) { return _this.onOperatorChanged(event); }
+                };
+            });
+        };
+        PepQueryBuilderSectionComponent.prototype.onOperatorChanged = function (event) {
+            var _a;
+            if ((_a = event === null || event === void 0 ? void 0 : event.source) === null || _a === void 0 ? void 0 : _a.key) {
+                this.f.operator.setValue(event.source.key);
+                this.operatorChange.emit();
+            }
+        };
+        PepQueryBuilderSectionComponent.prototype.onAddRuleClicked = function () {
+            this.createItem.emit();
+        };
+        PepQueryBuilderSectionComponent.prototype.onAddRuleSetClicked = function () {
+            this.createSection.emit();
+        };
+        PepQueryBuilderSectionComponent.prototype.onDeleteSectionClicked = function () {
+            this.remove.emit();
+        };
+        return PepQueryBuilderSectionComponent;
+    }());
+    PepQueryBuilderSectionComponent.decorators = [
+        { type: i0.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:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding:.5rem;width:100%}", ".query-section-container{box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.08);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 rgba(26,26,26,.24);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)}"]
+                },] }
+    ];
+    PepQueryBuilderSectionComponent.ctorParameters = function () { return [
+        { type: PepTypeConvertorService }
+    ]; };
+    PepQueryBuilderSectionComponent.propDecorators = {
+        form: [{ type: i0.Input }],
+        depth: [{ type: i0.Input }],
+        hasFields: [{ type: i0.Input }],
+        createSection: [{ type: i0.Output }],
+        createItem: [{ type: i0.Output }],
+        remove: [{ type: i0.Output }],
+        operatorChange: [{ type: i0.Output }],
+        sectionContainer: [{ type: i0.ViewChild, args: ['sectionContainer', { read: i0.ViewContainerRef, static: true },] }]
     };
 
-    var PepQueryBuilderItemComponent = /** @class */ (function () {
-        function PepQueryBuilderItemComponent(_fb, typeConvertorService) {
-            this._fb = _fb;
-            this.typeConvertorService = typeConvertorService;
-            this._fields = [];
-            this._options = [];
-            this._selectedField = null;
-            this.variableFields = {};
-            this.filterChange = new i0.EventEmitter();
-            this.remove = new i0.EventEmitter();
-            this.setupForm();
-        }
-        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "fields", {
-            set: function (list) {
-                if ((list === null || list === void 0 ? void 0 : list.length) > 0) {
-                    this._fields = list;
-                    this._options = list.map(function (field) {
-                        return {
-                            key: field.smart.id,
-                            value: field.smart.name
-                        };
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "selected", {
-            set: function (value) {
-                if (value) {
-                    this._selectedField = value.smart;
-                    this.queryForm.fieldType.setValue(value.query.fieldType);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "filter", {
-            set: function (value) {
-                if (value) {
-                    this._filter = value;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "parentForm", {
-            set: function (value) {
-                if (value) {
-                    this._parentForm = value;
-                    this.addToParentForm();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepQueryBuilderItemComponent.prototype.ngOnInit = function () {
-            //
-        };
-        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "f", {
-            get: function () {
-                return this.form.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "queryForm", {
-            get: function () {
-                return this.f.query.controls;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepQueryBuilderItemComponent.prototype.setupForm = function () {
-            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)
-                })
-            });
-        };
-        PepQueryBuilderItemComponent.prototype.addToParentForm = function () {
-            this._parentForm.setControl(this.formKey, this.form);
-        };
-        PepQueryBuilderItemComponent.prototype.onFieldChanged = function (key) {
-            var _this = this;
-            var item = this._fields.find(function (field) { return 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(function () {
-                _this._selectedField = item ? item.smart : null;
-            }, 0);
-            this._filter = null;
-        };
-        PepQueryBuilderItemComponent.prototype.onFilterChanged = function () {
-            if (this.form.valid) {
-                this.filterChange.emit();
-            }
-        };
-        PepQueryBuilderItemComponent.prototype.onDeleteItemClicked = function () {
-            this.remove.emit();
-        };
-        return PepQueryBuilderItemComponent;
-    }());
-    PepQueryBuilderItemComponent.decorators = [
-        { type: i0.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}"]
-                },] }
-    ];
-    PepQueryBuilderItemComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: PepTypeConvertorService }
-    ]; };
-    PepQueryBuilderItemComponent.propDecorators = {
-        formKey: [{ type: i0.Input }],
-        fields: [{ type: i0.Input }],
-        selected: [{ type: i0.Input }],
-        filter: [{ type: i0.Input }],
-        parentForm: [{ type: i0.Input }],
-        variableFields: [{ type: i0.Input }],
-        filterChange: [{ type: i0.Output }],
-        remove: [{ type: i0.Output }]
+    var PepQueryBuilderItemComponent = /** @class */ (function () {
+        function PepQueryBuilderItemComponent(_fb, typeConvertorService) {
+            this._fb = _fb;
+            this.typeConvertorService = typeConvertorService;
+            this._fields = [];
+            this._options = [];
+            this._selectedField = null;
+            this.variableFields = {};
+            this.filterChange = new i0.EventEmitter();
+            this.remove = new i0.EventEmitter();
+            this.setupForm();
+        }
+        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "fields", {
+            set: function (list) {
+                if ((list === null || list === void 0 ? void 0 : list.length) > 0) {
+                    this._fields = list;
+                    this._options = list.map(function (field) {
+                        return {
+                            key: field.smart.id,
+                            value: field.smart.name
+                        };
+                    });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "selected", {
+            set: function (value) {
+                if (value) {
+                    this._selectedField = value.smart;
+                    this.queryForm.fieldType.setValue(value.query.fieldType);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "filter", {
+            set: function (value) {
+                if (value) {
+                    this._filter = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "parentForm", {
+            set: function (value) {
+                if (value) {
+                    this._parentForm = value;
+                    this.addToParentForm();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepQueryBuilderItemComponent.prototype.ngOnInit = function () {
+            //
+        };
+        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "f", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "queryForm", {
+            get: function () {
+                return this.f.query.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepQueryBuilderItemComponent.prototype.setupForm = function () {
+            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)
+                })
+            });
+        };
+        PepQueryBuilderItemComponent.prototype.addToParentForm = function () {
+            this._parentForm.setControl(this.formKey, this.form);
+        };
+        PepQueryBuilderItemComponent.prototype.onFieldChanged = function (key) {
+            var _this = this;
+            var item = this._fields.find(function (field) { return 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(function () {
+                _this._selectedField = item ? item.smart : null;
+            }, 0);
+            this._filter = null;
+        };
+        PepQueryBuilderItemComponent.prototype.onFilterChanged = function () {
+            if (this.form.valid) {
+                this.filterChange.emit();
+            }
+        };
+        PepQueryBuilderItemComponent.prototype.onDeleteItemClicked = function () {
+            this.remove.emit();
+        };
+        return PepQueryBuilderItemComponent;
+    }());
+    PepQueryBuilderItemComponent.decorators = [
+        { type: i0.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}"]
+                },] }
+    ];
+    PepQueryBuilderItemComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: PepTypeConvertorService }
+    ]; };
+    PepQueryBuilderItemComponent.propDecorators = {
+        formKey: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        filter: [{ type: i0.Input }],
+        parentForm: [{ type: i0.Input }],
+        variableFields: [{ type: i0.Input }],
+        filterChange: [{ type: i0.Output }],
+        remove: [{ type: i0.Output }]
     };
 
-    var PepOperatorTypes;
-    (function (PepOperatorTypes) {
-        PepOperatorTypes["And"] = "AND";
-        PepOperatorTypes["Or"] = "OR";
+    var PepOperatorTypes;
+    (function (PepOperatorTypes) {
+        PepOperatorTypes["And"] = "AND";
+        PepOperatorTypes["Or"] = "OR";
     })(PepOperatorTypes || (PepOperatorTypes = {}));
 
-    var MAX_STRUCTURE_DEPTH = 3;
-    var PepQueryStructureService = /** @class */ (function () {
-        function PepQueryStructureService(_fb, _resolver, _outputQueryService, _queryBuilderService) {
-            this._fb = _fb;
-            this._resolver = _resolver;
-            this._outputQueryService = _outputQueryService;
-            this._queryBuilderService = _queryBuilderService;
-            this._outputQuery$ = new rxjs.BehaviorSubject(null);
-            this._variableFields = {};
-            this._maxStructureDepth = MAX_STRUCTURE_DEPTH;
-            this.outputQuery$ = this._outputQuery$.asObservable();
-        }
-        Object.defineProperty(PepQueryStructureService.prototype, "maxDepth", {
-            get: function () {
-                return this._maxStructureDepth;
-            },
-            set: function (value) {
-                this._maxStructureDepth = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryStructureService.prototype, "fields", {
-            set: function (list) {
-                this._smartFilterFields = this._queryBuilderService.convertToSmartFilterFields(list);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryStructureService.prototype, "hasFields", {
-            get: function () {
-                var _a;
-                return ((_a = this._smartFilterFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryStructureService.prototype, "variableFields", {
-            set: function (list) {
-                var _this = this;
-                if (list === null || list === void 0 ? void 0 : list.length) {
-                    var typeMapper_1 = new PepQueryBuilderTypeMap();
-                    list.forEach(function (field) {
-                        var fieldType = _this.convertSmartFilterComponentType(typeMapper_1.getSmartFilterType(field.FieldType));
-                        if (_this.hasProperty(_this._variableFields, fieldType)) {
-                            _this._variableFields[fieldType].push(field.FieldID);
-                        }
-                        else {
-                            _this._variableFields[fieldType] = [field.FieldID];
-                        }
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryStructureService.prototype, "form", {
-            get: function () {
-                return this._form;
-            },
-            set: function (value) {
-                this._form = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * 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
-         */
-        PepQueryStructureService.prototype.buildQueryStructure = function (query, containerRef) {
-            //update root operator        
-            if (this.hasProperty(query, 'ComplexId') &&
-                (query === null || query === void 0 ? void 0 : 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
-        */
-        PepQueryStructureService.prototype.hasProperty = function (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
-         */
-        PepQueryStructureService.prototype.flatten = function (parentOperator, current, containerRef, parentForm, depth) {
-            if (this.hasProperty(current, 'ComplexId')) {
-                var 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 {
-                    var 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
-         */
-        PepQueryStructureService.prototype.createSection = function (operator, containerRef, parentForm, depth) {
-            var _this = this;
-            var factory = this._resolver.resolveComponentFactory(PepQueryBuilderSectionComponent);
-            var componentRef = containerRef.createComponent(factory);
-            var sectionGroup = this._fb.group({
-                operator: this._fb.control(operator)
-            });
-            var counter = 1;
-            Object.keys(parentForm.controls).forEach(function (item) {
-                if (item.includes('section')) {
-                    counter++;
-                }
-            });
-            var formKey = "section" + counter;
-            parentForm.addControl(formKey, sectionGroup);
-            componentRef.instance.form = sectionGroup;
-            componentRef.instance.depth = {
-                current: depth,
-                max: this._maxStructureDepth
-            };
-            componentRef.instance.createSection.subscribe(function () {
-                var section = _this.createSection(PepOperatorTypes.And, componentRef.instance.sectionContainer, sectionGroup, depth + 1);
-                _this.createItem(null, section.containerRef, section.parentForm);
-            });
-            componentRef.instance.createItem.subscribe(function () {
-                _this.createItem(null, componentRef.instance.sectionContainer, sectionGroup);
-            });
-            componentRef.instance.remove.subscribe(function () {
-                parentForm.removeControl(formKey);
-                componentRef.destroy();
-                _this.createOutputQuery();
-            });
-            componentRef.instance.operatorChange.subscribe(function () {
-                _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
-         */
-        PepQueryStructureService.prototype.createItem = function (current, containerRef, parentForm) {
-            var _this = this;
-            var factory = this._resolver.resolveComponentFactory(PepQueryBuilderItemComponent);
-            var componentRef = containerRef.createComponent(factory);
-            var counter = 1;
-            Object.keys(parentForm.controls).forEach(function (item) {
-                if (item.includes('item')) {
-                    counter++;
-                }
-            });
-            var formKey = "item" + counter;
-            componentRef.instance.formKey = formKey;
-            componentRef.instance.fields = this._smartFilterFields;
-            componentRef.instance.variableFields = this._variableFields;
-            var 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(function () {
-                _this.createOutputQuery();
-            });
-            componentRef.instance.remove.subscribe(function () {
-                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
-         */
-        PepQueryStructureService.prototype.getSelectedField = function (current) {
-            var _a, _b;
-            if (current) {
-                var item = this._smartFilterFields.find(function (field) { return field.smart.id === current.ApiName; });
-                return item ? item : ((_a = this._smartFilterFields) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._smartFilterFields[0] : null;
-            }
-            else {
-                return ((_b = this._smartFilterFields) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this._smartFilterFields[0] : null;
-            }
-        };
-        PepQueryStructureService.prototype.convertSmartFilterComponentType = function (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
-         */
-        PepQueryStructureService.prototype.createOutputQuery = function () {
-            if (this._form.valid) {
-                var query = this._outputQueryService.generateQuery(this._form.value);
-                this._outputQuery$.next(query);
-            }
-        };
-        return PepQueryStructureService;
-    }());
-    PepQueryStructureService.decorators = [
-        { type: i0.Injectable }
-    ];
-    PepQueryStructureService.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: i0.ComponentFactoryResolver },
-        { type: PepOutputQueryService },
-        { type: PepQueryBuilderService }
+    var MAX_STRUCTURE_DEPTH = 3;
+    var PepQueryStructureService = /** @class */ (function () {
+        function PepQueryStructureService(_fb, _resolver, _outputQueryService, _queryBuilderService) {
+            this._fb = _fb;
+            this._resolver = _resolver;
+            this._outputQueryService = _outputQueryService;
+            this._queryBuilderService = _queryBuilderService;
+            this._outputQuery$ = new rxjs.BehaviorSubject(null);
+            this._variableFields = {};
+            this._maxStructureDepth = MAX_STRUCTURE_DEPTH;
+            this.outputQuery$ = this._outputQuery$.asObservable();
+        }
+        Object.defineProperty(PepQueryStructureService.prototype, "maxDepth", {
+            get: function () {
+                return this._maxStructureDepth;
+            },
+            set: function (value) {
+                this._maxStructureDepth = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryStructureService.prototype, "fields", {
+            set: function (list) {
+                this._smartFilterFields = this._queryBuilderService.convertToSmartFilterFields(list);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryStructureService.prototype, "hasFields", {
+            get: function () {
+                var _a;
+                return ((_a = this._smartFilterFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryStructureService.prototype, "variableFields", {
+            set: function (list) {
+                var _this = this;
+                if (list === null || list === void 0 ? void 0 : list.length) {
+                    var typeMapper_1 = new PepQueryBuilderTypeMap();
+                    list.forEach(function (field) {
+                        var fieldType = _this.convertSmartFilterComponentType(typeMapper_1.getSmartFilterType(field.FieldType));
+                        if (_this.hasProperty(_this._variableFields, fieldType)) {
+                            _this._variableFields[fieldType].push(field.FieldID);
+                        }
+                        else {
+                            _this._variableFields[fieldType] = [field.FieldID];
+                        }
+                    });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryStructureService.prototype, "form", {
+            get: function () {
+                return this._form;
+            },
+            set: function (value) {
+                this._form = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * 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
+         */
+        PepQueryStructureService.prototype.buildQueryStructure = function (query, containerRef) {
+            //update root operator        
+            if (this.hasProperty(query, 'ComplexId') &&
+                (query === null || query === void 0 ? void 0 : 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
+        */
+        PepQueryStructureService.prototype.hasProperty = function (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
+         */
+        PepQueryStructureService.prototype.flatten = function (parentOperator, current, containerRef, parentForm, depth) {
+            if (this.hasProperty(current, 'ComplexId')) {
+                var 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 {
+                    var 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
+         */
+        PepQueryStructureService.prototype.createSection = function (operator, containerRef, parentForm, depth) {
+            var _this = this;
+            var factory = this._resolver.resolveComponentFactory(PepQueryBuilderSectionComponent);
+            var componentRef = containerRef.createComponent(factory);
+            var sectionGroup = this._fb.group({
+                operator: this._fb.control(operator)
+            });
+            var counter = 1;
+            Object.keys(parentForm.controls).forEach(function (item) {
+                if (item.includes('section')) {
+                    counter++;
+                }
+            });
+            var formKey = "section" + counter;
+            parentForm.addControl(formKey, sectionGroup);
+            componentRef.instance.form = sectionGroup;
+            componentRef.instance.depth = {
+                current: depth,
+                max: this._maxStructureDepth
+            };
+            componentRef.instance.createSection.subscribe(function () {
+                var section = _this.createSection(PepOperatorTypes.And, componentRef.instance.sectionContainer, sectionGroup, depth + 1);
+                _this.createItem(null, section.containerRef, section.parentForm);
+            });
+            componentRef.instance.createItem.subscribe(function () {
+                _this.createItem(null, componentRef.instance.sectionContainer, sectionGroup);
+            });
+            componentRef.instance.remove.subscribe(function () {
+                parentForm.removeControl(formKey);
+                componentRef.destroy();
+                _this.createOutputQuery();
+            });
+            componentRef.instance.operatorChange.subscribe(function () {
+                _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
+         */
+        PepQueryStructureService.prototype.createItem = function (current, containerRef, parentForm) {
+            var _this = this;
+            var factory = this._resolver.resolveComponentFactory(PepQueryBuilderItemComponent);
+            var componentRef = containerRef.createComponent(factory);
+            var counter = 1;
+            Object.keys(parentForm.controls).forEach(function (item) {
+                if (item.includes('item')) {
+                    counter++;
+                }
+            });
+            var formKey = "item" + counter;
+            componentRef.instance.formKey = formKey;
+            componentRef.instance.fields = this._smartFilterFields;
+            componentRef.instance.variableFields = this._variableFields;
+            var 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(function () {
+                _this.createOutputQuery();
+            });
+            componentRef.instance.remove.subscribe(function () {
+                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
+         */
+        PepQueryStructureService.prototype.getSelectedField = function (current) {
+            var _a, _b;
+            if (current) {
+                var item = this._smartFilterFields.find(function (field) { return field.smart.id === current.ApiName; });
+                return item ? item : ((_a = this._smartFilterFields) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._smartFilterFields[0] : null;
+            }
+            else {
+                return ((_b = this._smartFilterFields) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this._smartFilterFields[0] : null;
+            }
+        };
+        PepQueryStructureService.prototype.convertSmartFilterComponentType = function (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
+         */
+        PepQueryStructureService.prototype.createOutputQuery = function () {
+            if (this._form.valid) {
+                var query = this._outputQueryService.generateQuery(this._form.value);
+                this._outputQuery$.next(query);
+            }
+        };
+        return PepQueryStructureService;
+    }());
+    PepQueryStructureService.decorators = [
+        { type: i0.Injectable }
+    ];
+    PepQueryStructureService.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: i0.ComponentFactoryResolver },
+        { type: PepOutputQueryService },
+        { type: PepQueryBuilderService }
     ]; };
 
-    var PepQueryBuilderComponent = /** @class */ (function () {
-        function PepQueryBuilderComponent(_fb, queryStructureService) {
-            var _this = this;
-            this._fb = _fb;
-            this.queryStructureService = queryStructureService;
-            this._query = null;
-            this.queryChange = new i0.EventEmitter();
-            this.formValidationChange = new i0.EventEmitter();
-            this._lastFormValidStatus = true;
-            this.hasFields = false;
-            this.setupForm();
-            this.initDepth();
-            this._formSubscription$ = this.queryStructureService.form.valueChanges.subscribe(function (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(function (outputQuery) {
-                _this.queryChange.emit(outputQuery);
-            });
-        }
-        Object.defineProperty(PepQueryBuilderComponent.prototype, "query", {
-            set: function (object) {
-                this._query = object;
-                this.loadQuery();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryBuilderComponent.prototype, "fields", {
-            set: function (list) {
-                this.queryStructureService.fields = list;
-                this.hasFields = this.queryStructureService.hasFields;
-                this.loadQuery();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryBuilderComponent.prototype, "variableFields", {
-            set: function (list) {
-                this.queryStructureService.variableFields = list;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepQueryBuilderComponent.prototype, "maxDepth", {
-            set: function (value) {
-                this.queryStructureService.maxDepth = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepQueryBuilderComponent.prototype.ngOnInit = function () {
-            //
-        };
-        PepQueryBuilderComponent.prototype.setupForm = function () {
-            this.queryStructureService.form = this._fb.group({
-                operator: this._fb.control(PepOperatorTypes.And)
-            });
-        };
-        PepQueryBuilderComponent.prototype.initDepth = function () {
-            this.depth = {
-                current: 0,
-                max: this.queryStructureService.maxDepth
-            };
-        };
-        /**
-         * builds UI query structure as soon as both the fields and query loads
-         */
-        PepQueryBuilderComponent.prototype.loadQuery = function () {
-            var _a;
-            if (this._query &&
-                this.queryStructureService.hasFields &&
-                ((_a = this.root) === null || _a === void 0 ? void 0 : _a.sectionContainer)) {
-                this.queryStructureService.buildQueryStructure(this._query, this.root.sectionContainer);
-            }
-        };
-        PepQueryBuilderComponent.prototype.onCreateSection = function () {
-            var section = this.queryStructureService.createSection(PepOperatorTypes.And, this.root.sectionContainer, this.queryStructureService.form, 1);
-            this.queryStructureService.createItem(null, section.containerRef, section.parentForm);
-        };
-        PepQueryBuilderComponent.prototype.onCreateItem = function () {
-            this.queryStructureService.createItem(null, this.root.sectionContainer, this.queryStructureService.form);
-        };
-        PepQueryBuilderComponent.prototype.onOperatorChange = function () {
-            this.queryStructureService.createOutputQuery();
-        };
-        PepQueryBuilderComponent.prototype.ngOnDestroy = function () {
-            if (this._formSubscription$) {
-                this._formSubscription$.unsubscribe();
-            }
-            if (this._outputQuerySubscription$) {
-                this._outputQuerySubscription$.unsubscribe();
-            }
-        };
-        return PepQueryBuilderComponent;
-    }());
-    PepQueryBuilderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'pep-query-builder',
-                    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>",
-                    providers: [PepQueryStructureService, PepTypeConvertorService, PepOutputQueryService],
-                    styles: [""]
-                },] }
-    ];
-    PepQueryBuilderComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: PepQueryStructureService }
-    ]; };
-    PepQueryBuilderComponent.propDecorators = {
-        query: [{ type: i0.Input }],
-        fields: [{ type: i0.Input }],
-        variableFields: [{ type: i0.Input }],
-        maxDepth: [{ type: i0.Input }],
-        queryChange: [{ type: i0.Output }],
-        formValidationChange: [{ type: i0.Output }],
-        root: [{ type: i0.ViewChild, args: ['rootContainer', { static: true },] }]
+    var PepQueryBuilderComponent = /** @class */ (function () {
+        function PepQueryBuilderComponent(_fb, queryStructureService) {
+            var _this = this;
+            this._fb = _fb;
+            this.queryStructureService = queryStructureService;
+            this._query = null;
+            this.queryChange = new i0.EventEmitter();
+            this.formValidationChange = new i0.EventEmitter();
+            this._lastFormValidStatus = true;
+            this.hasFields = false;
+            this.setupForm();
+            this.initDepth();
+            this._formSubscription$ = this.queryStructureService.form.valueChanges.subscribe(function (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(function (outputQuery) {
+                _this.queryChange.emit(outputQuery);
+            });
+        }
+        Object.defineProperty(PepQueryBuilderComponent.prototype, "query", {
+            set: function (object) {
+                this._query = object;
+                this.loadQuery();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderComponent.prototype, "fields", {
+            set: function (list) {
+                this.queryStructureService.fields = list;
+                this.hasFields = this.queryStructureService.hasFields;
+                this.loadQuery();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderComponent.prototype, "variableFields", {
+            set: function (list) {
+                this.queryStructureService.variableFields = list;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderComponent.prototype, "maxDepth", {
+            set: function (value) {
+                this.queryStructureService.maxDepth = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepQueryBuilderComponent.prototype.ngOnInit = function () {
+            //
+        };
+        PepQueryBuilderComponent.prototype.setupForm = function () {
+            this.queryStructureService.form = this._fb.group({
+                operator: this._fb.control(PepOperatorTypes.And)
+            });
+        };
+        PepQueryBuilderComponent.prototype.initDepth = function () {
+            this.depth = {
+                current: 0,
+                max: this.queryStructureService.maxDepth
+            };
+        };
+        /**
+         * builds UI query structure as soon as both the fields and query loads
+         */
+        PepQueryBuilderComponent.prototype.loadQuery = function () {
+            var _a;
+            if (this._query &&
+                this.queryStructureService.hasFields &&
+                ((_a = this.root) === null || _a === void 0 ? void 0 : _a.sectionContainer)) {
+                this.queryStructureService.buildQueryStructure(this._query, this.root.sectionContainer);
+            }
+        };
+        PepQueryBuilderComponent.prototype.onCreateSection = function () {
+            var section = this.queryStructureService.createSection(PepOperatorTypes.And, this.root.sectionContainer, this.queryStructureService.form, 1);
+            this.queryStructureService.createItem(null, section.containerRef, section.parentForm);
+        };
+        PepQueryBuilderComponent.prototype.onCreateItem = function () {
+            this.queryStructureService.createItem(null, this.root.sectionContainer, this.queryStructureService.form);
+        };
+        PepQueryBuilderComponent.prototype.onOperatorChange = function () {
+            this.queryStructureService.createOutputQuery();
+        };
+        PepQueryBuilderComponent.prototype.ngOnDestroy = function () {
+            if (this._formSubscription$) {
+                this._formSubscription$.unsubscribe();
+            }
+            if (this._outputQuerySubscription$) {
+                this._outputQuerySubscription$.unsubscribe();
+            }
+        };
+        return PepQueryBuilderComponent;
+    }());
+    PepQueryBuilderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'pep-query-builder',
+                    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>",
+                    providers: [PepQueryStructureService, PepTypeConvertorService, PepOutputQueryService],
+                    styles: [""]
+                },] }
+    ];
+    PepQueryBuilderComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: PepQueryStructureService }
+    ]; };
+    PepQueryBuilderComponent.propDecorators = {
+        query: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        variableFields: [{ type: i0.Input }],
+        maxDepth: [{ type: i0.Input }],
+        queryChange: [{ type: i0.Output }],
+        formValidationChange: [{ type: i0.Output }],
+        root: [{ type: i0.ViewChild, args: ['rootContainer', { static: true },] }]
     };
 
-    var PepQueryBuilderModule = /** @class */ (function () {
-        function PepQueryBuilderModule() {
-        }
-        return PepQueryBuilderModule;
-    }());
-    PepQueryBuilderModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        flexLayout.FlexLayoutModule,
-                        select.PepSelectModule,
-                        button.PepButtonModule,
-                        groupButtons.PepGroupButtonsModule,
-                        smartFilters.PepSmartFiltersModule
-                    ],
-                    exports: [
-                        PepQueryBuilderComponent
-                    ],
-                    declarations: [
-                        PepQueryBuilderComponent,
-                        PepQueryBuilderSectionComponent,
-                        PepQueryBuilderItemComponent
-                    ]
-                },] }
+    var PepQueryBuilderModule = /** @class */ (function () {
+        function PepQueryBuilderModule() {
+        }
+        return PepQueryBuilderModule;
+    }());
+    PepQueryBuilderModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        flexLayout.FlexLayoutModule,
+                        select.PepSelectModule,
+                        button.PepButtonModule,
+                        groupButtons.PepGroupButtonsModule,
+                        smartFilters.PepSmartFiltersModule
+                    ],
+                    exports: [
+                        PepQueryBuilderComponent
+                    ],
+                    declarations: [
+                        PepQueryBuilderComponent,
+                        PepQueryBuilderSectionComponent,
+                        PepQueryBuilderItemComponent
+                    ]
+                },] }
     ];
 
-    /*
-     * 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.
      */
 
     exports.PepQueryBuilderComponent = PepQueryBuilderComponent;