monkey-front-components 0.0.374 → 0.0.377

package/fesm2020/monkey-front-components.mjs

@@ -3,7 +3,7 @@ import * as i0 from '@angular/core';
 import { Directive, EventEmitter, Input, Output, Component, ViewEncapsulation, HostBinding, ViewChild, NgModule, Injectable } from '@angular/core';
 import { takeUntil, debounceTime, filter } from 'rxjs/operators';
 import * as i1$2 from 'monkey-style-guide';
-import { MonkeyUtils, MonkeyInputModule, MonkeySelectModule, MonkeyRadioButtonModule, MonkeyOptionModule, MonkeyFileUploadModule, MonkeyButtonModule, MonkeyInputPhoneModule, MonkeyBadgeModule, MonkeyIconModule, MonkeyCheckboxModule, MonkeyDateRangePickerModule } from 'monkey-style-guide';
+import { MonkeyUtils, MonkeyInputModule, MonkeySelectModule, MonkeyRadioButtonModule, MonkeyOptionModule, MonkeyFileUploadModule, MonkeyButtonModule, MonkeyInputPhoneModule, MonkeyBadgeModule, MonkeyCheckboxModule, MonkeyDateRangePickerModule, MonkeyIconModule } from 'monkey-style-guide';
 import * as i1$4 from 'monkey-front-core';
 import { MonkeyEcxCommonsService, ValidateUtils, Validators as Validators$1, MonkeyEcxUtils, MonkeyEcxDirectivesModule, MonkeyEcxPipesModule } from 'monkey-front-core';
 import * as i1 from '@angular/forms';
@@ -1486,6 +1486,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }] } });
 
+class MECXFilterSelectedItemInputComponent {
+    constructor() {
+        this.option = null;
+        this._value = null;
+    }
+    onHandleSelectedValue({ value }) {
+        this._value = value;
+    }
+    ngOnChanges(changes) {
+        if (changes.option) {
+            const { currentValue } = changes.option;
+            if (currentValue && JSON.stringify(currentValue) !== '{}') {
+                this.onHandleSelectedValue(currentValue);
+            }
+        }
+    }
+}
+MECXFilterSelectedItemInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MECXFilterSelectedItemInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemInputComponent, selector: "mecx-filter-selected-item-input", inputs: { option: "option" }, usesOnChanges: true, ngImport: i0, template: "{{ _value }}", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mecx-filter-selected-item-input', template: "{{ _value }}", styles: [""] }]
+        }], propDecorators: { option: [{
+                type: Input
+            }] } });
+
 class MECXFilterSelectedItemStatusComponent {
     constructor() {
         this.option = null;
@@ -1581,7 +1607,7 @@ class MECXFilterOptionsStatusComponent {
     ngOnInit() {
         const { eventHandle, onSubmit, option: { field } } = this;
         this.eventSubscription = eventHandle
-            .pipe(debounceTime(400))
+            .pipe(debounceTime(800))
             .subscribe((value) => {
             onSubmit.next({ [field]: value });
         });
@@ -1653,7 +1679,7 @@ class MECXFilterOptionsDateRangeComponent {
     ngOnInit() {
         const { eventHandle, onSubmit, option: { field } } = this;
         this.eventSubscription = eventHandle
-            .pipe(debounceTime(400))
+            .pipe(debounceTime(800))
             .subscribe((value) => {
             onSubmit.next({ [field]: value });
         });
@@ -1697,7 +1723,7 @@ class MECXFilterOptionsCurrencyComponent {
     ngOnInit() {
         const { eventHandle, onSubmit, option: { field } } = this;
         this.eventSubscription = eventHandle
-            .pipe(debounceTime(400))
+            .pipe(debounceTime(800))
             .subscribe((value) => {
             onSubmit.next({ [field]: value });
         });
@@ -1728,6 +1754,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Output
             }] } });
 
+class MECXFilterOptionsInputComponent {
+    constructor() {
+        this.option = null;
+        this.onSubmit = new EventEmitter();
+        this._value = '';
+        this.eventHandle = new EventEmitter();
+        // not to do
+    }
+    ngOnInit() {
+        const { eventHandle, onSubmit, option: { field } } = this;
+        this.eventSubscription = eventHandle
+            .pipe(debounceTime(800))
+            .subscribe((value) => {
+            onSubmit.next({ [field]: value });
+        });
+    }
+    ngOnDestroy() {
+        this.eventSubscription.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes.option) {
+            const { currentValue } = changes.option;
+            if (currentValue && JSON.stringify(currentValue) !== '{}') {
+                this._value = currentValue?.value;
+            }
+        }
+    }
+    onChangeFilter(value) {
+        this.eventHandle.next(value);
+    }
+}
+MECXFilterOptionsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MECXFilterOptionsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsInputComponent, selector: "mecx-filter-options-input", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<monkey-input type=\"text\" maxLength=\"255\" [(value)]=\"_value\"\n  (onChange)=\"onChangeFilter($event)\">\n</monkey-input>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;padding:12px 12px 8px;color:#72717e}:host .title{color:#4b4a53;font-size:18px;line-height:21px;font-weight:500;text-align:left;margin-bottom:4px}\n"], components: [{ 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", "percent", "maxDateToday", "value"], outputs: ["onChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mecx-filter-options-input', template: "<monkey-input type=\"text\" maxLength=\"255\" [(value)]=\"_value\"\n  (onChange)=\"onChangeFilter($event)\">\n</monkey-input>", styles: [":host{display:flex;flex-direction:column;max-width:232px;min-width:180px;padding:12px 12px 8px;color:#72717e}:host .title{color:#4b4a53;font-size:18px;line-height:21px;font-weight:500;text-align:left;margin-bottom:4px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { option: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }] } });
+
 class MECXFilterOptionsComponent {
     constructor() {
         this.option = null;
@@ -1767,10 +1835,10 @@ class MECXFilterOptionsComponent {
     }
 }
 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" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between header\">\n  <span class=\"title\">\n    {{ option?.label | translate }}\n  </span>\n  <div class=\"close\" #actionElement (click)=\"onHandleShowMenu()\">\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 [option]=\"option\" (onSubmit)=\"onHandleSubmitChildren($event)\"\n      (onShow)=\"onShowFromChildren.next($event)\">\n    </mecx-filter-options-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <ng-container [ngSwitch]=\"type\">\n      <mecx-filter-options-status *ngSwitchCase=\"'status'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-status>\n      <mecx-filter-options-date-range *ngSwitchCase=\"'date-range'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-date-range>\n      <mecx-filter-options-currency *ngSwitchCase=\"'currency'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-currency>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\">\n  <div class=\"close-menu\">\n    <monkey-button type=\"tertiary\" color=\"error\" (click)=\"onRemove.next()\" size=\"sm\">\n      {{ 'BUTTONS.REMOVE' | translate }}\n    </monkey-button>\n    <monkey-button type=\"tertiary\" color=\"theme\" (click)=\"onClose.next()\" size=\"sm\">\n      {{ 'BUTTONS.CLOSE' | translate }}\n    </monkey-button>\n  </div>\n</ng-container>", 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}.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: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsDateRangeComponent, selector: "mecx-filter-options-date-range", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsCurrencyComponent, selector: "mecx-filter-options-currency", 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" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between header\">\n  <span class=\"title\">\n    {{ option?.label | translate }}\n  </span>\n  <div class=\"close\" #actionElement (click)=\"onHandleShowMenu()\">\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 [option]=\"option\" (onSubmit)=\"onHandleSubmitChildren($event)\"\n      (onShow)=\"onShowFromChildren.next($event)\">\n    </mecx-filter-options-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <ng-container [ngSwitch]=\"type\">\n      <mecx-filter-options-status *ngSwitchCase=\"'status'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-status>\n      <mecx-filter-options-date-range *ngSwitchCase=\"'date-range'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-date-range>\n      <mecx-filter-options-currency *ngSwitchCase=\"'currency'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-currency>\n      <mecx-filter-options-input *ngSwitchCase=\"'input'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-input>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\">\n  <div class=\"close-menu\">\n    <monkey-button type=\"tertiary\" color=\"error\" (click)=\"onRemove.next()\" size=\"sm\">\n      {{ 'BUTTONS.REMOVE' | translate }}\n    </monkey-button>\n    <monkey-button type=\"tertiary\" color=\"theme\" (click)=\"onClose.next()\" size=\"sm\">\n      {{ 'BUTTONS.CLOSE' | translate }}\n    </monkey-button>\n  </div>\n</ng-container>", 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}.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: MECXFilterOptionsStatusComponent, selector: "mecx-filter-options-status", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsDateRangeComponent, selector: "mecx-filter-options-date-range", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsCurrencyComponent, selector: "mecx-filter-options-currency", inputs: ["option"], outputs: ["onSubmit"] }, { type: MECXFilterOptionsInputComponent, selector: "mecx-filter-options-input", 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 } });
 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 class=\"close\" #actionElement (click)=\"onHandleShowMenu()\">\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 [option]=\"option\" (onSubmit)=\"onHandleSubmitChildren($event)\"\n      (onShow)=\"onShowFromChildren.next($event)\">\n    </mecx-filter-options-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <ng-container [ngSwitch]=\"type\">\n      <mecx-filter-options-status *ngSwitchCase=\"'status'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-status>\n      <mecx-filter-options-date-range *ngSwitchCase=\"'date-range'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-date-range>\n      <mecx-filter-options-currency *ngSwitchCase=\"'currency'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-currency>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\">\n  <div class=\"close-menu\">\n    <monkey-button type=\"tertiary\" color=\"error\" (click)=\"onRemove.next()\" size=\"sm\">\n      {{ 'BUTTONS.REMOVE' | translate }}\n    </monkey-button>\n    <monkey-button type=\"tertiary\" color=\"theme\" (click)=\"onClose.next()\" size=\"sm\">\n      {{ 'BUTTONS.CLOSE' | translate }}\n    </monkey-button>\n  </div>\n</ng-container>", 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}.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 class=\"close\" #actionElement (click)=\"onHandleShowMenu()\">\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 [option]=\"option\" (onSubmit)=\"onHandleSubmitChildren($event)\"\n      (onShow)=\"onShowFromChildren.next($event)\">\n    </mecx-filter-options-children>\n  </ng-container>\n  <ng-template #withoutChildren>\n    <ng-container [ngSwitch]=\"type\">\n      <mecx-filter-options-status *ngSwitchCase=\"'status'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-status>\n      <mecx-filter-options-date-range *ngSwitchCase=\"'date-range'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-date-range>\n      <mecx-filter-options-currency *ngSwitchCase=\"'currency'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-currency>\n      <mecx-filter-options-input *ngSwitchCase=\"'input'\" [option]=\"option\"\n        (onSubmit)=\"onHandleSubmit($event)\">\n      </mecx-filter-options-input>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<ng-container\n  *monkeyecxPopover=\"_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'\">\n  <div class=\"close-menu\">\n    <monkey-button type=\"tertiary\" color=\"error\" (click)=\"onRemove.next()\" size=\"sm\">\n      {{ 'BUTTONS.REMOVE' | translate }}\n    </monkey-button>\n    <monkey-button type=\"tertiary\" color=\"theme\" (click)=\"onClose.next()\" size=\"sm\">\n      {{ 'BUTTONS.CLOSE' | translate }}\n    </monkey-button>\n  </div>\n</ng-container>", 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}.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: [{
@@ -1835,10 +1903,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 [option]=\"_option\" (onShow)=\"onHandleShowMenu()\"\n      (onRemove)=\"onHandleRemove()\">\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 class=\"value\" [id]=\"'mecx-filter-selected-item-'+_option?.field\"\n        (click)=\"onHandleShowMenu()\">\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-status *ngSwitchCase=\"'status'\" [option]=\"_option\"\n            [labelMoreValues]=\"'FIELD.AND-MORE' | translate\">\n          </mecx-filter-selected-item-status>\n        </ng-container>\n      </div>\n      <div class=\"action\" (click)=\"onHandleShowMenu()\">\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  <mecx-filter-options [option]=\"_option\" (onClose)=\"onHandleClose()\"\n    (onRemove)=\"onHandleRemove()\" (onSubmit)=\"onHandleSubmit($event)\"\n    (onShowFromChildren)=\"onHandleShowFromChildren($event)\">\n  </mecx-filter-options>\n</ng-container>", 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: MECXFilterSelectedItemStatusComponent, selector: "mecx-filter-selected-item-status", inputs: ["option", "labelMoreValues"] }, { 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 [option]=\"_option\" (onShow)=\"onHandleShowMenu()\"\n      (onRemove)=\"onHandleRemove()\">\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 class=\"value\" [id]=\"'mecx-filter-selected-item-'+_option?.field\"\n        (click)=\"onHandleShowMenu()\">\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-input *ngSwitchCase=\"'input'\" [option]=\"_option\">\n          </mecx-filter-selected-item-input>\n          <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n          </mecx-filter-selected-item-date-range>\n          <mecx-filter-selected-item-status *ngSwitchCase=\"'status'\" [option]=\"_option\"\n            [labelMoreValues]=\"'FIELD.AND-MORE' | translate\">\n          </mecx-filter-selected-item-status>\n        </ng-container>\n      </div>\n      <div class=\"action\" (click)=\"onHandleShowMenu()\">\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  <mecx-filter-options [option]=\"_option\" (onClose)=\"onHandleClose()\"\n    (onRemove)=\"onHandleRemove()\" (onSubmit)=\"onHandleSubmit($event)\"\n    (onShowFromChildren)=\"onHandleShowFromChildren($event)\">\n  </mecx-filter-options>\n</ng-container>", 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: MECXFilterSelectedItemInputComponent, selector: "mecx-filter-selected-item-input", inputs: ["option"] }, { type: MECXFilterSelectedItemDateRangeComponent, selector: "mecx-filter-selected-item-date-range", inputs: ["option"] }, { type: MECXFilterSelectedItemStatusComponent, selector: "mecx-filter-selected-item-status", inputs: ["option", "labelMoreValues"] }, { 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 } });
 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 [option]=\"_option\" (onShow)=\"onHandleShowMenu()\"\n      (onRemove)=\"onHandleRemove()\">\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 class=\"value\" [id]=\"'mecx-filter-selected-item-'+_option?.field\"\n        (click)=\"onHandleShowMenu()\">\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-status *ngSwitchCase=\"'status'\" [option]=\"_option\"\n            [labelMoreValues]=\"'FIELD.AND-MORE' | translate\">\n          </mecx-filter-selected-item-status>\n        </ng-container>\n      </div>\n      <div class=\"action\" (click)=\"onHandleShowMenu()\">\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  <mecx-filter-options [option]=\"_option\" (onClose)=\"onHandleClose()\"\n    (onRemove)=\"onHandleRemove()\" (onSubmit)=\"onHandleSubmit($event)\"\n    (onShowFromChildren)=\"onHandleShowFromChildren($event)\">\n  </mecx-filter-options>\n</ng-container>", 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 [option]=\"_option\" (onShow)=\"onHandleShowMenu()\"\n      (onRemove)=\"onHandleRemove()\">\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 class=\"value\" [id]=\"'mecx-filter-selected-item-'+_option?.field\"\n        (click)=\"onHandleShowMenu()\">\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-input *ngSwitchCase=\"'input'\" [option]=\"_option\">\n          </mecx-filter-selected-item-input>\n          <mecx-filter-selected-item-date-range *ngSwitchCase=\"'date-range'\" [option]=\"_option\">\n          </mecx-filter-selected-item-date-range>\n          <mecx-filter-selected-item-status *ngSwitchCase=\"'status'\" [option]=\"_option\"\n            [labelMoreValues]=\"'FIELD.AND-MORE' | translate\">\n          </mecx-filter-selected-item-status>\n        </ng-container>\n      </div>\n      <div class=\"action\" (click)=\"onHandleShowMenu()\">\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  <mecx-filter-options [option]=\"_option\" (onClose)=\"onHandleClose()\"\n    (onRemove)=\"onHandleRemove()\" (onSubmit)=\"onHandleSubmit($event)\"\n    (onShowFromChildren)=\"onHandleShowFromChildren($event)\">\n  </mecx-filter-options>\n</ng-container>", 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: [{
@@ -2148,75 +2216,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 class MECXFilterOptionsModule {
 }
 MECXFilterOptionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MECXFilterOptionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsModule, declarations: [MECXFilterOptionsComponent,
-        MECXFilterOptionsStatusComponent,
-        MECXFilterOptionsDateRangeComponent,
+MECXFilterOptionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsModule, declarations: [MECXFilterOptionsChildrenComponent,
+        MECXFilterOptionsComponent,
         MECXFilterOptionsCurrencyComponent,
-        MECXFilterOptionsChildrenComponent], imports: [MonkeyEcxDirectivesModule,
-        MonkeyButtonModule,
+        MECXFilterOptionsDateRangeComponent,
+        MECXFilterOptionsInputComponent,
+        MECXFilterOptionsStatusComponent], imports: [CommonModule,
+        FormsModule,
         MonkeyBadgeModule,
+        MonkeyButtonModule,
+        MonkeyCheckboxModule,
+        MonkeyDateRangePickerModule,
+        MonkeyEcxDirectivesModule,
         MonkeyIconModule,
         MonkeyInputModule,
-        MonkeyCheckboxModule,
-        MonkeySelectModule,
         MonkeyOptionModule,
-        MonkeyDateRangePickerModule,
-        RouterModule,
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule, i1$3.TranslateModule], exports: [MECXFilterOptionsComponent,
-        MECXFilterOptionsStatusComponent,
-        MECXFilterOptionsDateRangeComponent,
+        MonkeySelectModule,
+        ReactiveFormsModule,
+        RouterModule, i1$3.TranslateModule], exports: [MECXFilterOptionsChildrenComponent,
+        MECXFilterOptionsComponent,
         MECXFilterOptionsCurrencyComponent,
-        MECXFilterOptionsChildrenComponent] });
+        MECXFilterOptionsDateRangeComponent,
+        MECXFilterOptionsInputComponent,
+        MECXFilterOptionsStatusComponent] });
 MECXFilterOptionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsModule, imports: [[
-            MonkeyEcxDirectivesModule,
-            MonkeyButtonModule,
+            CommonModule,
+            FormsModule,
             MonkeyBadgeModule,
+            MonkeyButtonModule,
+            MonkeyCheckboxModule,
+            MonkeyDateRangePickerModule,
+            MonkeyEcxDirectivesModule,
             MonkeyIconModule,
             MonkeyInputModule,
-            MonkeyCheckboxModule,
-            MonkeySelectModule,
             MonkeyOptionModule,
-            MonkeyDateRangePickerModule,
-            RouterModule,
-            CommonModule,
-            FormsModule,
+            MonkeySelectModule,
             ReactiveFormsModule,
+            RouterModule,
             TranslateModule.forChild()
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
+                        MECXFilterOptionsChildrenComponent,
                         MECXFilterOptionsComponent,
-                        MECXFilterOptionsStatusComponent,
-                        MECXFilterOptionsDateRangeComponent,
                         MECXFilterOptionsCurrencyComponent,
-                        MECXFilterOptionsChildrenComponent
+                        MECXFilterOptionsDateRangeComponent,
+                        MECXFilterOptionsInputComponent,
+                        MECXFilterOptionsStatusComponent
                     ],
                     imports: [
-                        MonkeyEcxDirectivesModule,
-                        MonkeyButtonModule,
+                        CommonModule,
+                        FormsModule,
                         MonkeyBadgeModule,
+                        MonkeyButtonModule,
+                        MonkeyCheckboxModule,
+                        MonkeyDateRangePickerModule,
+                        MonkeyEcxDirectivesModule,
                         MonkeyIconModule,
                         MonkeyInputModule,
-                        MonkeyCheckboxModule,
-                        MonkeySelectModule,
                         MonkeyOptionModule,
-                        MonkeyDateRangePickerModule,
-                        RouterModule,
-                        CommonModule,
-                        FormsModule,
+                        MonkeySelectModule,
                         ReactiveFormsModule,
+                        RouterModule,
                         TranslateModule.forChild()
                     ],
                     exports: [
+                        MECXFilterOptionsChildrenComponent,
                         MECXFilterOptionsComponent,
-                        MECXFilterOptionsStatusComponent,
-                        MECXFilterOptionsDateRangeComponent,
                         MECXFilterOptionsCurrencyComponent,
-                        MECXFilterOptionsChildrenComponent
+                        MECXFilterOptionsDateRangeComponent,
+                        MECXFilterOptionsInputComponent,
+                        MECXFilterOptionsStatusComponent
                     ]
                 }]
         }] });
@@ -2284,42 +2356,43 @@ class MECXFilterSelectedModule {
 }
 MECXFilterSelectedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MECXFilterSelectedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedModule, declarations: [MECXFilterSelectedComponent,
+        MECXFilterSelectedItemChildrenComponent,
         MECXFilterSelectedItemComponent,
         MECXFilterSelectedItemCurrencyComponent,
         MECXFilterSelectedItemDateRangeComponent,
-        MECXFilterSelectedItemStatusComponent,
         MECXFilterSelectedItemDateWithActionComponent,
-        MECXFilterSelectedItemChildrenComponent], imports: [MonkeyEcxPipesModule,
-        MonkeyEcxDirectivesModule,
-        MonkeyButtonModule,
+        MECXFilterSelectedItemInputComponent,
+        MECXFilterSelectedItemStatusComponent], imports: [CommonModule,
+        FormsModule,
+        MECXFilterOptionsModule,
         MonkeyBadgeModule,
+        MonkeyButtonModule,
+        MonkeyCheckboxModule,
+        MonkeyDateRangePickerModule,
+        MonkeyEcxDirectivesModule,
+        MonkeyEcxPipesModule,
         MonkeyIconModule,
         MonkeyInputModule,
-        MonkeyCheckboxModule,
-        MonkeySelectModule,
         MonkeyOptionModule,
-        MonkeyDateRangePickerModule,
-        RouterModule,
-        CommonModule,
-        FormsModule,
+        MonkeySelectModule,
         ReactiveFormsModule,
-        MECXFilterOptionsModule, i1$3.TranslateModule], exports: [MECXFilterSelectedComponent] });
+        RouterModule, i1$3.TranslateModule], exports: [MECXFilterSelectedComponent] });
 MECXFilterSelectedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedModule, imports: [[
-            MonkeyEcxPipesModule,
-            MonkeyEcxDirectivesModule,
-            MonkeyButtonModule,
+            CommonModule,
+            FormsModule,
+            MECXFilterOptionsModule,
             MonkeyBadgeModule,
+            MonkeyButtonModule,
+            MonkeyCheckboxModule,
+            MonkeyDateRangePickerModule,
+            MonkeyEcxDirectivesModule,
+            MonkeyEcxPipesModule,
             MonkeyIconModule,
             MonkeyInputModule,
-            MonkeyCheckboxModule,
-            MonkeySelectModule,
             MonkeyOptionModule,
-            MonkeyDateRangePickerModule,
-            RouterModule,
-            CommonModule,
-            FormsModule,
+            MonkeySelectModule,
             ReactiveFormsModule,
-            MECXFilterOptionsModule,
+            RouterModule,
             TranslateModule.forChild()
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedModule, decorators: [{
@@ -2327,29 +2400,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             args: [{
                     declarations: [
                         MECXFilterSelectedComponent,
+                        MECXFilterSelectedItemChildrenComponent,
                         MECXFilterSelectedItemComponent,
                         MECXFilterSelectedItemCurrencyComponent,
                         MECXFilterSelectedItemDateRangeComponent,
-                        MECXFilterSelectedItemStatusComponent,
                         MECXFilterSelectedItemDateWithActionComponent,
-                        MECXFilterSelectedItemChildrenComponent
+                        MECXFilterSelectedItemInputComponent,
+                        MECXFilterSelectedItemStatusComponent
                     ],
                     imports: [
-                        MonkeyEcxPipesModule,
-                        MonkeyEcxDirectivesModule,
-                        MonkeyButtonModule,
+                        CommonModule,
+                        FormsModule,
+                        MECXFilterOptionsModule,
                         MonkeyBadgeModule,
+                        MonkeyButtonModule,
+                        MonkeyCheckboxModule,
+                        MonkeyDateRangePickerModule,
+                        MonkeyEcxDirectivesModule,
+                        MonkeyEcxPipesModule,
                         MonkeyIconModule,
                         MonkeyInputModule,
-                        MonkeyCheckboxModule,
-                        MonkeySelectModule,
                         MonkeyOptionModule,
-                        MonkeyDateRangePickerModule,
-                        RouterModule,
-                        CommonModule,
-                        FormsModule,
+                        MonkeySelectModule,
                         ReactiveFormsModule,
-                        MECXFilterOptionsModule,
+                        RouterModule,
                         TranslateModule.forChild()
                     ],
                     exports: [MECXFilterSelectedComponent]