monkey-front-components 0.0.180 → 0.0.181

package/fesm2020/monkey-front-components.mjs

@@ -0,0 +1,1477 @@
+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, filter } from 'rxjs/operators';
+import * as i1$1 from 'monkey-style-guide';
+import { MonkeyUtils, MonkeyInputModule, MonkeySelectModule, MonkeyRadioButtonModule, MonkeyOptionModule, MonkeyFileUploadModule, MonkeyButtonModule, MonkeyInputPhoneModule, MonkeyIconModule } from 'monkey-style-guide';
+import * as i1$2 from 'monkey-front-core';
+import { MonkeyEcxCommonsService, ValidateUtils, Validators as Validators$1, MonkeyEcxUtils, MonkeyEcxPipesModule, MonkeyEcxDirectivesModule } 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 { CommonModule } from '@angular/common';
+import * as i4 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i1$3 from '@angular/router';
+import { NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
+
+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;
+            setTimeout(() => {
+                const element = document.getElementById(mainElement);
+                if (element) {
+                    element.scroll = null;
+                    element.onscroll = null;
+                    if (create) {
+                        this.paginationFunc = () => {
+                            const { scrollTop, scrollHeight, offsetHeight } = element;
+                            const contentHeight = scrollHeight - offsetHeight;
+                            if (contentHeight <= scrollTop) {
+                                service.__onDoPagination$.next(null);
+                            }
+                        };
+                        element.addEventListener('scroll', this.paginationFunc);
+                    }
+                    else {
+                        element.removeEventListener('scroll', this.paginationFunc);
+                    }
+                }
+            }, 200);
+        }
+    }
+    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;
+            }
+        });
+    }
+    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';
+        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);
+        }
+    }
+    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];
+    }
+}
+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 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 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 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$1.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": i4.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$1.MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], pipes: { "translate": i4.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$1.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": i4.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$1.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": i4.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$1.MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "value"], outputs: ["onChange"] }, { type: i1$1.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": i4.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$1.MonkeySelectComponent, selector: "monkey-select", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "labelSelect", "onHandleOptions", "value"], outputs: ["onChange"] }, { type: i1$1.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": i4.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;
+        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
+            });
+        }
+    }
+}
+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$1.MonkeySelectSearchComponent, selector: "monkey-select-search", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "labelSelect", "fieldToCompare", "onHandleOptions", "value"], outputs: ["onChange", "onSearch"] }, { type: i1$1.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": i4.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$1.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": i4.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, i4.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 MECXPasswordStrengthComponent {
+    constructor(configService) {
+        this.configService = configService;
+        this.passwordToCheck = 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$2.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" }, 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>{{ 'SCREENS.LOGIN.REGISTER.PASSWORD-STRENGTH.TITLE' | translate }}</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\" [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        {{ 'SCREENS.LOGIN.REGISTER.PASSWORD-STRENGTH.TYPES.' + validators.regex | translate }}\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    {{ 'SCREENS.LOGIN.REGISTER.PASSWORD-STRENGTH.LABELS.' + _stepPassword | translate }}\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;grid-gap:.5rem;gap:.5rem}mecx-password-strength .strength-bar .bar-label{font-style:normal;font-weight:400;font-size:14px;line-height:16px;color:#4b4a53}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}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$1.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"] }], pipes: { "translate": i4.TranslatePipe }, 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>{{ 'SCREENS.LOGIN.REGISTER.PASSWORD-STRENGTH.TITLE' | translate }}</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\" [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        {{ 'SCREENS.LOGIN.REGISTER.PASSWORD-STRENGTH.TYPES.' + validators.regex | translate }}\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    {{ 'SCREENS.LOGIN.REGISTER.PASSWORD-STRENGTH.LABELS.' + _stepPassword | translate }}\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;grid-gap:.5rem;gap:.5rem}mecx-password-strength .strength-bar .bar-label{font-style:normal;font-weight:400;font-size:14px;line-height:16px;color:#4b4a53}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}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$2.MonkeyEcxConfigService }]; }, propDecorators: { passwordToCheck: [{
+                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, i4.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$3.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$3.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]
+                }]
+        }] });
+
+/*
+ * Public API Surface of monkey-front-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseComponent, BaseDynamic, BaseDynamicArray, MECXDynamicDirective, MECXDynamicFileUploadComponent, MECXDynamicFormArrayComponent, MECXDynamicFormComponent, MECXDynamicInputComponent, MECXDynamicInputPhoneComponent, MECXDynamicModule, MECXDynamicRadioComponent, MECXDynamicSelectComponent, MECXPasswordStrengthComponent, MECXPasswordStrengthModule, MECXProgressBarComponent, MECXProgressBarModule, MECXProgressBarService, validators };
+//# sourceMappingURL=monkey-front-components.mjs.map