monkey-front-components 0.0.381 → 0.0.384

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

@@ -0,0 +1,90 @@
+import { Directive, EventEmitter, Input, OnInit, OnChanges, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MonkeyUtils } from 'monkey-style-guide';
+import { MECXFieldConfig, MECXFieldConfigValidator } from '../../interfaces';
+import { BaseComponent } from './base-component';
+import { validators } from './base-validators';
+
+@Directive({
+  selector: '[baseDynamic]'
+})
+export abstract class BaseDynamic 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() disabled: boolean = false;
+
+  _form: FormGroup | null = null;
+
+  constructor(private fb: FormBuilder) {
+    super();
+  }
+
+  private createControl() {
+    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 } = field;
+      let { value } = field;
+      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;
+  }
+
+  public fillValues() {
+    const { data } = this;
+    if (!data || !this._form) return;
+    Object.entries(data).forEach(([key, value]) => {
+      if (MonkeyUtils.persistNullEmptyUndefined(value) && this._form?.controls[key]) {
+        this._form?.controls[key]?.setValue(value);
+      }
+    });
+  }
+
+  ngOnInit() {
+    this._form = this.createControl();
+    this.fillValues();
+
+    this.onHandleUpdateForm.subscribe(() => {
+      this.fillValues();
+    });
+  }
+
+  ngOnChanges() {
+    if (!this._form) {
+      this._form = this.createControl();
+    }
+    this.fillValues();
+  }
+}

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

@@ -0,0 +1,52 @@
+import { isPlatformBrowser } from '@angular/common';
+import { Directive, OnInit } from '@angular/core';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { BaseComponent } from './base-component';
+
+@Directive({
+  selector: '[baseScrollComponent]'
+})
+export abstract class BaseScrollComponent extends BaseComponent implements OnInit {
+  private routeScrollPositions: { [url: string]: number } = {};
+
+  constructor(private _pId: Object, private _rt: Router) {
+    super();
+  }
+
+  private saveScroll(url: string) {
+    const element: any = document.getElementById('container-3');
+    this.routeScrollPositions[url] = element.scrollTop;
+  }
+
+  private restoreScroll(url: string) {
+    const savedScroll = this.routeScrollPositions[url];
+    const element: any = document.getElementById('container-3');
+    if (!savedScroll) {
+      return;
+    }
+
+    element.scrollTop = savedScroll;
+  }
+
+  private addScrollTopListeners() {
+    if ('scrollRestoration' in history) {
+      history.scrollRestoration = 'manual';
+    }
+
+    this._rt.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        this.saveScroll(this._rt.url);
+      } else if (event instanceof NavigationEnd) {
+        setTimeout(() => {
+          this.restoreScroll(event.url);
+        });
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    if (isPlatformBrowser(this._pId)) {
+      this.addScrollTopListeners();
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Validators as Validators_ } from '@angular/forms';
+import { Validators } from 'monkey-front-core';
+
+export const validators: any = {
+  required: Validators_.required,
+  email: Validators.email,
+  governmentId: Validators.documentBR,
+  governmentIdRut: Validators.documentCL,
+  documentBR: Validators.documentBR,
+  documentCL: Validators.documentCL,
+  date: Validators.date,
+  zipCode: Validators.zipCode,
+  minLength: (param: number) => {
+    return Validators_.minLength(param);
+  },
+  maxLength: (param: number) => {
+    return Validators_.maxLength(param);
+  }
+};

package/{lib/components/base/index.d.ts → src/lib/components/base/index.ts}

@@ -1,5 +1,5 @@
-export * from './base-component';
-export * from './base-dynamic-array';
-export * from './base-dynamic';
-export * from './base-scroll-component';
-export * from './base-validators';
+export * from './base-component';
+export * from './base-dynamic-array';
+export * from './base-dynamic';
+export * from './base-scroll-component';
+export * from './base-validators';

package/src/lib/components/dynamic/button/button.component.html

@@ -0,0 +1,4 @@
+<monkey-button [icon]="_field?.icon" [type]="_field?.type" [color]="_field?.color"
+  (click)="onClick()">
+  {{ _field?.label | translate }}
+</monkey-button>

package/src/lib/components/dynamic/button/button.component.scss

@@ -0,0 +1,7 @@
+mecx-dynamic-button {
+  monkey-button {
+    button {
+      height: 40px;
+    }
+  }
+}

package/src/lib/components/dynamic/button/button.component.ts

@@ -0,0 +1,47 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, OnChanges, ViewEncapsulation } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MECXFieldConfig } from '../../../interfaces';
+
+@Component({
+  selector: 'mecx-dynamic-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXDynamicButtonComponent implements OnChanges {
+  @Input() _field: MECXFieldConfig | null = null;
+
+  @Input() _form: FormGroup | null = null;
+
+  // eslint-disable-next-line object-curly-newline
+  @Input() _formErrors: any | any[] = {};
+
+  @Input() self: any;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    // not to do
+  }
+
+  @HostBinding('class')
+  get className() {
+    return this._field?.style?.class;
+  }
+
+  ngOnChanges() {
+    this.cdr.detectChanges();
+  }
+
+  onClick() {
+    const { _form, _field, self } = this;
+    if (_form?.disabled || !_field) return;
+    const { name, value } = _field;
+    const func = _field?.functions?.onClick;
+    if (func) {
+      self[func]({
+        name,
+        value,
+        form: _form
+      });
+    }
+  }
+}

package/{lib/components/dynamic/button/index.d.ts → src/lib/components/dynamic/button/index.ts}

@@ -1 +1 @@
-export * from './button.component';
+export * from './button.component';

package/src/lib/components/dynamic/dynamic-directive.ts

@@ -0,0 +1,102 @@
+import {
+  ChangeDetectorRef,
+  ComponentFactoryResolver,
+  Directive,
+  Input,
+  OnChanges,
+  OnInit,
+  ViewContainerRef
+} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MECXFieldConfig } from '../../interfaces';
+import { MECXDynamicButtonComponent } from './button';
+import { MECXDynamicFileUploadComponent } from './file-upload';
+import { MECXDynamicInputComponent } from './input';
+import { MECXDynamicInputPhoneComponent } from './input-phone';
+import { MECXDynamicRadioComponent } from './radio';
+import { MECXDynamicSelectComponent } from './select';
+import { MECXDynamicSelectSearchComponent } from './select-search';
+
+const componentMapper: any = {
+  input: MECXDynamicInputComponent,
+  'input-phone': MECXDynamicInputPhoneComponent,
+  radiobutton: MECXDynamicRadioComponent,
+  select: MECXDynamicSelectComponent,
+  'select-search': MECXDynamicSelectSearchComponent,
+  'file-upload': MECXDynamicFileUploadComponent,
+  button: MECXDynamicButtonComponent
+};
+
+@Directive({
+  selector: '[MECXDynamic]'
+})
+export class MECXDynamicDirective implements OnInit, OnChanges {
+  @Input() field: MECXFieldConfig | null = null;
+
+  @Input() form: FormGroup | null = null;
+
+  @Input() formErrors: any;
+
+  @Input() self: any;
+
+  @Input() plusValidations: any;
+
+  componentRef: any;
+
+  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef,
+  private cdr: ChangeDetectorRef) {
+    // not to do
+  }
+
+  private handleInternalPlusValidation() {
+    if (!this.field?.alwaysShowPlusValidation) return false;
+    const { operator, value, field } = this.field?.alwaysShowPlusValidation;
+    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; }
+    };
+    const data = this.form?.controls[field as string]?.value;
+
+    return validators[operator as string](data, value);
+  }
+
+  private buildComponent() {
+    if (this.componentRef?.instance) return;
+    const factory = this.resolver.resolveComponentFactory(
+      componentMapper[this.field?.fieldType as string]
+    );
+    this.componentRef = this.container.createComponent(factory);
+    this.componentRef.instance._field = this.field;
+    this.componentRef.instance._form = this.form;
+    // eslint-disable-next-line object-curly-newline
+    this.componentRef.instance._formErrors = this.formErrors || {};
+    this.componentRef.instance.self = this.self;
+  }
+
+  ngOnInit() {
+    if (!this.field?.alwaysShow && !this.handleInternalPlusValidation()) return;
+    this.buildComponent();
+  }
+
+  ngOnChanges() {
+    if (this.plusValidations && this.plusValidations[this.field?.name as string]) {
+      if (!this.field?.alwaysShow && this.plusValidations[this.field?.name as string].alwaysShow) {
+        setTimeout(() => {
+          this.buildComponent();
+          this.cdr.detectChanges();
+        }, 1);
+      }
+      if (this.componentRef?.instance &&
+        !this.plusValidations[this.field?.name as string].alwaysShow) {
+        this.componentRef.destroy();
+        this.componentRef = null;
+        this.form?.controls[this.field?.name as string]?.setValue(null);
+        this.form?.controls[this.field?.name as string]?.clearValidators();
+      }
+    }
+    if (!this.componentRef?.instance) return;
+    this.componentRef.instance._formErrors = this.formErrors || {
+    };
+  }
+}

package/src/lib/components/dynamic/dynamic.module.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  MonkeyButtonModule,
+  MonkeyFileUploadModule,
+  MonkeyInputModule,
+  MonkeyInputPhoneModule,
+  MonkeyOptionModule,
+  MonkeyRadioButtonModule,
+  MonkeySelectModule
+} from 'monkey-style-guide';
+import { MECXDynamicButtonComponent } from './button';
+import { MECXDynamicDirective } from './dynamic-directive';
+import { MECXDynamicFileUploadComponent } from './file-upload';
+import { MECXDynamicFormComponent, MECXDynamicFormArrayComponent } from './form';
+import { MECXDynamicInputComponent } from './input';
+import { MECXDynamicInputPhoneComponent } from './input-phone';
+import { MECXDynamicRadioComponent } from './radio';
+import { MECXDynamicSelectComponent } from './select';
+import { MECXDynamicSelectSearchComponent } from './select-search';
+
+@NgModule({
+  declarations: [
+    MECXDynamicButtonComponent,
+    MECXDynamicFileUploadComponent,
+    MECXDynamicFormComponent,
+    MECXDynamicFormArrayComponent,
+    MECXDynamicInputComponent,
+    MECXDynamicInputPhoneComponent,
+    MECXDynamicRadioComponent,
+    MECXDynamicSelectComponent,
+    MECXDynamicSelectSearchComponent,
+    MECXDynamicDirective
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MonkeyInputModule,
+    MonkeySelectModule,
+    MonkeyRadioButtonModule,
+    MonkeyOptionModule,
+    MonkeyFileUploadModule,
+    MonkeyButtonModule,
+    MonkeyInputPhoneModule,
+    TranslateModule.forChild()
+  ],
+  exports: [MECXDynamicDirective, MECXDynamicFormComponent, MECXDynamicFormArrayComponent],
+  entryComponents: [MECXDynamicInputComponent]
+})
+export class MECXDynamicModule {}

package/src/lib/components/dynamic/file-upload/file-upload.component.html

@@ -0,0 +1,10 @@
+<monkey-file-upload
+  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
+  [icon]="_field?.icon" [formControl]="_form.controls[_field?.name]"
+  [placeholder]="_field?.placeholder | translate"
+  [helperMessage]="_field?.helperMessage | translate" [label]="_field?.label | translate"
+  [maxSize]="_field?.maxSize || 5242880" [fileUpload]="_function"
+  [maxSizeErrorMessage]="'FIELD.FILE.MAX-FILE' | translate"
+  [allowedExtensionErrorMessage]="'FIELD.FILE.ALLOWED-EXTENSION' | translate"
+  [allowedExtensions]="_field?.allowedExtensions || []" *ngIf="_field">
+</monkey-file-upload>

package/src/lib/components/dynamic/file-upload/file-upload.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MECXFieldConfig } from '../../../interfaces';
+
+@Component({
+  selector: 'mecx-dynamic-file-upload',
+  templateUrl: './file-upload.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXDynamicFileUploadComponent {
+  @Input() _field: MECXFieldConfig;
+
+  @Input() _form: FormGroup;
+
+  // eslint-disable-next-line object-curly-newline
+  @Input() _formErrors: any | any[] = {};
+
+  @Input() self: any;
+
+  _function: Function = (file: any, callback?: Function) => {
+    if (this._form?.disabled) return;
+    if (!this._field?.functions?.onHandleUpload) {
+      console.error('onHandleUpload not declared');
+      return;
+    }
+    const { func, type } = this._field?.functions?.onHandleUpload;
+    if (!func || !this.self[func]) {
+      console.error('onHandleUpload not declared');
+      return;
+    }
+    this.self[func](file, type, callback);
+  };
+
+  constructor(private cdr: ChangeDetectorRef) {
+    // not to do
+  }
+
+  @HostBinding('class')
+  get className() {
+    return this._field?.style?.class;
+  }
+
+  ngOnChanges() {
+    this.cdr.detectChanges();
+  }
+}

package/{lib/components/dynamic/file-upload/index.d.ts → src/lib/components/dynamic/file-upload/index.ts}

@@ -1 +1 @@
-export * from './file-upload.component';
+export * from './file-upload.component';

package/src/lib/components/dynamic/form/dynamic-form-array.component.html

@@ -0,0 +1,19 @@
+<form name="form" [formGroup]="_form" *ngIf="_form">
+  <div formArrayName="fields">
+    <div *ngFor="let item of formValues.controls; let indForm=index" [formGroupName]="indForm">
+      <monkey-button type="secondary" color="error" icon="close-20" iconPosition="right"
+        [label]="'BUTTONS.REMOVE' | translate" (click)="onHandleRemove(indForm)"
+        *ngIf="formValues.controls.length > 1 && !disabled">
+      </monkey-button>
+      <div class="row mt-3">
+        <div *ngFor="let field of fields;" MECXDynamic [field]="field" [form]="item" [self]="self"
+          [formErrors]="__monkeyecxFormErrors[indForm]"
+          [plusValidations]="_plusValidations[indForm]" [style.display]="'none'">
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+<monkey-button type="secondary" color="theme" icon="more-20" iconPosition="right"
+  [label]="'BUTTONS.ADD' | translate" (click)="onHandleAdd()" *ngIf="!disabled">
+</monkey-button>

package/src/lib/components/dynamic/form/dynamic-form-array.component.scss

@@ -0,0 +1,10 @@
+mecx-dynamic-form-array {
+  monkey-button {
+    width: 100%;
+
+    button {
+      width: 100%;
+      height: 40px;
+    }
+  }
+}

package/src/lib/components/dynamic/form/dynamic-form-array.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit, ViewEncapsulation, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseDynamicArray } from '../../base';
+
+@Component({
+  selector: 'mecx-dynamic-form-array',
+  templateUrl: './dynamic-form-array.component.html',
+  styleUrls: ['./dynamic-form-array.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXDynamicFormArrayComponent extends BaseDynamicArray implements OnInit, OnDestroy {
+  private unsubscribeAll = new Subject();
+
+  constructor(fb: FormBuilder, private cdr: ChangeDetectorRef) {
+    super(fb);
+    this.__monkeyecxFormErrors = [];
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.onHandleSubmit.pipe(takeUntil(this.unsubscribeAll)).subscribe((func: Function) => {
+      this.onSubmit(func);
+    });
+  }
+
+  ngOnDestroy() {
+    this.unsubscribeAll.next();
+    this.unsubscribeAll.complete();
+  }
+
+  onSubmit(callback: Function) {
+    const { _form } = this;
+    // eslint-disable-next-line object-curly-newline
+    this.__monkeyecxFormErrors = [];
+
+    let validate = {
+      isValid: false
+    };
+    let hasErrors: boolean = false;
+    if (this.formValues) {
+      this.__monkeyecxFormErrors = [this.formValues.length];
+      this.formValues.controls.forEach((item: any, index: number) => {
+        if (item instanceof FormGroup) {
+          if (!this.validateForm(item, index)) {
+            hasErrors = true;
+          }
+        }
+      });
+    }
+    validate = {
+      isValid: !hasErrors
+    };
+
+    this.cdr.detectChanges();
+
+    this.onHandleSubmitFormReady.next({
+      validate,
+      callback,
+      form: _form
+    });
+  }
+
+  onHandleAdd() {
+    this.formValues?.push(this.formBase() as any);
+    this.cdr.detectChanges();
+  }
+
+  onHandleRemove(index: number) {
+    this.formValues?.removeAt(index);
+    this._plusValidations.splice(index, 1);
+  }
+}

package/src/lib/components/dynamic/form/dynamic-form.component.html

@@ -0,0 +1,7 @@
+<form name="form" [formGroup]="_form" *ngIf="_form">
+  <div class="row">
+    <div *ngFor="let field of fields;" MECXDynamic [field]="field" [form]="_form" [self]="self"
+      [formErrors]="__monkeyecxFormErrors" [style.display]="'none'">
+    </div>
+  </div>
+</form>

package/src/lib/components/dynamic/form/dynamic-form.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, ViewEncapsulation, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseDynamic } from '../../base/base-dynamic';
+
+@Component({
+  selector: 'mecx-dynamic-form',
+  templateUrl: './dynamic-form.component.html',
+  styles: [],
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXDynamicFormComponent extends BaseDynamic implements OnInit, OnDestroy {
+  private unsubscribeAll = new Subject();
+
+  constructor(fb: FormBuilder, private cdr: ChangeDetectorRef) {
+    super(fb);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.onHandleSubmit.pipe(takeUntil(this.unsubscribeAll)).subscribe((func: Function) => {
+      this.onSubmit(func);
+    });
+  }
+
+  ngOnDestroy() {
+    this.unsubscribeAll.next();
+    this.unsubscribeAll.complete();
+  }
+
+  onSubmit(callback: Function) {
+    const { _form } = this;
+    // eslint-disable-next-line object-curly-newline
+    this.__monkeyecxFormErrors = {};
+
+    const isValid = this.validateForm(_form as any);
+    this.cdr.detectChanges();
+
+    this.onHandleSubmitFormReady.next({
+      validate: {
+        isValid
+      },
+      callback,
+      form: _form
+    });
+  }
+}

package/{lib/components/dynamic/form/index.d.ts → src/lib/components/dynamic/form/index.ts}

@@ -1,2 +1,2 @@
-export * from './dynamic-form.component';
-export * from './dynamic-form-array.component';
+export * from './dynamic-form.component';
+export * from './dynamic-form-array.component';

package/{lib/components/dynamic/index.d.ts → src/lib/components/dynamic/index.ts}

@@ -1,8 +1,8 @@
-export * from './file-upload';
-export * from './form';
-export * from './input';
-export * from './input-phone';
-export * from './radio';
-export * from './select';
-export * from './dynamic-directive';
-export * from './dynamic.module';
+export * from './file-upload';
+export * from './form';
+export * from './input';
+export * from './input-phone';
+export * from './radio';
+export * from './select';
+export * from './dynamic-directive';
+export * from './dynamic.module';

package/{lib/components/dynamic/input/index.d.ts → src/lib/components/dynamic/input/index.ts}

@@ -1 +1 @@
-export * from './input.component';
+export * from './input.component';

package/src/lib/components/dynamic/input/input.component.html

@@ -0,0 +1,9 @@
+<monkey-input
+  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
+  [mask]="_field?.mask" [prefix]="_field?.prefix" [name]="_field?.name"
+  [formControl]="_form.controls[_field?.name]" [placeholder]="_field?.placeholder | translate"
+  [helperMessage]="_field?.helperMessage | translate" [label]="_field?.label | translate"
+  [type]="_field?.type" #inputElement (onChange)="onChange($event)"
+  [onlyNumber]="_field?.onlyNumber" [currency]="_field?.currency" [maxLength]="_field?.maxLength"
+  [maxDateToday]="_field?.maxDateToday">
+</monkey-input>