monkey-front-components 0.0.384 → 0.0.387

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

@@ -1,52 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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/src/lib/components/dynamic/button/button.component.html

@@ -1,4 +0,0 @@
-<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

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

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

@@ -1,47 +0,0 @@
-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/src/lib/components/dynamic/dynamic-directive.ts

@@ -1,102 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-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/src/lib/components/dynamic/form/dynamic-form-array.component.html

@@ -1,19 +0,0 @@
-<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

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

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

@@ -1,75 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,49 +0,0 @@
-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/src/lib/components/dynamic/input/input.component.html

@@ -1,9 +0,0 @@
-<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>

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

@@ -1,58 +0,0 @@
-import { ChangeDetectorRef, Component, HostBinding, Input, OnChanges, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { MonkeyInputComponent } from 'monkey-style-guide';
-import { MECXFieldConfig } from '../../../interfaces';
-
-@Component({
-  selector: 'mecx-dynamic-input',
-  templateUrl: './input.component.html',
-  encapsulation: ViewEncapsulation.None
-})
-export class MECXDynamicInputComponent implements OnInit, 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;
-
-  @ViewChild('inputElement', {
-    static: true
-  }) inputElement: MonkeyInputComponent | null = null;
-
-  constructor(private cdr: ChangeDetectorRef) {
-    // not to do
-  }
-
-  @HostBinding('class')
-  get className() {
-    return this._field?.style?.class;
-  }
-
-  ngOnInit() {
-    this.cdr.detectChanges();
-  }
-
-  ngOnChanges() {
-    this.cdr.detectChanges();
-  }
-
-  onChange(event: string) {
-    const { _form, _field, self } = this;
-    if (!_field || !_form) return;
-    const { name } = _field;
-    const func = _field?.functions?.onChange;
-    const isValid = _form?.get(_field?.name as string)?.valid;
-    if (func) {
-      self[func]({
-        name,
-        isValid,
-        event,
-        ctrl: _form.get(this._field?.name as string),
-        form: _form
-      });
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-<monkey-input-phone [name]="_field?.name" [label]="_field?.label | translate"
-  [helperMessage]="_field?.helperMessage | translate"
-  [placeholder]="_field?.placeholder | translate" [icon]="_field?.icon"
-  (onChange)="onChange($event)" [internationalNumber]="_field?.internationalNumber"
-  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
-  [maxLength]="_field?.maxLength" [formControl]="_form.controls[_field?.name]" #inputElement>
-</monkey-input-phone>

package/src/lib/components/dynamic/input-phone/input-phone.component.ts

@@ -1,58 +0,0 @@
-import { ChangeDetectorRef, Component, HostBinding, Input, OnChanges, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { MonkeyInputComponent } from 'monkey-style-guide';
-import { MECXFieldConfig } from '../../../interfaces';
-
-@Component({
-  selector: 'mecx-dynamic-input-phone',
-  templateUrl: './input-phone.component.html',
-  encapsulation: ViewEncapsulation.None
-})
-export class MECXDynamicInputPhoneComponent implements OnInit, 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;
-
-  @ViewChild('inputElement', {
-    static: true
-  }) inputElement: MonkeyInputComponent | null = null;
-
-  constructor(private cdr: ChangeDetectorRef) {
-    // not to do
-  }
-
-  @HostBinding('class')
-  get className() {
-    return this._field?.style?.class;
-  }
-
-  ngOnInit() {
-    this.cdr.detectChanges();
-  }
-
-  ngOnChanges() {
-    this.cdr.detectChanges();
-  }
-
-  onChange(event: string) {
-    const { _form, _field, self } = this;
-    if (!_field || !_form) return;
-    const { name } = _field;
-    const func = _field?.functions?.onChange;
-    const isValid = _form?.get(_field?.name as string)?.valid;
-    if (func) {
-      self[func]({
-        name,
-        isValid,
-        event,
-        ctrl: _form.get(this._field?.name as string),
-        form: _form
-      });
-    }
-  }
-}

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

@@ -1,8 +0,0 @@
-<monkey-radiobutton
-  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
-  [formControl]="_form.controls[_field?.name]" [helperMessage]="_field?.helperMessage | translate"
-  [label]="_field?.label | translate">
-  <monkey-option *ngFor="let value of _field?.value" [label]="value.description | translate"
-    [value]="value.value">
-  </monkey-option>
-</monkey-radiobutton>