@pepperi-addons/ngx-lib 0.2.55 → 0.2.58-beta.1

package/bundles/pepperi-addons-ngx-lib-smart-filters.umd.js

@@ -1,8 +1,31 @@
 (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('@angular/material/core'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/expansion'), require('@angular/material/icon'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/radio'), require('ngx-virtual-scroller'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/checkbox'), require('@pepperi-addons/ngx-lib/date'), require('@pepperi-addons/ngx-lib/select'), require('@pepperi-addons/ngx-lib/textbox'), require('@pepperi-addons/ngx-lib/search'), require('@pepperi-addons/ngx-lib/icon'), require('rxjs'), require('rxjs/operators'), require('@ngx-translate/core')) :
-    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-lib/smart-filters', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/flex-layout', '@angular/material/core', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/expansion', '@angular/material/icon', '@angular/material/form-field', '@angular/material/input', '@angular/material/radio', 'ngx-virtual-scroller', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/checkbox', '@pepperi-addons/ngx-lib/date', '@pepperi-addons/ngx-lib/select', '@pepperi-addons/ngx-lib/textbox', '@pepperi-addons/ngx-lib/search', '@pepperi-addons/ngx-lib/icon', 'rxjs', 'rxjs/operators', '@ngx-translate/core'], 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']['smart-filters'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.flexLayout, global.ng.material.core, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.expansion, global.ng.material.icon, global.ng.material.formField, global.ng.material.input, global.ng.material.radio, global.ngxVirtualScroller, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].checkbox, global['pepperi-addons']['ngx-lib'].date, global['pepperi-addons']['ngx-lib'].select, global['pepperi-addons']['ngx-lib'].textbox, global['pepperi-addons']['ngx-lib'].search, global['pepperi-addons']['ngx-lib'].icon, global.rxjs, global.rxjs.operators, global.translate));
-}(this, (function (exports, core, common, forms, flexLayout, core$2, checkbox, chips, expansion, icon$1, formField, input, radio, ngxVirtualScroller, ngxLib, checkbox$1, date, select, textbox, search, icon, rxjs, operators, core$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@angular/material/core'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/expansion'), require('@angular/material/icon'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/radio'), require('ngx-virtual-scroller'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/checkbox'), require('@pepperi-addons/ngx-lib/date'), require('@pepperi-addons/ngx-lib/select'), require('@pepperi-addons/ngx-lib/textbox'), require('@pepperi-addons/ngx-lib/search'), require('@pepperi-addons/ngx-lib/button'), require('@pepperi-addons/ngx-lib/icon'), require('rxjs/operators'), require('rxjs'), require('@ngx-translate/core')) :
+    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-lib/smart-filters', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/flex-layout', '@angular/material/core', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/expansion', '@angular/material/icon', '@angular/material/form-field', '@angular/material/input', '@angular/material/radio', 'ngx-virtual-scroller', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/checkbox', '@pepperi-addons/ngx-lib/date', '@pepperi-addons/ngx-lib/select', '@pepperi-addons/ngx-lib/textbox', '@pepperi-addons/ngx-lib/search', '@pepperi-addons/ngx-lib/button', '@pepperi-addons/ngx-lib/icon', 'rxjs/operators', 'rxjs', '@ngx-translate/core'], 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']['smart-filters'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.flexLayout, global.ng.material.core, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.expansion, global.ng.material.icon, global.ng.material.formField, global.ng.material.input, global.ng.material.radio, global.ngxVirtualScroller, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].checkbox, global['pepperi-addons']['ngx-lib'].date, global['pepperi-addons']['ngx-lib'].select, global['pepperi-addons']['ngx-lib'].textbox, global['pepperi-addons']['ngx-lib'].search, global['pepperi-addons']['ngx-lib'].button, global['pepperi-addons']['ngx-lib'].icon, global.rxjs.operators, global.rxjs, global.translate));
+}(this, (function (exports, i0, common, i1, flexLayout, core$1, checkbox, chips, expansion, icon$1, formField, input, radio, ngxVirtualScroller, ngxLib, checkbox$1, date, select, textbox, search, button, icon, operators, rxjs, core) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -327,8 +350,8 @@
             this._useAsWebComponent = false;
             // @Output()
             // filtersClear: EventEmitter<void> = new EventEmitter<void>();
-            this.filtersChange = new core.EventEmitter();
-            this.fieldToggleChange = new core.EventEmitter();
+            this.filtersChange = new i0.EventEmitter();
+            this.fieldToggleChange = new i0.EventEmitter();
             this.expansionPanelHeaderHeight = '*';
         }
         Object.defineProperty(PepSmartFiltersComponent.prototype, "filters", {
@@ -437,30 +460,30 @@
         return PepSmartFiltersComponent;
     }());
     PepSmartFiltersComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'pep-smart-filters',
                     template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".smart-filters-container .title{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem);padding:0 .75rem;padding:0 var(--pep-spacing-md,.75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;-webkit-margin-end:.5rem;margin-inline-end:.5rem;-webkit-margin-end:var(--pep-spacing-sm,.5rem);margin-inline-end:var(--pep-spacing-sm,.5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}"]
                 },] }
     ];
     PepSmartFiltersComponent.ctorParameters = function () { return [
-        { type: core.ElementRef },
+        { type: i0.ElementRef },
         { type: ngxLib.PepLayoutService }
     ]; };
     PepSmartFiltersComponent.propDecorators = {
-        title: [{ type: core.Input }],
-        filters: [{ type: core.Input }],
-        fields: [{ type: core.Input }],
-        useAsWebComponent: [{ type: core.Input }],
-        filtersChange: [{ type: core.Output }],
-        fieldToggleChange: [{ type: core.Output }]
+        title: [{ type: i0.Input }],
+        filters: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        useAsWebComponent: [{ type: i0.Input }],
+        filtersChange: [{ type: i0.Output }],
+        fieldToggleChange: [{ type: i0.Output }]
     };
 
     var PepFilterActionsComponent = /** @class */ (function () {
         function PepFilterActionsComponent() {
-            this.clearClick = new core.EventEmitter();
-            this.applyClick = new core.EventEmitter();
+            this.clearClick = new i0.EventEmitter();
+            this.applyClick = new i0.EventEmitter();
         }
         PepFilterActionsComponent.prototype.clear = function () {
             this.clearClick.emit();
@@ -471,16 +494,16 @@
         return PepFilterActionsComponent;
     }());
     PepFilterActionsComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'pep-filter-actions',
                     template: "<div [formGroup]=\"form\" class=\"filter-actions pep-spacing-element-negative\">\n    <button mat-button class=\"pep-spacing-element pep-button sm weak\" (click)=\"clear()\">\n        {{ 'ACTIONS.CLEAR' | translate }}\n    </button>\n    <button mat-button class=\"pep-spacing-element pep-button sm strong\" (click)=\"apply()\" [disabled]=\"form.invalid\">\n        {{ 'ACTIONS.APPLY' | translate }}\n    </button>\n</div>",
                     styles: [".filter-actions{margin:1rem 0 calc(1rem / 2);margin:var(--pep-spacing-lg,1rem) 0 calc(var(--pep-spacing-lg, 1rem) / 2);display:flex;justify-content:flex-end}"]
                 },] }
     ];
     PepFilterActionsComponent.propDecorators = {
-        form: [{ type: core.Input }],
-        clearClick: [{ type: core.Output }],
-        applyClick: [{ type: core.Output }]
+        form: [{ type: i0.Input }],
+        clearClick: [{ type: i0.Output }],
+        applyClick: [{ type: i0.Output }]
     };
 
     var IPepSmartFilterOperator = /** @class */ (function () {
@@ -488,7 +511,7 @@
         }
         return IPepSmartFilterOperator;
     }());
-    var Equals = {
+    var Equals$1 = {
         id: 'eq',
         name: 'EQUAL',
         short: '=',
@@ -502,7 +525,7 @@
             // 'select',
         ],
     };
-    var NotEqual = {
+    var NotEqual$1 = {
         id: 'neq',
         name: 'NOT_EQUAL',
         short: '<>',
@@ -515,7 +538,7 @@
             // 'select',
         ],
     };
-    var LessThan = {
+    var LessThan$1 = {
         id: 'lt',
         name: 'LESS_THEN',
         short: '<',
@@ -527,7 +550,7 @@
     //     short: '<=',
     //     type: ['number'],
     // };
-    var GreaterThan = {
+    var GreaterThan$1 = {
         id: 'gt',
         name: 'GREATER_THEN',
         short: '>',
@@ -539,18 +562,18 @@
     //     short: '>=',
     //     type: ['number'],
     // };
-    var NumberRange = {
+    var NumberRange$1 = {
         id: 'numberRange',
         name: 'NUMBER_RANGE',
         short: 'Range',
         componentType: ['number'],
     };
-    // const Contains: Operator = {
-    //     id: 'contains',
-    //     name: 'Contains',
-    //     short: 'Contains',
-    //     type: ['text'],
-    // };
+    var Contains$1 = {
+        id: 'contains',
+        name: 'CONTAINS',
+        short: 'Contains',
+        componentType: ['text'],
+    };
     // const BeginsWith: Operator = {
     //     id: 'beginsWith',
     //     name: 'Begins With',
@@ -575,138 +598,189 @@
     //     short: 'Before',
     //     type: ['date'],
     // };
-    var InTheLast = {
+    var InTheLast$1 = {
         id: 'inTheLast',
         name: 'IN_THE_LAST',
         short: 'In the last',
         componentType: ['date'],
     };
-    var Today = {
+    var Today$1 = {
         id: 'today',
         name: 'TODAY',
         short: 'Today',
         componentType: ['date'],
     };
-    var ThisWeek = {
+    var ThisWeek$1 = {
         id: 'thisWeek',
         name: 'THIS_WEEK',
         short: 'This week',
         componentType: ['date'],
     };
-    var ThisMonth = {
+    var ThisMonth$1 = {
         id: 'thisMonth',
         name: 'THIS_MONTH',
         short: 'This month',
         componentType: ['date'],
     };
-    var DateRange = {
+    var DateRange$1 = {
         id: 'dateRange',
         name: 'DATE_RANGE',
         short: 'Range',
         componentType: ['date'],
     };
-    var DueIn = {
+    var DueIn$1 = {
         id: 'dueIn',
         name: 'DUE_IN',
         short: 'Due in',
         componentType: ['date'],
     };
-    var On = {
+    var On$1 = {
         id: 'on',
         name: 'ON',
         short: 'On',
         componentType: ['date'],
     };
-    var NotInTheLast = {
+    var NotInTheLast$1 = {
         id: 'notInTheLast',
         name: 'NOT_IN_THE_LAST',
         short: 'Not in the last',
         componentType: ['date'],
     };
-    var NotDueIn = {
+    var NotDueIn$1 = {
         id: 'notDueIn',
         name: 'NOT_DUE_IN',
         short: 'Not due in',
         componentType: ['date'],
     };
-    var IsEmpty = {
+    var IsEmpty$1 = {
         id: 'isEmpty',
         name: 'IS_EMPTY',
         short: 'Is empty',
         componentType: ['date'],
     };
-    var IsNotEmpty = {
+    var IsNotEmpty$1 = {
         id: 'isNotEmpty',
         name: 'IS_NOT_EMPTY',
         short: 'Is not empty',
         componentType: ['date'],
     };
-    var In = {
+    var In$1 = {
         id: 'in',
         name: 'IN',
         short: 'In',
         componentType: ['multi-select'],
     };
     var PepSmartFilterOperators = {
-        Equals: Equals,
-        NotEqual: NotEqual,
-        LessThan: LessThan,
+        Equals: Equals$1,
+        NotEqual: NotEqual$1,
+        LessThan: LessThan$1,
         // LessThanOrEquals: LessThanOrEquals,
-        GreaterThan: GreaterThan,
+        GreaterThan: GreaterThan$1,
         // GreaterThanOrEquals: GreaterThanOrEquals,
-        NumberRange: NumberRange,
-        // Contains: Contains,
+        NumberRange: NumberRange$1,
+        Contains: Contains$1,
         // BeginsWith: BeginsWith,
         // EndsWith: EndsWith,
         // After: After,
         // Before: Before,
-        InTheLast: InTheLast,
-        Today: Today,
-        ThisWeek: ThisWeek,
-        ThisMonth: ThisMonth,
-        DateRange: DateRange,
-        DueIn: DueIn,
-        On: On,
-        NotInTheLast: NotInTheLast,
-        NotDueIn: NotDueIn,
-        IsEmpty: IsEmpty,
-        IsNotEmpty: IsNotEmpty,
-        In: In,
+        InTheLast: InTheLast$1,
+        Today: Today$1,
+        ThisWeek: ThisWeek$1,
+        ThisMonth: ThisMonth$1,
+        DateRange: DateRange$1,
+        DueIn: DueIn$1,
+        On: On$1,
+        NotInTheLast: NotInTheLast$1,
+        NotDueIn: NotDueIn$1,
+        IsEmpty: IsEmpty$1,
+        IsNotEmpty: IsNotEmpty$1,
+        In: In$1,
     };
     var IPepSmartFilterOperatorUnit = /** @class */ (function () {
         function IPepSmartFilterOperatorUnit() {
         }
         return IPepSmartFilterOperatorUnit;
     }());
-    var Days = {
+    var Days$1 = {
         id: 'days',
         name: 'DAYS',
         componentType: ['date'],
     };
-    var Weeks = {
+    var Weeks$1 = {
         id: 'weeks',
         name: 'WEEKS',
         componentType: ['date'],
     };
-    var Months = {
+    var Months$1 = {
         id: 'months',
         name: 'MONTHS',
         componentType: ['date'],
     };
-    var Years = {
+    var Years$1 = {
         id: 'years',
         name: 'YEARS',
         componentType: ['date'],
     };
     var PepSmartFilterOperatorUnits = {
-        Days: Days,
-        Weeks: Weeks,
-        Months: Months,
-        Years: Years,
+        Days: Days$1,
+        Weeks: Weeks$1,
+        Months: Months$1,
+        Years: Years$1,
     };
 
+    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.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PepTypeConvertorService_Factory() { return new PepTypeConvertorService(); }, token: PepTypeConvertorService, providedIn: "root" });
+    PepTypeConvertorService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    PepTypeConvertorService.ctorParameters = function () { return []; };
+
     var BaseFilterComponent = /** @class */ (function () {
-        function BaseFilterComponent(viewContainerRef, injector, resolver, builder, translate, validator, renderer) {
+        function BaseFilterComponent(viewContainerRef, injector, resolver, builder, translate, validator, renderer, typeConvertorService) {
             this.viewContainerRef = viewContainerRef;
             this.injector = injector;
             this.resolver = resolver;
@@ -714,9 +788,14 @@
             this.translate = translate;
             this.validator = validator;
             this.renderer = renderer;
+            this.typeConvertorService = typeConvertorService;
             this._fieldIdWithNoDots = '';
-            this.filterClear = new core.EventEmitter();
-            this.filterChange = new core.EventEmitter();
+            this.emitOnChange = false;
+            this.inline = false;
+            this.showActionButtons = true;
+            this.renderTitle = true;
+            this.filterClear = new i0.EventEmitter();
+            this.filterChange = new i0.EventEmitter();
             this.OPERATORS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATORS';
             this.OPERATOR_UNITS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATOR_UNITS';
             this._destroyed = new rxjs.Subject();
@@ -744,6 +823,14 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BaseFilterComponent.prototype, "parentForm", {
+            set: function (form) {
+                this._parentForm = form;
+                this.updateParentForm();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BaseFilterComponent.prototype, "operator", {
             get: function () {
                 return this._operator;
@@ -772,10 +859,7 @@
             },
             set: function (operatorUnit) {
                 // Validate operator unit
-                if (operatorUnit === undefined) {
-                    this._operatorUnit = undefined;
-                }
-                else {
+                if (operatorUnit) {
                     var index = this.operatorUnits.findIndex(function (ou) { return ou.id === operatorUnit.id; });
                     if (index >= 0) {
                         this._operatorUnit = this.operatorUnits[index];
@@ -784,6 +868,9 @@
                         this._operatorUnit = this.operatorUnits[0];
                     }
                 }
+                else {
+                    this._operatorUnit = undefined;
+                }
             },
             enumerable: false,
             configurable: true
@@ -829,12 +916,14 @@
             var formValue = {};
             formValue[this.firstControlKey] = [];
             formValue[this.secondControlKey] = [];
-            // this.form.patchValue(formValue);
+            // this.form.patchValue(formValue);        
             this.form = this.builder.group(formValue);
             // this.form[this.firstControlKey] = [];
             // this.form[this.secondControlKey] = [];
             this.setupOperators();
-            this.createActionsComponent();
+            if (this.showActionButtons) {
+                this.createActionsComponent();
+            }
         };
         BaseFilterComponent.prototype.setupOperators = function () {
             var _this = this;
@@ -879,6 +968,16 @@
                 this.clearFilter(false);
             }
         };
+        BaseFilterComponent.prototype.updateParentForm = function () {
+            this._parentForm.setControl('fieldId', this.builder.control(this.field.id));
+            this._parentForm.setControl('fieldType', this.builder.control(this.field.type));
+            this._parentForm.setControl('operator', this.builder.control(this.operator));
+            this._parentForm.setControl('operatorUnit', this.builder.control(this.operatorUnit));
+            this._parentForm.setControl('values', this.builder.group({
+                first: this.firstControl,
+                second: this.secondControl
+            }));
+        };
         BaseFilterComponent.prototype.getDestroyer = function () {
             return operators.takeUntil(this._destroyed);
         };
@@ -893,8 +992,8 @@
         };
         // Set default validators - some childs override this.
         BaseFilterComponent.prototype.setFieldsStateAndValidators = function () {
-            this.firstControl.setValidators(forms.Validators.required);
-            this.secondControl.setValidators(forms.Validators.required);
+            this.firstControl.setValidators(i1.Validators.required);
+            this.secondControl.setValidators(i1.Validators.required);
             this.secondControl.disable();
         };
         // Return undefined - some childs override this.
@@ -943,34 +1042,123 @@
         BaseFilterComponent.prototype.ngOnDestroy = function () {
             this._destroyed.next();
             this._destroyed.complete();
-            this.actionsContainerRef.destroy();
+            if (this.showActionButtons) {
+                this.actionsContainerRef.destroy();
+            }
         };
         return BaseFilterComponent;
     }());
     BaseFilterComponent.decorators = [
-        { type: core.Directive, args: [{},] }
+        { type: i0.Directive, args: [{},] }
     ];
     BaseFilterComponent.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: core.Injector },
-        { type: core.ComponentFactoryResolver },
-        { type: forms.FormBuilder },
-        { type: core$1.TranslateService },
+        { type: i0.ViewContainerRef },
+        { type: i0.Injector },
+        { type: i0.ComponentFactoryResolver },
+        { type: i1.FormBuilder },
+        { type: core.TranslateService },
         { type: ngxLib.PepValidatorService },
-        { type: core.Renderer2 }
+        { type: i0.Renderer2 },
+        { type: PepTypeConvertorService }
     ]; };
     BaseFilterComponent.propDecorators = {
-        field: [{ type: core.Input }],
-        filter: [{ type: core.Input }],
-        filterClear: [{ type: core.Output }],
-        filterChange: [{ type: core.Output }]
+        field: [{ type: i0.Input }],
+        filter: [{ type: i0.Input }],
+        parentForm: [{ type: i0.Input }],
+        emitOnChange: [{ type: i0.Input }],
+        inline: [{ type: i0.Input }],
+        showActionButtons: [{ type: i0.Input }],
+        renderTitle: [{ type: i0.Input }],
+        filterClear: [{ type: i0.Output }],
+        filterChange: [{ type: i0.Output }]
     };
 
+    var PepTextFilterComponent = /** @class */ (function (_super) {
+        __extends(PepTextFilterComponent, _super);
+        function PepTextFilterComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.chooseTypeOptions = [];
+            _this.operatorWidth = '38%';
+            _this.firstControlWidth = '62%';
+            return _this;
+        }
+        PepTextFilterComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.firstControl.valueChanges
+                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
+                .subscribe(function () {
+                _this.setFieldsStateAndValidators();
+            });
+        };
+        // Override
+        PepTextFilterComponent.prototype.getDefaultOperator = function () {
+            return PepSmartFilterOperators.Equals;
+        };
+        // Override
+        PepTextFilterComponent.prototype.getFilterValue = function () {
+            var filterValue = {
+                first: this.firstControl.value,
+            };
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                filterValue['second'] = this.secondControl.value;
+            }
+            return filterValue;
+        };
+        // Override
+        PepTextFilterComponent.prototype.loadOperatorsOptions = function () {
+            var _this = this;
+            this.chooseTypeOptions = this.operators.map(function (operator) {
+                return {
+                    key: operator.id,
+                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
+                };
+            });
+        };
+        // Override
+        PepTextFilterComponent.prototype.setFieldsStateAndValidators = function () {
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                var firstValidators = [i1.Validators.required];
+                if (this.secondControl.value) {
+                    firstValidators.push(this.validator.isLessThan(this.secondControl));
+                }
+                this.firstControl.setValidators(firstValidators);
+            }
+            else {
+                _super.prototype.setFieldsStateAndValidators.call(this);
+            }
+        };
+        PepTextFilterComponent.prototype.onOperatorChanged = function (value) {
+            var operator = Object.values(PepSmartFilterOperators).find(function (operator) { return operator.id === value; });
+            this.operator = operator;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepTextFilterComponent.prototype.onValueChanged = function () {
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        return PepTextFilterComponent;
+    }(BaseFilterComponent));
+    PepTextFilterComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'pep-text-filter',
+                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n        [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n        [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n    </pep-select>\n    <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n        [label]=\"'SMART_FILTERS.AMOUNT' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n        [type]=\"field.type\" [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n        (valueChange)=\"onValueChanged()\">\n    </pep-textbox>\n</div>",
+                    styles: [""]
+                },] }
+    ];
+
     var PepBooleanFilterComponent = /** @class */ (function (_super) {
         __extends(PepBooleanFilterComponent, _super);
         function PepBooleanFilterComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        PepBooleanFilterComponent.prototype.ngOnInit = function () {
+        };
         // Override
         PepBooleanFilterComponent.prototype.getDefaultOperator = function () {
             return PepSmartFilterOperators.Equals;
@@ -980,12 +1168,20 @@
             var filterValue = { first: this.firstControl.value || false };
             return filterValue;
         };
+        PepBooleanFilterComponent.prototype.onRadioChanged = function () {
+        };
+        PepBooleanFilterComponent.prototype.onValueChanged = function (value) {
+            this.firstControl.setValue(value);
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
         return PepBooleanFilterComponent;
     }(BaseFilterComponent));
     PepBooleanFilterComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'pep-boolean-filter',
-                    template: "<div [formGroup]=\"form\">\n    <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\">\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n            {{ 'CHECKBOX.TRUE' | translate }}\n        </mat-radio-button>\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n            {{ 'CHECKBOX.FALSE' | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</div>",
+                    template: "<ng-container *ngIf=\"inline\">\n    <pep-select [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"typeConvertorService.booleans\"\n        [renderTitle]=\"renderTitle\" [emptyOption]=\"true\" (valueChange)=\"onValueChanged($event)\">\n    </pep-select>\n\n</ng-container>\n\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\" (change)=\"onRadioChanged()\">\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n            {{ 'CHECKBOX.TRUE' | translate }}\n        </mat-radio-button>\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n            {{ 'CHECKBOX.FALSE' | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</div>",
                     styles: [".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}"]
                 },] }
     ];
@@ -999,6 +1195,11 @@
             _this.chooseTimeUnitOptions = [];
             return _this;
         }
+        PepDateFilterComponent.prototype.ngOnInit = function () {
+            if (this.inline) {
+                this.setControlsWidth();
+            }
+        };
         // Override
         PepDateFilterComponent.prototype.getDefaultOperator = function () {
             return PepSmartFilterOperators.InTheLast;
@@ -1045,16 +1246,16 @@
         PepDateFilterComponent.prototype.setFieldsStateAndValidators = function () {
             this.firstControl.enable();
             if (this.operator === PepSmartFilterOperators.DateRange) {
-                this.firstControl.setValidators(forms.Validators.required);
+                this.firstControl.setValidators(i1.Validators.required);
                 this.secondControl.enable();
-                this.secondControl.setValidators(forms.Validators.required);
+                this.secondControl.setValidators(i1.Validators.required);
             }
             else if (this.operator === PepSmartFilterOperators.InTheLast ||
                 this.operator === PepSmartFilterOperators.NotInTheLast ||
                 this.operator === PepSmartFilterOperators.DueIn ||
                 this.operator === PepSmartFilterOperators.NotDueIn) {
                 this.firstControl.setValidators([
-                    forms.Validators.required,
+                    i1.Validators.required,
                     this.validator.numberValidator(),
                 ]);
                 this.secondControl.disable();
@@ -1072,21 +1273,59 @@
                 _super.prototype.setFieldsStateAndValidators.call(this);
             }
         };
+        PepDateFilterComponent.prototype.setControlsWidth = function () {
+            if (this.operator === PepSmartFilterOperators.Today ||
+                this.operator === PepSmartFilterOperators.ThisWeek ||
+                this.operator === PepSmartFilterOperators.ThisMonth ||
+                this.operator === PepSmartFilterOperators.IsEmpty ||
+                this.operator === PepSmartFilterOperators.IsNotEmpty) {
+                this.operatorWidth = 'auto';
+                this.fieldsWidth = '0%';
+            }
+            else if (this.operator === PepSmartFilterOperators.On) {
+                this.operatorWidth = '38%';
+                this.fieldsWidth = '62%';
+            }
+            else {
+                this.operatorWidth = '30%';
+                this.fieldsWidth = '70%';
+            }
+        };
         PepDateFilterComponent.prototype.onOperatorChanged = function (value) {
             var operator = Object.values(PepSmartFilterOperators).find(function (operator) { return operator.id === value; });
             this.operator = operator;
             this.operatorUnit = this.getDefaultOperatorUnit();
+            if (this.inline) {
+                this.setControlsWidth();
+            }
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
         };
         PepDateFilterComponent.prototype.onTimeUnitChanged = function (value) {
             var operatorUnit = Object.values(PepSmartFilterOperatorUnits).find(function (operatorUnit) { return operatorUnit.id === value; });
             this.operatorUnit = operatorUnit;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepDateFilterComponent.prototype.onDateValueChanged = function () {
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
         };
         return PepDateFilterComponent;
     }(BaseFilterComponent));
     PepDateFilterComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'pep-date-filter',
-                    template: "<div [formGroup]=\"form\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\" fxLayoutGap=\"1rem\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"'int'\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" fxFlex=\"50%\" [emptyOption]=\"false\"\n            [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        fxLayoutGap=\"1rem\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [value]=\"firstControl.value\" [maxDateValue]=\"secondControl.value\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [value]=\"secondControl.value\" [minDateValue]=\"firstControl.value\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl.value\">\n        </pep-date>\n    </ng-container>\n</div>",
+                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\n            [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\n            [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\n            [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </ng-container>\n</div>",
                     styles: [""]
                 },] }
     ];
@@ -1102,15 +1341,39 @@
         function PepMultiSelectFilterComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.options = [];
-            _this.searchControl = new forms.FormControl();
+            _this.searchControl = new i1.FormControl();
+            //inline props
+            _this.selected = '';
+            _this.inlineOptions = [];
             _this.MAX_OPTIONS_TO_SHOW = 6.35;
             _this.numberOptionsToShowSearch = 10;
             return _this;
         }
         PepMultiSelectFilterComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit;
+            if (this.inline) {
+                this.inlineControlInit();
+            }
+            else {
+                this.noneInlineControlInit();
+            }
+        };
+        PepMultiSelectFilterComponent.prototype.ngAfterViewInit = function () {
+            // Calc for the first time.
+            this.calcOptionsHeight(this.options.length);
+        };
+        PepMultiSelectFilterComponent.prototype.inlineControlInit = function () {
+            var _a, _b, _c, _d;
+            //load options from field        
+            this.inlineOptions = ((_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this.field.options : [];
+            // Init the selected values from first value.        
+            if (((_d = (_c = this.firstControl) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+                this.selected = this.firstControl.value.join(';');
+            }
+        };
+        PepMultiSelectFilterComponent.prototype.noneInlineControlInit = function () {
             var _this = this;
             var _a;
-            _super.prototype.ngOnInit;
             if (((_a = this.field.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 this.options = this.field.options.map(function (opt) {
                     return { value: opt.value, count: opt.count, selected: false };
@@ -1141,10 +1404,6 @@
                 }, 125);
             });
         };
-        PepMultiSelectFilterComponent.prototype.ngAfterViewInit = function () {
-            // Calc for the first time.
-            this.calcOptionsHeight(this.options.length);
-        };
         PepMultiSelectFilterComponent.prototype.initOptionsSelectedValues = function (selectedValues) {
             this.options.forEach(function (opt) {
                 var isValueSelected = selectedValues && selectedValues.includes(opt.value);
@@ -1172,13 +1431,20 @@
         };
         // Override
         PepMultiSelectFilterComponent.prototype.getFilterValue = function () {
-            var selectedValues = this.options
-                .filter(function (opt) { return opt.selected; })
-                .map(function (opt) { return opt.value; });
-            var filterValue = {
-                first: selectedValues,
-            };
-            return selectedValues.length > 0 ? filterValue : null;
+            if (this.inline) {
+                return {
+                    first: this.firstControl.value
+                };
+            }
+            else {
+                var selectedValues = this.options
+                    .filter(function (opt) { return opt.selected; })
+                    .map(function (opt) { return opt.value; });
+                var filterValue = {
+                    first: selectedValues,
+                };
+                return selectedValues.length > 0 ? filterValue : null;
+            }
         };
         // Override
         PepMultiSelectFilterComponent.prototype.initFilter = function () {
@@ -1189,18 +1455,30 @@
             option.selected = event.checked;
             this.firstControl.setValue(this.options.filter(function (opt) { return opt.selected; }).map(function (opt) { return opt.value; }), { emitEvent: false });
         };
+        PepMultiSelectFilterComponent.prototype.onMultiSelectChanged = function (value) {
+            if (value) {
+                var selected = value.split(';');
+                this.firstControl.setValue(selected);
+            }
+            else {
+                this.firstControl.setValue(null);
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
         return PepMultiSelectFilterComponent;
     }(BaseFilterComponent));
     PepMultiSelectFilterComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'pep-multi-select-filter',
-                    template: "<div [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>",
+                    template: "<ng-container *ngIf=\"inline\">\n    <pep-select [key]=\"'multi1'\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n        [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n        (valueChange)=\"onMultiSelectChanged($event)\">\n    </pep-select>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>",
                     styles: [".multi-select-options{margin:.5rem calc(.25rem * -1) 0;margin:var(--pep-spacing-sm,.5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(.5rem * -1) calc(.25rem * -1) 0;margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:.5rem .75rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-md,.75rem)}.multi-select-options .flip-scroll{padding:.5rem .25rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-xs,.25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll.rtl,.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;-webkit-padding-end:0;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout .mat-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:flex;justify-content:space-between;align-items:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}"]
                 },] }
     ];
     PepMultiSelectFilterComponent.propDecorators = {
-        optionsContainer: [{ type: core.ViewChild, args: ['optionsContainer',] }],
-        virtualScroller: [{ type: core.ViewChild, args: [ngxVirtualScroller.VirtualScrollerComponent,] }]
+        optionsContainer: [{ type: i0.ViewChild, args: ['optionsContainer',] }],
+        virtualScroller: [{ type: i0.ViewChild, args: [ngxVirtualScroller.VirtualScrollerComponent,] }]
     };
 
     var PepNumberFilterComponent = /** @class */ (function (_super) {
@@ -1209,6 +1487,8 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.PepSmartFilterOperators = PepSmartFilterOperators;
             _this.chooseTypeOptions = [];
+            _this.operatorWidth = '38%';
+            _this.firstControlWidth = '62%';
             return _this;
         }
         PepNumberFilterComponent.prototype.ngOnInit = function () {
@@ -1223,6 +1503,7 @@
                 .subscribe(function () {
                 _this.setFieldsStateAndValidators();
             });
+            this.setControlsWidth();
         };
         // Override
         PepNumberFilterComponent.prototype.getDefaultOperator = function () {
@@ -1251,13 +1532,13 @@
         // Override
         PepNumberFilterComponent.prototype.setFieldsStateAndValidators = function () {
             if (this.operator === PepSmartFilterOperators.NumberRange) {
-                var firstValidators = [forms.Validators.required];
+                var firstValidators = [i1.Validators.required];
                 if (this.secondControl.value) {
                     firstValidators.push(this.validator.isLessThan(this.secondControl));
                 }
                 this.firstControl.setValidators(firstValidators);
                 this.secondControl.enable();
-                var secondValidators = [forms.Validators.required];
+                var secondValidators = [i1.Validators.required];
                 if (this.firstControl.value) {
                     secondValidators.push(this.validator.isGreaterThan(this.firstControl));
                 }
@@ -1267,72 +1548,40 @@
                 _super.prototype.setFieldsStateAndValidators.call(this);
             }
         };
+        PepNumberFilterComponent.prototype.setControlsWidth = function () {
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                this.operatorWidth = '30%';
+            }
+            else {
+                this.operatorWidth = '38%';
+            }
+        };
         PepNumberFilterComponent.prototype.onOperatorChanged = function (value) {
             var operator = Object.values(PepSmartFilterOperators).find(function (operator) { return operator.id === value; });
             this.operator = operator;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+            this.setControlsWidth();
+        };
+        PepNumberFilterComponent.prototype.onValueChanged = function () {
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
         };
         return PepNumberFilterComponent;
     }(BaseFilterComponent));
     PepNumberFilterComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'pep-number-filter',
-                    template: "<div [formGroup]=\"form\">\n    <ng-container>\n        <pep-select [key]=\"'typeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.TYPE' | translate\"\n            [emptyOption]=\"false\" [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator !== PepSmartFilterOperators.NumberRange\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [type]=\"field.type\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\">\n        </pep-textbox>\n    </div>\n    <div *ngIf=\"operator === PepSmartFilterOperators.NumberRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        fxLayoutGap=\"1rem\">\n        <!-- Min number -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\" [maxValue]=\"secondControl.value\">\n        </pep-textbox>\n        <!-- Max number -->\n        <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type\" [formattedValue]=\"secondControl.value\"\n            [value]=\"secondControl.value\" [minValue]=\"firstControl.value\">\n        </pep-textbox>\n    </div>\n</div>",
+                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator !== PepSmartFilterOperators.NumberRange\" [fxFlex]=\"inline ? firstControlWidth : null\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </div>\n    <div *ngIf=\"operator === PepSmartFilterOperators.NumberRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\">\n        <!-- Min number -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            [maxValue]=\"secondControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n        <!-- Max number -->\n        <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n            [formattedValue]=\"secondControl?.value || ''\" [value]=\"secondControl?.value || ''\"\n            [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </div>\n</div>",
                     styles: [""]
                 },] }
     ];
 
-    var PepSmartFiltersModule = /** @class */ (function () {
-        function PepSmartFiltersModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([
-                icon.pepIconNumberMinus,
-                icon.pepIconNumberPlus,
-            ]);
-        }
-        return PepSmartFiltersModule;
-    }());
-    PepSmartFiltersModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        flexLayout.FlexLayoutModule,
-                        // Material modules
-                        core$2.MatCommonModule,
-                        checkbox.MatCheckboxModule,
-                        chips.MatChipsModule,
-                        expansion.MatExpansionModule,
-                        icon$1.MatIconModule,
-                        formField.MatFormFieldModule,
-                        input.MatInputModule,
-                        radio.MatRadioModule,
-                        // External modules
-                        ngxVirtualScroller.VirtualScrollerModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        checkbox$1.PepCheckboxModule,
-                        date.PepDateModule,
-                        select.PepSelectModule,
-                        textbox.PepTextboxModule,
-                        search.PepSearchModule,
-                        icon.PepIconModule,
-                    ],
-                    exports: [PepSmartFiltersComponent],
-                    declarations: [
-                        // BaseFilterComponent,
-                        PepSmartFiltersComponent,
-                        PepFilterActionsComponent,
-                        PepBooleanFilterComponent,
-                        PepDateFilterComponent,
-                        PepMultiSelectFilterComponent,
-                        PepNumberFilterComponent,
-                    ],
-                },] }
-    ];
-    PepSmartFiltersModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
-    ]; };
-
     // Base field
     // ------------------------------
     var PepSmartFilterBaseField = /** @class */ (function () {
@@ -1361,6 +1610,20 @@
         });
         return PepSmartFilterBaseField;
     }());
+    // Text field
+    // ------------------------------
+    var PepSmartFilterTextField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterTextField, _super);
+        function PepSmartFilterTextField(field) {
+            var _this = _super.call(this, field) || this;
+            _this._componentType = 'text';
+            return _this;
+        }
+        PepSmartFilterTextField.prototype.getType = function () {
+            return 'text';
+        };
+        return PepSmartFilterTextField;
+    }(PepSmartFilterBaseField));
     // Boolean field
     // ------------------------------
     var PepSmartFilterBooleanField = /** @class */ (function (_super) {
@@ -1472,6 +1735,9 @@
         return PepSmartFilterPercentageField;
     }(PepSmartFilterNumberBaseField));
 
+    function createTextSmartFilterField(data) {
+        return new PepSmartFilterTextField(data);
+    }
     function createBooleanSmartFilterField(data) {
         return new PepSmartFilterBooleanField(data);
     }
@@ -1499,6 +1765,9 @@
     function createSmartFilterField(data, type) {
         var field;
         switch (type) {
+            case 'text':
+                field = createTextSmartFilterField(data);
+                break;
             case 'boolean':
                 field = createBooleanSmartFilterField(data);
                 break;
@@ -1541,6 +1810,987 @@
         };
     }
 
+    var Equals = {
+        legacy: 'IsEqual',
+        smartFilter: PepSmartFilterOperators.Equals,
+        type: ['boolean', 'int', 'text']
+    };
+    var NotEqual = {
+        legacy: 'IsNotEqual',
+        smartFilter: PepSmartFilterOperators.NotEqual,
+        type: null
+    };
+    var LessThan = {
+        legacy: '<',
+        smartFilter: PepSmartFilterOperators.LessThan,
+        type: null
+    };
+    var GreaterThan = {
+        legacy: '>',
+        smartFilter: PepSmartFilterOperators.GreaterThan,
+        type: null
+    };
+    /*
+    const GreaterThanOrEquals: IPepFilterBuilderOperator = {
+        legacy: {
+            operator: '>=',
+            type: 'Integer'
+        },
+        smartFilter: {
+            item: PepSmartFilterOperators.GreaterThanOrEquals,
+            type: 'int'
+        }
+    };
+
+    const LessThanOrEquals: IPepFilterBuilderOperator = {
+        legacy: {
+            operator: '<=',
+            type: 'Integer'
+        },
+        smartFilter: {
+            item: PepSmartFilterOperators.LessThanOrEquals,
+            type: 'int',
+            type: 'Integer'
+        }
+    }; */
+    var NumberRange = {
+        legacy: 'Between',
+        smartFilter: PepSmartFilterOperators.NumberRange,
+        type: ['int']
+    };
+    var Contains = {
+        legacy: 'Contains',
+        smartFilter: PepSmartFilterOperators.Contains,
+        type: null
+    };
+    /*
+    const BeginsWith: IPepFilterBuilderOperator = {
+        legacy: {
+            operator: 'BeginsWith',
+            type: 'String'
+        },
+        smartFilter: {
+            item: PepSmartFilterOperators.BeginsWith,
+            type: 'text'
+        }
+    };
+
+    const EndsWith: IPepFilterBuilderOperator = {
+        legacy: {
+            operator: 'EndsWith',
+            type: 'String'
+        },
+        smartFilter: {
+            item: PepSmartFilterOperators.EndsWith,
+            type: 'text'
+        }
+    };
+
+    const Before: IPepFilterBuilderOperator = {
+        legacy: {
+            operator: 'Before',
+            type: 'Date'
+        },
+        smartFilter: {
+            item: PepSmartFilterOperators.Before,
+            type: 'date'
+        }
+    };
+
+    const After: IPepFilterBuilderOperator = {
+        legacy: {
+            operator: 'After',
+            type: 'Date'
+        },
+        smartFilter: {
+            item: PepSmartFilterOperators.After,
+            type: 'date'
+        }
+    }; */
+    var InTheLast = {
+        legacy: 'InTheLast',
+        smartFilter: PepSmartFilterOperators.InTheLast,
+        type: null
+    };
+    var NotInTheLast = {
+        legacy: 'NotInTheLast',
+        smartFilter: PepSmartFilterOperators.NotInTheLast,
+        type: null
+    };
+    var Today = {
+        legacy: 'Today',
+        smartFilter: PepSmartFilterOperators.Today,
+        type: null
+    };
+    var ThisWeek = {
+        legacy: 'ThisWeek',
+        smartFilter: PepSmartFilterOperators.ThisWeek,
+        type: null
+    };
+    var ThisMonth = {
+        legacy: 'ThisMonth',
+        smartFilter: PepSmartFilterOperators.ThisMonth,
+        type: null
+    };
+    var DateRange = {
+        legacy: 'Between',
+        smartFilter: PepSmartFilterOperators.DateRange,
+        type: ['date-time']
+    };
+    var DueIn = {
+        legacy: 'DueIn',
+        smartFilter: PepSmartFilterOperators.DueIn,
+        type: null
+    };
+    var NotDueIn = {
+        legacy: 'NotDueIn',
+        smartFilter: PepSmartFilterOperators.NotDueIn,
+        type: null
+    };
+    var On = {
+        legacy: 'On',
+        smartFilter: PepSmartFilterOperators.On,
+        type: null
+    };
+    var IsEmpty = {
+        legacy: 'IsEmpty',
+        smartFilter: PepSmartFilterOperators.IsEmpty,
+        type: null
+    };
+    var IsNotEmpty = {
+        legacy: 'IsNotEmpty',
+        smartFilter: PepSmartFilterOperators.IsNotEmpty,
+        type: null
+    };
+    var In = {
+        legacy: 'IsEqual',
+        smartFilter: PepSmartFilterOperators.In,
+        type: ['multi-select']
+    };
+    var PepFilterBuilderOperators = [
+        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 = PepFilterBuilderOperators.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 = PepFilterBuilderOperators.find(function (item) { return item.smartFilter === operator &&
+            (item.type === null || item.type.includes(type)); });
+        return legacyOperator ? legacyOperator.legacy : null;
+    }
+
+    var PepOperatorTypes;
+    (function (PepOperatorTypes) {
+        PepOperatorTypes["And"] = "AND";
+        PepOperatorTypes["Or"] = "OR";
+    })(PepOperatorTypes || (PepOperatorTypes = {}));
+
+    var FilterBuilderSectionComponent = /** @class */ (function () {
+        function FilterBuilderSectionComponent(filterBuilderService, typeConvertorService) {
+            this.filterBuilderService = filterBuilderService;
+            this.typeConvertorService = typeConvertorService;
+            this.remove = new i0.EventEmitter();
+            this.operatorChange = new i0.EventEmitter();
+        }
+        FilterBuilderSectionComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(FilterBuilderSectionComponent.prototype, "f", {
+            get: function () {
+                return this.form.controls;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FilterBuilderSectionComponent.prototype.onOperatorChanged = function (value) {
+            this.f.operator.setValue(value);
+            this.operatorChange.emit();
+        };
+        FilterBuilderSectionComponent.prototype.onAddRuleClicked = function () {
+            this.filterBuilderService.createItem(null, this.sectionContainer, this.form);
+        };
+        FilterBuilderSectionComponent.prototype.onAddRuleSetClicked = function () {
+            var result = this.filterBuilderService.createSection(PepOperatorTypes.And, this.sectionContainer, this.form, this.depth + 1);
+            this.filterBuilderService.createItem(null, result.containerRef, result.parentForm);
+        };
+        FilterBuilderSectionComponent.prototype.onDeleteSectionClicked = function () {
+            this.remove.emit();
+        };
+        return FilterBuilderSectionComponent;
+    }());
+    FilterBuilderSectionComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'pep-filter-builder-section',
+                    template: "<div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n    <div class=\"filter-section-container\" fxLayout=\"row\" fxLayoutAlign=\"flex-start start\" fxLayoutGap=\".5rem\">\n        <pep-select fxFlex=\"11\" [value]=\"f.operator.value\" xAlignment=\"left\" [options]=\"typeConvertorService.operators\"\n            [renderTitle]=\"false\" [emptyOption]=false (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n        <div fxFlex=\"89\" class=\"filter-section-wrapper\" fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <ng-container #sectionContainer></ng-container>\n            <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n                <pep-button value=\"Add Filter\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\" classNames=\"\"\n                    [disabled]=\"false\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                    (buttonClick)=\"onAddRuleClicked()\"></pep-button>\n                <ng-container *ngIf=\"depth < filterBuilderService.maxDepth-1\">\n                    <pep-button value=\"Add Filter Group\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\"\n                        classNames=\"\" [disabled]=\"false\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                        (buttonClick)=\"onAddRuleSetClicked()\"></pep-button>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <pep-button *ngIf=\"depth > 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: [".filter-section-wrapper{width:100%}.filter-section-container{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding:.5rem;width:100%}"]
+                },] }
+    ];
+    FilterBuilderSectionComponent.ctorParameters = function () { return [
+        { type: FilterBuilderService },
+        { type: PepTypeConvertorService }
+    ]; };
+    FilterBuilderSectionComponent.propDecorators = {
+        form: [{ type: i0.Input }],
+        depth: [{ type: i0.Input }],
+        remove: [{ type: i0.Output }],
+        operatorChange: [{ type: i0.Output }],
+        sectionContainer: [{ type: i0.ViewChild, args: ['sectionContainer', { read: i0.ViewContainerRef, static: true },] }]
+    };
+
+    var FilterBuilderItemComponent = /** @class */ (function () {
+        function FilterBuilderItemComponent(_fb) {
+            this._fb = _fb;
+            this._fields = [];
+            this._options = [];
+            this._selectedField = null;
+            this.filterChange = new i0.EventEmitter();
+            this.remove = new i0.EventEmitter();
+            this.test = {};
+            this.fieldWidth = 26;
+            this.filterWidth = 67.5;
+            this.binWidth = 6.5;
+            this.setupForm();
+        }
+        Object.defineProperty(FilterBuilderItemComponent.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.id,
+                            value: field.name
+                        };
+                    });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
+        Object.defineProperty(FilterBuilderItemComponent.prototype, "selected", {
+            set: function (value) {
+                if (value) {
+                    this._selectedField = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterBuilderItemComponent.prototype, "filter", {
+            set: function (value) {
+                if (value) {
+                    this._filter = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
+        Object.defineProperty(FilterBuilderItemComponent.prototype, "parentForm", {
+            set: function (value) {
+                if (value) {
+                    this._parentForm = value;
+                    this.addToParentForm();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
+        FilterBuilderItemComponent.prototype.ngOnInit = function () {
+        };
+        FilterBuilderItemComponent.prototype.setupForm = function () {
+            this._form = 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)
+                }),
+            });
+        };
+        FilterBuilderItemComponent.prototype.addToParentForm = function () {
+            this._parentForm.setControl(this.formKey, this._form);
+        };
+        FilterBuilderItemComponent.prototype.onFieldChanged = function (key) {
+            var _this = this;
+            var item = this._fields.find(function (field) { return field.id === key; });
+            this.setupForm();
+            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 : null;
+            }, 0);
+            this._filter = null;
+        };
+        FilterBuilderItemComponent.prototype.onFilterChanged = function () {
+            if (this._form.valid) {
+                this.filterChange.emit();
+            }
+        };
+        FilterBuilderItemComponent.prototype.onDeleteItemClicked = function () {
+            this.remove.emit();
+        };
+        return FilterBuilderItemComponent;
+    }());
+    FilterBuilderItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'pep-filter-builder-item',
+                    template: "<div class=\"filter-item-container\" 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\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-text-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'boolean'\">\n                    <pep-boolean-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-boolean-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'date'\">\n                    <pep-date-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-date-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'multi-select'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-multi-select-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'number'\">\n                    <pep-number-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-number-filter>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <!-- <ng-container *ngIf=\"(_parentForm | filterItemCounter) > 1\"> -->\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        <!-- </ng-container>         -->\n    </div>\n</div>",
+                    styles: [""]
+                },] }
+    ];
+    FilterBuilderItemComponent.ctorParameters = function () { return [
+        { type: i1.FormBuilder }
+    ]; };
+    FilterBuilderItemComponent.propDecorators = {
+        formKey: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        filter: [{ type: i0.Input }],
+        parentForm: [{ type: i0.Input }],
+        filterChange: [{ type: i0.Output }],
+        remove: [{ type: i0.Output }]
+    };
+
+    var PepFilterBuilderTypeMap = /** @class */ (function () {
+        function PepFilterBuilderTypeMap() {
+            this.loadTypes();
+        }
+        PepFilterBuilderTypeMap.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
+         */
+        PepFilterBuilderTypeMap.prototype.getSmartBuilderType = function (key) {
+            var item = this.map.get(key);
+            return item ? item : null;
+        };
+        return PepFilterBuilderTypeMap;
+    }());
+
+    var Days = {
+        legacy: 'Days',
+        smartFilter: PepSmartFilterOperatorUnits.Days
+    };
+    var Weeks = {
+        legacy: 'Weeks',
+        smartFilter: PepSmartFilterOperatorUnits.Weeks
+    };
+    var Months = {
+        legacy: 'Months',
+        smartFilter: PepSmartFilterOperatorUnits.Months
+    };
+    var Years = {
+        legacy: 'Years',
+        smartFilter: PepSmartFilterOperatorUnits.Years
+    };
+    var PepFilterBuilderOperationUnit = [
+        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 = PepFilterBuilderOperationUnit.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 = PepFilterBuilderOperationUnit.find(function (unit) { return unit.smartFilter === operationUnit; });
+        return legacyOperationUnit ? legacyOperationUnit.legacy : null;
+    }
+
+    var PepOutputFilterService = /** @class */ (function () {
+        function PepOutputFilterService() {
+        }
+        /**
+         * generates a legacy JSON
+         * @param json UI smart filters structure
+         * @param fields smart filter field
+         * @returns legacy JSON
+         */
+        PepOutputFilterService.prototype.generateJson = function (json, fields) {
+            this.initProperties();
+            this._fields = fields;
+            this.treeWalk(json);
+            return this._json ? this._json : this._firstItem ? this._firstItem : null;
+        };
+        /**
+         * reset properties
+         */
+        PepOutputFilterService.prototype.initProperties = function () {
+            this._json = undefined;
+            this._firstItem = undefined;
+            this._complexIdCounter = 1;
+            this._expressionIdCounter = 1;
+        };
+        /**
+         * a recursive function dynamically builds legacy JSON structure
+         * @param current UI object represents either a section or filter component
+         */
+        PepOutputFilterService.prototype.treeWalk = function (current) {
+            var _this = this;
+            Object.keys(current).forEach(function (key) {
+                if (key.includes('item')) {
+                    _this.createItem({
+                        ExpressionId: (_this._expressionIdCounter++).toString(),
+                        ApiName: current[key].fieldId,
+                        Operation: getLegacyOperator(current[key].operator, current[key].fieldType),
+                        Values: _this.getItemValues(current[key])
+                    }, current.operator);
+                }
+                else if (key.includes('section')) {
+                    _this.treeWalk(current[key]);
+                }
+            });
+        };
+        /**
+         * adds a filter to json and wrap it with complex operator
+         * @param item expression item
+         * @param operator complex operator
+         */
+        PepOutputFilterService.prototype.createItem = function (item, operator) {
+            if (this._json) {
+                this._json = this.createSection(this._json, item, operator);
+            }
+            else if (this._firstItem) {
+                this._json = this.createSection(this._firstItem, item, operator);
+            }
+            else {
+                this._firstItem = item;
+            }
+        };
+        /**
+         * creates a legacy complex object
+         * @param left LeftNode object
+         * @param right RightNode object
+         * @param operator AND/OR operator
+         * @returns complex object
+         */
+        PepOutputFilterService.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
+         */
+        PepOutputFilterService.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 === PepSmartFilterOperators.In) { //multi select 
+                    values = current.values.first;
+                }
+                else if (current.operator === PepSmartFilterOperators.InTheLast ||
+                    current.operator === PepSmartFilterOperators.NotInTheLast ||
+                    current.operator === PepSmartFilterOperators.DueIn ||
+                    current.operator === PepSmartFilterOperators.NotDueIn) { //operation unit            
+                    values.push(current.values.first);
+                    if (current.operatorUnit) {
+                        values.push(getLegacyOperationUnit(current.operatorUnit));
+                    }
+                }
+                else {
+                    values.push(current.values.first);
+                    if (current.values.second) {
+                        values.push(current.values.second);
+                    }
+                }
+            }
+            return values;
+        };
+        /**
+         * generates an array of keys of multi-select control
+         * @param values an array of the selected values
+         * @param id filter's selected field
+         * @returns an array of keys
+         */
+        PepOutputFilterService.prototype.getFieldKeys = function (values, id) {
+            var keys = [];
+            var field = this._fields.find(function (item) { return item.id === id; });
+            if (field) {
+                keys = field === null || field === void 0 ? void 0 : field.options.filter(function (item) { return values.includes(item.value); }).map(function (option) { return option.key; });
+            }
+            return keys;
+        };
+        return PepOutputFilterService;
+    }());
+    PepOutputFilterService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PepOutputFilterService_Factory() { return new PepOutputFilterService(); }, token: PepOutputFilterService, providedIn: "root" });
+    PepOutputFilterService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    PepOutputFilterService.ctorParameters = function () { return []; };
+
+    var FilterBuilderService = /** @class */ (function () {
+        function FilterBuilderService(_fb, _resolver, _outputJsonService) {
+            this._fb = _fb;
+            this._resolver = _resolver;
+            this._outputJsonService = _outputJsonService;
+            this.MAX_STRUCTURE_DEPTH = 3;
+            this._outputJsonSubject = new rxjs.BehaviorSubject(null);
+            this.triggerOutputJson = this._outputJsonSubject.asObservable();
+        }
+        Object.defineProperty(FilterBuilderService.prototype, "maxDepth", {
+            get: function () {
+                return this.MAX_STRUCTURE_DEPTH;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * creates a dynamic filter structure
+         * might has a different structure than the input's due to merge of parent-child elements
+         * @param json legacy JSON
+         * @param fields an array of legacy fields
+         * @param containerRef reference to root element
+         */
+        FilterBuilderService.prototype.createFilterTree = function (json, fields, form, containerRef) {
+            this._form = form;
+            this._smartFilterFields = this.convertToSmartFilterFields(fields);
+            var result = this.createSection((json === null || json === void 0 ? void 0 : json.Operation) ? json.Operation : PepOperatorTypes.And, containerRef, this._form, 0);
+            if (json) {
+                this.flatten(json, json.LeftNode, result.containerRef, result.parentForm, 1);
+                this.flatten(json, json.RightNode, result.containerRef, result.parentForm, 1);
+            }
+        };
+        /**
+        * checks if the object contains property
+        * @param obj object
+        * @param prop property name
+        * @returns true if contains, false otherwise
+        */
+        FilterBuilderService.prototype.hasProperty = function (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop);
+        };
+        /**
+         * a recursive function dynamically builds filters structure
+         * @param parent legacy complex object
+         * @param current child legacy object (either another complex or expression type)
+         * @param containerRef parent element
+         * @param parentForm parent form
+         */
+        FilterBuilderService.prototype.flatten = function (parent, current, containerRef, parentForm, depth) {
+            if (this.hasProperty(current, 'ComplexId')) {
+                var section = current;
+                if (parent.Operation === current.Operation) {
+                    this.flatten(parent, section.LeftNode, containerRef, parentForm, depth);
+                    this.flatten(parent, section.RightNode, containerRef, parentForm, depth);
+                }
+                else {
+                    var result = this.createSection(section.Operation, containerRef, parentForm, depth);
+                    this.flatten(section, section.LeftNode, result.containerRef, result.parentForm, depth + 1);
+                    this.flatten(section, 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
+         */
+        FilterBuilderService.prototype.createSection = function (operator, containerRef, parentForm, depth) {
+            var _this = this;
+            var factory = this._resolver.resolveComponentFactory(FilterBuilderSectionComponent);
+            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.depth = depth;
+            componentRef.instance.form = sectionGroup;
+            componentRef.instance.remove.subscribe(function () {
+                parentForm.removeControl(formKey);
+                componentRef.destroy();
+                _this.createOutputJson();
+            });
+            componentRef.instance.operatorChange.subscribe(function () {
+                _this.createOutputJson();
+            });
+            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
+         */
+        FilterBuilderService.prototype.createItem = function (current, containerRef, parentForm) {
+            var _this = this;
+            var factory = this._resolver.resolveComponentFactory(FilterBuilderItemComponent);
+            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);
+                }
+            }
+            componentRef.instance.parentForm = parentForm;
+            componentRef.instance.filterChange.subscribe(function () {
+                _this.createOutputJson();
+            });
+            componentRef.instance.remove.subscribe(function () {
+                parentForm.removeControl(formKey);
+                componentRef.destroy();
+                _this.createOutputJson();
+            });
+        };
+        /**
+         * creates a smart filter object
+         * @param current filter legacy element
+         * @param field filter's selected field
+         * @returns smart filter object
+         */
+        FilterBuilderService.prototype.getFilter = function (current, field) {
+            var operator = getSmartBuilderOperator(current.Operation, field.type);
+            if (operator) {
+                var filterValues = this.getFilterValues(current, operator, field);
+                return 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 fields
+         */
+        FilterBuilderService.prototype.getSelectedField = function (current) {
+            var _a, _b;
+            if (current) {
+                var item = this._smartFilterFields.find(function (field) { return 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
+         */
+        FilterBuilderService.prototype.getFilterValues = function (current, operator, field) {
+            var _a, _b, _c, _d, _e;
+            var data = {
+                first: null,
+                second: null,
+                operationUnit: null
+            };
+            if (operator === 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 === PepSmartFilterOperators.InTheLast ||
+                operator === PepSmartFilterOperators.NotInTheLast ||
+                operator === PepSmartFilterOperators.DueIn ||
+                operator === 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
+         */
+        FilterBuilderService.prototype.convertToSmartFilterFields = function (fields) {
+            if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
+                var typeMapper_1 = new PepFilterBuilderTypeMap();
+                return fields.map(function (field) {
+                    var _a;
+                    return 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));
+                });
+            }
+            else {
+                return [];
+            }
+        };
+        /**
+         * creates a legacy output JSON
+         */
+        FilterBuilderService.prototype.createOutputJson = function () {
+            if (this._form.valid) {
+                var json = this._outputJsonService.generateJson(this._form.value, this._smartFilterFields);
+                this._outputJsonSubject.next(json);
+            }
+        };
+        return FilterBuilderService;
+    }());
+    FilterBuilderService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function FilterBuilderService_Factory() { return new FilterBuilderService(i0__namespace.ɵɵinject(i1__namespace.FormBuilder), i0__namespace.ɵɵinject(i0__namespace.ComponentFactoryResolver), i0__namespace.ɵɵinject(PepOutputFilterService)); }, token: FilterBuilderService, providedIn: "root" });
+    FilterBuilderService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    FilterBuilderService.ctorParameters = function () { return [
+        { type: i1.FormBuilder },
+        { type: i0.ComponentFactoryResolver },
+        { type: PepOutputFilterService }
+    ]; };
+
+    var FilterBuilderComponent = /** @class */ (function () {
+        function FilterBuilderComponent(_fb, _filterBuilderService) {
+            var _this = this;
+            this._fb = _fb;
+            this._filterBuilderService = _filterBuilderService;
+            this.json = null;
+            this.fields = new Array();
+            this.filters = new i0.EventEmitter();
+            this.formValidationChange = new i0.EventEmitter();
+            this._isFormValid = true;
+            this.setupForm();
+            this._formSubscription$ = this.form.valueChanges.subscribe(function (val) {
+                if (_this.form.valid !== _this._isFormValid) {
+                    _this._isFormValid = _this.form.valid;
+                    _this.formValidationChange.emit(_this._isFormValid);
+                }
+            });
+            this._outputJsonSubscription$ = this._filterBuilderService.triggerOutputJson.subscribe(function (outputJson) {
+                _this.filters.emit(outputJson);
+            });
+        }
+        FilterBuilderComponent.prototype.setupForm = function () {
+            this.form = this._fb.group({});
+        };
+        FilterBuilderComponent.prototype.ngOnInit = function () {
+            this._filterBuilderService.createFilterTree(this.json, this.fields, this.form, this.filterRoot);
+        };
+        /*
+        ngAfterViewInit() {
+            //this._filterBuilderService.createFilterTree(this.json, this.fields, this.form, this.filterRoot);
+        }
+
+        ngAfterViewChecked() {
+            //this._changeDetectionRef.detectChanges();
+        } */
+        FilterBuilderComponent.prototype.ngOnDestroy = function () {
+            if (this._formSubscription$) {
+                this._formSubscription$.unsubscribe();
+            }
+            if (this._outputJsonSubscription$) {
+                this._outputJsonSubscription$.unsubscribe();
+            }
+        };
+        return FilterBuilderComponent;
+    }());
+    FilterBuilderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'pep-filter-builder',
+                    template: "<!-- <div class=\"filter-builder-container\"> -->\n<ng-container #filterRoot></ng-container>\n<!-- </div> -->",
+                    styles: [""]
+                },] }
+    ];
+    FilterBuilderComponent.ctorParameters = function () { return [
+        { type: i1.FormBuilder },
+        { type: FilterBuilderService }
+    ]; };
+    FilterBuilderComponent.propDecorators = {
+        json: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        filters: [{ type: i0.Output }],
+        formValidationChange: [{ type: i0.Output }],
+        filterRoot: [{ type: i0.ViewChild, args: ['filterRoot', { read: i0.ViewContainerRef, static: true },] }]
+    };
+
+    var FilterItemCounterPipe = /** @class */ (function () {
+        function FilterItemCounterPipe() {
+        }
+        FilterItemCounterPipe.prototype.transform = function (container) {
+            console.log('init filter', container);
+            var counter = 0;
+            Object.keys(container.controls).forEach(function (item) {
+                if (item.includes('item') || item.includes('section')) {
+                    counter++;
+                }
+            });
+            console.log('filter counter', counter);
+            return counter;
+        };
+        return FilterItemCounterPipe;
+    }());
+    FilterItemCounterPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'filterItemCounter'
+                },] }
+    ];
+
+    var PepSmartFiltersModule = /** @class */ (function () {
+        function PepSmartFiltersModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([
+                icon.pepIconNumberMinus,
+                icon.pepIconNumberPlus,
+            ]);
+        }
+        return PepSmartFiltersModule;
+    }());
+    PepSmartFiltersModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        i1.ReactiveFormsModule,
+                        flexLayout.FlexLayoutModule,
+                        // Material modules
+                        core$1.MatCommonModule,
+                        checkbox.MatCheckboxModule,
+                        chips.MatChipsModule,
+                        expansion.MatExpansionModule,
+                        icon$1.MatIconModule,
+                        formField.MatFormFieldModule,
+                        input.MatInputModule,
+                        radio.MatRadioModule,
+                        // External modules
+                        ngxVirtualScroller.VirtualScrollerModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        checkbox$1.PepCheckboxModule,
+                        date.PepDateModule,
+                        select.PepSelectModule,
+                        textbox.PepTextboxModule,
+                        search.PepSearchModule,
+                        icon.PepIconModule,
+                        button.PepButtonModule,
+                    ],
+                    exports: [PepSmartFiltersComponent, FilterBuilderComponent],
+                    declarations: [
+                        // BaseFilterComponent,
+                        PepSmartFiltersComponent,
+                        PepFilterActionsComponent,
+                        PepTextFilterComponent,
+                        PepBooleanFilterComponent,
+                        PepDateFilterComponent,
+                        PepMultiSelectFilterComponent,
+                        PepNumberFilterComponent,
+                        FilterBuilderComponent,
+                        FilterBuilderSectionComponent,
+                        FilterBuilderItemComponent,
+                        FilterItemCounterPipe
+                    ],
+                },] }
+    ];
+    PepSmartFiltersModule.ctorParameters = function () { return [
+        { type: icon.PepIconRegistry }
+    ]; };
+
     /*
      * Public API Surface of ngx-lib/smart-filters
      */
@@ -1550,6 +2800,7 @@
      */
 
     exports.BaseFilterComponent = BaseFilterComponent;
+    exports.FilterBuilderComponent = FilterBuilderComponent;
     exports.IPepSmartFilterOperator = IPepSmartFilterOperator;
     exports.IPepSmartFilterOperatorUnit = IPepSmartFilterOperatorUnit;
     exports.PepBooleanFilterComponent = PepBooleanFilterComponent;
@@ -1570,10 +2821,18 @@
     exports.PepSmartFilterOperators = PepSmartFilterOperators;
     exports.PepSmartFilterPercentageField = PepSmartFilterPercentageField;
     exports.PepSmartFilterRealField = PepSmartFilterRealField;
+    exports.PepSmartFilterTextField = PepSmartFilterTextField;
     exports.PepSmartFiltersComponent = PepSmartFiltersComponent;
     exports.PepSmartFiltersModule = PepSmartFiltersModule;
     exports.createSmartFilter = createSmartFilter;
     exports.createSmartFilterField = createSmartFilterField;
+    exports.ɵa = FilterBuilderService;
+    exports.ɵb = PepOutputFilterService;
+    exports.ɵc = PepTextFilterComponent;
+    exports.ɵd = PepTypeConvertorService;
+    exports.ɵe = FilterBuilderSectionComponent;
+    exports.ɵf = FilterBuilderItemComponent;
+    exports.ɵg = FilterItemCounterPipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });