monkey-front-components 0.0.784 → 0.0.786

package/fesm2020/monkey-front-components.mjs

@@ -7,8 +7,8 @@ import { MonkeyUtils, MonkeyInputModule, MonkeySelectModule, MonkeyRadioButtonMo
 import { Subject, BehaviorSubject } from 'rxjs';
 import { takeUntil, debounceTime, filter } from 'rxjs/operators';
 import * as i1 from '@angular/forms';
-import { Validators as Validators$1, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@angular/common';
+import { Validators as Validators$1, FormGroup, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
+import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
 import { NavigationStart, NavigationEnd, RouterModule, NavigationError, NavigationCancel } from '@angular/router';
@@ -401,7 +401,13 @@ const validators = {
     },
     differentFromZero: Validators.differentFromZero,
     fullName: Validators.validateFullName,
-    containsNumber: Validators.containsNumber
+    containsNumber: Validators.containsNumber,
+    min: (param) => {
+        return Validators$1.min(param);
+    },
+    max: (param) => {
+        return Validators$1.max(param);
+    }
 };
 
 class BaseDynamicArray extends BaseComponent {
@@ -818,7 +824,7 @@ class MECXDynamicFileUploadComponent {
     }
 }
 MECXDynamicFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicFileUploadComponent, selector: "mecx-dynamic-file-upload", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors", self: "self" }, host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<monkey-file-upload\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [icon]=\"_field?.icon\" [formControl]=\"_form.controls[_field?.name]\"\n  [placeholder]=\"_field?.placeholder | translate\"\n  [helperMessage]=\"_field?.helperMessage | translate\" [label]=\"_field?.label | translate\"\n  [maxSize]=\"_field?.maxSize || 5242880\" [fileUpload]=\"_function\"\n  [maxSizeErrorMessage]=\"'FIELD.FILE.MAX-FILE' | translate\"\n  [allowedExtensionErrorMessage]=\"'FIELD.FILE.ALLOWED-EXTENSION' | translate\"\n  [allowedExtensions]=\"_field?.allowedExtensions || []\" *ngIf=\"_field\">\n</monkey-file-upload>", components: [{ type: i1$2.MonkeyFileUploadComponent, selector: "monkey-file-upload", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "infoMessage", "uploadOngoingMessage", "errorMessage", "listenFiles", "maxSize", "allowedExtensions", "maxSizeErrorMessage", "allowedExtensionErrorMessage", "fileUpload", "multiple", "value"], outputs: ["onChange", "onHandleFilesReady"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+MECXDynamicFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicFileUploadComponent, selector: "mecx-dynamic-file-upload", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors", self: "self" }, host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<monkey-file-upload\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [icon]=\"_field?.icon\" [formControl]=\"_form.controls[_field?.name]\"\n  [placeholder]=\"_field?.placeholder | translate\"\n  [helperMessage]=\"_field?.helperMessage | translate\" [label]=\"_field?.label | translate\"\n  [maxSize]=\"_field?.maxSize || 5242880\" [fileUpload]=\"_function\"\n  [maxSizeErrorMessage]=\"'FIELD.FILE.MAX-FILE' | translate\"\n  [allowedExtensionErrorMessage]=\"'FIELD.FILE.ALLOWED-EXTENSION' | translate\"\n  [allowedExtensions]=\"_field?.allowedExtensions || []\" *ngIf=\"_field\">\n</monkey-file-upload>", components: [{ type: i1$2.MonkeyFileUploadComponent, selector: "monkey-file-upload", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "infoMessage", "uploadOngoingMessage", "errorMessage", "listenFiles", "maxSize", "allowedExtensions", "maxSizeErrorMessage", "allowedExtensionErrorMessage", "fileUpload", "multiple", "value"], outputs: ["onChange", "onHandleFilesReady"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-dynamic-file-upload', encapsulation: ViewEncapsulation.None, template: "<monkey-file-upload\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [icon]=\"_field?.icon\" [formControl]=\"_form.controls[_field?.name]\"\n  [placeholder]=\"_field?.placeholder | translate\"\n  [helperMessage]=\"_field?.helperMessage | translate\" [label]=\"_field?.label | translate\"\n  [maxSize]=\"_field?.maxSize || 5242880\" [fileUpload]=\"_function\"\n  [maxSizeErrorMessage]=\"'FIELD.FILE.MAX-FILE' | translate\"\n  [allowedExtensionErrorMessage]=\"'FIELD.FILE.ALLOWED-EXTENSION' | translate\"\n  [allowedExtensions]=\"_field?.allowedExtensions || []\" *ngIf=\"_field\">\n</monkey-file-upload>" }]
@@ -1015,7 +1021,7 @@ class MECXDynamicRadioComponent {
     }
 }
 MECXDynamicRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicRadioComponent, selector: "mecx-dynamic-radio", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<monkey-radiobutton\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [formControl]=\"_form.controls[_field?.name]\" [helperMessage]=\"_field?.helperMessage | translate\"\n  [label]=\"_field?.label | translate\">\n  <monkey-option\n    *ngFor=\"let value of _field?.value\"\n    [label]=\"value.description | translate\"\n    [attr.data-testid]=\"'option-' + value.value.toString().toLowerCase()\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-radiobutton>\n", components: [{ type: i1$2.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+MECXDynamicRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicRadioComponent, selector: "mecx-dynamic-radio", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<monkey-radiobutton\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [formControl]=\"_form.controls[_field?.name]\" [helperMessage]=\"_field?.helperMessage | translate\"\n  [label]=\"_field?.label | translate\">\n  <monkey-option\n    *ngFor=\"let value of _field?.value\"\n    [label]=\"value.description | translate\"\n    [attr.data-testid]=\"'option-' + value.value.toString().toLowerCase()\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-radiobutton>\n", components: [{ type: i1$2.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-dynamic-radio', encapsulation: ViewEncapsulation.None, template: "<monkey-radiobutton\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [formControl]=\"_form.controls[_field?.name]\" [helperMessage]=\"_field?.helperMessage | translate\"\n  [label]=\"_field?.label | translate\">\n  <monkey-option\n    *ngFor=\"let value of _field?.value\"\n    [label]=\"value.description | translate\"\n    [attr.data-testid]=\"'option-' + value.value.toString().toLowerCase()\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-radiobutton>\n" }]
@@ -1092,7 +1098,7 @@ class MECXDynamicSelectComponent {
     }
 }
 MECXDynamicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicSelectComponent, selector: "mecx-dynamic-select", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors", self: "self" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<monkey-select\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [formControl]=\"_form.controls[_field?.name]\" [helperMessage]=\"_field?.helperMessage | translate\"\n  [label]=\"_field?.label | translate\" (click)=\"onHandleGenericLoad()\"\n  [onHandleOptions]=\"_onHandleOptions\" (onChange)=\"onChange($event)\"\n  [labelSelect]=\"_form.get(_field?.name).value || ('FIELD.SELECT' | translate)\"\n  [placeholder]=\"_field?.placeholder | translate\">\n  <monkey-option [label]=\"'FIELD.LOADING' | translate\" *ngIf=\"!_field?.value?.length\"\n    enableClick=\"false\">\n  </monkey-option>\n  <monkey-option *ngFor=\"let value of _field?.value\" [label]=\"value.description | translate\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-select>", components: [{ type: i1$2.MonkeySelectComponent, selector: "monkey-select", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "labelSelect", "onHandleOptions", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+MECXDynamicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicSelectComponent, selector: "mecx-dynamic-select", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors", self: "self" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<monkey-select\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [formControl]=\"_form.controls[_field?.name]\" [helperMessage]=\"_field?.helperMessage | translate\"\n  [label]=\"_field?.label | translate\" (click)=\"onHandleGenericLoad()\"\n  [onHandleOptions]=\"_onHandleOptions\" (onChange)=\"onChange($event)\"\n  [labelSelect]=\"_form.get(_field?.name).value || ('FIELD.SELECT' | translate)\"\n  [placeholder]=\"_field?.placeholder | translate\">\n  <monkey-option [label]=\"'FIELD.LOADING' | translate\" *ngIf=\"!_field?.value?.length\"\n    enableClick=\"false\">\n  </monkey-option>\n  <monkey-option *ngFor=\"let value of _field?.value\" [label]=\"value.description | translate\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-select>", components: [{ type: i1$2.MonkeySelectComponent, selector: "monkey-select", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "labelSelect", "onHandleOptions", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-dynamic-select', encapsulation: ViewEncapsulation.None, template: "<monkey-select\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [formControl]=\"_form.controls[_field?.name]\" [helperMessage]=\"_field?.helperMessage | translate\"\n  [label]=\"_field?.label | translate\" (click)=\"onHandleGenericLoad()\"\n  [onHandleOptions]=\"_onHandleOptions\" (onChange)=\"onChange($event)\"\n  [labelSelect]=\"_form.get(_field?.name).value || ('FIELD.SELECT' | translate)\"\n  [placeholder]=\"_field?.placeholder | translate\">\n  <monkey-option [label]=\"'FIELD.LOADING' | translate\" *ngIf=\"!_field?.value?.length\"\n    enableClick=\"false\">\n  </monkey-option>\n  <monkey-option *ngFor=\"let value of _field?.value\" [label]=\"value.description | translate\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-select>" }]
@@ -1176,7 +1182,7 @@ class MECXDynamicSelectSearchComponent {
     }
 }
 MECXDynamicSelectSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicSelectSearchComponent, selector: "mecx-dynamic-select-search", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors", self: "self", options: "options" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<monkey-select-search\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [formControl]=\"_form.controls[_field?.name]\" [helperMessage]=\"_field?.helperMessage | translate\"\n  [label]=\"_field?.label | translate\" (click)=\"onHandleGenericLoad()\"\n  [onHandleOptions]=\"_onHandleOptions\" (onChange)=\"onChange($event)\"\n  [fieldToCompare]=\"_field?.fieldToCompare\"\n  [labelSelect]=\"_form.get(_field?.name).value || ('FIELD.SELECT' | translate)\"\n  [placeholder]=\"_field?.placeholder | translate\">\n  <monkey-option [label]=\"'FIELD.LOADING' | translate\" *ngIf=\"!_field?.value?.length && !_options?.length\"\n    enableClick=\"false\">\n  </monkey-option>\n  <monkey-option *ngFor=\"let value of (_field?.value || _options)\" [label]=\"value.description | translate\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-select-search>", components: [{ type: i1$2.MonkeySelectSearchComponent, selector: "monkey-select-search", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "labelSelect", "fieldToCompare", "onHandleOptions", "value"], outputs: ["onChange", "onSearch"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+MECXDynamicSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicSelectSearchComponent, selector: "mecx-dynamic-select-search", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors", self: "self", options: "options" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<monkey-select-search\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [formControl]=\"_form.controls[_field?.name]\" [helperMessage]=\"_field?.helperMessage | translate\"\n  [label]=\"_field?.label | translate\" (click)=\"onHandleGenericLoad()\"\n  [onHandleOptions]=\"_onHandleOptions\" (onChange)=\"onChange($event)\"\n  [fieldToCompare]=\"_field?.fieldToCompare\"\n  [labelSelect]=\"_form.get(_field?.name).value || ('FIELD.SELECT' | translate)\"\n  [placeholder]=\"_field?.placeholder | translate\">\n  <monkey-option [label]=\"'FIELD.LOADING' | translate\" *ngIf=\"!_field?.value?.length && !_options?.length\"\n    enableClick=\"false\">\n  </monkey-option>\n  <monkey-option *ngFor=\"let value of (_field?.value || _options)\" [label]=\"value.description | translate\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-select-search>", components: [{ type: i1$2.MonkeySelectSearchComponent, selector: "monkey-select-search", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "labelSelect", "fieldToCompare", "onHandleOptions", "value"], outputs: ["onChange", "onSearch"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicSelectSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-dynamic-select-search', encapsulation: ViewEncapsulation.None, template: "<monkey-select-search\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\n  [formControl]=\"_form.controls[_field?.name]\" [helperMessage]=\"_field?.helperMessage | translate\"\n  [label]=\"_field?.label | translate\" (click)=\"onHandleGenericLoad()\"\n  [onHandleOptions]=\"_onHandleOptions\" (onChange)=\"onChange($event)\"\n  [fieldToCompare]=\"_field?.fieldToCompare\"\n  [labelSelect]=\"_form.get(_field?.name).value || ('FIELD.SELECT' | translate)\"\n  [placeholder]=\"_field?.placeholder | translate\">\n  <monkey-option [label]=\"'FIELD.LOADING' | translate\" *ngIf=\"!_field?.value?.length && !_options?.length\"\n    enableClick=\"false\">\n  </monkey-option>\n  <monkey-option *ngFor=\"let value of (_field?.value || _options)\" [label]=\"value.description | translate\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-select-search>" }]
@@ -1314,7 +1320,7 @@ class MECXDynamicFormComponent extends BaseDynamic {
     }
 }
 MECXDynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicFormComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicFormComponent, selector: "mecx-dynamic-form", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"isLoading\">\n  <div class=\"input-loading\" *ngFor=\"let item of [1,2,3,4,5,6,7]\"></div>\n</ng-container>\n\n<form name=\"form\" [formGroup]=\"_form\" *ngIf=\"_form && !isLoading\">\n  <div class=\"row\">\n    <div *ngFor=\"let field of fields;\" MECXDynamic [field]=\"field\" [form]=\"_form\" [self]=\"self\"\n      [formErrors]=\"__monkeyecxFormErrors\" [style.display]=\"'none'\">\n    </div>\n  </div>\n</form>", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: MECXDynamicDirective, selector: "[MECXDynamic]", inputs: ["field", "form", "formErrors", "self", "plusValidations"] }], encapsulation: i0.ViewEncapsulation.None });
+MECXDynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicFormComponent, selector: "mecx-dynamic-form", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"isLoading\">\n  <div class=\"input-loading\" *ngFor=\"let item of [1,2,3,4,5,6,7]\"></div>\n</ng-container>\n\n<form name=\"form\" [formGroup]=\"_form\" *ngIf=\"_form && !isLoading\">\n  <div class=\"row\">\n    <div *ngFor=\"let field of fields;\" MECXDynamic [field]=\"field\" [form]=\"_form\" [self]=\"self\"\n      [formErrors]=\"__monkeyecxFormErrors\" [style.display]=\"'none'\">\n    </div>\n  </div>\n</form>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: MECXDynamicDirective, selector: "[MECXDynamic]", inputs: ["field", "form", "formErrors", "self", "plusValidations"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-dynamic-form', styles: [], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"isLoading\">\n  <div class=\"input-loading\" *ngFor=\"let item of [1,2,3,4,5,6,7]\"></div>\n</ng-container>\n\n<form name=\"form\" [formGroup]=\"_form\" *ngIf=\"_form && !isLoading\">\n  <div class=\"row\">\n    <div *ngFor=\"let field of fields;\" MECXDynamic [field]=\"field\" [form]=\"_form\" [self]=\"self\"\n      [formErrors]=\"__monkeyecxFormErrors\" [style.display]=\"'none'\">\n    </div>\n  </div>\n</form>" }]
@@ -1375,7 +1381,7 @@ class MECXDynamicFormArrayComponent extends BaseDynamicArray {
     }
 }
 MECXDynamicFormArrayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicFormArrayComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicFormArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicFormArrayComponent, selector: "mecx-dynamic-form-array", usesInheritance: true, ngImport: i0, template: "<form name=\"form\" [formGroup]=\"_form\" *ngIf=\"_form\">\n  <div formArrayName=\"fields\">\n    <div *ngFor=\"let item of formValues.controls; let indForm=index\" [formGroupName]=\"indForm\">\n      <monkey-button type=\"secondary\" color=\"error\" icon=\"close-20\" iconPosition=\"right\"\n        [label]=\"'BUTTONS.REMOVE' | translate\" (click)=\"onHandleRemove(indForm)\"\n        *ngIf=\"formValues.controls.length > 1 && !disabled\">\n      </monkey-button>\n      <div class=\"row mt-3\">\n        <div *ngFor=\"let field of fields;\" MECXDynamic [field]=\"field\" [form]=\"item\" [self]=\"self\"\n          [formErrors]=\"__monkeyecxFormErrors[indForm]\"\n          [plusValidations]=\"_plusValidations[indForm]\" [style.display]=\"'none'\">\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n<monkey-button type=\"secondary\" color=\"theme\" icon=\"more-20\" iconPosition=\"right\"\n  [label]=\"'BUTTONS.ADD' | translate\" (click)=\"onHandleAdd()\" *ngIf=\"!disabled\">\n</monkey-button>", styles: ["mecx-dynamic-form-array monkey-button{width:100%}mecx-dynamic-form-array monkey-button button{width:100%;height:40px}\n"], components: [{ type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: MECXDynamicDirective, selector: "[MECXDynamic]", inputs: ["field", "form", "formErrors", "self", "plusValidations"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+MECXDynamicFormArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicFormArrayComponent, selector: "mecx-dynamic-form-array", usesInheritance: true, ngImport: i0, template: "<form name=\"form\" [formGroup]=\"_form\" *ngIf=\"_form\">\n  <div formArrayName=\"fields\">\n    <div *ngFor=\"let item of formValues.controls; let indForm=index\" [formGroupName]=\"indForm\">\n      <monkey-button type=\"secondary\" color=\"error\" icon=\"close-20\" iconPosition=\"right\"\n        [label]=\"'BUTTONS.REMOVE' | translate\" (click)=\"onHandleRemove(indForm)\"\n        *ngIf=\"formValues.controls.length > 1 && !disabled\">\n      </monkey-button>\n      <div class=\"row mt-3\">\n        <div *ngFor=\"let field of fields;\" MECXDynamic [field]=\"field\" [form]=\"item\" [self]=\"self\"\n          [formErrors]=\"__monkeyecxFormErrors[indForm]\"\n          [plusValidations]=\"_plusValidations[indForm]\" [style.display]=\"'none'\">\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n<monkey-button type=\"secondary\" color=\"theme\" icon=\"more-20\" iconPosition=\"right\"\n  [label]=\"'BUTTONS.ADD' | translate\" (click)=\"onHandleAdd()\" *ngIf=\"!disabled\">\n</monkey-button>", styles: ["mecx-dynamic-form-array monkey-button{width:100%}mecx-dynamic-form-array monkey-button button{width:100%;height:40px}\n"], components: [{ type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: MECXDynamicDirective, selector: "[MECXDynamic]", inputs: ["field", "form", "formErrors", "self", "plusValidations"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicFormArrayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-dynamic-form-array', encapsulation: ViewEncapsulation.None, template: "<form name=\"form\" [formGroup]=\"_form\" *ngIf=\"_form\">\n  <div formArrayName=\"fields\">\n    <div *ngFor=\"let item of formValues.controls; let indForm=index\" [formGroupName]=\"indForm\">\n      <monkey-button type=\"secondary\" color=\"error\" icon=\"close-20\" iconPosition=\"right\"\n        [label]=\"'BUTTONS.REMOVE' | translate\" (click)=\"onHandleRemove(indForm)\"\n        *ngIf=\"formValues.controls.length > 1 && !disabled\">\n      </monkey-button>\n      <div class=\"row mt-3\">\n        <div *ngFor=\"let field of fields;\" MECXDynamic [field]=\"field\" [form]=\"item\" [self]=\"self\"\n          [formErrors]=\"__monkeyecxFormErrors[indForm]\"\n          [plusValidations]=\"_plusValidations[indForm]\" [style.display]=\"'none'\">\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n<monkey-button type=\"secondary\" color=\"theme\" icon=\"more-20\" iconPosition=\"right\"\n  [label]=\"'BUTTONS.ADD' | translate\" (click)=\"onHandleAdd()\" *ngIf=\"!disabled\">\n</monkey-button>", styles: ["mecx-dynamic-form-array monkey-button{width:100%}mecx-dynamic-form-array monkey-button button{width:100%;height:40px}\n"] }]
@@ -1554,7 +1560,7 @@ class MECXFilterSelectedItemChildrenComponent {
     }
 }
 MECXFilterSelectedItemChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemChildrenComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterSelectedItemChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemChildrenComponent, selector: "mecx-filter-selected-item-children", inputs: { option: "option" }, outputs: { onShow: "onShow", onRemove: "onRemove" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"box\">\n  <div class=\"data\">\n    {{ option.label | translate }}\n  </div>\n  <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+option?.field\" (click)=\"onShow.next()\">\n    <ng-container *ngIf=\"option?.type as type\">\n      <ng-container [ngSwitch]=\"type+'-'+_child?.type\">\n        <mecx-filter-selected-item-date-with-action *ngSwitchCase=\"'date-with-action'\"\n          [option]=\"_child\">\n        </mecx-filter-selected-item-date-with-action>\n        <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-date-range'\" [option]=\"_child\">\n        </mecx-filter-selected-item-date-range>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"action\" (click)=\"onShow.next()\">\n    <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n  </div>\n</div>", styles: [":host{display:flex}:host .box{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #d6d6d6;box-sizing:border-box;border-radius:120px;height:40px}:host .box .data{display:flex;align-items:center;padding-left:12px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e}:host .box .value{cursor:pointer;display:flex;align-items:center;padding:12px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e;background-color:#6d6d6d0a}:host .box .value:hover{background-color:#6d6d6d0c;font-weight:400;text-decoration:underline}:host .box .action{cursor:pointer;border-left:1px solid #d6d6d6;padding:12px;color:#908e9d;font-weight:500;font-size:18px;height:40px;align-items:center;display:flex}:host .box .action:hover{background-color:#6d6d6d0c;border-top-right-radius:120px;border-bottom-right-radius:120px}\n"], components: [{ type: MECXFilterSelectedItemDateWithActionComponent, selector: "mecx-filter-selected-item-date-with-action", inputs: ["option"] }, { type: MECXFilterSelectedItemDateRangeComponent, selector: "mecx-filter-selected-item-date-range", inputs: ["option"] }, { type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterSelectedItemChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemChildrenComponent, selector: "mecx-filter-selected-item-children", inputs: { option: "option" }, outputs: { onShow: "onShow", onRemove: "onRemove" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"box\">\n  <div class=\"data\">\n    {{ option.label | translate }}\n  </div>\n  <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+option?.field\" (click)=\"onShow.next()\">\n    <ng-container *ngIf=\"option?.type as type\">\n      <ng-container [ngSwitch]=\"type+'-'+_child?.type\">\n        <mecx-filter-selected-item-date-with-action *ngSwitchCase=\"'date-with-action'\"\n          [option]=\"_child\">\n        </mecx-filter-selected-item-date-with-action>\n        <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-date-range'\" [option]=\"_child\">\n        </mecx-filter-selected-item-date-range>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"action\" (click)=\"onShow.next()\">\n    <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n  </div>\n</div>", styles: [":host{display:flex}:host .box{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #d6d6d6;box-sizing:border-box;border-radius:120px;height:40px}:host .box .data{display:flex;align-items:center;padding-left:12px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e}:host .box .value{cursor:pointer;display:flex;align-items:center;padding:12px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e;background-color:#6d6d6d0a}:host .box .value:hover{background-color:#6d6d6d0c;font-weight:400;text-decoration:underline}:host .box .action{cursor:pointer;border-left:1px solid #d6d6d6;padding:12px;color:#908e9d;font-weight:500;font-size:18px;height:40px;align-items:center;display:flex}:host .box .action:hover{background-color:#6d6d6d0c;border-top-right-radius:120px;border-bottom-right-radius:120px}\n"], components: [{ type: MECXFilterSelectedItemDateWithActionComponent, selector: "mecx-filter-selected-item-date-with-action", inputs: ["option"] }, { type: MECXFilterSelectedItemDateRangeComponent, selector: "mecx-filter-selected-item-date-range", inputs: ["option"] }, { type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemChildrenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-filter-selected-item-children', template: "<div class=\"box\">\n  <div class=\"data\">\n    {{ option.label | translate }}\n  </div>\n  <div class=\"value\" [id]=\"'mecx-filter-selected-item-'+option?.field\" (click)=\"onShow.next()\">\n    <ng-container *ngIf=\"option?.type as type\">\n      <ng-container [ngSwitch]=\"type+'-'+_child?.type\">\n        <mecx-filter-selected-item-date-with-action *ngSwitchCase=\"'date-with-action'\"\n          [option]=\"_child\">\n        </mecx-filter-selected-item-date-with-action>\n        <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-date-range'\" [option]=\"_child\">\n        </mecx-filter-selected-item-date-range>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"action\" (click)=\"onShow.next()\">\n    <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n  </div>\n</div>", styles: [":host{display:flex}:host .box{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #d6d6d6;box-sizing:border-box;border-radius:120px;height:40px}:host .box .data{display:flex;align-items:center;padding-left:12px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e}:host .box .value{cursor:pointer;display:flex;align-items:center;padding:12px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e;background-color:#6d6d6d0a}:host .box .value:hover{background-color:#6d6d6d0c;font-weight:400;text-decoration:underline}:host .box .action{cursor:pointer;border-left:1px solid #d6d6d6;padding:12px;color:#908e9d;font-weight:500;font-size:18px;height:40px;align-items:center;display:flex}:host .box .action:hover{background-color:#6d6d6d0c;border-top-right-radius:120px;border-bottom-right-radius:120px}\n"] }]
@@ -1592,6 +1598,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }] } });
 
+class MECXFilterSelectedItemValueRangeComponent {
+    constructor() {
+        this.option = null;
+        this._min = '';
+        this._max = '';
+        this._hasFilter = true;
+    }
+    onHandleSelectedValue({ field, value, getValue }) {
+        try {
+            value = value || getValue()?.[field];
+            if (value && JSON.stringify(value) !== '{}') {
+                const objValue = JSON.parse(value);
+                this._min = objValue?.min;
+                this._max = objValue?.max;
+                if (this._min === null && this._max === null) {
+                    this._hasFilter = false;
+                }
+            }
+        }
+        catch (e) {
+            const objValue = JSON.parse(value);
+            this._min = objValue?.min;
+            this._max = objValue?.max;
+            this._hasFilter = true;
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.option) {
+            const { currentValue } = changes.option;
+            if (currentValue && JSON.stringify(currentValue) !== '{}') {
+                this.onHandleSelectedValue(currentValue);
+            }
+        }
+    }
+}
+MECXFilterSelectedItemValueRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemValueRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MECXFilterSelectedItemValueRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemValueRangeComponent, selector: "mecx-filter-selected-item-value-range", inputs: { option: "option" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_hasFilter\">\n  {{ _min }} -\n  {{ _max }}\n</ng-container>\n\n<ng-container *ngIf=\"!_hasFilter\"> {{ 'FIELD.WITHOUT-FILTER' | translate }} </ng-container>\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemValueRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mecx-filter-selected-item-value-range', template: "<ng-container *ngIf=\"_hasFilter\">\n  {{ _min }} -\n  {{ _max }}\n</ng-container>\n\n<ng-container *ngIf=\"!_hasFilter\"> {{ 'FIELD.WITHOUT-FILTER' | translate }} </ng-container>\n", styles: [""] }]
+        }], propDecorators: { option: [{
+                type: Input
+            }] } });
+
 class MECXFilterSelectedItemInputComponent {
     constructor() {
         this.option = null;
@@ -1713,7 +1763,7 @@ class MECXFilterOptionsChildrenComponent {
     }
 }
 MECXFilterOptionsChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterOptionsChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsChildrenComponent, selector: "mecx-filter-options-children", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit", onShow: "onShow" }, ngImport: i0, template: "<ng-container *ngFor=\"let child of option?.children\">\n  <div class=\"item\" (click)=\"onHandleChildrenAction(child)\"\n    [class.selected]=\"onHandleValidateSelected(child)\">\n    {{ child.label | translate }}\n  </div>\n</ng-container>", styles: [":host{display:flex;flex-direction:column;min-width:180px}:host .item{cursor:pointer;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.selected{cursor:not-allowed!important;background-color:var(--mecx-color-theme-400)!important;color:var(--mecx-color-theme-contrast-main)!important;font-weight:400}:host .item:hover{background-color:var(--mecx-color-theme-100)!important;color:#72717e!important;font-weight:400}\n"], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterOptionsChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsChildrenComponent, selector: "mecx-filter-options-children", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit", onShow: "onShow" }, ngImport: i0, template: "<ng-container *ngFor=\"let child of option?.children\">\n  <div class=\"item\" (click)=\"onHandleChildrenAction(child)\"\n    [class.selected]=\"onHandleValidateSelected(child)\">\n    {{ child.label | translate }}\n  </div>\n</ng-container>", styles: [":host{display:flex;flex-direction:column;min-width:180px}:host .item{cursor:pointer;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.selected{cursor:not-allowed!important;background-color:var(--mecx-color-theme-400)!important;color:var(--mecx-color-theme-contrast-main)!important;font-weight:400}:host .item:hover{background-color:var(--mecx-color-theme-100)!important;color:#72717e!important;font-weight:400}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsChildrenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-filter-options-children', template: "<ng-container *ngFor=\"let child of option?.children\">\n  <div class=\"item\" (click)=\"onHandleChildrenAction(child)\"\n    [class.selected]=\"onHandleValidateSelected(child)\">\n    {{ child.label | translate }}\n  </div>\n</ng-container>", styles: [":host{display:flex;flex-direction:column;min-width:180px}:host .item{cursor:pointer;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.selected{cursor:not-allowed!important;background-color:var(--mecx-color-theme-400)!important;color:var(--mecx-color-theme-contrast-main)!important;font-weight:400}:host .item:hover{background-color:var(--mecx-color-theme-100)!important;color:#72717e!important;font-weight:400}\n"] }]
@@ -1918,7 +1968,7 @@ class MECXFilterOptionsStatusComponent {
     }
 }
 MECXFilterOptionsStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterOptionsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let op of option?.values\">\n  <div class=\"content-status d-flex flex-column\">\n    <div class=\"d-flex align-items-center gap\">\n      <monkey-checkbox\n        type=\"multiple\"\n        [description]=\"op?.description | translate\"\n        [value]=\"onHandleChecked(op?.value)\"\n        (click)=\"onChangeFilter($event, op?.value)\"\n        [attr.data-testid]=\"'mecx-filter-status-btn-' + op?.value?.toLowerCase()\"\n      >\n      </monkey-checkbox>\n      <span class=\"helper\" *ngIf=\"op?.helperMessage\">{{ op?.helperMessage }}</span>\n    </div>\n    <span class=\"info\" *ngIf=\"op?.infoMessage\">{{ op?.infoMessage }}</span>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host .content-status .gap{gap:6px}:host .content-status .helper{margin-bottom:4px;margin-left:12;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;text-align:right}:host .content-status .info{font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;margin:-8px 24px 8px}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"], components: [{ type: i1$2.MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["label", "type", "helperMessage", "infoMessage", "errorMessage", "description", "value"], outputs: ["onChange"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterOptionsStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let op of option?.values\">\n  <div class=\"content-status d-flex flex-column\">\n    <div class=\"d-flex align-items-center gap\">\n      <monkey-checkbox\n        type=\"multiple\"\n        [description]=\"op?.description | translate\"\n        [value]=\"onHandleChecked(op?.value)\"\n        (click)=\"onChangeFilter($event, op?.value)\"\n        [attr.data-testid]=\"'mecx-filter-status-btn-' + op?.value?.toLowerCase()\"\n      >\n      </monkey-checkbox>\n      <span class=\"helper\" *ngIf=\"op?.helperMessage\">{{ op?.helperMessage }}</span>\n    </div>\n    <span class=\"info\" *ngIf=\"op?.infoMessage\">{{ op?.infoMessage }}</span>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host .content-status .gap{gap:6px}:host .content-status .helper{margin-bottom:4px;margin-left:12;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;text-align:right}:host .content-status .info{font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;margin:-8px 24px 8px}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"], components: [{ type: i1$2.MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["label", "type", "helperMessage", "infoMessage", "errorMessage", "description", "value"], outputs: ["onChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-filter-options-status', template: "<ng-container *ngFor=\"let op of option?.values\">\n  <div class=\"content-status d-flex flex-column\">\n    <div class=\"d-flex align-items-center gap\">\n      <monkey-checkbox\n        type=\"multiple\"\n        [description]=\"op?.description | translate\"\n        [value]=\"onHandleChecked(op?.value)\"\n        (click)=\"onChangeFilter($event, op?.value)\"\n        [attr.data-testid]=\"'mecx-filter-status-btn-' + op?.value?.toLowerCase()\"\n      >\n      </monkey-checkbox>\n      <span class=\"helper\" *ngIf=\"op?.helperMessage\">{{ op?.helperMessage }}</span>\n    </div>\n    <span class=\"info\" *ngIf=\"op?.infoMessage\">{{ op?.infoMessage }}</span>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host .content-status .gap{gap:6px}:host .content-status .helper{margin-bottom:4px;margin-left:12;font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;text-align:right}:host .content-status .info{font-style:normal;font-weight:400;font-size:16px;color:#9c9ca6;margin:-8px 24px 8px}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox{padding:0!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container{height:unset!important}:host ::ng-deep mecx-form-field mecx-form-field-body.checkbox .mecx-check-container .mecx-check-mark{top:50%;transform:translateY(-50%)}:host ::ng-deep monkey-checkbox{margin:6px 0!important}\n"] }]
@@ -1949,7 +1999,7 @@ class MECXFilterOptionsStatusRadioComponent {
     }
 }
 MECXFilterOptionsStatusRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsStatusRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterOptionsStatusRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusRadioComponent, selector: "mecx-filter-options-status-radio", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<monkey-radiobutton [value]=\"option.value\" (onChange)=\"onChangeFilter($event)\">\n  <monkey-option\n    *ngFor=\"let op of option?.values\"\n    [label]=\"op?.description | translate\"\n    [value]=\"op?.value\"\n  >\n  </monkey-option>\n</monkey-radiobutton>\n", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host ::ng-deep .mecx-radio-container{margin-top:16px}\n"], components: [{ type: i1$2.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterOptionsStatusRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsStatusRadioComponent, selector: "mecx-filter-options-status-radio", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<monkey-radiobutton [value]=\"option.value\" (onChange)=\"onChangeFilter($event)\">\n  <monkey-option\n    *ngFor=\"let op of option?.values\"\n    [label]=\"op?.description | translate\"\n    [value]=\"op?.value\"\n  >\n  </monkey-option>\n</monkey-radiobutton>\n", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host ::ng-deep .mecx-radio-container{margin-top:16px}\n"], components: [{ type: i1$2.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsStatusRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-filter-options-status-radio', template: "<monkey-radiobutton [value]=\"option.value\" (onChange)=\"onChangeFilter($event)\">\n  <monkey-option\n    *ngFor=\"let op of option?.values\"\n    [label]=\"op?.description | translate\"\n    [value]=\"op?.value\"\n  >\n  </monkey-option>\n</monkey-radiobutton>\n", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;max-height:500px;padding:12px 12px 8px;color:#72717e;overflow:auto}:host ::ng-deep .mecx-radio-container{margin-top:16px}\n"] }]
@@ -1959,6 +2009,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Output
             }] } });
 
+class MECXFilterOptionsValueRangeComponent extends BaseComponent {
+    constructor() {
+        super();
+        this.option = null;
+        this.onSubmit = new EventEmitter();
+        this._max = '';
+        this._min = '';
+        this._form = new FormGroup({
+            max: new FormControl(''),
+            min: new FormControl('')
+        });
+        this._selected = 'with';
+        this._hasValue = true;
+        this.eventHandle = new EventEmitter();
+    }
+    bindValidations(validations) {
+        if (validations.length > 0) {
+            const validList = [];
+            validations.forEach((valid) => {
+                const validated = valid.param
+                    ? validators[valid.name](valid.param)
+                    : validators[valid.name];
+                validList.push(validated);
+            });
+            return Validators$1.compose(validList);
+        }
+        return null;
+    }
+    ngAfterViewInit() {
+        const { option } = this;
+        this._form.get('max').setValidators([this.bindValidations(option.validators || [])]);
+        this._form.get('max').updateValueAndValidity();
+        this._form.get('min').setValidators([this.bindValidations(option.validators || [])]);
+        this._form.get('min').updateValueAndValidity();
+    }
+    ngOnChanges(changes) {
+        const rawValue = changes.option?.currentValue?.value;
+        if (!rawValue) {
+            this._selected = 'with';
+            return;
+        }
+        const obj = JSON.parse(rawValue);
+        const hasContent = obj?.min || obj?.max;
+        this._selected = hasContent ? 'with' : 'without';
+        if (hasContent) {
+            this._form.patchValue({
+                max: obj?.max ?? '',
+                min: obj?.min ?? ''
+            });
+        }
+        else {
+            this._hasValue = false;
+            this._form.reset();
+        }
+    }
+    onChooseOption(value) {
+        if (value === 'with') {
+            this._hasValue = true;
+        }
+        if (value === 'without') {
+            this._hasValue = false;
+            this._form.reset();
+        }
+    }
+    onClearAllInputs() {
+        this._form.reset();
+    }
+    onApplyFilter() {
+        const { _form } = this;
+        this.__monkeyecxFormErrors = null;
+        if (!this.validateForm(_form)) {
+            return;
+        }
+        const { value } = _form;
+        let { max, min } = value;
+        if (!!min && !!max && min > max) {
+            this.__monkeyecxFormErrors = {
+                min: {
+                    firstMessage: 'ERRORS.MIN-GREATHER-THAN-MAX',
+                    lastMessage: ''
+                }
+            };
+            return;
+        }
+        const handleValidators = (param) => {
+            const found = this.option.validators.find(({ name }) => {
+                return name === param;
+            });
+            return found.param || 0;
+        };
+        if (this._selected === 'with') {
+            min = min || handleValidators('min');
+            max = max || handleValidators('max');
+        }
+        const values = { min, max };
+        this.onSubmit.next({ [this.option.field]: JSON.stringify(values) });
+        this.eventHandle.next({ [this.option.field]: JSON.stringify(values) });
+    }
+}
+MECXFilterOptionsValueRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsValueRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MECXFilterOptionsValueRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsValueRangeComponent, selector: "mecx-filter-options-value-range", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"content\">\n    <div class=\"checkbox-container\">\n      <monkey-radiobutton\n        (onChange)=\"onChooseOption($event)\"\n        [(ngModel)]=\"_selected\"\n        class=\"d-flex\"\n        *ngFor=\"let op of option?.roles\"\n      >\n        <monkey-option [label]=\"op?.label | translate\" [value]=\"op?.type\"> </monkey-option>\n      </monkey-radiobutton>\n    </div>\n    <form name=\"valueRangeForm\" [formGroup]=\"_form\" class=\"form\">\n      <div class=\"inputs-container\" [class.disabled]=\"!_hasValue\">\n        <ng-container>\n          <monkey-input\n            [infoMessage]=\"option?.values?.[0].infoMessage | translate\"\n            type=\"text\"\n            onlyNumber=\"true\"\n            [maxLength]=\"4\"\n            [(value)]=\"_min\"\n            formControlName=\"min\"\n            [placeholder]=\"option?.values?.[0].description | translate\"\n          >\n          </monkey-input>\n          <span class=\"title-muted font-size-xxs mt-2\"> {{ 'FIELD.UNTIL' | translate }} </span>\n          <monkey-input\n            [infoMessage]=\"option?.values?.[1].infoMessage | translate\"\n            type=\"text\"\n            onlyNumber=\"true\"\n            [maxLength]=\"4\"\n            [(value)]=\"_max\"\n            formControlName=\"max\"\n            [placeholder]=\"option?.values?.[1].description | translate\"\n          >\n          </monkey-input>\n        </ng-container>\n      </div>\n    </form>\n    <span\n      class=\"error mt-2\"\n      *ngIf=\"\n        __monkeyecxFormErrors?.min?.firstMessage\n          ? (__monkeyecxFormErrors?.min?.firstMessage | translate) +\n            ' ' +\n            __monkeyecxFormErrors?.min?.lastMessage\n          : __monkeyecxFormErrors?.max?.firstMessage\n          ? (__monkeyecxFormErrors?.max?.firstMessage | translate) +\n            ' ' +\n            __monkeyecxFormErrors?.max?.lastMessage\n          : '' as error\n      \"\n    >\n      {{ error }}\n    </span>\n    <div class=\"separator mt-2\"></div>\n    <div class=\"buttons-container\">\n      <monkey-button type=\"secondary\" color=\"theme\" (click)=\"onClearAllInputs()\" size=\"sm\">\n        {{ 'BUTTONS.CLEAR' | translate }}\n      </monkey-button>\n      <monkey-button type=\"primary\" color=\"theme\" (click)=\"onApplyFilter()\" size=\"sm\">\n        {{ 'BUTTONS.APPLY' | translate }}\n      </monkey-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;flex-direction:column;width:246px;max-height:232px;color:#72717e}:host .content{width:100%}:host .checkbox-container{display:flex;align-items:start;justify-content:start;flex-direction:column;padding:8px 8px 0}:host .checkbox-container ::ng-deep monkey-radiobutton{height:30px!important;margin:0}:host .form{width:100%;display:flex;align-items:center;justify-content:center}:host .form .inputs-container{width:100%;display:flex;align-items:start;justify-content:space-between;padding:0 16px 4px}:host .form .inputs-container.disabled{pointer-events:none;opacity:.5;cursor:not-allowed}:host .form .inputs-container ::ng-deep monkey-input mecx-form-field mecx-form-field-body{background-color:#fff;width:77px;height:32px;border:2px solid!important}:host .form .inputs-container ::ng-deep monkey-input mecx-form-field mecx-form-field-body:focus-within{border:2px solid #1f2024!important}:host .form .inputs-container ::ng-deep mecx-form-field-footer{height:12px}:host .form .inputs-container ::ng-deep mecx-form-field mecx-form-field-body input{background-color:#fff;width:77px;height:32px;border:2px solid #bdc1c7!important;margin:0;border-radius:4px}:host .form .inputs-container ::ng-deep mecx-form-field mecx-form-field-body input:focus-within{border:2px solid #1f2024!important}:host .form .inputs-container ::ng-deep input:-webkit-autofill:hover,:host .form .inputs-container ::ng-deep input:-webkit-autofill:active,:host .form .inputs-container ::ng-deep input:-webkit-autofill:focus{background-color:#fff!important;box-shadow:0 0 0 1000px #f5f5f5 inset!important;width:77px;height:32px}:host .separator{width:100%;height:0px;border:1px solid #d6d6d6}:host .error{display:flex;padding:0 16px;font-size:12px;line-height:16px;color:var(--mecx-color-error-main);text-align:left}:host .buttons-container{width:100%;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 16px 12px}:host ::ng-deep monkey-button button{width:103px}\n"], components: [{ type: i1$2.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }, { type: i1$2.MonkeyInputComponent, selector: "monkey-input", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "type", "infoMessage", "errorMessage", "mask", "prefix", "maxLength", "onlyNumber", "onlyAlphaNumeric", "upperCase", "lowerCase", "capitalize", "currency", "useSymbol", "percent", "maxDateToday", "minYears", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsValueRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mecx-filter-options-value-range', template: "<ng-container>\n  <div class=\"content\">\n    <div class=\"checkbox-container\">\n      <monkey-radiobutton\n        (onChange)=\"onChooseOption($event)\"\n        [(ngModel)]=\"_selected\"\n        class=\"d-flex\"\n        *ngFor=\"let op of option?.roles\"\n      >\n        <monkey-option [label]=\"op?.label | translate\" [value]=\"op?.type\"> </monkey-option>\n      </monkey-radiobutton>\n    </div>\n    <form name=\"valueRangeForm\" [formGroup]=\"_form\" class=\"form\">\n      <div class=\"inputs-container\" [class.disabled]=\"!_hasValue\">\n        <ng-container>\n          <monkey-input\n            [infoMessage]=\"option?.values?.[0].infoMessage | translate\"\n            type=\"text\"\n            onlyNumber=\"true\"\n            [maxLength]=\"4\"\n            [(value)]=\"_min\"\n            formControlName=\"min\"\n            [placeholder]=\"option?.values?.[0].description | translate\"\n          >\n          </monkey-input>\n          <span class=\"title-muted font-size-xxs mt-2\"> {{ 'FIELD.UNTIL' | translate }} </span>\n          <monkey-input\n            [infoMessage]=\"option?.values?.[1].infoMessage | translate\"\n            type=\"text\"\n            onlyNumber=\"true\"\n            [maxLength]=\"4\"\n            [(value)]=\"_max\"\n            formControlName=\"max\"\n            [placeholder]=\"option?.values?.[1].description | translate\"\n          >\n          </monkey-input>\n        </ng-container>\n      </div>\n    </form>\n    <span\n      class=\"error mt-2\"\n      *ngIf=\"\n        __monkeyecxFormErrors?.min?.firstMessage\n          ? (__monkeyecxFormErrors?.min?.firstMessage | translate) +\n            ' ' +\n            __monkeyecxFormErrors?.min?.lastMessage\n          : __monkeyecxFormErrors?.max?.firstMessage\n          ? (__monkeyecxFormErrors?.max?.firstMessage | translate) +\n            ' ' +\n            __monkeyecxFormErrors?.max?.lastMessage\n          : '' as error\n      \"\n    >\n      {{ error }}\n    </span>\n    <div class=\"separator mt-2\"></div>\n    <div class=\"buttons-container\">\n      <monkey-button type=\"secondary\" color=\"theme\" (click)=\"onClearAllInputs()\" size=\"sm\">\n        {{ 'BUTTONS.CLEAR' | translate }}\n      </monkey-button>\n      <monkey-button type=\"primary\" color=\"theme\" (click)=\"onApplyFilter()\" size=\"sm\">\n        {{ 'BUTTONS.APPLY' | translate }}\n      </monkey-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;flex-direction:column;width:246px;max-height:232px;color:#72717e}:host .content{width:100%}:host .checkbox-container{display:flex;align-items:start;justify-content:start;flex-direction:column;padding:8px 8px 0}:host .checkbox-container ::ng-deep monkey-radiobutton{height:30px!important;margin:0}:host .form{width:100%;display:flex;align-items:center;justify-content:center}:host .form .inputs-container{width:100%;display:flex;align-items:start;justify-content:space-between;padding:0 16px 4px}:host .form .inputs-container.disabled{pointer-events:none;opacity:.5;cursor:not-allowed}:host .form .inputs-container ::ng-deep monkey-input mecx-form-field mecx-form-field-body{background-color:#fff;width:77px;height:32px;border:2px solid!important}:host .form .inputs-container ::ng-deep monkey-input mecx-form-field mecx-form-field-body:focus-within{border:2px solid #1f2024!important}:host .form .inputs-container ::ng-deep mecx-form-field-footer{height:12px}:host .form .inputs-container ::ng-deep mecx-form-field mecx-form-field-body input{background-color:#fff;width:77px;height:32px;border:2px solid #bdc1c7!important;margin:0;border-radius:4px}:host .form .inputs-container ::ng-deep mecx-form-field mecx-form-field-body input:focus-within{border:2px solid #1f2024!important}:host .form .inputs-container ::ng-deep input:-webkit-autofill:hover,:host .form .inputs-container ::ng-deep input:-webkit-autofill:active,:host .form .inputs-container ::ng-deep input:-webkit-autofill:focus{background-color:#fff!important;box-shadow:0 0 0 1000px #f5f5f5 inset!important;width:77px;height:32px}:host .separator{width:100%;height:0px;border:1px solid #d6d6d6}:host .error{display:flex;padding:0 16px;font-size:12px;line-height:16px;color:var(--mecx-color-error-main);text-align:left}:host .buttons-container{width:100%;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 16px 12px}:host ::ng-deep monkey-button button{width:103px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { option: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }] } });
+
 class MECXFilterOptionsComponent extends BaseComponent {
     constructor() {
         super();
@@ -2029,10 +2189,10 @@ class MECXFilterOptionsComponent extends BaseComponent {
     }
 }
 MECXFilterOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: { option: "option", closeDirectly: "closeDirectly" }, outputs: { onClose: "onClose", onRemove: "onRemove", onSubmit: "onSubmit", onShowFromChildren: "onShowFromChildren" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between header\">\n  <span class=\"title\">\n    {{ option?.label | translate }}\n  </span>\n  <div\n    class=\"close\"\n    #actionElement\n    (click)=\"onHandleShowMenu()\"\n    data-testid=\"mecx-filter-options-btn-handle-show-menu\"\n  >\n    <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\n  </div>\n</div>\n<ng-container *ngIf=\"option?.type as type\">\n  <ng-container *ngIf=\"option?.children; else withoutChildren\">\n    <mecx-filter-options-children\n      [option]=\"option\"\n      (onSubmit)=\"onHandleSubmitChildren($event)\"\n      (onShow)=\"onShowFromChildren.next($event)\"\n    >\n    </mecx-filter-options-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <ng-container [ngSwitch]=\"type\">\n      <mecx-filter-options-currency\n        *ngSwitchCase=\"'currency'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-currency>\n      <mecx-filter-options-date-range\n        *ngSwitchCase=\"'date-range'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-date-range>\n      <mecx-filter-options-input\n        *ngSwitchCase=\"'input'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-input>\n      <mecx-filter-options-status\n        *ngSwitchCase=\"'status'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-status>\n      <mecx-filter-options-status-radio\n        *ngSwitchCase=\"'status-radio'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-status-radio>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\n  <div class=\"loading\"></div>\n  <div class=\"loading\"></div>\n  <div class=\"loading\"></div>\n</div>\n\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\n  <monkey-button\n    type=\"tertiary\"\n    color=\"theme\"\n    [label]=\"'BUTTONS.LOAD-MORE' | translate\"\n    (click)=\"onHandleLoadMoreValues()\"\n  >\n  </monkey-button>\n</div>\n\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\"\n>\n  <div class=\"close-menu\">\n    <monkey-button\n      type=\"tertiary\"\n      color=\"error\"\n      (click)=\"onRemove.next()\"\n      size=\"sm\"\n      data-testid=\"mecx-filter-options-btn-remove\"\n    >\n      {{ 'BUTTONS.REMOVE' | translate }}\n    </monkey-button>\n    <monkey-button\n      type=\"tertiary\"\n      color=\"theme\"\n      (click)=\"onClose.next()\"\n      size=\"sm\"\n      data-testid=\"mecx-filter-options-btn-close\"\n    >\n      {{ 'BUTTONS.CLOSE' | translate }}\n    </monkey-button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer{padding:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"], components: [{ type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MECXFilterOptionsChildrenComponent, selector: "mecx-filter-options-children", inputs: ["option"], outputs: ["onSubmit", "onShow"] }, { type: MECXFilterOptionsCurrencyComponent, selector: "mecx-filter-options-currency", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsDateRangeComponent, selector: "mecx-filter-options-date-range", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsInputComponent, selector: "mecx-filter-options-input", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsStatusRadioComponent, selector: "mecx-filter-options-status-radio", inputs: ["option"], outputs: ["onSubmit"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: { option: "option", closeDirectly: "closeDirectly" }, outputs: { onClose: "onClose", onRemove: "onRemove", onSubmit: "onSubmit", onShowFromChildren: "onShowFromChildren" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between header\">\n  <span class=\"title\">\n    {{ option?.label | translate }}\n  </span>\n  <div\n    class=\"close\"\n    #actionElement\n    (click)=\"onHandleShowMenu()\"\n    data-testid=\"mecx-filter-options-btn-handle-show-menu\"\n  >\n    <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\n  </div>\n</div>\n<ng-container *ngIf=\"option?.type as type\">\n  <ng-container *ngIf=\"option?.children; else withoutChildren\">\n    <mecx-filter-options-children\n      [option]=\"option\"\n      (onSubmit)=\"onHandleSubmitChildren($event)\"\n      (onShow)=\"onShowFromChildren.next($event)\"\n    >\n    </mecx-filter-options-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <ng-container [ngSwitch]=\"type\">\n      <mecx-filter-options-currency\n        *ngSwitchCase=\"'currency'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-currency>\n      <mecx-filter-options-date-range\n        *ngSwitchCase=\"'date-range'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-date-range>\n      <mecx-filter-options-input\n        *ngSwitchCase=\"'input'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-input>\n      <mecx-filter-options-status\n        *ngSwitchCase=\"'status'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-status>\n      <mecx-filter-options-status-radio\n        *ngSwitchCase=\"'status-radio'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-status-radio>\n\n      <mecx-filter-options-value-range\n        *ngSwitchCase=\"'value-range'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-value-range>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\n  <div class=\"loading\"></div>\n  <div class=\"loading\"></div>\n  <div class=\"loading\"></div>\n</div>\n\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\n  <monkey-button\n    type=\"tertiary\"\n    color=\"theme\"\n    [label]=\"'BUTTONS.LOAD-MORE' | translate\"\n    (click)=\"onHandleLoadMoreValues()\"\n  >\n  </monkey-button>\n</div>\n\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\"\n>\n  <div class=\"close-menu\">\n    <monkey-button\n      type=\"tertiary\"\n      color=\"error\"\n      (click)=\"onRemove.next()\"\n      size=\"sm\"\n      data-testid=\"mecx-filter-options-btn-remove\"\n    >\n      {{ 'BUTTONS.REMOVE' | translate }}\n    </monkey-button>\n    <monkey-button\n      type=\"tertiary\"\n      color=\"theme\"\n      (click)=\"onClose.next()\"\n      size=\"sm\"\n      data-testid=\"mecx-filter-options-btn-close\"\n    >\n      {{ 'BUTTONS.CLOSE' | translate }}\n    </monkey-button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer{padding:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"], components: [{ type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MECXFilterOptionsChildrenComponent, selector: "mecx-filter-options-children", inputs: ["option"], outputs: ["onSubmit", "onShow"] }, { type: MECXFilterOptionsCurrencyComponent, selector: "mecx-filter-options-currency", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsDateRangeComponent, selector: "mecx-filter-options-date-range", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsInputComponent, selector: "mecx-filter-options-input", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsStatusRadioComponent, selector: "mecx-filter-options-status-radio", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsValueRangeComponent, selector: "mecx-filter-options-value-range", inputs: ["option"], outputs: ["onSubmit"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mecx-filter-options', template: "<div class=\"d-flex justify-content-between header\">\n  <span class=\"title\">\n    {{ option?.label | translate }}\n  </span>\n  <div\n    class=\"close\"\n    #actionElement\n    (click)=\"onHandleShowMenu()\"\n    data-testid=\"mecx-filter-options-btn-handle-show-menu\"\n  >\n    <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\n  </div>\n</div>\n<ng-container *ngIf=\"option?.type as type\">\n  <ng-container *ngIf=\"option?.children; else withoutChildren\">\n    <mecx-filter-options-children\n      [option]=\"option\"\n      (onSubmit)=\"onHandleSubmitChildren($event)\"\n      (onShow)=\"onShowFromChildren.next($event)\"\n    >\n    </mecx-filter-options-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <ng-container [ngSwitch]=\"type\">\n      <mecx-filter-options-currency\n        *ngSwitchCase=\"'currency'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-currency>\n      <mecx-filter-options-date-range\n        *ngSwitchCase=\"'date-range'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-date-range>\n      <mecx-filter-options-input\n        *ngSwitchCase=\"'input'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-input>\n      <mecx-filter-options-status\n        *ngSwitchCase=\"'status'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-status>\n      <mecx-filter-options-status-radio\n        *ngSwitchCase=\"'status-radio'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-status-radio>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\n  <div class=\"loading\"></div>\n  <div class=\"loading\"></div>\n  <div class=\"loading\"></div>\n</div>\n\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\n  <monkey-button\n    type=\"tertiary\"\n    color=\"theme\"\n    [label]=\"'BUTTONS.LOAD-MORE' | translate\"\n    (click)=\"onHandleLoadMoreValues()\"\n  >\n  </monkey-button>\n</div>\n\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\"\n>\n  <div class=\"close-menu\">\n    <monkey-button\n      type=\"tertiary\"\n      color=\"error\"\n      (click)=\"onRemove.next()\"\n      size=\"sm\"\n      data-testid=\"mecx-filter-options-btn-remove\"\n    >\n      {{ 'BUTTONS.REMOVE' | translate }}\n    </monkey-button>\n    <monkey-button\n      type=\"tertiary\"\n      color=\"theme\"\n      (click)=\"onClose.next()\"\n      size=\"sm\"\n      data-testid=\"mecx-filter-options-btn-close\"\n    >\n      {{ 'BUTTONS.CLOSE' | translate }}\n    </monkey-button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer{padding:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"] }]
+            args: [{ selector: 'mecx-filter-options', template: "<div class=\"d-flex justify-content-between header\">\n  <span class=\"title\">\n    {{ option?.label | translate }}\n  </span>\n  <div\n    class=\"close\"\n    #actionElement\n    (click)=\"onHandleShowMenu()\"\n    data-testid=\"mecx-filter-options-btn-handle-show-menu\"\n  >\n    <monkey-icon icon=\"close-12\" color=\"#474747\"></monkey-icon>\n  </div>\n</div>\n<ng-container *ngIf=\"option?.type as type\">\n  <ng-container *ngIf=\"option?.children; else withoutChildren\">\n    <mecx-filter-options-children\n      [option]=\"option\"\n      (onSubmit)=\"onHandleSubmitChildren($event)\"\n      (onShow)=\"onShowFromChildren.next($event)\"\n    >\n    </mecx-filter-options-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <ng-container [ngSwitch]=\"type\">\n      <mecx-filter-options-currency\n        *ngSwitchCase=\"'currency'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-currency>\n      <mecx-filter-options-date-range\n        *ngSwitchCase=\"'date-range'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-date-range>\n      <mecx-filter-options-input\n        *ngSwitchCase=\"'input'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-input>\n      <mecx-filter-options-status\n        *ngSwitchCase=\"'status'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-status>\n      <mecx-filter-options-status-radio\n        *ngSwitchCase=\"'status-radio'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-status-radio>\n\n      <mecx-filter-options-value-range\n        *ngSwitchCase=\"'value-range'\"\n        [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n      >\n      </mecx-filter-options-value-range>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<div class=\"box-loading\" *ngIf=\"_isLoading\">\n  <div class=\"loading\"></div>\n  <div class=\"loading\"></div>\n  <div class=\"loading\"></div>\n</div>\n\n<div class=\"footer\" *ngIf=\"_hasMoreValues && !_isLoading\">\n  <monkey-button\n    type=\"tertiary\"\n    color=\"theme\"\n    [label]=\"'BUTTONS.LOAD-MORE' | translate\"\n    (click)=\"onHandleLoadMoreValues()\"\n  >\n  </monkey-button>\n</div>\n\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\"\n>\n  <div class=\"close-menu\">\n    <monkey-button\n      type=\"tertiary\"\n      color=\"error\"\n      (click)=\"onRemove.next()\"\n      size=\"sm\"\n      data-testid=\"mecx-filter-options-btn-remove\"\n    >\n      {{ 'BUTTONS.REMOVE' | translate }}\n    </monkey-button>\n    <monkey-button\n      type=\"tertiary\"\n      color=\"theme\"\n      (click)=\"onClose.next()\"\n      size=\"sm\"\n      data-testid=\"mecx-filter-options-btn-close\"\n    >\n      {{ 'BUTTONS.CLOSE' | translate }}\n    </monkey-button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px}:host .header{border-bottom:1px solid #d6d6d6;padding:8px}:host .header .title{color:#4b4a53;font-style:normal;font-size:14px;line-height:16px;font-weight:500;text-align:left}:host .header .close{cursor:pointer;border-radius:120px;padding:4px}:host .header .close:hover{background-color:#6d6d6d0c}:host .box-loaing{display:flex;flex-direction:column;gap:12px}:host .footer{padding:12px}:host .footer ::ng-deep monkey-button{width:100%}:host .footer ::ng-deep monkey-button button{width:100%}:host .loading:empty{margin-top:4px;height:24px;width:100%}:host .loading:empty{animation:loading 1.1s infinite linear;background:#ebebeb;background-image:linear-gradient(to right,#ebebeb 0%,#f2f3f5 20%,#ebebeb 40%,#ebebeb 100%);background-repeat:no-repeat}@keyframes loading{0%{background-position:-100px}to{background-position:500px}}.close-menu{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:8px!important;margin:0 8px;padding:8px}.close-menu ::ng-deep monkey-button{width:100%}.close-menu ::ng-deep monkey-button button{width:100%}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { option: [{
                 type: Input
             }], closeDirectly: [{
@@ -2097,10 +2257,10 @@ class MECXFilterSelectedItemComponent {
     }
 }
 MECXFilterSelectedItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterSelectedItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemComponent, selector: "mecx-filter-selected-item", inputs: { option: "option" }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, ngImport: i0, template: "<ng-container *ngIf=\"_option?.type as type\">\n  <ng-container *ngIf=\"_option?.children; else withoutChildren\">\n    <mecx-filter-selected-item-children\n      [option]=\"_option\"\n      (onShow)=\"onHandleShowMenu()\"\n      (onRemove)=\"onHandleRemove()\"\n    >\n    </mecx-filter-selected-item-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <div class=\"box\">\n      <div class=\"data\">\n        {{ _option.label | translate }}\n      </div>\n      <div\n        class=\"value\"\n        [id]=\"'mecx-filter-selected-item-' + _option?.field\"\n        (click)=\"onHandleShowMenu()\"\n        [attr.data-testid]=\"'mecx-filter-selected-item-btn-' + _option?.value?.toLowerCase()\"\n      >\n        <ng-container [ngSwitch]=\"type\">\n          <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\n          </mecx-filter-selected-item-currency>\n          <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n          </mecx-filter-selected-item-date-range>\n          <mecx-filter-selected-item-input *ngSwitchCase=\"'input'\" [option]=\"_option\">\n          </mecx-filter-selected-item-input>\n          <mecx-filter-selected-item-status\n            *ngSwitchCase=\"'status'\"\n            [option]=\"_option\"\n            [labelMoreValues]=\"'FIELD.AND-MORE' | translate\"\n          >\n          </mecx-filter-selected-item-status>\n          <mecx-filter-selected-item-status-radio *ngSwitchCase=\"'status-radio'\" [option]=\"_option\">\n          </mecx-filter-selected-item-status-radio>\n        </ng-container>\n      </div>\n      <div\n        class=\"action\"\n        (click)=\"onHandleShowMenu()\"\n        data-testid=\"mecx-filter-selected-item-btn-arrow-right\"\n      >\n        <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n>\n  <mecx-filter-options\n    [option]=\"_option\"\n    (onClose)=\"onHandleClose()\"\n    (onRemove)=\"onHandleRemove()\"\n    (onSubmit)=\"onHandleSubmit($event)\"\n    (onShowFromChildren)=\"onHandleShowFromChildren($event)\"\n  >\n  </mecx-filter-options>\n</ng-container>\n", styles: [":host{display:flex}:host .box{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #d6d6d6;box-sizing:border-box;border-radius:120px;height:40px}:host .box .data{display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e}:host .box .value{cursor:pointer;display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e;background-color:#6d6d6d0a}:host .box .value:hover{background-color:#6d6d6d0c;font-weight:400;text-decoration:underline}:host .box .action{cursor:pointer;border-left:1px solid #d6d6d6;padding:8px;color:#908e9d;font-weight:500;font-size:18px;height:40px;align-items:center;display:flex}:host .box .action:hover{background-color:#6d6d6d0c;border-top-right-radius:120px;border-bottom-right-radius:120px}mecx-filter-options{margin:4px 0}\n"], components: [{ type: MECXFilterSelectedItemChildrenComponent, selector: "mecx-filter-selected-item-children", inputs: ["option"], outputs: ["onShow", "onRemove"] }, { type: MECXFilterSelectedItemCurrencyComponent, selector: "mecx-filter-selected-item-currency", inputs: ["option"] }, { type: MECXFilterSelectedItemDateRangeComponent, selector: "mecx-filter-selected-item-date-range", inputs: ["option"] }, { type: MECXFilterSelectedItemInputComponent, selector: "mecx-filter-selected-item-input", inputs: ["option"] }, { type: MECXFilterSelectedItemStatusComponent, selector: "mecx-filter-selected-item-status", inputs: ["option", "labelMoreValues"] }, { type: MECXFilterSelectedItemStatusRadioComponent, selector: "mecx-filter-selected-item-status-radio", inputs: ["option"] }, { type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: ["option", "closeDirectly"], outputs: ["onClose", "onRemove", "onSubmit", "onShowFromChildren"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterSelectedItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemComponent, selector: "mecx-filter-selected-item", inputs: { option: "option" }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, ngImport: i0, template: "<ng-container *ngIf=\"_option?.type as type\">\n  <ng-container *ngIf=\"_option?.children; else withoutChildren\">\n    <mecx-filter-selected-item-children\n      [option]=\"_option\"\n      (onShow)=\"onHandleShowMenu()\"\n      (onRemove)=\"onHandleRemove()\"\n    >\n    </mecx-filter-selected-item-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <div class=\"box\">\n      <div class=\"data\">\n        {{ _option.label | translate }}\n      </div>\n      <div\n        class=\"value\"\n        [id]=\"'mecx-filter-selected-item-' + _option?.field\"\n        (click)=\"onHandleShowMenu()\"\n        [attr.data-testid]=\"'mecx-filter-selected-item-btn-' + _option?.value?.toLowerCase()\"\n      >\n        <ng-container [ngSwitch]=\"type\">\n          <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\n          </mecx-filter-selected-item-currency>\n          <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n          </mecx-filter-selected-item-date-range>\n          <mecx-filter-selected-item-value-range *ngSwitchCase=\"'value-range'\" [option]=\"_option\">\n          </mecx-filter-selected-item-value-range>\n          <mecx-filter-selected-item-input *ngSwitchCase=\"'input'\" [option]=\"_option\">\n          </mecx-filter-selected-item-input>\n          <mecx-filter-selected-item-status\n            *ngSwitchCase=\"'status'\"\n            [option]=\"_option\"\n            [labelMoreValues]=\"'FIELD.AND-MORE' | translate\"\n          >\n          </mecx-filter-selected-item-status>\n          <mecx-filter-selected-item-status-radio *ngSwitchCase=\"'status-radio'\" [option]=\"_option\">\n          </mecx-filter-selected-item-status-radio>\n        </ng-container>\n      </div>\n      <div\n        class=\"action\"\n        (click)=\"onHandleShowMenu()\"\n        data-testid=\"mecx-filter-selected-item-btn-arrow-right\"\n      >\n        <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n>\n  <mecx-filter-options\n    [option]=\"_option\"\n    (onClose)=\"onHandleClose()\"\n    (onRemove)=\"onHandleRemove()\"\n    (onSubmit)=\"onHandleSubmit($event)\"\n    (onShowFromChildren)=\"onHandleShowFromChildren($event)\"\n  >\n  </mecx-filter-options>\n</ng-container>\n", styles: [":host{display:flex}:host .box{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #d6d6d6;box-sizing:border-box;border-radius:120px;height:40px}:host .box .data{display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e}:host .box .value{cursor:pointer;display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e;background-color:#6d6d6d0a}:host .box .value:hover{background-color:#6d6d6d0c;font-weight:400;text-decoration:underline}:host .box .action{cursor:pointer;border-left:1px solid #d6d6d6;padding:8px;color:#908e9d;font-weight:500;font-size:18px;height:40px;align-items:center;display:flex}:host .box .action:hover{background-color:#6d6d6d0c;border-top-right-radius:120px;border-bottom-right-radius:120px}mecx-filter-options{margin:4px 0}\n"], components: [{ type: MECXFilterSelectedItemChildrenComponent, selector: "mecx-filter-selected-item-children", inputs: ["option"], outputs: ["onShow", "onRemove"] }, { type: MECXFilterSelectedItemCurrencyComponent, selector: "mecx-filter-selected-item-currency", inputs: ["option"] }, { type: MECXFilterSelectedItemDateRangeComponent, selector: "mecx-filter-selected-item-date-range", inputs: ["option"] }, { type: MECXFilterSelectedItemValueRangeComponent, selector: "mecx-filter-selected-item-value-range", inputs: ["option"] }, { type: MECXFilterSelectedItemInputComponent, selector: "mecx-filter-selected-item-input", inputs: ["option"] }, { type: MECXFilterSelectedItemStatusComponent, selector: "mecx-filter-selected-item-status", inputs: ["option", "labelMoreValues"] }, { type: MECXFilterSelectedItemStatusRadioComponent, selector: "mecx-filter-selected-item-status-radio", inputs: ["option"] }, { type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: ["option", "closeDirectly"], outputs: ["onClose", "onRemove", "onSubmit", "onShowFromChildren"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mecx-filter-selected-item', template: "<ng-container *ngIf=\"_option?.type as type\">\n  <ng-container *ngIf=\"_option?.children; else withoutChildren\">\n    <mecx-filter-selected-item-children\n      [option]=\"_option\"\n      (onShow)=\"onHandleShowMenu()\"\n      (onRemove)=\"onHandleRemove()\"\n    >\n    </mecx-filter-selected-item-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <div class=\"box\">\n      <div class=\"data\">\n        {{ _option.label | translate }}\n      </div>\n      <div\n        class=\"value\"\n        [id]=\"'mecx-filter-selected-item-' + _option?.field\"\n        (click)=\"onHandleShowMenu()\"\n        [attr.data-testid]=\"'mecx-filter-selected-item-btn-' + _option?.value?.toLowerCase()\"\n      >\n        <ng-container [ngSwitch]=\"type\">\n          <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\n          </mecx-filter-selected-item-currency>\n          <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n          </mecx-filter-selected-item-date-range>\n          <mecx-filter-selected-item-input *ngSwitchCase=\"'input'\" [option]=\"_option\">\n          </mecx-filter-selected-item-input>\n          <mecx-filter-selected-item-status\n            *ngSwitchCase=\"'status'\"\n            [option]=\"_option\"\n            [labelMoreValues]=\"'FIELD.AND-MORE' | translate\"\n          >\n          </mecx-filter-selected-item-status>\n          <mecx-filter-selected-item-status-radio *ngSwitchCase=\"'status-radio'\" [option]=\"_option\">\n          </mecx-filter-selected-item-status-radio>\n        </ng-container>\n      </div>\n      <div\n        class=\"action\"\n        (click)=\"onHandleShowMenu()\"\n        data-testid=\"mecx-filter-selected-item-btn-arrow-right\"\n      >\n        <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n>\n  <mecx-filter-options\n    [option]=\"_option\"\n    (onClose)=\"onHandleClose()\"\n    (onRemove)=\"onHandleRemove()\"\n    (onSubmit)=\"onHandleSubmit($event)\"\n    (onShowFromChildren)=\"onHandleShowFromChildren($event)\"\n  >\n  </mecx-filter-options>\n</ng-container>\n", styles: [":host{display:flex}:host .box{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #d6d6d6;box-sizing:border-box;border-radius:120px;height:40px}:host .box .data{display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e}:host .box .value{cursor:pointer;display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e;background-color:#6d6d6d0a}:host .box .value:hover{background-color:#6d6d6d0c;font-weight:400;text-decoration:underline}:host .box .action{cursor:pointer;border-left:1px solid #d6d6d6;padding:8px;color:#908e9d;font-weight:500;font-size:18px;height:40px;align-items:center;display:flex}:host .box .action:hover{background-color:#6d6d6d0c;border-top-right-radius:120px;border-bottom-right-radius:120px}mecx-filter-options{margin:4px 0}\n"] }]
+            args: [{ selector: 'mecx-filter-selected-item', template: "<ng-container *ngIf=\"_option?.type as type\">\n  <ng-container *ngIf=\"_option?.children; else withoutChildren\">\n    <mecx-filter-selected-item-children\n      [option]=\"_option\"\n      (onShow)=\"onHandleShowMenu()\"\n      (onRemove)=\"onHandleRemove()\"\n    >\n    </mecx-filter-selected-item-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <div class=\"box\">\n      <div class=\"data\">\n        {{ _option.label | translate }}\n      </div>\n      <div\n        class=\"value\"\n        [id]=\"'mecx-filter-selected-item-' + _option?.field\"\n        (click)=\"onHandleShowMenu()\"\n        [attr.data-testid]=\"'mecx-filter-selected-item-btn-' + _option?.value?.toLowerCase()\"\n      >\n        <ng-container [ngSwitch]=\"type\">\n          <mecx-filter-selected-item-currency *ngSwitchCase=\"'currency'\" [option]=\"_option\">\n          </mecx-filter-selected-item-currency>\n          <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n          </mecx-filter-selected-item-date-range>\n          <mecx-filter-selected-item-value-range *ngSwitchCase=\"'value-range'\" [option]=\"_option\">\n          </mecx-filter-selected-item-value-range>\n          <mecx-filter-selected-item-input *ngSwitchCase=\"'input'\" [option]=\"_option\">\n          </mecx-filter-selected-item-input>\n          <mecx-filter-selected-item-status\n            *ngSwitchCase=\"'status'\"\n            [option]=\"_option\"\n            [labelMoreValues]=\"'FIELD.AND-MORE' | translate\"\n          >\n          </mecx-filter-selected-item-status>\n          <mecx-filter-selected-item-status-radio *ngSwitchCase=\"'status-radio'\" [option]=\"_option\">\n          </mecx-filter-selected-item-status-radio>\n        </ng-container>\n      </div>\n      <div\n        class=\"action\"\n        (click)=\"onHandleShowMenu()\"\n        data-testid=\"mecx-filter-selected-item-btn-arrow-right\"\n      >\n        <monkey-icon icon=\"arrow-right-14\" color=\"#4B4A53\"></monkey-icon>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n>\n  <mecx-filter-options\n    [option]=\"_option\"\n    (onClose)=\"onHandleClose()\"\n    (onRemove)=\"onHandleRemove()\"\n    (onSubmit)=\"onHandleSubmit($event)\"\n    (onShowFromChildren)=\"onHandleShowFromChildren($event)\"\n  >\n  </mecx-filter-options>\n</ng-container>\n", styles: [":host{display:flex}:host .box{display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #d6d6d6;box-sizing:border-box;border-radius:120px;height:40px}:host .box .data{display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e}:host .box .value{cursor:pointer;display:flex;align-items:center;padding:12px 8px;height:100%;font-style:normal;font-weight:400;font-size:14px;line-height:24px;text-align:center;color:#72717e;background-color:#6d6d6d0a}:host .box .value:hover{background-color:#6d6d6d0c;font-weight:400;text-decoration:underline}:host .box .action{cursor:pointer;border-left:1px solid #d6d6d6;padding:8px;color:#908e9d;font-weight:500;font-size:18px;height:40px;align-items:center;display:flex}:host .box .action:hover{background-color:#6d6d6d0c;border-top-right-radius:120px;border-bottom-right-radius:120px}mecx-filter-options{margin:4px 0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { option: [{
                 type: Input
             }], onClose: [{
@@ -2175,7 +2335,7 @@ class MECXFilterSelectedComponent {
     }
 }
 MECXFilterSelectedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterSelectedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedComponent, selector: "mecx-filter-selected", inputs: { model: "model" }, outputs: { onOpenFilters: "onOpenFilters", onClose: "onClose", onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<mecx-filter-selected-item *ngFor=\"let option of _model\" (onSubmit)=\"onHandleSubmit($event)\"\n  (onClose)=\"onHandleClose()\" [option]=\"option\">\n</mecx-filter-selected-item>", styles: [":host{display:flex;flex-wrap:wrap}\n"], components: [{ type: MECXFilterSelectedItemComponent, selector: "mecx-filter-selected-item", inputs: ["option"], outputs: ["onClose", "onSubmit"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+MECXFilterSelectedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedComponent, selector: "mecx-filter-selected", inputs: { model: "model" }, outputs: { onOpenFilters: "onOpenFilters", onClose: "onClose", onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<mecx-filter-selected-item *ngFor=\"let option of _model\" (onSubmit)=\"onHandleSubmit($event)\"\n  (onClose)=\"onHandleClose()\" [option]=\"option\">\n</mecx-filter-selected-item>", styles: [":host{display:flex;flex-wrap:wrap}\n"], components: [{ type: MECXFilterSelectedItemComponent, selector: "mecx-filter-selected-item", inputs: ["option"], outputs: ["onClose", "onSubmit"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-filter-selected', template: "<mecx-filter-selected-item *ngFor=\"let option of _model\" (onSubmit)=\"onHandleSubmit($event)\"\n  (onClose)=\"onHandleClose()\" [option]=\"option\">\n</mecx-filter-selected-item>", styles: [":host{display:flex;flex-wrap:wrap}\n"] }]
@@ -2290,7 +2450,7 @@ class MECXFilterMenuComponent {
     }
 }
 MECXFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterMenuComponent, selector: "mecx-filter-menu", inputs: { model: "model" }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\" #actionElement>\n  <ng-container *ngFor=\"let menu of _model; let index = index\">\n    <ng-container *ngIf=\"menu?.children; else withoutChildren\">\n      <div class=\"item no-action\">\n        {{ menu.label | translate }}\n      </div>\n      <div class=\"separator\"></div>\n      <ng-container *ngFor=\"let child of menu?.children\">\n        <div\n          class=\"item children\"\n          (click)=\"onHandleChildrenAction(menu, child)\"\n          [attr.data-testid]=\"\n            'mecx-filter-item-children-btn-' +\n            menu?.field?.toLowerCase() +\n            '-' +\n            child?.field?.toLowerCase()\n          \"\n        >\n          {{ child.label | translate }}\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-template #withoutChildren>\n      <div\n        class=\"item\"\n        (click)=\"onHandleShowMenu(menu)\"\n        [attr.data-testid]=\"'mecx-filter-menu-btn-' + menu?.label?.toLowerCase()\"\n      >\n        {{ menu.label | translate }}\n      </div>\n    </ng-template>\n    <ng-container *ngIf=\"_model[index + 1]?.group as next; _model: [index]?.group as current\">\n      <div class=\"separator\" *ngIf=\"next !== current\"></div>\n    </ng-container>\n  </ng-container>\n</div>\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'\"\n>\n  <mecx-filter-options\n    [option]=\"_menuOption\"\n    (onClose)=\"onHandleClose()\"\n    (onSubmit)=\"onHandleSubmit($event)\"\n    [closeDirectly]=\"true\"\n  ></mecx-filter-options>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:16px!important;min-width:192px;margin:4px 8px;overflow:auto;max-height:500px}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{justify-content:flex-start!important;width:100%}:host .item{font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.no-action{cursor:not-allowed;padding:8px;margin:0!important;font-weight:500}:host .item:first-child{margin:12px 0 0}:host .item:last-child{margin:0 0 12px}:host .item:not(.no-action){cursor:pointer}:host .item:not(.no-action):hover{background-color:var(--mecx-color-theme-200)!important;color:var(--mecx-color-theme-main)!important;font-weight:400}:host .separator{border-bottom:1px solid #ebebeb}\n"], components: [{ type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: ["option", "closeDirectly"], outputs: ["onClose", "onRemove", "onSubmit", "onShowFromChildren"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterMenuComponent, selector: "mecx-filter-menu", inputs: { model: "model" }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\" #actionElement>\n  <ng-container *ngFor=\"let menu of _model; let index = index\">\n    <ng-container *ngIf=\"menu?.children; else withoutChildren\">\n      <div class=\"item no-action\">\n        {{ menu.label | translate }}\n      </div>\n      <div class=\"separator\"></div>\n      <ng-container *ngFor=\"let child of menu?.children\">\n        <div\n          class=\"item children\"\n          (click)=\"onHandleChildrenAction(menu, child)\"\n          [attr.data-testid]=\"\n            'mecx-filter-item-children-btn-' +\n            menu?.field?.toLowerCase() +\n            '-' +\n            child?.field?.toLowerCase()\n          \"\n        >\n          {{ child.label | translate }}\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-template #withoutChildren>\n      <div\n        class=\"item\"\n        (click)=\"onHandleShowMenu(menu)\"\n        [attr.data-testid]=\"'mecx-filter-menu-btn-' + menu?.label?.toLowerCase()\"\n      >\n        {{ menu.label | translate }}\n      </div>\n    </ng-template>\n    <ng-container *ngIf=\"_model[index + 1]?.group as next; _model: [index]?.group as current\">\n      <div class=\"separator\" *ngIf=\"next !== current\"></div>\n    </ng-container>\n  </ng-container>\n</div>\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'\"\n>\n  <mecx-filter-options\n    [option]=\"_menuOption\"\n    (onClose)=\"onHandleClose()\"\n    (onSubmit)=\"onHandleSubmit($event)\"\n    [closeDirectly]=\"true\"\n  ></mecx-filter-options>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:16px!important;min-width:192px;margin:4px 8px;overflow:auto;max-height:500px}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{justify-content:flex-start!important;width:100%}:host .item{font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.no-action{cursor:not-allowed;padding:8px;margin:0!important;font-weight:500}:host .item:first-child{margin:12px 0 0}:host .item:last-child{margin:0 0 12px}:host .item:not(.no-action){cursor:pointer}:host .item:not(.no-action):hover{background-color:var(--mecx-color-theme-200)!important;color:var(--mecx-color-theme-main)!important;font-weight:400}:host .separator{border-bottom:1px solid #ebebeb}\n"], components: [{ type: MECXFilterOptionsComponent, selector: "mecx-filter-options", inputs: ["option", "closeDirectly"], outputs: ["onClose", "onRemove", "onSubmit", "onShowFromChildren"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-filter-menu', template: "<div class=\"d-flex flex-column\" #actionElement>\n  <ng-container *ngFor=\"let menu of _model; let index = index\">\n    <ng-container *ngIf=\"menu?.children; else withoutChildren\">\n      <div class=\"item no-action\">\n        {{ menu.label | translate }}\n      </div>\n      <div class=\"separator\"></div>\n      <ng-container *ngFor=\"let child of menu?.children\">\n        <div\n          class=\"item children\"\n          (click)=\"onHandleChildrenAction(menu, child)\"\n          [attr.data-testid]=\"\n            'mecx-filter-item-children-btn-' +\n            menu?.field?.toLowerCase() +\n            '-' +\n            child?.field?.toLowerCase()\n          \"\n        >\n          {{ child.label | translate }}\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-template #withoutChildren>\n      <div\n        class=\"item\"\n        (click)=\"onHandleShowMenu(menu)\"\n        [attr.data-testid]=\"'mecx-filter-menu-btn-' + menu?.label?.toLowerCase()\"\n      >\n        {{ menu.label | translate }}\n      </div>\n    </ng-template>\n    <ng-container *ngIf=\"_model[index + 1]?.group as next; _model: [index]?.group as current\">\n      <div class=\"separator\" *ngIf=\"next !== current\"></div>\n    </ng-container>\n  </ng-container>\n</div>\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'\"\n>\n  <mecx-filter-options\n    [option]=\"_menuOption\"\n    (onClose)=\"onHandleClose()\"\n    (onSubmit)=\"onHandleSubmit($event)\"\n    [closeDirectly]=\"true\"\n  ></mecx-filter-options>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;background:#fafafa;border:1px solid #d6d6d6;box-sizing:border-box;box-shadow:0 4px 36px -8px #6d6d6d3a;border-radius:16px!important;min-width:192px;margin:4px 8px;overflow:auto;max-height:500px}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{justify-content:flex-start!important;width:100%}:host .item{font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#72717e;padding:8px 24px}:host .item.no-action{cursor:not-allowed;padding:8px;margin:0!important;font-weight:500}:host .item:first-child{margin:12px 0 0}:host .item:last-child{margin:0 0 12px}:host .item:not(.no-action){cursor:pointer}:host .item:not(.no-action):hover{background-color:var(--mecx-color-theme-200)!important;color:var(--mecx-color-theme-main)!important;font-weight:400}:host .separator{border-bottom:1px solid #ebebeb}\n"] }]
@@ -2405,7 +2565,7 @@ class MECXFilterComponent {
     }
 }
 MECXFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterComponent, selector: "mecx-filter", inputs: { searchPlaceholder: "searchPlaceholder", orderPlaceholder: "orderPlaceholder", menus: "menus", orders: "orders", enableSearch: "enableSearch", enableAddFilter: "enableAddFilter", enableOrder: "enableOrder", complementTemplate: "complementTemplate", search: "search", order: "order", ordersList: "ordersList", isLoading: "isLoading" }, outputs: { onFilter: "onFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex full-width flex-column d-flex-gap-2 filter-content\">\n  <div class=\"d-flex flex-column flex-md-row justify-content-between full-width\">\n    <div class=\"d-flex full-width d-flex-gap-2 filter-input\">\n      <ng-container *ngIf=\"enableSearch\">\n        <monkey-input-filter\n          [placeholder]=\"searchPlaceholder | translate\"\n          (onChange)=\"onSearchFilter($event)\"\n          icon=\"search-16\"\n          iconPosition=\"left\"\n          [(value)]=\"_search\"\n          data-testid=\"mecx-filter-input\"\n        >\n        </monkey-input-filter>\n      </ng-container>\n      <ng-container *ngIf=\"!_hasFilterByMenu\">\n        <div *ngIf=\"enableAddFilter\" class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\n          <monkey-button\n            type=\"filter\"\n            color=\"border\"\n            (click)=\"onHandleShowMenu()\"\n            icon=\"more-16\"\n            iconPosition=\"right\"\n            data-testid=\"mecx-filter-btn-add-filter\"\n          >\n            {{ 'BUTTONS.ADD-FILTER' | translate }}\n          </monkey-button>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"order hidden-sm hidden-xs\">\n      <div class=\"d-flex align-items-center flex-column flex-sm-row\">\n        <ng-container *ngIf=\"!!complementTemplate\">\n          <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"enableOrder\">\n          <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"_hasFilterByMenu\">\n    <div class=\"separator\"></div>\n    <div class=\"d-flex full-width d-flex-gap-2 align-items-end\">\n      <mecx-filter-selected\n        class=\"d-flex-gap-2\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n        (onClose)=\"onHandleClose()\"\n        [model]=\"menus\"\n      ></mecx-filter-selected>\n      <div class=\"more-filters\">\n        <monkey-button\n          type=\"filter\"\n          color=\"border\"\n          icon=\"more-16\"\n          id=\"mecx-filters-add-filter\"\n          (click)=\"onHandleShowMenu()\"\n        >\n        </monkey-button>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"order hidden-md hidden-lg\">\n    <div class=\"d-flex align-items-center flex-column flex-sm-row\">\n      <ng-container *ngIf=\"!!complementTemplate\">\n        <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"enableOrder\">\n        <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<mecx-filter-menu\n  *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n  (onSubmit)=\"onHandleSubmit($event)\"\n  (onClose)=\"onHandleClose()\"\n  [model]=\"menus\"\n>\n</mecx-filter-menu>\n\n<ng-template #orderBy>\n  <ng-container *ngIf=\"!(_ordersList?.length > 0); else orderByList\">\n    <div class=\"d-flex align-items-center flex-column flex-sm-row\">\n      <monkey-select-filter\n        (onChange)=\"onHandleOrder($event)\"\n        [placeholder]=\"orderPlaceholder | translate\"\n        type=\"none\"\n        [(value)]=\"_order\"\n        data-testid=\"mecx-filter-btn-order\"\n      >\n        <monkey-option\n          *ngFor=\"let ordBy of orders\"\n          [label]=\"ordBy?.label | translate\"\n          [value]=\"ordBy?.value\"\n          [attr.data-testid]=\"'mecx-filter-btn-order-' + ordBy?.value?.toLowerCase()\"\n          >x\n        </monkey-option>\n      </monkey-select-filter>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #orderByList>\n  <div class=\"d-flex full-width justify-content-end\">\n    <div #ordersFilterMenu (click)=\"onHandleShowOrders(ordersFilterMenu)\">\n      <monkey-button\n        type=\"filter\"\n        color=\"border\"\n        icon=\"arrow-down-16\"\n        iconPosition=\"right\"\n        data-testid=\"mecx-filter-btn-ordination\"\n      >\n        {{ 'BUTTONS.ORDINATION' | translate }}\n      </monkey-button>\n    </div>\n  </div>\n  <div\n    class=\"ml-1\"\n    *monkeyecxPopover=\"\n      _showOrder;\n      target: $any(_actionElementOrder);\n      closed: closeOrder;\n      dir: 'rtl'\n    \"\n  >\n    <div class=\"drop-down-orders-filter pt-4\">\n      <ng-container *ngFor=\"let item of _ordersList\">\n        <div class=\"px-4\">\n          <span>{{ item.label | translate }}</span>\n          <monkey-radiobutton [value]=\"item.value\" (onChange)=\"onHandleOrder($event, item.field)\">\n            <monkey-option\n              *ngFor=\"let ordBy of item.values\"\n              [label]=\"ordBy?.label | translate\"\n              [value]=\"ordBy?.value\"\n              [attr.data-testid]=\"'mecx-filter-btn-ordination-' + ordBy?.value?.toLowerCase()\"\n            >\n            </monkey-option>\n          </monkey-radiobutton>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: [".drop-down-orders-filter{display:flex;flex-direction:column;background:#fafafa;border:1px solid #e9eaec;box-shadow:1px 17px 31px 5px #1d1d1d15;border-radius:16px!important}.drop-down-orders-filter ::ng-deep .mecx-radio-container{margin-top:16px}:host{display:flex;width:100%;align-items:center}@media screen and (max-width: 599px){:host .filter-content,:host .filter-input{flex-direction:column}}:host .filter-input .actions ::ng-deep monkey-button button{justify-content:center;white-space:nowrap}:host .filter-input .actions ::ng-deep monkey-button button monkey-icon{margin-right:0;margin-left:10px}@media screen and (max-width: 599px){:host .filter-input{flex-wrap:wrap}:host .filter-input .actions{flex:1 1}}:host .filter-input .mecx-button-filter{white-space:nowrap;justify-content:center}@media screen and (max-width: 959px){:host{flex-direction:column;max-width:100%}:host ::ng-deep monkey-input-filter{width:100%}:host ::ng-deep monkey-select-filter{width:100%}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{width:100%}}@media screen and (min-width: 960px){:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}:host .order{white-space:nowrap;align-self:flex-start}@media screen and (max-width: 599px){:host .order{align-self:unset}}@media screen and (min-width: 960px){:host .order ::ng-deep monkey-select-filter{width:unset}:host .order ::ng-deep monkey-button monkey-icon{margin-left:10px;margin-right:unset}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}:host ::ng-deep monkey-button-dropdown{color:#fff}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger{background:#fff;border-radius:.5rem;border:1px solid #d6d6d6;height:40px;justify-content:center;width:40px}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger{justify-content:center}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger monkey-icon{margin-left:0}:host .separator{border-bottom:1px solid #ebebeb;margin-top:16px;margin-bottom:16px}\n"], components: [{ type: i1$2.MonkeyInputFilterComponent, selector: "monkey-input-filter", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "type", "infoMessage", "errorMessage", "mask", "prefix", "onlyNumber", "onlyAlphaNumeric", "upperCase", "lowerCase", "capitalize", "currency", "iconPosition", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }, { type: MECXFilterSelectedComponent, selector: "mecx-filter-selected", inputs: ["model"], outputs: ["onOpenFilters", "onClose", "onSubmit"] }, { type: MECXFilterMenuComponent, selector: "mecx-filter-menu", inputs: ["model"], outputs: ["onClose", "onSubmit"] }, { type: i1$2.MonkeySelectFilterComponent, selector: "monkey-select-filter", inputs: ["placeholder", "icon", "type", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }, { type: i1$2.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterComponent, selector: "mecx-filter", inputs: { searchPlaceholder: "searchPlaceholder", orderPlaceholder: "orderPlaceholder", menus: "menus", orders: "orders", enableSearch: "enableSearch", enableAddFilter: "enableAddFilter", enableOrder: "enableOrder", complementTemplate: "complementTemplate", search: "search", order: "order", ordersList: "ordersList", isLoading: "isLoading" }, outputs: { onFilter: "onFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex full-width flex-column d-flex-gap-2 filter-content\">\n  <div class=\"d-flex flex-column flex-md-row justify-content-between full-width\">\n    <div class=\"d-flex full-width d-flex-gap-2 filter-input\">\n      <ng-container *ngIf=\"enableSearch\">\n        <monkey-input-filter\n          [placeholder]=\"searchPlaceholder | translate\"\n          (onChange)=\"onSearchFilter($event)\"\n          icon=\"search-16\"\n          iconPosition=\"left\"\n          [(value)]=\"_search\"\n          data-testid=\"mecx-filter-input\"\n        >\n        </monkey-input-filter>\n      </ng-container>\n      <ng-container *ngIf=\"!_hasFilterByMenu\">\n        <div *ngIf=\"enableAddFilter\" class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\n          <monkey-button\n            type=\"filter\"\n            color=\"border\"\n            (click)=\"onHandleShowMenu()\"\n            icon=\"more-16\"\n            iconPosition=\"right\"\n            data-testid=\"mecx-filter-btn-add-filter\"\n          >\n            {{ 'BUTTONS.ADD-FILTER' | translate }}\n          </monkey-button>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"order hidden-sm hidden-xs\">\n      <div class=\"d-flex align-items-center flex-column flex-sm-row\">\n        <ng-container *ngIf=\"!!complementTemplate\">\n          <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"enableOrder\">\n          <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"_hasFilterByMenu\">\n    <div class=\"separator\"></div>\n    <div class=\"d-flex full-width d-flex-gap-2 align-items-end\">\n      <mecx-filter-selected\n        class=\"d-flex-gap-2\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n        (onClose)=\"onHandleClose()\"\n        [model]=\"menus\"\n      ></mecx-filter-selected>\n      <div class=\"more-filters\">\n        <monkey-button\n          type=\"filter\"\n          color=\"border\"\n          icon=\"more-16\"\n          id=\"mecx-filters-add-filter\"\n          (click)=\"onHandleShowMenu()\"\n        >\n        </monkey-button>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"order hidden-md hidden-lg\">\n    <div class=\"d-flex align-items-center flex-column flex-sm-row\">\n      <ng-container *ngIf=\"!!complementTemplate\">\n        <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"enableOrder\">\n        <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<mecx-filter-menu\n  *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n  (onSubmit)=\"onHandleSubmit($event)\"\n  (onClose)=\"onHandleClose()\"\n  [model]=\"menus\"\n>\n</mecx-filter-menu>\n\n<ng-template #orderBy>\n  <ng-container *ngIf=\"!(_ordersList?.length > 0); else orderByList\">\n    <div class=\"d-flex align-items-center flex-column flex-sm-row\">\n      <monkey-select-filter\n        (onChange)=\"onHandleOrder($event)\"\n        [placeholder]=\"orderPlaceholder | translate\"\n        type=\"none\"\n        [(value)]=\"_order\"\n        data-testid=\"mecx-filter-btn-order\"\n      >\n        <monkey-option\n          *ngFor=\"let ordBy of orders\"\n          [label]=\"ordBy?.label | translate\"\n          [value]=\"ordBy?.value\"\n          [attr.data-testid]=\"'mecx-filter-btn-order-' + ordBy?.value?.toLowerCase()\"\n          >x\n        </monkey-option>\n      </monkey-select-filter>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #orderByList>\n  <div class=\"d-flex full-width justify-content-end\">\n    <div #ordersFilterMenu (click)=\"onHandleShowOrders(ordersFilterMenu)\">\n      <monkey-button\n        type=\"filter\"\n        color=\"border\"\n        icon=\"arrow-down-16\"\n        iconPosition=\"right\"\n        data-testid=\"mecx-filter-btn-ordination\"\n      >\n        {{ 'BUTTONS.ORDINATION' | translate }}\n      </monkey-button>\n    </div>\n  </div>\n  <div\n    class=\"ml-1\"\n    *monkeyecxPopover=\"\n      _showOrder;\n      target: $any(_actionElementOrder);\n      closed: closeOrder;\n      dir: 'rtl'\n    \"\n  >\n    <div class=\"drop-down-orders-filter pt-4\">\n      <ng-container *ngFor=\"let item of _ordersList\">\n        <div class=\"px-4\">\n          <span>{{ item.label | translate }}</span>\n          <monkey-radiobutton [value]=\"item.value\" (onChange)=\"onHandleOrder($event, item.field)\">\n            <monkey-option\n              *ngFor=\"let ordBy of item.values\"\n              [label]=\"ordBy?.label | translate\"\n              [value]=\"ordBy?.value\"\n              [attr.data-testid]=\"'mecx-filter-btn-ordination-' + ordBy?.value?.toLowerCase()\"\n            >\n            </monkey-option>\n          </monkey-radiobutton>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: [".drop-down-orders-filter{display:flex;flex-direction:column;background:#fafafa;border:1px solid #e9eaec;box-shadow:1px 17px 31px 5px #1d1d1d15;border-radius:16px!important}.drop-down-orders-filter ::ng-deep .mecx-radio-container{margin-top:16px}:host{display:flex;width:100%;align-items:center}@media screen and (max-width: 599px){:host .filter-content,:host .filter-input{flex-direction:column}}:host .filter-input .actions ::ng-deep monkey-button button{justify-content:center;white-space:nowrap}:host .filter-input .actions ::ng-deep monkey-button button monkey-icon{margin-right:0;margin-left:10px}@media screen and (max-width: 599px){:host .filter-input{flex-wrap:wrap}:host .filter-input .actions{flex:1 1}}:host .filter-input .mecx-button-filter{white-space:nowrap;justify-content:center}@media screen and (max-width: 959px){:host{flex-direction:column;max-width:100%}:host ::ng-deep monkey-input-filter{width:100%}:host ::ng-deep monkey-select-filter{width:100%}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{width:100%}}@media screen and (min-width: 960px){:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}:host .order{white-space:nowrap;align-self:flex-start}@media screen and (max-width: 599px){:host .order{align-self:unset}}@media screen and (min-width: 960px){:host .order ::ng-deep monkey-select-filter{width:unset}:host .order ::ng-deep monkey-button monkey-icon{margin-left:10px;margin-right:unset}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}:host ::ng-deep monkey-button-dropdown{color:#fff}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger{background:#fff;border-radius:.5rem;border:1px solid #d6d6d6;height:40px;justify-content:center;width:40px}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger{justify-content:center}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger monkey-icon{margin-left:0}:host .separator{border-bottom:1px solid #ebebeb;margin-top:16px;margin-bottom:16px}\n"], components: [{ type: i1$2.MonkeyInputFilterComponent, selector: "monkey-input-filter", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "type", "infoMessage", "errorMessage", "mask", "prefix", "onlyNumber", "onlyAlphaNumeric", "upperCase", "lowerCase", "capitalize", "currency", "iconPosition", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }, { type: MECXFilterSelectedComponent, selector: "mecx-filter-selected", inputs: ["model"], outputs: ["onOpenFilters", "onClose", "onSubmit"] }, { type: MECXFilterMenuComponent, selector: "mecx-filter-menu", inputs: ["model"], outputs: ["onClose", "onSubmit"] }, { type: i1$2.MonkeySelectFilterComponent, selector: "monkey-select-filter", inputs: ["placeholder", "icon", "type", "value"], outputs: ["onChange"] }, { type: i1$2.MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }, { type: i1$2.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$4.MonkeyEcxPopoverDirective, selector: "[monkeyecxPopover]", inputs: ["monkeyecxPopover", "monkeyecxPopoverClosed", "monkeyecxPopoverTarget", "monkeyecxPopoverMinwidth", "monkeyecxPopoverBackdrop", "monkeyecxPopoverWatch", "monkeyecxPopoverDir", "monkeyecxPopoverContextmenu", "monkeyecxPopoverHeight"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-filter', template: "<div class=\"d-flex full-width flex-column d-flex-gap-2 filter-content\">\n  <div class=\"d-flex flex-column flex-md-row justify-content-between full-width\">\n    <div class=\"d-flex full-width d-flex-gap-2 filter-input\">\n      <ng-container *ngIf=\"enableSearch\">\n        <monkey-input-filter\n          [placeholder]=\"searchPlaceholder | translate\"\n          (onChange)=\"onSearchFilter($event)\"\n          icon=\"search-16\"\n          iconPosition=\"left\"\n          [(value)]=\"_search\"\n          data-testid=\"mecx-filter-input\"\n        >\n        </monkey-input-filter>\n      </ng-container>\n      <ng-container *ngIf=\"!_hasFilterByMenu\">\n        <div *ngIf=\"enableAddFilter\" class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\n          <monkey-button\n            type=\"filter\"\n            color=\"border\"\n            (click)=\"onHandleShowMenu()\"\n            icon=\"more-16\"\n            iconPosition=\"right\"\n            data-testid=\"mecx-filter-btn-add-filter\"\n          >\n            {{ 'BUTTONS.ADD-FILTER' | translate }}\n          </monkey-button>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"order hidden-sm hidden-xs\">\n      <div class=\"d-flex align-items-center flex-column flex-sm-row\">\n        <ng-container *ngIf=\"!!complementTemplate\">\n          <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"enableOrder\">\n          <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"_hasFilterByMenu\">\n    <div class=\"separator\"></div>\n    <div class=\"d-flex full-width d-flex-gap-2 align-items-end\">\n      <mecx-filter-selected\n        class=\"d-flex-gap-2\"\n        (onSubmit)=\"onHandleSubmit($event)\"\n        (onClose)=\"onHandleClose()\"\n        [model]=\"menus\"\n      ></mecx-filter-selected>\n      <div class=\"more-filters\">\n        <monkey-button\n          type=\"filter\"\n          color=\"border\"\n          icon=\"more-16\"\n          id=\"mecx-filters-add-filter\"\n          (click)=\"onHandleShowMenu()\"\n        >\n        </monkey-button>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"order hidden-md hidden-lg\">\n    <div class=\"d-flex align-items-center flex-column flex-sm-row\">\n      <ng-container *ngIf=\"!!complementTemplate\">\n        <ng-container *ngTemplateOutlet=\"complementTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"enableOrder\">\n        <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<mecx-filter-menu\n  *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n  (onSubmit)=\"onHandleSubmit($event)\"\n  (onClose)=\"onHandleClose()\"\n  [model]=\"menus\"\n>\n</mecx-filter-menu>\n\n<ng-template #orderBy>\n  <ng-container *ngIf=\"!(_ordersList?.length > 0); else orderByList\">\n    <div class=\"d-flex align-items-center flex-column flex-sm-row\">\n      <monkey-select-filter\n        (onChange)=\"onHandleOrder($event)\"\n        [placeholder]=\"orderPlaceholder | translate\"\n        type=\"none\"\n        [(value)]=\"_order\"\n        data-testid=\"mecx-filter-btn-order\"\n      >\n        <monkey-option\n          *ngFor=\"let ordBy of orders\"\n          [label]=\"ordBy?.label | translate\"\n          [value]=\"ordBy?.value\"\n          [attr.data-testid]=\"'mecx-filter-btn-order-' + ordBy?.value?.toLowerCase()\"\n          >x\n        </monkey-option>\n      </monkey-select-filter>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #orderByList>\n  <div class=\"d-flex full-width justify-content-end\">\n    <div #ordersFilterMenu (click)=\"onHandleShowOrders(ordersFilterMenu)\">\n      <monkey-button\n        type=\"filter\"\n        color=\"border\"\n        icon=\"arrow-down-16\"\n        iconPosition=\"right\"\n        data-testid=\"mecx-filter-btn-ordination\"\n      >\n        {{ 'BUTTONS.ORDINATION' | translate }}\n      </monkey-button>\n    </div>\n  </div>\n  <div\n    class=\"ml-1\"\n    *monkeyecxPopover=\"\n      _showOrder;\n      target: $any(_actionElementOrder);\n      closed: closeOrder;\n      dir: 'rtl'\n    \"\n  >\n    <div class=\"drop-down-orders-filter pt-4\">\n      <ng-container *ngFor=\"let item of _ordersList\">\n        <div class=\"px-4\">\n          <span>{{ item.label | translate }}</span>\n          <monkey-radiobutton [value]=\"item.value\" (onChange)=\"onHandleOrder($event, item.field)\">\n            <monkey-option\n              *ngFor=\"let ordBy of item.values\"\n              [label]=\"ordBy?.label | translate\"\n              [value]=\"ordBy?.value\"\n              [attr.data-testid]=\"'mecx-filter-btn-ordination-' + ordBy?.value?.toLowerCase()\"\n            >\n            </monkey-option>\n          </monkey-radiobutton>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: [".drop-down-orders-filter{display:flex;flex-direction:column;background:#fafafa;border:1px solid #e9eaec;box-shadow:1px 17px 31px 5px #1d1d1d15;border-radius:16px!important}.drop-down-orders-filter ::ng-deep .mecx-radio-container{margin-top:16px}:host{display:flex;width:100%;align-items:center}@media screen and (max-width: 599px){:host .filter-content,:host .filter-input{flex-direction:column}}:host .filter-input .actions ::ng-deep monkey-button button{justify-content:center;white-space:nowrap}:host .filter-input .actions ::ng-deep monkey-button button monkey-icon{margin-right:0;margin-left:10px}@media screen and (max-width: 599px){:host .filter-input{flex-wrap:wrap}:host .filter-input .actions{flex:1 1}}:host .filter-input .mecx-button-filter{white-space:nowrap;justify-content:center}@media screen and (max-width: 959px){:host{flex-direction:column;max-width:100%}:host ::ng-deep monkey-input-filter{width:100%}:host ::ng-deep monkey-select-filter{width:100%}:host ::ng-deep monkey-button{width:100%}:host ::ng-deep monkey-button button{width:100%}}@media screen and (min-width: 960px){:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}:host .order{white-space:nowrap;align-self:flex-start}@media screen and (max-width: 599px){:host .order{align-self:unset}}@media screen and (min-width: 960px){:host .order ::ng-deep monkey-select-filter{width:unset}:host .order ::ng-deep monkey-button monkey-icon{margin-left:10px;margin-right:unset}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}:host ::ng-deep monkey-button-dropdown{color:#fff}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger{background:#fff;border-radius:.5rem;border:1px solid #d6d6d6;height:40px;justify-content:center;width:40px}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger{justify-content:center}:host ::ng-deep monkey-button-dropdown mecx-button-dropdown.trigger mecx-button-dropdown__trigger monkey-icon{margin-left:0}:host .separator{border-bottom:1px solid #ebebeb;margin-top:16px;margin-bottom:16px}\n"] }]
@@ -2446,7 +2606,8 @@ MECXFilterOptionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         MECXFilterOptionsDateRangeComponent,
         MECXFilterOptionsInputComponent,
         MECXFilterOptionsStatusComponent,
-        MECXFilterOptionsStatusRadioComponent], imports: [CommonModule,
+        MECXFilterOptionsStatusRadioComponent,
+        MECXFilterOptionsValueRangeComponent], imports: [CommonModule,
         FormsModule,
         MonkeyBadgeModule,
         MonkeyButtonModule,
@@ -2465,7 +2626,8 @@ MECXFilterOptionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         MECXFilterOptionsDateRangeComponent,
         MECXFilterOptionsInputComponent,
         MECXFilterOptionsStatusComponent,
-        MECXFilterOptionsStatusRadioComponent] });
+        MECXFilterOptionsStatusRadioComponent,
+        MECXFilterOptionsValueRangeComponent] });
 MECXFilterOptionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsModule, imports: [[
             CommonModule,
             FormsModule,
@@ -2481,7 +2643,7 @@ MECXFilterOptionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             MonkeySelectModule,
             ReactiveFormsModule,
             RouterModule,
-            TranslateModule.forChild(),
+            TranslateModule.forChild()
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsModule, decorators: [{
             type: NgModule,
@@ -2494,6 +2656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         MECXFilterOptionsInputComponent,
                         MECXFilterOptionsStatusComponent,
                         MECXFilterOptionsStatusRadioComponent,
+                        MECXFilterOptionsValueRangeComponent
                     ],
                     imports: [
                         CommonModule,
@@ -2510,7 +2673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         MonkeySelectModule,
                         ReactiveFormsModule,
                         RouterModule,
-                        TranslateModule.forChild(),
+                        TranslateModule.forChild()
                     ],
                     exports: [
                         MECXFilterOptionsChildrenComponent,
@@ -2520,7 +2683,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         MECXFilterOptionsInputComponent,
                         MECXFilterOptionsStatusComponent,
                         MECXFilterOptionsStatusRadioComponent,
-                    ],
+                        MECXFilterOptionsValueRangeComponent
+                    ]
                 }]
         }] });
 
@@ -2591,6 +2755,7 @@ MECXFilterSelectedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
         MECXFilterSelectedItemComponent,
         MECXFilterSelectedItemCurrencyComponent,
         MECXFilterSelectedItemDateRangeComponent,
+        MECXFilterSelectedItemValueRangeComponent,
         MECXFilterSelectedItemDateWithActionComponent,
         MECXFilterSelectedItemInputComponent,
         MECXFilterSelectedItemStatusComponent,
@@ -2625,7 +2790,7 @@ MECXFilterSelectedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
             MonkeySelectModule,
             ReactiveFormsModule,
             RouterModule,
-            TranslateModule.forChild(),
+            TranslateModule.forChild()
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedModule, decorators: [{
             type: NgModule,
@@ -2636,10 +2801,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         MECXFilterSelectedItemComponent,
                         MECXFilterSelectedItemCurrencyComponent,
                         MECXFilterSelectedItemDateRangeComponent,
+                        MECXFilterSelectedItemValueRangeComponent,
                         MECXFilterSelectedItemDateWithActionComponent,
                         MECXFilterSelectedItemInputComponent,
                         MECXFilterSelectedItemStatusComponent,
-                        MECXFilterSelectedItemStatusRadioComponent,
+                        MECXFilterSelectedItemStatusRadioComponent
                     ],
                     imports: [
                         CommonModule,
@@ -2657,9 +2823,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         MonkeySelectModule,
                         ReactiveFormsModule,
                         RouterModule,
-                        TranslateModule.forChild(),
+                        TranslateModule.forChild()
                     ],
-                    exports: [MECXFilterSelectedComponent],
+                    exports: [MECXFilterSelectedComponent]
                 }]
         }] });
 
@@ -2786,7 +2952,7 @@ class MECXPasswordStrengthComponent {
     }
 }
 MECXPasswordStrengthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXPasswordStrengthComponent, deps: [{ token: i1$4.MonkeyEcxConfigService }], target: i0.ɵɵFactoryTarget.Component });
-MECXPasswordStrengthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXPasswordStrengthComponent, selector: "mecx-password-strength", inputs: { passwordToCheck: "passwordToCheck", i18n: "i18n" }, outputs: { onHandleSubmitReady: "onHandleSubmitReady" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_validatorsPasswordPass?.length\">\n  <div id=\"strength\" class=\"d-flex full-width flex-column justify-content-center align-items-center\"\n    #strength>\n    <div id=\"strengthBar\" class=\"strength-bar d-flex full-width flex-row\">\n      <div class=\"d-flex full-width align-items-center\">\n        <div class=\"bar-label\">\n          <small>{{ i18n?.TITLE }}</small>\n        </div>\n      </div>\n      <div class=\"d-flex full-width align-items-center flex-column\">\n        <div class=\"point\" [class.error]=\"_stepPassword === 0\"\n          [class.warning]=\"_stepPassword === 1\"\n          [class.success]=\"_stepPassword === 2\">\n        </div>\n        <ng-container *ngIf=\"_stepPassword === 0\">\n          <ng-container *ngTemplateOutlet=\"stepPasswordLabel\"></ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex full-width align-items-center flex-column\">\n        <div class=\"point\" [class.warning]=\"_stepPassword === 1\"\n          [class.success]=\"_stepPassword === 2\"></div>\n        <ng-container *ngIf=\"_stepPassword === 1\">\n          <ng-container *ngTemplateOutlet=\"stepPasswordLabel\"></ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex full-width align-items-center flex-column\">\n        <div class=\"point\" [class.success]=\"_stepPassword === 2\"></div>\n        <ng-container *ngIf=\"_stepPassword === 2\">\n          <ng-container *ngTemplateOutlet=\"stepPasswordLabel\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"callbacks mt-2 row\">\n    <div class=\"col-sm-6 mt-2 d-flex justify-content-start\"\n      *ngFor=\"let validators of _validatorsPasswordPass\">\n      <monkey-icon *ngIf=\"validators.validate\" icon=\"check-circle-20\"></monkey-icon>\n      <monkey-icon *ngIf=\"!validators.validate\" icon=\"error-20\"></monkey-icon>\n      <span class=\"ml-2\">\n        {{ i18n?.TYPES?.[validators.regex] }}\n      </span>\n    </div>\n  </div>\n</ng-container>\n<ng-template #stepPasswordLabel>\n  <div class=\"name-point mt-1\" [class.error]=\"_stepPassword === 0\"\n    [class.warning]=\"_stepPassword === 1\" [class.success]=\"_stepPassword === 2\">\n    {{ i18n?.LABELS?.[_stepPassword] }}\n  </div>\n</ng-template>", styles: ["mecx-password-strength{margin-bottom:8px}mecx-password-strength .strength-bar{display:inline;list-style:none;padding:0;vertical-align:2px;gap:.5rem}mecx-password-strength .strength-bar .bar-label{font-style:normal;font-weight:400;font-size:14px;line-height:16px;color:#4b4a53;text-align:left}mecx-password-strength .strength-bar .point:last-child{margin:0}mecx-password-strength .callbacks{font-style:normal;font-weight:400;font-size:14px;line-height:16px;color:#72717e;text-align:left}mecx-password-strength .point{background:#ebebeb;border-radius:8px;display:inline-block;height:8px;margin-right:4px;width:100%}mecx-password-strength .point.success{background:var(--mecx-color-success-main)}mecx-password-strength .point.warning{background:var(--mecx-color-warning-main)}mecx-password-strength .point.error{background:var(--mecx-color-error-main)}mecx-password-strength .name-point.success{color:var(--mecx-color-success-main)}mecx-password-strength .name-point.warning{color:var(--mecx-color-warning-main)}mecx-password-strength .name-point.error{color:var(--mecx-color-error-main)}\n"], components: [{ type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+MECXPasswordStrengthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXPasswordStrengthComponent, selector: "mecx-password-strength", inputs: { passwordToCheck: "passwordToCheck", i18n: "i18n" }, outputs: { onHandleSubmitReady: "onHandleSubmitReady" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_validatorsPasswordPass?.length\">\n  <div id=\"strength\" class=\"d-flex full-width flex-column justify-content-center align-items-center\"\n    #strength>\n    <div id=\"strengthBar\" class=\"strength-bar d-flex full-width flex-row\">\n      <div class=\"d-flex full-width align-items-center\">\n        <div class=\"bar-label\">\n          <small>{{ i18n?.TITLE }}</small>\n        </div>\n      </div>\n      <div class=\"d-flex full-width align-items-center flex-column\">\n        <div class=\"point\" [class.error]=\"_stepPassword === 0\"\n          [class.warning]=\"_stepPassword === 1\"\n          [class.success]=\"_stepPassword === 2\">\n        </div>\n        <ng-container *ngIf=\"_stepPassword === 0\">\n          <ng-container *ngTemplateOutlet=\"stepPasswordLabel\"></ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex full-width align-items-center flex-column\">\n        <div class=\"point\" [class.warning]=\"_stepPassword === 1\"\n          [class.success]=\"_stepPassword === 2\"></div>\n        <ng-container *ngIf=\"_stepPassword === 1\">\n          <ng-container *ngTemplateOutlet=\"stepPasswordLabel\"></ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex full-width align-items-center flex-column\">\n        <div class=\"point\" [class.success]=\"_stepPassword === 2\"></div>\n        <ng-container *ngIf=\"_stepPassword === 2\">\n          <ng-container *ngTemplateOutlet=\"stepPasswordLabel\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"callbacks mt-2 row\">\n    <div class=\"col-sm-6 mt-2 d-flex justify-content-start\"\n      *ngFor=\"let validators of _validatorsPasswordPass\">\n      <monkey-icon *ngIf=\"validators.validate\" icon=\"check-circle-20\"></monkey-icon>\n      <monkey-icon *ngIf=\"!validators.validate\" icon=\"error-20\"></monkey-icon>\n      <span class=\"ml-2\">\n        {{ i18n?.TYPES?.[validators.regex] }}\n      </span>\n    </div>\n  </div>\n</ng-container>\n<ng-template #stepPasswordLabel>\n  <div class=\"name-point mt-1\" [class.error]=\"_stepPassword === 0\"\n    [class.warning]=\"_stepPassword === 1\" [class.success]=\"_stepPassword === 2\">\n    {{ i18n?.LABELS?.[_stepPassword] }}\n  </div>\n</ng-template>", styles: ["mecx-password-strength{margin-bottom:8px}mecx-password-strength .strength-bar{display:inline;list-style:none;padding:0;vertical-align:2px;gap:.5rem}mecx-password-strength .strength-bar .bar-label{font-style:normal;font-weight:400;font-size:14px;line-height:16px;color:#4b4a53;text-align:left}mecx-password-strength .strength-bar .point:last-child{margin:0}mecx-password-strength .callbacks{font-style:normal;font-weight:400;font-size:14px;line-height:16px;color:#72717e;text-align:left}mecx-password-strength .point{background:#ebebeb;border-radius:8px;display:inline-block;height:8px;margin-right:4px;width:100%}mecx-password-strength .point.success{background:var(--mecx-color-success-main)}mecx-password-strength .point.warning{background:var(--mecx-color-warning-main)}mecx-password-strength .point.error{background:var(--mecx-color-error-main)}mecx-password-strength .name-point.success{color:var(--mecx-color-success-main)}mecx-password-strength .name-point.warning{color:var(--mecx-color-warning-main)}mecx-password-strength .name-point.error{color:var(--mecx-color-error-main)}\n"], components: [{ type: i1$2.MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXPasswordStrengthComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-password-strength', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"_validatorsPasswordPass?.length\">\n  <div id=\"strength\" class=\"d-flex full-width flex-column justify-content-center align-items-center\"\n    #strength>\n    <div id=\"strengthBar\" class=\"strength-bar d-flex full-width flex-row\">\n      <div class=\"d-flex full-width align-items-center\">\n        <div class=\"bar-label\">\n          <small>{{ i18n?.TITLE }}</small>\n        </div>\n      </div>\n      <div class=\"d-flex full-width align-items-center flex-column\">\n        <div class=\"point\" [class.error]=\"_stepPassword === 0\"\n          [class.warning]=\"_stepPassword === 1\"\n          [class.success]=\"_stepPassword === 2\">\n        </div>\n        <ng-container *ngIf=\"_stepPassword === 0\">\n          <ng-container *ngTemplateOutlet=\"stepPasswordLabel\"></ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex full-width align-items-center flex-column\">\n        <div class=\"point\" [class.warning]=\"_stepPassword === 1\"\n          [class.success]=\"_stepPassword === 2\"></div>\n        <ng-container *ngIf=\"_stepPassword === 1\">\n          <ng-container *ngTemplateOutlet=\"stepPasswordLabel\"></ng-container>\n        </ng-container>\n      </div>\n      <div class=\"d-flex full-width align-items-center flex-column\">\n        <div class=\"point\" [class.success]=\"_stepPassword === 2\"></div>\n        <ng-container *ngIf=\"_stepPassword === 2\">\n          <ng-container *ngTemplateOutlet=\"stepPasswordLabel\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"callbacks mt-2 row\">\n    <div class=\"col-sm-6 mt-2 d-flex justify-content-start\"\n      *ngFor=\"let validators of _validatorsPasswordPass\">\n      <monkey-icon *ngIf=\"validators.validate\" icon=\"check-circle-20\"></monkey-icon>\n      <monkey-icon *ngIf=\"!validators.validate\" icon=\"error-20\"></monkey-icon>\n      <span class=\"ml-2\">\n        {{ i18n?.TYPES?.[validators.regex] }}\n      </span>\n    </div>\n  </div>\n</ng-container>\n<ng-template #stepPasswordLabel>\n  <div class=\"name-point mt-1\" [class.error]=\"_stepPassword === 0\"\n    [class.warning]=\"_stepPassword === 1\" [class.success]=\"_stepPassword === 2\">\n    {{ i18n?.LABELS?.[_stepPassword] }}\n  </div>\n</ng-template>", styles: ["mecx-password-strength{margin-bottom:8px}mecx-password-strength .strength-bar{display:inline;list-style:none;padding:0;vertical-align:2px;gap:.5rem}mecx-password-strength .strength-bar .bar-label{font-style:normal;font-weight:400;font-size:14px;line-height:16px;color:#4b4a53;text-align:left}mecx-password-strength .strength-bar .point:last-child{margin:0}mecx-password-strength .callbacks{font-style:normal;font-weight:400;font-size:14px;line-height:16px;color:#72717e;text-align:left}mecx-password-strength .point{background:#ebebeb;border-radius:8px;display:inline-block;height:8px;margin-right:4px;width:100%}mecx-password-strength .point.success{background:var(--mecx-color-success-main)}mecx-password-strength .point.warning{background:var(--mecx-color-warning-main)}mecx-password-strength .point.error{background:var(--mecx-color-error-main)}mecx-password-strength .name-point.success{color:var(--mecx-color-success-main)}mecx-password-strength .name-point.warning{color:var(--mecx-color-warning-main)}mecx-password-strength .name-point.error{color:var(--mecx-color-error-main)}\n"] }]
@@ -2898,7 +3064,7 @@ class MECXProgressBarComponent extends BaseComponent {
     }
 }
 MECXProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProgressBarComponent, deps: [{ token: MECXProgressBarService }], target: i0.ɵɵFactoryTarget.Component });
-MECXProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXProgressBarComponent, selector: "mecx-progress-bar", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"visible\">\n  <progress class=\"monkey-progress monkey-progress__theme\"></progress>\n</ng-container>", styles: ["app-progress-bar{position:absolute;width:100%;margin-top:-9.5px;z-index:99998}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+MECXProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXProgressBarComponent, selector: "mecx-progress-bar", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"visible\">\n  <progress class=\"monkey-progress monkey-progress__theme\"></progress>\n</ng-container>", styles: ["app-progress-bar{position:absolute;width:100%;margin-top:-9.5px;z-index:99998}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-progress-bar', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"visible\">\n  <progress class=\"monkey-progress monkey-progress__theme\"></progress>\n</ng-container>", styles: ["app-progress-bar{position:absolute;width:100%;margin-top:-9.5px;z-index:99998}\n"] }]
@@ -3062,7 +3228,7 @@ class MECXProductsComponent extends BaseComponent {
     }
 }
 MECXProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsComponent, deps: [{ token: i1$4.MonkeyEcxTokenStorageService }], target: i0.ɵɵFactoryTarget.Component });
-MECXProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXProductsComponent, selector: "mecx-products", outputs: { onAccess: "onAccess" }, usesInheritance: true, ngImport: i0, template: "<mecx-products-filter (onChangeFilter)=\"onHandleChangeFilter($event)\"></mecx-products-filter>\n<div class=\"products-list\">\n  <div *ngFor=\"let product of _filteredProducts\" class=\"product\">\n    <span class=\"title\" *ngIf=\"_hasMoreProducts\">{{ 'PRODUCTS.'+product.name | translate }}</span>\n    <div class=\"items\">\n      <div *ngFor=\"let item of product.items\" class=\"item\"\n        (click)=\"onAccess.next(item)\">\n        <div class=\"icon\">\n          <img [src]=\"item.logo\" #img (error)=\"onImgError(img)\">\n        </div>\n        <span class=\"name\">{{ item.name }}</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{display:flex;flex-direction:column;overflow:hidden}:host .products-list{display:flex;flex-direction:column;overflow:auto}:host .product{display:flex;flex-direction:column}:host .product .title{font-style:normal;font-weight:600;font-size:24px;line-height:32px;letter-spacing:.04em;color:#4b4a53;margin:32px 0}:host .product .items{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:10px;grid-row-gap:10px}:host .product .items .item{cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;padding:12px}:host .product .items .item .icon{margin:12px 0}:host .product .items .item .icon img{width:100%;max-width:140px}:host .product .items .item .icon .no-image{width:52px;height:52px}:host .product .items .item .name{font-style:normal;font-weight:400;font-size:18px;line-height:24px;color:#72717e;margin-top:8px}:host .product .items .item:hover{box-shadow:0 25px 52px 8px #eaeaeae0}\n"], components: [{ type: MECXProductsFilterComponent, selector: "mecx-products-filter", inputs: ["isLoading"], outputs: ["onChangeFilter"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$3.TranslatePipe } });
+MECXProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXProductsComponent, selector: "mecx-products", outputs: { onAccess: "onAccess" }, usesInheritance: true, ngImport: i0, template: "<mecx-products-filter (onChangeFilter)=\"onHandleChangeFilter($event)\"></mecx-products-filter>\n<div class=\"products-list\">\n  <div *ngFor=\"let product of _filteredProducts\" class=\"product\">\n    <span class=\"title\" *ngIf=\"_hasMoreProducts\">{{ 'PRODUCTS.'+product.name | translate }}</span>\n    <div class=\"items\">\n      <div *ngFor=\"let item of product.items\" class=\"item\"\n        (click)=\"onAccess.next(item)\">\n        <div class=\"icon\">\n          <img [src]=\"item.logo\" #img (error)=\"onImgError(img)\">\n        </div>\n        <span class=\"name\">{{ item.name }}</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{display:flex;flex-direction:column;overflow:hidden}:host .products-list{display:flex;flex-direction:column;overflow:auto}:host .product{display:flex;flex-direction:column}:host .product .title{font-style:normal;font-weight:600;font-size:24px;line-height:32px;letter-spacing:.04em;color:#4b4a53;margin:32px 0}:host .product .items{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:10px;grid-row-gap:10px}:host .product .items .item{cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;padding:12px}:host .product .items .item .icon{margin:12px 0}:host .product .items .item .icon img{width:100%;max-width:140px}:host .product .items .item .icon .no-image{width:52px;height:52px}:host .product .items .item .name{font-style:normal;font-weight:400;font-size:18px;line-height:24px;color:#72717e;margin-top:8px}:host .product .items .item:hover{box-shadow:0 25px 52px 8px #eaeaeae0}\n"], components: [{ type: MECXProductsFilterComponent, selector: "mecx-products-filter", inputs: ["isLoading"], outputs: ["onChangeFilter"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mecx-products', template: "<mecx-products-filter (onChangeFilter)=\"onHandleChangeFilter($event)\"></mecx-products-filter>\n<div class=\"products-list\">\n  <div *ngFor=\"let product of _filteredProducts\" class=\"product\">\n    <span class=\"title\" *ngIf=\"_hasMoreProducts\">{{ 'PRODUCTS.'+product.name | translate }}</span>\n    <div class=\"items\">\n      <div *ngFor=\"let item of product.items\" class=\"item\"\n        (click)=\"onAccess.next(item)\">\n        <div class=\"icon\">\n          <img [src]=\"item.logo\" #img (error)=\"onImgError(img)\">\n        </div>\n        <span class=\"name\">{{ item.name }}</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{display:flex;flex-direction:column;overflow:hidden}:host .products-list{display:flex;flex-direction:column;overflow:auto}:host .product{display:flex;flex-direction:column}:host .product .title{font-style:normal;font-weight:600;font-size:24px;line-height:32px;letter-spacing:.04em;color:#4b4a53;margin:32px 0}:host .product .items{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:10px;grid-row-gap:10px}:host .product .items .item{cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;padding:12px}:host .product .items .item .icon{margin:12px 0}:host .product .items .item .icon img{width:100%;max-width:140px}:host .product .items .item .icon .no-image{width:52px;height:52px}:host .product .items .item .name{font-style:normal;font-weight:400;font-size:18px;line-height:24px;color:#72717e;margin-top:8px}:host .product .items .item:hover{box-shadow:0 25px 52px 8px #eaeaeae0}\n"] }]