@pepperi-addons/ngx-lib 0.2.59-query-builder.7 → 0.2.61

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

@@ -17,11 +17,9 @@ import { PepDateModule } from '@pepperi-addons/ngx-lib/date';
 import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
 import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
 import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
-import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
 import { pepIconNumberMinus, pepIconNumberPlus, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
-import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
-import { takeUntil, distinctUntilChanged, startWith, map } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { takeUntil, distinctUntilChanged, startWith, map } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 
 class PepSmartFiltersComponent {
@@ -134,7 +132,7 @@ class PepSmartFiltersComponent {
 PepSmartFiltersComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-smart-filters',
-                template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\r\n    <div class=\"title\">\r\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\r\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\r\n            class=\"clear-filter pep-button chip xs weak\">\r\n            <span class=\"body-xs ellipsis \">\r\n                {{ \"ACTIONS.CLEAR\" | translate}}\r\n            </span>\r\n        </mat-chip>\r\n    </div>\r\n\r\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\r\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\r\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\r\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\r\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\r\n                <mat-panel-title class=\"pep-spacing-element-negative\">\r\n                    <div class=\"smart-filter-title-container\">\r\n                        <mat-icon class=\"pep-spacing-element\">\r\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\r\n                        </mat-icon>\r\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\r\n                            {{ field.name }}\r\n                        </span>\r\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\r\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\r\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\r\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\r\n                                <!-- {{ field.componentType === 'multi-select' ?\r\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\r\n                            </span>\r\n                            <mat-icon>\r\n                                <pep-icon name=\"system_close\"></pep-icon>\r\n                            </mat-icon>\r\n                        </mat-chip>\r\n                    </div>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div class=\"expansion-content smart-filter-content\">\r\n                <ng-container [ngSwitch]=\"field.componentType\">\r\n                    <ng-container *ngSwitchCase=\"'boolean'\">\r\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\r\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\r\n                        </pep-boolean-filter>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'date'\">\r\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\r\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\r\n                        </pep-date-filter>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\r\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\r\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\r\n                        </pep-multi-select-filter>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'number'\">\r\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\r\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\r\n                        </pep-number-filter>\r\n                    </ng-container>\r\n                    <!-- <div *ngSwitchDefault>\r\n                    </div> -->\r\n                </ng-container>\r\n            </div>\r\n        </mat-expansion-panel>\r\n    </mat-accordion>\r\n</div>",
+                template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".smart-filters-container .title{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem);padding:0 .75rem;padding:0 var(--pep-spacing-md,.75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;-webkit-margin-end:.5rem;margin-inline-end:.5rem;-webkit-margin-end:var(--pep-spacing-sm,.5rem);margin-inline-end:var(--pep-spacing-sm,.5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}"]
             },] }
@@ -167,7 +165,7 @@ class PepFilterActionsComponent {
 PepFilterActionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-filter-actions',
-                template: "<div [formGroup]=\"form\" class=\"filter-actions pep-spacing-element-negative\">\r\n    <button mat-button class=\"pep-spacing-element pep-button sm weak\" (click)=\"clear()\">\r\n        {{ 'ACTIONS.CLEAR' | translate }}\r\n    </button>\r\n    <button mat-button class=\"pep-spacing-element pep-button sm strong\" (click)=\"apply()\" [disabled]=\"form.invalid\">\r\n        {{ 'ACTIONS.APPLY' | translate }}\r\n    </button>\r\n</div>",
+                template: "<div [formGroup]=\"form\" class=\"filter-actions pep-spacing-element-negative\">\n    <button mat-button class=\"pep-spacing-element pep-button sm weak\" (click)=\"clear()\">\n        {{ 'ACTIONS.CLEAR' | translate }}\n    </button>\n    <button mat-button class=\"pep-spacing-element pep-button sm strong\" (click)=\"apply()\" [disabled]=\"form.invalid\">\n        {{ 'ACTIONS.APPLY' | translate }}\n    </button>\n</div>",
                 styles: [".filter-actions{margin:1rem 0 calc(1rem / 2);margin:var(--pep-spacing-lg,1rem) 0 calc(var(--pep-spacing-lg, 1rem) / 2);display:flex;justify-content:flex-end}"]
             },] }
 ];
@@ -236,12 +234,12 @@ const NumberRange = {
     short: 'Range',
     componentType: ['number'],
 };
-const Contains = {
-    id: 'contains',
-    name: 'CONTAINS',
-    short: 'Contains',
-    componentType: ['text'],
-};
+// const Contains: Operator = {
+//     id: 'contains',
+//     name: 'Contains',
+//     short: 'Contains',
+//     type: ['text'],
+// };
 // const BeginsWith: Operator = {
 //     id: 'beginsWith',
 //     name: 'Begins With',
@@ -346,7 +344,7 @@ const PepSmartFilterOperators = {
     GreaterThan: GreaterThan,
     // GreaterThanOrEquals: GreaterThanOrEquals,
     NumberRange: NumberRange,
-    Contains: Contains,
+    // Contains: Contains,
     // BeginsWith: BeginsWith,
     // EndsWith: EndsWith,
     // After: After,
@@ -403,10 +401,6 @@ class BaseFilterComponent {
         this.validator = validator;
         this.renderer = renderer;
         this._fieldIdWithNoDots = '';
-        this.emitOnChange = false;
-        this.inline = false;
-        this.showActionButtons = true;
-        this.renderTitle = true;
         this.filterClear = new EventEmitter();
         this.filterChange = new EventEmitter();
         this.OPERATORS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATORS';
@@ -428,10 +422,6 @@ class BaseFilterComponent {
     get filter() {
         return this._filter;
     }
-    set parentForm(form) {
-        this._parentForm = form;
-        this.updateParentForm();
-    }
     set operator(operator) {
         var _a;
         if ((operator === null || operator === void 0 ? void 0 : operator.id) != ((_a = this._operator) === null || _a === void 0 ? void 0 : _a.id)) {
@@ -452,7 +442,10 @@ class BaseFilterComponent {
     }
     set operatorUnit(operatorUnit) {
         // Validate operator unit
-        if (operatorUnit) {
+        if (operatorUnit === undefined) {
+            this._operatorUnit = undefined;
+        }
+        else {
             const index = this.operatorUnits.findIndex((ou) => ou.id === operatorUnit.id);
             if (index >= 0) {
                 this._operatorUnit = this.operatorUnits[index];
@@ -461,9 +454,6 @@ class BaseFilterComponent {
                 this._operatorUnit = this.operatorUnits[0];
             }
         }
-        else {
-            this._operatorUnit = undefined;
-        }
     }
     get operatorUnit() {
         return this._operatorUnit;
@@ -492,14 +482,12 @@ class BaseFilterComponent {
         const formValue = {};
         formValue[this.firstControlKey] = [];
         formValue[this.secondControlKey] = [];
-        // this.form.patchValue(formValue);        
+        // this.form.patchValue(formValue);
         this.form = this.builder.group(formValue);
         // this.form[this.firstControlKey] = [];
         // this.form[this.secondControlKey] = [];
         this.setupOperators();
-        if (this.showActionButtons) {
-            this.createActionsComponent();
-        }
+        this.createActionsComponent();
     }
     setupOperators() {
         var _a, _b;
@@ -543,16 +531,6 @@ class BaseFilterComponent {
             this.clearFilter(false);
         }
     }
-    updateParentForm() {
-        this._parentForm.setControl('fieldId', this.builder.control(this.field.id));
-        this._parentForm.setControl('fieldType', this.builder.control(this.field.type));
-        this._parentForm.setControl('operator', this.builder.control(this.operator));
-        this._parentForm.setControl('operatorUnit', this.builder.control(this.operatorUnit));
-        this._parentForm.setControl('values', this.builder.group({
-            first: this.firstControl,
-            second: this.secondControl
-        }));
-    }
     getDestroyer() {
         return takeUntil(this._destroyed);
     }
@@ -616,9 +594,7 @@ class BaseFilterComponent {
     ngOnDestroy() {
         this._destroyed.next();
         this._destroyed.complete();
-        if (this.showActionButtons) {
-            this.actionsContainerRef.destroy();
-        }
+        this.actionsContainerRef.destroy();
     }
 }
 BaseFilterComponent.decorators = [
@@ -636,101 +612,11 @@ BaseFilterComponent.ctorParameters = () => [
 BaseFilterComponent.propDecorators = {
     field: [{ type: Input }],
     filter: [{ type: Input }],
-    parentForm: [{ type: Input }],
-    emitOnChange: [{ type: Input }],
-    inline: [{ type: Input }],
-    showActionButtons: [{ type: Input }],
-    renderTitle: [{ type: Input }],
     filterClear: [{ type: Output }],
     filterChange: [{ type: Output }]
 };
 
-class PepTextFilterComponent extends BaseFilterComponent {
-    constructor() {
-        super(...arguments);
-        this.chooseTypeOptions = [];
-        this.operatorWidth = '38%';
-        this.firstControlWidth = '62%';
-    }
-    ngOnInit() {
-        this.firstControl.valueChanges
-            .pipe(this.getDestroyer(), distinctUntilChanged())
-            .subscribe(() => {
-            this.setFieldsStateAndValidators();
-        });
-    }
-    // Override
-    getDefaultOperator() {
-        return PepSmartFilterOperators.Equals;
-    }
-    // Override
-    getFilterValue() {
-        const filterValue = {
-            first: this.firstControl.value,
-        };
-        if (this.operator === PepSmartFilterOperators.NumberRange) {
-            filterValue['second'] = this.secondControl.value;
-        }
-        return filterValue;
-    }
-    // Override
-    loadOperatorsOptions() {
-        this.chooseTypeOptions = this.operators.map((operator) => {
-            return {
-                key: operator.id,
-                value: this.translate.instant(`${this.OPERATORS_TRANSLATION_PREFIX}.${operator.name}`),
-            };
-        });
-    }
-    // Override
-    setFieldsStateAndValidators() {
-        if (this.operator === PepSmartFilterOperators.NumberRange) {
-            const firstValidators = [Validators.required];
-            if (this.secondControl.value) {
-                firstValidators.push(this.validator.isLessThan(this.secondControl));
-            }
-            this.firstControl.setValidators(firstValidators);
-        }
-        else {
-            super.setFieldsStateAndValidators();
-        }
-    }
-    onOperatorChanged(value) {
-        const operator = Object.values(PepSmartFilterOperators).find((operator) => operator.id === value);
-        this.operator = operator;
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    onValueChanged() {
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-}
-PepTextFilterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-text-filter',
-                template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\r\n    <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\r\n        [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\r\n        [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\r\n    </pep-select>\r\n    <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\r\n        [label]=\"'SMART_FILTERS.AMOUNT' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\r\n        [type]=\"field.type\" [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\r\n        (valueChange)=\"onValueChanged()\">\r\n    </pep-textbox>\r\n</div>",
-                styles: [""]
-            },] }
-];
-
 class PepBooleanFilterComponent extends BaseFilterComponent {
-    constructor() {
-        super(...arguments);
-        this.options = [];
-        // // Override
-        // setFieldsStateAndValidators(): void {
-        //     this.secondControl.disable();
-        // }
-    }
-    ngOnInit() {
-        //
-    }
     // Override
     getDefaultOperator() {
         return PepSmartFilterOperators.Equals;
@@ -740,23 +626,14 @@ class PepBooleanFilterComponent extends BaseFilterComponent {
         const filterValue = { first: this.firstControl.value || false };
         return filterValue;
     }
-    onValueChanged(value) {
-        this.firstControl.setValue(value);
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
 }
 PepBooleanFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-boolean-filter',
-                template: "<ng-container *ngIf=\"inline\">\r\n    <pep-select [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"options\" [renderTitle]=\"renderTitle\"\r\n        [emptyOption]=\"true\" (valueChange)=\"onValueChanged($event)\">\r\n    </pep-select>\r\n\r\n</ng-container>\r\n\r\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\r\n    <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\">\r\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\r\n            {{ 'CHECKBOX.TRUE' | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\r\n            {{ 'CHECKBOX.FALSE' | translate }}\r\n        </mat-radio-button>\r\n    </mat-radio-group>\r\n</div>",
+                template: "<div [formGroup]=\"form\">\n    <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\">\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n            {{ 'CHECKBOX.TRUE' | translate }}\n        </mat-radio-button>\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n            {{ 'CHECKBOX.FALSE' | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</div>",
                 styles: [".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}"]
             },] }
-];
-PepBooleanFilterComponent.propDecorators = {
-    options: [{ type: Input }]
-};
+];
 
 class PepDateFilterComponent extends BaseFilterComponent {
     constructor() {
@@ -765,11 +642,6 @@ class PepDateFilterComponent extends BaseFilterComponent {
         this.chooseTimeOptions = [];
         this.chooseTimeUnitOptions = [];
     }
-    ngOnInit() {
-        if (this.inline) {
-            this.setControlsWidth();
-        }
-    }
     // Override
     getDefaultOperator() {
         return PepSmartFilterOperators.InTheLast;
@@ -842,58 +714,20 @@ class PepDateFilterComponent extends BaseFilterComponent {
             super.setFieldsStateAndValidators();
         }
     }
-    setControlsWidth() {
-        if (this.operator === PepSmartFilterOperators.Today ||
-            this.operator === PepSmartFilterOperators.ThisWeek ||
-            this.operator === PepSmartFilterOperators.ThisMonth ||
-            this.operator === PepSmartFilterOperators.IsEmpty ||
-            this.operator === PepSmartFilterOperators.IsNotEmpty) {
-            this.operatorWidth = 'auto';
-            this.fieldsWidth = '0%';
-        }
-        else if (this.operator === PepSmartFilterOperators.On) {
-            this.operatorWidth = '38%';
-            this.fieldsWidth = '62%';
-        }
-        else {
-            this.operatorWidth = '30%';
-            this.fieldsWidth = '70%';
-        }
-    }
     onOperatorChanged(value) {
         const operator = Object.values(PepSmartFilterOperators).find((operator) => operator.id === value);
         this.operator = operator;
         this.operatorUnit = this.getDefaultOperatorUnit();
-        if (this.inline) {
-            this.setControlsWidth();
-        }
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
     }
     onTimeUnitChanged(value) {
         const operatorUnit = Object.values(PepSmartFilterOperatorUnits).find((operatorUnit) => operatorUnit.id === value);
         this.operatorUnit = operatorUnit;
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
-    onDateValueChanged() {
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
     }
 }
 PepDateFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-date-filter',
-                template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\r\n    <ng-container>\r\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\r\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\r\n            [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\r\n        </pep-select>\r\n    </ng-container>\r\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\r\n                operator === PepSmartFilterOperators.NotInTheLast ||\r\n                operator === PepSmartFilterOperators.DueIn ||\r\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\r\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\r\n        <!-- Amount -->\r\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\r\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\r\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\r\n            (valueChange)=\"onDateValueChanged()\">\r\n        </pep-textbox>\r\n        <!-- Time unit -->\r\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\r\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\r\n            [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\r\n        </pep-select>\r\n    </div>\r\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\r\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\r\n        <!-- Start date -->\r\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\r\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\r\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\r\n            [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\r\n        </pep-date>\r\n        <!-- End date -->\r\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\r\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\r\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\r\n            [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\r\n        </pep-date>\r\n    </div>\r\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\r\n        <!-- Choose a date -->\r\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\r\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\r\n            [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\r\n            (valueChange)=\"onDateValueChanged()\">\r\n        </pep-date>\r\n    </ng-container>\r\n</div>",
+                template: "<div [formGroup]=\"form\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\" fxLayoutGap=\"1rem\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"'int'\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" fxFlex=\"50%\" [emptyOption]=\"false\"\n            [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        fxLayoutGap=\"1rem\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [value]=\"firstControl.value\" [maxDateValue]=\"secondControl.value\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [value]=\"secondControl.value\" [minDateValue]=\"firstControl.value\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl.value\">\n        </pep-date>\n    </ng-container>\n</div>",
                 styles: [""]
             },] }
 ];
@@ -908,36 +742,12 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
         super(...arguments);
         this.options = [];
         this.searchControl = new FormControl();
-        //inline props
-        this.selected = '';
-        this.inlineOptions = [];
         this.MAX_OPTIONS_TO_SHOW = 6.35;
         this.numberOptionsToShowSearch = 10;
     }
     ngOnInit() {
-        super.ngOnInit;
-        if (this.inline) {
-            this.inlineControlInit();
-        }
-        else {
-            this.noneInlineControlInit();
-        }
-    }
-    ngAfterViewInit() {
-        // Calc for the first time.
-        this.calcOptionsHeight(this.options.length);
-    }
-    inlineControlInit() {
-        var _a, _b, _c, _d;
-        //load options from field        
-        this.inlineOptions = ((_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this.field.options : [];
-        // Init the selected values from first value.        
-        if (((_d = (_c = this.firstControl) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
-            this.selected = this.firstControl.value.join(';');
-        }
-    }
-    noneInlineControlInit() {
         var _a;
+        super.ngOnInit;
         if (((_a = this.field.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             this.options = this.field.options.map((opt) => {
                 return { value: opt.value, count: opt.count, selected: false };
@@ -968,6 +778,10 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
             }, 125);
         });
     }
+    ngAfterViewInit() {
+        // Calc for the first time.
+        this.calcOptionsHeight(this.options.length);
+    }
     initOptionsSelectedValues(selectedValues) {
         this.options.forEach((opt) => {
             const isValueSelected = selectedValues && selectedValues.includes(opt.value);
@@ -995,20 +809,13 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
     }
     // Override
     getFilterValue() {
-        if (this.inline) {
-            return {
-                first: this.firstControl.value
-            };
-        }
-        else {
-            const selectedValues = this.options
-                .filter((opt) => opt.selected)
-                .map((opt) => opt.value);
-            const filterValue = {
-                first: selectedValues,
-            };
-            return selectedValues.length > 0 ? filterValue : null;
-        }
+        const selectedValues = this.options
+            .filter((opt) => opt.selected)
+            .map((opt) => opt.value);
+        const filterValue = {
+            first: selectedValues,
+        };
+        return selectedValues.length > 0 ? filterValue : null;
     }
     // Override
     initFilter() {
@@ -1019,23 +826,11 @@ class PepMultiSelectFilterComponent extends BaseFilterComponent {
         option.selected = event.checked;
         this.firstControl.setValue(this.options.filter((opt) => opt.selected).map((opt) => opt.value), { emitEvent: false });
     }
-    onMultiSelectChanged(value) {
-        if (value) {
-            const selected = value.split(';');
-            this.firstControl.setValue(selected);
-        }
-        else {
-            this.firstControl.setValue(null);
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-    }
 }
 PepMultiSelectFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-multi-select-filter',
-                template: "<ng-container *ngIf=\"inline\">\r\n    <pep-select [key]=\"'multi1'\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\r\n        [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\r\n        (valueChange)=\"onMultiSelectChanged($event)\">\r\n    </pep-select>\r\n</ng-container>\r\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\r\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\r\n        [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\r\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\r\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\r\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\r\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\r\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\r\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\r\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\r\n                    <div class=\"title\">\r\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\r\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\r\n                    </div>\r\n                </mat-checkbox>\r\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\r\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\r\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\r\n                        translate }}\r\n                    </span>\r\n                </ng-container>\r\n            </virtual-scroller>\r\n        </div>\r\n    </div>\r\n</div>",
+                template: "<div [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>",
                 styles: [".multi-select-options{margin:.5rem calc(.25rem * -1) 0;margin:var(--pep-spacing-sm,.5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(.5rem * -1) calc(.25rem * -1) 0;margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:.5rem .75rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-md,.75rem)}.multi-select-options .flip-scroll{padding:.5rem .25rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-xs,.25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll.rtl,.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;-webkit-padding-end:0;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout .mat-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:flex;justify-content:space-between;align-items:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}"]
             },] }
 ];
@@ -1049,8 +844,6 @@ class PepNumberFilterComponent extends BaseFilterComponent {
         super(...arguments);
         this.PepSmartFilterOperators = PepSmartFilterOperators;
         this.chooseTypeOptions = [];
-        this.operatorWidth = '38%';
-        this.fieldsWidth = '70%';
     }
     ngOnInit() {
         this.firstControl.valueChanges
@@ -1063,7 +856,6 @@ class PepNumberFilterComponent extends BaseFilterComponent {
             .subscribe(() => {
             this.setFieldsStateAndValidators();
         });
-        this.setControlsWidth();
     }
     // Override
     getDefaultOperator() {
@@ -1107,37 +899,15 @@ class PepNumberFilterComponent extends BaseFilterComponent {
             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(PepSmartFilterOperators).find((operator) => operator.id === value);
         this.operator = operator;
-        if (this._parentForm) {
-            this.updateParentForm();
-        }
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
-        this.setControlsWidth();
-    }
-    onValueChanged() {
-        if (this.emitOnChange) {
-            this.applyFilter();
-        }
     }
 }
 PepNumberFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-number-filter',
-                template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\r\n    <ng-container>\r\n        <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\r\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\r\n            [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\r\n        </pep-select>\r\n    </ng-container>\r\n    <div *ngIf=\"operator !== PepSmartFilterOperators.NumberRange\" [fxFlex]=\"inline ? fieldsWidth : null\">\r\n        <!-- Amount -->\r\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\r\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\"\r\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\r\n            (valueChange)=\"onValueChanged()\">\r\n        </pep-textbox>\r\n    </div>\r\n    <div *ngIf=\"operator === PepSmartFilterOperators.NumberRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\r\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\r\n        <!-- Min number -->\r\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\r\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\r\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\r\n            [maxValue]=\"secondControl?.value || ''\" (valueChange)=\"onValueChanged()\">\r\n        </pep-textbox>\r\n        <!-- Max number -->\r\n        <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\r\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\r\n            [formattedValue]=\"secondControl?.value || ''\" [value]=\"secondControl?.value || ''\"\r\n            [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\r\n        </pep-textbox>\r\n    </div>\r\n</div>",
+                template: "<div [formGroup]=\"form\">\n    <ng-container>\n        <pep-select [key]=\"'typeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.TYPE' | translate\"\n            [emptyOption]=\"false\" [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator !== PepSmartFilterOperators.NumberRange\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [type]=\"field.type\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\">\n        </pep-textbox>\n    </div>\n    <div *ngIf=\"operator === PepSmartFilterOperators.NumberRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        fxLayoutGap=\"1rem\">\n        <!-- Min number -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\" [maxValue]=\"secondControl.value\">\n        </pep-textbox>\n        <!-- Max number -->\n        <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type\" [formattedValue]=\"secondControl.value\"\n            [value]=\"secondControl.value\" [minValue]=\"firstControl.value\">\n        </pep-textbox>\n    </div>\n</div>",
                 styles: [""]
             },] }
 ];
@@ -1176,26 +946,16 @@ PepSmartFiltersModule.decorators = [
                     PepTextboxModule,
                     PepSearchModule,
                     PepIconModule,
-                    PepButtonModule,
-                    PepGroupButtonsModule
-                ],
-                exports: [
-                    PepSmartFiltersComponent,
-                    PepTextFilterComponent,
-                    PepBooleanFilterComponent,
-                    PepDateFilterComponent,
-                    PepMultiSelectFilterComponent,
-                    PepNumberFilterComponent
                 ],
+                exports: [PepSmartFiltersComponent],
                 declarations: [
                     // BaseFilterComponent,
                     PepSmartFiltersComponent,
                     PepFilterActionsComponent,
-                    PepTextFilterComponent,
                     PepBooleanFilterComponent,
                     PepDateFilterComponent,
                     PepMultiSelectFilterComponent,
-                    PepNumberFilterComponent
+                    PepNumberFilterComponent,
                 ],
             },] }
 ];
@@ -1222,17 +982,6 @@ class PepSmartFilterBaseField {
         return this._type;
     }
 }
-// Text field
-// ------------------------------
-class PepSmartFilterTextField extends PepSmartFilterBaseField {
-    constructor(field) {
-        super(field);
-        this._componentType = 'text';
-    }
-    getType() {
-        return 'text';
-    }
-}
 // Boolean field
 // ------------------------------
 class PepSmartFilterBooleanField extends PepSmartFilterBaseField {
@@ -1320,9 +1069,6 @@ class PepSmartFilterPercentageField extends PepSmartFilterNumberBaseField {
     }
 }
 
-function createTextSmartFilterField(data) {
-    return new PepSmartFilterTextField(data);
-}
 function createBooleanSmartFilterField(data) {
     return new PepSmartFilterBooleanField(data);
 }
@@ -1350,9 +1096,6 @@ function createPercentageSmartFilterField(data) {
 function createSmartFilterField(data, type) {
     let field;
     switch (type) {
-        case 'text':
-            field = createTextSmartFilterField(data);
-            break;
         case 'boolean':
             field = createBooleanSmartFilterField(data);
             break;
@@ -1403,5 +1146,5 @@ function createSmartFilter(fieldId, operator, first, second, operatorUnit) {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFilterComponent, IPepSmartFilterOperator, IPepSmartFilterOperatorUnit, PepBooleanFilterComponent, PepDateFilterComponent, PepFilterActionsComponent, PepMultiSelectFilterComponent, PepNumberFilterComponent, PepSmartFilterBaseField, PepSmartFilterBooleanField, PepSmartFilterCurrencyField, PepSmartFilterDateBaseField, PepSmartFilterDateField, PepSmartFilterDateTimeField, PepSmartFilterIntField, PepSmartFilterMultiSelectField, PepSmartFilterNumberBaseField, PepSmartFilterOperatorUnits, PepSmartFilterOperators, PepSmartFilterPercentageField, PepSmartFilterRealField, PepSmartFilterTextField, PepSmartFiltersComponent, PepSmartFiltersModule, PepTextFilterComponent, createSmartFilter, createSmartFilterField };
+export { BaseFilterComponent, IPepSmartFilterOperator, IPepSmartFilterOperatorUnit, PepBooleanFilterComponent, PepDateFilterComponent, PepFilterActionsComponent, PepMultiSelectFilterComponent, PepNumberFilterComponent, PepSmartFilterBaseField, PepSmartFilterBooleanField, PepSmartFilterCurrencyField, PepSmartFilterDateBaseField, PepSmartFilterDateField, PepSmartFilterDateTimeField, PepSmartFilterIntField, PepSmartFilterMultiSelectField, PepSmartFilterNumberBaseField, PepSmartFilterOperatorUnits, PepSmartFilterOperators, PepSmartFilterPercentageField, PepSmartFilterRealField, PepSmartFiltersComponent, PepSmartFiltersModule, createSmartFilter, createSmartFilterField };
 //# sourceMappingURL=pepperi-addons-ngx-lib-smart-filters.js.map