@pepperi-addons/ngx-lib 0.5.0-ng15.3 → 0.5.0-ng16.1

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

@@ -1,1731 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Directive, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { Validators, FormControl, ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
-import { MatCommonModule } from '@angular/material/core';
-import * as i5$2 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$3 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i5$3 from '@angular/material/expansion';
-import { MatExpansionModule } from '@angular/material/expansion';
-import * as i6$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import * as i4$1 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i6 from 'ngx-virtual-scroller';
-import { VirtualScrollerComponent, VirtualScrollerModule } from 'ngx-virtual-scroller';
-import * as i3 from '@pepperi-addons/ngx-lib';
-import { BaseDestroyerDirective, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
-import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
-import * as i5$1 from '@pepperi-addons/ngx-lib/date';
-import { PepDateModule } from '@pepperi-addons/ngx-lib/date';
-import * as i4 from '@pepperi-addons/ngx-lib/select';
-import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
-import * as i5 from '@pepperi-addons/ngx-lib/textbox';
-import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
-import * as i9 from '@pepperi-addons/ngx-lib/search';
-import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
-import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
-import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
-import { pepIconNumberMinus, pepIconNumberPlus, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
-import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
-import * as i3$2 from '@angular/cdk/bidi';
-import { distinctUntilChanged, startWith, map } from 'rxjs/operators';
-import * as i2$1 from '@ngx-translate/core';
-import * as i3$1 from '@ngbracket/ngx-layout/flex';
-import * as i4$2 from '@ngbracket/ngx-layout/extended';
-
-class IPepSmartFilterOperator {
-}
-const Equals = {
-    id: 'eq',
-    name: 'EQUAL',
-    short: '=',
-    componentType: [
-        'number',
-        'boolean',
-        // 'multi-select',
-        // 'date',
-        'text',
-        // 'auto-complete',
-        // 'select',
-    ],
-};
-const NotEqual = {
-    id: 'neq',
-    name: 'NOT_EQUAL',
-    short: '<>',
-    componentType: [
-        'number',
-        // 'multi-select',
-        // 'date',
-        'text',
-        // 'auto-complete',
-        // 'select',
-    ],
-};
-const LessThan = {
-    id: 'lt',
-    name: 'LESS_THEN',
-    short: '<',
-    componentType: ['number'],
-};
-// const LessThanOrEquals: IPepSmartFilterOperator = {
-//     id: 'ltoe',
-//     name: 'LESS_THEN_OR_EQUAL',
-//     short: '<=',
-//     type: ['number'],
-// };
-const GreaterThan = {
-    id: 'gt',
-    name: 'GREATER_THEN',
-    short: '>',
-    componentType: ['number'],
-};
-// const GreaterThanOrEquals: IPepSmartFilterOperator = {
-//     id: 'gtoe',
-//     name: 'GREATER_THEN_OR_EQUAL',
-//     short: '>=',
-//     type: ['number'],
-// };
-const NumberRange = {
-    id: 'numberRange',
-    name: 'NUMBER_RANGE',
-    short: 'Range',
-    componentType: ['number'],
-};
-const Contains = {
-    id: 'contains',
-    name: 'CONTAINS',
-    short: 'Contains',
-    componentType: ['text'],
-};
-const BeginsWith = {
-    id: 'beginsWith',
-    name: 'BEGINS_WITH',
-    short: 'Begins With',
-    componentType: ['text'],
-};
-const EndsWith = {
-    id: 'endsWith',
-    name: 'ENDS_WITH',
-    short: 'End With',
-    componentType: ['text'],
-};
-// const After: Operator = {
-//     id: 'after',
-//     name: 'After',
-//     short: 'After',
-//     type: ['date'],
-// };
-// const Before: Operator = {
-//     id: 'before',
-//     name: 'Before',
-//     short: 'Before',
-//     type: ['date'],
-// };
-const InTheLast = {
-    id: 'inTheLast',
-    name: 'IN_THE_LAST',
-    short: 'In the last',
-    componentType: ['date'],
-};
-const Today = {
-    id: 'today',
-    name: 'TODAY',
-    short: 'Today',
-    componentType: ['date'],
-};
-const ThisWeek = {
-    id: 'thisWeek',
-    name: 'THIS_WEEK',
-    short: 'This week',
-    componentType: ['date'],
-};
-const ThisMonth = {
-    id: 'thisMonth',
-    name: 'THIS_MONTH',
-    short: 'This month',
-    componentType: ['date'],
-};
-const DateRange = {
-    id: 'dateRange',
-    name: 'DATE_RANGE',
-    short: 'Range',
-    componentType: ['date'],
-};
-const DueIn = {
-    id: 'dueIn',
-    name: 'DUE_IN',
-    short: 'Due in',
-    componentType: ['date'],
-};
-const On = {
-    id: 'on',
-    name: 'ON',
-    short: 'On',
-    componentType: ['date'],
-};
-const NotInTheLast = {
-    id: 'notInTheLast',
-    name: 'NOT_IN_THE_LAST',
-    short: 'Not in the last',
-    componentType: ['date'],
-};
-const NotDueIn = {
-    id: 'notDueIn',
-    name: 'NOT_DUE_IN',
-    short: 'Not due in',
-    componentType: ['date'],
-};
-const IsEmpty = {
-    id: 'isEmpty',
-    name: 'IS_EMPTY',
-    short: 'Is empty',
-    componentType: ['date', 'text'],
-};
-const IsNotEmpty = {
-    id: 'isNotEmpty',
-    name: 'IS_NOT_EMPTY',
-    short: 'Is not empty',
-    componentType: ['date', 'text'],
-};
-const In = {
-    id: 'in',
-    name: 'IN',
-    short: 'In',
-    componentType: ['multi-select'],
-};
-const InVariable = {
-    id: 'inv',
-    name: 'IN_VARIABLE',
-    short: 'In',
-    componentType: ['multi-select', 'text'],
-};
-const PepSmartFilterOperators = {
-    Equals: Equals,
-    NotEqual: NotEqual,
-    LessThan: LessThan,
-    // LessThanOrEquals: LessThanOrEquals,
-    GreaterThan: GreaterThan,
-    // GreaterThanOrEquals: GreaterThanOrEquals,
-    NumberRange: NumberRange,
-    Contains: Contains,
-    BeginsWith: BeginsWith,
-    EndsWith: EndsWith,
-    // After: After,
-    // Before: Before,
-    InTheLast: InTheLast,
-    Today: Today,
-    ThisWeek: ThisWeek,
-    ThisMonth: ThisMonth,
-    DateRange: DateRange,
-    DueIn: DueIn,
-    On: On,
-    NotInTheLast: NotInTheLast,
-    NotDueIn: NotDueIn,
-    IsEmpty: IsEmpty,
-    IsNotEmpty: IsNotEmpty,
-    In: In,
-};
-//additional operators to be added upon input flag
-const InTheLastCalendar = {
-    id: 'inTheLastCalendar',
-    name: 'IN_THE_LAST_CALENDAR',
-    short: 'In the last (calendar)',
-    componentType: ['date'],
-};
-const NotInTheLastCalendar = {
-    id: 'notInTheLastCalendar',
-    name: 'NOT_IN_THE_LAST_CALENDAR',
-    short: 'Not in the last (calendar)',
-    componentType: ['date'],
-};
-const PepSmartFilterAdditionalOperators = {
-    InTheLastCalendar: InTheLastCalendar,
-    NotInTheLastCalendar: NotInTheLastCalendar
-};
-//additional variable operators to be added upon input variable fields
-const EqualsToVariable = {
-    id: 'eqv',
-    name: 'EQUAL_TO_VARIABLE',
-    short: '=',
-    componentType: ['text', 'number', 'boolean']
-};
-const NotEqualsToVariable = {
-    id: 'neqv',
-    name: 'NOT_EQUAL_TO_VARIABLE',
-    short: '<>',
-    componentType: ['boolean']
-};
-const LessThanVariable = {
-    id: 'ltv',
-    name: 'LESS_THAN_VARIABLE',
-    short: '<',
-    componentType: ['number'],
-};
-const GreaterThanVariable = {
-    id: 'gtv',
-    name: 'GREATER_THAN_VARIABLE',
-    short: '>',
-    componentType: ['number'],
-};
-const DateRangeVariable = {
-    id: 'dateRangeVariable',
-    name: 'DATE_RANGE_VARIABLE',
-    short: 'Range Variable',
-    componentType: ['date'],
-};
-const PepSmartFilterVariableOperators = {
-    EqualsToVariable: EqualsToVariable,
-    NotEqualsToVariable: NotEqualsToVariable,
-    LessThanVariable: LessThanVariable,
-    GreaterThanVariable: GreaterThanVariable,
-    DateRangeVariable: DateRangeVariable,
-    InVariable: InVariable,
-    IsEmpty: IsEmpty,
-    IsNotEmpty: IsNotEmpty
-};
-class IPepSmartFilterOperatorUnit {
-}
-const Days = {
-    id: 'days',
-    name: 'DAYS',
-    componentType: ['date'],
-};
-const Weeks = {
-    id: 'weeks',
-    name: 'WEEKS',
-    componentType: ['date'],
-};
-const Months = {
-    id: 'months',
-    name: 'MONTHS',
-    componentType: ['date'],
-};
-const Years = {
-    id: 'years',
-    name: 'YEARS',
-    componentType: ['date'],
-};
-const PepSmartFilterOperatorUnits = {
-    Days: Days,
-    Weeks: Weeks,
-    Months: Months,
-    Years: Years,
-};
-
-class PepFilterActionsComponent {
-    constructor() {
-        this.clearClick = new EventEmitter();
-        this.applyClick = new EventEmitter();
-    }
-    clear() {
-        this.clearClick.emit();
-    }
-    apply() {
-        this.applyClick.emit();
-    }
-}
-PepFilterActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFilterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepFilterActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepFilterActionsComponent, selector: "pep-filter-actions", inputs: { form: "form" }, outputs: { clearClick: "clearClick", applyClick: "applyClick" }, ngImport: i0, 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:var(--pep-spacing-lg, 1rem) 0 calc(var(--pep-spacing-lg, 1rem) / 2);display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFilterActionsComponent, decorators: [{
-            type: 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:var(--pep-spacing-lg, 1rem) 0 calc(var(--pep-spacing-lg, 1rem) / 2);display:flex;justify-content:flex-end}\n"] }]
-        }], propDecorators: { form: [{
-                type: Input
-            }], clearClick: [{
-                type: Output
-            }], applyClick: [{
-                type: Output
-            }] } });
-
-class BaseFilterComponent extends BaseDestroyerDirective {
-    set field(value) {
-        this._field = value;
-        this._fieldIdWithNoDots = value ? value.id.replace(/\./g, '_') : '';
-        this.setupForm();
-    }
-    get field() {
-        return this._field;
-    }
-    set variableField(list) {
-        if (list === null || list === void 0 ? void 0 : list.length) {
-            this.variableFieldOptions = list.map(item => {
-                return {
-                    key: item,
-                    value: item
-                };
-            });
-        }
-    }
-    set filter(value) {
-        this._filter = value;
-        this.setupFilter();
-    }
-    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)) {
-            // Validate operator
-            const index = this.operators.findIndex((o) => o.id === operator.id);
-            if (index >= 0) {
-                this._operator = this.operators[index];
-            }
-            else {
-                this._operator = this.operators[0];
-            }
-            this.form.reset();
-            this.updateValidity();
-        }
-    }
-    get operator() {
-        return this._operator;
-    }
-    set operatorUnit(operatorUnit) {
-        // Validate operator unit
-        if (operatorUnit) {
-            const index = this.operatorUnits.findIndex((ou) => ou.id === operatorUnit.id);
-            if (index >= 0) {
-                this._operatorUnit = this.operatorUnits[index];
-            }
-            else {
-                this._operatorUnit = this.operatorUnits[0];
-            }
-        }
-        else {
-            this._operatorUnit = undefined;
-        }
-    }
-    get operatorUnit() {
-        return this._operatorUnit;
-    }
-    get firstControlKey() {
-        return this.field ? `${this._fieldIdWithNoDots}_first` : 'first';
-    }
-    get firstControl() {
-        return this.form.get(this.firstControlKey);
-    }
-    get secondControlKey() {
-        return this.field ? `${this._fieldIdWithNoDots}_second` : 'second';
-    }
-    get secondControl() {
-        return this.form.get(this.secondControlKey);
-    }
-    constructor(viewContainerRef, injector, resolver, builder, translate, validator, utilitiesService, renderer) {
-        super();
-        this.viewContainerRef = viewContainerRef;
-        this.injector = injector;
-        this.resolver = resolver;
-        this.builder = builder;
-        this.translate = translate;
-        this.validator = validator;
-        this.utilitiesService = utilitiesService;
-        this.renderer = renderer;
-        this._fieldIdWithNoDots = '';
-        this.variableFieldOptions = [];
-        this.emitOnChange = false;
-        this.inline = false;
-        this.showActionButtons = true;
-        this.renderTitle = true;
-        this.showAdditionalOperators = false;
-        this.filterClear = new EventEmitter();
-        this.filterChange = new EventEmitter();
-        this.OPERATORS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATORS';
-        this.OPERATOR_UNITS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATOR_UNITS';
-    }
-    createActionsComponent() {
-        const factory = this.resolver.resolveComponentFactory(PepFilterActionsComponent);
-        this.actionsContainerRef = factory.create(this.injector);
-        this.actionsContainerRef.instance.form = this.form;
-        this.actionsContainerRef.instance.applyClick.subscribe(() => this.applyFilter());
-        this.actionsContainerRef.instance.clearClick.subscribe(() => this.clearFilter());
-        this.viewContainerRef.insert(this.actionsContainerRef.hostView);
-    }
-    setupForm() {
-        const formValue = {};
-        formValue[this.firstControlKey] = [];
-        formValue[this.secondControlKey] = [];
-        // 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();
-        }
-    }
-    setupOperators() {
-        var _a, _b, _c;
-        // Get the operators by componentType.
-        this.operators = Object.keys(PepSmartFilterOperators)
-            .filter((key) => {
-            return PepSmartFilterOperators[key].componentType.includes(this.field.componentType);
-        })
-            .map((key) => PepSmartFilterOperators[key]);
-        // Add additional operators
-        if (this.showAdditionalOperators) {
-            const additional = Object.keys(PepSmartFilterAdditionalOperators)
-                .filter((key) => {
-                return PepSmartFilterAdditionalOperators[key].componentType.includes(this.field.componentType);
-            })
-                .map((key) => PepSmartFilterAdditionalOperators[key]);
-            this.operators = [...this.operators, ...additional];
-        }
-        //add variable operators
-        if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
-            const variables = Object.keys(PepSmartFilterVariableOperators)
-                .filter((key) => {
-                return PepSmartFilterVariableOperators[key].componentType.includes(this.field.componentType);
-            })
-                .map((key) => PepSmartFilterVariableOperators[key]);
-            this.operators = [...this.operators, ...variables];
-        }
-        // Filter by from field.operators input if exist.
-        if (((_b = this.field.operators) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-            this.operators = this.operators.filter((o1) => this.field.operators.some((o2) => o1.id === o2));
-        }
-        // Get the operator units by componentType.
-        this.operatorUnits = Object.keys(PepSmartFilterOperatorUnits)
-            .filter((key) => {
-            return PepSmartFilterOperatorUnits[key].componentType.includes(this.field.componentType);
-        })
-            .map((key) => PepSmartFilterOperatorUnits[key]);
-        // Filter by from field.operatorsUnits input if exist.
-        if (((_c = this.field.operatorUnits) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-            this.operatorUnits = this.operatorUnits.filter((o1) => this.field.operatorUnits.some((o2) => o1.id === o2));
-        }
-        // Load translation before get the options in the children.
-        this.translate.get('SMART_FILTERS.TITLE').subscribe((res) => {
-            this.loadOperatorsOptions();
-        });
-    }
-    setupFilter() {
-        if (this._filter) {
-            this.operator = this._filter.operator;
-            this.operatorUnit = this._filter.operatorUnit;
-            const formValue = {};
-            formValue[this.firstControlKey] = this._filter.value.first;
-            formValue[this.secondControlKey] = this._filter.value.second;
-            this.form.patchValue(formValue);
-        }
-        else {
-            this.operator = this.getDefaultOperator();
-            this.operatorUnit = this.getDefaultOperatorUnit();
-            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
-        }));
-    }
-    updateValidity() {
-        this.setFieldsStateAndValidators();
-        this.firstControl.updateValueAndValidity();
-        this.secondControl.updateValueAndValidity();
-    }
-    // Load the operators options from the translation.
-    loadOperatorsOptions() {
-        // Not implemented in the base
-    }
-    // Set default validators - some childs override this.
-    setFieldsStateAndValidators() {
-        this.firstControl.setValidators(Validators.required);
-        this.secondControl.setValidators(Validators.required);
-        this.secondControl.disable();
-    }
-    // Return undefined - some childs override this.
-    getDefaultOperatorUnit() {
-        return undefined;
-    }
-    initFilter() {
-        // Not implemented in the base
-    }
-    clearFilter(emitEvent = true) {
-        this._filter = null;
-        this.form.reset();
-        this.initFilter();
-        if (emitEvent) {
-            this.filterClear.emit();
-        }
-    }
-    applyFilter() {
-        const filterValue = this.getFilterValue();
-        // If the filter is not null declare it, else - clear it.
-        if (filterValue) {
-            const filter = {
-                fieldId: this.field.id,
-                operator: this.operator,
-                operatorUnit: this.operatorUnit,
-                value: filterValue,
-            };
-            this._filter = filter;
-            this.filterChange.emit(filter);
-        }
-        else {
-            this.clearFilter();
-        }
-    }
-    ngOnInit() {
-        if (this.form) {
-            this.updateValidity();
-        }
-    }
-    ngOnChanges() {
-        // if (this.form) {
-        //     this.updateValidity();
-        // }
-    }
-    ngOnDestroy() {
-        if (this.showActionButtons) {
-            this.actionsContainerRef.destroy();
-        }
-    }
-}
-BaseFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseFilterComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2.FormBuilder }, { token: i2$1.TranslateService }, { token: i3.PepValidatorService }, { token: i3.PepUtilitiesService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-BaseFilterComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseFilterComponent, inputs: { field: "field", variableField: "variableField", filter: "filter", parentForm: "parentForm", emitOnChange: "emitOnChange", inline: "inline", showActionButtons: "showActionButtons", renderTitle: "renderTitle", showAdditionalOperators: "showAdditionalOperators" }, outputs: { filterClear: "filterClear", filterChange: "filterChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseFilterComponent, decorators: [{
-            type: Directive,
-            args: [{}]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i2.FormBuilder }, { type: i2$1.TranslateService }, { type: i3.PepValidatorService }, { type: i3.PepUtilitiesService }, { type: i0.Renderer2 }]; }, propDecorators: { field: [{
-                type: Input
-            }], variableField: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], parentForm: [{
-                type: Input
-            }], emitOnChange: [{
-                type: Input
-            }], inline: [{
-                type: Input
-            }], showActionButtons: [{
-                type: Input
-            }], renderTitle: [{
-                type: Input
-            }], showAdditionalOperators: [{
-                type: Input
-            }], filterClear: [{
-                type: Output
-            }], filterChange: [{
-                type: Output
-            }] } });
-
-class PepTextFilterComponent extends BaseFilterComponent {
-    constructor() {
-        super(...arguments);
-        this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-        this.chooseTypeOptions = [];
-        this.operatorWidth = '38%';
-        this.firstControlWidth = '62%';
-    }
-    ngOnInit() {
-        this.firstControl.valueChanges
-            .pipe(this.getDestroyer(), distinctUntilChanged())
-            .subscribe(() => {
-            this.setFieldsStateAndValidators();
-        });
-        if (this.inline) {
-            this.setControlsWidth();
-        }
-    }
-    // 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() {
-        this.firstControl.enable();
-        if (this.operator === PepSmartFilterOperators.NumberRange) {
-            const firstValidators = [Validators.required];
-            if (this.secondControl.value) {
-                firstValidators.push(this.validator.isLessThan(this.secondControl));
-            }
-            this.firstControl.setValidators(firstValidators);
-            this.firstControl.updateValueAndValidity();
-        }
-        else if (this.operator === PepSmartFilterOperators.IsEmpty ||
-            this.operator === PepSmartFilterOperators.IsNotEmpty) {
-            this.firstControl.disable();
-        }
-        super.setFieldsStateAndValidators();
-    }
-    setControlsWidth() {
-        if (this.operator === PepSmartFilterOperators.IsEmpty ||
-            this.operator === PepSmartFilterOperators.IsNotEmpty) {
-            this.operatorWidth = 'auto';
-        }
-        else {
-            this.operatorWidth = '38%';
-        }
-    }
-    onOperatorChanged(value) {
-        const operator = Object.values(this.operators).find((operator) => operator.id === value);
-        this.operator = operator;
-        if (this.inline) {
-            this.setControlsWidth();
-        }
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        setTimeout(() => {
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        }, 0);
-    }
-    onVariableChanged(value) {
-        this.firstControl.setValue(value);
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    onValueChanged() {
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-}
-PepTextFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepTextFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PepTextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepTextFilterComponent, selector: "pep-text-filter", usesInheritance: true, ngImport: i0, 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    <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                         operator !== PepSmartFilterVariableOperators.InVariable &&\n                         operator !== PepSmartFilterVariableOperators.IsEmpty &&\n                         operator !== PepSmartFilterVariableOperators.IsNotEmpty\">\n        <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n            [label]=\"'SMART_FILTERS.VALUE' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n            [type]=\"field.type\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable ||\n                         operator === PepSmartFilterVariableOperators.InVariable\">\n        <pep-select [fxFlex]=\"inline ? firstControlWidth : null\" [key]=\"firstControlKey\"\n            [value]=\"firstControl?.value || ''\" [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\"\n            [emptyOption]=\"false\" [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.IsEmpty || \n                         operator === PepSmartFilterVariableOperators.IsNotEmpty\">\n\n    </ng-container> -->\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: 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    <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                         operator !== PepSmartFilterVariableOperators.InVariable &&\n                         operator !== PepSmartFilterVariableOperators.IsEmpty &&\n                         operator !== PepSmartFilterVariableOperators.IsNotEmpty\">\n        <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n            [label]=\"'SMART_FILTERS.VALUE' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n            [type]=\"field.type\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable ||\n                         operator === PepSmartFilterVariableOperators.InVariable\">\n        <pep-select [fxFlex]=\"inline ? firstControlWidth : null\" [key]=\"firstControlKey\"\n            [value]=\"firstControl?.value || ''\" [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\"\n            [emptyOption]=\"false\" [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.IsEmpty || \n                         operator === PepSmartFilterVariableOperators.IsNotEmpty\">\n\n    </ng-container> -->\n</div>" }]
-        }] });
-
-class PepBooleanFilterComponent extends BaseFilterComponent {
-    constructor() {
-        super(...arguments);
-        this.options = [];
-        this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-        this.chooseTypeOptions = [];
-    }
-    ngOnInit() {
-        if (this.inline) {
-            this.setControlsWidth();
-        }
-    }
-    // Override
-    getDefaultOperator() {
-        return PepSmartFilterOperators.Equals;
-    }
-    // Override
-    getFilterValue() {
-        const filterValue = { first: this.firstControl.value || false };
-        return filterValue;
-    }
-    // Override
-    loadOperatorsOptions() {
-        this.chooseTypeOptions = this.operators.map((operator) => {
-            return {
-                key: operator.id,
-                value: this.translate.instant(`${this.OPERATORS_TRANSLATION_PREFIX}.${operator.name}`),
-            };
-        });
-    }
-    setControlsWidth() {
-        var _a;
-        if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
-            this.operatorWidth = '38%';
-            this.valueWidth = '62%';
-        }
-        else {
-            this.valueWidth = '100%';
-        }
-    }
-    onOperatorChanged(value) {
-        const operator = Object.values(this.operators).find((operator) => operator.id === value);
-        this.operator = operator;
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    onValueChanged(value) {
-        this.firstControl.setValue(value);
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-}
-PepBooleanFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepBooleanFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PepBooleanFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: { options: "options" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"inline; then inlineBlock; else notInlineBlock\"></ng-container>\n<ng-template #inlineBlock>\n    <ng-container *ngIf=\"variableFieldOptions?.length\">\n        <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n            <pep-select [fxFlex]=\"operatorWidth\" [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 *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n                operator === PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n                    [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n            <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                operator !== PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\"\n                    [options]=\"options\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n        <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"options\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" (valueChange)=\"onValueChanged($event)\">\n        </pep-select>\n    </ng-container>\n</ng-template>\n<ng-template #notInlineBlock>\n    <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                <span class=\"body-sm ellipsis\">{{ 'CHECKBOX.TRUE' | translate }}</span>\n            </mat-radio-button>\n            <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n                <span class=\"body-sm ellipsis\">{{ 'CHECKBOX.FALSE' | translate }}</span>\n            </mat-radio-button>\n        </mat-radio-group>\n    </div>\n</ng-template>", styles: [".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepBooleanFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-boolean-filter', template: "<ng-container *ngIf=\"inline; then inlineBlock; else notInlineBlock\"></ng-container>\n<ng-template #inlineBlock>\n    <ng-container *ngIf=\"variableFieldOptions?.length\">\n        <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n            <pep-select [fxFlex]=\"operatorWidth\" [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 *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n                operator === PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n                    [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n            <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                operator !== PepSmartFilterVariableOperators.NotEqualsToVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\"\n                    [options]=\"options\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n        <pep-select [fxFlex]=\"valueWidth\" [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"options\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" (valueChange)=\"onValueChanged($event)\">\n        </pep-select>\n    </ng-container>\n</ng-template>\n<ng-template #notInlineBlock>\n    <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                <span class=\"body-sm ellipsis\">{{ 'CHECKBOX.TRUE' | translate }}</span>\n            </mat-radio-button>\n            <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n                <span class=\"body-sm ellipsis\">{{ 'CHECKBOX.FALSE' | translate }}</span>\n            </mat-radio-button>\n        </mat-radio-group>\n    </div>\n</ng-template>", styles: [".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}\n"] }]
-        }], propDecorators: { options: [{
-                type: Input
-            }] } });
-
-class PepDateFilterComponent extends BaseFilterComponent {
-    constructor() {
-        super(...arguments);
-        this.PepSmartFilterOperators = PepSmartFilterOperators;
-        this.PepSmartFilterAdditionalOperators = PepSmartFilterAdditionalOperators;
-        this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-        this.chooseTimeOptions = [];
-        this.chooseTimeUnitOptions = [];
-    }
-    ngOnInit() {
-        if (this.inline) {
-            this.setControlsWidth();
-        }
-    }
-    // Override
-    getDefaultOperator() {
-        return PepSmartFilterOperators.InTheLast;
-    }
-    // Override
-    getDefaultOperatorUnit() {
-        if (this.operator === PepSmartFilterOperators.InTheLast ||
-            this.operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
-            this.operator === PepSmartFilterOperators.NotInTheLast ||
-            this.operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
-            this.operator === PepSmartFilterOperators.DueIn ||
-            this.operator === PepSmartFilterOperators.NotDueIn) {
-            return PepSmartFilterOperatorUnits.Months;
-        }
-        else {
-            return undefined;
-        }
-    }
-    // Override
-    getFilterValue() {
-        const filterValue = {
-            first: this.firstControl.value,
-        };
-        if (this.operator === PepSmartFilterOperators.DateRange ||
-            this.operator === PepSmartFilterVariableOperators.DateRangeVariable) {
-            filterValue['second'] = this.secondControl.value;
-        }
-        return filterValue;
-    }
-    // Override
-    initFilter() {
-        setTimeout(() => {
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        }, 0);
-    }
-    // Override
-    loadOperatorsOptions() {
-        this.chooseTimeOptions = this.operators.map((operator) => {
-            return {
-                key: operator.id,
-                value: this.translate.instant(`${this.OPERATORS_TRANSLATION_PREFIX}.${operator.name}`),
-            };
-        });
-        this.chooseTimeUnitOptions = this.operatorUnits.map((operatorUnit) => {
-            return {
-                key: operatorUnit.id,
-                value: this.translate.instant(`${this.OPERATOR_UNITS_TRANSLATION_PREFIX}.${operatorUnit.name}`),
-            };
-        });
-    }
-    // Override
-    setFieldsStateAndValidators() {
-        this.firstControl.enable();
-        if (this.operator === PepSmartFilterOperators.DateRange ||
-            this.operator === PepSmartFilterVariableOperators.DateRangeVariable) {
-            this.firstControl.setValidators(Validators.required);
-            this.secondControl.enable();
-            this.secondControl.setValidators(Validators.required);
-        }
-        else if (this.operator === PepSmartFilterOperators.InTheLast ||
-            this.operator === PepSmartFilterAdditionalOperators.InTheLastCalendar ||
-            this.operator === PepSmartFilterOperators.NotInTheLast ||
-            this.operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar ||
-            this.operator === PepSmartFilterOperators.DueIn ||
-            this.operator === PepSmartFilterOperators.NotDueIn) {
-            this.firstControl.setValidators([
-                Validators.required,
-                this.validator.numberValidator(),
-            ]);
-            this.secondControl.disable();
-        }
-        else {
-            // Disable 'first' field.
-            if (this.operator === PepSmartFilterOperators.Today ||
-                this.operator === PepSmartFilterOperators.ThisWeek ||
-                this.operator === PepSmartFilterOperators.ThisMonth ||
-                this.operator === PepSmartFilterOperators.IsEmpty ||
-                this.operator === PepSmartFilterOperators.IsNotEmpty) {
-                this.firstControl.disable();
-            }
-            // Default disable 'second' field.
-            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(this.operators).find((operator) => operator.id === value);
-        this.operator = operator;
-        this.operatorUnit = this.getDefaultOperatorUnit();
-        if (this.inline) {
-            this.setControlsWidth();
-        }
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        setTimeout(() => {
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        }, 0);
-    }
-    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();
-        }
-    }
-    onVariableChanged(value) {
-        this.firstControl.setValue(value);
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    onSecondVariableChanged(value) {
-        this.secondControl.setValue(value);
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    onDateValueChanged() {
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-}
-PepDateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepDateFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PepDateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepDateFilterComponent, selector: "pep-date-filter", usesInheritance: true, ngImport: i0, 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 === PepSmartFilterAdditionalOperators.InTheLastCalendar || \n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar || \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            [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 pepRtlDirection *ngIf=\"operator === PepSmartFilterVariableOperators.DateRangeVariable\" fxLayout=\"row\"\n        fxLayout.xs=\"column\" fxLayoutGap=\".5rem\" fxFlex=\"fieldsWidth\">\n        <pep-select fxFlex=\"50%\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\"></pep-select>\n        <pep-select fxFlex=\"50%\" [key]=\"secondControlKey\" [value]=\"secondControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onSecondVariableChanged($event)\"></pep-select>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i5$1.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: 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 === PepSmartFilterAdditionalOperators.InTheLastCalendar || \n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterAdditionalOperators.NotInTheLastCalendar || \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            [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 pepRtlDirection *ngIf=\"operator === PepSmartFilterVariableOperators.DateRangeVariable\" fxLayout=\"row\"\n        fxLayout.xs=\"column\" fxLayoutGap=\".5rem\" fxFlex=\"fieldsWidth\">\n        <pep-select fxFlex=\"50%\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\"></pep-select>\n        <pep-select fxFlex=\"50%\" [key]=\"secondControlKey\" [value]=\"secondControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onSecondVariableChanged($event)\"></pep-select>\n    </div>\n</div>\n" }]
-        }] });
-
-class PepMultiSelectFilterOption {
-    constructor() {
-        this.selected = false;
-    }
-}
-class PepMultiSelectFilterComponent extends BaseFilterComponent {
-    constructor() {
-        super(...arguments);
-        this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-        this.options = [];
-        this.chooseTypeOptions = [];
-        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();
-            this.setControlsWidth();
-        }
-        else {
-            this.noneInlineControlInit();
-        }
-    }
-    ngAfterViewInit() {
-        // Calc for the first time.
-        this.calcOptionsHeight(this.options.length);
-    }
-    inlineControlInit() {
-        var _a, _b, _c;
-        //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 (((_c = this.firstControl) === null || _c === void 0 ? void 0 : _c.value) && Array.isArray(this.firstControl.value)) {
-            this.selected = this.firstControl.value.join(';');
-        }
-    }
-    noneInlineControlInit() {
-        var _a;
-        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 };
-            });
-        }
-        else {
-            this.searchControl.disable();
-        }
-        // Init the selected values from first value.
-        const firstControl = this.firstControl;
-        if (firstControl.value) {
-            this.initOptionsSelectedValues(firstControl.value);
-        }
-        // Add subscription for the first value change to set the selected options.
-        firstControl.valueChanges
-            .pipe(this.getDestroyer(), distinctUntilChanged())
-            .subscribe((selectedValues) => {
-            this.initOptionsSelectedValues(selectedValues);
-        });
-        // Filter the options by the search control.
-        this.filteredOptions$ = this.searchControl.valueChanges.pipe(this.getDestroyer(), startWith(''), map((option) => typeof option === 'string' ? option : option && option.value), map((value) => (value ? this.filterOptions(value) : this.options)));
-        // Each time the filter change.
-        this.filteredOptions$.subscribe((filterdOptions) => {
-            this.calcOptionsHeight(filterdOptions.length);
-            setTimeout(() => {
-                // 8 is the padding top of the multi-select-options
-                this.virtualScroller.scrollToPosition(-8);
-            }, 125);
-        });
-    }
-    initOptionsSelectedValues(selectedValues) {
-        this.options.forEach((opt) => {
-            const isValueSelected = selectedValues && selectedValues.includes(opt.value);
-            opt.selected = isValueSelected;
-        });
-    }
-    calcOptionsHeight(optionsCount) {
-        if (this.optionsContainer) {
-            const optionsToShow = optionsCount > this.MAX_OPTIONS_TO_SHOW
-                ? this.MAX_OPTIONS_TO_SHOW
-                : optionsCount;
-            // optionsToShow * 2.25 is 1 option height + 1 is the padding top & bottom of the container.
-            const optionsHeight = optionsToShow * 2.25 + 1 + 'rem';
-            this.renderer.setStyle(this.optionsContainer.nativeElement, 'height', optionsHeight);
-        }
-    }
-    filterOptions(value) {
-        const filterValue = value.toLowerCase();
-        return this.options.filter((opt) => opt.value &&
-            opt.value.toLowerCase().includes(filterValue.toLowerCase()));
-    }
-    // Override
-    getDefaultOperator() {
-        return PepSmartFilterOperators.In;
-    }
-    // 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;
-        }
-    }
-    // Override
-    loadOperatorsOptions() {
-        this.chooseTypeOptions = this.operators.map((operator) => {
-            return {
-                key: operator.id,
-                value: this.translate.instant(`${this.OPERATORS_TRANSLATION_PREFIX}.${operator.name}`),
-            };
-        });
-    }
-    setControlsWidth() {
-        var _a;
-        if ((_a = this.variableFieldOptions) === null || _a === void 0 ? void 0 : _a.length) {
-            this.operatorWidth = '38%';
-            this.valueWidth = '62%';
-        }
-        else {
-            this.valueWidth = '100%';
-        }
-    }
-    onOperatorChanged(value) {
-        const operator = Object.values(this.operators).find((operator) => operator.id === value);
-        this.operator = operator;
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    // Override
-    initFilter() {
-        this.options.forEach((opt) => (opt.selected = false));
-        this.searchControl.setValue('');
-    }
-    onOptionChange(option, event) {
-        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();
-        }
-    }
-    onValueChanged(value) {
-        this.firstControl.setValue(value);
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-}
-PepMultiSelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepMultiSelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PepMultiSelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepMultiSelectFilterComponent, selector: "pep-multi-select-filter", viewQueries: [{ propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true }, { propertyName: "virtualScroller", first: true, predicate: VirtualScrollerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"inline\">\n    <ng-container *ngIf=\"variableFieldOptions?.length\">\n        <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n            <pep-select [fxFlex]=\"operatorWidth\" [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 *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n                operator === PepSmartFilterVariableOperators.NotEqualsToVariable || \n                operator === PepSmartFilterVariableOperators.InVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n                    [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n            <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                operator !== PepSmartFilterVariableOperators.NotEqualsToVariable &&\n                operator !== PepSmartFilterVariableOperators.InVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\"\n                    [value]=\"selected\" [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n                    (valueChange)=\"onMultiSelectChanged($event)\">\n                </pep-select>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n        <pep-select [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</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" shrink=\"never\"></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:var(--pep-spacing-sm, .5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-md, .75rem)}.multi-select-options .flip-scroll{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 virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-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,.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout .mat-mdc-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-mdc-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:grid;grid-auto-flow:column;justify-content:space-between;align-items:center;margin:0 var(--pep-spacing-xs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.VirtualScrollerComponent, selector: "virtual-scroller,[virtualScroller]", inputs: ["executeRefreshOutsideAngularZone", "RTL", "useMarginInsteadOfTranslate", "ssrViewportWidth", "ssrViewportHeight", "compareItems", "checkResizeInterval", "modifyOverflowStyleOfParentScroll", "resizeBypassRefreshThreshold", "scrollAnimationTime", "scrollDebounceTime", "scrollThrottlingTime", "scrollbarHeight", "scrollbarWidth", "stripedTable", "horizontal", "enableUnequalChildrenSizes", "bufferAmount", "items", "parentScroll", "childWidth", "childHeight", "ssrChildWidth", "ssrChildHeight"], outputs: ["vsUpdate", "vsChange", "vsStart", "vsEnd"], exportAs: ["virtualScroller"] }, { kind: "directive", type: i3.PepRtlClassDirective, selector: "[pepRtlClass]" }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i9.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepMultiSelectFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-multi-select-filter', template: "<ng-container *ngIf=\"inline\">\n    <ng-container *ngIf=\"variableFieldOptions?.length\">\n        <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n            <pep-select [fxFlex]=\"operatorWidth\" [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 *ngIf=\"operator === PepSmartFilterVariableOperators.EqualsToVariable || \n                operator === PepSmartFilterVariableOperators.NotEqualsToVariable || \n                operator === PepSmartFilterVariableOperators.InVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n                    [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n                    [options]=\"variableFieldOptions\" (valueChange)=\"onValueChanged($event)\">\n                </pep-select>\n            </ng-container>\n            <ng-container *ngIf=\"operator !== PepSmartFilterVariableOperators.EqualsToVariable && \n                operator !== PepSmartFilterVariableOperators.NotEqualsToVariable &&\n                operator !== PepSmartFilterVariableOperators.InVariable\">\n                <pep-select [fxFlex]=\"valueWidth\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\"\n                    [value]=\"selected\" [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n                    (valueChange)=\"onMultiSelectChanged($event)\">\n                </pep-select>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!variableFieldOptions || !variableFieldOptions.length\">\n        <pep-select [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</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" shrink=\"never\"></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:var(--pep-spacing-sm, .5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-md, .75rem)}.multi-select-options .flip-scroll{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 virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-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,.multi-select-options .pep-checkbox-container ::ng-deep .mat-checkbox-layout .mat-mdc-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-checkbox-label,.multi-select-options .pep-checkbox-container ::ng-deep .mat-mdc-checkbox-layout .mat-mdc-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:grid;grid-auto-flow:column;justify-content:space-between;align-items:center;margin:0 var(--pep-spacing-xs, .25rem)}\n"] }]
-        }], propDecorators: { optionsContainer: [{
-                type: ViewChild,
-                args: ['optionsContainer']
-            }], virtualScroller: [{
-                type: ViewChild,
-                args: [VirtualScrollerComponent]
-            }] } });
-
-class PepNumberFilterComponent extends BaseFilterComponent {
-    constructor() {
-        super(...arguments);
-        this.PepSmartFilterOperators = PepSmartFilterOperators;
-        this.PepSmartFilterVariableOperators = PepSmartFilterVariableOperators;
-        this.chooseTypeOptions = [];
-        this.operatorWidth = '38%';
-        this.fieldsWidth = '70%';
-    }
-    ngOnInit() {
-        this.firstControl.valueChanges
-            // .pipe(debounceTime(3000), this.getDestroyer(), distinctUntilChanged())
-            // .pipe(this.getDestroyer(), distinctUntilChanged((pre: any, curr: any) => 
-            //     this.utilitiesService.isEqualNumber(pre, curr)
-            // ))
-            .pipe(this.getDestroyer(), distinctUntilChanged())
-            .subscribe(() => {
-            console.log(`firstControl.valueChanges - ${this.firstControl.value}`);
-            this.setFieldsStateAndValidators();
-        });
-        this.secondControl.valueChanges
-            .pipe(this.getDestroyer(), distinctUntilChanged())
-            // .pipe(debounceTime(3000), this.getDestroyer(), distinctUntilChanged())
-            .subscribe(() => {
-            this.setFieldsStateAndValidators();
-        });
-        this.setControlsWidth();
-    }
-    // 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
-    initFilter() {
-        setTimeout(() => {
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        }, 0);
-    }
-    // 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);
-            this.firstControl.updateValueAndValidity();
-            this.secondControl.enable();
-            const secondValidators = [Validators.required];
-            if (this.firstControl.value) {
-                secondValidators.push(this.validator.isGreaterThan(this.firstControl));
-            }
-            this.secondControl.setValidators(secondValidators);
-            this.secondControl.updateValueAndValidity();
-        }
-        else {
-            super.setFieldsStateAndValidators();
-        }
-    }
-    setControlsWidth() {
-        if (this.operator === PepSmartFilterOperators.NumberRange) {
-            this.operatorWidth = '30%';
-            this.fieldsWidth = '70%';
-        }
-        else {
-            this.operatorWidth = '38%';
-            this.fieldsWidth = '62%';
-        }
-    }
-    onOperatorChanged(value) {
-        const operator = Object.values(this.operators).find((operator) => operator.id === value);
-        this.operator = operator;
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        this.setControlsWidth();
-        setTimeout(() => {
-            if (this.emitOnChange) {
-                this.applyFilter();
-            }
-        }, 0);
-    }
-    onVariableChanged(value) {
-        this.firstControl.setValue(value);
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    onValueChanged() {
-        // this.firstControl.setValue(value);
-        // console.log(`onValueChanged ${this.firstControl.value}`);
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-}
-PepNumberFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepNumberFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PepNumberFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepNumberFilterComponent, selector: "pep-number-filter", usesInheritance: true, ngImport: i0, 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    <ng-container *ngIf=\"operator === PepSmartFilterOperators.NumberRange\">\n        <div fxLayout=\"row\" fxLayout.xs=\"column\" [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\">\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                [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                [value]=\"secondControl?.value || ''\"\n                [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.LessThanVariable || \n        operator === PepSmartFilterVariableOperators.GreaterThanVariable || \n        operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-select [fxFlex]=\"inline ? fieldsWidth : null\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <ng-container *ngIf=\"operator !== PepSmartFilterOperators.NumberRange && operator !== PepSmartFilterVariableOperators.LessThanVariable &&\n        operator !== PepSmartFilterVariableOperators.GreaterThanVariable && \n        operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n        <div [fxFlex]=\"inline ? fieldsWidth : null\">\n            <!-- Amount -->\n            <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n                [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\"\n                [value]=\"firstControl?.value || ''\" \n                (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n        </div>\n    </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i5.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: 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    <ng-container *ngIf=\"operator === PepSmartFilterOperators.NumberRange\">\n        <div fxLayout=\"row\" fxLayout.xs=\"column\" [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\">\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                [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                [value]=\"secondControl?.value || ''\"\n                [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"operator === PepSmartFilterVariableOperators.LessThanVariable || \n        operator === PepSmartFilterVariableOperators.GreaterThanVariable || \n        operator === PepSmartFilterVariableOperators.EqualsToVariable\">\n        <pep-select [fxFlex]=\"inline ? fieldsWidth : null\" [key]=\"firstControlKey\" [value]=\"firstControl?.value || ''\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"variableFieldOptions\" (valueChange)=\"onVariableChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <ng-container *ngIf=\"operator !== PepSmartFilterOperators.NumberRange && operator !== PepSmartFilterVariableOperators.LessThanVariable &&\n        operator !== PepSmartFilterVariableOperators.GreaterThanVariable && \n        operator !== PepSmartFilterVariableOperators.EqualsToVariable\">\n        <div [fxFlex]=\"inline ? fieldsWidth : null\">\n            <!-- Amount -->\n            <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n                [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\"\n                [value]=\"firstControl?.value || ''\" \n                (valueChange)=\"onValueChanged()\">\n            </pep-textbox>\n        </div>\n    </ng-container>\n</div>" }]
-        }] });
-
-class PepSmartFiltersComponent {
-    set filters(value) {
-        this._filters = value;
-        this.setupFilters(value);
-    }
-    get filters() {
-        this._filters = [...this.filtersDataMap.keys()]
-            // .filter((key) => this.filtersDataMap.get(key) !== null)
-            .map((key) => {
-            if (key) {
-                return this.filtersDataMap.get(key);
-            }
-        });
-        return this._filters;
-    }
-    set fields(value) {
-        this._fields = value;
-    }
-    get fields() {
-        return this._fields;
-    }
-    set useAsWebComponent(value) {
-        if (value) {
-            this.exportFunctionsOnHostElement();
-        }
-    }
-    get useAsWebComponent() {
-        return this._useAsWebComponent;
-    }
-    constructor(hostElement, layoutService) {
-        this.hostElement = hostElement;
-        this.layoutService = layoutService;
-        this.title = '';
-        this.filtersDataMap = new Map();
-        this._filters = [];
-        this._fields = [];
-        this._useAsWebComponent = false;
-        // @Output()
-        // filtersClear: EventEmitter<void> = new EventEmitter<void>();
-        this.filtersChange = new EventEmitter();
-        this.fieldToggleChange = new EventEmitter();
-        this.expansionPanelHeaderHeight = '*';
-    }
-    exportFunctionsOnHostElement() {
-        // This is for web component usage for use those functions.
-        this.hostElement.nativeElement.clearFilters = this.clearFilters.bind(this);
-        this.hostElement.nativeElement.clearFilter = this.clearFilter.bind(this);
-        this.hostElement.nativeElement.toggleField = this.toggleField.bind(this);
-    }
-    setupFilters(value) {
-        this.filtersDataMap.clear();
-        if (value) {
-            value.forEach((filter) => {
-                // Validate before add the filter into the map.
-                let currentField = null;
-                if (this.fields && this.fields.length > 0) {
-                    currentField = this.fields.find((field) => field.id === filter.fieldId);
-                }
-                if (currentField) {
-                    // Only if the operator is from the same type
-                    if (filter.operator.componentType.includes(currentField.componentType)) {
-                        let isOperatorUnitValid = true;
-                        if (filter.operatorUnit) {
-                            // Only if the operator unit is not from the same type
-                            if (!filter.operatorUnit.componentType.includes(currentField.componentType)) {
-                                isOperatorUnitValid = false;
-                            }
-                        }
-                        // Add the filter.
-                        if (isOperatorUnitValid) {
-                            this.filtersDataMap.set(filter.fieldId, filter);
-                        }
-                    }
-                }
-            });
-        }
-    }
-    raiseFiltersChange() {
-        this.filtersChange.emit(this.filters);
-    }
-    toggleField(index, isOpen) {
-        this.fields[index].isOpen = isOpen;
-        this.fieldToggleChange.emit(this.fields[index]);
-    }
-    clearFilters() {
-        this.filtersDataMap.clear();
-    }
-    clearFilter(fieldId) {
-        this.filtersDataMap.delete(fieldId);
-    }
-    // Clear all the filters and raise event that filters has change.
-    onFiltersClear() {
-        this.clearFilters();
-        this.raiseFiltersChange();
-    }
-    // Clear the filter and raise event that filters has change.
-    onFilterClear(field) {
-        this.clearFilter(field.id);
-        this.raiseFiltersChange();
-    }
-    // Set the filter and raise event that filters has change.
-    onFilterChange(field, filterData) {
-        this.clearFilter(field.id);
-        this.filtersDataMap.set(field.id, filterData);
-        this.raiseFiltersChange();
-    }
-}
-PepSmartFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepSmartFiltersComponent, deps: [{ token: i0.ElementRef }, { token: i3.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepSmartFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepSmartFiltersComponent, selector: "pep-smart-filters", inputs: { title: "title", filters: "filters", fields: "fields", useAsWebComponent: "useAsWebComponent" }, outputs: { filtersChange: "filtersChange", fieldToggleChange: "fieldToggleChange" }, ngImport: i0, template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip-option *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-option>\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-option *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-option>\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                    <ng-container *ngSwitchCase=\"'text'\">\n                        <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-text-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>", styles: [".smart-filters-container .title{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 var(--pep-spacing-xs, .25rem);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;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}\n", ".smart-filters-container .clear-filter.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.smart-filters-container .clear-filter.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.smart-filters-container .clear-filter.weak:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.smart-filters-container .clear-filter.weak:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:active{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative}.smart-filters-container .clear-filter.weak:active:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$2.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i5$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i5$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepTextFilterComponent, selector: "pep-text-filter" }, { kind: "component", type: PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: ["options"] }, { kind: "component", type: PepDateFilterComponent, selector: "pep-date-filter" }, { kind: "component", type: PepMultiSelectFilterComponent, selector: "pep-multi-select-filter" }, { kind: "component", type: PepNumberFilterComponent, selector: "pep-number-filter" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepSmartFiltersComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-smart-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip-option *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-option>\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-option *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-option>\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                    <ng-container *ngSwitchCase=\"'text'\">\n                        <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-text-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>", styles: [".smart-filters-container .title{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 var(--pep-spacing-xs, .25rem);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;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}\n", ".smart-filters-container .clear-filter.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.smart-filters-container .clear-filter.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.smart-filters-container .clear-filter.weak:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.smart-filters-container .clear-filter.weak:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:active{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative}.smart-filters-container .clear-filter.weak:active:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):not(.disabled-no-background-no-color){color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.PepLayoutService }]; }, propDecorators: { title: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], fields: [{
-                type: Input
-            }], useAsWebComponent: [{
-                type: Input
-            }], filtersChange: [{
-                type: Output
-            }], fieldToggleChange: [{
-                type: Output
-            }] } });
-
-class PepSmartFiltersModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconNumberMinus,
-            pepIconNumberPlus,
-        ]);
-    }
-}
-PepSmartFiltersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepSmartFiltersModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepSmartFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepSmartFiltersModule, declarations: [
-        // BaseFilterComponent,
-        PepSmartFiltersComponent,
-        PepFilterActionsComponent,
-        PepTextFilterComponent,
-        PepBooleanFilterComponent,
-        PepDateFilterComponent,
-        PepMultiSelectFilterComponent,
-        PepNumberFilterComponent
-    ], 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,
-        PepGroupButtonsModule], exports: [PepSmartFiltersComponent,
-        PepTextFilterComponent,
-        PepBooleanFilterComponent,
-        PepDateFilterComponent,
-        PepMultiSelectFilterComponent,
-        PepNumberFilterComponent] });
-PepSmartFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepSmartFiltersModule, providers: [
-        FormBuilder
-    ], 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,
-        PepGroupButtonsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: 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,
-                        PepGroupButtonsModule
-                    ],
-                    exports: [
-                        PepSmartFiltersComponent,
-                        PepTextFilterComponent,
-                        PepBooleanFilterComponent,
-                        PepDateFilterComponent,
-                        PepMultiSelectFilterComponent,
-                        PepNumberFilterComponent
-                    ],
-                    declarations: [
-                        // BaseFilterComponent,
-                        PepSmartFiltersComponent,
-                        PepFilterActionsComponent,
-                        PepTextFilterComponent,
-                        PepBooleanFilterComponent,
-                        PepDateFilterComponent,
-                        PepMultiSelectFilterComponent,
-                        PepNumberFilterComponent
-                    ],
-                    providers: [
-                        FormBuilder
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
-
-// Base field
-// ------------------------------
-class PepSmartFilterBaseField {
-    get componentType() {
-        return this._componentType;
-    }
-    get type() {
-        return this._type;
-    }
-    constructor(field) {
-        this.id = field.id;
-        this.name = field.name;
-        this.isOpen = field.isOpen;
-        this.options = field.options;
-        this.operators = field.operators;
-        this.operatorUnits = field.operatorUnits;
-        this._type = this.getType();
-    }
-}
-// Text field
-// ------------------------------
-class PepSmartFilterTextField extends PepSmartFilterBaseField {
-    constructor(field) {
-        super(field);
-        this._componentType = 'text';
-    }
-    getType() {
-        return 'text';
-    }
-}
-// Boolean field
-// ------------------------------
-class PepSmartFilterBooleanField extends PepSmartFilterBaseField {
-    constructor(field) {
-        super(field);
-        this._componentType = 'boolean';
-    }
-    getType() {
-        return 'boolean';
-    }
-}
-// Date fields
-// ------------------------------
-class PepSmartFilterDateBaseField extends PepSmartFilterBaseField {
-    constructor(field) {
-        super(field);
-        this._componentType = 'date';
-    }
-}
-class PepSmartFilterDateField extends PepSmartFilterDateBaseField {
-    constructor(field) {
-        super(field);
-    }
-    getType() {
-        return 'date';
-    }
-}
-class PepSmartFilterDateTimeField extends PepSmartFilterDateBaseField {
-    constructor(field) {
-        super(field);
-    }
-    getType() {
-        return 'date-time';
-    }
-}
-// Multi select field
-// ------------------------------
-class PepSmartFilterMultiSelectField extends PepSmartFilterBaseField {
-    constructor(field) {
-        super(field);
-        this._componentType = 'multi-select';
-    }
-    getType() {
-        return 'multi-select';
-    }
-}
-// Number fields
-// ------------------------------
-class PepSmartFilterNumberBaseField extends PepSmartFilterBaseField {
-    constructor(field) {
-        super(field);
-        this._componentType = 'number';
-    }
-}
-class PepSmartFilterIntField extends PepSmartFilterNumberBaseField {
-    constructor(field) {
-        super(field);
-    }
-    getType() {
-        return 'int';
-    }
-}
-class PepSmartFilterRealField extends PepSmartFilterNumberBaseField {
-    constructor(field) {
-        super(field);
-    }
-    getType() {
-        return 'real';
-    }
-}
-class PepSmartFilterCurrencyField extends PepSmartFilterNumberBaseField {
-    constructor(field) {
-        super(field);
-    }
-    getType() {
-        return 'currency';
-    }
-}
-class PepSmartFilterPercentageField extends PepSmartFilterNumberBaseField {
-    constructor(field) {
-        super(field);
-    }
-    getType() {
-        return 'percentage';
-    }
-}
-
-function createTextSmartFilterField(data) {
-    return new PepSmartFilterTextField(data);
-}
-function createBooleanSmartFilterField(data) {
-    return new PepSmartFilterBooleanField(data);
-}
-function createDateSmartFilterField(data) {
-    return new PepSmartFilterDateField(data);
-}
-function createDateTimeSmartFilterField(data) {
-    return new PepSmartFilterDateTimeField(data);
-}
-function createMultiSelectSmartFilterField(data) {
-    return new PepSmartFilterMultiSelectField(data);
-}
-function createIntSmartFilterField(data) {
-    return new PepSmartFilterIntField(data);
-}
-function createRealSmartFilterField(data) {
-    return new PepSmartFilterRealField(data);
-}
-function createCurrencySmartFilterField(data) {
-    return new PepSmartFilterCurrencyField(data);
-}
-function createPercentageSmartFilterField(data) {
-    return new PepSmartFilterPercentageField(data);
-}
-function createSmartFilterField(data, type) {
-    let field;
-    switch (type) {
-        case 'text':
-            field = createTextSmartFilterField(data);
-            break;
-        case 'boolean':
-            field = createBooleanSmartFilterField(data);
-            break;
-        case 'date':
-            field = createDateSmartFilterField(data);
-            break;
-        case 'date-time':
-            field = createDateTimeSmartFilterField(data);
-            break;
-        case 'multi-select':
-            field = createMultiSelectSmartFilterField(data);
-            break;
-        case 'int':
-            field = createIntSmartFilterField(data);
-            break;
-        case 'real':
-            field = createRealSmartFilterField(data);
-            break;
-        case 'currency':
-            field = createCurrencySmartFilterField(data);
-            break;
-        case 'percentage':
-            field = createPercentageSmartFilterField(data);
-            break;
-        default:
-            field = createMultiSelectSmartFilterField(data);
-            break;
-    }
-    return field;
-}
-function createSmartFilter(fieldId, operator, first, second, operatorUnit) {
-    return {
-        fieldId: fieldId,
-        operator: operator,
-        operatorUnit: operatorUnit,
-        value: {
-            first: first,
-            second: second,
-        },
-    };
-}
-
-/*
- * Public API Surface of ngx-lib/smart-filters
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { BaseFilterComponent, IPepSmartFilterOperator, IPepSmartFilterOperatorUnit, PepBooleanFilterComponent, PepDateFilterComponent, PepFilterActionsComponent, PepMultiSelectFilterComponent, PepNumberFilterComponent, PepSmartFilterAdditionalOperators, PepSmartFilterBaseField, PepSmartFilterBooleanField, PepSmartFilterCurrencyField, PepSmartFilterDateBaseField, PepSmartFilterDateField, PepSmartFilterDateTimeField, PepSmartFilterIntField, PepSmartFilterMultiSelectField, PepSmartFilterNumberBaseField, PepSmartFilterOperatorUnits, PepSmartFilterOperators, PepSmartFilterPercentageField, PepSmartFilterRealField, PepSmartFilterTextField, PepSmartFilterVariableOperators, PepSmartFiltersComponent, PepSmartFiltersModule, PepTextFilterComponent, createSmartFilter, createSmartFilterField };
-//# sourceMappingURL=pepperi-addons-ngx-lib-smart-filters.mjs.map