libey-ng-component-library 0.0.19 → 0.0.20

package/bundles/libey-ng-component-library.umd.js

@@ -527,6 +527,23 @@
             }
             return '';
         };
+        SigWebTablet.SigWebGetVersion = function (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;
+        };
         SigWebTablet.SigWebGetProperty = function (prop) {
             var xhr = this.SigWebcreateXHR();
             if (xhr) {
@@ -788,7 +805,9 @@
         SigWebTablet.GetVersionString = function () {
             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;
         };
@@ -1824,8 +1843,10 @@
                 minWidth: 5,
                 canvasWidth: this.widthView,
                 canvasHeight: this.heightView,
-                backgroundColor: 'rgba(242,242,242,1)',
             };
+            this.FileValidated = false;
+            this.NotDriver = false;
+            this.UploadFile = null;
         }
         LibeyNgSignatureComponent.prototype.ngAfterViewInit = function () {
             this.InitDevice();
@@ -1836,6 +1857,9 @@
         };
         LibeyNgSignatureComponent.prototype.ChangeDevice = function () {
             var _this = this;
+            this.NotDriver = false;
+            this.UploadFile = null;
+            this.File = null;
             setTimeout(function () {
                 _this.InitDevice();
             }, 200);
@@ -1854,64 +1878,129 @@
             SigWebTablet.SetTabletState(0, this.tmr, null);
         };
         LibeyNgSignatureComponent.prototype.onSign = function () {
-            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);
+                }
             }
         };
         LibeyNgSignatureComponent.prototype.onClear = function () {
-            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();
             }
         };
         LibeyNgSignatureComponent.prototype.onDone = function () {
             var _this = this;
-            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(function (base64) {
-                    result.sigString = "data:image/png;base64," + base64;
-                    _this.OutputSignature.emit(result);
-                });
-                // }
+            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(function (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);
             }
         };
-        LibeyNgSignatureComponent.prototype.drawComplete = function () { };
-        LibeyNgSignatureComponent.prototype.drawStart = function () { };
+        LibeyNgSignatureComponent.prototype.fileEvent = function (event) {
+            var _this = this;
+            this.UploadFile = null;
+            this.FileValidated = false;
+            var file = event.target.files[0];
+            if (file.type == 'image/jpeg' || file.type == 'image/png') {
+                this.FileValidated = false;
+                var newWidth = this.widthRender;
+                var newHeight = this.heightRender;
+                this.resizeImage(file, newWidth, newHeight)
+                    .then(function (resizedImageDataUrl) {
+                    _this.UploadFile = resizedImageDataUrl;
+                })
+                    .catch(function (error) {
+                    console.error('Error al redimensionar la imagen:', error);
+                });
+            }
+            else {
+                this.File = null;
+                this.UploadFile = null;
+                this.FileValidated = true;
+            }
+        };
+        LibeyNgSignatureComponent.prototype.resizeImage = function (image, newWidth, newHeight) {
+            return new Promise(function (resolve, reject) {
+                var reader = new FileReader();
+                reader.onload = function (e) {
+                    var img = new Image();
+                    img.src = e.target.result;
+                    img.onload = function () {
+                        var canvas = document.createElement('canvas');
+                        var ctx = canvas.getContext('2d');
+                        canvas.width = newWidth;
+                        canvas.height = newHeight;
+                        ctx.drawImage(img, 0, 0, newWidth, newHeight);
+                        var resizedImageDataUrl = canvas.toDataURL(image.type);
+                        resolve(resizedImageDataUrl);
+                    };
+                    img.onerror = function (error) {
+                        reject(error);
+                    };
+                };
+                reader.readAsDataURL(image);
+            });
+        };
         return LibeyNgSignatureComponent;
     }());
     LibeyNgSignatureComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgSignatureComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LibeyNgSignatureComponent.ɵcmp = i0__namespace.ɵɵ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: i1.SignaturePad, descendants: true }], ngImport: i0__namespace, 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__namespace$1.SignaturePad, selector: "signature-pad", inputs: ["options"], outputs: ["onBeginEvent", "onEndEvent"] }, { type: i2__namespace.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__namespace.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    LibeyNgSignatureComponent.ɵcmp = i0__namespace.ɵɵ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: i1.SignaturePad, descendants: true }], ngImport: i0__namespace, 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\n<div class=\"row\">\n  <div class=\"col-md-12\">\n    <input type=\"file\" (change)=\"fileEvent($event)\" [(ngModel)]=\"File\" class=\"form-control form-control-ph\"\n    accept=\"image/png, image/jpeg\" style=\"width: 485px;\">\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__namespace$1.SignaturePad, selector: "signature-pad", inputs: ["options"], outputs: ["onBeginEvent", "onEndEvent"] }, { type: i2__namespace.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__namespace.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgSignatureComponent, decorators: [{
                 type: i0.Component,
                 args: [{