monkey-front-components 0.0.383 → 0.0.384

package/fesm2020/monkey-front-components.mjs

@@ -1,2859 +0,0 @@
-import { Subject, BehaviorSubject } from 'rxjs';
-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, 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';
-import { Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 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';
-import * as i1$3 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-class BaseComponent {
-    constructor() {
-        this.__paginationOptions = null;
-        this.__isMobile = this.isMobile();
-        this.__locales = ['pt-BR', 'es-CL'];
-        this.__unsubscribeAll = new Subject();
-    }
-    isMobile() {
-        const isMobileWidth = (window.screen.width <= 640) ||
-            (window.matchMedia &&
-                window.matchMedia('only screen and (max-width: 640px)').matches);
-        return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile/i.test(navigator.userAgent)) || isMobileWidth;
-    }
-    handlePagination(create = true) {
-        const { __paginationOptions } = this;
-        if (__paginationOptions) {
-            const { mainElement, service } = __paginationOptions;
-            const element = document.getElementById(mainElement);
-            if (element) {
-                element.scroll = null;
-                element.onscroll = null;
-                element.removeEventListener('scroll', element.eventListeners('scroll'));
-                element.removeEventListener('scroll', element.eventListeners('scroll')[0]);
-                if (create) {
-                    element.addEventListener('scroll', () => {
-                        const { scrollTop, scrollHeight, offsetHeight } = element;
-                        const contentHeight = scrollHeight - offsetHeight;
-                        if (contentHeight <= scrollTop) {
-                            service.doPagination();
-                        }
-                    });
-                }
-            }
-        }
-    }
-    handleSupport(supportControls) {
-        const { service, show } = supportControls;
-        const method = show ? 'show' : 'hide';
-        service[method.toLowerCase()]();
-    }
-    handleTranslate(translateOptions) {
-        const { service } = translateOptions;
-        service.__oni18nDataChanged$
-            .pipe(takeUntil(this.__unsubscribeAll))
-            .subscribe(() => {
-            const data = service.__i18n;
-            if (data) {
-                this.__i18n = data;
-            }
-        });
-    }
-    handleViewScroll(options) {
-        const { elementId, service } = options;
-        if (elementId === service?.__savedState?.scrollElementId) {
-            this.goScroll(elementId);
-            service.__savedState.scrollElementId = null;
-        }
-    }
-    getErrorFirstMessageTranslated(formControl = null) {
-        if (formControl?.hasError('required'))
-            return 'FIELD-REQUIRED';
-        if (formControl?.hasError('invalid'))
-            return 'FIELD-INVALID';
-        if (formControl?.hasError('email'))
-            return 'INVALID-EMAIL';
-        if (formControl?.hasError('minlength'))
-            return 'MIN-LENGTH';
-        if (formControl?.hasError('maxlength'))
-            return 'MAX-LENGTH';
-        if (formControl?.hasError('max'))
-            return 'MAX';
-        if (formControl?.hasError('min'))
-            return 'MIN';
-        if (formControl?.hasError('passwordsNotMatching'))
-            return 'MATCH-PASSWORD';
-        if (formControl?.hasError('invalidDate'))
-            return 'INVALID-DATE';
-        if (formControl?.hasError('invalidTrue'))
-            return 'INVALID-TRUE';
-        if (formControl?.hasError('invalidCpfCnpj'))
-            return 'INVALID-DOCUMENT';
-        if (formControl?.hasError('invalidZipCode'))
-            return 'INVALID-ZIPCODE';
-        if (formControl?.hasError('invalidCombo'))
-            return 'INVALID-COMBO';
-        if (formControl?.hasError('invalidUrl'))
-            return 'INVALID-URL';
-        if (formControl?.hasError('invalidUnlockRegister')) {
-            return 'INVALID-UNLOCK-REGISTER';
-        }
-        if (formControl?.hasError('dateStartMustBeLessThanAnd')) {
-            return 'DATE-START-MUST-BE-LESS-THAN-AND';
-        }
-        if (formControl?.hasError('dateEndMustBeGreaterThanStart')) {
-            return 'DATE-END-MUST-BE-GREATER-THAN-SART';
-        }
-        if (formControl?.hasError('phone'))
-            return 'INVALID-PHONE';
-        if (formControl?.hasError('invalidValueGreaterThanZero'))
-            return 'INVALID-GREATER-THAN-ZERO';
-        return 'FIELD-INVALID';
-    }
-    getErrorLastMessageNotTranslated(formControl = null) {
-        if (formControl?.hasError('minlength')) {
-            return `${formControl?.getError('minlength').requiredLength} caracteres.`;
-        }
-        if (formControl?.hasError('maxlength')) {
-            return `${formControl?.getError('maxlength').requiredLength} caracteres.`;
-        }
-        if (formControl?.hasError('max')) {
-            return `${formControl?.getError('max').max}`;
-        }
-        if (formControl?.hasError('min')) {
-            return `${formControl?.getError('min').min}`;
-        }
-        return '';
-    }
-    validateFormWithTranslate(f, index) {
-        const formErrors = f.value;
-        if (f.status === 'VALID')
-            return true;
-        if (!formErrors)
-            return true;
-        Object.entries(formErrors).forEach(([key, value]) => {
-            const control = f.get(key);
-            formErrors[key] = '';
-            if (control && !control.valid) {
-                const msg = {
-                    first: `ERRORS.${this.getErrorFirstMessageTranslated(f.get(key))}`,
-                    last: this.getErrorLastMessageNotTranslated(f.get(key))
-                };
-                formErrors[key] = msg;
-            }
-        });
-        if (MonkeyUtils.persistNullEmptyUndefined(index)) {
-            this.__monkeyecxFormErrors[index || 0] = formErrors;
-        }
-        else {
-            this.__monkeyecxFormErrors = formErrors;
-        }
-        return false;
-    }
-    copyToClipboard(val) {
-        const selBox = document.createElement('textarea');
-        selBox.style.position = 'fixed';
-        selBox.style.left = '0';
-        selBox.style.top = '0';
-        selBox.style.opacity = '0';
-        selBox.value = val;
-        document.body.appendChild(selBox);
-        selBox.focus();
-        selBox.select();
-        document.execCommand('copy');
-        document.body.removeChild(selBox);
-    }
-    validateForm(f, index, alias) {
-        const formErrors = f.value;
-        if (f.status === 'VALID')
-            return true;
-        if (!formErrors)
-            return true;
-        Object.entries(formErrors).forEach(([key, value]) => {
-            const control = f.get(key);
-            formErrors[key] = '';
-            if (control && !control.valid) {
-                const msg = {
-                    firstMessage: `ERRORS.${this.getErrorFirstMessageTranslated(f.get(key))}`,
-                    lastMessage: this.getErrorLastMessageNotTranslated(f.get(key))
-                };
-                formErrors[key] = msg;
-            }
-        });
-        if (MonkeyUtils.persistNullEmptyUndefined(index)) {
-            this.__monkeyecxFormErrors[index || 0] = formErrors;
-        }
-        else {
-            let obj;
-            if (alias) {
-                obj = {
-                    [alias]: {
-                        ...formErrors
-                    }
-                };
-            }
-            else {
-                obj = formErrors;
-            }
-            this.__monkeyecxFormErrors = {
-                ...this.__monkeyecxFormErrors,
-                ...obj
-            };
-        }
-        f.markAllAsTouched();
-        return false;
-    }
-    clearAllServiceData(clearData) {
-        const context = this;
-        Object.values(context).forEach((ctx) => {
-            if (ctx instanceof MonkeyEcxCommonsService) {
-                ctx.clear(clearData);
-            }
-        });
-    }
-    ngOnInit(args) {
-        if (args?.paginationOptions) {
-            this.__paginationOptions = args?.paginationOptions;
-            this.handlePagination();
-        }
-        if (args?.supportControls) {
-            this.handleSupport(args?.supportControls);
-        }
-        if (args?.translateOptions) {
-            this.handleTranslate(args?.translateOptions);
-        }
-        if (args?.scrollOptions) {
-            this.handleViewScroll(args.scrollOptions);
-        }
-    }
-    ngOnDestroy(clearData = true) {
-        this.__unsubscribeAll.next();
-        this.__unsubscribeAll.complete();
-        this.clearAllServiceData(clearData);
-        this.handlePagination(false);
-    }
-    handleErrorFromServices(error, f) {
-        this.__monkeyecxFormErrors = null;
-        if (error.type === 'Parameter_Error') {
-            Object.entries(f.value).forEach(([key, value]) => {
-                error.notifications.forEach((_) => {
-                    const field = _.split(':')[0];
-                    const description = _.split(':')[1];
-                    if (field === key) {
-                        const msg = {
-                            firstMessage: '',
-                            lastMessage: description
-                        };
-                        this.__monkeyecxFormErrors = {
-                            ...this.__monkeyecxFormErrors,
-                            [key]: msg
-                        };
-                        f.controls[key].setErrors({
-                            incorrect: true
-                        });
-                    }
-                });
-            });
-        }
-        f.markAllAsTouched();
-    }
-    goBack() {
-        window.history.back();
-    }
-    goScroll(id) {
-        const element = document.getElementById(id);
-        if (element)
-            element.scrollIntoView();
-    }
-    getEmbeddedData(data, field) {
-        const { _embedded } = data;
-        return _embedded ? _embedded[field] : null;
-    }
-    openWindow(url) {
-        window.open(`${url}`, '_blank');
-    }
-    fillI18n(data) {
-        this.__i18n = data;
-    }
-    getCountryPrefix(country) {
-        return {
-            br: 55,
-            cl: 56
-        }[country];
-    }
-    getCountryCurrencyChartFormat(country) {
-        return {
-            br: 'R$ #,###,##0.00',
-            cl: 'CLP #,###,##0'
-        }[country];
-    }
-    getCountryValidators(country) {
-        return {
-            br: {
-                governmentId: ValidateUtils.DocumentValidator
-            },
-            cl: {
-                governmentId: ValidateUtils.DocumentRutValidator
-            }
-        }[country];
-    }
-    isAbleToHandlePagination() {
-        const { __paginationOptions } = this;
-        if (__paginationOptions) {
-            const { service } = __paginationOptions;
-            const links = service.__links;
-            if (links && links?.next)
-                return true;
-        }
-        return false;
-    }
-    onHandlePagination() {
-        const { __paginationOptions } = this;
-        if (__paginationOptions) {
-            const { service } = __paginationOptions;
-            service.doPagination();
-        }
-    }
-}
-BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseComponent, selector: "[baseComponent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[baseComponent]'
-                }]
-        }], ctorParameters: function () { return []; } });
-
-const validators = {
-    required: Validators.required,
-    email: Validators$1.email,
-    governmentId: Validators$1.documentBR,
-    governmentIdRut: Validators$1.documentCL,
-    documentBR: Validators$1.documentBR,
-    documentCL: Validators$1.documentCL,
-    date: Validators$1.date,
-    zipCode: Validators$1.zipCode,
-    minLength: (param) => {
-        return Validators.minLength(param);
-    },
-    maxLength: (param) => {
-        return Validators.maxLength(param);
-    }
-};
-
-class BaseDynamicArray extends BaseComponent {
-    constructor(fb) {
-        super();
-        this.fb = fb;
-        this.onHandleSubmit = new EventEmitter();
-        this.onHandleUpdateForm = new EventEmitter();
-        this.onHandleSubmitFormReady = new EventEmitter();
-        this.fields = [];
-        this.qtd = 1;
-        this.disabled = false;
-        this._form = null;
-        // eslint-disable-next-line object-curly-newline
-        this._plusValidations = [];
-        this.changesUnsubscribe = new Subject();
-        this.formBase = () => {
-            // return this.fb.group(this.createControl());
-            return this.createControl();
-        };
-    }
-    handleInternalPlusValidation(mainField, data) {
-        const { operator, field, value } = mainField;
-        const validators = {
-            e: (val1, val2) => { return val1 === val2; },
-            lt: (val1, val2) => { return val1 < val2; },
-            gt: (val1, val2) => { return val1 > val2; }
-        };
-        return validators[operator](data?.[field] || data, value);
-    }
-    makeInternalPlusValidation(data, sourceField, settings, rowIndex) {
-        const changeFields = (show) => {
-            const saved = [...this.fields];
-            saved.map((val) => {
-                const valSaved = {
-                    ...val
-                };
-                if (val.name === sourceField) {
-                    this._plusValidations[rowIndex] = {
-                        [sourceField]: {
-                            ...valSaved,
-                            alwaysShow: show
-                        }
-                    };
-                    this.createOneControl(val.name, this.formValues?.controls[rowIndex], show);
-                }
-                else {
-                    this._plusValidations[rowIndex] = {
-                        ...valSaved
-                    };
-                }
-                return null;
-            });
-        };
-        const validated = this.handleInternalPlusValidation(settings, data);
-        changeFields(validated);
-    }
-    createOneControl(fieldName, ctrl, create = true) {
-        const { fields } = this;
-        if (!fields)
-            return;
-        fields.forEach((field) => {
-            const { fieldType, validations, name, disabled } = field;
-            if (name !== fieldName)
-                return;
-            let { value } = field;
-            if (fieldType === 'button')
-                return;
-            if (fieldType === 'radiobutton' || fieldType === 'checkbox' || fieldType === 'select') {
-                value = '';
-            }
-            if (create) {
-                const control = this.fb.control(value, this.bindValidations(validations || []));
-                if (disabled || this.disabled)
-                    control.disable();
-                ctrl.addControl(name, control);
-            }
-            else {
-                ctrl.removeControl(name);
-            }
-        });
-    }
-    createControl(data) {
-        const { fields } = this;
-        if (!fields)
-            return null;
-        // eslint-disable-next-line object-curly-newline
-        const group = this.fb.group({});
-        fields.forEach((field) => {
-            const { fieldType, validations, name, disabled, alwaysShow } = field;
-            let { value } = field;
-            if (field.alwaysShowPlusValidation) {
-                if (!this.handleInternalPlusValidation(field.alwaysShowPlusValidation, data))
-                    return;
-            }
-            else if (!alwaysShow)
-                return;
-            if (fieldType === 'button')
-                return;
-            if (fieldType === 'radiobutton' || fieldType === 'checkbox' || fieldType === 'select') {
-                value = '';
-            }
-            const control = this.fb.control(value, this.bindValidations(validations || []));
-            if (disabled || this.disabled)
-                control.disable();
-            group.addControl(name, control);
-        });
-        return group;
-    }
-    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.compose(validList);
-        }
-        return null;
-    }
-    buildForm() {
-        const form = this.fb.group({
-            fields: this.fb.array([])
-        });
-        form?.controls.fields?.valueChanges.subscribe((_) => {
-            this.watchForChanges();
-        });
-        return form;
-    }
-    watchForChanges() {
-        const { fields, changesUnsubscribe } = this;
-        changesUnsubscribe.next();
-        this.formValues?.controls?.map((control, index) => {
-            fields.forEach((fieldConfig) => {
-                const { name, alwaysShowPlusValidation } = fieldConfig;
-                if (!alwaysShowPlusValidation)
-                    return;
-                const { field } = alwaysShowPlusValidation;
-                if (field) {
-                    control.controls[field]?.valueChanges.pipe(takeUntil(changesUnsubscribe)).subscribe((_) => {
-                        this.makeInternalPlusValidation(_, name, alwaysShowPlusValidation, index);
-                    });
-                }
-            });
-            return null;
-        });
-    }
-    get formValues() {
-        return this._form ? this._form.get('fields') : null;
-    }
-    fillValues() {
-        const { data, qtd } = this;
-        if ((!this._form) && qtd)
-            return;
-        if (qtd > 0) {
-            Array(qtd)
-                .fill(null)
-                .map((_, index) => {
-                let form = this.createControl();
-                if (data && data[index]) {
-                    form = this.createControl(data[index]);
-                    const handledData = data[index];
-                    Object.entries(handledData).forEach(([key, value]) => {
-                        if (MonkeyUtils.persistNullEmptyUndefined(value) && form?.controls[key]) {
-                            form?.controls[key].setValue(value);
-                        }
-                    });
-                }
-                this.formValues?.push(form);
-                return null;
-            });
-        }
-    }
-    ngOnInit() {
-        this._form = this.buildForm();
-        this.fillValues();
-        this.onHandleUpdateForm.subscribe(() => {
-            this.fillValues();
-        });
-    }
-    ngOnChanges() {
-        if (!this._form) {
-            this._form = this.buildForm();
-        }
-        this.fillValues();
-    }
-}
-BaseDynamicArray.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseDynamicArray, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
-BaseDynamicArray.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseDynamicArray, selector: "[baseDynamicArray]", inputs: { onHandleSubmit: "onHandleSubmit", onHandleUpdateForm: "onHandleUpdateForm", self: "self", fields: "fields", data: "data", qtd: "qtd", disabled: "disabled" }, outputs: { onHandleSubmitFormReady: "onHandleSubmitFormReady" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseDynamicArray, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[baseDynamicArray]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { onHandleSubmit: [{
-                type: Input
-            }], onHandleUpdateForm: [{
-                type: Input
-            }], onHandleSubmitFormReady: [{
-                type: Output
-            }], self: [{
-                type: Input
-            }], fields: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], qtd: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
-
-class BaseDynamic extends BaseComponent {
-    constructor(fb) {
-        super();
-        this.fb = fb;
-        this.onHandleSubmit = new EventEmitter();
-        this.onHandleUpdateForm = new EventEmitter();
-        this.onHandleSubmitFormReady = new EventEmitter();
-        this.fields = [];
-        this.disabled = false;
-        this._form = null;
-    }
-    createControl() {
-        const { fields } = this;
-        if (!fields)
-            return null;
-        // eslint-disable-next-line object-curly-newline
-        const group = this.fb.group({});
-        fields.forEach((field) => {
-            const { fieldType, validations, name, disabled } = field;
-            let { value } = field;
-            if (fieldType === 'button')
-                return;
-            if (fieldType === 'radiobutton' || fieldType === 'checkbox' || fieldType === 'select') {
-                value = '';
-            }
-            const control = this.fb.control(value, this.bindValidations(validations || []));
-            if (disabled || this.disabled)
-                control.disable();
-            group.addControl(name, control);
-        });
-        return group;
-    }
-    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.compose(validList);
-        }
-        return null;
-    }
-    fillValues() {
-        const { data } = this;
-        if (!data || !this._form)
-            return;
-        Object.entries(data).forEach(([key, value]) => {
-            if (MonkeyUtils.persistNullEmptyUndefined(value) && this._form?.controls[key]) {
-                this._form?.controls[key]?.setValue(value);
-            }
-        });
-    }
-    ngOnInit() {
-        this._form = this.createControl();
-        this.fillValues();
-        this.onHandleUpdateForm.subscribe(() => {
-            this.fillValues();
-        });
-    }
-    ngOnChanges() {
-        if (!this._form) {
-            this._form = this.createControl();
-        }
-        this.fillValues();
-    }
-}
-BaseDynamic.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseDynamic, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
-BaseDynamic.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseDynamic, selector: "[baseDynamic]", inputs: { onHandleSubmit: "onHandleSubmit", onHandleUpdateForm: "onHandleUpdateForm", self: "self", fields: "fields", data: "data", disabled: "disabled" }, outputs: { onHandleSubmitFormReady: "onHandleSubmitFormReady" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseDynamic, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[baseDynamic]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { onHandleSubmit: [{
-                type: Input
-            }], onHandleUpdateForm: [{
-                type: Input
-            }], onHandleSubmitFormReady: [{
-                type: Output
-            }], self: [{
-                type: Input
-            }], fields: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
-
-class BaseScrollComponent extends BaseComponent {
-    constructor(_pId, _rt) {
-        super();
-        this._pId = _pId;
-        this._rt = _rt;
-        this.routeScrollPositions = {};
-    }
-    saveScroll(url) {
-        const element = document.getElementById('container-3');
-        this.routeScrollPositions[url] = element.scrollTop;
-    }
-    restoreScroll(url) {
-        const savedScroll = this.routeScrollPositions[url];
-        const element = document.getElementById('container-3');
-        if (!savedScroll) {
-            return;
-        }
-        element.scrollTop = savedScroll;
-    }
-    addScrollTopListeners() {
-        if ('scrollRestoration' in history) {
-            history.scrollRestoration = 'manual';
-        }
-        this._rt.events.subscribe(event => {
-            if (event instanceof NavigationStart) {
-                this.saveScroll(this._rt.url);
-            }
-            else if (event instanceof NavigationEnd) {
-                setTimeout(() => {
-                    this.restoreScroll(event.url);
-                });
-            }
-        });
-    }
-    ngOnInit() {
-        if (isPlatformBrowser(this._pId)) {
-            this.addScrollTopListeners();
-        }
-    }
-}
-BaseScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseScrollComponent, deps: [{ token: Object }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Directive });
-BaseScrollComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BaseScrollComponent, selector: "[baseScrollComponent]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BaseScrollComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[baseScrollComponent]'
-                }]
-        }], ctorParameters: function () { return [{ type: Object }, { type: i1$1.Router }]; } });
-
-class MECXDynamicFileUploadComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        // eslint-disable-next-line object-curly-newline
-        this._formErrors = {};
-        this._function = (file, callback) => {
-            if (this._form?.disabled)
-                return;
-            if (!this._field?.functions?.onHandleUpload) {
-                console.error('onHandleUpload not declared');
-                return;
-            }
-            const { func, type } = this._field?.functions?.onHandleUpload;
-            if (!func || !this.self[func]) {
-                console.error('onHandleUpload not declared');
-                return;
-            }
-            this.self[func](file, type, callback);
-        };
-        // not to do
-    }
-    get className() {
-        return this._field?.style?.class;
-    }
-    ngOnChanges() {
-        this.cdr.detectChanges();
-    }
-}
-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", "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 });
-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>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _field: [{
-                type: Input
-            }], _form: [{
-                type: Input
-            }], _formErrors: [{
-                type: Input
-            }], self: [{
-                type: Input
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class MECXDynamicButtonComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this._field = null;
-        this._form = null;
-        // eslint-disable-next-line object-curly-newline
-        this._formErrors = {};
-        // not to do
-    }
-    get className() {
-        return this._field?.style?.class;
-    }
-    ngOnChanges() {
-        this.cdr.detectChanges();
-    }
-    onClick() {
-        const { _form, _field, self } = this;
-        if (_form?.disabled || !_field)
-            return;
-        const { name, value } = _field;
-        const func = _field?.functions?.onClick;
-        if (func) {
-            self[func]({
-                name,
-                value,
-                form: _form
-            });
-        }
-    }
-}
-MECXDynamicButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicButtonComponent, selector: "mecx-dynamic-button", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors", self: "self" }, host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<monkey-button [icon]=\"_field?.icon\" [type]=\"_field?.type\" [color]=\"_field?.color\"\n  (click)=\"onClick()\">\n  {{ _field?.label | translate }}\n</monkey-button>", styles: ["mecx-dynamic-button monkey-button button{height:40px}\n"], components: [{ type: i1$2.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], pipes: { "translate": i1$3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-dynamic-button', encapsulation: ViewEncapsulation.None, template: "<monkey-button [icon]=\"_field?.icon\" [type]=\"_field?.type\" [color]=\"_field?.color\"\n  (click)=\"onClick()\">\n  {{ _field?.label | translate }}\n</monkey-button>", styles: ["mecx-dynamic-button monkey-button button{height:40px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _field: [{
-                type: Input
-            }], _form: [{
-                type: Input
-            }], _formErrors: [{
-                type: Input
-            }], self: [{
-                type: Input
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class MECXDynamicInputComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this._field = null;
-        this._form = null;
-        // eslint-disable-next-line object-curly-newline
-        this._formErrors = {};
-        this.inputElement = null;
-        // not to do
-    }
-    get className() {
-        return this._field?.style?.class;
-    }
-    ngOnInit() {
-        this.cdr.detectChanges();
-    }
-    ngOnChanges() {
-        this.cdr.detectChanges();
-    }
-    onChange(event) {
-        const { _form, _field, self } = this;
-        if (!_field || !_form)
-            return;
-        const { name } = _field;
-        const func = _field?.functions?.onChange;
-        const isValid = _form?.get(_field?.name)?.valid;
-        if (func) {
-            self[func]({
-                name,
-                isValid,
-                event,
-                ctrl: _form.get(this._field?.name),
-                form: _form
-            });
-        }
-    }
-}
-MECXDynamicInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicInputComponent, selector: "mecx-dynamic-input", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors", self: "self" }, host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<monkey-input\r\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\r\n  [mask]=\"_field?.mask\" [prefix]=\"_field?.prefix\" [name]=\"_field?.name\"\r\n  [formControl]=\"_form.controls[_field?.name]\" [placeholder]=\"_field?.placeholder | translate\"\r\n  [helperMessage]=\"_field?.helperMessage | translate\" [label]=\"_field?.label | translate\"\r\n  [type]=\"_field?.type\" #inputElement (onChange)=\"onChange($event)\"\r\n  [onlyNumber]=\"_field?.onlyNumber\" [currency]=\"_field?.currency\" [maxLength]=\"_field?.maxLength\"\r\n  [maxDateToday]=\"_field?.maxDateToday\">\r\n</monkey-input>", 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"] }], directives: [{ 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: MECXDynamicInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-dynamic-input', encapsulation: ViewEncapsulation.None, template: "<monkey-input\r\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\r\n  [mask]=\"_field?.mask\" [prefix]=\"_field?.prefix\" [name]=\"_field?.name\"\r\n  [formControl]=\"_form.controls[_field?.name]\" [placeholder]=\"_field?.placeholder | translate\"\r\n  [helperMessage]=\"_field?.helperMessage | translate\" [label]=\"_field?.label | translate\"\r\n  [type]=\"_field?.type\" #inputElement (onChange)=\"onChange($event)\"\r\n  [onlyNumber]=\"_field?.onlyNumber\" [currency]=\"_field?.currency\" [maxLength]=\"_field?.maxLength\"\r\n  [maxDateToday]=\"_field?.maxDateToday\">\r\n</monkey-input>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _field: [{
-                type: Input
-            }], _form: [{
-                type: Input
-            }], _formErrors: [{
-                type: Input
-            }], self: [{
-                type: Input
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['inputElement', {
-                        static: true
-                    }]
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class MECXDynamicInputPhoneComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this._field = null;
-        this._form = null;
-        // eslint-disable-next-line object-curly-newline
-        this._formErrors = {};
-        this.inputElement = null;
-        // not to do
-    }
-    get className() {
-        return this._field?.style?.class;
-    }
-    ngOnInit() {
-        this.cdr.detectChanges();
-    }
-    ngOnChanges() {
-        this.cdr.detectChanges();
-    }
-    onChange(event) {
-        const { _form, _field, self } = this;
-        if (!_field || !_form)
-            return;
-        const { name } = _field;
-        const func = _field?.functions?.onChange;
-        const isValid = _form?.get(_field?.name)?.valid;
-        if (func) {
-            self[func]({
-                name,
-                isValid,
-                event,
-                ctrl: _form.get(this._field?.name),
-                form: _form
-            });
-        }
-    }
-}
-MECXDynamicInputPhoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicInputPhoneComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicInputPhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicInputPhoneComponent, selector: "mecx-dynamic-input-phone", inputs: { _field: "_field", _form: "_form", _formErrors: "_formErrors", self: "self" }, host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<monkey-input-phone [name]=\"_field?.name\" [label]=\"_field?.label | translate\"\r\n  [helperMessage]=\"_field?.helperMessage | translate\"\r\n  [placeholder]=\"_field?.placeholder | translate\" [icon]=\"_field?.icon\"\r\n  (onChange)=\"onChange($event)\" [internationalNumber]=\"_field?.internationalNumber\"\r\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\r\n  [maxLength]=\"_field?.maxLength\" [formControl]=\"_form.controls[_field?.name]\" #inputElement>\r\n</monkey-input-phone>", components: [{ type: i1$2.MonkeyInputPhoneComponent, selector: "monkey-input-phone", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "maxLength", "internationalNumber", "value"], outputs: ["onChange"] }], directives: [{ 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: MECXDynamicInputPhoneComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-dynamic-input-phone', encapsulation: ViewEncapsulation.None, template: "<monkey-input-phone [name]=\"_field?.name\" [label]=\"_field?.label | translate\"\r\n  [helperMessage]=\"_field?.helperMessage | translate\"\r\n  [placeholder]=\"_field?.placeholder | translate\" [icon]=\"_field?.icon\"\r\n  (onChange)=\"onChange($event)\" [internationalNumber]=\"_field?.internationalNumber\"\r\n  errorMessage=\"{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}\"\r\n  [maxLength]=\"_field?.maxLength\" [formControl]=\"_form.controls[_field?.name]\" #inputElement>\r\n</monkey-input-phone>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _field: [{
-                type: Input
-            }], _form: [{
-                type: Input
-            }], _formErrors: [{
-                type: Input
-            }], self: [{
-                type: Input
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['inputElement', {
-                        static: true
-                    }]
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class MECXDynamicRadioComponent {
-    constructor() {
-        this._field = null;
-        this._form = null;
-        // eslint-disable-next-line object-curly-newline
-        this._formErrors = {};
-    }
-    get className() {
-        return this._field?.style?.class;
-    }
-}
-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 *ngFor=\"let value of _field?.value\" [label]=\"value.description | translate\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-radiobutton>", 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 });
-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 *ngFor=\"let value of _field?.value\" [label]=\"value.description | translate\"\n    [value]=\"value.value\">\n  </monkey-option>\n</monkey-radiobutton>" }]
-        }], propDecorators: { _field: [{
-                type: Input
-            }], _form: [{
-                type: Input
-            }], _formErrors: [{
-                type: Input
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class MECXDynamicSelectComponent {
-    constructor() {
-        this._field = null;
-        this._form = null;
-        // eslint-disable-next-line object-curly-newline
-        this._formErrors = {};
-        this._onHandleOptions = new EventEmitter();
-    }
-    get className() {
-        return this._field?.style?.class;
-    }
-    onHandleGenericLoad() {
-        const { _form, _field, self } = this;
-        if (_form?.disabled || !_field || !_field?.functions?.onHandleGenericLoad)
-            return;
-        const { name } = _field;
-        if (_field?.value?.length)
-            return;
-        const { func, url } = _field?.functions?.onHandleGenericLoad;
-        if (!func || !self[func]) {
-            console.error('onHandleGenericLoad not declared');
-            return;
-        }
-        _form?.disable();
-        self[func]({
-            name,
-            url,
-            form: _form,
-            callback: (data) => {
-                if (this._field) {
-                    this._field.value = data;
-                }
-                this._form?.enable();
-                this._onHandleOptions.next(null);
-            }
-        });
-    }
-    onChange(event) {
-        const { _form, _field, self } = this;
-        if (!_field || !_form)
-            return;
-        const { name } = _field;
-        const func = _field?.functions?.onChange;
-        const isValid = _form?.get(_field.name)?.valid;
-        if (func) {
-            self[func]({
-                name,
-                isValid,
-                event,
-                ctrl: _form?.get(this._field?.name),
-                form: _form,
-                value: _field.value
-            });
-        }
-    }
-}
-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 });
-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>" }]
-        }], propDecorators: { _field: [{
-                type: Input
-            }], _form: [{
-                type: Input
-            }], _formErrors: [{
-                type: Input
-            }], self: [{
-                type: Input
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class MECXDynamicSelectSearchComponent {
-    constructor() {
-        this._field = null;
-        this._form = null;
-        // eslint-disable-next-line object-curly-newline
-        this._formErrors = {};
-        this._onHandleOptions = new EventEmitter();
-    }
-    get className() {
-        return this._field?.style?.class;
-    }
-    onHandleGenericLoad() {
-        const { _form, _field, self } = this;
-        if (_form?.disabled || !_field || !_field?.functions?.onHandleGenericLoad)
-            return;
-        const { name } = _field;
-        const { func, url } = _field?.functions?.onHandleGenericLoad || {
-            func: null, url: ''
-        };
-        if (!func || !self[func]) {
-            console.error('onHandleGenericLoad not declared');
-            return;
-        }
-        _form?.disable();
-        self[func]({
-            name,
-            url,
-            form: _form,
-            callback: (data) => {
-                if (this._field) {
-                    this._field.value = data;
-                }
-                this._form?.enable();
-                this._onHandleOptions.next(null);
-            }
-        });
-    }
-    onChange(event) {
-        const { _form, _field, self } = this;
-        if (!_field || !_form)
-            return;
-        const { name } = _field;
-        const func = _field?.functions?.onChange;
-        const isValid = _form?.get(_field?.name)?.valid;
-        if (func) {
-            self[func]({
-                name,
-                isValid,
-                event,
-                ctrl: _form.get(this._field?.name),
-                form: _form,
-                value: _field.value
-            });
-        }
-    }
-}
-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" }, 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\"\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-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 });
-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\"\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-search>" }]
-        }], propDecorators: { _field: [{
-                type: Input
-            }], _form: [{
-                type: Input
-            }], _formErrors: [{
-                type: Input
-            }], self: [{
-                type: Input
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-const componentMapper = {
-    input: MECXDynamicInputComponent,
-    'input-phone': MECXDynamicInputPhoneComponent,
-    radiobutton: MECXDynamicRadioComponent,
-    select: MECXDynamicSelectComponent,
-    'select-search': MECXDynamicSelectSearchComponent,
-    'file-upload': MECXDynamicFileUploadComponent,
-    button: MECXDynamicButtonComponent
-};
-class MECXDynamicDirective {
-    constructor(resolver, container, cdr) {
-        this.resolver = resolver;
-        this.container = container;
-        this.cdr = cdr;
-        this.field = null;
-        this.form = null;
-        // not to do
-    }
-    handleInternalPlusValidation() {
-        if (!this.field?.alwaysShowPlusValidation)
-            return false;
-        const { operator, value, field } = this.field?.alwaysShowPlusValidation;
-        const validators = {
-            e: (val1, val2) => { return val1 === val2; },
-            lt: (val1, val2) => { return val1 < val2; },
-            gt: (val1, val2) => { return val1 > val2; }
-        };
-        const data = this.form?.controls[field]?.value;
-        return validators[operator](data, value);
-    }
-    buildComponent() {
-        if (this.componentRef?.instance)
-            return;
-        const factory = this.resolver.resolveComponentFactory(componentMapper[this.field?.fieldType]);
-        this.componentRef = this.container.createComponent(factory);
-        this.componentRef.instance._field = this.field;
-        this.componentRef.instance._form = this.form;
-        // eslint-disable-next-line object-curly-newline
-        this.componentRef.instance._formErrors = this.formErrors || {};
-        this.componentRef.instance.self = this.self;
-    }
-    ngOnInit() {
-        if (!this.field?.alwaysShow && !this.handleInternalPlusValidation())
-            return;
-        this.buildComponent();
-    }
-    ngOnChanges() {
-        if (this.plusValidations && this.plusValidations[this.field?.name]) {
-            if (!this.field?.alwaysShow && this.plusValidations[this.field?.name].alwaysShow) {
-                setTimeout(() => {
-                    this.buildComponent();
-                    this.cdr.detectChanges();
-                }, 1);
-            }
-            if (this.componentRef?.instance &&
-                !this.plusValidations[this.field?.name].alwaysShow) {
-                this.componentRef.destroy();
-                this.componentRef = null;
-                this.form?.controls[this.field?.name]?.setValue(null);
-                this.form?.controls[this.field?.name]?.clearValidators();
-            }
-        }
-        if (!this.componentRef?.instance)
-            return;
-        this.componentRef.instance._formErrors = this.formErrors || {};
-    }
-}
-MECXDynamicDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicDirective, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-MECXDynamicDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: MECXDynamicDirective, selector: "[MECXDynamic]", inputs: { field: "field", form: "form", formErrors: "formErrors", self: "self", plusValidations: "plusValidations" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[MECXDynamic]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { field: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], formErrors: [{
-                type: Input
-            }], self: [{
-                type: Input
-            }], plusValidations: [{
-                type: Input
-            }] } });
-
-class MECXDynamicFormComponent extends BaseDynamic {
-    constructor(fb, cdr) {
-        super(fb);
-        this.cdr = cdr;
-        this.unsubscribeAll = new Subject();
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.onHandleSubmit.pipe(takeUntil(this.unsubscribeAll)).subscribe((func) => {
-            this.onSubmit(func);
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribeAll.next();
-        this.unsubscribeAll.complete();
-    }
-    onSubmit(callback) {
-        const { _form } = this;
-        // eslint-disable-next-line object-curly-newline
-        this.__monkeyecxFormErrors = {};
-        const isValid = this.validateForm(_form);
-        this.cdr.detectChanges();
-        this.onHandleSubmitFormReady.next({
-            validate: {
-                isValid
-            },
-            callback,
-            form: _form
-        });
-    }
-}
-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: "<form name=\"form\" [formGroup]=\"_form\" *ngIf=\"_form\">\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: 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "<form name=\"form\" [formGroup]=\"_form\" *ngIf=\"_form\">\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>" }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i0.ChangeDetectorRef }]; } });
-
-class MECXDynamicFormArrayComponent extends BaseDynamicArray {
-    constructor(fb, cdr) {
-        super(fb);
-        this.cdr = cdr;
-        this.unsubscribeAll = new Subject();
-        this.__monkeyecxFormErrors = [];
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.onHandleSubmit.pipe(takeUntil(this.unsubscribeAll)).subscribe((func) => {
-            this.onSubmit(func);
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribeAll.next();
-        this.unsubscribeAll.complete();
-    }
-    onSubmit(callback) {
-        const { _form } = this;
-        // eslint-disable-next-line object-curly-newline
-        this.__monkeyecxFormErrors = [];
-        let validate = {
-            isValid: false
-        };
-        let hasErrors = false;
-        if (this.formValues) {
-            this.__monkeyecxFormErrors = [this.formValues.length];
-            this.formValues.controls.forEach((item, index) => {
-                if (item instanceof FormGroup) {
-                    if (!this.validateForm(item, index)) {
-                        hasErrors = true;
-                    }
-                }
-            });
-        }
-        validate = {
-            isValid: !hasErrors
-        };
-        this.cdr.detectChanges();
-        this.onHandleSubmitFormReady.next({
-            validate,
-            callback,
-            form: _form
-        });
-    }
-    onHandleAdd() {
-        this.formValues?.push(this.formBase());
-        this.cdr.detectChanges();
-    }
-    onHandleRemove(index) {
-        this.formValues?.removeAt(index);
-        this._plusValidations.splice(index, 1);
-    }
-}
-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 });
-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"] }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i0.ChangeDetectorRef }]; } });
-
-class MECXDynamicModule {
-}
-MECXDynamicModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MECXDynamicModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicModule, declarations: [MECXDynamicButtonComponent,
-        MECXDynamicFileUploadComponent,
-        MECXDynamicFormComponent,
-        MECXDynamicFormArrayComponent,
-        MECXDynamicInputComponent,
-        MECXDynamicInputPhoneComponent,
-        MECXDynamicRadioComponent,
-        MECXDynamicSelectComponent,
-        MECXDynamicSelectSearchComponent,
-        MECXDynamicDirective], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MonkeyInputModule,
-        MonkeySelectModule,
-        MonkeyRadioButtonModule,
-        MonkeyOptionModule,
-        MonkeyFileUploadModule,
-        MonkeyButtonModule,
-        MonkeyInputPhoneModule, i1$3.TranslateModule], exports: [MECXDynamicDirective, MECXDynamicFormComponent, MECXDynamicFormArrayComponent] });
-MECXDynamicModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicModule, imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MonkeyInputModule,
-            MonkeySelectModule,
-            MonkeyRadioButtonModule,
-            MonkeyOptionModule,
-            MonkeyFileUploadModule,
-            MonkeyButtonModule,
-            MonkeyInputPhoneModule,
-            TranslateModule.forChild()
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXDynamicModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        MECXDynamicButtonComponent,
-                        MECXDynamicFileUploadComponent,
-                        MECXDynamicFormComponent,
-                        MECXDynamicFormArrayComponent,
-                        MECXDynamicInputComponent,
-                        MECXDynamicInputPhoneComponent,
-                        MECXDynamicRadioComponent,
-                        MECXDynamicSelectComponent,
-                        MECXDynamicSelectSearchComponent,
-                        MECXDynamicDirective
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MonkeyInputModule,
-                        MonkeySelectModule,
-                        MonkeyRadioButtonModule,
-                        MonkeyOptionModule,
-                        MonkeyFileUploadModule,
-                        MonkeyButtonModule,
-                        MonkeyInputPhoneModule,
-                        TranslateModule.forChild()
-                    ],
-                    exports: [MECXDynamicDirective, MECXDynamicFormComponent, MECXDynamicFormArrayComponent],
-                    entryComponents: [MECXDynamicInputComponent]
-                }]
-        }] });
-
-class MECXFilterSelectedItemDateWithActionComponent {
-    constructor() {
-        this.option = null;
-        this._date = '';
-    }
-    onHandleSelectedValue({ field, getValue }) {
-        const value = getValue()?.[field];
-        if (MonkeyEcxUtils.persistNullEmptyUndefined(value)) {
-            this._date = value;
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.option) {
-            const { currentValue } = changes.option;
-            if (currentValue && JSON.stringify(currentValue) !== '{}') {
-                this.onHandleSelectedValue(currentValue);
-            }
-        }
-    }
-}
-MECXFilterSelectedItemDateWithActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemDateWithActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterSelectedItemDateWithActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemDateWithActionComponent, selector: "mecx-filter-selected-item-date-with-action", inputs: { option: "option" }, usesOnChanges: true, ngImport: i0, template: "{{ _date | monkeyecxFormatDateTimelapse: false }}", styles: [""], pipes: { "monkeyecxFormatDateTimelapse": i1$4.MonkeyEcxFormatDateTimelapsePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemDateWithActionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-filter-selected-item-date-with-action', template: "{{ _date | monkeyecxFormatDateTimelapse: false }}", styles: [""] }]
-        }], propDecorators: { option: [{
-                type: Input
-            }] } });
-
-class MECXFilterSelectedItemDateRangeComponent {
-    constructor() {
-        this.option = null;
-        this._startDate = '';
-        this._endDate = '';
-    }
-    onHandleSelectedValue({ field, value, getValue }) {
-        try {
-            value = value || getValue()?.[field];
-            if (value && JSON.stringify(value) !== '{}') {
-                const objDates = JSON.parse(value);
-                this._startDate = objDates?.startDate;
-                this._endDate = objDates?.endDate;
-            }
-        }
-        catch (e) {
-            const objDates = JSON.parse(value?.dates);
-            this._startDate = objDates?.startDate;
-            this._endDate = objDates?.endDate;
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.option) {
-            const { currentValue } = changes.option;
-            if (currentValue && JSON.stringify(currentValue) !== '{}') {
-                this.onHandleSelectedValue(currentValue);
-            }
-        }
-    }
-}
-MECXFilterSelectedItemDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterSelectedItemDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemDateRangeComponent, selector: "mecx-filter-selected-item-date-range", inputs: { option: "option" }, usesOnChanges: true, ngImport: i0, template: "{{ _startDate | monkeyecxFormatDateTimelapse: false }} -\n{{ _endDate | monkeyecxFormatDateTimelapse: false }}", styles: [""], pipes: { "monkeyecxFormatDateTimelapse": i1$4.MonkeyEcxFormatDateTimelapsePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemDateRangeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-filter-selected-item-date-range', template: "{{ _startDate | monkeyecxFormatDateTimelapse: false }} -\n{{ _endDate | monkeyecxFormatDateTimelapse: false }}", styles: [""] }]
-        }], propDecorators: { option: [{
-                type: Input
-            }] } });
-
-class MECXFilterSelectedItemChildrenComponent {
-    constructor(elRef) {
-        this.elRef = elRef;
-        this.option = null;
-        this.onShow = new EventEmitter();
-        this.onRemove = new EventEmitter();
-        this._child = null;
-        // not to do
-    }
-    validateValue(value) {
-        if (!value)
-            return false;
-        if (typeof value === 'object') {
-            return value && JSON.stringify(value) !== '{}';
-        }
-        return MonkeyEcxUtils.persistNullEmptyUndefined(value);
-    }
-    onHandleSelectedValue({ children }) {
-        const found = children.find(({ field, getValue }) => {
-            return this.validateValue(getValue()?.[field]);
-        });
-        if (!found) {
-            this.elRef.nativeElement.remove();
-            return;
-        }
-        this._child = found;
-    }
-    ngOnChanges(changes) {
-        if (changes.option) {
-            const { currentValue } = changes.option;
-            if (currentValue && JSON.stringify(currentValue) !== '{}') {
-                this.onHandleSelectedValue(currentValue);
-            }
-        }
-    }
-}
-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 } });
-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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { option: [{
-                type: Input
-            }], onShow: [{
-                type: Output
-            }], onRemove: [{
-                type: Output
-            }] } });
-
-class MECXFilterSelectedItemCurrencyComponent {
-    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);
-            }
-        }
-    }
-}
-MECXFilterSelectedItemCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterSelectedItemCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemCurrencyComponent, selector: "mecx-filter-selected-item-currency", inputs: { option: "option" }, usesOnChanges: true, ngImport: i0, template: "{{ _value | monkeyecxFormatCurrency }}", styles: [""], pipes: { "monkeyecxFormatCurrency": i1$4.MonkeyEcxFormatCurrencyPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemCurrencyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-filter-selected-item-currency', template: "{{ _value | monkeyecxFormatCurrency }}", styles: [""] }]
-        }], propDecorators: { option: [{
-                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;
-        this._selectedValue = '';
-        this._labelMoreValues = '';
-    }
-    onHandleSelectedValue({ value, i18n }) {
-        const { labelMoreValues } = this;
-        const selected = `${value}`.split(',');
-        this._selectedValue = `${i18n}${selected[0]}`.trim();
-        if (selected.length >= 2) {
-            this._labelMoreValues = `, ${labelMoreValues} ${selected.length - 1}`;
-        }
-        else
-            this._labelMoreValues = '';
-    }
-    ngOnChanges(changes) {
-        if (changes.option) {
-            const { currentValue } = changes.option;
-            if (currentValue && JSON.stringify(currentValue) !== '{}') {
-                this.onHandleSelectedValue(currentValue);
-            }
-        }
-    }
-}
-MECXFilterSelectedItemStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterSelectedItemStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterSelectedItemStatusComponent, selector: "mecx-filter-selected-item-status", inputs: { option: "option", labelMoreValues: "labelMoreValues" }, usesOnChanges: true, ngImport: i0, template: "{{ _selectedValue | translate }}{{ _labelMoreValues }}", styles: [""], pipes: { "translate": i1$3.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedItemStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-filter-selected-item-status', template: "{{ _selectedValue | translate }}{{ _labelMoreValues }}", styles: [""] }]
-        }], propDecorators: { option: [{
-                type: Input
-            }], labelMoreValues: [{
-                type: Input
-            }] } });
-
-class MECXFilterOptionsChildrenComponent {
-    constructor() {
-        this.option = null;
-        this.onSubmit = new EventEmitter();
-        this.onShow = new EventEmitter();
-        this.eventHandle = new EventEmitter();
-        // not to do
-    }
-    ngOnInit() {
-        const { eventHandle, onSubmit, option: { field } } = this;
-        this.eventSubscription = eventHandle.pipe(debounceTime(100)).subscribe((value) => {
-            onSubmit.next({ [field]: value });
-        });
-    }
-    ngOnDestroy() {
-        this.eventSubscription.unsubscribe();
-    }
-    onHandleChildrenAction(child) {
-        const { field, type, action } = child;
-        if (type === 'with-action') {
-            this.eventHandle.next(JSON.stringify({
-                [field]: action()
-            }));
-        }
-        else {
-            this.onShow.next(child);
-        }
-    }
-    onHandleValidateSelected({ field, getValue }) {
-        return !!getValue()?.[field];
-    }
-}
-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 } });
-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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { option: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }], onShow: [{
-                type: Output
-            }] } });
-
-class MECXFilterOptionsStatusComponent {
-    constructor() {
-        this.option = null;
-        this.onSubmit = new EventEmitter();
-        this._value = '';
-        this.eventHandle = new EventEmitter();
-        // not to do
-    }
-    verifySelected(value) {
-        return this._value?.includes(value);
-    }
-    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;
-            }
-        }
-    }
-    onHandleChecked(cmp) {
-        const { _value } = this;
-        return `${_value}`.split(',')?.indexOf(cmp) >= 0;
-    }
-    onChangeFilter(event, value) {
-        event.preventDefault();
-        event.stopPropagation();
-        const selected = !this.verifySelected(value);
-        const filters = this._value?.split(',') || [];
-        if (!selected) {
-            filters.splice(filters.indexOf(value), 1);
-        }
-        else {
-            filters.push(value);
-        }
-        this._value = filters?.length ? filters.join(',') : null;
-        this.eventHandle.next(this._value);
-    }
-}
-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: "<monkey-checkbox type=\"multiple\" *ngFor=\"let op of option?.values\"\n  [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\n  (click)=\"onChangeFilter($event, op?.value)\">\n</monkey-checkbox>", 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-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"] }], 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: "<monkey-checkbox type=\"multiple\" *ngFor=\"let op of option?.values\"\n  [description]=\"op?.description | translate\" [value]=\"onHandleChecked(op?.value)\"\n  (click)=\"onChangeFilter($event, op?.value)\">\n</monkey-checkbox>", 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-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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { option: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }] } });
-
-class MECXFilterOptionsDateRangeComponent {
-    constructor() {
-        this.option = null;
-        this.onSubmit = new EventEmitter();
-        this._value = {
-            startDate: null,
-            endDate: null
-        };
-        this._moveDaysForward = true;
-        this.eventHandle = new EventEmitter();
-        // not to do
-    }
-    onHandleSelectedValue({ field, value, getValue }) {
-        try {
-            value = value || getValue()?.[field];
-            if (MonkeyEcxUtils.persistNullEmptyUndefined(value)) {
-                this._value = JSON.parse(value);
-            }
-        }
-        catch (e) {
-            // 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.onHandleSelectedValue(currentValue);
-            }
-        }
-    }
-    onChangeFilter(value) {
-        if (!value?.endDate)
-            return;
-        this.eventHandle.next(JSON.stringify(value));
-    }
-}
-MECXFilterOptionsDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterOptionsDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsDateRangeComponent, selector: "mecx-filter-options-date-range", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<monkey-date-range-picker [(value)]=\"_value\" [i18n]=\"'CALENDAR' | translate\"\n  [moveDaysForward]=\"_moveDaysForward\" (onChange)=\"onChangeFilter($event)\">\n</monkey-date-range-picker>", styles: [":host{display:flex;flex-direction:column;padding:12px 12px 8px}:host .title{color:#4b4a53;font-size:18px;line-height:21px;font-weight:500;text-align:left;margin-bottom:4px}:host ::ng-deep mecx-date-range-picker-group-action{display:none}:host ::ng-deep monkey-date-range-picker mecx-date-range-picker-group mecx-date-range-picker-group-info{display:none}:host ::ng-deep monkey-date-range-picker mecx-date-range-picker-group mecx-date-range-picker-group-header{display:none}\n"], components: [{ type: i1$2.MonkeyDateRangePickerComponent, selector: "monkey-date-range-picker", inputs: ["label", "helperMessage", "i18n", "infoMessage", "errorMessage", "moveDaysForward", "minDate", "value"], outputs: ["onChange"] }], pipes: { "translate": i1$3.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsDateRangeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-filter-options-date-range', template: "<monkey-date-range-picker [(value)]=\"_value\" [i18n]=\"'CALENDAR' | translate\"\n  [moveDaysForward]=\"_moveDaysForward\" (onChange)=\"onChangeFilter($event)\">\n</monkey-date-range-picker>", styles: [":host{display:flex;flex-direction:column;padding:12px 12px 8px}:host .title{color:#4b4a53;font-size:18px;line-height:21px;font-weight:500;text-align:left;margin-bottom:4px}:host ::ng-deep mecx-date-range-picker-group-action{display:none}:host ::ng-deep monkey-date-range-picker mecx-date-range-picker-group mecx-date-range-picker-group-info{display:none}:host ::ng-deep monkey-date-range-picker mecx-date-range-picker-group mecx-date-range-picker-group-header{display:none}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { option: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }] } });
-
-class MECXFilterOptionsCurrencyComponent {
-    constructor() {
-        this.option = null;
-        this.onSubmit = new EventEmitter();
-        this._value = 0;
-        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);
-    }
-}
-MECXFilterOptionsCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXFilterOptionsCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXFilterOptionsCurrencyComponent, selector: "mecx-filter-options-currency", inputs: { option: "option" }, outputs: { onSubmit: "onSubmit" }, usesOnChanges: true, ngImport: i0, template: "<monkey-input currency=\"true\" type=\"text\" maxLength=\"25\" [(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: MECXFilterOptionsCurrencyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-filter-options-currency', template: "<monkey-input currency=\"true\" type=\"text\" maxLength=\"25\" [(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 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;
-        this.closeDirectly = false;
-        this.onClose = new EventEmitter();
-        this.onRemove = new EventEmitter();
-        this.onSubmit = new EventEmitter();
-        this.onShowFromChildren = new EventEmitter();
-        this._showMenu = false;
-        this.closeMenu = () => {
-            this._showMenu = false;
-        };
-        // not to do
-    }
-    onHandleChildrenAction(child) {
-        const { option } = this;
-        const { field, action } = child;
-        this.onSubmit.next({
-            [option.field]: {
-                [field]: action()
-            }
-        });
-    }
-    onHandleSubmitChildren(event) {
-        this.onSubmit.next(event);
-    }
-    onHandleSubmit(event) {
-        this.onSubmit.next(event);
-    }
-    onHandleShowMenu() {
-        const { closeDirectly } = this;
-        if (closeDirectly) {
-            this.onClose.next();
-            return;
-        }
-        this._showMenu = true;
-    }
-}
-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      <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      <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: [{
-                type: Input
-            }], onClose: [{
-                type: Output
-            }], onRemove: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
-            }], onShowFromChildren: [{
-                type: Output
-            }] } });
-
-class MECXFilterSelectedItemComponent {
-    constructor() {
-        this.onClose = new EventEmitter();
-        this.onSubmit = new EventEmitter();
-        this._option = null;
-        this._showMenu = false;
-        this._actionElement = null;
-        this.closeMenu = () => {
-            this._showMenu = false;
-        };
-        // not to do
-    }
-    set option(value) {
-        this._option = value;
-    }
-    onHandleShowMenu() {
-        const { _option } = this;
-        this._actionElement = document.getElementById(`mecx-filter-selected-item-${_option?.field}`);
-        setTimeout(() => {
-            this._showMenu = true;
-        }, 0);
-    }
-    onHandleClose() {
-        this._showMenu = false;
-        this.onClose.next();
-    }
-    onHandleSubmit(event) {
-        this.onSubmit.next(event);
-    }
-    onHandleRemove() {
-        const { _option } = this;
-        const { field } = _option;
-        this.onSubmit.next({ [field]: null });
-    }
-    onHandleShowFromChildren(event) {
-        const { _option } = this;
-        const { label } = _option;
-        this.onHandleShowMenu();
-        this.onHandleSubmit = (event) => {
-            this.onSubmit.next({
-                [_option.field]: JSON.stringify(event)
-            });
-        };
-        this._option = {
-            ...event,
-            label
-        };
-    }
-}
-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-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-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: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
-            }] } });
-
-class MECXFilterSelectedComponent {
-    constructor() {
-        this.model = [];
-        this.onOpenFilters = new EventEmitter();
-        this.onClose = new EventEmitter();
-        this.onSubmit = new EventEmitter();
-        this._model = [];
-        // not to do
-    }
-    validateValue({ field, value, getValue }) {
-        try {
-            value = value || getValue()?.[field];
-            if (!value)
-                return false;
-            if (typeof value === 'object') {
-                return value && JSON.stringify(value) !== '{}';
-            }
-            return MonkeyEcxUtils.persistNullEmptyUndefined(value);
-        }
-        catch (e) {
-            // not to do
-        }
-        return false;
-    }
-    onHandleSelectedValue(value) {
-        this._model = value?.map((_) => {
-            const { children } = _;
-            let obj = null;
-            if (children) {
-                obj = {
-                    ..._,
-                    children
-                };
-            }
-            else if (this.validateValue(_)) {
-                obj = {
-                    ..._,
-                    ...obj || {}
-                };
-            }
-            return obj;
-        })?.filter((_) => {
-            return _;
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes.model) {
-            const { currentValue } = changes.model;
-            if (currentValue && JSON.stringify(currentValue) !== '{}') {
-                this.onHandleSelectedValue(currentValue);
-            }
-        }
-    }
-    onHandleClose() {
-        this.onClose.next();
-    }
-    onHandleSubmit(event) {
-        this.onSubmit.next(event);
-    }
-}
-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}:host ::ng-deep mecx-filter-selected-item{margin-right:8px}\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"] }] });
-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}:host ::ng-deep mecx-filter-selected-item{margin-right:8px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
-                type: Input
-            }], onOpenFilters: [{
-                type: Output
-            }], onClose: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
-            }] } });
-
-class MECXFilterMenuComponent {
-    constructor() {
-        this.model = [];
-        this.onClose = new EventEmitter();
-        this.onSubmit = new EventEmitter();
-        this._onHandleSubmit = null;
-        this._model = [];
-        this._showMenu = false;
-        this._menuOption = null;
-        this.closeMenu = () => {
-            this._showMenu = false;
-        };
-        // not to do
-    }
-    validateValue({ field, value, getValue }) {
-        try {
-            value = value || getValue()?.[field];
-            if (!value)
-                return false;
-            if (typeof value === 'object') {
-                return value && JSON.stringify(value) !== '{}';
-            }
-            return MonkeyEcxUtils.persistNullEmptyUndefined(value);
-        }
-        catch (e) {
-            // not to do
-        }
-        return false;
-    }
-    onHandleSubmitValue(value) {
-        this.onSubmit.next(value);
-        this.onHandleClose();
-    }
-    onHandleMenus(value) {
-        this._model = value?.map((_) => {
-            const { children } = _;
-            let obj = null;
-            if (children) {
-                obj = {
-                    ..._,
-                    children: children?.filter((_) => {
-                        return !this.validateValue(_);
-                    })
-                };
-            }
-            else if (!this.validateValue(_)) {
-                obj = {
-                    ..._,
-                    ...obj || {}
-                };
-            }
-            return obj;
-        })?.filter((_) => {
-            return _;
-        });
-        this._model = this._model?.sort((a, b) => {
-            const groupA = `${a?.group}`.toLowerCase();
-            const groupB = `${b?.group}`.toLowerCase();
-            return groupA !== groupB ? 1 : -1;
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes.model) {
-            const { currentValue } = changes.model;
-            if (currentValue && JSON.stringify(currentValue) !== '{}') {
-                this.onHandleMenus(currentValue);
-            }
-        }
-    }
-    onHandleChildrenAction(option, child) {
-        const { field, type, action } = child;
-        if (type === 'with-action') {
-            this.onHandleSubmitValue({
-                [option.field]: JSON.stringify({
-                    [field]: action()
-                })
-            });
-        }
-        else {
-            this._showMenu = true;
-            this._menuOption = child;
-            this.onHandleSubmit = (event) => {
-                this.onHandleSubmitValue({
-                    [option.field]: JSON.stringify(event)
-                });
-            };
-        }
-    }
-    onHandleShowMenu(option) {
-        this._showMenu = true;
-        this._menuOption = option;
-    }
-    onHandleClose() {
-        this._showMenu = false;
-        this.onClose.next();
-    }
-    onHandleSubmit(event) {
-        this.onHandleSubmitValue(event);
-    }
-}
-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 class=\"item children\" (click)=\"onHandleChildrenAction(menu, child)\">\n          {{ child.label | translate }}\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-template #withoutChildren>\n      <div class=\"item\" (click)=\"onHandleShowMenu(menu)\">\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  <mecx-filter-options [option]=\"_menuOption\" (onClose)=\"onHandleClose()\"\n    (onSubmit)=\"onHandleSubmit($event)\" [closeDirectly]=\"true\"></mecx-filter-options>\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: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 } });
-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 class=\"item children\" (click)=\"onHandleChildrenAction(menu, child)\">\n          {{ child.label | translate }}\n        </div>\n      </ng-container>\n    </ng-container>\n    <ng-template #withoutChildren>\n      <div class=\"item\" (click)=\"onHandleShowMenu(menu)\">\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  <mecx-filter-options [option]=\"_menuOption\" (onClose)=\"onHandleClose()\"\n    (onSubmit)=\"onHandleSubmit($event)\" [closeDirectly]=\"true\"></mecx-filter-options>\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: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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
-                type: Input
-            }], onClose: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
-            }] } });
-
-class MECXFilterComponent {
-    constructor() {
-        this.searchPlaceholder = '';
-        this.orderPlaceholder = '';
-        this.menus = [];
-        this.orders = [];
-        this.enableSearch = true;
-        this.isLoading = false;
-        this.onFilter = new EventEmitter();
-        this._order = null;
-        this._search = '';
-        this._showMenu = false;
-        this._hasFilterByMenu = false;
-        this._actionElement = null;
-        this.closeMenu = () => {
-            this._showMenu = false;
-        };
-        // not to do
-    }
-    set search(value) {
-        this._search = value;
-    }
-    set order(value) {
-        this._order = value;
-    }
-    validateValue({ field, value, getValue }) {
-        try {
-            value = value || getValue()?.[field];
-            if (!value)
-                return false;
-            if (typeof value === 'object') {
-                return value && JSON.stringify(value) !== '{}';
-            }
-            return MonkeyEcxUtils.persistNullEmptyUndefined(value);
-        }
-        catch (e) {
-            // not to do
-        }
-        return false;
-    }
-    handleFilters() {
-        const { menus } = this;
-        let found = menus.find((_) => {
-            return this.validateValue(_);
-        });
-        if (!found) {
-            found = menus.find(({ children }) => {
-                return (children || [])?.find((_) => {
-                    return this.validateValue(_);
-                });
-            });
-        }
-        this._hasFilterByMenu = !!found;
-    }
-    ngOnChanges(changes) {
-        if (changes.menus) {
-            const { currentValue } = changes.menus;
-            if (currentValue && JSON.stringify(currentValue) !== '{}') {
-                this.handleFilters();
-            }
-        }
-    }
-    onSearchFilter(event) {
-        this.onFilter.next({ search: event });
-    }
-    onClearFilter() {
-        this._search = '';
-        this.onFilter.next({ search: null });
-    }
-    onHandleSubmit(event) {
-        this.onFilter.next(event);
-    }
-    onHandleShowMenu() {
-        this._actionElement = document.getElementById('mecx-filters-add-filter');
-        setTimeout(() => {
-            this._showMenu = true;
-        }, 0);
-    }
-    onHandleClose() {
-        this._showMenu = false;
-    }
-    onHandleOrder(event) {
-        this.onFilter.next({ sort: event });
-    }
-}
-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", search: "search", order: "order", isLoading: "isLoading" }, outputs: { onFilter: "onFilter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column full-width\">\n  <div class=\"d-flex flex-column flex-md-row justify-content-between\">\n    <div class=\"d-flex full-width\">\n      <ng-container *ngIf=\"enableSearch\">\n        <monkey-input-filter [placeholder]=\"searchPlaceholder | translate\"\n          (onChange)=\"onSearchFilter($event)\" icon=\"search-16\" iconPosition=\"left\"\n          [(value)]=\"_search\">\n        </monkey-input-filter>\n      </ng-container>\n      <ng-container *ngIf=\"!_hasFilterByMenu\">\n        <div class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\n          <monkey-button type=\"filter\" color=\"border\" (click)=\"onHandleShowMenu()\" icon=\"more-16\"\n            iconPosition=\"right\">\n            {{ 'BUTTONS.ADD-FILTER' | translate }}\n          </monkey-button>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"order hidden-sm hidden-xs\">\n      <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n    </div>\n  </div>\n  <ng-container *ngIf=\"_hasFilterByMenu\">\n    <div class=\"separator\"></div>\n    <div class=\"d-flex full-width\">\n      <mecx-filter-selected (onSubmit)=\"onHandleSubmit($event)\" (onClose)=\"onHandleClose()\"\n        [model]=\"menus\"></mecx-filter-selected>\n      <div class=\"more-filters\">\n        <monkey-button type=\"filter\" color=\"border\" icon=\"more-16\" id=\"mecx-filters-add-filter\"\n          (click)=\"onHandleShowMenu()\">\n        </monkey-button>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"order hidden-md hidden-lg\">\n    <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n  </div>\n</div>\n\n<mecx-filter-menu\n  *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n  (onSubmit)=\"onHandleSubmit($event)\" (onClose)=\"onHandleClose()\" [model]=\"menus\">\n</mecx-filter-menu>\n\n<ng-template #orderBy>\n  <monkey-select-filter (onChange)=\"onHandleOrder($event)\" [placeholder]=\"orderPlaceholder | translate\" type=\"none\"\n    [(value)]=\"_order\">\n    <monkey-option *ngFor=\"let ordBy of orders\" [label]=\"ordBy?.label | translate\" [value]=\"ordBy?.value\">\n    </monkey-option>\n  </monkey-select-filter>\n</ng-template>", styles: [":host{display:flex;width:100%;align-items: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{margin-left:8px}:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}@media screen and (min-width: 960px){:host .order{width:230px}}@media screen and (max-width: 959px){:host .order{margin-top:8px}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}@media screen and (min-width: 960px){:host ::ng-deep monkey-input-filter{width:464px}}: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"] }], 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 } });
-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 flex-column full-width\">\n  <div class=\"d-flex flex-column flex-md-row justify-content-between\">\n    <div class=\"d-flex full-width\">\n      <ng-container *ngIf=\"enableSearch\">\n        <monkey-input-filter [placeholder]=\"searchPlaceholder | translate\"\n          (onChange)=\"onSearchFilter($event)\" icon=\"search-16\" iconPosition=\"left\"\n          [(value)]=\"_search\">\n        </monkey-input-filter>\n      </ng-container>\n      <ng-container *ngIf=\"!_hasFilterByMenu\">\n        <div class=\"d-flex actions\" id=\"mecx-filters-add-filter\">\n          <monkey-button type=\"filter\" color=\"border\" (click)=\"onHandleShowMenu()\" icon=\"more-16\"\n            iconPosition=\"right\">\n            {{ 'BUTTONS.ADD-FILTER' | translate }}\n          </monkey-button>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"order hidden-sm hidden-xs\">\n      <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n    </div>\n  </div>\n  <ng-container *ngIf=\"_hasFilterByMenu\">\n    <div class=\"separator\"></div>\n    <div class=\"d-flex full-width\">\n      <mecx-filter-selected (onSubmit)=\"onHandleSubmit($event)\" (onClose)=\"onHandleClose()\"\n        [model]=\"menus\"></mecx-filter-selected>\n      <div class=\"more-filters\">\n        <monkey-button type=\"filter\" color=\"border\" icon=\"more-16\" id=\"mecx-filters-add-filter\"\n          (click)=\"onHandleShowMenu()\">\n        </monkey-button>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"order hidden-md hidden-lg\">\n    <ng-container *ngTemplateOutlet=\"orderBy\"></ng-container>\n  </div>\n</div>\n\n<mecx-filter-menu\n  *monkeyecxPopover=\"_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'\"\n  (onSubmit)=\"onHandleSubmit($event)\" (onClose)=\"onHandleClose()\" [model]=\"menus\">\n</mecx-filter-menu>\n\n<ng-template #orderBy>\n  <monkey-select-filter (onChange)=\"onHandleOrder($event)\" [placeholder]=\"orderPlaceholder | translate\" type=\"none\"\n    [(value)]=\"_order\">\n    <monkey-option *ngFor=\"let ordBy of orders\" [label]=\"ordBy?.label | translate\" [value]=\"ordBy?.value\">\n    </monkey-option>\n  </monkey-select-filter>\n</ng-template>", styles: [":host{display:flex;width:100%;align-items: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{margin-left:8px}:host .actions ::ng-deep monkey-button button{width:170px}}:host .more-filters ::ng-deep monkey-button monkey-icon{margin-right:unset!important}@media screen and (min-width: 960px){:host .order{width:230px}}@media screen and (max-width: 959px){:host .order{margin-top:8px}}:host ::ng-deep monkey-button{margin-bottom:0}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:40px;margin:0}@media screen and (min-width: 960px){:host ::ng-deep monkey-input-filter{width:464px}}:host .separator{border-bottom:1px solid #ebebeb;margin-top:16px;margin-bottom:16px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { searchPlaceholder: [{
-                type: Input
-            }], orderPlaceholder: [{
-                type: Input
-            }], menus: [{
-                type: Input
-            }], orders: [{
-                type: Input
-            }], enableSearch: [{
-                type: Input
-            }], search: [{
-                type: Input
-            }], order: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], onFilter: [{
-                type: Output
-            }] } });
-
-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: [MECXFilterOptionsChildrenComponent,
-        MECXFilterOptionsComponent,
-        MECXFilterOptionsCurrencyComponent,
-        MECXFilterOptionsDateRangeComponent,
-        MECXFilterOptionsInputComponent,
-        MECXFilterOptionsStatusComponent], imports: [CommonModule,
-        FormsModule,
-        MonkeyBadgeModule,
-        MonkeyButtonModule,
-        MonkeyCheckboxModule,
-        MonkeyDateRangePickerModule,
-        MonkeyEcxDirectivesModule,
-        MonkeyIconModule,
-        MonkeyInputModule,
-        MonkeyOptionModule,
-        MonkeySelectModule,
-        ReactiveFormsModule,
-        RouterModule, i1$3.TranslateModule], exports: [MECXFilterOptionsChildrenComponent,
-        MECXFilterOptionsComponent,
-        MECXFilterOptionsCurrencyComponent,
-        MECXFilterOptionsDateRangeComponent,
-        MECXFilterOptionsInputComponent,
-        MECXFilterOptionsStatusComponent] });
-MECXFilterOptionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterOptionsModule, imports: [[
-            CommonModule,
-            FormsModule,
-            MonkeyBadgeModule,
-            MonkeyButtonModule,
-            MonkeyCheckboxModule,
-            MonkeyDateRangePickerModule,
-            MonkeyEcxDirectivesModule,
-            MonkeyIconModule,
-            MonkeyInputModule,
-            MonkeyOptionModule,
-            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,
-                        MECXFilterOptionsCurrencyComponent,
-                        MECXFilterOptionsDateRangeComponent,
-                        MECXFilterOptionsInputComponent,
-                        MECXFilterOptionsStatusComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MonkeyBadgeModule,
-                        MonkeyButtonModule,
-                        MonkeyCheckboxModule,
-                        MonkeyDateRangePickerModule,
-                        MonkeyEcxDirectivesModule,
-                        MonkeyIconModule,
-                        MonkeyInputModule,
-                        MonkeyOptionModule,
-                        MonkeySelectModule,
-                        ReactiveFormsModule,
-                        RouterModule,
-                        TranslateModule.forChild()
-                    ],
-                    exports: [
-                        MECXFilterOptionsChildrenComponent,
-                        MECXFilterOptionsComponent,
-                        MECXFilterOptionsCurrencyComponent,
-                        MECXFilterOptionsDateRangeComponent,
-                        MECXFilterOptionsInputComponent,
-                        MECXFilterOptionsStatusComponent
-                    ]
-                }]
-        }] });
-
-class MECXFilterMenuModule {
-}
-MECXFilterMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MECXFilterMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuModule, declarations: [MECXFilterMenuComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MonkeyEcxDirectivesModule,
-        MonkeyButtonModule,
-        MonkeyBadgeModule,
-        MonkeyIconModule,
-        MonkeyInputModule,
-        MonkeyCheckboxModule,
-        MonkeySelectModule,
-        MonkeyOptionModule,
-        MonkeyDateRangePickerModule,
-        RouterModule,
-        MECXFilterOptionsModule, i1$3.TranslateModule], exports: [MECXFilterMenuComponent] });
-MECXFilterMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuModule, imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MonkeyEcxDirectivesModule,
-            MonkeyButtonModule,
-            MonkeyBadgeModule,
-            MonkeyIconModule,
-            MonkeyInputModule,
-            MonkeyCheckboxModule,
-            MonkeySelectModule,
-            MonkeyOptionModule,
-            MonkeyDateRangePickerModule,
-            RouterModule,
-            MECXFilterOptionsModule,
-            TranslateModule.forChild()
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MECXFilterMenuComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MonkeyEcxDirectivesModule,
-                        MonkeyButtonModule,
-                        MonkeyBadgeModule,
-                        MonkeyIconModule,
-                        MonkeyInputModule,
-                        MonkeyCheckboxModule,
-                        MonkeySelectModule,
-                        MonkeyOptionModule,
-                        MonkeyDateRangePickerModule,
-                        RouterModule,
-                        MECXFilterOptionsModule,
-                        TranslateModule.forChild()
-                    ],
-                    exports: [MECXFilterMenuComponent]
-                }]
-        }] });
-
-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,
-        MECXFilterSelectedItemDateWithActionComponent,
-        MECXFilterSelectedItemInputComponent,
-        MECXFilterSelectedItemStatusComponent], imports: [CommonModule,
-        FormsModule,
-        MECXFilterOptionsModule,
-        MonkeyBadgeModule,
-        MonkeyButtonModule,
-        MonkeyCheckboxModule,
-        MonkeyDateRangePickerModule,
-        MonkeyEcxDirectivesModule,
-        MonkeyEcxPipesModule,
-        MonkeyIconModule,
-        MonkeyInputModule,
-        MonkeyOptionModule,
-        MonkeySelectModule,
-        ReactiveFormsModule,
-        RouterModule, i1$3.TranslateModule], exports: [MECXFilterSelectedComponent] });
-MECXFilterSelectedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedModule, imports: [[
-            CommonModule,
-            FormsModule,
-            MECXFilterOptionsModule,
-            MonkeyBadgeModule,
-            MonkeyButtonModule,
-            MonkeyCheckboxModule,
-            MonkeyDateRangePickerModule,
-            MonkeyEcxDirectivesModule,
-            MonkeyEcxPipesModule,
-            MonkeyIconModule,
-            MonkeyInputModule,
-            MonkeyOptionModule,
-            MonkeySelectModule,
-            ReactiveFormsModule,
-            RouterModule,
-            TranslateModule.forChild()
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterSelectedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        MECXFilterSelectedComponent,
-                        MECXFilterSelectedItemChildrenComponent,
-                        MECXFilterSelectedItemComponent,
-                        MECXFilterSelectedItemCurrencyComponent,
-                        MECXFilterSelectedItemDateRangeComponent,
-                        MECXFilterSelectedItemDateWithActionComponent,
-                        MECXFilterSelectedItemInputComponent,
-                        MECXFilterSelectedItemStatusComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MECXFilterOptionsModule,
-                        MonkeyBadgeModule,
-                        MonkeyButtonModule,
-                        MonkeyCheckboxModule,
-                        MonkeyDateRangePickerModule,
-                        MonkeyEcxDirectivesModule,
-                        MonkeyEcxPipesModule,
-                        MonkeyIconModule,
-                        MonkeyInputModule,
-                        MonkeyOptionModule,
-                        MonkeySelectModule,
-                        ReactiveFormsModule,
-                        RouterModule,
-                        TranslateModule.forChild()
-                    ],
-                    exports: [MECXFilterSelectedComponent]
-                }]
-        }] });
-
-class MECXFilterModule {
-}
-MECXFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MECXFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterModule, declarations: [MECXFilterComponent], imports: [MonkeyEcxDirectivesModule,
-        MonkeyEcxPipesModule,
-        MonkeyButtonModule,
-        MonkeyInputModule,
-        MonkeyIconModule,
-        MonkeySelectModule,
-        MonkeyOptionModule, i1$3.TranslateModule, MECXFilterMenuModule,
-        MECXFilterSelectedModule,
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule], exports: [MECXFilterComponent] });
-MECXFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterModule, imports: [[
-            MonkeyEcxDirectivesModule,
-            MonkeyEcxPipesModule,
-            MonkeyButtonModule,
-            MonkeyInputModule,
-            MonkeyIconModule,
-            MonkeySelectModule,
-            MonkeyOptionModule,
-            TranslateModule.forChild(),
-            MECXFilterMenuModule,
-            MECXFilterSelectedModule,
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXFilterModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MECXFilterComponent],
-                    imports: [
-                        MonkeyEcxDirectivesModule,
-                        MonkeyEcxPipesModule,
-                        MonkeyButtonModule,
-                        MonkeyInputModule,
-                        MonkeyIconModule,
-                        MonkeySelectModule,
-                        MonkeyOptionModule,
-                        TranslateModule.forChild(),
-                        MECXFilterMenuModule,
-                        MECXFilterSelectedModule,
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule
-                    ],
-                    exports: [MECXFilterComponent]
-                }]
-        }] });
-
-class MECXPasswordStrengthComponent {
-    constructor(configService) {
-        this.configService = configService;
-        this.passwordToCheck = null;
-        this.i18n = null;
-        this.onHandleSubmitReady = new EventEmitter();
-        this._validatorsPasswordPass = [];
-        this._stepPassword = 0;
-        this.validatorsPassword = new Map();
-        // not do
-    }
-    handleColor(score) {
-        let idx = 0;
-        if (score > 50)
-            idx = 1;
-        if (score === 100)
-            idx = 2;
-        this._stepPassword = idx;
-    }
-    passwordStrengthValidator(pass) {
-        this._validatorsPasswordPass = [];
-        let score = 0;
-        this.validatorsPassword.forEach((key, value) => {
-            this._validatorsPasswordPass.push({
-                regex: `${value}`,
-                validate: `${key.VALIDATE}` === String(RegExp(`${key.REGEX}`).test(pass)),
-                percent: 100 / this.validatorsPassword.size
-            });
-        });
-        this._validatorsPasswordPass.forEach((check) => {
-            if (check.validate) {
-                score += check.percent;
-            }
-        });
-        return Math.trunc(score);
-    }
-    onHandleReady() {
-        const validate = this._validatorsPasswordPass?.find(({ validate }) => { return !validate; });
-        this.onHandleSubmitReady.next(!validate);
-    }
-    onHandleChages() {
-        const password = this.passwordToCheck;
-        this.handleColor(this.passwordStrengthValidator(password));
-        this.onHandleReady();
-    }
-    onHandlePasswordStrengthKeys(params) {
-        const ps = params?.program?.screens?.login?.passwordStrength;
-        if (ps) {
-            Object.entries(ps)
-                .forEach(([key, value]) => {
-                if (MonkeyEcxUtils.persistNullEmptyUndefined(value)) {
-                    this.validatorsPassword.set(key, value);
-                }
-            });
-            this.onHandleChages();
-        }
-    }
-    ngOnInit() {
-        this.configService.config().subscribe((_) => {
-            this.onHandlePasswordStrengthKeys(_);
-        });
-    }
-    ngOnChanges() {
-        this.onHandleChages();
-    }
-}
-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 });
-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"] }]
-        }], ctorParameters: function () { return [{ type: i1$4.MonkeyEcxConfigService }]; }, propDecorators: { passwordToCheck: [{
-                type: Input
-            }], i18n: [{
-                type: Input
-            }], onHandleSubmitReady: [{
-                type: Output
-            }] } });
-
-class MECXPasswordStrengthModule {
-}
-MECXPasswordStrengthModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXPasswordStrengthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MECXPasswordStrengthModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXPasswordStrengthModule, declarations: [MECXPasswordStrengthComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MonkeyEcxPipesModule,
-        MonkeyEcxDirectivesModule,
-        MonkeyButtonModule,
-        MonkeyInputModule,
-        MonkeyIconModule, i1$3.TranslateModule], exports: [MECXPasswordStrengthComponent] });
-MECXPasswordStrengthModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXPasswordStrengthModule, imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MonkeyEcxPipesModule,
-            MonkeyEcxDirectivesModule,
-            MonkeyButtonModule,
-            MonkeyInputModule,
-            MonkeyIconModule,
-            TranslateModule.forChild()
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXPasswordStrengthModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MECXPasswordStrengthComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MonkeyEcxPipesModule,
-                        MonkeyEcxDirectivesModule,
-                        MonkeyButtonModule,
-                        MonkeyInputModule,
-                        MonkeyIconModule,
-                        TranslateModule.forChild()
-                    ],
-                    exports: [MECXPasswordStrengthComponent]
-                }]
-        }] });
-
-class MECXProgressBarService {
-    constructor(router) {
-        this.router = router;
-        this.visible = new BehaviorSubject(false);
-        this.init();
-    }
-    init() {
-        this.router.events
-            .pipe(filter((event) => {
-            return event instanceof NavigationStart;
-        }))
-            .subscribe(() => {
-            this.show();
-        });
-        this.router.events
-            .pipe(filter((event) => {
-            return (event instanceof NavigationEnd ||
-                event instanceof NavigationError ||
-                event instanceof NavigationCancel);
-        }))
-            .subscribe(() => {
-            this.hide();
-        });
-    }
-    show() {
-        this.visible.next(true);
-    }
-    hide() {
-        this.visible.next(false);
-    }
-    visibleConfig() {
-        return this.visible.asObservable();
-    }
-}
-MECXProgressBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProgressBarService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-MECXProgressBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProgressBarService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProgressBarService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }]; } });
-
-class MECXProgressBarComponent extends BaseComponent {
-    constructor(progressBarService) {
-        super();
-        this.progressBarService = progressBarService;
-        this.visible = false;
-    }
-    ngOnInit() {
-        this.progressBarService
-            .visibleConfig()
-            .pipe(takeUntil(this.__unsubscribeAll))
-            .subscribe((visible) => {
-            this.visible = visible;
-        });
-    }
-}
-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 });
-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"] }]
-        }], ctorParameters: function () { return [{ type: MECXProgressBarService }]; } });
-
-class MECXProgressBarModule {
-}
-MECXProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MECXProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProgressBarModule, declarations: [MECXProgressBarComponent], imports: [CommonModule], exports: [MECXProgressBarComponent] });
-MECXProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProgressBarModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProgressBarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MECXProgressBarComponent],
-                    imports: [CommonModule],
-                    exports: [MECXProgressBarComponent]
-                }]
-        }] });
-
-class ProductsModel {
-    constructor(data) {
-        this.url = data?.url;
-        this.token = data?.token;
-        this.username = data?.username;
-        this.ownerGovernmentId = data?.ownerGovernmentId;
-        this.ownerName = data?.ownerName;
-        this.product = data?.product;
-        this.name = data?.name;
-        this.type = data?.type;
-        this.handleLogo();
-    }
-    handleLogo() {
-        const { product, token, url } = this;
-        if (!url)
-            return;
-        const sufix = {
-            SALES_FINANCE: 'SF_',
-            SPIKE: 'SF_',
-            SUPPLY_CHAIN: 'SF_'
-        }[product];
-        const { hostname } = new URL(url);
-        const lastDot = hostname?.lastIndexOf('.');
-        const previousLastDot = hostname?.lastIndexOf('.', lastDot - 1);
-        const domain = hostname?.substring(previousLastDot + 1, hostname?.length);
-        const handledToken = token?.replace(sufix, '');
-        const path = {
-            'monkeyecx.com': 'scf/br',
-            'monkey.exchange': 'scf/br',
-            'monkeyexchange.cl': 'scf/cl',
-            'sales.finance': 'sf',
-            'spike.cash': 'spike',
-            'monkey.credit': 'credit'
-        }[domain];
-        this.logo = `https://assets.monkey.exchange/${path}/wl/${handledToken}/login.svg`.toLowerCase();
-    }
-}
-
-class MECXProductsFilterComponent {
-    constructor() {
-        this.isLoading = false;
-        this.onChangeFilter = new EventEmitter();
-        this._search = '';
-        // not to do
-    }
-    onSearchFilter(event) {
-        this._search = event;
-        if (!event) {
-            this.onChangeFilter.next('');
-            return;
-        }
-        event = `${event}`.toLowerCase();
-        this.onChangeFilter.next(event);
-    }
-    onClearFilter() {
-        this._search = '';
-        this.onChangeFilter.next(this._search);
-    }
-}
-MECXProductsFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXProductsFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: MECXProductsFilterComponent, selector: "mecx-products-filter", inputs: { isLoading: "isLoading" }, outputs: { onChangeFilter: "onChangeFilter" }, ngImport: i0, template: "<monkey-input-filter [placeholder]=\"'SIDEBAR-ACTIONS.PROFILE.FILTER.SEARCH-INPUT' | translate\"\n  (onChange)=\"onSearchFilter($event)\" icon=\"search-16\" [(value)]=\"_search\">\n</monkey-input-filter>\n<monkey-button type=\"filter\" color=\"border\" (click)=\"onClearFilter()\">\n  Limpar\n</monkey-button>", styles: [":host{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:44px}:host ::ng-deep monkey-input-filter{width:100%}@media screen and (min-width: 960px){:host ::ng-deep monkey-input-filter{margin-right:8px}}\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"] }], pipes: { "translate": i1$3.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mecx-products-filter', template: "<monkey-input-filter [placeholder]=\"'SIDEBAR-ACTIONS.PROFILE.FILTER.SEARCH-INPUT' | translate\"\n  (onChange)=\"onSearchFilter($event)\" icon=\"search-16\" [(value)]=\"_search\">\n</monkey-input-filter>\n<monkey-button type=\"filter\" color=\"border\" (click)=\"onClearFilter()\">\n  Limpar\n</monkey-button>", styles: [":host{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}:host ::ng-deep mecx-form-field-filter mecx-form-field-body{height:44px}:host ::ng-deep monkey-input-filter{width:100%}@media screen and (min-width: 960px){:host ::ng-deep monkey-input-filter{margin-right:8px}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { isLoading: [{
-                type: Input
-            }], onChangeFilter: [{
-                type: Output
-            }] } });
-
-class MECXProductsComponent extends BaseComponent {
-    constructor(tokenStorage) {
-        super();
-        this.tokenStorage = tokenStorage;
-        this.onAccess = new EventEmitter();
-        this._filter = '';
-        this._hasMoreProducts = false;
-    }
-    onImgError(img) {
-        const index = Math.floor(Math.random() * (6 - 1 + 1)) + 1;
-        img.src = `https://assets.monkeyecx.com/icons/icon-${index}.svg`;
-        img.className = 'no-image';
-    }
-    onHandleProducts() {
-        const { _filter } = this;
-        this._filteredProducts = this._products.map(({ name, items }) => {
-            const found = items?.filter((_) => {
-                const cmpA = `${_.name}`.toLowerCase();
-                const cmpB = `${_filter}`.toLowerCase();
-                return cmpA.includes(cmpB);
-            });
-            if (found && found.length) {
-                return {
-                    name,
-                    items: found
-                };
-            }
-            return null;
-        }).filter((_) => { return _; });
-    }
-    onHandleMe() {
-        const programs = this.tokenStorage.getMe()?.programs?.map((_) => {
-            return new ProductsModel(_);
-        });
-        const onlyUnique = (value, index, self) => {
-            return self.indexOf(value) === index;
-        };
-        const products = programs.map(({ product }) => {
-            return product;
-        }).filter(onlyUnique);
-        this._hasMoreProducts = (products?.length || 0) > 1;
-        this._products = Object.entries(products).map(([key, value]) => {
-            const found = programs.filter(({ product }) => {
-                return `${product}` === `${value}`;
-            })?.sort((a, b) => {
-                const groupA = `${a?.name}`.toLowerCase();
-                const groupB = `${b?.name}`.toLowerCase();
-                return groupA !== groupB ? 1 : -1;
-            });
-            return {
-                name: value,
-                items: found
-            };
-        })?.sort((a, b) => {
-            const groupA = `${a?.name}`.toLowerCase();
-            const groupB = `${b?.name}`.toLowerCase();
-            return groupA !== groupB ? -1 : 1;
-        });
-        this._filteredProducts = this._products;
-    }
-    ngOnInit() {
-        this.tokenStorage
-            .meHasChanged()
-            .pipe(takeUntil(this.__unsubscribeAll))
-            .subscribe(() => {
-            this.onHandleMe();
-        });
-    }
-    onHandleChangeFilter(event) {
-        this._filter = event;
-        this.onHandleProducts();
-    }
-}
-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>\r\n<div class=\"products-list\">\r\n  <div *ngFor=\"let product of _filteredProducts\" class=\"product\">\r\n    <span class=\"title\" *ngIf=\"_hasMoreProducts\">{{ 'PRODUCTS.'+product.name | translate }}</span>\r\n    <div class=\"items\">\r\n      <div *ngFor=\"let item of product.items\" class=\"item\"\r\n        (click)=\"onAccess.next(item)\">\r\n        <div class=\"icon\">\r\n          <img [src]=\"item.logo\" #img (error)=\"onImgError(img)\">\r\n        </div>\r\n        <span class=\"name\">{{ item.name }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\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 } });
-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>\r\n<div class=\"products-list\">\r\n  <div *ngFor=\"let product of _filteredProducts\" class=\"product\">\r\n    <span class=\"title\" *ngIf=\"_hasMoreProducts\">{{ 'PRODUCTS.'+product.name | translate }}</span>\r\n    <div class=\"items\">\r\n      <div *ngFor=\"let item of product.items\" class=\"item\"\r\n        (click)=\"onAccess.next(item)\">\r\n        <div class=\"icon\">\r\n          <img [src]=\"item.logo\" #img (error)=\"onImgError(img)\">\r\n        </div>\r\n        <span class=\"name\">{{ item.name }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\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"] }]
-        }], ctorParameters: function () { return [{ type: i1$4.MonkeyEcxTokenStorageService }]; }, propDecorators: { onAccess: [{
-                type: Output
-            }] } });
-
-class MECXProductsModule {
-}
-MECXProductsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MECXProductsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsModule, declarations: [MECXProductsComponent, MECXProductsFilterComponent], imports: [CommonModule, i1$3.TranslateModule, MonkeyInputModule, MonkeyButtonModule], exports: [MECXProductsComponent] });
-MECXProductsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsModule, imports: [[CommonModule, TranslateModule.forChild(), MonkeyInputModule, MonkeyButtonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: MECXProductsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MECXProductsComponent, MECXProductsFilterComponent],
-                    imports: [CommonModule, TranslateModule.forChild(), MonkeyInputModule, MonkeyButtonModule],
-                    exports: [MECXProductsComponent]
-                }]
-        }] });
-
-/*
- * Public API Surface of monkey-front-components
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { BaseComponent, BaseDynamic, BaseDynamicArray, BaseScrollComponent, MECXDynamicDirective, MECXDynamicFileUploadComponent, MECXDynamicFormArrayComponent, MECXDynamicFormComponent, MECXDynamicInputComponent, MECXDynamicInputPhoneComponent, MECXDynamicModule, MECXDynamicRadioComponent, MECXDynamicSelectComponent, MECXFilterComponent, MECXFilterModule, MECXPasswordStrengthComponent, MECXPasswordStrengthModule, MECXProductsComponent, MECXProductsModule, MECXProgressBarComponent, MECXProgressBarModule, MECXProgressBarService, validators };
-//# sourceMappingURL=monkey-front-components.mjs.map