monkey-style-guide 2.0.86 → 2.0.91

package/assets/scss/partials/components/_date-range-picker.scss

@@ -22,11 +22,6 @@ monkey-date-range-picker {
     flex-direction: column;
     width: 100%;
 
-    &.error {
-      border: 1px solid #fa3838;
-      padding: 4px;
-    }
-
     mecx-date-range-picker-group-body {
       display: flex;
       width: 100%;
@@ -81,6 +76,10 @@ monkey-date-range-picker {
       padding-top: 16px;
       align-items: flex-end;
 
+      &.error {
+        border-top: 1px solid #fa3838;
+      }
+
       .action-days > * {
         margin-right: 24px;
       }

package/assets/scss/partials/components/_index.scss

@@ -5,6 +5,7 @@
 **************************/
 @import 'badge';
 @import 'input';
+@import 'input-phone';
 @import 'select';
 @import 'buttons';
 @import 'checkbox';

package/assets/scss/partials/components/_input-phone.scss

@@ -0,0 +1,17 @@
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+@import '../variables';
+@import '../breakpoints.scss';
+
+monkey-input-phone {
+  mecx-form-field mecx-form-field-header {
+    display: none;
+  }
+
+  mecx-form-field mecx-form-field-footer {
+    display: none;
+  }
+}

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('rxjs/operators'), require('moment'), require('ngx-mask'), require('@angular/platform-browser')) :
-    typeof define === 'function' && define.amd ? define('monkey-style-guide', ['exports', '@angular/core', '@angular/common/http', 'rxjs', '@angular/common', '@angular/forms', 'rxjs/operators', 'moment', 'ngx-mask', '@angular/platform-browser'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['monkey-style-guide'] = {}, global.ng.core, global.ng.common.http, global.rxjs, global.ng.common, global.ng.forms, global.rxjs.operators, global.moment, global['ngx-mask'], global.ng.platformBrowser));
-}(this, (function (exports, core, http, rxjs, common, forms, operators, moment_, ngxMask, platformBrowser) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('rxjs/operators'), require('moment'), require('ngx-mask'), require('google-libphonenumber'), require('@angular/platform-browser')) :
+    typeof define === 'function' && define.amd ? define('monkey-style-guide', ['exports', '@angular/core', '@angular/common/http', 'rxjs', '@angular/common', '@angular/forms', 'rxjs/operators', 'moment', 'ngx-mask', 'google-libphonenumber', '@angular/platform-browser'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['monkey-style-guide'] = {}, global.ng.core, global.ng.common.http, global.rxjs, global.ng.common, global.ng.forms, global.rxjs.operators, global.moment, global['ngx-mask'], global['google-libphonenumber'], global.ng.platformBrowser));
+}(this, (function (exports, core, http, rxjs, common, forms, operators, moment_, ngxMask, googleLibphonenumber, platformBrowser) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -2247,12 +2247,6 @@
     ];
 
     var moment = moment___namespace;
-    var ɵ0 = function () {
-        var isMobileWidth = window.screen.width <= 640 ||
-            (window.matchMedia && window.matchMedia('only screen and (max-width: 640px)').matches);
-        return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile/i.test(navigator.userAgent) || isMobileWidth);
-    };
-    var isMobile = (ɵ0)();
     var MonkeyDateRangePickerComponent = /** @class */ (function () {
         function MonkeyDateRangePickerComponent(fb, cdr) {
             this.fb = fb;
@@ -2310,9 +2304,11 @@
         };
         MonkeyDateRangePickerComponent.prototype.build = function () {
             this._daysArrFirst = this.createCalendar(this._dateFirst);
-            if (!isMobile) {
-                this._daysArrSecond = this.createCalendar(this._dateSecond);
-            }
+            this._daysArrSecond = this.createCalendar(this._dateSecond);
+        };
+        MonkeyDateRangePickerComponent.prototype.clearDates = function () {
+            this._dateForm.setValue({ startDate: null, endDate: null });
+            this.writeValue(this._dateForm.value);
         };
         MonkeyDateRangePickerComponent.prototype.navigateToToday = function () {
             this._dateFirst = moment();
@@ -2333,10 +2329,13 @@
                 return this._dateForm.value;
             },
             set: function (value) {
-                this._dateForm.setValue(value);
-                this.cdr.detectChanges();
-                this.onModelChange(this._dateForm.value);
-                this.onModelTouched(this._dateForm.value);
+                if (Object.prototype.hasOwnProperty.call(value, 'startDate') &&
+                    Object.prototype.hasOwnProperty.call(value, 'endDate')) {
+                    this._dateForm.setValue(value);
+                    this.cdr.detectChanges();
+                    this.onModelChange(this._dateForm.value);
+                    this.onModelTouched(this._dateForm.value);
+                }
             },
             enumerable: false,
             configurable: true
@@ -2390,17 +2389,24 @@
             var _dateForm = this._dateForm;
             var dayFormatted = day.format('YYYY-MM-DD');
             if (_dateForm.valid) {
-                _dateForm.setValue({ startDate: null, endDate: null });
-                this.writeValue(null);
-                return;
+                this.clearDates();
             }
-            if (!_dateForm.get('startDate').value) {
-                _dateForm.get('startDate').patchValue(dayFormatted);
+            var _a = _dateForm.value, startDate = _a.startDate, endDate = _a.endDate;
+            if (startDate) {
+                if (moment(startDate).isAfter(moment(dayFormatted))) {
+                    endDate = startDate;
+                    startDate = dayFormatted;
+                }
             }
-            else {
-                _dateForm.get('endDate').patchValue(dayFormatted);
-                this.writeValue(_dateForm.value);
+            else
+                startDate = dayFormatted;
+            if (startDate) {
+                _dateForm.get('startDate').patchValue(startDate);
+            }
+            if (endDate) {
+                _dateForm.get('endDate').patchValue(endDate);
             }
+            this.writeValue(_dateForm.value);
         };
         MonkeyDateRangePickerComponent.prototype.selectRangeOfDays = function (days) {
             var _a = this, _dateForm = _a._dateForm, today = _a.today;
@@ -2416,7 +2422,7 @@
     MonkeyDateRangePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'monkey-date-range-picker',
-                    template: "\n    <mecx-date-range-picker-group [class.error]=\"errorMessage?.trim()\">\n      <mecx-date-range-picker-group-body>\n        <mecx-date-range-picker class=\"first-date-range\">\n          <mecx-date-range-picker-header>\n            <div class=\"calendar-title\">\n              <monkey-button\n                class=\"calendar-previous\"\n                color=\"theme\"\n                icon=\"arrow-left-16\"\n                type=\"tertiary\"\n                (click)=\"previousMonth()\"\n                size=\"sm\"\n              >\n              </monkey-button>\n              <div class=\"month-year-title\">\n                {{ i18n?.months?.[_dateFirst.format('M')] }}\n                {{ _dateFirst.format('YYYY') }}\n              </div>\n              <monkey-button\n                class=\"calendar-next\"\n                color=\"theme\"\n                icon=\"arrow-right-16\"\n                type=\"tertiary\"\n                (click)=\"nextMonth()\"\n                size=\"sm\"\n              >\n              </monkey-button>\n            </div>\n            <div class=\"week\">\n              <span class=\"week-day\" *ngFor=\"let day of [1, 2, 3, 4, 5, 6, 7]\">\n                {{ i18n?.days?.[day]}}\n              </span>\n            </div>\n          </mecx-date-range-picker-header>\n          <mecx-date-range-picker-body>\n            <div class=\"month-week\" *ngFor=\"let week of _daysArrFirst\">\n              <div\n                class=\"month-day\"\n                (click)=\"selectedDate(day)\"\n                [ngClass]=\"{\n                  inactive: !day,\n                  selected: isSelected(day),\n                  today: todayCheck(day),\n                  'first-selected': isFirstSelected(day),\n                  'last-selected': isLastSelected(day)\n                }\"\n                *ngFor=\"let day of week\"\n                #divOne\n              >\n                {{ day?.date() }}\n              </div>\n            </div>\n          </mecx-date-range-picker-body>\n        </mecx-date-range-picker>\n\n        <mecx-date-range-picker class=\"second-date-range\" *ngIf=\"_daysArrSecond?.length\">\n          <mecx-date-range-picker-header>\n            <div class=\"calendar-title\">\n              <div class=\"month-year-title\">\n                {{ i18n?.months?.[_dateSecond.format('M')] }}\n                {{ _dateSecond.format('YYYY') }}\n              </div>\n              <monkey-button\n                class=\"calendar-previous\"\n                color=\"theme\"\n                icon=\"arrow-right-16\"\n                type=\"tertiary\"\n                (click)=\"nextMonth()\"\n                size=\"sm\"\n              >\n              </monkey-button>\n            </div>\n            <div class=\"week\">\n              <span class=\"week-day\" *ngFor=\"let day of [1, 2, 3, 4, 5, 6, 7]\">\n                {{ i18n?.days?.[day]}}\n              </span>\n            </div>\n          </mecx-date-range-picker-header>\n          <mecx-date-range-picker-body>\n            <div class=\"month-week\" *ngFor=\"let week of _daysArrSecond\">\n              <div\n                class=\"month-day\"\n                (click)=\"selectedDate(day)\"\n                [ngClass]=\"{\n                  inactive: !day,\n                  selected: isSelected(day),\n                  today: todayCheck(day),\n                  'first-selected': isFirstSelected(day),\n                  'last-selected': isLastSelected(day)\n                }\"\n                *ngFor=\"let day of week\"\n              >\n                {{ day?.date() }}\n              </div>\n            </div>\n          </mecx-date-range-picker-body>\n        </mecx-date-range-picker>\n      </mecx-date-range-picker-group-body>\n      <mecx-date-range-picker-group-info>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-date-range-picker-group-info>\n      <mecx-date-range-picker-group-action>\n        <div class=\"action-days\">\n          <monkey-button color=\"theme\" type=\"secondary\" (click)=\"selectRangeOfDays(30)\">\n            {{ i18n?.actions?.['30'] }}\n          </monkey-button>\n          <monkey-button color=\"theme\" type=\"secondary\" (click)=\"selectRangeOfDays(60)\">\n            {{ i18n?.actions?.['60'] }}\n          </monkey-button>\n          <monkey-button color=\"theme\" type=\"secondary\" (click)=\"selectRangeOfDays(90)\">\n            {{ i18n?.actions?.['90'] }}\n          </monkey-button>\n        </div>\n        <monkey-button color=\"theme\" type=\"primary\" (click)=\"navigateToToday()\">\n          {{ i18n?.today }}\n        </monkey-button>\n      </mecx-date-range-picker-group-action>\n    </mecx-date-range-picker-group>\n  ",
+                    template: "\n    <mecx-date-range-picker-group>\n      <mecx-date-range-picker-group-body>\n        <mecx-date-range-picker class=\"first-date-range\">\n          <mecx-date-range-picker-header>\n            <div class=\"calendar-title\">\n              <monkey-button\n                class=\"calendar-previous\"\n                color=\"theme\"\n                icon=\"arrow-left-16\"\n                type=\"tertiary\"\n                (click)=\"previousMonth()\"\n                size=\"sm\"\n              >\n              </monkey-button>\n              <div class=\"month-year-title\">\n                {{ i18n?.months?.[_dateFirst.format('M')] }}\n                {{ _dateFirst.format('YYYY') }}\n              </div>\n              <monkey-button\n                class=\"calendar-next\"\n                color=\"theme\"\n                icon=\"arrow-right-16\"\n                type=\"tertiary\"\n                (click)=\"nextMonth()\"\n                size=\"sm\"\n              >\n              </monkey-button>\n            </div>\n            <div class=\"week\">\n              <span class=\"week-day\" *ngFor=\"let day of [1, 2, 3, 4, 5, 6, 7]\">\n                {{ i18n?.days?.[day]}}\n              </span>\n            </div>\n          </mecx-date-range-picker-header>\n          <mecx-date-range-picker-body>\n            <div class=\"month-week\" *ngFor=\"let week of _daysArrFirst\">\n              <div\n                class=\"month-day\"\n                (click)=\"selectedDate(day)\"\n                [ngClass]=\"{\n                  inactive: !day,\n                  selected: isSelected(day),\n                  today: todayCheck(day),\n                  'first-selected': isFirstSelected(day),\n                  'last-selected': isLastSelected(day)\n                }\"\n                *ngFor=\"let day of week\"\n                #divOne\n              >\n                {{ day?.date() }}\n              </div>\n            </div>\n          </mecx-date-range-picker-body>\n        </mecx-date-range-picker>\n\n        <mecx-date-range-picker class=\"second-date-range\">\n          <mecx-date-range-picker-header>\n            <div class=\"calendar-title\">\n              <div class=\"month-year-title\">\n                {{ i18n?.months?.[_dateSecond.format('M')] }}\n                {{ _dateSecond.format('YYYY') }}\n              </div>\n              <monkey-button\n                class=\"calendar-previous\"\n                color=\"theme\"\n                icon=\"arrow-right-16\"\n                type=\"tertiary\"\n                (click)=\"nextMonth()\"\n                size=\"sm\"\n              >\n              </monkey-button>\n            </div>\n            <div class=\"week\">\n              <span class=\"week-day\" *ngFor=\"let day of [1, 2, 3, 4, 5, 6, 7]\">\n                {{ i18n?.days?.[day]}}\n              </span>\n            </div>\n          </mecx-date-range-picker-header>\n          <mecx-date-range-picker-body>\n            <div class=\"month-week\" *ngFor=\"let week of _daysArrSecond\">\n              <div\n                class=\"month-day\"\n                (click)=\"selectedDate(day)\"\n                [ngClass]=\"{\n                  inactive: !day,\n                  selected: isSelected(day),\n                  today: todayCheck(day),\n                  'first-selected': isFirstSelected(day),\n                  'last-selected': isLastSelected(day)\n                }\"\n                *ngFor=\"let day of week\"\n              >\n                {{ day?.date() }}\n              </div>\n            </div>\n          </mecx-date-range-picker-body>\n        </mecx-date-range-picker>\n      </mecx-date-range-picker-group-body>\n      <mecx-date-range-picker-group-info>\n        <info>\n          {{ infoMessage }}\n        </info>\n        <error>\n          {{ errorMessage }}\n        </error>\n      </mecx-date-range-picker-group-info>\n      <mecx-date-range-picker-group-action [class.error]=\"errorMessage?.trim()\">\n        <div class=\"action-days\">\n          <monkey-button color=\"theme\" type=\"secondary\" (click)=\"selectRangeOfDays(30)\">\n            {{ i18n?.actions?.['30'] }}\n          </monkey-button>\n          <monkey-button color=\"theme\" type=\"secondary\" (click)=\"selectRangeOfDays(60)\">\n            {{ i18n?.actions?.['60'] }}\n          </monkey-button>\n          <monkey-button color=\"theme\" type=\"secondary\" (click)=\"selectRangeOfDays(90)\">\n            {{ i18n?.actions?.['90'] }}\n          </monkey-button>\n        </div>\n        <monkey-button color=\"theme\" type=\"primary\" (click)=\"navigateToToday()\">\n          {{ i18n?.today }}\n        </monkey-button>\n      </mecx-date-range-picker-group-action>\n    </mecx-date-range-picker-group>\n  ",
                     encapsulation: core.ViewEncapsulation.None,
                     providers: [
                         {
@@ -2797,6 +2803,199 @@
                 },] }
     ];
 
+    /**************************
+     * Copyright Monkey Exchange. All Rights Reserved
+     * This style guide was developed by Monkey Exchange Team
+     * MIT Licence
+     **************************/
+    var phoneUtil = googleLibphonenumber.PhoneNumberUtil.getInstance();
+    var formatter = new googleLibphonenumber.AsYouTypeFormatter('US');
+    var MonkeyInputPhoneComponent = /** @class */ (function () {
+        function MonkeyInputPhoneComponent(currencyPipe, settingsService, cdr) {
+            this.currencyPipe = currencyPipe;
+            this.settingsService = settingsService;
+            this.cdr = cdr;
+            this.name = "mecx-input-phone-" + MonkeyUtils.getRandomString(10);
+            this.helperMessage = '';
+            this.placeholder = '';
+            this.maxLength = 255;
+            this.maxDateToday = false;
+            this.onChange = new core.EventEmitter();
+            this.onModelChange = function (value) { };
+            this.onModelTouched = function (value) { };
+            this._id = "mecx-input-phone-" + MonkeyUtils.getRandomString(10);
+            this._disabled = false;
+            this._maxDateToday = new Date().toISOString().split('T')[0];
+            this._symbol = '';
+            this._countryCodes = [];
+        }
+        MonkeyInputPhoneComponent.prototype.handleValue = function (value, apply) {
+            if (apply === void 0) { apply = false; }
+            if (this.onlyNumber) {
+                return MonkeyUtils.handleOnlyNumbers("" + value);
+            }
+            else if (this.onlyAlphaNumeric)
+                return MonkeyUtils.handleOnlyAlphaNumeric("" + value);
+            else if (this.upperCase)
+                return ("" + value).toUpperCase();
+            else if (this.lowerCase)
+                return ("" + value).toLowerCase();
+            else if (this.capitalize)
+                return MonkeyUtils.capitalize(("" + value).toUpperCase());
+            else if (this.currency || this.percent) {
+                return MonkeyUtils.handleOnlyNumbers("" + value) / (apply ? 100 : 1);
+            }
+            return value;
+        };
+        MonkeyInputPhoneComponent.prototype.replaceZero = function (value) {
+            return ("" + value).replace(new RegExp(/0/, 'g'), '');
+        };
+        MonkeyInputPhoneComponent.prototype.formatValue = function (value) {
+            //console.log(this.phoneUtil);
+            //console.log(this.phoneUtil.formatInOriginalFormat(value, 'US'));
+            //this.phoneUtil.inputDigit('2');
+            console.log(formatter.inputDigit(value));
+            var number = phoneUtil.parse(value, 'BR');
+            console.log(phoneUtil.isPossibleNumber(number));
+            console.log(phoneUtil.format(number, googleLibphonenumber.PhoneNumberFormat.INTERNATIONAL));
+            return phoneUtil.format(number, googleLibphonenumber.PhoneNumberFormat.INTERNATIONAL);
+        };
+        MonkeyInputPhoneComponent.prototype.handleSymbol = function () {
+            var _a;
+            var settings = this.settings;
+            if (this.currency) {
+                this._symbol = {
+                    BRL: 'R$',
+                    CLP: 'CLP',
+                }[((_a = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _a === void 0 ? void 0 : _a.code) || 'BRL'];
+            }
+            else if (this.percent) {
+                this._symbol = '%';
+            }
+        };
+        MonkeyInputPhoneComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var settingsService = this.settingsService;
+            this._oldType = this.type;
+            settingsService.settings().subscribe(function (val) {
+                _this.settings = val;
+                _this.handleSymbol();
+            });
+            this._countryCodes = phoneUtil
+                .getSupportedRegions()
+                .map(function (code) {
+                return phoneUtil.getCountryCodeForRegion(code);
+            })
+                .filter(function (v, i, a) { return a.indexOf(v) === i; })
+                .sort(function (a, b) { return (a < b ? -1 : 1); });
+        };
+        MonkeyInputPhoneComponent.prototype.registerOnChange = function (fn) {
+            this.onModelChange = fn;
+        };
+        MonkeyInputPhoneComponent.prototype.registerOnTouched = function (fn) {
+            this.onModelTouched = fn;
+        };
+        MonkeyInputPhoneComponent.prototype.setDisabledState = function (isDisabled) {
+            this._disabled = isDisabled;
+        };
+        Object.defineProperty(MonkeyInputPhoneComponent.prototype, "value", {
+            get: function () {
+                return this.handledValue;
+            },
+            set: function (value) {
+                this.handledValue = value;
+                this._formatedValue = this.formatValue(value);
+                this.cdr.detectChanges();
+                this.onModelChange(this.handledValue);
+                this.onModelTouched(this.handledValue);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MonkeyInputPhoneComponent.prototype.writeValue = function (value) {
+            this.value = value;
+        };
+        MonkeyInputPhoneComponent.prototype.onChangeValue = function (event) {
+            var value = this._formatedValue;
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            event === null || event === void 0 ? void 0 : event.stopPropagation();
+            var handled = this.handleValue(value, true);
+            this.writeValue(handled);
+            this.onChange.next(handled);
+        };
+        MonkeyInputPhoneComponent.prototype.onShowAndHidePassword = function () {
+            this.type = this.type === 'password' ? 'text' : 'password';
+        };
+        MonkeyInputPhoneComponent.prototype.onClick = function () {
+            var _a, _b, _c;
+            (_c = (_b = (_a = document === null || document === void 0 ? void 0 : document.getElementById(this._id)) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.focus();
+        };
+        MonkeyInputPhoneComponent.prototype.onKeyPress = function (event) {
+            var _a;
+            var pattern = null;
+            var cmp = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+            var inputChar = String.fromCharCode(event.charCode);
+            if (this.currency || this.onlyNumber || this.percent) {
+                pattern = /[0-9]/;
+                if (inputChar === '0' && !this.replaceZero(cmp)) {
+                    event.preventDefault();
+                    return;
+                }
+            }
+            else if (this.onlyAlphaNumeric) {
+                pattern = /[^0-9A-Za-z]/;
+            }
+            if (pattern && !pattern.test(inputChar)) {
+                event.preventDefault();
+            }
+        };
+        return MonkeyInputPhoneComponent;
+    }());
+    MonkeyInputPhoneComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'monkey-input-phone',
+                    template: "\n    <monkey-select\n      [label]=\"'teste'\"\n      errorMessage=\"\"\n      errorMessage=\"\"\n      [placeholder]=\"'Selecione um banco'\"\n    >\n      <monkey-option label=\"op\" value=\"op\"> </monkey-option>\n      <monkey-option label=\"op\" value=\"op\"> </monkey-option>\n      <monkey-option label=\"op\" value=\"op\"> </monkey-option>\n    </monkey-select>\n  ",
+                    encapsulation: core.ViewEncapsulation.None,
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return MonkeyInputPhoneComponent; }),
+                            multi: true,
+                        },
+                        common.CurrencyPipe,
+                    ]
+                },] }
+    ];
+    MonkeyInputPhoneComponent.ctorParameters = function () { return [
+        { type: common.CurrencyPipe },
+        { type: MonkeyStyleGuideSettingsService },
+        { type: core.ChangeDetectorRef }
+    ]; };
+    MonkeyInputPhoneComponent.propDecorators = {
+        name: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        helperMessage: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        icon: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        infoMessage: [{ type: core.Input }],
+        errorMessage: [{ type: core.Input }],
+        mask: [{ type: core.Input }],
+        prefix: [{ type: core.Input }],
+        maxLength: [{ type: core.Input }],
+        onlyNumber: [{ type: core.Input }],
+        onlyAlphaNumeric: [{ type: core.Input }],
+        upperCase: [{ type: core.Input }],
+        lowerCase: [{ type: core.Input }],
+        capitalize: [{ type: core.Input }],
+        currency: [{ type: core.Input }],
+        percent: [{ type: core.Input }],
+        maxDateToday: [{ type: core.Input }],
+        onChange: [{ type: core.Output }],
+        value: [{ type: core.Input }],
+        onClick: [{ type: core.HostListener, args: ['click',] }]
+    };
+
     /**************************
      * Copyright Monkey Exchange. All Rights Reserved
      * This style guide was developed by Monkey Exchange Team
@@ -3604,6 +3803,27 @@
                 },] }
     ];
 
+    var MonkeyInputPhoneModule = /** @class */ (function () {
+        function MonkeyInputPhoneModule() {
+        }
+        return MonkeyInputPhoneModule;
+    }());
+    MonkeyInputPhoneModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [MonkeyInputPhoneComponent],
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        ngxMask.NgxMaskModule.forRoot(),
+                        MonkeyIconModule,
+                        MonkeySelectModule,
+                    ],
+                    exports: [MonkeyInputPhoneComponent],
+                    schemas: [core.NO_ERRORS_SCHEMA],
+                },] }
+    ];
+
     /**************************
      * Copyright Monkey Exchange. All Rights Reserved
      * This style guide was developed by Monkey Exchange Team
@@ -4978,6 +5198,8 @@
     exports.MonkeyInputComponent = MonkeyInputComponent;
     exports.MonkeyInputFilterComponent = MonkeyInputFilterComponent;
     exports.MonkeyInputModule = MonkeyInputModule;
+    exports.MonkeyInputPhoneComponent = MonkeyInputPhoneComponent;
+    exports.MonkeyInputPhoneModule = MonkeyInputPhoneModule;
     exports.MonkeyModalComponent = MonkeyModalComponent;
     exports.MonkeyModalModule = MonkeyModalModule;
     exports.MonkeyOptionComponent = MonkeyOptionComponent;
@@ -5006,7 +5228,6 @@
     exports.MonkeyUtils = MonkeyUtils;
     exports.MonkeyWizardComponent = MonkeyWizardComponent;
     exports.MonkeyWizardModule = MonkeyWizardModule;
-    exports.ɵ0 = ɵ0;
     exports.ɵa = MonkeyStyleGuideService;
     exports.ɵb = MonkeyStyleGuideSettingsService;
     exports.ɵc = MonkeyStyleGuideThemeSettingsService;