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

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

@@ -1,31 +1,8 @@
 (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/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);
+    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';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -350,8 +327,8 @@
             this._useAsWebComponent = false;
             // @Output()
             // filtersClear: EventEmitter<void> = new EventEmitter<void>();
-            this.filtersChange = new i0.EventEmitter();
-            this.fieldToggleChange = new i0.EventEmitter();
+            this.filtersChange = new core.EventEmitter();
+            this.fieldToggleChange = new core.EventEmitter();
             this.expansionPanelHeaderHeight = '*';
         }
         Object.defineProperty(PepSmartFiltersComponent.prototype, "filters", {
@@ -460,30 +437,30 @@
         return PepSmartFiltersComponent;
     }());
     PepSmartFiltersComponent.decorators = [
-        { type: i0.Component, args: [{
+        { type: core.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: i0.ChangeDetectionStrategy.OnPush,
+                    changeDetection: core.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: i0.ElementRef },
+        { type: core.ElementRef },
         { type: ngxLib.PepLayoutService }
     ]; };
     PepSmartFiltersComponent.propDecorators = {
-        title: [{ type: i0.Input }],
-        filters: [{ type: i0.Input }],
-        fields: [{ type: i0.Input }],
-        useAsWebComponent: [{ type: i0.Input }],
-        filtersChange: [{ type: i0.Output }],
-        fieldToggleChange: [{ type: i0.Output }]
+        title: [{ type: core.Input }],
+        filters: [{ type: core.Input }],
+        fields: [{ type: core.Input }],
+        useAsWebComponent: [{ type: core.Input }],
+        filtersChange: [{ type: core.Output }],
+        fieldToggleChange: [{ type: core.Output }]
     };
 
     var PepFilterActionsComponent = /** @class */ (function () {
         function PepFilterActionsComponent() {
-            this.clearClick = new i0.EventEmitter();
-            this.applyClick = new i0.EventEmitter();
+            this.clearClick = new core.EventEmitter();
+            this.applyClick = new core.EventEmitter();
         }
         PepFilterActionsComponent.prototype.clear = function () {
             this.clearClick.emit();
@@ -494,16 +471,16 @@
         return PepFilterActionsComponent;
     }());
     PepFilterActionsComponent.decorators = [
-        { type: i0.Component, args: [{
+        { type: core.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: i0.Input }],
-        clearClick: [{ type: i0.Output }],
-        applyClick: [{ type: i0.Output }]
+        form: [{ type: core.Input }],
+        clearClick: [{ type: core.Output }],
+        applyClick: [{ type: core.Output }]
     };
 
     var IPepSmartFilterOperator = /** @class */ (function () {
@@ -511,7 +488,7 @@
         }
         return IPepSmartFilterOperator;
     }());
-    var Equals$1 = {
+    var Equals = {
         id: 'eq',
         name: 'EQUAL',
         short: '=',
@@ -525,7 +502,7 @@
             // 'select',
         ],
     };
-    var NotEqual$1 = {
+    var NotEqual = {
         id: 'neq',
         name: 'NOT_EQUAL',
         short: '<>',
@@ -538,7 +515,7 @@
             // 'select',
         ],
     };
-    var LessThan$1 = {
+    var LessThan = {
         id: 'lt',
         name: 'LESS_THEN',
         short: '<',
@@ -550,7 +527,7 @@
     //     short: '<=',
     //     type: ['number'],
     // };
-    var GreaterThan$1 = {
+    var GreaterThan = {
         id: 'gt',
         name: 'GREATER_THEN',
         short: '>',
@@ -562,18 +539,18 @@
     //     short: '>=',
     //     type: ['number'],
     // };
-    var NumberRange$1 = {
+    var NumberRange = {
         id: 'numberRange',
         name: 'NUMBER_RANGE',
         short: 'Range',
         componentType: ['number'],
     };
-    var Contains$1 = {
-        id: 'contains',
-        name: 'CONTAINS',
-        short: 'Contains',
-        componentType: ['text'],
-    };
+    // const Contains: Operator = {
+    //     id: 'contains',
+    //     name: 'Contains',
+    //     short: 'Contains',
+    //     type: ['text'],
+    // };
     // const BeginsWith: Operator = {
     //     id: 'beginsWith',
     //     name: 'Begins With',
@@ -598,189 +575,138 @@
     //     short: 'Before',
     //     type: ['date'],
     // };
-    var InTheLast$1 = {
+    var InTheLast = {
         id: 'inTheLast',
         name: 'IN_THE_LAST',
         short: 'In the last',
         componentType: ['date'],
     };
-    var Today$1 = {
+    var Today = {
         id: 'today',
         name: 'TODAY',
         short: 'Today',
         componentType: ['date'],
     };
-    var ThisWeek$1 = {
+    var ThisWeek = {
         id: 'thisWeek',
         name: 'THIS_WEEK',
         short: 'This week',
         componentType: ['date'],
     };
-    var ThisMonth$1 = {
+    var ThisMonth = {
         id: 'thisMonth',
         name: 'THIS_MONTH',
         short: 'This month',
         componentType: ['date'],
     };
-    var DateRange$1 = {
+    var DateRange = {
         id: 'dateRange',
         name: 'DATE_RANGE',
         short: 'Range',
         componentType: ['date'],
     };
-    var DueIn$1 = {
+    var DueIn = {
         id: 'dueIn',
         name: 'DUE_IN',
         short: 'Due in',
         componentType: ['date'],
     };
-    var On$1 = {
+    var On = {
         id: 'on',
         name: 'ON',
         short: 'On',
         componentType: ['date'],
     };
-    var NotInTheLast$1 = {
+    var NotInTheLast = {
         id: 'notInTheLast',
         name: 'NOT_IN_THE_LAST',
         short: 'Not in the last',
         componentType: ['date'],
     };
-    var NotDueIn$1 = {
+    var NotDueIn = {
         id: 'notDueIn',
         name: 'NOT_DUE_IN',
         short: 'Not due in',
         componentType: ['date'],
     };
-    var IsEmpty$1 = {
+    var IsEmpty = {
         id: 'isEmpty',
         name: 'IS_EMPTY',
         short: 'Is empty',
         componentType: ['date'],
     };
-    var IsNotEmpty$1 = {
+    var IsNotEmpty = {
         id: 'isNotEmpty',
         name: 'IS_NOT_EMPTY',
         short: 'Is not empty',
         componentType: ['date'],
     };
-    var In$1 = {
+    var In = {
         id: 'in',
         name: 'IN',
         short: 'In',
         componentType: ['multi-select'],
     };
     var PepSmartFilterOperators = {
-        Equals: Equals$1,
-        NotEqual: NotEqual$1,
-        LessThan: LessThan$1,
+        Equals: Equals,
+        NotEqual: NotEqual,
+        LessThan: LessThan,
         // LessThanOrEquals: LessThanOrEquals,
-        GreaterThan: GreaterThan$1,
+        GreaterThan: GreaterThan,
         // GreaterThanOrEquals: GreaterThanOrEquals,
-        NumberRange: NumberRange$1,
-        Contains: Contains$1,
+        NumberRange: NumberRange,
+        // Contains: Contains,
         // BeginsWith: BeginsWith,
         // EndsWith: EndsWith,
         // After: After,
         // Before: Before,
-        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,
+        InTheLast: InTheLast,
+        Today: Today,
+        ThisWeek: ThisWeek,
+        ThisMonth: ThisMonth,
+        DateRange: DateRange,
+        DueIn: DueIn,
+        On: On,
+        NotInTheLast: NotInTheLast,
+        NotDueIn: NotDueIn,
+        IsEmpty: IsEmpty,
+        IsNotEmpty: IsNotEmpty,
+        In: In,
     };
     var IPepSmartFilterOperatorUnit = /** @class */ (function () {
         function IPepSmartFilterOperatorUnit() {
         }
         return IPepSmartFilterOperatorUnit;
     }());
-    var Days$1 = {
+    var Days = {
         id: 'days',
         name: 'DAYS',
         componentType: ['date'],
     };
-    var Weeks$1 = {
+    var Weeks = {
         id: 'weeks',
         name: 'WEEKS',
         componentType: ['date'],
     };
-    var Months$1 = {
+    var Months = {
         id: 'months',
         name: 'MONTHS',
         componentType: ['date'],
     };
-    var Years$1 = {
+    var Years = {
         id: 'years',
         name: 'YEARS',
         componentType: ['date'],
     };
     var PepSmartFilterOperatorUnits = {
-        Days: Days$1,
-        Weeks: Weeks$1,
-        Months: Months$1,
-        Years: Years$1,
+        Days: Days,
+        Weeks: Weeks,
+        Months: Months,
+        Years: Years,
     };
 
-    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, typeConvertorService) {
+        function BaseFilterComponent(viewContainerRef, injector, resolver, builder, translate, validator, renderer) {
             this.viewContainerRef = viewContainerRef;
             this.injector = injector;
             this.resolver = resolver;
@@ -788,14 +714,9 @@
             this.translate = translate;
             this.validator = validator;
             this.renderer = renderer;
-            this.typeConvertorService = typeConvertorService;
             this._fieldIdWithNoDots = '';
-            this.emitOnChange = false;
-            this.inline = false;
-            this.showActionButtons = true;
-            this.renderTitle = true;
-            this.filterClear = new i0.EventEmitter();
-            this.filterChange = new i0.EventEmitter();
+            this.filterClear = new core.EventEmitter();
+            this.filterChange = new core.EventEmitter();
             this.OPERATORS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATORS';
             this.OPERATOR_UNITS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATOR_UNITS';
             this._destroyed = new rxjs.Subject();
@@ -823,14 +744,6 @@
             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;
@@ -859,7 +772,10 @@
             },
             set: function (operatorUnit) {
                 // Validate operator unit
-                if (operatorUnit) {
+                if (operatorUnit === undefined) {
+                    this._operatorUnit = undefined;
+                }
+                else {
                     var index = this.operatorUnits.findIndex(function (ou) { return ou.id === operatorUnit.id; });
                     if (index >= 0) {
                         this._operatorUnit = this.operatorUnits[index];
@@ -868,9 +784,6 @@
                         this._operatorUnit = this.operatorUnits[0];
                     }
                 }
-                else {
-                    this._operatorUnit = undefined;
-                }
             },
             enumerable: false,
             configurable: true
@@ -916,14 +829,12 @@
             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();
-            if (this.showActionButtons) {
-                this.createActionsComponent();
-            }
+            this.createActionsComponent();
         };
         BaseFilterComponent.prototype.setupOperators = function () {
             var _this = this;
@@ -968,16 +879,6 @@
                 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);
         };
@@ -992,8 +893,8 @@
         };
         // Set default validators - some childs override this.
         BaseFilterComponent.prototype.setFieldsStateAndValidators = function () {
-            this.firstControl.setValidators(i1.Validators.required);
-            this.secondControl.setValidators(i1.Validators.required);
+            this.firstControl.setValidators(forms.Validators.required);
+            this.secondControl.setValidators(forms.Validators.required);
             this.secondControl.disable();
         };
         // Return undefined - some childs override this.
@@ -1042,123 +943,34 @@
         BaseFilterComponent.prototype.ngOnDestroy = function () {
             this._destroyed.next();
             this._destroyed.complete();
-            if (this.showActionButtons) {
-                this.actionsContainerRef.destroy();
-            }
+            this.actionsContainerRef.destroy();
         };
         return BaseFilterComponent;
     }());
     BaseFilterComponent.decorators = [
-        { type: i0.Directive, args: [{},] }
+        { type: core.Directive, args: [{},] }
     ];
     BaseFilterComponent.ctorParameters = function () { return [
-        { type: i0.ViewContainerRef },
-        { type: i0.Injector },
-        { type: i0.ComponentFactoryResolver },
-        { type: i1.FormBuilder },
-        { type: core.TranslateService },
+        { type: core.ViewContainerRef },
+        { type: core.Injector },
+        { type: core.ComponentFactoryResolver },
+        { type: forms.FormBuilder },
+        { type: core$1.TranslateService },
         { type: ngxLib.PepValidatorService },
-        { type: i0.Renderer2 },
-        { type: PepTypeConvertorService }
+        { type: core.Renderer2 }
     ]; };
     BaseFilterComponent.propDecorators = {
-        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 }]
+        field: [{ type: core.Input }],
+        filter: [{ type: core.Input }],
+        filterClear: [{ type: core.Output }],
+        filterChange: [{ type: core.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;
@@ -1168,20 +980,12 @@
             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: i0.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'pep-boolean-filter',
-                    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>",
+                    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>",
                     styles: [".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}"]
                 },] }
     ];
@@ -1195,11 +999,6 @@
             _this.chooseTimeUnitOptions = [];
             return _this;
         }
-        PepDateFilterComponent.prototype.ngOnInit = function () {
-            if (this.inline) {
-                this.setControlsWidth();
-            }
-        };
         // Override
         PepDateFilterComponent.prototype.getDefaultOperator = function () {
             return PepSmartFilterOperators.InTheLast;
@@ -1246,16 +1045,16 @@
         PepDateFilterComponent.prototype.setFieldsStateAndValidators = function () {
             this.firstControl.enable();
             if (this.operator === PepSmartFilterOperators.DateRange) {
-                this.firstControl.setValidators(i1.Validators.required);
+                this.firstControl.setValidators(forms.Validators.required);
                 this.secondControl.enable();
-                this.secondControl.setValidators(i1.Validators.required);
+                this.secondControl.setValidators(forms.Validators.required);
             }
             else if (this.operator === PepSmartFilterOperators.InTheLast ||
                 this.operator === PepSmartFilterOperators.NotInTheLast ||
                 this.operator === PepSmartFilterOperators.DueIn ||
                 this.operator === PepSmartFilterOperators.NotDueIn) {
                 this.firstControl.setValidators([
-                    i1.Validators.required,
+                    forms.Validators.required,
                     this.validator.numberValidator(),
                 ]);
                 this.secondControl.disable();
@@ -1273,59 +1072,21 @@
                 _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: i0.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'pep-date-filter',
-                    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>",
+                    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>",
                     styles: [""]
                 },] }
     ];
@@ -1341,39 +1102,15 @@
         function PepMultiSelectFilterComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.options = [];
-            _this.searchControl = new i1.FormControl();
-            //inline props
-            _this.selected = '';
-            _this.inlineOptions = [];
+            _this.searchControl = new forms.FormControl();
             _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 };
@@ -1404,6 +1141,10 @@
                 }, 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);
@@ -1431,20 +1172,13 @@
         };
         // Override
         PepMultiSelectFilterComponent.prototype.getFilterValue = function () {
-            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;
-            }
+            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 () {
@@ -1455,30 +1189,18 @@
             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: i0.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'pep-multi-select-filter',
-                    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>",
+                    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>",
                     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: i0.ViewChild, args: ['optionsContainer',] }],
-        virtualScroller: [{ type: i0.ViewChild, args: [ngxVirtualScroller.VirtualScrollerComponent,] }]
+        optionsContainer: [{ type: core.ViewChild, args: ['optionsContainer',] }],
+        virtualScroller: [{ type: core.ViewChild, args: [ngxVirtualScroller.VirtualScrollerComponent,] }]
     };
 
     var PepNumberFilterComponent = /** @class */ (function (_super) {
@@ -1487,8 +1209,6 @@
             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 () {
@@ -1503,7 +1223,6 @@
                 .subscribe(function () {
                 _this.setFieldsStateAndValidators();
             });
-            this.setControlsWidth();
         };
         // Override
         PepNumberFilterComponent.prototype.getDefaultOperator = function () {
@@ -1532,13 +1251,13 @@
         // Override
         PepNumberFilterComponent.prototype.setFieldsStateAndValidators = function () {
             if (this.operator === PepSmartFilterOperators.NumberRange) {
-                var firstValidators = [i1.Validators.required];
+                var firstValidators = [forms.Validators.required];
                 if (this.secondControl.value) {
                     firstValidators.push(this.validator.isLessThan(this.secondControl));
                 }
                 this.firstControl.setValidators(firstValidators);
                 this.secondControl.enable();
-                var secondValidators = [i1.Validators.required];
+                var secondValidators = [forms.Validators.required];
                 if (this.firstControl.value) {
                     secondValidators.push(this.validator.isGreaterThan(this.firstControl));
                 }
@@ -1548,40 +1267,72 @@
                 _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: i0.Component, args: [{
+        { type: core.Component, args: [{
                     selector: 'pep-number-filter',
-                    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>",
+                    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>",
                     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 () {
@@ -1610,20 +1361,6 @@
         });
         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) {
@@ -1735,9 +1472,6 @@
         return PepSmartFilterPercentageField;
     }(PepSmartFilterNumberBaseField));
 
-    function createTextSmartFilterField(data) {
-        return new PepSmartFilterTextField(data);
-    }
     function createBooleanSmartFilterField(data) {
         return new PepSmartFilterBooleanField(data);
     }
@@ -1765,9 +1499,6 @@
     function createSmartFilterField(data, type) {
         var field;
         switch (type) {
-            case 'text':
-                field = createTextSmartFilterField(data);
-                break;
             case 'boolean':
                 field = createBooleanSmartFilterField(data);
                 break;
@@ -1810,987 +1541,6 @@
         };
     }
 
-    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
      */
@@ -2800,7 +1550,6 @@
      */
 
     exports.BaseFilterComponent = BaseFilterComponent;
-    exports.FilterBuilderComponent = FilterBuilderComponent;
     exports.IPepSmartFilterOperator = IPepSmartFilterOperator;
     exports.IPepSmartFilterOperatorUnit = IPepSmartFilterOperatorUnit;
     exports.PepBooleanFilterComponent = PepBooleanFilterComponent;
@@ -2821,18 +1570,10 @@
     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 });