monkey-style-guide 2.0.97 → 2.0.101

package/bundles/monkey-style-guide.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@angular/common'), require('google-libphonenumber'), require('rxjs/operators'), require('@angular/forms'), require('moment'), require('ngx-mask'), require('@angular/platform-browser')) :
     typeof define === 'function' && define.amd ? define('monkey-style-guide', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@angular/common', 'google-libphonenumber', 'rxjs/operators', '@angular/forms', 'moment', 'ngx-mask', '@angular/platform-browser'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["monkey-style-guide"] = {}, global.ng.core, global.rxjs, global.ng.common.http, global.ng.common, global["google-libphonenumber"], global.rxjs.operators, global.ng.forms, global.moment, global["ngx-mask"], global.ng.platformBrowser));
-})(this, (function (exports, i0, rxjs, i1, i1$1, googleLibphonenumber, operators, i4, moment_, i1$2, i1$3) { 'use strict';
+})(this, (function (exports, i0, rxjs, i1, i1$1, googleLibphonenumber, operators, i1$2, moment_, i1$3, i1$4) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -25,10 +25,10 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var moment___namespace = /*#__PURE__*/_interopNamespace(moment_);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
+    var moment___namespace = /*#__PURE__*/_interopNamespace(moment_);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
+    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
 
     var MonkeyStyleGuideService = /** @class */ (function () {
         function MonkeyStyleGuideService(http) {
@@ -702,15 +702,10 @@
                 return false;
             try {
                 var country = phoneUtil.getRegionCodeForCountryCode(internationalNumber);
-                console.log('country');
-                console.log(country);
                 var number = phoneUtil.parse(phone, country);
-                console.log('number');
-                console.log(number);
                 return phoneUtil.isValidNumberForRegion(number, country);
             }
             catch (e) {
-                console.log(e);
                 //not to do
             }
             return false;
@@ -2779,13 +2774,13 @@
         return MonkeyButtonModule;
     }());
     MonkeyButtonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyButtonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    MonkeyButtonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyButtonModule, declarations: [MonkeyButtonComponent, MonkeyButtonDropdownComponent, MonkeyButtonAvatarComponent], imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyIconModule], exports: [MonkeyButtonComponent, MonkeyButtonDropdownComponent, MonkeyButtonAvatarComponent] });
-    MonkeyButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyButtonModule, imports: [[i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyIconModule]] });
+    MonkeyButtonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyButtonModule, declarations: [MonkeyButtonComponent, MonkeyButtonDropdownComponent, MonkeyButtonAvatarComponent], imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyIconModule], exports: [MonkeyButtonComponent, MonkeyButtonDropdownComponent, MonkeyButtonAvatarComponent] });
+    MonkeyButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyButtonModule, imports: [[i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyIconModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyButtonModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [MonkeyButtonComponent, MonkeyButtonDropdownComponent, MonkeyButtonAvatarComponent],
-                        imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyIconModule],
+                        imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyIconModule],
                         exports: [MonkeyButtonComponent, MonkeyButtonDropdownComponent, MonkeyButtonAvatarComponent],
                         schemas: [i0.NO_ERRORS_SCHEMA],
                     }]
@@ -2810,8 +2805,8 @@
         }
         MonkeyDateRangePickerComponent.prototype.initDateRange = function () {
             return (this._dateForm = this.fb.group({
-                startDate: [null, i4.Validators.required],
-                endDate: [null, i4.Validators.required],
+                startDate: [null, i1$2.Validators.required],
+                endDate: [null, i1$2.Validators.required],
             }));
         };
         MonkeyDateRangePickerComponent.prototype.createCalendar = function (month) {
@@ -2985,10 +2980,10 @@
         };
         return MonkeyDateRangePickerComponent;
     }());
-    MonkeyDateRangePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerComponent, deps: [{ token: i4__namespace.FormBuilder }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MonkeyDateRangePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerComponent, deps: [{ token: i1__namespace$2.FormBuilder }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyDateRangePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyDateRangePickerComponent, selector: "monkey-date-range-picker", inputs: { i18n: "i18n", infoMessage: "infoMessage", errorMessage: "errorMessage", value: "value" }, outputs: { onChange: "onChange" }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeyDateRangePickerComponent; }),
                 multi: true,
             },
@@ -3002,14 +2997,14 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeyDateRangePickerComponent; }),
                                 multi: true,
                             },
                             i1$1.CurrencyPipe,
                         ],
                     }]
-            }], ctorParameters: function () { return [{ type: i4__namespace.FormBuilder }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { i18n: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.FormBuilder }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { i18n: [{
                     type: i0.Input
                 }], infoMessage: [{
                     type: i0.Input
@@ -3027,13 +3022,13 @@
         return MonkeyDateRangePickerModule;
     }());
     MonkeyDateRangePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    MonkeyDateRangePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerModule, declarations: [MonkeyDateRangePickerComponent], imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyButtonModule, MonkeyIconModule], exports: [MonkeyDateRangePickerComponent] });
-    MonkeyDateRangePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerModule, imports: [[i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyButtonModule, MonkeyIconModule]] });
+    MonkeyDateRangePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerModule, declarations: [MonkeyDateRangePickerComponent], imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyButtonModule, MonkeyIconModule], exports: [MonkeyDateRangePickerComponent] });
+    MonkeyDateRangePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerModule, imports: [[i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyButtonModule, MonkeyIconModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyDateRangePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [MonkeyDateRangePickerComponent],
-                        imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyButtonModule, MonkeyIconModule],
+                        imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyButtonModule, MonkeyIconModule],
                         exports: [MonkeyDateRangePickerComponent],
                         schemas: [i0.NO_ERRORS_SCHEMA],
                     }]
@@ -3183,12 +3178,12 @@
     MonkeyInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputComponent, deps: [{ token: i1__namespace$1.CurrencyPipe }, { token: MonkeyStyleGuideSettingsService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyInputComponent, selector: "monkey-input", inputs: { name: "name", label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", type: "type", infoMessage: "infoMessage", errorMessage: "errorMessage", mask: "mask", prefix: "prefix", maxLength: "maxLength", onlyNumber: "onlyNumber", onlyAlphaNumeric: "onlyAlphaNumeric", upperCase: "upperCase", lowerCase: "lowerCase", capitalize: "capitalize", currency: "currency", percent: "percent", maxDateToday: "maxDateToday", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick()" } }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeyInputComponent; }),
                 multi: true,
             },
             i1$1.CurrencyPipe,
-        ], viewQueries: [{ propertyName: "monkeyInput", first: true, predicate: ["monkeyInput"], descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n        <monkey-icon\n          [icon]=\"icon\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"icon\"\n        ></monkey-icon>\n        <symbol>\n          {{ _symbol }}\n        </symbol>\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          (keypress)=\"onKeyPress($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          [disabled]=\"_disabled\"\n          [mask]=\"mask\"\n          [prefix]=\"prefix\"\n          *ngIf=\"mask && prefix\"\n          #monkeyInput\n        />\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          (keypress)=\"onKeyPress($event)\"\n          [disabled]=\"_disabled\"\n          [mask]=\"mask\"\n          *ngIf=\"mask && !prefix\"\n          #monkeyInput\n        />\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          (keypress)=\"onKeyPress($event)\"\n          [disabled]=\"_disabled\"\n          [maxLength]=\"maxLength\"\n          *ngIf=\"!mask && !prefix\"\n          [max]=\"maxDateToday ? _maxDateToday : null\"\n          #monkeyInput\n        />\n        <monkey-icon\n          icon=\"eye-open-16\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"_oldType === 'password' && type === 'text'\"\n          (click)=\"onShowAndHidePassword()\"\n        ></monkey-icon>\n        <monkey-icon\n          icon=\"eye-closed-16\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"_oldType === 'password' && type === 'password'\"\n          (click)=\"onShowAndHidePassword()\"\n        ></monkey-icon>\n      </mecx-form-field-body>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n  ", isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$2.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "monkeyInput", first: true, predicate: ["monkeyInput"], descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n        <monkey-icon\n          [icon]=\"icon\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"icon\"\n        ></monkey-icon>\n        <symbol>\n          {{ _symbol }}\n        </symbol>\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          (keypress)=\"onKeyPress($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          [disabled]=\"_disabled\"\n          [mask]=\"mask\"\n          [prefix]=\"prefix\"\n          *ngIf=\"mask && prefix\"\n          #monkeyInput\n        />\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          (keypress)=\"onKeyPress($event)\"\n          [disabled]=\"_disabled\"\n          [mask]=\"mask\"\n          *ngIf=\"mask && !prefix\"\n          #monkeyInput\n        />\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          (keypress)=\"onKeyPress($event)\"\n          [disabled]=\"_disabled\"\n          [maxLength]=\"maxLength\"\n          *ngIf=\"!mask && !prefix\"\n          [max]=\"maxDateToday ? _maxDateToday : null\"\n          #monkeyInput\n        />\n        <monkey-icon\n          icon=\"eye-open-16\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"_oldType === 'password' && type === 'text'\"\n          (click)=\"onShowAndHidePassword()\"\n        ></monkey-icon>\n        <monkey-icon\n          icon=\"eye-closed-16\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"_oldType === 'password' && type === 'password'\"\n          (click)=\"onShowAndHidePassword()\"\n        ></monkey-icon>\n      </mecx-form-field-body>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n  ", isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$3.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers"] }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3197,7 +3192,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeyInputComponent; }),
                                 multi: true,
                             },
@@ -3351,12 +3346,12 @@
     MonkeyInputFilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputFilterComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$1.CurrencyPipe }, { token: MonkeyStyleGuideSettingsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyInputFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyInputFilterComponent, selector: "monkey-input-filter", inputs: { name: "name", label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", type: "type", infoMessage: "infoMessage", errorMessage: "errorMessage", mask: "mask", prefix: "prefix", onlyNumber: "onlyNumber", onlyAlphaNumeric: "onlyAlphaNumeric", upperCase: "upperCase", lowerCase: "lowerCase", capitalize: "capitalize", currency: "currency", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeyInputFilterComponent; }),
                 multi: true,
             },
             i1$1.CurrencyPipe,
-        ], ngImport: i0__namespace, template: "\n    <mecx-form-field-filter [ngClass]=\"{ disabled: _disabled }\">\n      <mecx-form-field-body>\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [(ngModel)]=\"value\"\n          (input)=\"onChangeInput($event)\"\n          [id]=\"_id\"\n          [disabled]=\"_disabled\"\n          [mask]=\"mask\"\n          [prefix]=\"prefix\"\n          *ngIf=\"mask && prefix\"\n        />\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [(ngModel)]=\"value\"\n          (input)=\"onChangeInput($event)\"\n          [id]=\"_id\"\n          [disabled]=\"_disabled\"\n          [mask]=\"mask\"\n          *ngIf=\"mask && !prefix\"\n        />\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [(ngModel)]=\"value\"\n          (input)=\"onChangeInput($event)\"\n          [id]=\"_id\"\n          [disabled]=\"_disabled\"\n          *ngIf=\"!mask && !prefix\"\n        />\n        <monkey-icon [icon]=\"icon\" [color]=\"'#4B4A53'\"></monkey-icon>\n        <monkey-icon\n          icon=\"eyes-16\"\n          [color]=\"'#4B4A53'\"\n          *ngIf=\"_oldType === 'password' && type === 'text'\"\n          (click)=\"onShowAndHidePassword()\"\n        ></monkey-icon>\n        <monkey-icon\n          icon=\"eyes-off-16\"\n          [color]=\"'#4B4A53'\"\n          *ngIf=\"_oldType === 'password' && type === 'password'\"\n          (click)=\"onShowAndHidePassword()\"\n        ></monkey-icon>\n      </mecx-form-field-body>\n    </mecx-form-field-filter>\n  ", isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$2.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+        ], ngImport: i0__namespace, template: "\n    <mecx-form-field-filter [ngClass]=\"{ disabled: _disabled }\">\n      <mecx-form-field-body>\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [(ngModel)]=\"value\"\n          (input)=\"onChangeInput($event)\"\n          [id]=\"_id\"\n          [disabled]=\"_disabled\"\n          [mask]=\"mask\"\n          [prefix]=\"prefix\"\n          *ngIf=\"mask && prefix\"\n        />\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [(ngModel)]=\"value\"\n          (input)=\"onChangeInput($event)\"\n          [id]=\"_id\"\n          [disabled]=\"_disabled\"\n          [mask]=\"mask\"\n          *ngIf=\"mask && !prefix\"\n        />\n        <input\n          [name]=\"name\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [(ngModel)]=\"value\"\n          (input)=\"onChangeInput($event)\"\n          [id]=\"_id\"\n          [disabled]=\"_disabled\"\n          *ngIf=\"!mask && !prefix\"\n        />\n        <monkey-icon [icon]=\"icon\" [color]=\"'#4B4A53'\"></monkey-icon>\n        <monkey-icon\n          icon=\"eyes-16\"\n          [color]=\"'#4B4A53'\"\n          *ngIf=\"_oldType === 'password' && type === 'text'\"\n          (click)=\"onShowAndHidePassword()\"\n        ></monkey-icon>\n        <monkey-icon\n          icon=\"eyes-off-16\"\n          [color]=\"'#4B4A53'\"\n          *ngIf=\"_oldType === 'password' && type === 'password'\"\n          (click)=\"onShowAndHidePassword()\"\n        ></monkey-icon>\n      </mecx-form-field-body>\n    </mecx-form-field-filter>\n  ", isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$3.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers"] }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputFilterComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3365,7 +3360,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeyInputFilterComponent; }),
                                 multi: true,
                             },
@@ -3420,13 +3415,13 @@
     }());
     MonkeyInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     MonkeyInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputModule, declarations: [MonkeyInputComponent, MonkeyInputFilterComponent], imports: [i1$1.CommonModule,
-            i4.FormsModule,
-            i4.ReactiveFormsModule, i1__namespace$2.NgxMaskModule, MonkeyIconModule], exports: [MonkeyInputComponent, MonkeyInputFilterComponent] });
+            i1$2.FormsModule,
+            i1$2.ReactiveFormsModule, i1__namespace$3.NgxMaskModule, MonkeyIconModule], exports: [MonkeyInputComponent, MonkeyInputFilterComponent] });
     MonkeyInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputModule, imports: [[
                 i1$1.CommonModule,
-                i4.FormsModule,
-                i4.ReactiveFormsModule,
-                i1$2.NgxMaskModule.forRoot(),
+                i1$2.FormsModule,
+                i1$2.ReactiveFormsModule,
+                i1$3.NgxMaskModule.forRoot(),
                 MonkeyIconModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputModule, decorators: [{
@@ -3435,9 +3430,9 @@
                         declarations: [MonkeyInputComponent, MonkeyInputFilterComponent],
                         imports: [
                             i1$1.CommonModule,
-                            i4.FormsModule,
-                            i4.ReactiveFormsModule,
-                            i1$2.NgxMaskModule.forRoot(),
+                            i1$2.FormsModule,
+                            i1$2.ReactiveFormsModule,
+                            i1$3.NgxMaskModule.forRoot(),
                             MonkeyIconModule,
                         ],
                         exports: [MonkeyInputComponent, MonkeyInputFilterComponent],
@@ -3470,7 +3465,7 @@
     MonkeyOptionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyOptionComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyOptionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyOptionComponent, selector: "monkey-option", inputs: { type: "type", label: "label", value: "value", selectAll: "selectAll", selected: "selected", enableClick: "enableClick" }, outputs: { onSelectOption: "onSelectOption" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeyOptionComponent; }),
                 multi: true,
             },
@@ -3483,7 +3478,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeyOptionComponent; }),
                                 multi: true,
                             },
@@ -3657,7 +3652,7 @@
     MonkeySelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeySelectComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeySelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeySelectComponent, selector: "monkey-select", inputs: { label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", infoMessage: "infoMessage", errorMessage: "errorMessage", labelSelect: "labelSelect", onHandleOptions: "onHandleOptions", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "document:click": "clickout()" } }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeySelectComponent; }),
                 multi: true,
             },
@@ -3670,7 +3665,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeySelectComponent; }),
                                 multi: true,
                             },
@@ -3716,11 +3711,10 @@
         function PhoneNumberValidDirective() {
         }
         PhoneNumberValidDirective.prototype.onValidate = function () {
-            var _this = this;
-            var _d = this, destroyed = _d.destroyed, phoneNumber = _d.phoneNumber, internationalNumber = _d.internationalNumber;
-            if (destroyed || !phoneNumber)
+            var _d = this, ctrl = _d.ctrl, destroyed = _d.destroyed, phoneNumber = _d.phoneNumber, internationalNumber = _d.internationalNumber;
+            if (destroyed || !phoneNumber || !ctrl)
                 return;
-            var isValid = true;
+            var isValid = false;
             try {
                 isValid = MonkeyUtils.isPhoneNumberValid(phoneNumber, internationalNumber);
             }
@@ -3729,15 +3723,17 @@
             }
             if (!isValid) {
                 setTimeout(function () {
-                    _this.ctrl.markAsDirty();
-                    _this.ctrl.markAsTouched();
-                    _this.ctrl.setErrors({ invalidNumber: true });
+                    ctrl.markAsDirty();
+                    ctrl.markAsTouched();
+                    ctrl.setErrors({ phone: true });
                 }, 0);
             }
         };
         PhoneNumberValidDirective.prototype.ngOnChanges = function (_d) {
-            var phoneNumber = _d.phoneNumber;
-            if (phoneNumber && !phoneNumber.firstChange) {
+            var ctrl = _d.ctrl, phoneNumber = _d.phoneNumber, internationalNumber = _d.internationalNumber;
+            if ((phoneNumber && !phoneNumber.firstChange) ||
+                (internationalNumber && !internationalNumber.firstChange) ||
+                (ctrl && !ctrl.firstChange)) {
                 this.onValidate();
             }
         };
@@ -3762,7 +3758,8 @@
                     type: i0.Input
                 }] } });
     var MonkeyInputPhoneComponent = /** @class */ (function () {
-        function MonkeyInputPhoneComponent(cdr) {
+        function MonkeyInputPhoneComponent(ngControl, cdr) {
+            this.ngControl = ngControl;
             this.cdr = cdr;
             this.name = "mecx-input-phone-" + MonkeyUtils.getRandomString(10);
             this.helperMessage = '';
@@ -3776,6 +3773,10 @@
             this._regionCodes = [];
             this._countryCodes = [];
             this._internationalNumber = 55;
+            this._formControl = null;
+            if (this.ngControl != null) {
+                this.ngControl.valueAccessor = this;
+            }
         }
         MonkeyInputPhoneComponent.prototype.handleValue = function (value) {
             return MonkeyUtils.handleOnlyNumbers("" + value);
@@ -3788,18 +3789,16 @@
         };
         MonkeyInputPhoneComponent.prototype.getValue = function () {
             var _d = this, _internationalNumber = _d._internationalNumber, _handledValue = _d._handledValue;
-            return "+" + _internationalNumber + _handledValue;
+            if (_handledValue)
+                return "+" + _internationalNumber + _handledValue;
+            return '';
         };
         MonkeyInputPhoneComponent.prototype.ngOnInit = function () {
+            var _a;
             this._countryCodes = MonkeyUtils.getPhoneRegions();
             this.onHandleInternationalNumber();
             this.onHandleCountryCode(this._internationalNumber);
-        };
-        MonkeyInputPhoneComponent.prototype.ngOnChanges = function (sc) {
-            var _d = sc.formControl, firstChange = _d.firstChange, value = _d.currentValue.value;
-            if (sc && firstChange) {
-                this.onHandleInternationalNumber(value);
-            }
+            this._formControl = this.ngControl && (((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.form) || this.ngControl);
         };
         MonkeyInputPhoneComponent.prototype.onHandleInternationalNumber = function (value) {
             this._internationalNumber =
@@ -3870,31 +3869,22 @@
         };
         return MonkeyInputPhoneComponent;
     }());
-    MonkeyInputPhoneComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputPhoneComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MonkeyInputPhoneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyInputPhoneComponent, selector: "monkey-input-phone", inputs: { name: "name", label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", infoMessage: "infoMessage", errorMessage: "errorMessage", maxLength: "maxLength", formControl: "formControl", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick()" } }, providers: [
-            {
-                provide: i4.NG_VALUE_ACCESSOR,
-                useExisting: i0.forwardRef(function () { return MonkeyInputPhoneComponent; }),
-                multi: true,
-            },
-            i1$1.CurrencyPipe,
-        ], usesOnChanges: true, ngImport: i0__namespace, template: "\n    <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n        <monkey-icon\n          [icon]=\"icon\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"icon\"\n        ></monkey-icon>\n        <monkey-select\n          [(ngModel)]=\"_internationalNumber\"\n          [labelSelect]=\"onHandleInternationalNumberFormated()\"\n          (onChange)=\"onHandleCountryCode($event)\"\n        >\n          <monkey-option *ngFor=\"let cc of _countryCodes\" [label]=\"'+' + cc\" [value]=\"cc\">\n          </monkey-option>\n        </monkey-select>\n        <input\n          [name]=\"name\"\n          type=\"string\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          (keypress)=\"onKeyPress($event)\"\n          [disabled]=\"_disabled\"\n          [maxLength]=\"maxLength\"\n          phoneNumberValidate\n          [ctrl]=\"formControl\"\n          [phoneNumber]=\"_handledValue\"\n          [internationalNumber]=\"_internationalNumber\"\n          #monkeyInput\n        />\n      </mecx-form-field-body>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n  ", isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MonkeySelectComponent, selector: "monkey-select", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "labelSelect", "onHandleOptions", "value"], outputs: ["onChange"] }, { type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: PhoneNumberValidDirective, selector: "[phoneNumberValidate]", inputs: ["phoneNumber", "internationalNumber", "ctrl"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    MonkeyInputPhoneComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputPhoneComponent, deps: [{ token: i1__namespace$2.NgControl, optional: true, self: true }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MonkeyInputPhoneComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyInputPhoneComponent, selector: "monkey-input-phone", inputs: { name: "name", label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", infoMessage: "infoMessage", errorMessage: "errorMessage", maxLength: "maxLength", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0__namespace, template: "\n    <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n        <monkey-icon\n          [icon]=\"icon\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"icon\"\n        ></monkey-icon>\n        <monkey-select\n          [(ngModel)]=\"_internationalNumber\"\n          [labelSelect]=\"onHandleInternationalNumberFormated()\"\n          (onChange)=\"onHandleCountryCode($event)\"\n        >\n          <monkey-option *ngFor=\"let cc of _countryCodes\" [label]=\"'+' + cc\" [value]=\"cc\">\n          </monkey-option>\n        </monkey-select>\n        <input\n          [name]=\"name\"\n          type=\"string\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          (keypress)=\"onKeyPress($event)\"\n          [disabled]=\"_disabled\"\n          [maxLength]=\"maxLength\"\n          phoneNumberValidate\n          [ctrl]=\"_formControl\"\n          [phoneNumber]=\"_handledValue\"\n          [internationalNumber]=\"_internationalNumber\"\n          #monkeyInput\n        />\n        <!--phoneNumberValidate\n          [ctrl]=\"formControl\"\n          [phoneNumber]=\"_handledValue\"\n          [internationalNumber]=\"_internationalNumber\"-->\n      </mecx-form-field-body>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n  ", isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }, { type: MonkeySelectComponent, selector: "monkey-select", inputs: ["label", "helperMessage", "placeholder", "icon", "infoMessage", "errorMessage", "labelSelect", "onHandleOptions", "value"], outputs: ["onChange"] }, { type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["type", "label", "value", "selectAll", "selected", "enableClick"], outputs: ["onSelectOption"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: PhoneNumberValidDirective, selector: "[phoneNumberValidate]", inputs: ["phoneNumber", "internationalNumber", "ctrl"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputPhoneComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'monkey-input-phone',
-                        template: "\n    <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n        <monkey-icon\n          [icon]=\"icon\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"icon\"\n        ></monkey-icon>\n        <monkey-select\n          [(ngModel)]=\"_internationalNumber\"\n          [labelSelect]=\"onHandleInternationalNumberFormated()\"\n          (onChange)=\"onHandleCountryCode($event)\"\n        >\n          <monkey-option *ngFor=\"let cc of _countryCodes\" [label]=\"'+' + cc\" [value]=\"cc\">\n          </monkey-option>\n        </monkey-select>\n        <input\n          [name]=\"name\"\n          type=\"string\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          (keypress)=\"onKeyPress($event)\"\n          [disabled]=\"_disabled\"\n          [maxLength]=\"maxLength\"\n          phoneNumberValidate\n          [ctrl]=\"formControl\"\n          [phoneNumber]=\"_handledValue\"\n          [internationalNumber]=\"_internationalNumber\"\n          #monkeyInput\n        />\n      </mecx-form-field-body>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n  ",
+                        template: "\n    <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n        <monkey-icon\n          [icon]=\"icon\"\n          [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n          *ngIf=\"icon\"\n        ></monkey-icon>\n        <monkey-select\n          [(ngModel)]=\"_internationalNumber\"\n          [labelSelect]=\"onHandleInternationalNumberFormated()\"\n          (onChange)=\"onHandleCountryCode($event)\"\n        >\n          <monkey-option *ngFor=\"let cc of _countryCodes\" [label]=\"'+' + cc\" [value]=\"cc\">\n          </monkey-option>\n        </monkey-select>\n        <input\n          [name]=\"name\"\n          type=\"string\"\n          [placeholder]=\"placeholder\"\n          (input)=\"onChangeValue($event)\"\n          [id]=\"name\"\n          [(ngModel)]=\"_formatedValue\"\n          (keypress)=\"onKeyPress($event)\"\n          [disabled]=\"_disabled\"\n          [maxLength]=\"maxLength\"\n          phoneNumberValidate\n          [ctrl]=\"_formControl\"\n          [phoneNumber]=\"_handledValue\"\n          [internationalNumber]=\"_internationalNumber\"\n          #monkeyInput\n        />\n        <!--phoneNumberValidate\n          [ctrl]=\"formControl\"\n          [phoneNumber]=\"_handledValue\"\n          [internationalNumber]=\"_internationalNumber\"-->\n      </mecx-form-field-body>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n  ",
                         encapsulation: i0.ViewEncapsulation.None,
-                        providers: [
-                            {
-                                provide: i4.NG_VALUE_ACCESSOR,
-                                useExisting: i0.forwardRef(function () { return MonkeyInputPhoneComponent; }),
-                                multi: true,
-                            },
-                            i1$1.CurrencyPipe,
-                        ],
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { name: [{
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace$2.NgControl, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Self
+                        }] }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { name: [{
                     type: i0.Input
                 }], label: [{
                     type: i0.Input
@@ -3910,8 +3900,6 @@
                     type: i0.Input
                 }], maxLength: [{
                     type: i0.Input
-                }], formControl: [{
-                    type: i0.Input
                 }], onChange: [{
                     type: i0.Output
                 }], value: [{
@@ -4106,7 +4094,7 @@
     MonkeySelectMultipleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeySelectMultipleComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeySelectMultipleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeySelectMultipleComponent, selector: "monkey-select-multiple", inputs: { label: "label", labelMoreValues: "labelMoreValues", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", infoMessage: "infoMessage", errorMessage: "errorMessage", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "document:click": "clickout()" } }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeySelectMultipleComponent; }),
                 multi: true,
             },
@@ -4119,7 +4107,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeySelectMultipleComponent; }),
                                 multi: true,
                             },
@@ -4326,11 +4314,11 @@
     MonkeySelectSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeySelectSearchComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeySelectSearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeySelectSearchComponent, selector: "monkey-select-search", inputs: { label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", infoMessage: "infoMessage", errorMessage: "errorMessage", labelSelect: "labelSelect", fieldToCompare: "fieldToCompare", onHandleOptions: "onHandleOptions", value: "value" }, outputs: { onChange: "onChange", onSearch: "onSearch" }, host: { listeners: { "document:click": "clickout()" } }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeySelectSearchComponent; }),
                 multi: true,
             },
-        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], viewQueries: [{ propertyName: "selectOptions", first: true, predicate: ["selectOptions"], descendants: true, static: true }, { propertyName: "inputFilter", first: true, predicate: ["inputFilter"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "\n    <mecx-form-field [id]=\"_id\" [ngClass]=\"{ disabled: _disabled }\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body (click)=\"open()\" [class.error]=\"errorMessage?.trim()\">\n        <monkey-icon [icon]=\"icon\" [color]=\"'#aaaaaa'\"></monkey-icon>\n        <mecx-select class=\"trigger\" [ngClass]=\"{ open: _opened }\">\n          <mecx-select__trigger>\n            <input\n              [placeholder]=\"labelSelect || placeholder\"\n              (input)=\"onChangeInput($event)\"\n              #inputFilter\n              [ngModel]=\"_selected?.label || ''\"\n            />\n            <monkey-icon\n              [icon]=\"!_opened ? 'arrow-down-16' : 'arrow-up-16'\"\n              [color]=\"'#4B4A53'\"\n            ></monkey-icon>\n          </mecx-select__trigger>\n        </mecx-select>\n      </mecx-form-field-body>\n      <mecx-select-inside [ngClass]=\"{ open: _opened }\">\n        <mecx-select-options #selectOptions>\n          <ng-content> </ng-content>\n        </mecx-select-options>\n      </mecx-select-inside>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n  ", isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], viewQueries: [{ propertyName: "selectOptions", first: true, predicate: ["selectOptions"], descendants: true, static: true }, { propertyName: "inputFilter", first: true, predicate: ["inputFilter"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "\n    <mecx-form-field [id]=\"_id\" [ngClass]=\"{ disabled: _disabled }\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body (click)=\"open()\" [class.error]=\"errorMessage?.trim()\">\n        <monkey-icon [icon]=\"icon\" [color]=\"'#aaaaaa'\"></monkey-icon>\n        <mecx-select class=\"trigger\" [ngClass]=\"{ open: _opened }\">\n          <mecx-select__trigger>\n            <input\n              [placeholder]=\"labelSelect || placeholder\"\n              (input)=\"onChangeInput($event)\"\n              #inputFilter\n              [ngModel]=\"_selected?.label || ''\"\n            />\n            <monkey-icon\n              [icon]=\"!_opened ? 'arrow-down-16' : 'arrow-up-16'\"\n              [color]=\"'#4B4A53'\"\n            ></monkey-icon>\n          </mecx-select__trigger>\n        </mecx-select>\n      </mecx-form-field-body>\n      <mecx-select-inside [ngClass]=\"{ open: _opened }\">\n        <mecx-select-options #selectOptions>\n          <ng-content> </ng-content>\n        </mecx-select-options>\n      </mecx-select-inside>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n  ", isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeySelectSearchComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4339,7 +4327,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeySelectSearchComponent; }),
                                 multi: true,
                             },
@@ -4491,7 +4479,7 @@
     MonkeySelectFilterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeySelectFilterComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeySelectFilterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeySelectFilterComponent, selector: "monkey-select-filter", inputs: { placeholder: "placeholder", icon: "icon", type: "type", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "document:click": "clickout()" } }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeySelectFilterComponent; }),
                 multi: true,
             },
@@ -4504,7 +4492,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeySelectFilterComponent; }),
                                 multi: true,
                             },
@@ -4541,8 +4529,8 @@
             MonkeySelectMultipleComponent,
             MonkeySelectSearchComponent,
             MonkeySelectFilterComponent], imports: [i1$1.CommonModule,
-            i4.FormsModule,
-            i4.ReactiveFormsModule,
+            i1$2.FormsModule,
+            i1$2.ReactiveFormsModule,
             MonkeyInputModule,
             MonkeyOptionModule,
             MonkeyIconModule], exports: [MonkeySelectComponent,
@@ -4551,8 +4539,8 @@
             MonkeySelectFilterComponent] });
     MonkeySelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeySelectModule, imports: [[
                 i1$1.CommonModule,
-                i4.FormsModule,
-                i4.ReactiveFormsModule,
+                i1$2.FormsModule,
+                i1$2.ReactiveFormsModule,
                 MonkeyInputModule,
                 MonkeyOptionModule,
                 MonkeyIconModule,
@@ -4568,8 +4556,8 @@
                         ],
                         imports: [
                             i1$1.CommonModule,
-                            i4.FormsModule,
-                            i4.ReactiveFormsModule,
+                            i1$2.FormsModule,
+                            i1$2.ReactiveFormsModule,
                             MonkeyInputModule,
                             MonkeyOptionModule,
                             MonkeyIconModule,
@@ -4591,15 +4579,15 @@
     }());
     MonkeyInputPhoneModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputPhoneModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     MonkeyInputPhoneModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputPhoneModule, declarations: [MonkeyInputPhoneComponent, PhoneNumberValidDirective], imports: [i1$1.CommonModule,
-            i4.FormsModule,
-            i4.ReactiveFormsModule, i1__namespace$2.NgxMaskModule, MonkeyIconModule,
+            i1$2.FormsModule,
+            i1$2.ReactiveFormsModule, i1__namespace$3.NgxMaskModule, MonkeyIconModule,
             MonkeySelectModule,
             MonkeyOptionModule], exports: [MonkeyInputPhoneComponent] });
     MonkeyInputPhoneModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyInputPhoneModule, imports: [[
                 i1$1.CommonModule,
-                i4.FormsModule,
-                i4.ReactiveFormsModule,
-                i1$2.NgxMaskModule.forRoot(),
+                i1$2.FormsModule,
+                i1$2.ReactiveFormsModule,
+                i1$3.NgxMaskModule.forRoot(),
                 MonkeyIconModule,
                 MonkeySelectModule,
                 MonkeyOptionModule,
@@ -4610,9 +4598,9 @@
                         declarations: [MonkeyInputPhoneComponent, PhoneNumberValidDirective],
                         imports: [
                             i1$1.CommonModule,
-                            i4.FormsModule,
-                            i4.ReactiveFormsModule,
-                            i1$2.NgxMaskModule.forRoot(),
+                            i1$2.FormsModule,
+                            i1$2.ReactiveFormsModule,
+                            i1$3.NgxMaskModule.forRoot(),
                             MonkeyIconModule,
                             MonkeySelectModule,
                             MonkeyOptionModule,
@@ -4673,11 +4661,11 @@
     MonkeyCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyCheckboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: { label: "label", type: "type", helperMessage: "helperMessage", infoMessage: "infoMessage", errorMessage: "errorMessage", description: "description", value: "value" }, outputs: { onChange: "onChange" }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeyCheckboxComponent; }),
                 multi: true,
             },
-        ], ngImport: i0__namespace, template: "\n    <mecx-form-field *ngIf=\"type === 'single'; else multiple\" [ngClass]=\"{ disabled: _disabled }\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body class=\"checkbox\">\n        <label class=\"mecx-check-container\">\n          <input type=\"checkbox\" [(ngModel)]=\"value\" [id]=\"_id\" [disabled]=\"_disabled\" />\n          {{ description }}\n          <ng-content> </ng-content>\n          <p class=\"mecx-check-mark\"></p>\n        </label>\n      </mecx-form-field-body>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n    <ng-template #multiple>\n      <mecx-form-field [ngClass]=\"{ disabled: _disabled }\">\n        <mecx-form-field-body class=\"checkbox\">\n          <label class=\"mecx-check-container\">\n            <input type=\"checkbox\" [(ngModel)]=\"value\" [id]=\"_id\" [disabled]=\"_disabled\" />\n            {{ description }}\n            <p class=\"mecx-check-mark\"></p>\n          </label>\n        </mecx-form-field-body>\n      </mecx-form-field>\n    </ng-template>\n  ", isInline: true, directives: [{ type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+        ], ngImport: i0__namespace, template: "\n    <mecx-form-field *ngIf=\"type === 'single'; else multiple\" [ngClass]=\"{ disabled: _disabled }\">\n      <mecx-form-field-header>\n        <label>\n          {{ label }}\n        </label>\n        <helper>\n          {{ helperMessage }}\n        </helper>\n      </mecx-form-field-header>\n      <mecx-form-field-body class=\"checkbox\">\n        <label class=\"mecx-check-container\">\n          <input type=\"checkbox\" [(ngModel)]=\"value\" [id]=\"_id\" [disabled]=\"_disabled\" />\n          {{ description }}\n          <ng-content> </ng-content>\n          <p class=\"mecx-check-mark\"></p>\n        </label>\n      </mecx-form-field-body>\n      <mecx-form-field-footer>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-form-field-footer>\n    </mecx-form-field>\n    <ng-template #multiple>\n      <mecx-form-field [ngClass]=\"{ disabled: _disabled }\">\n        <mecx-form-field-body class=\"checkbox\">\n          <label class=\"mecx-check-container\">\n            <input type=\"checkbox\" [(ngModel)]=\"value\" [id]=\"_id\" [disabled]=\"_disabled\" />\n            {{ description }}\n            <p class=\"mecx-check-mark\"></p>\n          </label>\n        </mecx-form-field-body>\n      </mecx-form-field>\n    </ng-template>\n  ", isInline: true, directives: [{ type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyCheckboxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4686,7 +4674,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeyCheckboxComponent; }),
                                 multi: true,
                             },
@@ -4716,13 +4704,13 @@
         return MonkeyCheckboxModule;
     }());
     MonkeyCheckboxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyCheckboxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    MonkeyCheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyCheckboxModule, declarations: [MonkeyCheckboxComponent], imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule], exports: [MonkeyCheckboxComponent] });
-    MonkeyCheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyCheckboxModule, imports: [[i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule]] });
+    MonkeyCheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyCheckboxModule, declarations: [MonkeyCheckboxComponent], imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule], exports: [MonkeyCheckboxComponent] });
+    MonkeyCheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyCheckboxModule, imports: [[i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyCheckboxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [MonkeyCheckboxComponent],
-                        imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule],
+                        imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule],
                         exports: [MonkeyCheckboxComponent],
                         schemas: [i0.NO_ERRORS_SCHEMA],
                     }]
@@ -4811,7 +4799,7 @@
     MonkeyRadioButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyRadioButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyRadioButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: { label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", infoMessage: "infoMessage", errorMessage: "errorMessage", value: "value" }, outputs: { onChange: "onChange" }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeyRadioButtonComponent; }),
                 multi: true,
             },
@@ -4824,7 +4812,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeyRadioButtonComponent; }),
                                 multi: true,
                             },
@@ -4858,12 +4846,12 @@
     }());
     MonkeyRadioButtonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyRadioButtonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     MonkeyRadioButtonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyRadioButtonModule, declarations: [MonkeyRadioButtonComponent], imports: [i1$1.CommonModule,
-            i4.FormsModule,
-            i4.ReactiveFormsModule], exports: [MonkeyRadioButtonComponent] });
+            i1$2.FormsModule,
+            i1$2.ReactiveFormsModule], exports: [MonkeyRadioButtonComponent] });
     MonkeyRadioButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyRadioButtonModule, imports: [[
                 i1$1.CommonModule,
-                i4.FormsModule,
-                i4.ReactiveFormsModule
+                i1$2.FormsModule,
+                i1$2.ReactiveFormsModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyRadioButtonModule, decorators: [{
                 type: i0.NgModule,
@@ -4873,8 +4861,8 @@
                         ],
                         imports: [
                             i1$1.CommonModule,
-                            i4.FormsModule,
-                            i4.ReactiveFormsModule
+                            i1$2.FormsModule,
+                            i1$2.ReactiveFormsModule
                         ],
                         exports: [
                             MonkeyRadioButtonComponent
@@ -5078,7 +5066,7 @@
     MonkeyFileUploadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyFileUploadComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyFileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyFileUploadComponent, selector: "monkey-file-upload", inputs: { name: "name", label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", infoMessage: "infoMessage", uploadOngoingMessage: "uploadOngoingMessage", errorMessage: "errorMessage", listenFiles: "listenFiles", maxSize: "maxSize", allowedExtensions: "allowedExtensions", maxSizeErrorMessage: "maxSizeErrorMessage", allowedExtensionErrorMessage: "allowedExtensionErrorMessage", fileUpload: "fileUpload", value: "value" }, outputs: { onChange: "onChange", onHandleFilesReady: "onHandleFilesReady" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeyFileUploadComponent; }),
                 multi: true,
             },
@@ -5091,7 +5079,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeyFileUploadComponent; }),
                                 multi: true,
                             },
@@ -5143,13 +5131,13 @@
     }());
     MonkeyFileUploadModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyFileUploadModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     MonkeyFileUploadModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyFileUploadModule, declarations: [MonkeyFileUploadComponent], imports: [i1$1.CommonModule,
-            i4.FormsModule,
-            i4.ReactiveFormsModule, i1__namespace$2.NgxMaskModule, MonkeyIconModule], exports: [MonkeyFileUploadComponent] });
+            i1$2.FormsModule,
+            i1$2.ReactiveFormsModule, i1__namespace$3.NgxMaskModule, MonkeyIconModule], exports: [MonkeyFileUploadComponent] });
     MonkeyFileUploadModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyFileUploadModule, imports: [[
                 i1$1.CommonModule,
-                i4.FormsModule,
-                i4.ReactiveFormsModule,
-                i1$2.NgxMaskModule.forRoot(),
+                i1$2.FormsModule,
+                i1$2.ReactiveFormsModule,
+                i1$3.NgxMaskModule.forRoot(),
                 MonkeyIconModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyFileUploadModule, decorators: [{
@@ -5158,9 +5146,9 @@
                         declarations: [MonkeyFileUploadComponent],
                         imports: [
                             i1$1.CommonModule,
-                            i4.FormsModule,
-                            i4.ReactiveFormsModule,
-                            i1$2.NgxMaskModule.forRoot(),
+                            i1$2.FormsModule,
+                            i1$2.ReactiveFormsModule,
+                            i1$3.NgxMaskModule.forRoot(),
                             MonkeyIconModule,
                         ],
                         exports: [MonkeyFileUploadComponent],
@@ -5407,7 +5395,7 @@
         };
         return MonkeyImageCropComponent;
     }());
-    MonkeyImageCropComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyImageCropComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$3.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MonkeyImageCropComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyImageCropComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyImageCropComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyImageCropComponent, selector: "monkey-image-crop", inputs: { label: "label", cropTitle: "cropTitle", labelChangeImage: "labelChangeImage", labelPreviewImage: "labelPreviewImage", helperMessage: "helperMessage", placeholder: "placeholder", maxSize: "maxSize", maxSizeErrorMessage: "maxSizeErrorMessage", allowedExtensionErrorMessage: "allowedExtensionErrorMessage", fileUpload: "fileUpload", onHandleGetFilesReady: "onHandleGetFilesReady" }, outputs: { onHandleFilesReady: "onHandleFilesReady", onHandlePreviewReady: "onHandlePreviewReady" }, host: { listeners: { "mousemove": "moveImg($event)", "touchmove": "moveImg($event)", "document:mouseup": "moveStop()", "document:touchend": "moveStop()" } }, ngImport: i0__namespace, template: "\n    <monkey-file-upload\n      [label]=\"label\"\n      [helperMessage]=\"helperMessage\"\n      icon=\"upload-16\"\n      [placeholder]=\"placeholder\"\n      [maxSize]=\"maxSize\"\n      [maxSizeErrorMessage]=\"maxSizeErrorMessage\"\n      [allowedExtensionErrorMessage]=\"allowedExtensionErrorMessage\"\n      (onHandleFilesReady)=\"onHandleFileUploadFilesReady($event)\"\n      listenFiles=\"true\"\n      [maxFiles]=\"1\"\n      [allowedExtensions]=\"['.jpg', '.jpeg', '.png']\"\n      *ngIf=\"!_loadCompleted\"\n    >\n    </monkey-file-upload>\n    <div *ngIf=\"_loadPreview\">\n      <progress class=\"monkey-progress monkey-progress__grey\"></progress>\n    </div>\n    <div class=\"box-cut-title\" *ngIf=\"_loadCompleted\">\n      {{ cropTitle }} {{ _fileNameToCut }}\n    </div>\n    <div\n      id=\"imageCropSource\"\n      name=\"imageCropSource\"\n      #imageCropSource\n      class=\"box-cut\"\n      *ngIf=\"_loadCompleted\"\n    >\n      <div class=\"edit-resize-cut\">\n        <img class=\"source-image\" [src]=\"_safeImgDataUrl\" />\n        <div\n          class=\"cut\"\n          [style.top.px]=\"_cutCoords.y1\"\n          [style.left.px]=\"_cutCoords.x1\"\n          [style.width.px]=\"_cutCoords.x2 - _cutCoords.x1\"\n          [style.height.px]=\"_cutCoords.y2 - _cutCoords.y1\"\n          *ngIf=\"_loadCompleted\"\n        >\n          <div\n            (mousedown)=\"startMove($event, 'move')\"\n            (touchstart)=\"startMove($event, 'move')\"\n            class=\"move\"\n          ></div>\n          <span\n            class=\"resize top-left\"\n            (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n            (touchstart)=\"startMove($event, 'resize', 'topleft')\"\n          >\n          </span>\n          <span class=\"resize top\"></span>\n          <span\n            class=\"resize top-right\"\n            (mousedown)=\"startMove($event, 'resize', 'topright')\"\n            (touchstart)=\"startMove($event, 'resize', 'topright')\"\n          >\n          </span>\n          <span class=\"resize right\"></span>\n          <span\n            class=\"resize bottom-right\"\n            (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n            (touchstart)=\"startMove($event, 'resize', 'bottomright')\"\n          >\n          </span>\n          <span class=\"resize bottom\"> </span>\n          <span\n            class=\"resize bottom-left\"\n            (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n            (touchstart)=\"startMove($event, 'resize', 'bottomleft')\"\n          >\n          </span>\n          <span class=\"resize left\"> </span>\n          <span\n            class=\"resize-bar top\"\n            (mousedown)=\"startMove($event, 'resize', 'top')\"\n            (touchstart)=\"startMove($event, 'resize', 'top')\"\n          >\n          </span>\n          <span\n            class=\"resize-bar right\"\n            (mousedown)=\"startMove($event, 'resize', 'right')\"\n            (touchstart)=\"startMove($event, 'resize', 'right')\"\n          >\n          </span>\n          <span\n            class=\"resize-bar bottom\"\n            (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n            (touchstart)=\"startMove($event, 'resize', 'bottom')\"\n          >\n          </span>\n          <span\n            class=\"resize-bar left\"\n            (mousedown)=\"startMove($event, 'resize', 'left')\"\n            (touchstart)=\"startMove($event, 'resize', 'left')\"\n          >\n          </span>\n        </div>\n      </div>\n    </div>\n    <mecx-image-crop-upload-info *ngIf=\"_progress\">\n      <span [style.width.%]=\"_progress\"> {{ _progress }}%</span>\n    </mecx-image-crop-upload-info>\n    <monkey-button\n      type=\"tertiary\"\n      color=\"theme\"\n      (click)=\"onHandleImageChange()\"\n      *ngIf=\"_loadCompleted\"\n    >\n      {{ labelChangeImage }}\n    </monkey-button>\n  ", isInline: true, components: [{ type: MonkeyFileUploadComponent, selector: "monkey-file-upload", inputs: ["name", "label", "helperMessage", "placeholder", "icon", "infoMessage", "uploadOngoingMessage", "errorMessage", "listenFiles", "maxSize", "allowedExtensions", "maxSizeErrorMessage", "allowedExtensionErrorMessage", "fileUpload", "value"], outputs: ["onChange", "onHandleFilesReady"] }, { type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i1__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyImageCropComponent, decorators: [{
                 type: i0.Component,
@@ -5416,7 +5404,7 @@
                         template: "\n    <monkey-file-upload\n      [label]=\"label\"\n      [helperMessage]=\"helperMessage\"\n      icon=\"upload-16\"\n      [placeholder]=\"placeholder\"\n      [maxSize]=\"maxSize\"\n      [maxSizeErrorMessage]=\"maxSizeErrorMessage\"\n      [allowedExtensionErrorMessage]=\"allowedExtensionErrorMessage\"\n      (onHandleFilesReady)=\"onHandleFileUploadFilesReady($event)\"\n      listenFiles=\"true\"\n      [maxFiles]=\"1\"\n      [allowedExtensions]=\"['.jpg', '.jpeg', '.png']\"\n      *ngIf=\"!_loadCompleted\"\n    >\n    </monkey-file-upload>\n    <div *ngIf=\"_loadPreview\">\n      <progress class=\"monkey-progress monkey-progress__grey\"></progress>\n    </div>\n    <div class=\"box-cut-title\" *ngIf=\"_loadCompleted\">\n      {{ cropTitle }} {{ _fileNameToCut }}\n    </div>\n    <div\n      id=\"imageCropSource\"\n      name=\"imageCropSource\"\n      #imageCropSource\n      class=\"box-cut\"\n      *ngIf=\"_loadCompleted\"\n    >\n      <div class=\"edit-resize-cut\">\n        <img class=\"source-image\" [src]=\"_safeImgDataUrl\" />\n        <div\n          class=\"cut\"\n          [style.top.px]=\"_cutCoords.y1\"\n          [style.left.px]=\"_cutCoords.x1\"\n          [style.width.px]=\"_cutCoords.x2 - _cutCoords.x1\"\n          [style.height.px]=\"_cutCoords.y2 - _cutCoords.y1\"\n          *ngIf=\"_loadCompleted\"\n        >\n          <div\n            (mousedown)=\"startMove($event, 'move')\"\n            (touchstart)=\"startMove($event, 'move')\"\n            class=\"move\"\n          ></div>\n          <span\n            class=\"resize top-left\"\n            (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n            (touchstart)=\"startMove($event, 'resize', 'topleft')\"\n          >\n          </span>\n          <span class=\"resize top\"></span>\n          <span\n            class=\"resize top-right\"\n            (mousedown)=\"startMove($event, 'resize', 'topright')\"\n            (touchstart)=\"startMove($event, 'resize', 'topright')\"\n          >\n          </span>\n          <span class=\"resize right\"></span>\n          <span\n            class=\"resize bottom-right\"\n            (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n            (touchstart)=\"startMove($event, 'resize', 'bottomright')\"\n          >\n          </span>\n          <span class=\"resize bottom\"> </span>\n          <span\n            class=\"resize bottom-left\"\n            (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n            (touchstart)=\"startMove($event, 'resize', 'bottomleft')\"\n          >\n          </span>\n          <span class=\"resize left\"> </span>\n          <span\n            class=\"resize-bar top\"\n            (mousedown)=\"startMove($event, 'resize', 'top')\"\n            (touchstart)=\"startMove($event, 'resize', 'top')\"\n          >\n          </span>\n          <span\n            class=\"resize-bar right\"\n            (mousedown)=\"startMove($event, 'resize', 'right')\"\n            (touchstart)=\"startMove($event, 'resize', 'right')\"\n          >\n          </span>\n          <span\n            class=\"resize-bar bottom\"\n            (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n            (touchstart)=\"startMove($event, 'resize', 'bottom')\"\n          >\n          </span>\n          <span\n            class=\"resize-bar left\"\n            (mousedown)=\"startMove($event, 'resize', 'left')\"\n            (touchstart)=\"startMove($event, 'resize', 'left')\"\n          >\n          </span>\n        </div>\n      </div>\n    </div>\n    <mecx-image-crop-upload-info *ngIf=\"_progress\">\n      <span [style.width.%]=\"_progress\"> {{ _progress }}%</span>\n    </mecx-image-crop-upload-info>\n    <monkey-button\n      type=\"tertiary\"\n      color=\"theme\"\n      (click)=\"onHandleImageChange()\"\n      *ngIf=\"_loadCompleted\"\n    >\n      {{ labelChangeImage }}\n    </monkey-button>\n  ",
                         encapsulation: i0.ViewEncapsulation.None,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$3.DomSanitizer }]; }, propDecorators: { label: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$4.DomSanitizer }]; }, propDecorators: { label: [{
                     type: i0.Input
                 }], cropTitle: [{
                     type: i0.Input
@@ -5463,14 +5451,14 @@
     }());
     MonkeyImageCropModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyImageCropModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     MonkeyImageCropModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyImageCropModule, declarations: [MonkeyImageCropComponent], imports: [i1$1.CommonModule,
-            i4.FormsModule,
-            i4.ReactiveFormsModule, i1__namespace$2.NgxMaskModule, MonkeyButtonModule,
+            i1$2.FormsModule,
+            i1$2.ReactiveFormsModule, i1__namespace$3.NgxMaskModule, MonkeyButtonModule,
             MonkeyFileUploadModule], exports: [MonkeyImageCropComponent] });
     MonkeyImageCropModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyImageCropModule, imports: [[
                 i1$1.CommonModule,
-                i4.FormsModule,
-                i4.ReactiveFormsModule,
-                i1$2.NgxMaskModule.forRoot(),
+                i1$2.FormsModule,
+                i1$2.ReactiveFormsModule,
+                i1$3.NgxMaskModule.forRoot(),
                 MonkeyButtonModule,
                 MonkeyFileUploadModule,
             ]] });
@@ -5480,9 +5468,9 @@
                         declarations: [MonkeyImageCropComponent],
                         imports: [
                             i1$1.CommonModule,
-                            i4.FormsModule,
-                            i4.ReactiveFormsModule,
-                            i1$2.NgxMaskModule.forRoot(),
+                            i1$2.FormsModule,
+                            i1$2.ReactiveFormsModule,
+                            i1$3.NgxMaskModule.forRoot(),
                             MonkeyButtonModule,
                             MonkeyFileUploadModule,
                         ],
@@ -5579,13 +5567,13 @@
         return MonkeyModalModule;
     }());
     MonkeyModalModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyModalModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    MonkeyModalModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyModalModule, declarations: [MonkeyModalComponent], imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyButtonModule], exports: [MonkeyModalComponent] });
-    MonkeyModalModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyModalModule, imports: [[i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyButtonModule]] });
+    MonkeyModalModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyModalModule, declarations: [MonkeyModalComponent], imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyButtonModule], exports: [MonkeyModalComponent] });
+    MonkeyModalModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyModalModule, imports: [[i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyButtonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyModalModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [MonkeyModalComponent],
-                        imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyButtonModule],
+                        imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyButtonModule],
                         exports: [MonkeyModalComponent],
                         schemas: [i0.NO_ERRORS_SCHEMA],
                     }]
@@ -5803,7 +5791,7 @@
     MonkeyTableColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyTableColumnComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyTableColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyTableColumnComponent, selector: "monkey-table-column", providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeyTableColumnComponent; }),
                 multi: true,
             },
@@ -5816,7 +5804,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeyTableColumnComponent; }),
                                 multi: true,
                             },
@@ -5962,7 +5950,7 @@
     MonkeyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyTabComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     MonkeyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: MonkeyTabComponent, selector: "monkey-tab", inputs: { position: "position", selected: "selected" }, outputs: { onChange: "onChange" }, providers: [
             {
-                provide: i4.NG_VALUE_ACCESSOR,
+                provide: i1$2.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return MonkeyTabComponent; }),
                 multi: true,
             },
@@ -5975,7 +5963,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
                             {
-                                provide: i4.NG_VALUE_ACCESSOR,
+                                provide: i1$2.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return MonkeyTabComponent; }),
                                 multi: true,
                             },
@@ -5998,13 +5986,13 @@
         return MonkeyTabModule;
     }());
     MonkeyTabModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyTabModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    MonkeyTabModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyTabModule, declarations: [MonkeyTabComponent], imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyOptionModule], exports: [MonkeyTabComponent] });
-    MonkeyTabModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyTabModule, imports: [[i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyOptionModule]] });
+    MonkeyTabModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyTabModule, declarations: [MonkeyTabComponent], imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyOptionModule], exports: [MonkeyTabComponent] });
+    MonkeyTabModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyTabModule, imports: [[i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyOptionModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: MonkeyTabModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [MonkeyTabComponent],
-                        imports: [i1$1.CommonModule, i4.FormsModule, i4.ReactiveFormsModule, MonkeyOptionModule],
+                        imports: [i1$1.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule, MonkeyOptionModule],
                         exports: [MonkeyTabComponent],
                         schemas: [i0.NO_ERRORS_SCHEMA],
                     }]