monkey-style-guide 2.0.86 → 2.0.91

package/fesm2015/monkey-style-guide.js

@@ -6,6 +6,7 @@ import { FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, FormBu
 import { takeUntil } from 'rxjs/operators';
 import * as moment_ from 'moment';
 import { NgxMaskModule } from 'ngx-mask';
+import { PhoneNumberUtil, AsYouTypeFormatter, PhoneNumberFormat } from 'google-libphonenumber';
 import { DomSanitizer } from '@angular/platform-browser';
 
 class MonkeyStyleGuideService {
@@ -2046,12 +2047,6 @@ MonkeyButtonModule.decorators = [
  * 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;
@@ -2108,9 +2103,11 @@ class MonkeyDateRangePickerComponent {
     }
     build() {
         this._daysArrFirst = this.createCalendar(this._dateFirst);
-        if (!isMobile) {
-            this._daysArrSecond = this.createCalendar(this._dateSecond);
-        }
+        this._daysArrSecond = this.createCalendar(this._dateSecond);
+    }
+    clearDates() {
+        this._dateForm.setValue({ startDate: null, endDate: null });
+        this.writeValue(this._dateForm.value);
     }
     navigateToToday() {
         this._dateFirst = moment();
@@ -2127,10 +2124,13 @@ class MonkeyDateRangePickerComponent {
         this.onModelTouched = fn;
     }
     set value(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);
+        }
     }
     get value() {
         return this._dateForm.value;
@@ -2184,17 +2184,24 @@ class MonkeyDateRangePickerComponent {
         const { _dateForm } = this;
         let dayFormatted = day.format('YYYY-MM-DD');
         if (_dateForm.valid) {
-            _dateForm.setValue({ startDate: null, endDate: null });
-            this.writeValue(null);
-            return;
+            this.clearDates();
+        }
+        let { startDate, endDate } = _dateForm.value;
+        if (startDate) {
+            if (moment(startDate).isAfter(moment(dayFormatted))) {
+                endDate = startDate;
+                startDate = dayFormatted;
+            }
         }
-        if (!_dateForm.get('startDate').value) {
-            _dateForm.get('startDate').patchValue(dayFormatted);
+        else
+            startDate = dayFormatted;
+        if (startDate) {
+            _dateForm.get('startDate').patchValue(startDate);
         }
-        else {
-            _dateForm.get('endDate').patchValue(dayFormatted);
-            this.writeValue(_dateForm.value);
+        if (endDate) {
+            _dateForm.get('endDate').patchValue(endDate);
         }
+        this.writeValue(_dateForm.value);
     }
     selectRangeOfDays(days) {
         const { _dateForm, today } = this;
@@ -2210,7 +2217,7 @@ 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>
       <mecx-date-range-picker-group-body>
         <mecx-date-range-picker class="first-date-range">
           <mecx-date-range-picker-header>
@@ -2265,7 +2272,7 @@ MonkeyDateRangePickerComponent.decorators = [
           </mecx-date-range-picker-body>
         </mecx-date-range-picker>
 
-        <mecx-date-range-picker class="second-date-range" *ngIf="_daysArrSecond?.length">
+        <mecx-date-range-picker class="second-date-range">
           <mecx-date-range-picker-header>
             <div class="calendar-title">
               <div class="month-year-title">
@@ -2316,7 +2323,7 @@ MonkeyDateRangePickerComponent.decorators = [
           {{ errorMessage }}
         </error>
       </mecx-date-range-picker-group-info>
-      <mecx-date-range-picker-group-action>
+      <mecx-date-range-picker-group-action [class.error]="errorMessage?.trim()">
         <div class="action-days">
           <monkey-button color="theme" type="secondary" (click)="selectRangeOfDays(30)">
             {{ i18n?.actions?.['30'] }}
@@ -2827,6 +2834,203 @@ MonkeyInputModule.decorators = [
             },] }
 ];
 
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ **************************/
+const phoneUtil = PhoneNumberUtil.getInstance();
+const formatter = new AsYouTypeFormatter('US');
+class MonkeyInputPhoneComponent {
+    constructor(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 EventEmitter();
+        this.onModelChange = (value) => { };
+        this.onModelTouched = (value) => { };
+        this._id = `mecx-input-phone-${MonkeyUtils.getRandomString(10)}`;
+        this._disabled = false;
+        this._maxDateToday = new Date().toISOString().split('T')[0];
+        this._symbol = '';
+        this._countryCodes = [];
+    }
+    handleValue(value, 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;
+    }
+    replaceZero(value) {
+        return `${value}`.replace(new RegExp(/0/, 'g'), '');
+    }
+    formatValue(value) {
+        //console.log(this.phoneUtil);
+        //console.log(this.phoneUtil.formatInOriginalFormat(value, 'US'));
+        //this.phoneUtil.inputDigit('2');
+        console.log(formatter.inputDigit(value));
+        const number = phoneUtil.parse(value, 'BR');
+        console.log(phoneUtil.isPossibleNumber(number));
+        console.log(phoneUtil.format(number, PhoneNumberFormat.INTERNATIONAL));
+        return phoneUtil.format(number, PhoneNumberFormat.INTERNATIONAL);
+    }
+    handleSymbol() {
+        var _a;
+        const { settings } = this;
+        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 = '%';
+        }
+    }
+    ngOnInit() {
+        const { settingsService } = this;
+        this._oldType = this.type;
+        settingsService.settings().subscribe((val) => {
+            this.settings = val;
+            this.handleSymbol();
+        });
+        this._countryCodes = phoneUtil
+            .getSupportedRegions()
+            .map((code) => {
+            return phoneUtil.getCountryCodeForRegion(code);
+        })
+            .filter((v, i, a) => a.indexOf(v) === i)
+            .sort((a, b) => (a < b ? -1 : 1));
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+    }
+    set value(value) {
+        this.handledValue = value;
+        this._formatedValue = this.formatValue(value);
+        this.cdr.detectChanges();
+        this.onModelChange(this.handledValue);
+        this.onModelTouched(this.handledValue);
+    }
+    get value() {
+        return this.handledValue;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    onChangeValue(event) {
+        const value = this._formatedValue;
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        const handled = this.handleValue(value, true);
+        this.writeValue(handled);
+        this.onChange.next(handled);
+    }
+    onShowAndHidePassword() {
+        this.type = this.type === 'password' ? 'text' : 'password';
+    }
+    onClick() {
+        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();
+    }
+    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]/;
+        }
+        if (pattern && !pattern.test(inputChar)) {
+            event.preventDefault();
+        }
+    }
+}
+MonkeyInputPhoneComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'monkey-input-phone',
+                template: `
+    <monkey-select
+      [label]="'teste'"
+      errorMessage=""
+      errorMessage=""
+      [placeholder]="'Selecione um banco'"
+    >
+      <monkey-option label="op" value="op"> </monkey-option>
+      <monkey-option label="op" value="op"> </monkey-option>
+      <monkey-option label="op" value="op"> </monkey-option>
+    </monkey-select>
+  `,
+                encapsulation: ViewEncapsulation.None,
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => MonkeyInputPhoneComponent),
+                        multi: true,
+                    },
+                    CurrencyPipe,
+                ]
+            },] }
+];
+MonkeyInputPhoneComponent.ctorParameters = () => [
+    { type: CurrencyPipe },
+    { type: MonkeyStyleGuideSettingsService },
+    { type: ChangeDetectorRef }
+];
+MonkeyInputPhoneComponent.propDecorators = {
+    name: [{ type: Input }],
+    label: [{ type: Input }],
+    helperMessage: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    icon: [{ type: Input }],
+    type: [{ type: Input }],
+    infoMessage: [{ type: Input }],
+    errorMessage: [{ type: Input }],
+    mask: [{ type: Input }],
+    prefix: [{ type: Input }],
+    maxLength: [{ type: Input }],
+    onlyNumber: [{ type: Input }],
+    onlyAlphaNumeric: [{ type: Input }],
+    upperCase: [{ type: Input }],
+    lowerCase: [{ type: Input }],
+    capitalize: [{ type: Input }],
+    currency: [{ type: Input }],
+    percent: [{ type: Input }],
+    maxDateToday: [{ type: Input }],
+    onChange: [{ type: Output }],
+    value: [{ type: Input }],
+    onClick: [{ type: HostListener, args: ['click',] }]
+};
+
 /**************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -3764,6 +3968,24 @@ MonkeySelectModule.decorators = [
             },] }
 ];
 
+class MonkeyInputPhoneModule {
+}
+MonkeyInputPhoneModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [MonkeyInputPhoneComponent],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    NgxMaskModule.forRoot(),
+                    MonkeyIconModule,
+                    MonkeySelectModule,
+                ],
+                exports: [MonkeyInputPhoneComponent],
+                schemas: [NO_ERRORS_SCHEMA],
+            },] }
+];
+
 /**************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -5389,5 +5611,5 @@ MonkeyStyleGuideModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, MonkeyInputPhoneComponent, MonkeyInputPhoneModule, 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 };
 //# sourceMappingURL=monkey-style-guide.js.map