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

package/fesm2015/pepperi-addons-ngx-lib-smart-filters.js

@@ -1,7 +1,5 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ElementRef, Input, Output, Injectable, Directive, ViewContainerRef, Injector, ComponentFactoryResolver, Renderer2, ViewChild, Pipe, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ElementRef, Input, Output, Directive, ViewContainerRef, Injector, ComponentFactoryResolver, Renderer2, ViewChild, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/forms';
 import { Validators, FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatCommonModule } from '@angular/material/core';
@@ -19,10 +17,9 @@ import { PepDateModule } from '@pepperi-addons/ngx-lib/date';
 import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
 import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
 import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
-import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
 import { pepIconNumberMinus, pepIconNumberPlus, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
+import { Subject } from 'rxjs';
 import { takeUntil, distinctUntilChanged, startWith, map } from 'rxjs/operators';
-import { Subject, BehaviorSubject } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 
 class PepSmartFiltersComponent {
@@ -180,7 +177,7 @@ PepFilterActionsComponent.propDecorators = {
 
 class IPepSmartFilterOperator {
 }
-const Equals$1 = {
+const Equals = {
     id: 'eq',
     name: 'EQUAL',
     short: '=',
@@ -194,7 +191,7 @@ const Equals$1 = {
         // 'select',
     ],
 };
-const NotEqual$1 = {
+const NotEqual = {
     id: 'neq',
     name: 'NOT_EQUAL',
     short: '<>',
@@ -207,7 +204,7 @@ const NotEqual$1 = {
         // 'select',
     ],
 };
-const LessThan$1 = {
+const LessThan = {
     id: 'lt',
     name: 'LESS_THEN',
     short: '<',
@@ -219,7 +216,7 @@ const LessThan$1 = {
 //     short: '<=',
 //     type: ['number'],
 // };
-const GreaterThan$1 = {
+const GreaterThan = {
     id: 'gt',
     name: 'GREATER_THEN',
     short: '>',
@@ -231,18 +228,18 @@ const GreaterThan$1 = {
 //     short: '>=',
 //     type: ['number'],
 // };
-const NumberRange$1 = {
+const NumberRange = {
     id: 'numberRange',
     name: 'NUMBER_RANGE',
     short: 'Range',
     componentType: ['number'],
 };
-const 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',
@@ -267,177 +264,135 @@ const Contains$1 = {
 //     short: 'Before',
 //     type: ['date'],
 // };
-const InTheLast$1 = {
+const InTheLast = {
     id: 'inTheLast',
     name: 'IN_THE_LAST',
     short: 'In the last',
     componentType: ['date'],
 };
-const Today$1 = {
+const Today = {
     id: 'today',
     name: 'TODAY',
     short: 'Today',
     componentType: ['date'],
 };
-const ThisWeek$1 = {
+const ThisWeek = {
     id: 'thisWeek',
     name: 'THIS_WEEK',
     short: 'This week',
     componentType: ['date'],
 };
-const ThisMonth$1 = {
+const ThisMonth = {
     id: 'thisMonth',
     name: 'THIS_MONTH',
     short: 'This month',
     componentType: ['date'],
 };
-const DateRange$1 = {
+const DateRange = {
     id: 'dateRange',
     name: 'DATE_RANGE',
     short: 'Range',
     componentType: ['date'],
 };
-const DueIn$1 = {
+const DueIn = {
     id: 'dueIn',
     name: 'DUE_IN',
     short: 'Due in',
     componentType: ['date'],
 };
-const On$1 = {
+const On = {
     id: 'on',
     name: 'ON',
     short: 'On',
     componentType: ['date'],
 };
-const NotInTheLast$1 = {
+const NotInTheLast = {
     id: 'notInTheLast',
     name: 'NOT_IN_THE_LAST',
     short: 'Not in the last',
     componentType: ['date'],
 };
-const NotDueIn$1 = {
+const NotDueIn = {
     id: 'notDueIn',
     name: 'NOT_DUE_IN',
     short: 'Not due in',
     componentType: ['date'],
 };
-const IsEmpty$1 = {
+const IsEmpty = {
     id: 'isEmpty',
     name: 'IS_EMPTY',
     short: 'Is empty',
     componentType: ['date'],
 };
-const IsNotEmpty$1 = {
+const IsNotEmpty = {
     id: 'isNotEmpty',
     name: 'IS_NOT_EMPTY',
     short: 'Is not empty',
     componentType: ['date'],
 };
-const In$1 = {
+const In = {
     id: 'in',
     name: 'IN',
     short: 'In',
     componentType: ['multi-select'],
 };
 const 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,
 };
 class IPepSmartFilterOperatorUnit {
 }
-const Days$1 = {
+const Days = {
     id: 'days',
     name: 'DAYS',
     componentType: ['date'],
 };
-const Weeks$1 = {
+const Weeks = {
     id: 'weeks',
     name: 'WEEKS',
     componentType: ['date'],
 };
-const Months$1 = {
+const Months = {
     id: 'months',
     name: 'MONTHS',
     componentType: ['date'],
 };
-const Years$1 = {
+const Years = {
     id: 'years',
     name: 'YEARS',
     componentType: ['date'],
 };
 const PepSmartFilterOperatorUnits = {
-    Days: Days$1,
-    Weeks: Weeks$1,
-    Months: Months$1,
-    Years: Years$1,
+    Days: Days,
+    Weeks: Weeks,
+    Months: Months,
+    Years: Years,
 };
 
-class PepTypeConvertorService {
-    constructor() {
-        this._operators = [];
-        this._booleans = [];
-        this.initOperators();
-        this.initBooleans();
-    }
-    get operators() {
-        return this._operators;
-    }
-    get booleans() {
-        return this._booleans;
-    }
-    initOperators() {
-        this._operators.push({
-            key: 'AND',
-            value: 'And'
-        });
-        this._operators.push({
-            key: 'OR',
-            value: 'Or'
-        });
-    }
-    initBooleans() {
-        this._booleans.push({
-            key: 'True',
-            value: 'True'
-        });
-        this._booleans.push({
-            key: 'False',
-            value: 'False'
-        });
-    }
-}
-PepTypeConvertorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PepTypeConvertorService_Factory() { return new PepTypeConvertorService(); }, token: PepTypeConvertorService, providedIn: "root" });
-PepTypeConvertorService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-PepTypeConvertorService.ctorParameters = () => [];
-
 class BaseFilterComponent {
-    constructor(viewContainerRef, injector, resolver, builder, translate, validator, renderer, typeConvertorService) {
+    constructor(viewContainerRef, injector, resolver, builder, translate, validator, renderer) {
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
         this.resolver = resolver;
@@ -445,12 +400,7 @@ class BaseFilterComponent {
         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 EventEmitter();
         this.filterChange = new EventEmitter();
         this.OPERATORS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATORS';
@@ -472,10 +422,6 @@ class BaseFilterComponent {
     get filter() {
         return this._filter;
     }
-    set parentForm(form) {
-        this._parentForm = form;
-        this.updateParentForm();
-    }
     set operator(operator) {
         var _a;
         if ((operator === null || operator === void 0 ? void 0 : operator.id) != ((_a = this._operator) === null || _a === void 0 ? void 0 : _a.id)) {
@@ -496,7 +442,10 @@ class BaseFilterComponent {
     }
     set operatorUnit(operatorUnit) {
         // Validate operator unit
-        if (operatorUnit) {
+        if (operatorUnit === undefined) {
+            this._operatorUnit = undefined;
+        }
+        else {
             const index = this.operatorUnits.findIndex((ou) => ou.id === operatorUnit.id);
             if (index >= 0) {
                 this._operatorUnit = this.operatorUnits[index];
@@ -505,9 +454,6 @@ class BaseFilterComponent {
                 this._operatorUnit = this.operatorUnits[0];
             }
         }
-        else {
-            this._operatorUnit = undefined;
-        }
     }
     get operatorUnit() {
         return this._operatorUnit;
@@ -536,14 +482,12 @@ class BaseFilterComponent {
         const 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();
     }
     setupOperators() {
         var _a, _b;
@@ -587,16 +531,6 @@ class BaseFilterComponent {
             this.clearFilter(false);
         }
     }
-    updateParentForm() {
-        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
-        }));
-    }
     getDestroyer() {
         return takeUntil(this._destroyed);
     }
@@ -660,9 +594,7 @@ class BaseFilterComponent {
     ngOnDestroy() {
         this._destroyed.next();
         this._destroyed.complete();
-        if (this.showActionButtons) {
-            this.actionsContainerRef.destroy();
-        }
+        this.actionsContainerRef.destroy();
     }
 }
 BaseFilterComponent.decorators = [
@@ -675,98 +607,16 @@ BaseFilterComponent.ctorParameters = () => [
     { type: FormBuilder },
     { type: TranslateService },
     { type: PepValidatorService },
-    { type: Renderer2 },
-    { type: PepTypeConvertorService }
+    { type: Renderer2 }
 ];
 BaseFilterComponent.propDecorators = {
     field: [{ type: Input }],
     filter: [{ type: Input }],
-    parentForm: [{ type: Input }],
-    emitOnChange: [{ type: Input }],
-    inline: [{ type: Input }],
-    showActionButtons: [{ type: Input }],
-    renderTitle: [{ type: Input }],
     filterClear: [{ type: Output }],
     filterChange: [{ type: Output }]
 };
 
-class PepTextFilterComponent extends BaseFilterComponent {
-    constructor() {
-        super(...arguments);
-        this.chooseTypeOptions = [];
-        this.operatorWidth = '38%';
-        this.firstControlWidth = '62%';
-    }
-    ngOnInit() {
-        this.firstControl.valueChanges
-            .pipe(this.getDestroyer(), distinctUntilChanged())
-            .subscribe(() => {
-            this.setFieldsStateAndValidators();
-        });
-    }
-    // Override
-    getDefaultOperator() {
-        return PepSmartFilterOperators.Equals;
-    }
-    // Override
-    getFilterValue() {
-        const filterValue = {
-            first: this.firstControl.value,
-        };
-        if (this.operator === PepSmartFilterOperators.NumberRange) {
-            filterValue['second'] = this.secondControl.value;
-        }
-        return filterValue;
-    }
-    // Override
-    loadOperatorsOptions() {
-        this.chooseTypeOptions = this.operators.map((operator) => {
-            return {
-                key: operator.id,
-                value: this.translate.instant(`${this.OPERATORS_TRANSLATION_PREFIX}.${operator.name}`),
-            };
-        });
-    }
-    // Override
-    setFieldsStateAndValidators() {
-        if (this.operator === PepSmartFilterOperators.NumberRange) {
-            const firstValidators = [Validators.required];
-            if (this.secondControl.value) {
-                firstValidators.push(this.validator.isLessThan(this.secondControl));
-            }
-            this.firstControl.setValidators(firstValidators);
-        }
-        else {
-            super.setFieldsStateAndValidators();
-        }
-    }
-    onOperatorChanged(value) {
-        const operator = Object.values(PepSmartFilterOperators).find((operator) => operator.id === value);
-        this.operator = operator;
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    onValueChanged() {
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-}
-PepTextFilterComponent.decorators = [
-    { type: 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: [""]
-            },] }
-];
-
 class PepBooleanFilterComponent extends BaseFilterComponent {
-    ngOnInit() {
-    }
     // Override
     getDefaultOperator() {
         return PepSmartFilterOperators.Equals;
@@ -776,19 +626,11 @@ class PepBooleanFilterComponent extends BaseFilterComponent {
         const filterValue = { first: this.firstControl.value || false };
         return filterValue;
     }
-    onRadioChanged() {
-    }
-    onValueChanged(value) {
-        this.firstControl.setValue(value);
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
 }
 PepBooleanFilterComponent.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -800,11 +642,6 @@ class PepDateFilterComponent extends BaseFilterComponent {
         this.chooseTimeOptions = [];
         this.chooseTimeUnitOptions = [];
     }
-    ngOnInit() {
-        if (this.inline) {
-            this.setControlsWidth();
-        }
-    }
     // Override
     getDefaultOperator() {
         return PepSmartFilterOperators.InTheLast;
@@ -877,58 +714,20 @@ class PepDateFilterComponent extends BaseFilterComponent {
             super.setFieldsStateAndValidators();
         }
     }
-    setControlsWidth() {
-        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%';
-        }
-    }
     onOperatorChanged(value) {
         const operator = Object.values(PepSmartFilterOperators).find((operator) => 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();
-        }
     }
     onTimeUnitChanged(value) {
         const operatorUnit = Object.values(PepSmartFilterOperatorUnits).find((operatorUnit) => operatorUnit.id === value);
         this.operatorUnit = operatorUnit;
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    onDateValueChanged() {
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
     }
 }
 PepDateFilterComponent.decorators = [
     { type: 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: [""]
             },] }
 ];
@@ -943,36 +742,12 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
         super(...arguments);
         this.options = [];
         this.searchControl = new FormControl();
-        //inline props
-        this.selected = '';
-        this.inlineOptions = [];
         this.MAX_OPTIONS_TO_SHOW = 6.35;
         this.numberOptionsToShowSearch = 10;
     }
     ngOnInit() {
-        super.ngOnInit;
-        if (this.inline) {
-            this.inlineControlInit();
-        }
-        else {
-            this.noneInlineControlInit();
-        }
-    }
-    ngAfterViewInit() {
-        // Calc for the first time.
-        this.calcOptionsHeight(this.options.length);
-    }
-    inlineControlInit() {
-        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(';');
-        }
-    }
-    noneInlineControlInit() {
         var _a;
+        super.ngOnInit;
         if (((_a = this.field.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             this.options = this.field.options.map((opt) => {
                 return { value: opt.value, count: opt.count, selected: false };
@@ -1003,6 +778,10 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
             }, 125);
         });
     }
+    ngAfterViewInit() {
+        // Calc for the first time.
+        this.calcOptionsHeight(this.options.length);
+    }
     initOptionsSelectedValues(selectedValues) {
         this.options.forEach((opt) => {
             const isValueSelected = selectedValues && selectedValues.includes(opt.value);
@@ -1030,20 +809,13 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
     }
     // Override
     getFilterValue() {
-        if (this.inline) {
-            return {
-                first: this.firstControl.value
-            };
-        }
-        else {
-            const selectedValues = this.options
-                .filter((opt) => opt.selected)
-                .map((opt) => opt.value);
-            const filterValue = {
-                first: selectedValues,
-            };
-            return selectedValues.length > 0 ? filterValue : null;
-        }
+        const selectedValues = this.options
+            .filter((opt) => opt.selected)
+            .map((opt) => opt.value);
+        const filterValue = {
+            first: selectedValues,
+        };
+        return selectedValues.length > 0 ? filterValue : null;
     }
     // Override
     initFilter() {
@@ -1054,23 +826,11 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
         option.selected = event.checked;
         this.firstControl.setValue(this.options.filter((opt) => opt.selected).map((opt) => opt.value), { emitEvent: false });
     }
-    onMultiSelectChanged(value) {
-        if (value) {
-            const selected = value.split(';');
-            this.firstControl.setValue(selected);
-        }
-        else {
-            this.firstControl.setValue(null);
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
 }
 PepMultiSelectFilterComponent.decorators = [
     { type: 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)}"]
             },] }
 ];
@@ -1084,8 +844,6 @@ class PepNumberFilterComponent extends BaseFilterComponent {
         super(...arguments);
         this.PepSmartFilterOperators = PepSmartFilterOperators;
         this.chooseTypeOptions = [];
-        this.operatorWidth = '38%';
-        this.firstControlWidth = '62%';
     }
     ngOnInit() {
         this.firstControl.valueChanges
@@ -1098,7 +856,6 @@ class PepNumberFilterComponent extends BaseFilterComponent {
             .subscribe(() => {
             this.setFieldsStateAndValidators();
         });
-        this.setControlsWidth();
     }
     // Override
     getDefaultOperator() {
@@ -1142,39 +899,70 @@ class PepNumberFilterComponent extends BaseFilterComponent {
             super.setFieldsStateAndValidators();
         }
     }
-    setControlsWidth() {
-        if (this.operator === PepSmartFilterOperators.NumberRange) {
-            this.operatorWidth = '30%';
-        }
-        else {
-            this.operatorWidth = '38%';
-        }
-    }
     onOperatorChanged(value) {
         const operator = Object.values(PepSmartFilterOperators).find((operator) => operator.id === value);
         this.operator = operator;
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-        this.setControlsWidth();
-    }
-    onValueChanged() {
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
     }
 }
 PepNumberFilterComponent.decorators = [
     { type: 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: [""]
             },] }
 ];
 
+class PepSmartFiltersModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconNumberMinus,
+            pepIconNumberPlus,
+        ]);
+    }
+}
+PepSmartFiltersModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    FlexLayoutModule,
+                    // Material modules
+                    MatCommonModule,
+                    MatCheckboxModule,
+                    MatChipsModule,
+                    MatExpansionModule,
+                    MatIconModule,
+                    MatFormFieldModule,
+                    MatInputModule,
+                    MatRadioModule,
+                    // External modules
+                    VirtualScrollerModule,
+                    // ngx-lib modules
+                    PepNgxLibModule,
+                    PepCheckboxModule,
+                    PepDateModule,
+                    PepSelectModule,
+                    PepTextboxModule,
+                    PepSearchModule,
+                    PepIconModule,
+                ],
+                exports: [PepSmartFiltersComponent],
+                declarations: [
+                    // BaseFilterComponent,
+                    PepSmartFiltersComponent,
+                    PepFilterActionsComponent,
+                    PepBooleanFilterComponent,
+                    PepDateFilterComponent,
+                    PepMultiSelectFilterComponent,
+                    PepNumberFilterComponent,
+                ],
+            },] }
+];
+PepSmartFiltersModule.ctorParameters = () => [
+    { type: PepIconRegistry }
+];
+
 // Base field
 // ------------------------------
 class PepSmartFilterBaseField {
@@ -1194,17 +982,6 @@ class PepSmartFilterBaseField {
         return this._type;
     }
 }
-// Text field
-// ------------------------------
-class PepSmartFilterTextField extends PepSmartFilterBaseField {
-    constructor(field) {
-        super(field);
-        this._componentType = 'text';
-    }
-    getType() {
-        return 'text';
-    }
-}
 // Boolean field
 // ------------------------------
 class PepSmartFilterBooleanField extends PepSmartFilterBaseField {
@@ -1292,9 +1069,6 @@ class PepSmartFilterPercentageField extends PepSmartFilterNumberBaseField {
     }
 }
 
-function createTextSmartFilterField(data) {
-    return new PepSmartFilterTextField(data);
-}
 function createBooleanSmartFilterField(data) {
     return new PepSmartFilterBooleanField(data);
 }
@@ -1322,9 +1096,6 @@ function createPercentageSmartFilterField(data) {
 function createSmartFilterField(data, type) {
     let field;
     switch (type) {
-        case 'text':
-            field = createTextSmartFilterField(data);
-            break;
         case 'boolean':
             field = createBooleanSmartFilterField(data);
             break;
@@ -1367,942 +1138,6 @@ function createSmartFilter(fieldId, operator, first, second, operatorUnit) {
     };
 }
 
-const Equals = {
-    legacy: 'IsEqual',
-    smartFilter: PepSmartFilterOperators.Equals,
-    type: ['boolean', 'int', 'text']
-};
-const NotEqual = {
-    legacy: 'IsNotEqual',
-    smartFilter: PepSmartFilterOperators.NotEqual,
-    type: null
-};
-const LessThan = {
-    legacy: '<',
-    smartFilter: PepSmartFilterOperators.LessThan,
-    type: null
-};
-const 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'
-    }
-}; */
-const NumberRange = {
-    legacy: 'Between',
-    smartFilter: PepSmartFilterOperators.NumberRange,
-    type: ['int']
-};
-const 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'
-    }
-}; */
-const InTheLast = {
-    legacy: 'InTheLast',
-    smartFilter: PepSmartFilterOperators.InTheLast,
-    type: null
-};
-const NotInTheLast = {
-    legacy: 'NotInTheLast',
-    smartFilter: PepSmartFilterOperators.NotInTheLast,
-    type: null
-};
-const Today = {
-    legacy: 'Today',
-    smartFilter: PepSmartFilterOperators.Today,
-    type: null
-};
-const ThisWeek = {
-    legacy: 'ThisWeek',
-    smartFilter: PepSmartFilterOperators.ThisWeek,
-    type: null
-};
-const ThisMonth = {
-    legacy: 'ThisMonth',
-    smartFilter: PepSmartFilterOperators.ThisMonth,
-    type: null
-};
-const DateRange = {
-    legacy: 'Between',
-    smartFilter: PepSmartFilterOperators.DateRange,
-    type: ['date-time']
-};
-const DueIn = {
-    legacy: 'DueIn',
-    smartFilter: PepSmartFilterOperators.DueIn,
-    type: null
-};
-const NotDueIn = {
-    legacy: 'NotDueIn',
-    smartFilter: PepSmartFilterOperators.NotDueIn,
-    type: null
-};
-const On = {
-    legacy: 'On',
-    smartFilter: PepSmartFilterOperators.On,
-    type: null
-};
-const IsEmpty = {
-    legacy: 'IsEmpty',
-    smartFilter: PepSmartFilterOperators.IsEmpty,
-    type: null
-};
-const IsNotEmpty = {
-    legacy: 'IsNotEmpty',
-    smartFilter: PepSmartFilterOperators.IsNotEmpty,
-    type: null
-};
-const In = {
-    legacy: 'IsEqual',
-    smartFilter: PepSmartFilterOperators.In,
-    type: ['multi-select']
-};
-const 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) {
-    const smartFilterOperator = PepFilterBuilderOperators.find(item => 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) {
-    const legacyOperator = PepFilterBuilderOperators.find(item => 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 = {}));
-
-class FilterBuilderSectionComponent {
-    constructor(filterBuilderService, typeConvertorService) {
-        this.filterBuilderService = filterBuilderService;
-        this.typeConvertorService = typeConvertorService;
-        this.remove = new EventEmitter();
-        this.operatorChange = new EventEmitter();
-    }
-    ngOnInit() {
-    }
-    get f() {
-        return this.form.controls;
-    }
-    onOperatorChanged(value) {
-        this.f.operator.setValue(value);
-        this.operatorChange.emit();
-    }
-    onAddRuleClicked() {
-        this.filterBuilderService.createItem(null, this.sectionContainer, this.form);
-    }
-    onAddRuleSetClicked() {
-        const result = this.filterBuilderService.createSection(PepOperatorTypes.And, this.sectionContainer, this.form, this.depth + 1);
-        this.filterBuilderService.createItem(null, result.containerRef, result.parentForm);
-    }
-    onDeleteSectionClicked() {
-        this.remove.emit();
-    }
-}
-FilterBuilderSectionComponent.decorators = [
-    { type: 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 = () => [
-    { type: FilterBuilderService },
-    { type: PepTypeConvertorService }
-];
-FilterBuilderSectionComponent.propDecorators = {
-    form: [{ type: Input }],
-    depth: [{ type: Input }],
-    remove: [{ type: Output }],
-    operatorChange: [{ type: Output }],
-    sectionContainer: [{ type: ViewChild, args: ['sectionContainer', { read: ViewContainerRef, static: true },] }]
-};
-
-class FilterBuilderItemComponent {
-    constructor(_fb) {
-        this._fb = _fb;
-        this._fields = [];
-        this._options = [];
-        this._selectedField = null;
-        this.filterChange = new EventEmitter();
-        this.remove = new EventEmitter();
-        this.test = {};
-        this.fieldWidth = 26;
-        this.filterWidth = 67.5;
-        this.binWidth = 6.5;
-        this.setupForm();
-    }
-    set fields(list) {
-        if ((list === null || list === void 0 ? void 0 : list.length) > 0) {
-            this._fields = list;
-            this._options = list.map(field => {
-                return {
-                    key: field.id,
-                    value: field.name
-                };
-            });
-        }
-    }
-    ;
-    set selected(value) {
-        if (value) {
-            this._selectedField = value;
-        }
-    }
-    set filter(value) {
-        if (value) {
-            this._filter = value;
-        }
-    }
-    ;
-    set parentForm(value) {
-        if (value) {
-            this._parentForm = value;
-            this.addToParentForm();
-        }
-    }
-    ;
-    ngOnInit() {
-    }
-    setupForm() {
-        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)
-            }),
-        });
-    }
-    addToParentForm() {
-        this._parentForm.setControl(this.formKey, this._form);
-    }
-    onFieldChanged(key) {
-        let item = this._fields.find(field => 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(() => {
-            this._selectedField = item ? item : null;
-        }, 0);
-        this._filter = null;
-    }
-    onFilterChanged() {
-        if (this._form.valid) {
-            this.filterChange.emit();
-        }
-    }
-    onDeleteItemClicked() {
-        this.remove.emit();
-    }
-}
-FilterBuilderItemComponent.decorators = [
-    { type: 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 = () => [
-    { type: FormBuilder }
-];
-FilterBuilderItemComponent.propDecorators = {
-    formKey: [{ type: Input }],
-    fields: [{ type: Input }],
-    selected: [{ type: Input }],
-    filter: [{ type: Input }],
-    parentForm: [{ type: Input }],
-    filterChange: [{ type: Output }],
-    remove: [{ type: Output }]
-};
-
-class PepFilterBuilderTypeMap {
-    constructor() {
-        this.loadTypes();
-    }
-    loadTypes() {
-        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
-     */
-    getSmartBuilderType(key) {
-        let item = this.map.get(key);
-        return item ? item : null;
-    }
-}
-
-const Days = {
-    legacy: 'Days',
-    smartFilter: PepSmartFilterOperatorUnits.Days
-};
-const Weeks = {
-    legacy: 'Weeks',
-    smartFilter: PepSmartFilterOperatorUnits.Weeks
-};
-const Months = {
-    legacy: 'Months',
-    smartFilter: PepSmartFilterOperatorUnits.Months
-};
-const Years = {
-    legacy: 'Years',
-    smartFilter: PepSmartFilterOperatorUnits.Years
-};
-const 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) {
-    const smartFilterOperationUnit = PepFilterBuilderOperationUnit.find(unit => 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) {
-    const legacyOperationUnit = PepFilterBuilderOperationUnit.find(unit => unit.smartFilter === operationUnit);
-    return legacyOperationUnit ? legacyOperationUnit.legacy : null;
-}
-
-class PepOutputFilterService {
-    constructor() {
-    }
-    /**
-     * generates a legacy JSON
-     * @param json UI smart filters structure
-     * @param fields smart filter field
-     * @returns legacy JSON
-     */
-    generateJson(json, fields) {
-        this.initProperties();
-        this._fields = fields;
-        this.treeWalk(json);
-        return this._json ? this._json : this._firstItem ? this._firstItem : null;
-    }
-    /**
-     * reset properties
-     */
-    initProperties() {
-        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
-     */
-    treeWalk(current) {
-        Object.keys(current).forEach(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
-     */
-    createItem(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
-     */
-    createSection(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
-     */
-    getItemValues(current) {
-        var _a;
-        let 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
-     */
-    getFieldKeys(values, id) {
-        let keys = [];
-        let field = this._fields.find(item => item.id === id);
-        if (field) {
-            keys = field === null || field === void 0 ? void 0 : field.options.filter(item => values.includes(item.value)).map((option) => option.key);
-        }
-        return keys;
-    }
-}
-PepOutputFilterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PepOutputFilterService_Factory() { return new PepOutputFilterService(); }, token: PepOutputFilterService, providedIn: "root" });
-PepOutputFilterService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-PepOutputFilterService.ctorParameters = () => [];
-
-class FilterBuilderService {
-    constructor(_fb, _resolver, _outputJsonService) {
-        this._fb = _fb;
-        this._resolver = _resolver;
-        this._outputJsonService = _outputJsonService;
-        this.MAX_STRUCTURE_DEPTH = 3;
-        this._outputJsonSubject = new BehaviorSubject(null);
-        this.triggerOutputJson = this._outputJsonSubject.asObservable();
-    }
-    get maxDepth() {
-        return this.MAX_STRUCTURE_DEPTH;
-    }
-    /**
-     * 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
-     */
-    createFilterTree(json, fields, form, containerRef) {
-        this._form = form;
-        this._smartFilterFields = this.convertToSmartFilterFields(fields);
-        const 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
-    */
-    hasProperty(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
-     */
-    flatten(parent, current, containerRef, parentForm, depth) {
-        if (this.hasProperty(current, 'ComplexId')) {
-            const section = current;
-            if (parent.Operation === current.Operation) {
-                this.flatten(parent, section.LeftNode, containerRef, parentForm, depth);
-                this.flatten(parent, section.RightNode, containerRef, parentForm, depth);
-            }
-            else {
-                const 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
-     */
-    createSection(operator, containerRef, parentForm, depth) {
-        const factory = this._resolver.resolveComponentFactory(FilterBuilderSectionComponent);
-        let componentRef = containerRef.createComponent(factory);
-        let sectionGroup = this._fb.group({
-            operator: this._fb.control(operator)
-        });
-        let counter = 1;
-        Object.keys(parentForm.controls).forEach(item => { if (item.includes('section')) {
-            counter++;
-        } });
-        let formKey = `section${counter}`;
-        parentForm.addControl(formKey, sectionGroup);
-        componentRef.instance.depth = depth;
-        componentRef.instance.form = sectionGroup;
-        componentRef.instance.remove.subscribe(() => {
-            parentForm.removeControl(formKey);
-            componentRef.destroy();
-            this.createOutputJson();
-        });
-        componentRef.instance.operatorChange.subscribe(() => {
-            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
-     */
-    createItem(current, containerRef, parentForm) {
-        const factory = this._resolver.resolveComponentFactory(FilterBuilderItemComponent);
-        let componentRef = containerRef.createComponent(factory);
-        let counter = 1;
-        Object.keys(parentForm.controls).forEach(item => { if (item.includes('item')) {
-            counter++;
-        } });
-        let formKey = `item${counter}`;
-        componentRef.instance.formKey = formKey;
-        componentRef.instance.fields = this._smartFilterFields;
-        const 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(() => {
-            this.createOutputJson();
-        });
-        componentRef.instance.remove.subscribe(() => {
-            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
-     */
-    getFilter(current, field) {
-        let operator = getSmartBuilderOperator(current.Operation, field.type);
-        if (operator) {
-            let 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
-     */
-    getSelectedField(current) {
-        var _a, _b;
-        if (current) {
-            let item = this._smartFilterFields.find(field => field.id === current.ApiName);
-            return item ? item : ((_a = this._smartFilterFields) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._smartFilterFields[0] : null;
-        }
-        else {
-            return ((_b = this._smartFilterFields) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this._smartFilterFields[0] : null;
-        }
-    }
-    /**
-     * gets smart filter's values data
-     * @param current filter legacy element
-     * @param operator smart filter operator
-     * @param field filter's selected field
-     * @returns object contains the filter values data
-     */
-    getFilterValues(current, operator, field) {
-        var _a, _b, _c, _d, _e;
-        let 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(item => {
-                return field.options.find(option => 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
-     */
-    convertToSmartFilterFields(fields) {
-        if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
-            const typeMapper = new PepFilterBuilderTypeMap();
-            return fields.map((field) => {
-                var _a;
-                return createSmartFilterField({
-                    id: field.FieldID,
-                    name: field.Title,
-                    options: (_a = field.OptionalValues) === null || _a === void 0 ? void 0 : _a.map(option => {
-                        return {
-                            key: option.Key,
-                            value: option.Value
-                        };
-                    })
-                }, typeMapper.getSmartBuilderType(field.FieldType));
-            });
-        }
-        else {
-            return [];
-        }
-    }
-    /**
-     * creates a legacy output JSON
-     */
-    createOutputJson() {
-        if (this._form.valid) {
-            const json = this._outputJsonService.generateJson(this._form.value, this._smartFilterFields);
-            this._outputJsonSubject.next(json);
-        }
-    }
-}
-FilterBuilderService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FilterBuilderService_Factory() { return new FilterBuilderService(i0.ɵɵinject(i1.FormBuilder), i0.ɵɵinject(i0.ComponentFactoryResolver), i0.ɵɵinject(PepOutputFilterService)); }, token: FilterBuilderService, providedIn: "root" });
-FilterBuilderService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-FilterBuilderService.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: ComponentFactoryResolver },
-    { type: PepOutputFilterService }
-];
-
-class FilterBuilderComponent {
-    constructor(_fb, _filterBuilderService) {
-        this._fb = _fb;
-        this._filterBuilderService = _filterBuilderService;
-        this.json = null;
-        this.fields = new Array();
-        this.filters = new EventEmitter();
-        this.formValidationChange = new EventEmitter();
-        this._isFormValid = true;
-        this.setupForm();
-        this._formSubscription$ = this.form.valueChanges.subscribe((val) => {
-            if (this.form.valid !== this._isFormValid) {
-                this._isFormValid = this.form.valid;
-                this.formValidationChange.emit(this._isFormValid);
-            }
-        });
-        this._outputJsonSubscription$ = this._filterBuilderService.triggerOutputJson.subscribe((outputJson) => {
-            this.filters.emit(outputJson);
-        });
-    }
-    setupForm() {
-        this.form = this._fb.group({});
-    }
-    ngOnInit() {
-        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();
-    } */
-    ngOnDestroy() {
-        if (this._formSubscription$) {
-            this._formSubscription$.unsubscribe();
-        }
-        if (this._outputJsonSubscription$) {
-            this._outputJsonSubscription$.unsubscribe();
-        }
-    }
-}
-FilterBuilderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-filter-builder',
-                template: "<!-- <div class=\"filter-builder-container\"> -->\n<ng-container #filterRoot></ng-container>\n<!-- </div> -->",
-                styles: [""]
-            },] }
-];
-FilterBuilderComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: FilterBuilderService }
-];
-FilterBuilderComponent.propDecorators = {
-    json: [{ type: Input }],
-    fields: [{ type: Input }],
-    filters: [{ type: Output }],
-    formValidationChange: [{ type: Output }],
-    filterRoot: [{ type: ViewChild, args: ['filterRoot', { read: ViewContainerRef, static: true },] }]
-};
-
-class FilterItemCounterPipe {
-    transform(container) {
-        console.log('init filter', container);
-        let counter = 0;
-        Object.keys(container.controls).forEach(item => { if (item.includes('item') || item.includes('section')) {
-            counter++;
-        } });
-        console.log('filter counter', counter);
-        return counter;
-    }
-}
-FilterItemCounterPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'filterItemCounter'
-            },] }
-];
-
-class PepSmartFiltersModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconNumberMinus,
-            pepIconNumberPlus,
-        ]);
-    }
-}
-PepSmartFiltersModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule,
-                    FlexLayoutModule,
-                    // Material modules
-                    MatCommonModule,
-                    MatCheckboxModule,
-                    MatChipsModule,
-                    MatExpansionModule,
-                    MatIconModule,
-                    MatFormFieldModule,
-                    MatInputModule,
-                    MatRadioModule,
-                    // External modules
-                    VirtualScrollerModule,
-                    // ngx-lib modules
-                    PepNgxLibModule,
-                    PepCheckboxModule,
-                    PepDateModule,
-                    PepSelectModule,
-                    PepTextboxModule,
-                    PepSearchModule,
-                    PepIconModule,
-                    PepButtonModule,
-                ],
-                exports: [PepSmartFiltersComponent, FilterBuilderComponent],
-                declarations: [
-                    // BaseFilterComponent,
-                    PepSmartFiltersComponent,
-                    PepFilterActionsComponent,
-                    PepTextFilterComponent,
-                    PepBooleanFilterComponent,
-                    PepDateFilterComponent,
-                    PepMultiSelectFilterComponent,
-                    PepNumberFilterComponent,
-                    FilterBuilderComponent,
-                    FilterBuilderSectionComponent,
-                    FilterBuilderItemComponent,
-                    FilterItemCounterPipe
-                ],
-            },] }
-];
-PepSmartFiltersModule.ctorParameters = () => [
-    { type: PepIconRegistry }
-];
-
 /*
  * Public API Surface of ngx-lib/smart-filters
  */
@@ -2311,5 +1146,5 @@ PepSmartFiltersModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFilterComponent, FilterBuilderComponent, IPepSmartFilterOperator, IPepSmartFilterOperatorUnit, PepBooleanFilterComponent, PepDateFilterComponent, PepFilterActionsComponent, PepMultiSelectFilterComponent, PepNumberFilterComponent, PepSmartFilterBaseField, PepSmartFilterBooleanField, PepSmartFilterCurrencyField, PepSmartFilterDateBaseField, PepSmartFilterDateField, PepSmartFilterDateTimeField, PepSmartFilterIntField, PepSmartFilterMultiSelectField, PepSmartFilterNumberBaseField, PepSmartFilterOperatorUnits, PepSmartFilterOperators, PepSmartFilterPercentageField, PepSmartFilterRealField, PepSmartFilterTextField, PepSmartFiltersComponent, PepSmartFiltersModule, createSmartFilter, createSmartFilterField, FilterBuilderService as ɵa, PepOutputFilterService as ɵb, PepTextFilterComponent as ɵc, PepTypeConvertorService as ɵd, FilterBuilderSectionComponent as ɵe, FilterBuilderItemComponent as ɵf, FilterItemCounterPipe as ɵg };
+export { BaseFilterComponent, IPepSmartFilterOperator, IPepSmartFilterOperatorUnit, PepBooleanFilterComponent, PepDateFilterComponent, PepFilterActionsComponent, PepMultiSelectFilterComponent, PepNumberFilterComponent, PepSmartFilterBaseField, PepSmartFilterBooleanField, PepSmartFilterCurrencyField, PepSmartFilterDateBaseField, PepSmartFilterDateField, PepSmartFilterDateTimeField, PepSmartFilterIntField, PepSmartFilterMultiSelectField, PepSmartFilterNumberBaseField, PepSmartFilterOperatorUnits, PepSmartFilterOperators, PepSmartFilterPercentageField, PepSmartFilterRealField, PepSmartFiltersComponent, PepSmartFiltersModule, createSmartFilter, createSmartFilterField };
 //# sourceMappingURL=pepperi-addons-ngx-lib-smart-filters.js.map