@pepperi-addons/ngx-lib 0.2.60 → 0.2.61-query-builder.1

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

@@ -0,0 +1,1101 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@pepperi-addons/ngx-lib/smart-filters'), require('@pepperi-addons/ngx-lib/select'), require('@pepperi-addons/ngx-lib/button'), require('@pepperi-addons/ngx-lib/group-buttons'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-lib/query-builder', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/flex-layout', '@pepperi-addons/ngx-lib/smart-filters', '@pepperi-addons/ngx-lib/select', '@pepperi-addons/ngx-lib/button', '@pepperi-addons/ngx-lib/group-buttons', 'rxjs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['query-builder'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.flexLayout, global['pepperi-addons']['ngx-lib']['smart-filters'], global['pepperi-addons']['ngx-lib'].select, global['pepperi-addons']['ngx-lib'].button, global['pepperi-addons']['ngx-lib']['group-buttons'], global.rxjs));
+}(this, (function (exports, core, common, forms, flexLayout, smartFilters, select, button, groupButtons, rxjs) { 'use strict';
+
+    var Equals = {
+        legacy: 'IsEqual',
+        smartFilter: smartFilters.PepSmartFilterOperators.Equals,
+        type: ['boolean', 'int', 'text']
+    };
+    var NotEqual = {
+        legacy: 'IsNotEqual',
+        smartFilter: smartFilters.PepSmartFilterOperators.NotEqual,
+        type: null
+    };
+    var LessThan = {
+        legacy: '<',
+        smartFilter: smartFilters.PepSmartFilterOperators.LessThan,
+        type: null
+    };
+    var GreaterThan = {
+        legacy: '>',
+        smartFilter: smartFilters.PepSmartFilterOperators.GreaterThan,
+        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
+    };
+    /*
+    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 NotInTheLast = {
+        legacy: 'NotInTheLast',
+        smartFilter: smartFilters.PepSmartFilterOperators.NotInTheLast,
+        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 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,
+        NotEqual,
+        LessThan,
+        //   LessThanOrEquals,
+        GreaterThan,
+        //   GreaterThanOrEquals,
+        NumberRange,
+        Contains,
+        //   BeginsWith,
+        //   EndsWith,
+        //   After,
+        //   Before,
+        InTheLast,
+        NotInTheLast,
+        Today,
+        ThisWeek,
+        ThisMonth,
+        DateRange,
+        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 getSmartBuilderOperator(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 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: core.Injectable }
+    ];
+    PepTypeConvertorService.ctorParameters = function () { return []; };
+
+    var PepQueryBuilderSectionComponent = /** @class */ (function () {
+        function PepQueryBuilderSectionComponent(_typeConvertorService) {
+            this._typeConvertorService = _typeConvertorService;
+            this.hasFields = true;
+            this.createSection = new core.EventEmitter();
+            this.createItem = new core.EventEmitter();
+            this.remove = new core.EventEmitter();
+            this.operatorChange = new core.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: core.Component, args: [{
+                    selector: 'pep-query-builder-section',
+                    template: "<div fxLayout=\"row\" fxLayoutGap=\".5rem\">\r\n    <div class=\"query-section-container\" fxLayout=\"column\" fxLayoutGap=\".5rem\">\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\r\n            <pep-group-buttons [buttons]=\"toggleButtons\" [selectedButtonKey]=\"f.operator?.value || ''\" styleType=\"weak\"\r\n                sizeType=\"sm\" [viewType]=\"'toggle'\" [buttonsDisabled]=\"!hasFields\">\r\n            </pep-group-buttons>\r\n            <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\r\n                <pep-button value=\"Add Filter\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\" classNames=\"\"\r\n                    [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\r\n                    (buttonClick)=\"onAddRuleClicked()\"></pep-button>\r\n                <ng-container *ngIf=\"depth.current < depth.max-1\">\r\n                    <pep-button value=\"Add Filter Group\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\"\r\n                        classNames=\"\" [disabled]=\"!hasFields\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\r\n                        (buttonClick)=\"onAddRuleSetClicked()\"></pep-button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <ng-container #sectionContainer></ng-container>\r\n    </div>\r\n    <pep-button *ngIf=\"depth.current > 0\" styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\"\r\n        [disabled]=\"false\" iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\"\r\n        (buttonClick)=\"onDeleteSectionClicked()\">\r\n    </pep-button>\r\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: core.Input }],
+        depth: [{ type: core.Input }],
+        hasFields: [{ type: core.Input }],
+        createSection: [{ type: core.Output }],
+        createItem: [{ type: core.Output }],
+        remove: [{ type: core.Output }],
+        operatorChange: [{ type: core.Output }],
+        sectionContainer: [{ type: core.ViewChild, args: ['sectionContainer', { read: core.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.filterChange = new core.EventEmitter();
+            this.remove = new core.EventEmitter();
+            this.setupForm(null);
+        }
+        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.field.id,
+                            value: field.field.name
+                        };
+                    });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderItemComponent.prototype, "selected", {
+            set: function (value) {
+                if (value) {
+                    this._selectedField = value.field;
+                    this.queryForm.fieldType.setValue(value.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 (fieldType) {
+            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(fieldType)
+                })
+            });
+        };
+        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.field.id === key; });
+            this.setupForm(item.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.field : 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: core.Component, args: [{
+                    selector: 'pep-query-builder-item',
+                    template: "<div fxLayout=\"column\" fxLayoutGap=\".5rem\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\r\n        <pep-select fxFlex=\"25%\" [value]=\"_selectedField?.id\" xAlignment=\"left\" [options]=\"_options\"\r\n            [renderTitle]=\"false\" (valueChange)=\"onFieldChanged($event)\"></pep-select>\r\n        <ng-container *ngIf=\"_selectedField?.componentType\">\r\n            <ng-container [ngSwitch]=\"_selectedField.componentType\">\r\n                <ng-container *ngSwitchCase=\"'text'\">\r\n                    <pep-text-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\r\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\r\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\r\n                    </pep-text-filter>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                    <pep-boolean-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\r\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\r\n                        [options]=\"typeConvertorService.booleans\" [renderTitle]=\"false\"\r\n                        (filterChange)=\"onFilterChanged()\">\r\n                    </pep-boolean-filter>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'date'\">\r\n                    <pep-date-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\r\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\r\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\r\n                    </pep-date-filter>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'multi-select'\">\r\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\r\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\r\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\r\n                    </pep-multi-select-filter>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'number'\">\r\n                    <pep-number-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\r\n                        [filter]=\"_filter\" [parentForm]=\"f.smart\" [emitOnChange]=\"true\" [inline]=\"true\"\r\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\r\n                    </pep-number-filter>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n        <pep-button styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\" [disabled]=\"false\"\r\n            iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\" (buttonClick)=\"onDeleteItemClicked()\">\r\n        </pep-button>\r\n    </div>\r\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: core.Input }],
+        fields: [{ type: core.Input }],
+        selected: [{ type: core.Input }],
+        filter: [{ type: core.Input }],
+        parentForm: [{ type: core.Input }],
+        filterChange: [{ type: core.Output }],
+        remove: [{ type: core.Output }]
+    };
+
+    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 builder type
+         * @param type legacy type
+         * @returns smart builder field type
+         */
+        PepQueryBuilderTypeMap.prototype.getSmartBuilderType = 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 getSmartBuilderOperationUnit(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 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.PepSmartFilterOperators.NotInTheLast ||
+                    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: core.Injectable }
+    ];
+    PepOutputQueryService.ctorParameters = function () { return []; };
+
+    var PepOperatorTypes;
+    (function (PepOperatorTypes) {
+        PepOperatorTypes["And"] = "AND";
+        PepOperatorTypes["Or"] = "OR";
+    })(PepOperatorTypes || (PepOperatorTypes = {}));
+
+    var MAX_STRUCTURE_DEPTH = 3;
+    var PepQueryBuilderService = /** @class */ (function () {
+        function PepQueryBuilderService(_fb, _resolver, _outputQueryService) {
+            this._fb = _fb;
+            this._resolver = _resolver;
+            this._outputQueryService = _outputQueryService;
+            this._outputQuery$ = new rxjs.BehaviorSubject(null);
+            this._maxStructureDepth = MAX_STRUCTURE_DEPTH;
+            this.outputQuery$ = this._outputQuery$.asObservable();
+        }
+        Object.defineProperty(PepQueryBuilderService.prototype, "maxDepth", {
+            get: function () {
+                return this._maxStructureDepth;
+            },
+            set: function (value) {
+                this._maxStructureDepth = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderService.prototype, "fields", {
+            set: function (list) {
+                this._smartFilterFields = this.convertToSmartFilterFields(list);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderService.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(PepQueryBuilderService.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
+         */
+        PepQueryBuilderService.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
+        */
+        PepQueryBuilderService.prototype.hasProperty = function (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop);
+        };
+        /**
+         * a recursive function dynamically builds UI filters structure
+         * @param parentOperator legacy complex operator
+         * @param current child legacy object (either another complex or expression type)
+         * @param containerRef parent element
+         * @param parentForm parent form
+         */
+        PepQueryBuilderService.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);
+                    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
+         */
+        PepQueryBuilderService.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
+         */
+        PepQueryBuilderService.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;
+            var selectedField = this.getSelectedField(current);
+            if (selectedField) {
+                componentRef.instance.selected = selectedField;
+                if (current) {
+                    componentRef.instance.filter = this.getFilter(current, selectedField.field);
+                }
+            }
+            componentRef.instance.parentForm = parentForm;
+            componentRef.instance.filterChange.subscribe(function () {
+                _this.createOutputQuery();
+            });
+            componentRef.instance.remove.subscribe(function () {
+                parentForm.removeControl(formKey);
+                componentRef.destroy();
+                _this.createOutputQuery();
+            });
+        };
+        /**
+         * 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 = getSmartBuilderOperator(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;
+            }
+        };
+        /**
+         * get smart filter field
+         * @param current filter legacy element
+         * @returns smart filter field, if not found returns the first field
+         */
+        PepQueryBuilderService.prototype.getSelectedField = function (current) {
+            var _a, _b;
+            if (current) {
+                var item = this._smartFilterFields.find(function (field) { return field.field.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;
+            }
+        };
+        /**
+         * 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.PepSmartFilterOperators.NotInTheLast ||
+                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 = getSmartBuilderOperationUnit(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;
+        };
+        /**
+         * 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 {
+                        field: 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.getSmartBuilderType(field.FieldType)),
+                        fieldType: field.FieldType
+                    };
+                });
+            }
+            else {
+                return [];
+            }
+        };
+        /**
+         * creates a legacy output query
+         */
+        PepQueryBuilderService.prototype.createOutputQuery = function () {
+            if (this._form.valid) {
+                var query = this._outputQueryService.generateQuery(this._form.value);
+                this._outputQuery$.next(query);
+            }
+        };
+        return PepQueryBuilderService;
+    }());
+    PepQueryBuilderService.decorators = [
+        { type: core.Injectable }
+    ];
+    PepQueryBuilderService.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: core.ComponentFactoryResolver },
+        { type: PepOutputQueryService }
+    ]; };
+
+    var PepQueryBuilderComponent = /** @class */ (function () {
+        function PepQueryBuilderComponent(_fb, queryBuilderService) {
+            var _this = this;
+            this._fb = _fb;
+            this.queryBuilderService = queryBuilderService;
+            this._query = null;
+            this.queryChange = new core.EventEmitter();
+            this.formValidationChange = new core.EventEmitter();
+            this._lastFormValidStatus = true;
+            this.hasFields = false;
+            this.setupForm();
+            this.initDepth();
+            this._formSubscription$ = this.queryBuilderService.form.valueChanges.subscribe(function (val) {
+                if (_this.queryBuilderService.form.valid !== _this._lastFormValidStatus) {
+                    _this._lastFormValidStatus = _this.queryBuilderService.form.valid;
+                    _this.formValidationChange.emit(_this._lastFormValidStatus);
+                }
+            });
+            this._outputQuerySubscription$ = this.queryBuilderService.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.queryBuilderService.fields = list;
+                this.hasFields = this.queryBuilderService.hasFields;
+                this.loadQuery();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepQueryBuilderComponent.prototype, "maxDepth", {
+            set: function (value) {
+                this.queryBuilderService.maxDepth = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepQueryBuilderComponent.prototype.ngOnInit = function () {
+            //
+        };
+        PepQueryBuilderComponent.prototype.setupForm = function () {
+            this.queryBuilderService.form = this._fb.group({
+                operator: this._fb.control(PepOperatorTypes.And)
+            });
+        };
+        PepQueryBuilderComponent.prototype.initDepth = function () {
+            this.depth = {
+                current: 0,
+                max: this.queryBuilderService.maxDepth
+            };
+        };
+        /**
+         * builds UI query structure as soon as both the fields and query loads
+         */
+        PepQueryBuilderComponent.prototype.loadQuery = function () {
+            var _a;
+            if (this._query &&
+                this.queryBuilderService.hasFields &&
+                ((_a = this.root) === null || _a === void 0 ? void 0 : _a.sectionContainer)) {
+                this.queryBuilderService.buildQueryStructure(this._query, this.root.sectionContainer);
+            }
+        };
+        PepQueryBuilderComponent.prototype.onCreateSection = function () {
+            var section = this.queryBuilderService.createSection(PepOperatorTypes.And, this.root.sectionContainer, this.queryBuilderService.form, 1);
+            this.queryBuilderService.createItem(null, section.containerRef, section.parentForm);
+        };
+        PepQueryBuilderComponent.prototype.onCreateItem = function () {
+            this.queryBuilderService.createItem(null, this.root.sectionContainer, this.queryBuilderService.form);
+        };
+        PepQueryBuilderComponent.prototype.onOperatorChange = function () {
+            this.queryBuilderService.createOutputQuery();
+        };
+        PepQueryBuilderComponent.prototype.ngOnDestroy = function () {
+            if (this._formSubscription$) {
+                this._formSubscription$.unsubscribe();
+            }
+            if (this._outputQuerySubscription$) {
+                this._outputQuerySubscription$.unsubscribe();
+            }
+        };
+        return PepQueryBuilderComponent;
+    }());
+    PepQueryBuilderComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-query-builder',
+                    template: "<pep-query-builder-section #rootContainer [form]=\"queryBuilderService.form\" [depth]=\"depth\" [hasFields]=\"hasFields\"\r\n    (createSection)=\"onCreateSection()\" (createItem)=\"onCreateItem()\" (operatorChange)=\"onOperatorChange()\">\r\n</pep-query-builder-section>",
+                    providers: [PepQueryBuilderService, PepTypeConvertorService, PepOutputQueryService],
+                    styles: [""]
+                },] }
+    ];
+    PepQueryBuilderComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: PepQueryBuilderService }
+    ]; };
+    PepQueryBuilderComponent.propDecorators = {
+        query: [{ type: core.Input }],
+        fields: [{ type: core.Input }],
+        maxDepth: [{ type: core.Input }],
+        queryChange: [{ type: core.Output }],
+        formValidationChange: [{ type: core.Output }],
+        root: [{ type: core.ViewChild, args: ['rootContainer', { static: true },] }]
+    };
+
+    var PepQueryBuilderModule = /** @class */ (function () {
+        function PepQueryBuilderModule() {
+        }
+        return PepQueryBuilderModule;
+    }());
+    PepQueryBuilderModule.decorators = [
+        { type: core.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
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.PepQueryBuilderComponent = PepQueryBuilderComponent;
+    exports.PepQueryBuilderModule = PepQueryBuilderModule;
+    exports.PepQueryBuilderService = PepQueryBuilderService;
+    exports.ɵa = PepOutputQueryService;
+    exports.ɵb = PepTypeConvertorService;
+    exports.ɵc = PepQueryBuilderSectionComponent;
+    exports.ɵd = PepQueryBuilderItemComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=pepperi-addons-ngx-lib-query-builder.umd.js.map