monkey-style-guide 2.0.81 → 2.0.85

package/README.md

@@ -1071,7 +1071,7 @@ export class AppComponent {
 [icon-screenshot1]: https://user-images.githubusercontent.com/10110065/111643849-0ddcdd80-87de-11eb-8161-fc5a20a1d237.png
 [icons-screenshot1]: https://user-images.githubusercontent.com/12416871/112203694-90580980-8bf1-11eb-969f-2ac21a7b9dee.png
 [radiobutton-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/radiobutton.png
-[buttons-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/buttons.png
+[buttons-screenshot]: https://user-images.githubusercontent.com/10110065/142933460-7a84ad76-b57f-40a0-b809-292af31c1e8f.png
 [settings-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/style-settings-json.png
 [table-screenshot]: https://user-images.githubusercontent.com/12416871/119574643-29d79f00-bd8c-11eb-9747-2e6dc86410da.png
 [modal-screenshot]: https://user-images.githubusercontent.com/12416871/119838920-2c480f00-beda-11eb-9e44-e42262f39c34.png

package/assets/scss/partials/_forms.scss

@@ -108,7 +108,7 @@ mecx-form-field {
       font-weight: normal;
       font-size: 14px;
       line-height: 17px;
-      color: #4b4a53;
+      color: #9c9ca6;
     }
   }
 

package/assets/scss/partials/components/_buttons.scss

@@ -297,7 +297,7 @@ monkey-button[disabled] {
 
   &__theme {
     background-color: inherit;
-    color: map-get($mecx-theme, main);
+    color: map-get($mecx-theme, 500);
     box-sizing: border-box;
     background-position: center;
 
@@ -317,7 +317,7 @@ monkey-button[disabled] {
 
   &__error {
     background-color: inherit;
-    color: map-get($mecx-error, main);
+    color: map-get($mecx-error, 500);
     box-sizing: border-box;
     background-position: center;
 
@@ -337,7 +337,7 @@ monkey-button[disabled] {
 
   &__warning {
     background-color: inherit;
-    color: map-get($mecx-warning, main);
+    color: map-get($mecx-warning, 500);
     box-sizing: border-box;
     background-position: center;
 
@@ -357,7 +357,7 @@ monkey-button[disabled] {
 
   &__success {
     background-color: inherit;
-    color: map-get($mecx-success, main);
+    color: map-get($mecx-success, 500);
     box-sizing: border-box;
     background-position: center;
 
@@ -377,7 +377,7 @@ monkey-button[disabled] {
 
   &__question {
     background-color: inherit;
-    color: map-get($mecx-question, 700);
+    color: map-get($mecx-question, 500);
     box-sizing: border-box;
     background-position: center;
 

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

@@ -0,0 +1,205 @@
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+@import '../variables';
+@import '../breakpoints.scss';
+
+monkey-date-range-picker {
+  background: #fafafa;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 32px 36px;
+
+  @include media-breakpoint('xs') {
+    padding: 16px;
+  }
+
+  mecx-date-range-picker-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &.error {
+      border: 1px solid #fa3838;
+      padding: 4px;
+    }
+
+    mecx-date-range-picker-group-body {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+
+      .first-date-range {
+        .calendar-next {
+          display: none;
+        }
+      }
+
+      @include media-breakpoint('xs') {
+        flex-direction: column;
+
+        .first-date-range {
+          .calendar-next {
+            display: inline-block;
+          }
+        }
+
+        .second-date-range {
+          display: none;
+        }
+      }
+    }
+
+    mecx-date-range-picker-group-info {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      color: #4b4a53;
+      font-size: 12px;
+      line-height: 16px;
+      height: 30px;
+
+      info {
+        color: #4b4a53;
+        text-align: left;
+      }
+      error {
+        color: map-get($mecx-error, main);
+        text-align: left;
+      }
+    }
+
+    mecx-date-range-picker-group-action {
+      display: flex;
+      justify-content: space-between;
+      border-top: 1px solid #d6d6d6;
+      padding-top: 16px;
+      align-items: flex-end;
+
+      .action-days > * {
+        margin-right: 24px;
+      }
+
+      .action-days > * :last-child {
+        margin-top: 8px;
+      }
+    }
+  }
+
+  mecx-date-range-picker-header {
+    display: flex;
+    flex-direction: column;
+
+    .calendar-title {
+      align-items: center;
+      color: #4b4a53;
+      display: flex;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 21px;
+      margin-bottom: 8px;
+      text-align: center;
+
+      .month-year-title {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    .week {
+      display: flex;
+      justify-content: center;
+
+      .week-day {
+        align-items: center;
+        color: #4b4a53;
+        display: flex;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: normal;
+        justify-content: center;
+        line-height: 16px;
+        margin-bottom: 8px;
+        text-align: center;
+        height: 16px;
+        width: 40px;
+
+        @include media-breakpoint('xs') {
+          height: 42px;
+          width: 42px;
+        }
+      }
+    }
+  }
+
+  mecx-date-range-picker-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .month-week {
+      display: flex;
+    }
+
+    .month-day {
+      align-items: center;
+      color: #4b4a53;
+      cursor: pointer;
+      display: flex;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: normal;
+      justify-content: center;
+      line-height: 16px;
+      margin-bottom: 8px;
+      text-align: center;
+      width: 40px;
+      height: 16px;
+
+      @include media-breakpoint('xs') {
+        height: 42px;
+        width: 42px;
+      }
+
+      &.inactive {
+        opacity: 0.5;
+      }
+
+      &.today {
+        color: map-get($mecx-theme, main);
+        font-weight: 700;
+      }
+    }
+
+    .selected {
+      background: #ebebeb;
+      color: map-get($mecx-theme, main);
+    }
+
+    .first-selected {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+
+    .last-selected {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+
+  monkey-button.calendar-previous,
+  monkey-button.calendar-next {
+    monkey-icon {
+      margin: 0;
+    }
+  }
+}

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

@@ -8,6 +8,7 @@
 @import 'select';
 @import 'buttons';
 @import 'checkbox';
+@import 'date-range-picker';
 @import 'radiobutton';
 @import 'wizard';
 @import 'snackbar';

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

@@ -1,8 +1,30 @@
 (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('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', '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['ngx-mask'], global.ng.platformBrowser));
-}(this, (function (exports, core, http, rxjs, common, forms, operators, 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('@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';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
+    var moment___namespace = /*#__PURE__*/_interopNamespace(moment_);
 
     var MonkeyStyleGuideService = /** @class */ (function () {
         function MonkeyStyleGuideService(http) {
@@ -407,7 +429,7 @@
      * Copyright Monkey Exchange. All Rights Reserved
      * This style guide was developed by Monkey Exchange Team
      * MIT Licence
-    **************************/
+     **************************/
     var MonkeyStyleGuideSettingsService = /** @class */ (function () {
         function MonkeyStyleGuideSettingsService(monkeySGService, monkeySGThemeConfigService) {
             this.monkeySGService = monkeySGService;
@@ -2224,6 +2246,214 @@
                 },] }
     ];
 
+    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;
+            this.cdr = cdr;
+            this.onChange = new core.EventEmitter();
+            this.today = moment().format('YYYY-MM-DD');
+            this.onModelChange = function (value) { };
+            this.onModelTouched = function (value) { };
+            this._dateFirst = moment();
+            this._dateSecond = moment().add(1, 'M');
+            this._id = "mecx-date-range-picker-" + MonkeyUtils.getRandomString(10);
+            this._daysArrFirst = [];
+            this._daysArrSecond = [];
+            this.initDateRange();
+        }
+        MonkeyDateRangePickerComponent.prototype.initDateRange = function () {
+            return (this._dateForm = this.fb.group({
+                startDate: [null, forms.Validators.required],
+                endDate: [null, forms.Validators.required],
+            }));
+        };
+        MonkeyDateRangePickerComponent.prototype.createCalendar = function (month) {
+            var firstDay = moment(month).startOf('M');
+            var lastDay = moment(month).endOf('M');
+            var days = Array.apply(null, { length: month.daysInMonth() })
+                .map(Number.call, Number)
+                .map(function (n) {
+                return moment(firstDay).add(n, 'd');
+            });
+            var n = 0;
+            while (n < firstDay.weekday()) {
+                days.unshift(null);
+                n++;
+            }
+            n = 0;
+            while (n < 7 - lastDay.weekday()) {
+                days.push(null);
+                n++;
+            }
+            var index = 1;
+            var group = [];
+            var grouped = [];
+            Object.entries(days).map(function (_a) {
+                var _b = __read(_a, 2), key = _b[0], value = _b[1];
+                if (index > 7) {
+                    index = 1;
+                    grouped.push(group);
+                    group = [];
+                }
+                group.push(value);
+                index++;
+            });
+            grouped.push(group);
+            return grouped;
+        };
+        MonkeyDateRangePickerComponent.prototype.build = function () {
+            this._daysArrFirst = this.createCalendar(this._dateFirst);
+            if (!isMobile) {
+                this._daysArrSecond = this.createCalendar(this._dateSecond);
+            }
+        };
+        MonkeyDateRangePickerComponent.prototype.navigateToToday = function () {
+            this._dateFirst = moment();
+            this._dateSecond = moment().add(1, 'M');
+            this.build();
+        };
+        MonkeyDateRangePickerComponent.prototype.ngOnInit = function () {
+            this.build();
+        };
+        MonkeyDateRangePickerComponent.prototype.registerOnChange = function (fn) {
+            this.onModelChange = fn;
+        };
+        MonkeyDateRangePickerComponent.prototype.registerOnTouched = function (fn) {
+            this.onModelTouched = fn;
+        };
+        Object.defineProperty(MonkeyDateRangePickerComponent.prototype, "value", {
+            get: function () {
+                return this._dateForm.value;
+            },
+            set: function (value) {
+                this._dateForm.setValue(value);
+                this.cdr.detectChanges();
+                this.onModelChange(this._dateForm.value);
+                this.onModelTouched(this._dateForm.value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MonkeyDateRangePickerComponent.prototype.writeValue = function (value) {
+            this.value = value;
+            this.onChange.next(value);
+        };
+        MonkeyDateRangePickerComponent.prototype.nextMonth = function () {
+            this._dateFirst.add(1, 'M');
+            this._dateSecond.add(1, 'M');
+            this._daysArrFirst = this.createCalendar(this._dateFirst);
+            this._daysArrSecond = this.createCalendar(this._dateSecond);
+        };
+        MonkeyDateRangePickerComponent.prototype.previousMonth = function () {
+            this._dateFirst.subtract(1, 'M');
+            this._dateSecond.subtract(1, 'M');
+            this._daysArrFirst = this.createCalendar(this._dateFirst);
+            this._daysArrSecond = this.createCalendar(this._dateSecond);
+        };
+        MonkeyDateRangePickerComponent.prototype.todayCheck = function (day) {
+            if (!day) {
+                return false;
+            }
+            return moment().format('L') === day.format('L');
+        };
+        MonkeyDateRangePickerComponent.prototype.isSelected = function (day) {
+            if (!day) {
+                return false;
+            }
+            var startDateMoment = moment(this._dateForm.value.startDate, 'YYYY-MM-DD');
+            var endDateMoment = moment(this._dateForm.value.endDate, 'YYYY-MM-DD');
+            if (this._dateForm.valid) {
+                return startDateMoment.isSameOrBefore(day) && endDateMoment.isSameOrAfter(day);
+            }
+            if (this._dateForm.get('startDate').valid) {
+                return startDateMoment.isSame(day);
+            }
+        };
+        MonkeyDateRangePickerComponent.prototype.isFirstSelected = function (day) {
+            var _dateForm = this._dateForm;
+            var startDate = _dateForm.value.startDate;
+            return day === null || day === void 0 ? void 0 : day.isSame(startDate);
+        };
+        MonkeyDateRangePickerComponent.prototype.isLastSelected = function (day) {
+            var _dateForm = this._dateForm;
+            var endDate = _dateForm.value.endDate;
+            return day === null || day === void 0 ? void 0 : day.isSame(endDate);
+        };
+        MonkeyDateRangePickerComponent.prototype.selectedDate = function (day) {
+            var _dateForm = this._dateForm;
+            var dayFormatted = day.format('YYYY-MM-DD');
+            if (_dateForm.valid) {
+                _dateForm.setValue({ startDate: null, endDate: null });
+                this.writeValue(null);
+                return;
+            }
+            if (!_dateForm.get('startDate').value) {
+                _dateForm.get('startDate').patchValue(dayFormatted);
+            }
+            else {
+                _dateForm.get('endDate').patchValue(dayFormatted);
+                this.writeValue(_dateForm.value);
+            }
+        };
+        MonkeyDateRangePickerComponent.prototype.selectRangeOfDays = function (days) {
+            var _a = this, _dateForm = _a._dateForm, today = _a.today;
+            var startDate = _dateForm.value.startDate;
+            var firstDay = startDate || today;
+            var lastDay = moment(firstDay).add(days, 'day').format('YYYY-MM-DD');
+            _dateForm.get('startDate').patchValue(firstDay);
+            _dateForm.get('endDate').patchValue(lastDay);
+            this.writeValue(_dateForm.value);
+        };
+        return MonkeyDateRangePickerComponent;
+    }());
+    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  ",
+                    encapsulation: core.ViewEncapsulation.None,
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: core.forwardRef(function () { return MonkeyDateRangePickerComponent; }),
+                            multi: true,
+                        },
+                        common.CurrencyPipe,
+                    ]
+                },] }
+    ];
+    MonkeyDateRangePickerComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: core.ChangeDetectorRef }
+    ]; };
+    MonkeyDateRangePickerComponent.propDecorators = {
+        i18n: [{ type: core.Input }],
+        infoMessage: [{ type: core.Input }],
+        errorMessage: [{ type: core.Input }],
+        onChange: [{ type: core.Output }],
+        value: [{ type: core.Input }]
+    };
+
+    var MonkeyDateRangePickerModule = /** @class */ (function () {
+        function MonkeyDateRangePickerModule() {
+        }
+        return MonkeyDateRangePickerModule;
+    }());
+    MonkeyDateRangePickerModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [MonkeyDateRangePickerComponent],
+                    imports: [common.CommonModule, forms.FormsModule, forms.ReactiveFormsModule, MonkeyButtonModule, MonkeyIconModule],
+                    exports: [MonkeyDateRangePickerComponent],
+                    schemas: [core.NO_ERRORS_SCHEMA],
+                },] }
+    ];
+
     /**************************
      * Copyright Monkey Exchange. All Rights Reserved
      * This style guide was developed by Monkey Exchange Team
@@ -2265,12 +2495,15 @@
             }
             return value;
         };
+        MonkeyInputComponent.prototype.replaceZero = function (value) {
+            return ("" + value).replace(new RegExp(/0/, 'g'), '');
+        };
         MonkeyInputComponent.prototype.formatValue = function (value) {
             var _a, _b;
             var settings = this.settings;
             if (this.currency) {
-                if (!value)
-                    value = 0;
+                if (!value || !this.replaceZero(value))
+                    return '';
                 return this.currencyPipe.transform(value, ((_a = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _a === void 0 ? void 0 : _a.code) || 'BRL', '', '1.2-2', ((_b = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _b === void 0 ? void 0 : _b.locale) || 'pt-BR');
             }
             else if (this.percent) {
@@ -2342,10 +2575,16 @@
             (_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();
         };
         MonkeyInputComponent.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]/;
@@ -4661,6 +4900,8 @@
     exports.MonkeyButtonModule = MonkeyButtonModule;
     exports.MonkeyCheckboxComponent = MonkeyCheckboxComponent;
     exports.MonkeyCheckboxModule = MonkeyCheckboxModule;
+    exports.MonkeyDateRangePickerComponent = MonkeyDateRangePickerComponent;
+    exports.MonkeyDateRangePickerModule = MonkeyDateRangePickerModule;
     exports.MonkeyExpansionComponent = MonkeyExpansionComponent;
     exports.MonkeyExpansionModule = MonkeyExpansionModule;
     exports.MonkeyFileUploadComponent = MonkeyFileUploadComponent;
@@ -4765,6 +5006,7 @@
     exports.MonkeyUtils = MonkeyUtils;
     exports.MonkeyWizardComponent = MonkeyWizardComponent;
     exports.MonkeyWizardModule = MonkeyWizardModule;
+    exports.ɵ0 = ɵ0;
     exports.ɵa = MonkeyStyleGuideService;
     exports.ɵb = MonkeyStyleGuideSettingsService;
     exports.ɵc = MonkeyStyleGuideThemeSettingsService;