monkey-style-guide 2.0.96 → 2.0.100

package/fesm2015/monkey-style-guide.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, ViewEncapsulation, Input, NgModule, NO_ERRORS_SCHEMA, HostListener, EventEmitter, forwardRef, Output, ViewChild, ContentChildren, Directive } from '@angular/core';
+import { Injectable, Inject, Component, ViewEncapsulation, Input, NgModule, NO_ERRORS_SCHEMA, HostListener, EventEmitter, forwardRef, Output, ViewChild, ContentChildren, Directive, Optional, Self } from '@angular/core';
 import { BehaviorSubject, throwError, Subject } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
@@ -7,12 +7,12 @@ import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule, CurrencyPipe } from '@angular/common';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import { takeUntil } from 'rxjs/operators';
-import * as i4 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as moment_ from 'moment';
-import * as i1$2 from 'ngx-mask';
+import * as i1$3 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
-import * as i1$3 from '@angular/platform-browser';
+import * as i1$4 from '@angular/platform-browser';
 
 class MonkeyStyleGuideService {
     constructor(http) {
@@ -358,7 +358,7 @@ class MonkeyUtils {
         try {
             const country = phoneUtil.getRegionCodeForCountryCode(internationalNumber);
             const number = phoneUtil.parse(phone, country);
-            return phoneUtil.isPossibleNumber(number);
+            return phoneUtil.isValidNumberForRegion(number, country);
         }
         catch (e) {
             //not to do
@@ -3381,7 +3381,7 @@ class MonkeyDateRangePickerComponent {
         this.writeValue(_dateForm.value);
     }
 }
-MonkeyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyDateRangePickerComponent, deps: [{ token: i4.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MonkeyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyDateRangePickerComponent, deps: [{ token: i1$2.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
@@ -3699,7 +3699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImpo
                         CurrencyPipe,
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: i4.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { i18n: [{
+        }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { i18n: [{
                 type: Input
             }], infoMessage: [{
                 type: Input
@@ -3950,7 +3950,7 @@ MonkeyInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </error>
       </mecx-form-field-footer>
     </mecx-form-field>
-  `, isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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$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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$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$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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -4244,7 +4244,7 @@ MonkeyInputFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         ></monkey-icon>
       </mecx-form-field-body>
     </mecx-form-field-filter>
-  `, isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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$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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$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$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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -4357,7 +4357,7 @@ class MonkeyInputModule {
 MonkeyInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MonkeyInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputModule, declarations: [MonkeyInputComponent, MonkeyInputFilterComponent], imports: [CommonModule,
         FormsModule,
-        ReactiveFormsModule, i1$2.NgxMaskModule, MonkeyIconModule], exports: [MonkeyInputComponent, MonkeyInputFilterComponent] });
+        ReactiveFormsModule, i1$3.NgxMaskModule, MonkeyIconModule], exports: [MonkeyInputComponent, MonkeyInputFilterComponent] });
 MonkeyInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputModule, imports: [[
             CommonModule,
             FormsModule,
@@ -4777,10 +4777,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImpo
  **************************/
 class PhoneNumberValidDirective {
     onValidate() {
-        const { destroyed, phoneNumber, internationalNumber } = this;
-        if (destroyed || !phoneNumber)
+        const { ctrl, destroyed, phoneNumber, internationalNumber } = this;
+        if (destroyed || !phoneNumber || !ctrl)
             return;
-        let isValid = true;
+        let isValid = false;
         try {
             isValid = MonkeyUtils.isPhoneNumberValid(phoneNumber, internationalNumber);
         }
@@ -4789,14 +4789,16 @@ class PhoneNumberValidDirective {
         }
         if (!isValid) {
             setTimeout(() => {
-                this.ctrl.markAsDirty();
-                this.ctrl.markAsTouched();
-                this.ctrl.setErrors({ invalidNumber: true });
+                ctrl.markAsDirty();
+                ctrl.markAsTouched();
+                ctrl.setErrors({ phone: true });
             }, 0);
         }
     }
-    ngOnChanges({ phoneNumber }) {
-        if (phoneNumber && !phoneNumber.firstChange) {
+    ngOnChanges({ ctrl, phoneNumber, internationalNumber }) {
+        if ((phoneNumber && !phoneNumber.firstChange) ||
+            (internationalNumber && !internationalNumber.firstChange) ||
+            (ctrl && !ctrl.firstChange)) {
             this.onValidate();
         }
     }
@@ -4820,7 +4822,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImpo
                 type: Input
             }] } });
 class MonkeyInputPhoneComponent {
-    constructor(cdr) {
+    constructor(ngControl, cdr) {
+        this.ngControl = ngControl;
         this.cdr = cdr;
         this.name = `mecx-input-phone-${MonkeyUtils.getRandomString(10)}`;
         this.helperMessage = '';
@@ -4834,6 +4837,10 @@ class MonkeyInputPhoneComponent {
         this._regionCodes = [];
         this._countryCodes = [];
         this._internationalNumber = 55;
+        this._formControl = null;
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
     }
     handleValue(value) {
         return MonkeyUtils.handleOnlyNumbers(`${value}`);
@@ -4846,18 +4853,15 @@ class MonkeyInputPhoneComponent {
     }
     getValue() {
         const { _internationalNumber, _handledValue } = this;
-        return `+${_internationalNumber}${_handledValue}`;
+        if (_handledValue)
+            return `+${_internationalNumber}${_handledValue}`;
+        return '';
     }
     ngOnInit() {
         this._countryCodes = MonkeyUtils.getPhoneRegions();
         this.onHandleInternationalNumber();
         this.onHandleCountryCode(this._internationalNumber);
-    }
-    ngOnChanges(sc) {
-        const { formControl: { firstChange, currentValue: { value }, }, } = sc;
-        if (sc && firstChange) {
-            this.onHandleInternationalNumber(value);
-        }
+        this._formControl = this.ngControl && this.ngControl.form;
     }
     onHandleInternationalNumber(value) {
         this._internationalNumber =
@@ -4923,15 +4927,8 @@ class MonkeyInputPhoneComponent {
         }
     }
 }
-MonkeyInputPhoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputPhoneComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MonkeyInputPhoneComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MonkeyInputPhoneComponent),
-            multi: true,
-        },
-        CurrencyPipe,
-    ], usesOnChanges: true, ngImport: i0, template: `
+MonkeyInputPhoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputPhoneComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MonkeyInputPhoneComponent.ɵcmp = i0.ɵɵ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, template: `
     <mecx-form-field [ngClass]="{ disabled: _disabled }" [id]="_id">
       <mecx-form-field-header>
         <label>
@@ -4966,11 +4963,15 @@ MonkeyInputPhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
           [disabled]="_disabled"
           [maxLength]="maxLength"
           phoneNumberValidate
-          [ctrl]="formControl"
+          [ctrl]="_formControl"
           [phoneNumber]="_handledValue"
           [internationalNumber]="_internationalNumber"
           #monkeyInput
         />
+        <!--phoneNumberValidate
+          [ctrl]="formControl"
+          [phoneNumber]="_handledValue"
+          [internationalNumber]="_internationalNumber"-->
       </mecx-form-field-body>
       <mecx-form-field-footer>
         <info>
@@ -4981,7 +4982,7 @@ MonkeyInputPhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         </error>
       </mecx-form-field-footer>
     </mecx-form-field>
-  `, 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.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.ViewEncapsulation.None });
+  `, 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$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.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputPhoneComponent, decorators: [{
             type: Component,
             args: [{
@@ -5021,11 +5022,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImpo
           [disabled]="_disabled"
           [maxLength]="maxLength"
           phoneNumberValidate
-          [ctrl]="formControl"
+          [ctrl]="_formControl"
           [phoneNumber]="_handledValue"
           [internationalNumber]="_internationalNumber"
           #monkeyInput
         />
+        <!--phoneNumberValidate
+          [ctrl]="formControl"
+          [phoneNumber]="_handledValue"
+          [internationalNumber]="_internationalNumber"-->
       </mecx-form-field-body>
       <mecx-form-field-footer>
         <info>
@@ -5038,16 +5043,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImpo
     </mecx-form-field>
   `,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MonkeyInputPhoneComponent),
-                            multi: true,
-                        },
-                        CurrencyPipe,
-                    ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -5063,8 +5064,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImpo
                 type: Input
             }], maxLength: [{
                 type: Input
-            }], formControl: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }], value: [{
@@ -5581,7 +5580,7 @@ MonkeySelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         </error>
       </mecx-form-field-footer>
     </mecx-form-field>
-  `, isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, components: [{ type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "color", "contrast", "disabled"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeySelectSearchComponent, decorators: [{
             type: Component,
             args: [{
@@ -5920,7 +5919,7 @@ class MonkeyInputPhoneModule {
 MonkeyInputPhoneModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputPhoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MonkeyInputPhoneModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputPhoneModule, declarations: [MonkeyInputPhoneComponent, PhoneNumberValidDirective], imports: [CommonModule,
         FormsModule,
-        ReactiveFormsModule, i1$2.NgxMaskModule, MonkeyIconModule,
+        ReactiveFormsModule, i1$3.NgxMaskModule, MonkeyIconModule,
         MonkeySelectModule,
         MonkeyOptionModule], exports: [MonkeyInputPhoneComponent] });
 MonkeyInputPhoneModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyInputPhoneModule, imports: [[
@@ -6038,7 +6037,7 @@ MonkeyCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         </mecx-form-field-body>
       </mecx-form-field>
     </ng-template>
-  `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyCheckboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -6693,7 +6692,7 @@ class MonkeyFileUploadModule {
 MonkeyFileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MonkeyFileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyFileUploadModule, declarations: [MonkeyFileUploadComponent], imports: [CommonModule,
         FormsModule,
-        ReactiveFormsModule, i1$2.NgxMaskModule, MonkeyIconModule], exports: [MonkeyFileUploadComponent] });
+        ReactiveFormsModule, i1$3.NgxMaskModule, MonkeyIconModule], exports: [MonkeyFileUploadComponent] });
 MonkeyFileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyFileUploadModule, imports: [[
             CommonModule,
             FormsModule,
@@ -6950,7 +6949,7 @@ class MonkeyImageCropComponent {
         this.onHandlePreviewReady.next(file);
     }
 }
-MonkeyImageCropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyImageCropComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+MonkeyImageCropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyImageCropComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
 MonkeyImageCropComponent.ɵcmp = i0.ɵɵ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, template: `
     <monkey-file-upload
       [label]="label"
@@ -7179,7 +7178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImpo
   `,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$3.DomSanitizer }]; }, propDecorators: { label: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.DomSanitizer }]; }, propDecorators: { label: [{
                 type: Input
             }], cropTitle: [{
                 type: Input
@@ -7224,7 +7223,7 @@ class MonkeyImageCropModule {
 MonkeyImageCropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyImageCropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MonkeyImageCropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyImageCropModule, declarations: [MonkeyImageCropComponent], imports: [CommonModule,
         FormsModule,
-        ReactiveFormsModule, i1$2.NgxMaskModule, MonkeyButtonModule,
+        ReactiveFormsModule, i1$3.NgxMaskModule, MonkeyButtonModule,
         MonkeyFileUploadModule], exports: [MonkeyImageCropComponent] });
 MonkeyImageCropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MonkeyImageCropModule, imports: [[
             CommonModule,