libey-ng-component-library 0.0.19 → 0.0.21

package/fesm2015/libey-ng-component-library.js

@@ -496,6 +496,23 @@ class SigWebTablet {
         }
         return '';
     }
+    static SigWebGetVersion(prop) {
+        try {
+            var xhr = this.SigWebcreateXHR();
+            if (xhr) {
+                xhr.open('GET', this.baseUri + prop + '?noCache=' + this.generateUUID(), false);
+                xhr.send(null);
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    return xhr.responseText;
+                }
+            }
+        }
+        catch (error) {
+            console.error('Error en SigWebGetVersion:', error);
+            return null;
+        }
+        return null;
+    }
     static SigWebGetProperty(prop) {
         var xhr = this.SigWebcreateXHR();
         if (xhr) {
@@ -753,7 +770,9 @@ class SigWebTablet {
     static GetVersionString() {
         var Prop = 'Version';
         Prop = Prop;
-        var Str = this.SigWebGetProperty(Prop);
+        var Str = this.SigWebGetVersion(Prop);
+        if (Str == null)
+            return Str;
         var trimStr = Str.slice(1, Str.length - 2);
         return trimStr;
     }
@@ -1783,8 +1802,10 @@ class LibeyNgSignatureComponent {
             minWidth: 5,
             canvasWidth: this.widthView,
             canvasHeight: this.heightView,
-            backgroundColor: 'rgba(242,242,242,1)',
         };
+        this.FileValidated = false;
+        this.NotDriver = false;
+        this.UploadFile = null;
     }
     ngAfterViewInit() {
         this.InitDevice();
@@ -1794,6 +1815,9 @@ class LibeyNgSignatureComponent {
         this._destroy$.next(true);
     }
     ChangeDevice() {
+        this.NotDriver = false;
+        this.UploadFile = null;
+        this.File = null;
         setTimeout(() => {
             this.InitDevice();
         }, 200);
@@ -1812,62 +1836,126 @@ class LibeyNgSignatureComponent {
         SigWebTablet.SetTabletState(0, this.tmr, null);
     }
     onSign() {
-        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);
+        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);
-            this.tmr = null;
-            this.tmr = SigWebTablet.SetTabletState(1, this.cnvContext, 50);
+            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.DeviceType == 'pinpad') {
-            SigWebTablet.ClearTablet();
-            if (this.cnvContext) {
-                this.cnvContext.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
+        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();
             }
         }
-        if (this.DeviceType == 'mousepad') {
-            this.signaturePad.clear();
+        else {
+            this.File = null;
+            this.UploadFile = null;
+            this.ChangeDevice();
         }
     }
     onDone() {
-        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);
-            var result = new OutputMessage();
-            result.bioSigData = SigWebTablet.GetSigString();
-            result.sigImgData = SigWebTablet.GetSigString();
-            SigWebTablet.SetImageXSize(this.widthRender);
-            SigWebTablet.SetImageYSize(this.heightRender);
-            SigWebTablet.SetImagePenWidth(5);
-            SigWebTablet.GetSigImageB64((base64) => {
-                result.sigString = "data:image/png;base64," + base64;
+        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) => {
+                    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);
-            });
-            // }
+            }
         }
-        if (this.DeviceType == 'mousepad') {
-            var result = new OutputMessage();
-            result.sigString = this.signaturePad.toDataURL();
+        else {
+            result.sigString = this.UploadFile;
             this.OutputSignature.emit(result);
         }
     }
-    drawComplete() { }
-    drawStart() { }
+    fileEvent(event) {
+        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, newWidth, newHeight) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.src = e.target.result;
+                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);
+        });
+    }
 }
 LibeyNgSignatureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgSignatureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibeyNgSignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LibeyNgSignatureComponent, selector: "lib-libey-ng-signature", inputs: { DeviceType: "DeviceType" }, outputs: { OutputSignature: "OutputSignature" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["sigImg"], descendants: true }, { propertyName: "signaturePad", first: true, predicate: SignaturePad, descendants: true }], ngImport: i0, template: "<div class=\"container\">\n  <div *ngIf=\"DeviceType=='pinpad'\">\n    <canvas #sigImg [width]=\"widthView\" [height]=\"heightView\" style=\"background-color: rgba(242,242,242,1);\"></canvas>  \n  </div>\n  <div *ngIf=\"DeviceType=='mousepad'\">\n    <signature-pad [options]=\"signaturePadOptions\" (onBeginEvent)=\"drawStart()\" (onEndEvent)=\"drawComplete()\"></signature-pad>\n  </div>\n  <div class=\"row\">\n    <button *ngIf=\"DeviceType=='pinpad'\" mat-raised-button (click)=\"onSign()\">Firmar</button>\n    <button mat-raised-button (click)=\"onClear()\">Limpiar</button>\n    <button mat-raised-button (click)=\"onDone()\">Guardar</button>\n  </div>\n  <div class=\"row\">\n    <ng-select [(ngModel)]=\"DeviceType\" class=\"ng-select\" placeholder=\"Seleccionar\" [clearable]=\"false\"\n    (change)=\"ChangeDevice()\">\n      <ng-option [value]=\"'pinpad'\">Pinpad</ng-option>\n      <ng-option [value]=\"'mousepad'\">Mousepad</ng-option>\n    </ng-select>\n  </div>\n</div>", styles: [".container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.row{display:flex;justify-content:center;grid-gap:10px;gap:10px}\n"], components: [{ type: i1$1.SignaturePad, selector: "signature-pad", inputs: ["options"], outputs: ["onBeginEvent", "onEndEvent"] }, { type: i2.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i2.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+LibeyNgSignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LibeyNgSignatureComponent, selector: "lib-libey-ng-signature", inputs: { DeviceType: "DeviceType" }, outputs: { OutputSignature: "OutputSignature" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["sigImg"], descendants: true }, { propertyName: "signaturePad", first: true, predicate: SignaturePad, descendants: true }], ngImport: i0, template: "<div class=\"container\">\n  <div *ngIf=\"UploadFile==null\">\n    <div *ngIf=\"DeviceType=='pinpad'\" style=\"cursor: pointer; border: 1px ridge #d2d2d2;\">\n      <canvas  (click)=\"onSign()\" #sigImg [width]=\"widthView\" [height]=\"heightView\"></canvas>  \n    </div>\n    <div *ngIf=\"DeviceType=='mousepad'\" style=\"border: 1px ridge #d2d2d2;\">\n      <signature-pad [options]=\"signaturePadOptions\"></signature-pad>\n    </div>\n  </div>\n  <div *ngIf=\"UploadFile!=null\" style=\"border: 1px ridge #d2d2d2;\">\n    <img [src]=\"UploadFile\" [width]=\"widthView\" [height]=\"heightView\" />\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-md-12\" style=\"padding-top: 17px !important; padding-bottom: 17px !important;\">\n    <input type=\"file\" (change)=\"fileEvent($event)\" [(ngModel)]=\"File\" class=\"form-control form-control-ph\"\n    accept=\"image/png, image/jpeg\" style=\"border: none;\">\n    <label *ngIf=\"FileValidated\" [ngClass]=\"'text-danger'\">Archivo requerido. Formatos permitidos (jpeg, jpg, png)</label>\n  </div>\n</div>\n<div class=\"row\">\n  <div class=\"col-md-6\">\n      <ng-select [(ngModel)]=\"DeviceType\" class=\"ng-select\" placeholder=\"Seleccionar\" [clearable]=\"false\"\n      (change)=\"ChangeDevice()\">\n          <ng-option [value]=\"'pinpad'\">Pinpad</ng-option>\n          <ng-option [value]=\"'mousepad'\">Mousepad</ng-option>\n      </ng-select>\n      <label *ngIf=\"NotDriver\" [ngClass]=\"'text-danger'\">No tiene el driver instalado</label>\n  </div>\n  <div class=\"col-md-6\">\n      <p class=\"text-primary font-link-rp\" style=\"text-align: right; cursor: pointer;\" (click)=\"onClear()\">\n          Limpiar firma\n      </p>\n  </div>\n</div>\n\n<div class=\"modal-footer mt-15 mb-4\">\n  <button type=\"button\" class=\"btn btn-primary btn-save-rp\" (click)=\"onDone()\"> \n      <i class=\"icon-save-white\"></i> Guardar\n  </button>\n</div>", styles: [".container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}\n"], components: [{ type: i1$1.SignaturePad, selector: "signature-pad", inputs: ["options"], outputs: ["onBeginEvent", "onEndEvent"] }, { type: i2.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i2.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgSignatureComponent, decorators: [{
             type: Component,
             args: [{