monkey-front-components 0.0.383 → 0.0.384

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/monkey-front-components'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/monkey-front-components",
+  "assets": ["assets"],
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["assets"]
+  },
+  "allowedNonPeerDependencies": ["."]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monkey-front-components",
-  "version": "0.0.383",
+  "version": "0.0.384",
   "peerDependencies": {
     "@angular/common": "13.1.1",
     "@angular/core": "13.1.1",
@@ -8,33 +8,13 @@
     "@angular/router": "13.1.1",
     "rxjs": "^6.6.3",
     "@ngx-translate/core": "^13.0.0",
-    "monkey-style-guide": "2.0.151",
-    "monkey-front-core": "0.0.237",
+    "monkey-style-guide": "2.0.152",
+    "monkey-front-core": "0.0.238",
     "ngx-mask": "^12.0.0"
   },
   "dependencies": {
-    "monkey-style-guide": "2.0.151",
-    "monkey-front-core": "0.0.237",
+    "monkey-style-guide": "2.0.152",
+    "monkey-front-core": "0.0.238",
     "tslib": "^2.3.0"
-  },
-  "module": "fesm2015/monkey-front-components.mjs",
-  "es2020": "fesm2020/monkey-front-components.mjs",
-  "esm2020": "esm2020/monkey-front-components.mjs",
-  "fesm2020": "fesm2020/monkey-front-components.mjs",
-  "fesm2015": "fesm2015/monkey-front-components.mjs",
-  "typings": "monkey-front-components.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./monkey-front-components.d.ts",
-      "esm2020": "./esm2020/monkey-front-components.mjs",
-      "es2020": "./fesm2020/monkey-front-components.mjs",
-      "es2015": "./fesm2015/monkey-front-components.mjs",
-      "node": "./fesm2015/monkey-front-components.mjs",
-      "default": "./fesm2020/monkey-front-components.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  }
+}

package/src/lib/components/base/base-component.ts

@@ -0,0 +1,359 @@
+/* eslint-disable max-len */
+import { AbstractControl, FormGroup } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { OnDestroy, Directive } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+import { MonkeyUtils } from 'monkey-style-guide';
+import {
+  MonkeyEcxCommonsService,
+  MonkeyEcxErrorResponse,
+  MonkeyEcxPaginationOptions,
+  MonkeyEcxScrollOptions,
+  MonkeyEcxSupportOptions,
+  MonkeyEcxTranslateOptions,
+  ValidateUtils
+} from 'monkey-front-core';
+
+@Directive({
+  selector: '[baseComponent]'
+})
+export abstract class BaseComponent implements OnDestroy {
+  __monkeyecxFormErrors: any | any[];
+
+  __unsubscribeAll: Subject<any>;
+
+  __paginationOptions: MonkeyEcxPaginationOptions | null = null;
+
+  __i18n: any;
+
+  __isMobile = this.isMobile();
+
+  __locales = ['pt-BR', 'es-CL'];
+
+  private paginationFunc: any;
+
+  protected constructor() {
+    this.__unsubscribeAll = new Subject();
+  }
+
+  private isMobile() {
+    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;
+  }
+
+  private handlePagination(create = true) {
+    const { __paginationOptions } = this;
+
+    if (__paginationOptions) {
+      const { mainElement, service } = __paginationOptions;
+
+      const element = document.getElementById(mainElement);
+
+      if (element) {
+        element.scroll = null;
+        element.onscroll = null;
+
+        element.removeEventListener('scroll', (element as any).eventListeners('scroll'));
+        element.removeEventListener('scroll', (element as any).eventListeners('scroll')[0]);
+        if (create) {
+          element.addEventListener('scroll', () => {
+            const { scrollTop, scrollHeight, offsetHeight } = element;
+            const contentHeight = scrollHeight - offsetHeight;
+
+            if (contentHeight <= scrollTop) {
+              service.doPagination();
+            }
+          });
+        }
+      }
+    }
+  }
+
+  private handleSupport(supportControls: MonkeyEcxSupportOptions) {
+    const { service, show } = supportControls;
+    const method = show ? 'show' : 'hide';
+    service[method.toLowerCase()]();
+  }
+
+  private handleTranslate(translateOptions: MonkeyEcxTranslateOptions) {
+    const { service } = translateOptions;
+    service.__oni18nDataChanged$
+      .pipe(takeUntil(this.__unsubscribeAll))
+      .subscribe(() => {
+        const data = service.__i18n;
+        if (data) {
+          this.__i18n = data;
+        }
+      });
+  }
+
+  private handleViewScroll(options: MonkeyEcxScrollOptions) {
+    const { elementId, service } = options;
+
+    if (elementId === service?.__savedState?.scrollElementId) {
+      this.goScroll(elementId);
+
+      service.__savedState.scrollElementId = null;
+    }
+  }
+
+  private getErrorFirstMessageTranslated(formControl: AbstractControl | null = null) {
+    if (formControl?.hasError('required')) return 'FIELD-REQUIRED';
+    if (formControl?.hasError('invalid')) return 'FIELD-INVALID';
+    if (formControl?.hasError('email')) return 'INVALID-EMAIL';
+    if (formControl?.hasError('minlength')) return 'MIN-LENGTH';
+    if (formControl?.hasError('maxlength')) return 'MAX-LENGTH';
+    if (formControl?.hasError('max')) return 'MAX';
+    if (formControl?.hasError('min')) return 'MIN';
+    if (formControl?.hasError('passwordsNotMatching')) return 'MATCH-PASSWORD';
+    if (formControl?.hasError('invalidDate')) return 'INVALID-DATE';
+    if (formControl?.hasError('invalidTrue')) return 'INVALID-TRUE';
+    if (formControl?.hasError('invalidCpfCnpj')) return 'INVALID-DOCUMENT';
+    if (formControl?.hasError('invalidZipCode')) return 'INVALID-ZIPCODE';
+    if (formControl?.hasError('invalidCombo')) return 'INVALID-COMBO';
+    if (formControl?.hasError('invalidUrl')) return 'INVALID-URL';
+    if (formControl?.hasError('invalidUnlockRegister')) { return 'INVALID-UNLOCK-REGISTER'; }
+    if (formControl?.hasError('dateStartMustBeLessThanAnd')) {
+      return 'DATE-START-MUST-BE-LESS-THAN-AND';
+    }
+    if (formControl?.hasError('dateEndMustBeGreaterThanStart')) {
+      return 'DATE-END-MUST-BE-GREATER-THAN-SART';
+    }
+    if (formControl?.hasError('phone')) return 'INVALID-PHONE';
+    if (formControl?.hasError('invalidValueGreaterThanZero')) return 'INVALID-GREATER-THAN-ZERO';
+
+    return 'FIELD-INVALID';
+  }
+
+  private getErrorLastMessageNotTranslated(formControl: AbstractControl | null = null) {
+    if (formControl?.hasError('minlength')) {
+      return `${formControl?.getError('minlength').requiredLength} caracteres.`;
+    }
+    if (formControl?.hasError('maxlength')) {
+      return `${formControl?.getError('maxlength').requiredLength} caracteres.`;
+    }
+    if (formControl?.hasError('max')) { return `${formControl?.getError('max').max}`; }
+    if (formControl?.hasError('min')) { return `${formControl?.getError('min').min}`; }
+
+    return '';
+  }
+
+  public validateFormWithTranslate(f: FormGroup, index?: number): boolean {
+    const formErrors: any = f.value;
+
+    if (f.status === 'VALID') return true;
+
+    if (!formErrors) return true;
+    Object.entries(formErrors).forEach(([key, value]) => {
+      const control = f.get(key);
+      formErrors[key] = '';
+      if (control && !control.valid) {
+        const msg = {
+          first: `ERRORS.${this.getErrorFirstMessageTranslated(f.get(key))}`,
+          last: this.getErrorLastMessageNotTranslated(f.get(key))
+        };
+        formErrors[key] = msg;
+      }
+    });
+
+    if (MonkeyUtils.persistNullEmptyUndefined(index)) { this.__monkeyecxFormErrors[index || 0] = formErrors; } else {
+      this.__monkeyecxFormErrors = formErrors;
+    }
+
+    return false;
+  }
+
+  public copyToClipboard(val: string) {
+    const selBox = document.createElement('textarea');
+    selBox.style.position = 'fixed';
+    selBox.style.left = '0';
+    selBox.style.top = '0';
+    selBox.style.opacity = '0';
+    selBox.value = val;
+    document.body.appendChild(selBox);
+    selBox.focus();
+    selBox.select();
+    document.execCommand('copy');
+    document.body.removeChild(selBox);
+  }
+
+  public validateForm(f: FormGroup, index?: number, alias?: string): boolean {
+    const formErrors: any = f.value;
+    if (f.status === 'VALID') return true;
+
+    if (!formErrors) return true;
+    Object.entries(formErrors).forEach(([key, value]) => {
+      const control = f.get(key);
+      formErrors[key] = '';
+      if (control && !control.valid) {
+        const msg = {
+          firstMessage: `ERRORS.${this.getErrorFirstMessageTranslated(
+            f.get(key)
+          )}`,
+          lastMessage: this.getErrorLastMessageNotTranslated(f.get(key))
+        };
+        formErrors[key] = msg;
+      }
+    });
+
+    if (MonkeyUtils.persistNullEmptyUndefined(index)) {
+      this.__monkeyecxFormErrors[index || 0] = formErrors;
+    } else {
+      let obj: any;
+
+      if (alias) {
+        obj = {
+          [alias]: {
+            ...formErrors
+          }
+        };
+      } else {
+        obj = formErrors;
+      }
+
+      this.__monkeyecxFormErrors = {
+        ...this.__monkeyecxFormErrors,
+        ...obj
+      };
+    }
+    f.markAllAsTouched();
+    return false;
+  }
+
+  public clearAllServiceData(clearData: boolean) {
+    const context = this;
+    Object.values(context).forEach((ctx: any) => {
+      if (ctx instanceof MonkeyEcxCommonsService) {
+        ctx.clear(clearData);
+      }
+    });
+  }
+
+  public ngOnInit(args: {
+    paginationOptions?: MonkeyEcxPaginationOptions;
+    supportControls?: MonkeyEcxSupportOptions;
+    scrollOptions?: MonkeyEcxScrollOptions;
+    translateOptions?: MonkeyEcxTranslateOptions;
+  }) {
+    if (args?.paginationOptions) {
+      this.__paginationOptions = args?.paginationOptions;
+      this.handlePagination();
+    }
+    if (args?.supportControls) {
+      this.handleSupport(args?.supportControls);
+    }
+    if (args?.translateOptions) {
+      this.handleTranslate(args?.translateOptions);
+    }
+    if (args?.scrollOptions) {
+      this.handleViewScroll(args.scrollOptions);
+    }
+  }
+
+  public ngOnDestroy(clearData: boolean = true) {
+    this.__unsubscribeAll.next();
+    this.__unsubscribeAll.complete();
+    this.clearAllServiceData(clearData);
+    this.handlePagination(false);
+  }
+
+  public handleErrorFromServices(error: MonkeyEcxErrorResponse, f: FormGroup) {
+    this.__monkeyecxFormErrors = null;
+    if (error.type === 'Parameter_Error') {
+      Object.entries(f.value).forEach(([key, value]) => {
+        error.notifications.forEach((_: any) => {
+          const field = _.split(':')[0];
+          const description = _.split(':')[1];
+          if (field === key) {
+            const msg = {
+              firstMessage: '',
+              lastMessage: description
+            };
+            this.__monkeyecxFormErrors = {
+              ...this.__monkeyecxFormErrors,
+              [key]: msg
+            };
+            f.controls[key].setErrors({
+              incorrect: true
+            });
+          }
+        });
+      });
+    }
+
+    f.markAllAsTouched();
+  }
+
+  public goBack() {
+    window.history.back();
+  }
+
+  public goScroll(id: string) {
+    const element = document.getElementById(id);
+    if (element) element.scrollIntoView();
+  }
+
+  public getEmbeddedData(data: any, field: string): any[] | any {
+    const { _embedded } = data;
+    return _embedded ? _embedded[field] : null;
+  }
+
+  public openWindow(url: string) {
+    window.open(`${url}`, '_blank');
+  }
+
+  public fillI18n(data: any) {
+    this.__i18n = data;
+  }
+
+  public getCountryPrefix(country: string) {
+    return {
+      br: 55,
+      cl: 56
+    }[country];
+  }
+
+  public getCountryCurrencyChartFormat(country: string) {
+    return {
+      br: 'R$ #,###,##0.00',
+      cl: 'CLP #,###,##0'
+    }[country];
+  }
+
+  public getCountryValidators(country: string) {
+    return {
+      br: {
+        governmentId: ValidateUtils.DocumentValidator
+      },
+      cl: {
+        governmentId: ValidateUtils.DocumentRutValidator
+      }
+    }[country];
+  }
+
+  public isAbleToHandlePagination() {
+    const { __paginationOptions } = this;
+
+    if (__paginationOptions) {
+      const { service } = __paginationOptions;
+
+      const links = service.__links;
+      if (links && links?.next) return true;
+    }
+    return false;
+  }
+
+  public onHandlePagination() {
+    const { __paginationOptions } = this;
+
+    if (__paginationOptions) {
+      const { service } = __paginationOptions;
+      service.doPagination();
+    }
+  }
+}

package/src/lib/components/base/base-dynamic-array.ts

@@ -0,0 +1,233 @@
+import { Directive, EventEmitter, Input, OnInit, OnChanges, Output } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MonkeyUtils } from 'monkey-style-guide';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { MECXFieldConfig, MECXFieldConfigValidator } from '../../interfaces';
+import { BaseComponent } from './base-component';
+import { validators } from './base-validators';
+
+@Directive({
+  selector: '[baseDynamicArray]'
+})
+export abstract class BaseDynamicArray extends BaseComponent implements OnInit, OnChanges {
+  @Input() onHandleSubmit = new EventEmitter<any>();
+
+  @Input() onHandleUpdateForm = new EventEmitter<any>();
+
+  @Output() onHandleSubmitFormReady: EventEmitter<any> = new EventEmitter<any>();
+
+  @Input() self: any;
+
+  @Input() fields: MECXFieldConfig[] = [];
+
+  @Input() data: any;
+
+  @Input() qtd: number = 1;
+
+  @Input() disabled: boolean = false;
+
+  _form: FormGroup | null = null;
+
+  // eslint-disable-next-line object-curly-newline
+  _plusValidations: any[] = [];
+
+  private changesUnsubscribe = new Subject();
+
+  constructor(private fb: FormBuilder) {
+    super();
+  }
+
+  private handleInternalPlusValidation(
+    mainField: any,
+    data: any
+  ) {
+    const { operator, field, value } = mainField;
+    const validators: any = {
+      e: (val1: any, val2: string) => { return val1 === val2; },
+      lt: (val1: any, val2: string) => { return val1 < val2; },
+      gt: (val1: any, val2: string) => { return val1 > val2; }
+    };
+
+    return validators[operator](data?.[field] || data, value);
+  }
+
+  private makeInternalPlusValidation(
+    data: any,
+    sourceField: string,
+    settings: any,
+    rowIndex: number
+  ) {
+    const changeFields = (show: boolean) => {
+      const saved = [...this.fields];
+
+      saved.map((val) => {
+        const valSaved = {
+          ...val
+        };
+        if (val.name === sourceField) {
+          this._plusValidations[rowIndex] = {
+            [sourceField]: {
+              ...valSaved,
+              alwaysShow: show
+            }
+          };
+          this.createOneControl(val.name, this.formValues?.controls[rowIndex], show);
+        } else {
+          this._plusValidations[rowIndex] = {
+            ...valSaved
+          };
+        }
+        return null;
+      });
+    };
+
+    const validated = this.handleInternalPlusValidation(settings, data);
+    changeFields(validated);
+  }
+
+  private createOneControl(fieldName: string, ctrl: any, create = true) {
+    const { fields } = this;
+    if (!fields) return;
+
+    fields.forEach((field: MECXFieldConfig) => {
+      const { fieldType, validations, name, disabled } = field;
+      if (name !== fieldName) return;
+      let { value } = field;
+      if (fieldType === 'button') return;
+      if (fieldType === 'radiobutton' || fieldType === 'checkbox' || fieldType === 'select') {
+        value = '';
+      }
+      if (create) {
+        const control = this.fb.control(value, this.bindValidations(validations || []));
+        if (disabled || this.disabled) control.disable();
+        ctrl.addControl(name, control);
+      } else {
+        ctrl.removeControl(name);
+      }
+    });
+  }
+
+  private createControl(data?: any) {
+    const { fields } = this;
+    if (!fields) return null;
+    // eslint-disable-next-line object-curly-newline
+    const group = this.fb.group({});
+    fields.forEach((field: MECXFieldConfig) => {
+      const { fieldType, validations, name, disabled, alwaysShow } = field;
+      let { value } = field;
+      if (field.alwaysShowPlusValidation) {
+        if (!this.handleInternalPlusValidation(field.alwaysShowPlusValidation, data)) return;
+      } else if (!alwaysShow) return;
+      if (fieldType === 'button') return;
+      if (fieldType === 'radiobutton' || fieldType === 'checkbox' || fieldType === 'select') {
+        value = '';
+      }
+      const control = this.fb.control(value, this.bindValidations(validations || []));
+      if (disabled || this.disabled) control.disable();
+      group.addControl(name as string, control);
+    });
+
+    return group;
+  }
+
+  private bindValidations(validations: MECXFieldConfigValidator[]) {
+    if (validations.length > 0) {
+      const validList: any[] = [];
+      validations.forEach((valid: MECXFieldConfigValidator) => {
+        const validated = valid.param
+          ? validators[valid.name](valid.param)
+          : validators[valid.name];
+        validList.push(validated);
+      });
+      return Validators.compose(validList);
+    }
+    return null;
+  }
+
+  private buildForm(): FormGroup {
+    const form = this.fb.group({
+      fields: this.fb.array([])
+    });
+
+    form?.controls.fields?.valueChanges.subscribe((_) => {
+      this.watchForChanges();
+    });
+
+    return form;
+  }
+
+  private watchForChanges() {
+    const { fields, changesUnsubscribe } = this;
+    changesUnsubscribe.next();
+
+    this.formValues?.controls?.map((control: any, index: number) => {
+      fields.forEach((fieldConfig: MECXFieldConfig) => {
+        const { name, alwaysShowPlusValidation } = fieldConfig;
+        if (!alwaysShowPlusValidation) return;
+        const { field } = alwaysShowPlusValidation;
+        if (field) {
+          control.controls[field]?.valueChanges.pipe(
+            takeUntil(changesUnsubscribe)).subscribe((_: any) => {
+            this.makeInternalPlusValidation(
+              _,
+              name as string,
+              alwaysShowPlusValidation,
+              index
+            );
+          });
+        }
+      });
+      return null;
+    });
+  }
+
+  public formBase = () => {
+    // return this.fb.group(this.createControl());
+    return this.createControl();
+  };
+
+  public get formValues() {
+    return this._form ? (this._form.get('fields') as FormArray) : null;
+  }
+
+  public fillValues() {
+    const { data, qtd } = this;
+    if ((!this._form) && qtd) return;
+    if (qtd > 0) {
+      Array<any>(qtd)
+        .fill(null)
+        .map((_, index) => {
+          let form = this.createControl();
+          if (data && data[index]) {
+            form = this.createControl(data[index]);
+            const handledData = data[index];
+            Object.entries(handledData).forEach(([key, value]) => {
+              if (MonkeyUtils.persistNullEmptyUndefined(value) && form?.controls[key]) {
+                form?.controls[key].setValue(value);
+              }
+            });
+          }
+          this.formValues?.push(form as any);
+
+          return null;
+        });
+    }
+  }
+
+  ngOnInit() {
+    this._form = this.buildForm();
+    this.fillValues();
+
+    this.onHandleUpdateForm.subscribe(() => {
+      this.fillValues();
+    });
+  }
+
+  ngOnChanges() {
+    if (!this._form) {
+      this._form = this.buildForm();
+    }
+    this.fillValues();
+  }
+}