monkey-style-guide 2.0.82 → 2.0.86

package/fesm2015/monkey-style-guide.js

@@ -2,8 +2,9 @@ import { Injectable, Inject, ComponentFactoryResolver, ApplicationRef, Injector,
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { BehaviorSubject, throwError, Subject } from 'rxjs';
 import { DOCUMENT, Location, CommonModule, CurrencyPipe } from '@angular/common';
-import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms';
 import { takeUntil } from 'rxjs/operators';
+import * as moment_ from 'moment';
 import { NgxMaskModule } from 'ngx-mask';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -91,7 +92,7 @@ MonkeyStyleGuideThemeSettingsService.ctorParameters = () => [
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
-**************************/
+ **************************/
 class MonkeyStyleGuideSettingsService {
     constructor(monkeySGService, monkeySGThemeConfigService) {
         this.monkeySGService = monkeySGService;
@@ -2039,6 +2040,334 @@ MonkeyButtonModule.decorators = [
             },] }
 ];
 
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ **************************/
+const moment = moment_;
+const ɵ0 = () => {
+    const 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);
+};
+const isMobile = (ɵ0)();
+class MonkeyDateRangePickerComponent {
+    constructor(fb, cdr) {
+        this.fb = fb;
+        this.cdr = cdr;
+        this.onChange = new EventEmitter();
+        this.today = moment().format('YYYY-MM-DD');
+        this.onModelChange = (value) => { };
+        this.onModelTouched = (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();
+    }
+    initDateRange() {
+        return (this._dateForm = this.fb.group({
+            startDate: [null, Validators.required],
+            endDate: [null, Validators.required],
+        }));
+    }
+    createCalendar(month) {
+        let firstDay = moment(month).startOf('M');
+        let lastDay = moment(month).endOf('M');
+        let days = Array.apply(null, { length: month.daysInMonth() })
+            .map(Number.call, Number)
+            .map((n) => {
+            return moment(firstDay).add(n, 'd');
+        });
+        let n = 0;
+        while (n < firstDay.weekday()) {
+            days.unshift(null);
+            n++;
+        }
+        n = 0;
+        while (n < 7 - lastDay.weekday()) {
+            days.push(null);
+            n++;
+        }
+        let index = 1;
+        let group = [];
+        let grouped = [];
+        Object.entries(days).map(([key, value]) => {
+            if (index > 7) {
+                index = 1;
+                grouped.push(group);
+                group = [];
+            }
+            group.push(value);
+            index++;
+        });
+        grouped.push(group);
+        return grouped;
+    }
+    build() {
+        this._daysArrFirst = this.createCalendar(this._dateFirst);
+        if (!isMobile) {
+            this._daysArrSecond = this.createCalendar(this._dateSecond);
+        }
+    }
+    navigateToToday() {
+        this._dateFirst = moment();
+        this._dateSecond = moment().add(1, 'M');
+        this.build();
+    }
+    ngOnInit() {
+        this.build();
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    set value(value) {
+        this._dateForm.setValue(value);
+        this.cdr.detectChanges();
+        this.onModelChange(this._dateForm.value);
+        this.onModelTouched(this._dateForm.value);
+    }
+    get value() {
+        return this._dateForm.value;
+    }
+    writeValue(value) {
+        this.value = value;
+        this.onChange.next(value);
+    }
+    nextMonth() {
+        this._dateFirst.add(1, 'M');
+        this._dateSecond.add(1, 'M');
+        this._daysArrFirst = this.createCalendar(this._dateFirst);
+        this._daysArrSecond = this.createCalendar(this._dateSecond);
+    }
+    previousMonth() {
+        this._dateFirst.subtract(1, 'M');
+        this._dateSecond.subtract(1, 'M');
+        this._daysArrFirst = this.createCalendar(this._dateFirst);
+        this._daysArrSecond = this.createCalendar(this._dateSecond);
+    }
+    todayCheck(day) {
+        if (!day) {
+            return false;
+        }
+        return moment().format('L') === day.format('L');
+    }
+    isSelected(day) {
+        if (!day) {
+            return false;
+        }
+        let startDateMoment = moment(this._dateForm.value.startDate, 'YYYY-MM-DD');
+        let 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);
+        }
+    }
+    isFirstSelected(day) {
+        const { _dateForm } = this;
+        const { startDate } = _dateForm.value;
+        return day === null || day === void 0 ? void 0 : day.isSame(startDate);
+    }
+    isLastSelected(day) {
+        const { _dateForm } = this;
+        const { endDate } = _dateForm.value;
+        return day === null || day === void 0 ? void 0 : day.isSame(endDate);
+    }
+    selectedDate(day) {
+        const { _dateForm } = this;
+        let 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);
+        }
+    }
+    selectRangeOfDays(days) {
+        const { _dateForm, today } = this;
+        const { startDate } = _dateForm.value;
+        const firstDay = startDate || today;
+        const lastDay = moment(firstDay).add(days, 'day').format('YYYY-MM-DD');
+        _dateForm.get('startDate').patchValue(firstDay);
+        _dateForm.get('endDate').patchValue(lastDay);
+        this.writeValue(_dateForm.value);
+    }
+}
+MonkeyDateRangePickerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'monkey-date-range-picker',
+                template: `
+    <mecx-date-range-picker-group [class.error]="errorMessage?.trim()">
+      <mecx-date-range-picker-group-body>
+        <mecx-date-range-picker class="first-date-range">
+          <mecx-date-range-picker-header>
+            <div class="calendar-title">
+              <monkey-button
+                class="calendar-previous"
+                color="theme"
+                icon="arrow-left-16"
+                type="tertiary"
+                (click)="previousMonth()"
+                size="sm"
+              >
+              </monkey-button>
+              <div class="month-year-title">
+                {{ i18n?.months?.[_dateFirst.format('M')] }}
+                {{ _dateFirst.format('YYYY') }}
+              </div>
+              <monkey-button
+                class="calendar-next"
+                color="theme"
+                icon="arrow-right-16"
+                type="tertiary"
+                (click)="nextMonth()"
+                size="sm"
+              >
+              </monkey-button>
+            </div>
+            <div class="week">
+              <span class="week-day" *ngFor="let day of [1, 2, 3, 4, 5, 6, 7]">
+                {{ i18n?.days?.[day]}}
+              </span>
+            </div>
+          </mecx-date-range-picker-header>
+          <mecx-date-range-picker-body>
+            <div class="month-week" *ngFor="let week of _daysArrFirst">
+              <div
+                class="month-day"
+                (click)="selectedDate(day)"
+                [ngClass]="{
+                  inactive: !day,
+                  selected: isSelected(day),
+                  today: todayCheck(day),
+                  'first-selected': isFirstSelected(day),
+                  'last-selected': isLastSelected(day)
+                }"
+                *ngFor="let day of week"
+                #divOne
+              >
+                {{ day?.date() }}
+              </div>
+            </div>
+          </mecx-date-range-picker-body>
+        </mecx-date-range-picker>
+
+        <mecx-date-range-picker class="second-date-range" *ngIf="_daysArrSecond?.length">
+          <mecx-date-range-picker-header>
+            <div class="calendar-title">
+              <div class="month-year-title">
+                {{ i18n?.months?.[_dateSecond.format('M')] }}
+                {{ _dateSecond.format('YYYY') }}
+              </div>
+              <monkey-button
+                class="calendar-previous"
+                color="theme"
+                icon="arrow-right-16"
+                type="tertiary"
+                (click)="nextMonth()"
+                size="sm"
+              >
+              </monkey-button>
+            </div>
+            <div class="week">
+              <span class="week-day" *ngFor="let day of [1, 2, 3, 4, 5, 6, 7]">
+                {{ i18n?.days?.[day]}}
+              </span>
+            </div>
+          </mecx-date-range-picker-header>
+          <mecx-date-range-picker-body>
+            <div class="month-week" *ngFor="let week of _daysArrSecond">
+              <div
+                class="month-day"
+                (click)="selectedDate(day)"
+                [ngClass]="{
+                  inactive: !day,
+                  selected: isSelected(day),
+                  today: todayCheck(day),
+                  'first-selected': isFirstSelected(day),
+                  'last-selected': isLastSelected(day)
+                }"
+                *ngFor="let day of week"
+              >
+                {{ day?.date() }}
+              </div>
+            </div>
+          </mecx-date-range-picker-body>
+        </mecx-date-range-picker>
+      </mecx-date-range-picker-group-body>
+      <mecx-date-range-picker-group-info>
+        <info>
+          {{ infoMessage }}
+        </info>
+        <error>
+          {{ errorMessage }}
+        </error>
+      </mecx-date-range-picker-group-info>
+      <mecx-date-range-picker-group-action>
+        <div class="action-days">
+          <monkey-button color="theme" type="secondary" (click)="selectRangeOfDays(30)">
+            {{ i18n?.actions?.['30'] }}
+          </monkey-button>
+          <monkey-button color="theme" type="secondary" (click)="selectRangeOfDays(60)">
+            {{ i18n?.actions?.['60'] }}
+          </monkey-button>
+          <monkey-button color="theme" type="secondary" (click)="selectRangeOfDays(90)">
+            {{ i18n?.actions?.['90'] }}
+          </monkey-button>
+        </div>
+        <monkey-button color="theme" type="primary" (click)="navigateToToday()">
+          {{ i18n?.today }}
+        </monkey-button>
+      </mecx-date-range-picker-group-action>
+    </mecx-date-range-picker-group>
+  `,
+                encapsulation: ViewEncapsulation.None,
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => MonkeyDateRangePickerComponent),
+                        multi: true,
+                    },
+                    CurrencyPipe,
+                ]
+            },] }
+];
+MonkeyDateRangePickerComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: ChangeDetectorRef }
+];
+MonkeyDateRangePickerComponent.propDecorators = {
+    i18n: [{ type: Input }],
+    infoMessage: [{ type: Input }],
+    errorMessage: [{ type: Input }],
+    onChange: [{ type: Output }],
+    value: [{ type: Input }]
+};
+
+class MonkeyDateRangePickerModule {
+}
+MonkeyDateRangePickerModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [MonkeyDateRangePickerComponent],
+                imports: [CommonModule, FormsModule, ReactiveFormsModule, MonkeyButtonModule, MonkeyIconModule],
+                exports: [MonkeyDateRangePickerComponent],
+                schemas: [NO_ERRORS_SCHEMA],
+            },] }
+];
+
 /**************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -2079,12 +2408,15 @@ class MonkeyInputComponent {
         }
         return value;
     }
+    replaceZero(value) {
+        return `${value}`.replace(new RegExp(/0/, 'g'), '');
+    }
     formatValue(value) {
         var _a, _b;
         const { settings } = this;
         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) {
@@ -2151,10 +2483,16 @@ class MonkeyInputComponent {
         (_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();
     }
     onKeyPress(event) {
+        var _a;
         let pattern = null;
+        const cmp = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
         const 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]/;
@@ -5051,5 +5389,5 @@ MonkeyStyleGuideModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { MonkeyBadgeComponent, MonkeyBadgeModule, MonkeyButtonAvatarComponent, MonkeyButtonComponent, MonkeyButtonDropdownComponent, MonkeyButtonModule, MonkeyCheckboxComponent, MonkeyCheckboxModule, MonkeyExpansionComponent, MonkeyExpansionModule, MonkeyFileUploadComponent, MonkeyFileUploadModule, MonkeyIconArrowDownComponent, MonkeyIconArrowLeftComponent, MonkeyIconArrowRightComponent, MonkeyIconArrowUpComponent, MonkeyIconBankComponent, MonkeyIconBellComponent, MonkeyIconBookComponent, MonkeyIconBoxComponent, MonkeyIconCNPJComponent, MonkeyIconCalendarComponent, MonkeyIconCameraComponent, MonkeyIconChatComponent, MonkeyIconCheckCircleComponent, MonkeyIconCheckCircleOutComponent, MonkeyIconCheckComponent, MonkeyIconCheckGreyComponent, MonkeyIconCheckWhiteComponent, MonkeyIconClipboardComponent, MonkeyIconClockComponent, MonkeyIconCloseComponent, MonkeyIconCodepenComponent, MonkeyIconCompanyNameComponent, MonkeyIconComponent, MonkeyIconContractComponent, MonkeyIconDeleteComponent, MonkeyIconDocumentComponent, MonkeyIconDollarSignComponent, MonkeyIconDomainComponent, MonkeyIconDownloadComponent, MonkeyIconEditComponent, MonkeyIconEmailComponent, MonkeyIconEmptyDocComponent, MonkeyIconErrorComponent, MonkeyIconEyeClosedComponent, MonkeyIconEyeOpenComponent, MonkeyIconFilterComponent, MonkeyIconGridComponent, MonkeyIconHelpComponent, MonkeyIconHexagonComponent, MonkeyIconHomeComponent, MonkeyIconImageComponent, MonkeyIconListComponent, MonkeyIconLocationPinComponent, MonkeyIconLoginComponent, MonkeyIconLogoutComponent, MonkeyIconMenuComponent, MonkeyIconModule, MonkeyIconMoneySignComponent, MonkeyIconMoreComponent, MonkeyIconOfferedComponent, MonkeyIconPasswordComponent, MonkeyIconPeopleComponent, MonkeyIconPercentComponent, MonkeyIconPersonDocumentComponent, MonkeyIconPersonSadComponent, MonkeyIconPhoneComponent, MonkeyIconPorkComponent, MonkeyIconRefreshComponent, MonkeyIconRepeatComponent, MonkeyIconSearchComponent, MonkeyIconSecondWarningComponent, MonkeyIconSettingsComponent, MonkeyIconTrashComponent, MonkeyIconUploadComponent, MonkeyIconUserComponent, MonkeyIconWalletComponent, MonkeyIconWarningComponent, MonkeyImageCropComponent, MonkeyImageCropModule, MonkeyInputComponent, MonkeyInputFilterComponent, MonkeyInputModule, MonkeyModalComponent, MonkeyModalModule, MonkeyOptionComponent, MonkeyOptionModule, MonkeyRadioButtonComponent, MonkeyRadioButtonModule, MonkeySelectComponent, MonkeySelectFilterComponent, MonkeySelectModule, MonkeySelectMultipleComponent, MonkeySelectSearchComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStyleGuideModalFixedService, MonkeyStyleGuideModalService, MonkeyStyleGuideModule, MonkeyStyleGuideSettingsService, MonkeyStyleGuideSnackbarService, MonkeyTabComponent, MonkeyTabModule, MonkeyTableColumnComponent, MonkeyTableComponent, MonkeyTableModule, MonkeyToggleComponent, MonkeyToggleModule, MonkeyUtils, MonkeyWizardComponent, MonkeyWizardModule, MonkeyStyleGuideService as ɵa, MonkeyStyleGuideSettingsService as ɵb, MonkeyStyleGuideThemeSettingsService as ɵc, MonkeyStyleGuideSnackbarService as ɵd };
+export { MonkeyBadgeComponent, MonkeyBadgeModule, MonkeyButtonAvatarComponent, MonkeyButtonComponent, MonkeyButtonDropdownComponent, MonkeyButtonModule, MonkeyCheckboxComponent, MonkeyCheckboxModule, MonkeyDateRangePickerComponent, MonkeyDateRangePickerModule, MonkeyExpansionComponent, MonkeyExpansionModule, MonkeyFileUploadComponent, MonkeyFileUploadModule, MonkeyIconArrowDownComponent, MonkeyIconArrowLeftComponent, MonkeyIconArrowRightComponent, MonkeyIconArrowUpComponent, MonkeyIconBankComponent, MonkeyIconBellComponent, MonkeyIconBookComponent, MonkeyIconBoxComponent, MonkeyIconCNPJComponent, MonkeyIconCalendarComponent, MonkeyIconCameraComponent, MonkeyIconChatComponent, MonkeyIconCheckCircleComponent, MonkeyIconCheckCircleOutComponent, MonkeyIconCheckComponent, MonkeyIconCheckGreyComponent, MonkeyIconCheckWhiteComponent, MonkeyIconClipboardComponent, MonkeyIconClockComponent, MonkeyIconCloseComponent, MonkeyIconCodepenComponent, MonkeyIconCompanyNameComponent, MonkeyIconComponent, MonkeyIconContractComponent, MonkeyIconDeleteComponent, MonkeyIconDocumentComponent, MonkeyIconDollarSignComponent, MonkeyIconDomainComponent, MonkeyIconDownloadComponent, MonkeyIconEditComponent, MonkeyIconEmailComponent, MonkeyIconEmptyDocComponent, MonkeyIconErrorComponent, MonkeyIconEyeClosedComponent, MonkeyIconEyeOpenComponent, MonkeyIconFilterComponent, MonkeyIconGridComponent, MonkeyIconHelpComponent, MonkeyIconHexagonComponent, MonkeyIconHomeComponent, MonkeyIconImageComponent, MonkeyIconListComponent, MonkeyIconLocationPinComponent, MonkeyIconLoginComponent, MonkeyIconLogoutComponent, MonkeyIconMenuComponent, MonkeyIconModule, MonkeyIconMoneySignComponent, MonkeyIconMoreComponent, MonkeyIconOfferedComponent, MonkeyIconPasswordComponent, MonkeyIconPeopleComponent, MonkeyIconPercentComponent, MonkeyIconPersonDocumentComponent, MonkeyIconPersonSadComponent, MonkeyIconPhoneComponent, MonkeyIconPorkComponent, MonkeyIconRefreshComponent, MonkeyIconRepeatComponent, MonkeyIconSearchComponent, MonkeyIconSecondWarningComponent, MonkeyIconSettingsComponent, MonkeyIconTrashComponent, MonkeyIconUploadComponent, MonkeyIconUserComponent, MonkeyIconWalletComponent, MonkeyIconWarningComponent, MonkeyImageCropComponent, MonkeyImageCropModule, MonkeyInputComponent, MonkeyInputFilterComponent, MonkeyInputModule, MonkeyModalComponent, MonkeyModalModule, MonkeyOptionComponent, MonkeyOptionModule, MonkeyRadioButtonComponent, MonkeyRadioButtonModule, MonkeySelectComponent, MonkeySelectFilterComponent, MonkeySelectModule, MonkeySelectMultipleComponent, MonkeySelectSearchComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStyleGuideModalFixedService, MonkeyStyleGuideModalService, MonkeyStyleGuideModule, MonkeyStyleGuideSettingsService, MonkeyStyleGuideSnackbarService, MonkeyTabComponent, MonkeyTabModule, MonkeyTableColumnComponent, MonkeyTableComponent, MonkeyTableModule, MonkeyToggleComponent, MonkeyToggleModule, MonkeyUtils, MonkeyWizardComponent, MonkeyWizardModule, ɵ0, MonkeyStyleGuideService as ɵa, MonkeyStyleGuideSettingsService as ɵb, MonkeyStyleGuideThemeSettingsService as ɵc, MonkeyStyleGuideSnackbarService as ɵd };
 //# sourceMappingURL=monkey-style-guide.js.map