libey-ng-component-library 0.0.32 → 0.0.34

package/src/lib/icons/libey-ng-icons/libey-ng-icons.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-libey-ng-icons',
+  templateUrl: './libey-ng-icons.component.html',
+  styleUrls: ['../icons.component.css']
+})
+export class LibeyNgIconsComponent implements OnInit {
+  @Input() color: string = "#224051";
+  @Input() bgColorHover: string = "transparent";
+  @Input() borderColor: string = "transparent";
+  @Input() borderColorHover: string = "transparent";
+  @Input() icon: string = "";
+
+  @Input() width: number = 30;
+  @Input() height: number = 30;
+  @Input() activeHover: boolean = false;
+
+  hover: boolean = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onMouseEnter() {
+    if (this.activeHover)
+      this.hover = true;
+  }
+
+  onMouseLeave() {
+    this.hover = false;
+  }
+
+
+}

package/src/lib/libey-ng-component-library.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LibeyNgComponentLibraryComponent } from './libey-ng-component-library.component';
+
+describe('LibeyNgComponentLibraryComponent', () => {
+  let component: LibeyNgComponentLibraryComponent;
+  let fixture: ComponentFixture<LibeyNgComponentLibraryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LibeyNgComponentLibraryComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LibeyNgComponentLibraryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/libey-ng-component-library.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-libey-ngComponent-library',
+  template: `
+    <p>
+      libey-ng-component-library works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class LibeyNgComponentLibraryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/libey-ng-component-library.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { LibeyNgTableModule } from './table/libey-ng-table.module';
+import { LibeyNgSignatureModule } from './signature/libey-ng-signature.module';
+import { SignaturePadModule } from 'angular2-signaturepad';
+import { IconsModule } from './icons/icons.module';
+import { LibeyNgCpmIndicatorModule } from './cpm-indicator/libey-ng-cpm-indicator.module';
+
+
+@NgModule({
+  declarations: [
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    LibeyNgTableModule,
+    LibeyNgSignatureModule,
+    SignaturePadModule,
+    IconsModule,
+    LibeyNgCpmIndicatorModule,
+  ],
+  exports: [
+    LibeyNgTableModule,
+    LibeyNgSignatureModule,
+    SignaturePadModule,
+    IconsModule,
+    LibeyNgCpmIndicatorModule
+  ],
+  providers: [DatePipe]
+})
+export class LibeyNgComponentLibraryModule { }

package/src/lib/libey-ng-component-library.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LibeyNgComponentLibraryService } from './libey-ng-component-library.service';
+
+describe('LibeyNgComponentLibraryService', () => {
+  let service: LibeyNgComponentLibraryService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LibeyNgComponentLibraryService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/libey-ng-component-library.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LibeyNgComponentLibraryService {
+
+  constructor() { }
+}

package/src/lib/signature/libey-ng-signature/libey-ng-signature.component.css

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}

package/src/lib/signature/libey-ng-signature/libey-ng-signature.component.html

@@ -0,0 +1,41 @@
+<div class="mb-3">
+  <div class="row mb-5">
+    <div class="col-md-12 justify-align-center mb-3">
+      <input type="file" (change)="fileEvent($event)" [(ngModel)]="File" class="form-control form-control-ph"
+      accept="image/png, image/jpeg" style="border: none; min-width: 410px; width: auto;">
+      <label *ngIf="FileValidated" [ngClass]="'text-danger'">Archivo requerido. Formatos permitidos (jpeg, jpg, png)</label>
+    </div>
+    <div class="col-md-12">
+        <ng-select [(ngModel)]="DeviceType" class="ng-select-single ng-select-border-0" placeholder="Seleccionar" [clearable]="false"
+        (change)="ChangeDevice()">
+            <ng-option [value]="'pinpad'">Pinpad</ng-option>
+            <ng-option [value]="'mousepad'">Mousepad</ng-option>
+        </ng-select>
+        <label *ngIf="NotDriver" [ngClass]="'text-danger'">No tiene el driver instalado</label>
+    </div>
+  </div>
+
+  <div *ngIf="UploadFile==null">
+    <div *ngIf="DeviceType=='pinpad'" style="border: 1px ridge #D6DEE5;border-radius: 10px; width: 440px;">
+      <canvas  (click)="onSign()" #sigImg [width]="widthView" [height]="heightView"></canvas>
+    </div>
+    <div *ngIf="DeviceType=='mousepad'" style="border: 1px ridge #D6DEE5;border-radius: 10px; width: 440px;">
+      <signature-pad [options]="signaturePadOptions"></signature-pad>
+    </div>
+  </div>
+  <div *ngIf="UploadFile!=null" style="border: 1px ridge #D6DEE5;border-radius: 10px; width: 440px;">
+    <img [src]="UploadFile" [width]="widthView" [height]="heightView" />
+  </div>
+
+  <div class="col-md-12 mt-3">
+    <button type="button" class="btn btn-light-primary-sm border-none text-black" (click)="onClear()">
+      <i class="icon-trash-blue me-3"></i> Borrar firma
+    </button>
+  </div>
+</div>
+
+<div class="modal-footer">
+  <button type="button" class="btn btn-primary btn-save-rp" (click)="onDone()">
+      <i class="icon-save-white"></i> Guardar
+  </button>
+</div>

package/src/lib/signature/libey-ng-signature/libey-ng-signature.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LibeyNgSignatureComponent } from './libey-ng-signature.component';
+
+describe('LibeyNgSignatureComponent', () => {
+  let component: LibeyNgSignatureComponent;
+  let fixture: ComponentFixture<LibeyNgSignatureComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LibeyNgSignatureComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LibeyNgSignatureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/signature/libey-ng-signature/libey-ng-signature.component.ts

@@ -0,0 +1,214 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnDestroy,
+  ViewChild,
+  Output,
+  EventEmitter,
+  Input,
+} from '@angular/core';
+import { SigWebTablet } from '../../../utils/SigWeb/SigWeb';
+import { Form, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { SignaturePad } from 'angular2-signaturepad';
+interface IOutputMessage {
+  bioSigData: string;
+  sigImgData: string;
+  sigString: string;
+}
+
+class OutputMessage implements IOutputMessage {
+  bioSigData: string;
+  sigImgData: string;
+  sigString: string;
+}
+
+@Component({
+  selector: 'lib-libey-ng-signature',
+  templateUrl: './libey-ng-signature.component.html',
+  styleUrls: ['./libey-ng-signature.component.css'],
+})
+export class LibeyNgSignatureComponent implements AfterViewInit, OnDestroy {
+  @Output() OutputSignature = new EventEmitter<IOutputMessage>();
+  @Input() DeviceType: string = 'mousepad';
+
+  private _destroy$: Subject<boolean> = new Subject<boolean>();
+  @ViewChild('sigImg', { static: false })
+  canvas!: ElementRef<HTMLCanvasElement>;
+  @ViewChild(SignaturePad) signaturePad: SignaturePad;
+  cnvContext: CanvasRenderingContext2D;
+  tmr: any;
+  widthView: number = 440;
+  heightView: number = 250;
+  widthRender: number = 440;
+  heightRender: number = 250;
+  signaturePadOptions: Object = {
+    minWidth: 5,
+    canvasWidth: this.widthView,
+    canvasHeight: this.heightView,
+  };
+  FileValidated = false;
+  NotDriver = false;
+  UploadFile: string = null;
+  File: any;
+  constructor() {}
+
+  ngAfterViewInit(): void {
+    this.InitDevice();
+  }
+
+  ngOnDestroy(): void {
+    this.closingSigWeb();
+    this._destroy$.next(true);
+  }
+
+  ChangeDevice() {
+    this.NotDriver = false;
+    this.UploadFile = null;
+    this.File = null;
+    setTimeout(() => {
+      this.InitDevice();
+    }, 200);
+  }
+
+  InitDevice() {
+    if (this.DeviceType == 'pinpad') {
+      this.cnvContext = (<HTMLCanvasElement>(
+        this.canvas.nativeElement
+      )).getContext('2d');
+    }
+    if (this.DeviceType == 'mousepad') {
+      this.signaturePad.set('minWidth', 5);
+      this.signaturePad.clear();
+    }
+  }
+
+  closingSigWeb() {
+    SigWebTablet.ClearTablet();
+    SigWebTablet.SetTabletState(0, this.tmr, null);
+  }
+
+  onSign() {
+    this.NotDriver = false;
+    this.UploadFile = null;
+    var driver = SigWebTablet.GetVersionString();
+    if(driver == null){
+      this.NotDriver = true;
+    }else{
+      this.NotDriver = false;
+      console.log('onSign Clicked!');
+      SigWebTablet.SetDisplayXSize(this.widthRender);
+      SigWebTablet.SetDisplayYSize(this.heightRender);
+      SigWebTablet.SetTabletState(0, this.tmr, null);
+      SigWebTablet.SetJustifyMode(0);
+      SigWebTablet.ClearTablet();
+
+      if (this.tmr == null) {
+        this.tmr = SigWebTablet.SetTabletState(1, this.cnvContext, 50);
+      } else {
+        SigWebTablet.SetTabletState(0, this.tmr, null);
+        this.tmr = null;
+        this.tmr = SigWebTablet.SetTabletState(1, this.cnvContext, 50);
+      }
+    }
+  }
+
+  onClear() {
+    if(this.UploadFile == null){
+      if (this.DeviceType == 'pinpad') {
+        SigWebTablet.ClearTablet();
+        if (this.cnvContext) {
+          this.cnvContext.clearRect(
+            0,
+            0,
+            this.canvas.nativeElement.width,
+            this.canvas.nativeElement.height
+          );
+        }
+      }
+      if (this.DeviceType == 'mousepad') {
+        this.signaturePad.clear();
+      }
+    }else{
+      this.File = null;
+      this.UploadFile = null;
+      this.ChangeDevice();
+    }
+  }
+
+  onDone() {
+    var result = new OutputMessage();
+    if(this.UploadFile == null){
+      if (this.DeviceType == 'pinpad') {
+        // if (Number(SigWebTablet.NumberOfTabletPoints()) === 0) {
+        //   alert('Por favor firme antes de continuar');
+        // } else {
+        SigWebTablet.SetTabletState(0, this.tmr, null);
+
+        SigWebTablet.SetSigCompressionMode(1);
+        result.bioSigData = SigWebTablet.GetSigString();
+        result.sigImgData = SigWebTablet.GetSigString();
+        SigWebTablet.SetImageXSize(this.widthRender);
+        SigWebTablet.SetImageYSize(this.heightRender);
+        SigWebTablet.SetImagePenWidth(5);
+        SigWebTablet.GetSigImageB64((base64: string) => {
+          result.sigString = "data:image/png;base64," + base64;
+          this.OutputSignature.emit(result);
+        });
+        // }
+      }
+      if (this.DeviceType == 'mousepad') {
+        var result = new OutputMessage();
+        result.sigString = this.signaturePad.toDataURL();
+        this.OutputSignature.emit(result);
+      }
+    }else{
+      result.sigString = this.UploadFile;
+      this.OutputSignature.emit(result);
+    }
+  }
+  fileEvent(event: any) {
+    this.UploadFile = null;
+    this.FileValidated = false;
+    const file = event.target.files[0];
+    if (file.type == 'image/jpeg' || file.type == 'image/png') {
+      this.FileValidated = false;
+      const newWidth = this.widthRender;
+      const newHeight = this.heightRender;
+      this.resizeImage(file, newWidth, newHeight)
+        .then((resizedImageDataUrl) => {
+          this.UploadFile = resizedImageDataUrl;
+        })
+        .catch((error) => {
+          console.error('Error al redimensionar la imagen:', error);
+        });
+    }else{
+      this.File = null;
+      this.UploadFile = null;
+      this.FileValidated = true;
+    }
+  }
+  resizeImage(image: File, newWidth: number, newHeight: number): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.src = e.target.result as string;
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d');
+          canvas.width = newWidth;
+          canvas.height = newHeight;
+          ctx.drawImage(img, 0, 0, newWidth, newHeight);
+          const resizedImageDataUrl = canvas.toDataURL(image.type);
+          resolve(resizedImageDataUrl);
+        };
+        img.onerror = (error) => {
+          reject(error);
+        };
+      };
+      reader.readAsDataURL(image);
+    });
+  }
+}

package/src/lib/signature/libey-ng-signature.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { LibeyNgSignatureComponent } from './libey-ng-signature/libey-ng-signature.component';
+import { SignaturePadModule  } from 'angular2-signaturepad';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { IconsModule } from '../icons/icons.module';
+
+@NgModule({
+  declarations: [
+    LibeyNgSignatureComponent
+  ],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    SignaturePadModule,
+    CommonModule,
+    NgSelectModule,
+    NgbModule
+  ],
+  exports: [
+    LibeyNgSignatureComponent,
+    SignaturePadModule,
+    NgSelectModule,
+    NgbModule,
+    IconsModule
+  ]
+})
+export class LibeyNgSignatureModule { }

package/src/lib/table/directives/libey-column.directive.ts

@@ -0,0 +1,29 @@
+import { ContentChild, Directive, Input, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: 'libey-ng-column'
+})
+export class LibeyColumnDirective {
+  @Input() header!: string;
+  @Input() property!: string;
+  @Input() width!: number;
+  @Input() view: boolean = true;
+  @Input() arrayMap?: string;
+  @Input() isArray?: boolean;
+  @Input() expandable?: boolean;
+  @Input() class?: string;
+  @Input() classHeader?: string;
+  @Input() childTableTemplate: TemplateRef<any>;
+  @Input() isAutoClose: (item: any) => boolean = () => true;
+  @Input() expandedByDefault: (item: any) => boolean = () => false;
+  @Input() rowspan: (item: any) => number = () => 0;
+  @Input() isRowspan?: boolean;
+  @ContentChild('headerTemplate', { static: true }) headerTemplate: TemplateRef<any>;
+  @ContentChild('cellTemplate', { static: true }) cellTemplate: TemplateRef<any>;  
+  @ContentChild(TemplateRef, { static: true }) defaultTemplate: TemplateRef<any>;
+  getCellTemplate(): TemplateRef<any> {
+    return this.cellTemplate || this.defaultTemplate;
+  }
+
+  
+}