monkey-front-components 0.0.274 → 0.0.277

package/esm2020/lib/components/base/base-scroll-component.mjs

@@ -0,0 +1,70 @@
+import { isPlatformBrowser } from '@angular/common';
+import { Directive } from '@angular/core';
+import { NavigationEnd, NavigationStart } from '@angular/router';
+import { BaseComponent } from './base-component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+export class BaseScrollComponent extends BaseComponent {
+    constructor(_pId, _rt) {
+        super();
+        this._pId = _pId;
+        this._rt = _rt;
+        this.routeScrollPositions = {};
+        this.deferredRestore = false;
+    }
+    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) {
+            this.deferredRestore = false;
+            return false;
+        }
+        element.scrollTop = savedScroll;
+        this.deferredRestore = false;
+        return true;
+    }
+    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) {
+                if (!this.restoreScroll(event.url)) {
+                    setTimeout(() => {
+                        if (this.deferredRestore) {
+                            this.restoreScroll(event.url);
+                            this.deferredRestore = false;
+                        }
+                    });
+                    this.deferredRestore = true;
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this._pId)) {
+            this.addScrollTopListeners();
+        }
+    }
+    ngAfterContentChecked() {
+        if (this.deferredRestore) {
+            this.restoreScroll(this._rt.url);
+        }
+    }
+}
+BaseScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BaseScrollComponent, deps: [{ token: Object }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
+BaseScrollComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: BaseScrollComponent, selector: "[baseScrollComponent]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BaseScrollComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[baseScrollComponent]'
+                }]
+        }], ctorParameters: function () { return [{ type: Object }, { type: i1.Router }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1zY3JvbGwtY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbW9ua2V5LWZyb250LWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2Jhc2UvYmFzZS1zY3JvbGwtY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3BELE9BQU8sRUFBdUIsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFVLE1BQU0saUJBQWlCLENBQUM7QUFDekUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7QUFLakQsTUFBTSxPQUFnQixtQkFBb0IsU0FBUSxhQUFhO0lBTTdELFlBQW9CLElBQVksRUFBVSxHQUFXO1FBQ25ELEtBQUssRUFBRSxDQUFDO1FBRFUsU0FBSSxHQUFKLElBQUksQ0FBUTtRQUFVLFFBQUcsR0FBSCxHQUFHLENBQVE7UUFKN0MseUJBQW9CLEdBQThCLEVBQUUsQ0FBQztRQUVyRCxvQkFBZSxHQUFHLEtBQUssQ0FBQztJQUloQyxDQUFDO0lBRU8sVUFBVSxDQUFDLEdBQVc7UUFDNUIsTUFBTSxPQUFPLEdBQVEsUUFBUSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUM1RCxJQUFJLENBQUMsb0JBQW9CLENBQUMsR0FBRyxDQUFDLEdBQUcsT0FBTyxDQUFDLFNBQVMsQ0FBQztJQUNyRCxDQUFDO0lBRU8sYUFBYSxDQUFDLEdBQVc7UUFDL0IsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ25ELE1BQU0sT0FBTyxHQUFRLFFBQVEsQ0FBQyxjQUFjLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDNUQsSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNoQixJQUFJLENBQUMsZUFBZSxHQUFHLEtBQUssQ0FBQztZQUM3QixPQUFPLEtBQUssQ0FBQztTQUNkO1FBRUQsT0FBTyxDQUFDLFNBQVMsR0FBRyxXQUFXLENBQUM7UUFDaEMsSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7UUFDN0IsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0lBRU8scUJBQXFCO1FBQzNCLElBQUksbUJBQW1CLElBQUksT0FBTyxFQUFFO1lBQ2xDLE9BQU8sQ0FBQyxpQkFBaUIsR0FBRyxRQUFRLENBQUM7U0FDdEM7UUFFRCxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDaEMsSUFBSSxLQUFLLFlBQVksZUFBZSxFQUFFO2dCQUNwQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7YUFDL0I7aUJBQU0sSUFBSSxLQUFLLFlBQVksYUFBYSxFQUFFO2dCQUN6QyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEVBQUU7b0JBQ2xDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7d0JBQ2QsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFOzRCQUN4QixJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQzs0QkFDOUIsSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7eUJBQzlCO29CQUNILENBQUMsQ0FBQyxDQUFDO29CQUNILElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO2lCQUM3QjthQUNGO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksaUJBQWlCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQ2hDLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1NBQzlCO0lBQ0gsQ0FBQztJQUVELHFCQUFxQjtRQUNuQixJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDeEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQzs7Z0hBNURtQixtQkFBbUIsa0JBTWIsTUFBTTtvR0FOWixtQkFBbUI7MkZBQW5CLG1CQUFtQjtrQkFIeEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsdUJBQXVCO2lCQUNsQzswREFPMkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGlzUGxhdGZvcm1Ccm93c2VyIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEFmdGVyQ29udGVudENoZWNrZWQsIERpcmVjdGl2ZSwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOYXZpZ2F0aW9uRW5kLCBOYXZpZ2F0aW9uU3RhcnQsIFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBCYXNlQ29tcG9uZW50IH0gZnJvbSAnLi9iYXNlLWNvbXBvbmVudCc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tiYXNlU2Nyb2xsQ29tcG9uZW50XSdcbn0pXG5leHBvcnQgYWJzdHJhY3QgY2xhc3MgQmFzZVNjcm9sbENvbXBvbmVudCBleHRlbmRzIEJhc2VDb21wb25lbnRcbiAgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyQ29udGVudENoZWNrZWQge1xuICBwcml2YXRlIHJvdXRlU2Nyb2xsUG9zaXRpb25zOiB7IFt1cmw6IHN0cmluZ106IG51bWJlciB9ID0ge307XG5cbiAgcHJpdmF0ZSBkZWZlcnJlZFJlc3RvcmUgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9wSWQ6IE9iamVjdCwgcHJpdmF0ZSBfcnQ6IFJvdXRlcikge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBwcml2YXRlIHNhdmVTY3JvbGwodXJsOiBzdHJpbmcpIHtcbiAgICBjb25zdCBlbGVtZW50OiBhbnkgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY29udGFpbmVyLTMnKTtcbiAgICB0aGlzLnJvdXRlU2Nyb2xsUG9zaXRpb25zW3VybF0gPSBlbGVtZW50LnNjcm9sbFRvcDtcbiAgfVxuXG4gIHByaXZhdGUgcmVzdG9yZVNjcm9sbCh1cmw6IHN0cmluZykge1xuICAgIGNvbnN0IHNhdmVkU2Nyb2xsID0gdGhpcy5yb3V0ZVNjcm9sbFBvc2l0aW9uc1t1cmxdO1xuICAgIGNvbnN0IGVsZW1lbnQ6IGFueSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjb250YWluZXItMycpO1xuICAgIGlmICghc2F2ZWRTY3JvbGwpIHtcbiAgICAgIHRoaXMuZGVmZXJyZWRSZXN0b3JlID0gZmFsc2U7XG4gICAgICByZXR1cm4gZmFsc2U7XG4gICAgfVxuXG4gICAgZWxlbWVudC5zY3JvbGxUb3AgPSBzYXZlZFNjcm9sbDtcbiAgICB0aGlzLmRlZmVycmVkUmVzdG9yZSA9IGZhbHNlO1xuICAgIHJldHVybiB0cnVlO1xuICB9XG5cbiAgcHJpdmF0ZSBhZGRTY3JvbGxUb3BMaXN0ZW5lcnMoKSB7XG4gICAgaWYgKCdzY3JvbGxSZXN0b3JhdGlvbicgaW4gaGlzdG9yeSkge1xuICAgICAgaGlzdG9yeS5zY3JvbGxSZXN0b3JhdGlvbiA9ICdtYW51YWwnO1xuICAgIH1cblxuICAgIHRoaXMuX3J0LmV2ZW50cy5zdWJzY3JpYmUoZXZlbnQgPT4ge1xuICAgICAgaWYgKGV2ZW50IGluc3RhbmNlb2YgTmF2aWdhdGlvblN0YXJ0KSB7XG4gICAgICAgIHRoaXMuc2F2ZVNjcm9sbCh0aGlzLl9ydC51cmwpO1xuICAgICAgfSBlbHNlIGlmIChldmVudCBpbnN0YW5jZW9mIE5hdmlnYXRpb25FbmQpIHtcbiAgICAgICAgaWYgKCF0aGlzLnJlc3RvcmVTY3JvbGwoZXZlbnQudXJsKSkge1xuICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgaWYgKHRoaXMuZGVmZXJyZWRSZXN0b3JlKSB7XG4gICAgICAgICAgICAgIHRoaXMucmVzdG9yZVNjcm9sbChldmVudC51cmwpO1xuICAgICAgICAgICAgICB0aGlzLmRlZmVycmVkUmVzdG9yZSA9IGZhbHNlO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH0pO1xuICAgICAgICAgIHRoaXMuZGVmZXJyZWRSZXN0b3JlID0gdHJ1ZTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKGlzUGxhdGZvcm1Ccm93c2VyKHRoaXMuX3BJZCkpIHtcbiAgICAgIHRoaXMuYWRkU2Nyb2xsVG9wTGlzdGVuZXJzKCk7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRDaGVja2VkKCkge1xuICAgIGlmICh0aGlzLmRlZmVycmVkUmVzdG9yZSkge1xuICAgICAgdGhpcy5yZXN0b3JlU2Nyb2xsKHRoaXMuX3J0LnVybCk7XG4gICAgfVxuICB9XG59XG4iXX0=

package/esm2020/lib/components/base/index.mjs

@@ -1,5 +1,6 @@
 export * from './base-component';
-export * from './base-dynamic';
 export * from './base-dynamic-array';
+export * from './base-dynamic';
+export * from './base-scroll-component';
 export * from './base-validators';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktZnJvbnQtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYmFzZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLG1CQUFtQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9iYXNlLWNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2Jhc2UtZHluYW1pYyc7XG5leHBvcnQgKiBmcm9tICcuL2Jhc2UtZHluYW1pYy1hcnJheSc7XG5leHBvcnQgKiBmcm9tICcuL2Jhc2UtdmFsaWRhdG9ycyc7XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktZnJvbnQtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvYmFzZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2Jhc2UtY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vYmFzZS1keW5hbWljLWFycmF5JztcbmV4cG9ydCAqIGZyb20gJy4vYmFzZS1keW5hbWljJztcbmV4cG9ydCAqIGZyb20gJy4vYmFzZS1zY3JvbGwtY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vYmFzZS12YWxpZGF0b3JzJztcbiJdfQ==

package/fesm2015/monkey-front-components.mjs

@@ -2,18 +2,18 @@ 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 * as i1$2 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 * as i1$3 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 { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/router';
+import { NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
 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() {
@@ -341,99 +341,6 @@ const validators = {
     }
 };
 
-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]) => {
-            var _a, _b, _c;
-            if (MonkeyUtils.persistNullEmptyUndefined(value) && ((_a = this._form) === null || _a === void 0 ? void 0 : _a.controls[key])) {
-                (_c = (_b = this._form) === null || _b === void 0 ? void 0 : _b.controls[key]) === null || _c === void 0 ? void 0 : _c.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.2.0", ngImport: i0, type: BaseDynamic, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
-BaseDynamic.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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();
@@ -644,6 +551,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 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]) => {
+            var _a, _b, _c;
+            if (MonkeyUtils.persistNullEmptyUndefined(value) && ((_a = this._form) === null || _a === void 0 ? void 0 : _a.controls[key])) {
+                (_c = (_b = this._form) === null || _b === void 0 ? void 0 : _b.controls[key]) === null || _c === void 0 ? void 0 : _c.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.2.0", ngImport: i0, type: BaseDynamic, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
+BaseDynamic.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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 = {};
+        this.deferredRestore = false;
+    }
+    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) {
+            this.deferredRestore = false;
+            return false;
+        }
+        element.scrollTop = savedScroll;
+        this.deferredRestore = false;
+        return true;
+    }
+    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) {
+                if (!this.restoreScroll(event.url)) {
+                    setTimeout(() => {
+                        if (this.deferredRestore) {
+                            this.restoreScroll(event.url);
+                            this.deferredRestore = false;
+                        }
+                    });
+                    this.deferredRestore = true;
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this._pId)) {
+            this.addScrollTopListeners();
+        }
+    }
+    ngAfterContentChecked() {
+        if (this.deferredRestore) {
+            this.restoreScroll(this._rt.url);
+        }
+    }
+}
+BaseScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: BaseScrollComponent, selector: "[baseScrollComponent]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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;
@@ -675,7 +739,7 @@ class MECXDynamicFileUploadComponent {
     }
 }
 MECXDynamicFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXDynamicFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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 });
+MECXDynamicFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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": i4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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>" }]
@@ -725,7 +789,7 @@ class MECXDynamicButtonComponent {
     }
 }
 MECXDynamicButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXDynamicButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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 });
+MECXDynamicButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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": i4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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"] }]
@@ -782,7 +846,7 @@ class MECXDynamicInputComponent {
     }
 }
 MECXDynamicInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXDynamicInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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 });
+MECXDynamicInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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": i4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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>" }]
@@ -844,7 +908,7 @@ class MECXDynamicInputPhoneComponent {
     }
 }
 MECXDynamicInputPhoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXDynamicInputPhoneComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicInputPhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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 });
+MECXDynamicInputPhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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": i4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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>" }]
@@ -879,7 +943,7 @@ class MECXDynamicRadioComponent {
     }
 }
 MECXDynamicRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXDynamicRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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 });
+MECXDynamicRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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": i4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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>" }]
@@ -955,7 +1019,7 @@ class MECXDynamicSelectComponent {
     }
 }
 MECXDynamicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXDynamicSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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 });
+MECXDynamicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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": i4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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>" }]
@@ -1033,7 +1097,7 @@ class MECXDynamicSelectSearchComponent {
     }
 }
 MECXDynamicSelectSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXDynamicSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MECXDynamicSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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 });
+MECXDynamicSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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": i4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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>" }]
@@ -1235,7 +1299,7 @@ class MECXDynamicFormArrayComponent extends BaseDynamicArray {
     }
 }
 MECXDynamicFormArrayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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 });
+MECXDynamicFormArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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": i4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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"] }]
@@ -1376,12 +1440,12 @@ class MECXPasswordStrengthComponent {
         this.onHandleChages();
     }
 }
-MECXPasswordStrengthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXPasswordStrengthComponent, deps: [{ token: i1$2.MonkeyEcxConfigService }], target: i0.ɵɵFactoryTarget.Component });
-MECXPasswordStrengthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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;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 });
+MECXPasswordStrengthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXPasswordStrengthComponent, deps: [{ token: i1$3.MonkeyEcxConfigService }], target: i0.ɵɵFactoryTarget.Component });
+MECXPasswordStrengthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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;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$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"] }], pipes: { "translate": i4.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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;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: [{
+        }], ctorParameters: function () { return [{ type: i1$3.MonkeyEcxConfigService }]; }, propDecorators: { passwordToCheck: [{
                 type: Input
             }], onHandleSubmitReady: [{
                 type: Output
@@ -1462,14 +1526,14 @@ class MECXProgressBarService {
         return this.visible.asObservable();
     }
 }
-MECXProgressBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXProgressBarService, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+MECXProgressBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXProgressBarService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 MECXProgressBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXProgressBarService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MECXProgressBarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.Router }]; } });
 
 class MECXProgressBarComponent extends BaseComponent {
     constructor(progressBarService) {
@@ -1515,5 +1579,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
  * 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 };
+export { BaseComponent, BaseDynamic, BaseDynamicArray, BaseScrollComponent, MECXDynamicDirective, MECXDynamicFileUploadComponent, MECXDynamicFormArrayComponent, MECXDynamicFormComponent, MECXDynamicInputComponent, MECXDynamicInputPhoneComponent, MECXDynamicModule, MECXDynamicRadioComponent, MECXDynamicSelectComponent, MECXPasswordStrengthComponent, MECXPasswordStrengthModule, MECXProgressBarComponent, MECXProgressBarModule, MECXProgressBarService, validators };
 //# sourceMappingURL=monkey-front-components.mjs.map