@pepperi-addons/ngx-lib 0.2.59 → 0.2.61-beta.3

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@angular/material/core'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/expansion'), require('@angular/material/icon'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/radio'), require('ngx-virtual-scroller'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/checkbox'), require('@pepperi-addons/ngx-lib/date'), require('@pepperi-addons/ngx-lib/select'), require('@pepperi-addons/ngx-lib/textbox'), require('@pepperi-addons/ngx-lib/search'), require('@pepperi-addons/ngx-lib/icon'), require('rxjs'), require('rxjs/operators'), require('@ngx-translate/core')) :
-    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-lib/smart-filters', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/flex-layout', '@angular/material/core', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/expansion', '@angular/material/icon', '@angular/material/form-field', '@angular/material/input', '@angular/material/radio', 'ngx-virtual-scroller', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/checkbox', '@pepperi-addons/ngx-lib/date', '@pepperi-addons/ngx-lib/select', '@pepperi-addons/ngx-lib/textbox', '@pepperi-addons/ngx-lib/search', '@pepperi-addons/ngx-lib/icon', 'rxjs', 'rxjs/operators', '@ngx-translate/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['smart-filters'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.flexLayout, global.ng.material.core, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.expansion, global.ng.material.icon, global.ng.material.formField, global.ng.material.input, global.ng.material.radio, global.ngxVirtualScroller, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].checkbox, global['pepperi-addons']['ngx-lib'].date, global['pepperi-addons']['ngx-lib'].select, global['pepperi-addons']['ngx-lib'].textbox, global['pepperi-addons']['ngx-lib'].search, global['pepperi-addons']['ngx-lib'].icon, global.rxjs, global.rxjs.operators, global.translate));
-}(this, (function (exports, core, common, forms, flexLayout, core$2, checkbox, chips, expansion, icon$1, formField, input, radio, ngxVirtualScroller, ngxLib, checkbox$1, date, select, textbox, search, icon, rxjs, operators, core$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@angular/material/core'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/expansion'), require('@angular/material/icon'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/radio'), require('ngx-virtual-scroller'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/checkbox'), require('@pepperi-addons/ngx-lib/date'), require('@pepperi-addons/ngx-lib/select'), require('@pepperi-addons/ngx-lib/textbox'), require('@pepperi-addons/ngx-lib/search'), require('@pepperi-addons/ngx-lib/button'), require('@pepperi-addons/ngx-lib/icon'), require('@pepperi-addons/ngx-lib/group-buttons'), require('rxjs/operators'), require('rxjs'), require('@ngx-translate/core')) :
+    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-lib/smart-filters', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/flex-layout', '@angular/material/core', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/expansion', '@angular/material/icon', '@angular/material/form-field', '@angular/material/input', '@angular/material/radio', 'ngx-virtual-scroller', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/checkbox', '@pepperi-addons/ngx-lib/date', '@pepperi-addons/ngx-lib/select', '@pepperi-addons/ngx-lib/textbox', '@pepperi-addons/ngx-lib/search', '@pepperi-addons/ngx-lib/button', '@pepperi-addons/ngx-lib/icon', '@pepperi-addons/ngx-lib/group-buttons', 'rxjs/operators', 'rxjs', '@ngx-translate/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['smart-filters'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.flexLayout, global.ng.material.core, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.expansion, global.ng.material.icon, global.ng.material.formField, global.ng.material.input, global.ng.material.radio, global.ngxVirtualScroller, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].checkbox, global['pepperi-addons']['ngx-lib'].date, global['pepperi-addons']['ngx-lib'].select, global['pepperi-addons']['ngx-lib'].textbox, global['pepperi-addons']['ngx-lib'].search, global['pepperi-addons']['ngx-lib'].button, global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib']['group-buttons'], global.rxjs.operators, global.rxjs, global.translate));
+}(this, (function (exports, core, common, forms, flexLayout, core$2, checkbox, chips, expansion, icon$1, formField, input, radio, ngxVirtualScroller, ngxLib, checkbox$1, date, select, textbox, search, button, icon, groupButtons, operators, rxjs, core$1) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -441,7 +441,7 @@
                     selector: 'pep-smart-filters',
                     template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    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}"]
+                    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}", ".smart-filters-container .clear-filter.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}.smart-filters-container .clear-filter.weak:hover{background:rgba(26,26,26,.16);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:0 .125rem .25rem 0 rgba(26,26,26,.08);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 .25rem rgba(23,102,166,.5);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:#fff;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;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;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:0 .125rem .25rem 0 rgba(26,26,26,.08);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:#fff;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;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;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;color:rgba(26,26,26,.35)!important;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:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}.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:rgba(26,26,26,.35);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:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}"]
                 },] }
     ];
     PepSmartFiltersComponent.ctorParameters = function () { return [
@@ -545,12 +545,12 @@
         short: 'Range',
         componentType: ['number'],
     };
-    // const Contains: Operator = {
-    //     id: 'contains',
-    //     name: 'Contains',
-    //     short: 'Contains',
-    //     type: ['text'],
-    // };
+    var Contains = {
+        id: 'contains',
+        name: 'CONTAINS',
+        short: 'Contains',
+        componentType: ['text'],
+    };
     // const BeginsWith: Operator = {
     //     id: 'beginsWith',
     //     name: 'Begins With',
@@ -655,7 +655,7 @@
         GreaterThan: GreaterThan,
         // GreaterThanOrEquals: GreaterThanOrEquals,
         NumberRange: NumberRange,
-        // Contains: Contains,
+        Contains: Contains,
         // BeginsWith: BeginsWith,
         // EndsWith: EndsWith,
         // After: After,
@@ -715,6 +715,10 @@
             this.validator = validator;
             this.renderer = renderer;
             this._fieldIdWithNoDots = '';
+            this.emitOnChange = false;
+            this.inline = false;
+            this.showActionButtons = true;
+            this.renderTitle = true;
             this.filterClear = new core.EventEmitter();
             this.filterChange = new core.EventEmitter();
             this.OPERATORS_TRANSLATION_PREFIX = 'SMART_FILTERS.OPERATORS';
@@ -744,6 +748,14 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BaseFilterComponent.prototype, "parentForm", {
+            set: function (form) {
+                this._parentForm = form;
+                this.updateParentForm();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BaseFilterComponent.prototype, "operator", {
             get: function () {
                 return this._operator;
@@ -772,10 +784,7 @@
             },
             set: function (operatorUnit) {
                 // Validate operator unit
-                if (operatorUnit === undefined) {
-                    this._operatorUnit = undefined;
-                }
-                else {
+                if (operatorUnit) {
                     var index = this.operatorUnits.findIndex(function (ou) { return ou.id === operatorUnit.id; });
                     if (index >= 0) {
                         this._operatorUnit = this.operatorUnits[index];
@@ -784,6 +793,9 @@
                         this._operatorUnit = this.operatorUnits[0];
                     }
                 }
+                else {
+                    this._operatorUnit = undefined;
+                }
             },
             enumerable: false,
             configurable: true
@@ -829,12 +841,14 @@
             var formValue = {};
             formValue[this.firstControlKey] = [];
             formValue[this.secondControlKey] = [];
-            // this.form.patchValue(formValue);
+            // this.form.patchValue(formValue);        
             this.form = this.builder.group(formValue);
             // this.form[this.firstControlKey] = [];
             // this.form[this.secondControlKey] = [];
             this.setupOperators();
-            this.createActionsComponent();
+            if (this.showActionButtons) {
+                this.createActionsComponent();
+            }
         };
         BaseFilterComponent.prototype.setupOperators = function () {
             var _this = this;
@@ -879,6 +893,16 @@
                 this.clearFilter(false);
             }
         };
+        BaseFilterComponent.prototype.updateParentForm = function () {
+            this._parentForm.setControl('fieldId', this.builder.control(this.field.id));
+            this._parentForm.setControl('fieldType', this.builder.control(this.field.type));
+            this._parentForm.setControl('operator', this.builder.control(this.operator));
+            this._parentForm.setControl('operatorUnit', this.builder.control(this.operatorUnit));
+            this._parentForm.setControl('values', this.builder.group({
+                first: this.firstControl,
+                second: this.secondControl
+            }));
+        };
         BaseFilterComponent.prototype.getDestroyer = function () {
             return operators.takeUntil(this._destroyed);
         };
@@ -943,7 +967,9 @@
         BaseFilterComponent.prototype.ngOnDestroy = function () {
             this._destroyed.next();
             this._destroyed.complete();
-            this.actionsContainerRef.destroy();
+            if (this.showActionButtons) {
+                this.actionsContainerRef.destroy();
+            }
         };
         return BaseFilterComponent;
     }());
@@ -962,15 +988,108 @@
     BaseFilterComponent.propDecorators = {
         field: [{ type: core.Input }],
         filter: [{ type: core.Input }],
+        parentForm: [{ type: core.Input }],
+        emitOnChange: [{ type: core.Input }],
+        inline: [{ type: core.Input }],
+        showActionButtons: [{ type: core.Input }],
+        renderTitle: [{ type: core.Input }],
         filterClear: [{ type: core.Output }],
         filterChange: [{ type: core.Output }]
     };
 
+    var PepTextFilterComponent = /** @class */ (function (_super) {
+        __extends(PepTextFilterComponent, _super);
+        function PepTextFilterComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.chooseTypeOptions = [];
+            _this.operatorWidth = '38%';
+            _this.firstControlWidth = '62%';
+            return _this;
+        }
+        PepTextFilterComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.firstControl.valueChanges
+                .pipe(this.getDestroyer(), operators.distinctUntilChanged())
+                .subscribe(function () {
+                _this.setFieldsStateAndValidators();
+            });
+        };
+        // Override
+        PepTextFilterComponent.prototype.getDefaultOperator = function () {
+            return PepSmartFilterOperators.Equals;
+        };
+        // Override
+        PepTextFilterComponent.prototype.getFilterValue = function () {
+            var filterValue = {
+                first: this.firstControl.value,
+            };
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                filterValue['second'] = this.secondControl.value;
+            }
+            return filterValue;
+        };
+        // Override
+        PepTextFilterComponent.prototype.loadOperatorsOptions = function () {
+            var _this = this;
+            this.chooseTypeOptions = this.operators.map(function (operator) {
+                return {
+                    key: operator.id,
+                    value: _this.translate.instant(_this.OPERATORS_TRANSLATION_PREFIX + "." + operator.name),
+                };
+            });
+        };
+        // Override
+        PepTextFilterComponent.prototype.setFieldsStateAndValidators = function () {
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                var firstValidators = [forms.Validators.required];
+                if (this.secondControl.value) {
+                    firstValidators.push(this.validator.isLessThan(this.secondControl));
+                }
+                this.firstControl.setValidators(firstValidators);
+            }
+            else {
+                _super.prototype.setFieldsStateAndValidators.call(this);
+            }
+        };
+        PepTextFilterComponent.prototype.onOperatorChanged = function (value) {
+            var operator = Object.values(PepSmartFilterOperators).find(function (operator) { return operator.id === value; });
+            this.operator = operator;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepTextFilterComponent.prototype.onValueChanged = function () {
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        return PepTextFilterComponent;
+    }(BaseFilterComponent));
+    PepTextFilterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-text-filter',
+                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n        [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n        [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n    </pep-select>\n    <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n        [label]=\"'SMART_FILTERS.AMOUNT' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n        [type]=\"field.type\" [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n        (valueChange)=\"onValueChanged()\">\n    </pep-textbox>\n</div>",
+                    styles: [""]
+                },] }
+    ];
+
     var PepBooleanFilterComponent = /** @class */ (function (_super) {
         __extends(PepBooleanFilterComponent, _super);
         function PepBooleanFilterComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.options = [];
+            return _this;
+            // // Override
+            // setFieldsStateAndValidators(): void {
+            //     this.secondControl.disable();
+            // }
         }
+        PepBooleanFilterComponent.prototype.ngOnInit = function () {
+            //
+        };
         // Override
         PepBooleanFilterComponent.prototype.getDefaultOperator = function () {
             return PepSmartFilterOperators.Equals;
@@ -980,15 +1099,24 @@
             var filterValue = { first: this.firstControl.value || false };
             return filterValue;
         };
+        PepBooleanFilterComponent.prototype.onValueChanged = function (value) {
+            this.firstControl.setValue(value);
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
         return PepBooleanFilterComponent;
     }(BaseFilterComponent));
     PepBooleanFilterComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-boolean-filter',
-                    template: "<div [formGroup]=\"form\">\n    <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\">\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n            {{ 'CHECKBOX.TRUE' | translate }}\n        </mat-radio-button>\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n            {{ 'CHECKBOX.FALSE' | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</div>",
+                    template: "<ng-container *ngIf=\"inline\">\n    <pep-select [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"options\" [renderTitle]=\"renderTitle\"\n        [emptyOption]=\"true\" (valueChange)=\"onValueChanged($event)\">\n    </pep-select>\n\n</ng-container>\n\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\">\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: core.Input }]
+    };
 
     var PepDateFilterComponent = /** @class */ (function (_super) {
         __extends(PepDateFilterComponent, _super);
@@ -999,6 +1127,11 @@
             _this.chooseTimeUnitOptions = [];
             return _this;
         }
+        PepDateFilterComponent.prototype.ngOnInit = function () {
+            if (this.inline) {
+                this.setControlsWidth();
+            }
+        };
         // Override
         PepDateFilterComponent.prototype.getDefaultOperator = function () {
             return PepSmartFilterOperators.InTheLast;
@@ -1072,21 +1205,59 @@
                 _super.prototype.setFieldsStateAndValidators.call(this);
             }
         };
+        PepDateFilterComponent.prototype.setControlsWidth = function () {
+            if (this.operator === PepSmartFilterOperators.Today ||
+                this.operator === PepSmartFilterOperators.ThisWeek ||
+                this.operator === PepSmartFilterOperators.ThisMonth ||
+                this.operator === PepSmartFilterOperators.IsEmpty ||
+                this.operator === PepSmartFilterOperators.IsNotEmpty) {
+                this.operatorWidth = 'auto';
+                this.fieldsWidth = '0%';
+            }
+            else if (this.operator === PepSmartFilterOperators.On) {
+                this.operatorWidth = '38%';
+                this.fieldsWidth = '62%';
+            }
+            else {
+                this.operatorWidth = '30%';
+                this.fieldsWidth = '70%';
+            }
+        };
         PepDateFilterComponent.prototype.onOperatorChanged = function (value) {
             var operator = Object.values(PepSmartFilterOperators).find(function (operator) { return operator.id === value; });
             this.operator = operator;
             this.operatorUnit = this.getDefaultOperatorUnit();
+            if (this.inline) {
+                this.setControlsWidth();
+            }
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
         };
         PepDateFilterComponent.prototype.onTimeUnitChanged = function (value) {
             var operatorUnit = Object.values(PepSmartFilterOperatorUnits).find(function (operatorUnit) { return operatorUnit.id === value; });
             this.operatorUnit = operatorUnit;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
+        PepDateFilterComponent.prototype.onDateValueChanged = function () {
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
         };
         return PepDateFilterComponent;
     }(BaseFilterComponent));
     PepDateFilterComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-date-filter',
-                    template: "<div [formGroup]=\"form\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\" fxLayoutGap=\"1rem\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"'int'\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" fxFlex=\"50%\" [emptyOption]=\"false\"\n            [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        fxLayoutGap=\"1rem\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [value]=\"firstControl.value\" [maxDateValue]=\"secondControl.value\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [value]=\"secondControl.value\" [minDateValue]=\"firstControl.value\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl.value\">\n        </pep-date>\n    </ng-container>\n</div>",
+                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\n            [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\n            [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\n            [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </ng-container>\n</div>",
                     styles: [""]
                 },] }
     ];
@@ -1103,14 +1274,38 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.options = [];
             _this.searchControl = new forms.FormControl();
+            //inline props
+            _this.selected = '';
+            _this.inlineOptions = [];
             _this.MAX_OPTIONS_TO_SHOW = 6.35;
             _this.numberOptionsToShowSearch = 10;
             return _this;
         }
         PepMultiSelectFilterComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit;
+            if (this.inline) {
+                this.inlineControlInit();
+            }
+            else {
+                this.noneInlineControlInit();
+            }
+        };
+        PepMultiSelectFilterComponent.prototype.ngAfterViewInit = function () {
+            // Calc for the first time.
+            this.calcOptionsHeight(this.options.length);
+        };
+        PepMultiSelectFilterComponent.prototype.inlineControlInit = function () {
+            var _a, _b, _c, _d;
+            //load options from field        
+            this.inlineOptions = ((_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length) > 0 ? this.field.options : [];
+            // Init the selected values from first value.        
+            if (((_d = (_c = this.firstControl) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+                this.selected = this.firstControl.value.join(';');
+            }
+        };
+        PepMultiSelectFilterComponent.prototype.noneInlineControlInit = function () {
             var _this = this;
             var _a;
-            _super.prototype.ngOnInit;
             if (((_a = this.field.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 this.options = this.field.options.map(function (opt) {
                     return { value: opt.value, count: opt.count, selected: false };
@@ -1141,10 +1336,6 @@
                 }, 125);
             });
         };
-        PepMultiSelectFilterComponent.prototype.ngAfterViewInit = function () {
-            // Calc for the first time.
-            this.calcOptionsHeight(this.options.length);
-        };
         PepMultiSelectFilterComponent.prototype.initOptionsSelectedValues = function (selectedValues) {
             this.options.forEach(function (opt) {
                 var isValueSelected = selectedValues && selectedValues.includes(opt.value);
@@ -1172,13 +1363,20 @@
         };
         // Override
         PepMultiSelectFilterComponent.prototype.getFilterValue = function () {
-            var selectedValues = this.options
-                .filter(function (opt) { return opt.selected; })
-                .map(function (opt) { return opt.value; });
-            var filterValue = {
-                first: selectedValues,
-            };
-            return selectedValues.length > 0 ? filterValue : null;
+            if (this.inline) {
+                return {
+                    first: this.firstControl.value
+                };
+            }
+            else {
+                var selectedValues = this.options
+                    .filter(function (opt) { return opt.selected; })
+                    .map(function (opt) { return opt.value; });
+                var filterValue = {
+                    first: selectedValues,
+                };
+                return selectedValues.length > 0 ? filterValue : null;
+            }
         };
         // Override
         PepMultiSelectFilterComponent.prototype.initFilter = function () {
@@ -1189,12 +1387,24 @@
             option.selected = event.checked;
             this.firstControl.setValue(this.options.filter(function (opt) { return opt.selected; }).map(function (opt) { return opt.value; }), { emitEvent: false });
         };
+        PepMultiSelectFilterComponent.prototype.onMultiSelectChanged = function (value) {
+            if (value) {
+                var selected = value.split(';');
+                this.firstControl.setValue(selected);
+            }
+            else {
+                this.firstControl.setValue(null);
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+        };
         return PepMultiSelectFilterComponent;
     }(BaseFilterComponent));
     PepMultiSelectFilterComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-multi-select-filter',
-                    template: "<div [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>",
+                    template: "<ng-container *ngIf=\"inline\">\n    <pep-select [key]=\"'multi1'\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n        [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n        (valueChange)=\"onMultiSelectChanged($event)\">\n    </pep-select>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>",
                     styles: [".multi-select-options{margin:.5rem calc(.25rem * -1) 0;margin:var(--pep-spacing-sm,.5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(.5rem * -1) calc(.25rem * -1) 0;margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:.5rem .75rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-md,.75rem)}.multi-select-options .flip-scroll{padding:.5rem .25rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-xs,.25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll.rtl,.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;-webkit-padding-end:0;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout .mat-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:flex;justify-content:space-between;align-items:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}"]
                 },] }
     ];
@@ -1209,6 +1419,8 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.PepSmartFilterOperators = PepSmartFilterOperators;
             _this.chooseTypeOptions = [];
+            _this.operatorWidth = '38%';
+            _this.fieldsWidth = '70%';
             return _this;
         }
         PepNumberFilterComponent.prototype.ngOnInit = function () {
@@ -1223,6 +1435,7 @@
                 .subscribe(function () {
                 _this.setFieldsStateAndValidators();
             });
+            this.setControlsWidth();
         };
         // Override
         PepNumberFilterComponent.prototype.getDefaultOperator = function () {
@@ -1267,16 +1480,38 @@
                 _super.prototype.setFieldsStateAndValidators.call(this);
             }
         };
+        PepNumberFilterComponent.prototype.setControlsWidth = function () {
+            if (this.operator === PepSmartFilterOperators.NumberRange) {
+                this.operatorWidth = '30%';
+                this.fieldsWidth = '70%';
+            }
+            else {
+                this.operatorWidth = '38%';
+                this.fieldsWidth = '62%';
+            }
+        };
         PepNumberFilterComponent.prototype.onOperatorChanged = function (value) {
             var operator = Object.values(PepSmartFilterOperators).find(function (operator) { return operator.id === value; });
             this.operator = operator;
+            if (this._parentForm) {
+                this.updateParentForm();
+            }
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
+            this.setControlsWidth();
+        };
+        PepNumberFilterComponent.prototype.onValueChanged = function () {
+            if (this.emitOnChange) {
+                this.applyFilter();
+            }
         };
         return PepNumberFilterComponent;
     }(BaseFilterComponent));
     PepNumberFilterComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-number-filter',
-                    template: "<div [formGroup]=\"form\">\n    <ng-container>\n        <pep-select [key]=\"'typeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.TYPE' | translate\"\n            [emptyOption]=\"false\" [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator !== PepSmartFilterOperators.NumberRange\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [type]=\"field.type\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\">\n        </pep-textbox>\n    </div>\n    <div *ngIf=\"operator === PepSmartFilterOperators.NumberRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        fxLayoutGap=\"1rem\">\n        <!-- Min number -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\" [maxValue]=\"secondControl.value\">\n        </pep-textbox>\n        <!-- Max number -->\n        <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type\" [formattedValue]=\"secondControl.value\"\n            [value]=\"secondControl.value\" [minValue]=\"firstControl.value\">\n        </pep-textbox>\n    </div>\n</div>",
+                    template: "<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator !== PepSmartFilterOperators.NumberRange\" [fxFlex]=\"inline ? 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            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </div>\n    <div *ngIf=\"operator === PepSmartFilterOperators.NumberRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [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            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            [maxValue]=\"secondControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n        <!-- Max number -->\n        <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n            [formattedValue]=\"secondControl?.value || ''\" [value]=\"secondControl?.value || ''\"\n            [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </div>\n</div>",
                     styles: [""]
                 },] }
     ];
@@ -1316,16 +1551,26 @@
                         textbox.PepTextboxModule,
                         search.PepSearchModule,
                         icon.PepIconModule,
+                        button.PepButtonModule,
+                        groupButtons.PepGroupButtonsModule
+                    ],
+                    exports: [
+                        PepSmartFiltersComponent,
+                        PepTextFilterComponent,
+                        PepBooleanFilterComponent,
+                        PepDateFilterComponent,
+                        PepMultiSelectFilterComponent,
+                        PepNumberFilterComponent
                     ],
-                    exports: [PepSmartFiltersComponent],
                     declarations: [
                         // BaseFilterComponent,
                         PepSmartFiltersComponent,
                         PepFilterActionsComponent,
+                        PepTextFilterComponent,
                         PepBooleanFilterComponent,
                         PepDateFilterComponent,
                         PepMultiSelectFilterComponent,
-                        PepNumberFilterComponent,
+                        PepNumberFilterComponent
                     ],
                 },] }
     ];
@@ -1361,6 +1606,20 @@
         });
         return PepSmartFilterBaseField;
     }());
+    // Text field
+    // ------------------------------
+    var PepSmartFilterTextField = /** @class */ (function (_super) {
+        __extends(PepSmartFilterTextField, _super);
+        function PepSmartFilterTextField(field) {
+            var _this = _super.call(this, field) || this;
+            _this._componentType = 'text';
+            return _this;
+        }
+        PepSmartFilterTextField.prototype.getType = function () {
+            return 'text';
+        };
+        return PepSmartFilterTextField;
+    }(PepSmartFilterBaseField));
     // Boolean field
     // ------------------------------
     var PepSmartFilterBooleanField = /** @class */ (function (_super) {
@@ -1472,6 +1731,9 @@
         return PepSmartFilterPercentageField;
     }(PepSmartFilterNumberBaseField));
 
+    function createTextSmartFilterField(data) {
+        return new PepSmartFilterTextField(data);
+    }
     function createBooleanSmartFilterField(data) {
         return new PepSmartFilterBooleanField(data);
     }
@@ -1499,6 +1761,9 @@
     function createSmartFilterField(data, type) {
         var field;
         switch (type) {
+            case 'text':
+                field = createTextSmartFilterField(data);
+                break;
             case 'boolean':
                 field = createBooleanSmartFilterField(data);
                 break;
@@ -1570,8 +1835,10 @@
     exports.PepSmartFilterOperators = PepSmartFilterOperators;
     exports.PepSmartFilterPercentageField = PepSmartFilterPercentageField;
     exports.PepSmartFilterRealField = PepSmartFilterRealField;
+    exports.PepSmartFilterTextField = PepSmartFilterTextField;
     exports.PepSmartFiltersComponent = PepSmartFiltersComponent;
     exports.PepSmartFiltersModule = PepSmartFiltersModule;
+    exports.PepTextFilterComponent = PepTextFilterComponent;
     exports.createSmartFilter = createSmartFilter;
     exports.createSmartFilterField = createSmartFilterField;