@fad-producto-portal/ng-fad-signature-fea 1.0.0-alpha.0 → 1.0.0-alpha.1

package/fesm2022/fad-producto-portal-ng-fad-signature-fea.mjs

@@ -1,22 +1,22 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { Component, Input, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i5 from '@fad-producto-portal/ng-fad-shared';
 import { ResponseError, SharedUtils, NgFadSharedModule } from '@fad-producto-portal/ng-fad-shared';
 import * as i4 from '@fad-producto/ng-fad-image-inline';
 import { NgFadImageInlineModule } from '@fad-producto/ng-fad-image-inline';
-import * as i5$1 from '@fad-producto-portal/ng-fad-viewer';
+import * as i2 from '@fad-producto-portal/ng-fad-viewer';
 import { GeneralPdfViewerComponent, NgFadViewerModule } from '@fad-producto-portal/ng-fad-viewer';
+import * as i1 from '@fad-producto/ng-fad-pdf-reader';
+import { NgFadPdfReaderService } from '@fad-producto/ng-fad-pdf-reader';
 import { Utils } from '@fad-producto-portal/fad-common/utils/utils';
 import { Configuration } from '@fad-producto-portal/fad-common/models/core';
-import * as i2 from '@angular/router';
-import * as i2$1 from '@fad-producto-portal/ng-fad-services';
 import { finalize } from 'rxjs';
-import * as i2$2 from '@fad-producto/ng-fad-pdf-reader';
-import { NgFadPdfReaderService } from '@fad-producto/ng-fad-pdf-reader';
+import * as i2$1 from '@angular/router';
+import * as i2$2 from '@fad-producto-portal/ng-fad-services';
 
 const DOCUMENT_APPROVAL_LIST_DEFAULT = {
     customization: {
@@ -177,6 +177,23 @@ const VALIDATE_SIGNATURE_CONFIGURATION_DEFAULT = {
     }
 };
 
+const PDF_VIEWER_FEA_DEFAULT = {
+    pdfMini: {
+        configuration: {
+            scrollIntoView: true
+        }
+    },
+    customization: {
+        moduleCustomization: {
+            style: {},
+            legends: {}
+        }
+    },
+    pathDependencies: {
+        imageDirectory: 'assets/images/fad-signature-fea/pdf-viewer-fea/',
+    }
+};
+
 var DocumentApprovalListErrorCode;
 (function (DocumentApprovalListErrorCode) {
     DocumentApprovalListErrorCode[DocumentApprovalListErrorCode["SERVICE"] = -1] = "SERVICE";
@@ -250,6 +267,8 @@ var ValidateRFCErrorCode;
 (function (ValidateRFCErrorCode) {
     ValidateRFCErrorCode[ValidateRFCErrorCode["SERVICE"] = -1] = "SERVICE";
     ValidateRFCErrorCode[ValidateRFCErrorCode["HTTP"] = -2] = "HTTP";
+    ValidateRFCErrorCode[ValidateRFCErrorCode["REQUISITION_ID"] = -3] = "REQUISITION_ID";
+    ValidateRFCErrorCode[ValidateRFCErrorCode["SIGNER_ID"] = -4] = "SIGNER_ID";
 })(ValidateRFCErrorCode || (ValidateRFCErrorCode = {}));
 
 const getValidateRFCErrorDescription = (code) => {
@@ -258,6 +277,10 @@ const getValidateRFCErrorDescription = (code) => {
             return "Service error";
         case -2:
             return "HTTP error";
+        case -3:
+            return "There is not requisitionId";
+        case -4:
+            return "There is not signerId";
         default:
             return 'Unknown error';
     }
@@ -286,26 +309,93 @@ const getValidateSignatureErrorDescription = (code) => {
     }
 };
 
+class PdfViewerFeaComponent {
+    constructor(pdfService, cdr) {
+        this.pdfService = pdfService;
+        this.cdr = cdr;
+        this.pages = [];
+        this.page = 1;
+        this.miniViewConfig = { scrollIntoView: false };
+        this.height = 1000;
+    }
+    ngOnInit() {
+        if (this.file) {
+            this.initializePdf(this.file);
+        }
+    }
+    initializePdf(pdfBase64) {
+        this.pdfService.initialize(pdfBase64, `pdf-${this.index}`);
+        this.pdfService.pages.subscribe((res) => {
+            if (res) {
+                this.pages = [...this.pages, res];
+            }
+        });
+    }
+    onPageChange(page) {
+        this.page = page;
+    }
+    scrollToPage(page) {
+        this.generalPdfViewerComponent.scrollToPage(page);
+    }
+    onLoadPage(data) {
+        if (data.page === 1) {
+            const containerElement = document.getElementById(this.id);
+            if (!containerElement) {
+                return;
+            }
+            const observer = new MutationObserver(() => {
+                const viewerElement = containerElement.querySelector(`#fad-viewer-page-v1-1`);
+                if (viewerElement) {
+                    observer.disconnect();
+                    const newHeight = viewerElement.clientHeight;
+                    if (this.height !== newHeight) {
+                        this.height = newHeight;
+                        this.cdr.detectChanges();
+                    }
+                }
+            });
+            observer.observe(containerElement, { childList: true, subtree: true });
+        }
+    }
+    setCustomizationStyle(targetElement = document.documentElement) {
+        this.configuration = Utils.mergeConfiguration(new Configuration(), PDF_VIEWER_FEA_DEFAULT, this.configuration);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfViewerFeaComponent, deps: [{ token: i1.NgFadPdfReaderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PdfViewerFeaComponent, selector: "ng-fad-signature-fea-pdf-viewer-fea", inputs: { configuration: "configuration", file: "file", index: "index", id: "id" }, providers: [NgFadPdfReaderService], viewQueries: [{ propertyName: "generalPdfViewerComponent", first: true, predicate: GeneralPdfViewerComponent, descendants: true }], ngImport: i0, template: "<div class=\"pdf-viewer\" [id]=\"id\" [style.height.px]=\"height\">\r\n    <ng-fad-viewer-general-pdf-viewer\r\n      [pages]=\"pages\"\r\n      (onpagechange)=\"onPageChange($event)\"\r\n      (onloadpage)=\"onLoadPage($event)\">\r\n  \r\n      <ng-fad-viewer-pdf-mini-view\r\n        miniView\r\n        [configuration]=\"miniViewConfig\"\r\n        [pages]=\"pages\"\r\n        [page]=\"page\"\r\n        (onpagechange)=\"scrollToPage($event)\"\r\n        >\r\n      </ng-fad-viewer-pdf-mini-view>\r\n  \r\n    </ng-fad-viewer-general-pdf-viewer>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: i2.GeneralPdfViewerComponent, selector: "ng-fad-viewer-general-pdf-viewer", inputs: ["configuration", "onerror", "pages"], outputs: ["onpagechange", "onloadpage"] }, { kind: "component", type: i2.PdfMiniViewComponent, selector: "ng-fad-viewer-pdf-mini-view", inputs: ["configuration", "pages", "page"], outputs: ["onpagechange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfViewerFeaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-fad-signature-fea-pdf-viewer-fea', providers: [NgFadPdfReaderService], template: "<div class=\"pdf-viewer\" [id]=\"id\" [style.height.px]=\"height\">\r\n    <ng-fad-viewer-general-pdf-viewer\r\n      [pages]=\"pages\"\r\n      (onpagechange)=\"onPageChange($event)\"\r\n      (onloadpage)=\"onLoadPage($event)\">\r\n  \r\n      <ng-fad-viewer-pdf-mini-view\r\n        miniView\r\n        [configuration]=\"miniViewConfig\"\r\n        [pages]=\"pages\"\r\n        [page]=\"page\"\r\n        (onpagechange)=\"scrollToPage($event)\"\r\n        >\r\n      </ng-fad-viewer-pdf-mini-view>\r\n  \r\n    </ng-fad-viewer-general-pdf-viewer>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i1.NgFadPdfReaderService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { configuration: [{
+                type: Input
+            }], file: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], generalPdfViewerComponent: [{
+                type: ViewChild,
+                args: [GeneralPdfViewerComponent]
+            }] } });
+
 class ValidateRfcComponent {
     constructor(fb, hostContext, route, fadService) {
         this.fb = fb;
         this.hostContext = hostContext;
         this.route = route;
         this.fadService = fadService;
-        this.onerror = new EventEmitter();
-        this.onevent = new EventEmitter();
-        this.showComponent = true;
         this.requisitionId = '';
         this.signerId = '';
+        this.onerror = new EventEmitter();
+        this.oncomplete = new EventEmitter();
+        this.onloader = new EventEmitter();
+        this.showComponent = true;
     }
     ngOnInit() {
         this.setCustomizationStyle(this.hostContext.nativeElement);
+        this.showComponent = this.validateData();
         this.initializeForm();
-        this.route.queryParams.subscribe(params => {
-            this.requisitionId = params['req'];
-            this.signerId = params['sign'];
-            console.log(this.requisitionId, this.signerId);
-        });
     }
     initializeForm() {
         const maxCharacters = this.configuration?.maxCharacters || 13;
@@ -325,6 +415,17 @@ class ValidateRfcComponent {
     setCustomizationStyle(targetElement = document.documentElement) {
         this.configuration = Utils.mergeConfiguration(new Configuration(), SIGNATURE_FEA_CONFIGURATION_DEFAULT, this.configuration);
     }
+    validateData() {
+        if (!this.requisitionId) {
+            this.onerror.emit(new ResponseError(ValidateRFCErrorCode.REQUISITION_ID, getValidateRFCErrorDescription(ValidateRFCErrorCode.REQUISITION_ID), 'ng-fad-portal-signature-fea-validate-rfc'));
+            return false;
+        }
+        if (!this.signerId) {
+            this.onerror.emit(new ResponseError(ValidateRFCErrorCode.SIGNER_ID, getValidateRFCErrorDescription(ValidateRFCErrorCode.SIGNER_ID), 'ng-fad-portal-signature-fea-validate-rfc'));
+            return false;
+        }
+        return true;
+    }
     validateRFC() {
         if (this.validationForm.valid) {
             console.error("Validar rfc ");
@@ -333,35 +434,47 @@ class ValidateRfcComponent {
                 signerId: this.signerId,
                 rfc: this.codeControl?.value
             };
-            this.fadService.validateRfc(validateReq).subscribe({
+            this.fadService.validateRfc(validateReq)
+                .pipe(finalize(() => this.onloader.emit(false)))
+                .subscribe({
                 next: (response) => {
                     if (response.success) {
-                        this.onevent.emit(response);
+                        this.oncomplete.emit(response);
                     }
                     else {
-                        this.onerror.emit(new ResponseError(ValidateRFCErrorCode.SERVICE, getValidateRFCErrorDescription(ValidateRFCErrorCode.SERVICE), 'ng-fad-portal-signature-fea-validate-rfc'));
+                        this.onerror.emit(new ResponseError(ValidateRFCErrorCode.SERVICE, response.error, 'ng-fad-portal-signature-fea-validate-rfc'));
                     }
                 },
                 error: (error) => {
-                    this.onerror.emit(new ResponseError(ValidateRFCErrorCode.HTTP, getValidateRFCErrorDescription(ValidateRFCErrorCode.HTTP), 'ng-fad-portal-signature-fea-validate-rfc'));
+                    this.onerror.emit(new ResponseError(ValidateRFCErrorCode.HTTP, error.error, 'ng-fad-portal-signature-fea-validate-rfc'));
                 }
             });
         }
     }
+    onInputChange(event) {
+        const inputValue = event.target.value;
+        this.validationForm.controls['code'].setValue(inputValue.toUpperCase(), { emitEvent: false });
+    }
     get codeControl() {
         return this.validationForm.get('code') ?? null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidateRfcComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ElementRef }, { token: i2.ActivatedRoute }, { token: i2$1.FadService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValidateRfcComponent, selector: "ng-fad-signature-fea-validate-rfc", inputs: { configuration: "configuration" }, outputs: { onerror: "onerror", onevent: "onevent" }, ngImport: i0, template: "<div class=\"validation-container fad-container\" *ngIf=\"showComponent\">\r\n  <div class=\"title\">{{ configuration.customization?.moduleCustomization?.legends?.title }}</div>\r\n  <div class=\"fad-portal-subtitle\">{{ configuration.customization?.moduleCustomization?.legends?.description }}</div>\r\n  <form [formGroup]=\"validationForm\" (ngSubmit)=\"onSubmit()\">\r\n    <div class=\"fad-portal-container-input\">\r\n      <input id=\"code\" type=\"text\" formControlName=\"code\" maxlength=\"{{ configuration.maxCharacters || 13 }}\" />\r\n    </div>\r\n    <ng-fad-portal-shared-form-errors       \r\n      [formData]=\"codeControl!\" \r\n      [configuration]=\"configuration.formErrors?.configuration!\">\r\n    </ng-fad-portal-shared-form-errors>\r\n\r\n    <button type=\"submit\" class=\"fad-portal-primary\" [disabled]=\"validationForm.invalid\">\r\n      {{ configuration.customization?.moduleCustomization?.legends?.buttonLegend }}\r\n    </button>\r\n  </form>\r\n</div>\r\n", styles: [".validation-container{width:100%;display:flex;flex-direction:column;align-items:start;row-gap:var(--fad-portal-common-separation-md)}@media (max-width: 992px){.validation-container{width:100%;align-items:center}}.validation-container .title{font-family:var(--fad-portal-common-title-font-family);font-size:var(--fad-portal-common-title-font-size)}.validation-container form{display:flex;flex-direction:column;width:100%}.validation-container form .fad-portal-container-input{display:flex;flex-direction:column;row-gap:var(--fad-portal-common-separation-xs)}.validation-container form .error-message{color:var(--fad-portal-common-error-color)}.validation-container form button{margin-top:var(--fad-portal-common-separation-md);cursor:pointer}.validation-container form button:disabled{cursor:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.FormErrorsComponent, selector: "ng-fad-portal-shared-form-errors", inputs: ["configuration", "formData"], outputs: ["onerror"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidateRfcComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ElementRef }, { token: i2$1.ActivatedRoute }, { token: i2$2.FadService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValidateRfcComponent, selector: "ng-fad-signature-fea-validate-rfc", inputs: { requisitionId: "requisitionId", signerId: "signerId", configuration: "configuration" }, outputs: { onerror: "onerror", oncomplete: "oncomplete", onloader: "onloader" }, ngImport: i0, template: "\r\n  <div class=\"validation-container fad-container\" *ngIf=\"showComponent\">\r\n    <div class=\"title\">{{ configuration.customization?.moduleCustomization?.legends?.title }}</div>\r\n    <div class=\"fad-portal-subtitle\">{{ configuration.customization?.moduleCustomization?.legends?.description }}</div>\r\n    <form [formGroup]=\"validationForm\" (ngSubmit)=\"onSubmit()\">\r\n      <div class=\"fad-portal-container-input\">\r\n        <input id=\"code\" type=\"text\" formControlName=\"code\" (input)=\"onInputChange($event)\" maxlength=\"{{ configuration.maxCharacters || 13 }}\" />\r\n      </div>\r\n      <ng-fad-portal-shared-form-errors       \r\n        [formData]=\"codeControl!\" \r\n        [configuration]=\"configuration.formErrors?.configuration!\">\r\n      </ng-fad-portal-shared-form-errors>\r\n  \r\n      <button type=\"submit\" class=\"fad-portal-primary\" [disabled]=\"validationForm.invalid\">\r\n        {{ configuration.customization?.moduleCustomization?.legends?.buttonLegend }}\r\n      </button>\r\n    </form>\r\n  </div>\r\n\r\n\r\n", styles: [".validation-container{width:100%;display:flex;flex-direction:column;align-items:start;row-gap:var(--fad-portal-common-separation-md)}@media (max-width: 992px){.validation-container{width:100%;align-items:center}}.validation-container .title{font-family:var(--fad-portal-common-title-font-family);font-size:var(--fad-portal-common-title-font-size)}.validation-container form{display:flex;flex-direction:column;width:100%}.validation-container form .fad-portal-container-input{display:flex;flex-direction:column;row-gap:var(--fad-portal-common-separation-xs)}.validation-container form .error-message{color:var(--fad-portal-common-error-color)}.validation-container form button{margin-top:var(--fad-portal-common-separation-md);cursor:pointer}.validation-container form button:disabled{cursor:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.FormErrorsComponent, selector: "ng-fad-portal-shared-form-errors", inputs: ["configuration", "formData"], outputs: ["onerror"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidateRfcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-fad-signature-fea-validate-rfc', template: "<div class=\"validation-container fad-container\" *ngIf=\"showComponent\">\r\n  <div class=\"title\">{{ configuration.customization?.moduleCustomization?.legends?.title }}</div>\r\n  <div class=\"fad-portal-subtitle\">{{ configuration.customization?.moduleCustomization?.legends?.description }}</div>\r\n  <form [formGroup]=\"validationForm\" (ngSubmit)=\"onSubmit()\">\r\n    <div class=\"fad-portal-container-input\">\r\n      <input id=\"code\" type=\"text\" formControlName=\"code\" maxlength=\"{{ configuration.maxCharacters || 13 }}\" />\r\n    </div>\r\n    <ng-fad-portal-shared-form-errors       \r\n      [formData]=\"codeControl!\" \r\n      [configuration]=\"configuration.formErrors?.configuration!\">\r\n    </ng-fad-portal-shared-form-errors>\r\n\r\n    <button type=\"submit\" class=\"fad-portal-primary\" [disabled]=\"validationForm.invalid\">\r\n      {{ configuration.customization?.moduleCustomization?.legends?.buttonLegend }}\r\n    </button>\r\n  </form>\r\n</div>\r\n", styles: [".validation-container{width:100%;display:flex;flex-direction:column;align-items:start;row-gap:var(--fad-portal-common-separation-md)}@media (max-width: 992px){.validation-container{width:100%;align-items:center}}.validation-container .title{font-family:var(--fad-portal-common-title-font-family);font-size:var(--fad-portal-common-title-font-size)}.validation-container form{display:flex;flex-direction:column;width:100%}.validation-container form .fad-portal-container-input{display:flex;flex-direction:column;row-gap:var(--fad-portal-common-separation-xs)}.validation-container form .error-message{color:var(--fad-portal-common-error-color)}.validation-container form button{margin-top:var(--fad-portal-common-separation-md);cursor:pointer}.validation-container form button:disabled{cursor:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i0.ElementRef }, { type: i2.ActivatedRoute }, { type: i2$1.FadService }]; }, propDecorators: { configuration: [{
+            args: [{ selector: 'ng-fad-signature-fea-validate-rfc', template: "\r\n  <div class=\"validation-container fad-container\" *ngIf=\"showComponent\">\r\n    <div class=\"title\">{{ configuration.customization?.moduleCustomization?.legends?.title }}</div>\r\n    <div class=\"fad-portal-subtitle\">{{ configuration.customization?.moduleCustomization?.legends?.description }}</div>\r\n    <form [formGroup]=\"validationForm\" (ngSubmit)=\"onSubmit()\">\r\n      <div class=\"fad-portal-container-input\">\r\n        <input id=\"code\" type=\"text\" formControlName=\"code\" (input)=\"onInputChange($event)\" maxlength=\"{{ configuration.maxCharacters || 13 }}\" />\r\n      </div>\r\n      <ng-fad-portal-shared-form-errors       \r\n        [formData]=\"codeControl!\" \r\n        [configuration]=\"configuration.formErrors?.configuration!\">\r\n      </ng-fad-portal-shared-form-errors>\r\n  \r\n      <button type=\"submit\" class=\"fad-portal-primary\" [disabled]=\"validationForm.invalid\">\r\n        {{ configuration.customization?.moduleCustomization?.legends?.buttonLegend }}\r\n      </button>\r\n    </form>\r\n  </div>\r\n\r\n\r\n", styles: [".validation-container{width:100%;display:flex;flex-direction:column;align-items:start;row-gap:var(--fad-portal-common-separation-md)}@media (max-width: 992px){.validation-container{width:100%;align-items:center}}.validation-container .title{font-family:var(--fad-portal-common-title-font-family);font-size:var(--fad-portal-common-title-font-size)}.validation-container form{display:flex;flex-direction:column;width:100%}.validation-container form .fad-portal-container-input{display:flex;flex-direction:column;row-gap:var(--fad-portal-common-separation-xs)}.validation-container form .error-message{color:var(--fad-portal-common-error-color)}.validation-container form button{margin-top:var(--fad-portal-common-separation-md);cursor:pointer}.validation-container form button:disabled{cursor:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ElementRef }, { type: i2$1.ActivatedRoute }, { type: i2$2.FadService }]; }, propDecorators: { requisitionId: [{
+                type: Input
+            }], signerId: [{
+                type: Input
+            }], configuration: [{
                 type: Input
             }], onerror: [{
                 type: Output
-            }], onevent: [{
+            }], oncomplete: [{
+                type: Output
+            }], onloader: [{
                 type: Output
             }] } });
 
@@ -388,13 +501,6 @@ class DocumentApprovalListComponent {
                 approve: ''
             }
         };
-        this.pdfSrc = 'assets/pdf/one-drive.pdf';
-        this.pages = [];
-        this.page = 1;
-        this.height = '500px';
-        this.miniView = {
-            scrollIntoView: false
-        };
     }
     ngOnInit() {
         console.log(this.configuration, this.rfc);
@@ -461,24 +567,20 @@ class DocumentApprovalListComponent {
     }
     seeDocumentFea(document) {
         document.isVisible = !document.isVisible;
-        if (document.isVisible) {
+        if (document.isVisible && !document.doc?.file) {
             this.onloader.emit(true);
             this.fad.getDocumentFea(document.id, { loader: true, error: true })
                 .pipe(finalize(() => this.onloader.emit(false)))
                 .subscribe({
                 next: (res) => {
                     if (document.doc) {
-                        const byteCharacters = atob(res.data.file);
-                        const byteNumbers = new Array(byteCharacters.length).fill(0).map((_, i) => byteCharacters.charCodeAt(i));
-                        const byteArray = new Uint8Array(byteNumbers);
-                        const blob = new Blob([byteArray], { type: 'application/pdf' });
-                        this.getBase64(blob, document);
+                        document.doc.file = "data:application/pdf;base64," + res.data.file;
                     }
                     else {
                         this.onerror.emit(new ResponseError(DocumentApprovalListErrorCode.SERVICE, getDocumentApprovalListErrorDescription(DocumentApprovalListErrorCode.SERVICE), 'ng-fad-portal-signature-fea-document-approval-list'));
                     }
                 },
-                error: (error) => {
+                error: () => {
                     this.onerror.emit(new ResponseError(DocumentApprovalListErrorCode.HTTP, getDocumentApprovalListErrorDescription(DocumentApprovalListErrorCode.HTTP), 'ng-fad-portal-signature-fea-document-approval-list'));
                 }
             });
@@ -489,18 +591,16 @@ class DocumentApprovalListComponent {
         this.fad.getDocumentFea(document.id)
             .pipe(finalize(() => this.onloader.emit(false)))
             .subscribe({
-            next: (res) => {
+            next: async (res) => {
                 if (res.success && res.data.file) {
                     const byteCharacters = atob(res.data.file);
                     const byteNumbers = new Array(byteCharacters.length).fill(0).map((_, i) => byteCharacters.charCodeAt(i));
                     const byteArray = new Uint8Array(byteNumbers);
                     const blob = new Blob([byteArray], { type: 'application/pdf' });
-                    const link = window.document.createElement('a');
-                    link.href = URL.createObjectURL(blob);
-                    link.download = document.doc?.name || 'document.pdf';
-                    window.document.body.appendChild(link);
-                    link.click();
-                    window.document.body.removeChild(link);
+                    await SharedUtils.downloadFile(blob, document.doc?.name).then(res => {
+                    }).catch(error => {
+                        this.onerror.emit(new ResponseError(DocumentApprovalListErrorCode.ERROR_PDF, getDocumentApprovalListErrorDescription(DocumentApprovalListErrorCode.ERROR_PDF), 'ng-fad-portal-signature-fea-document-approval-list'));
+                    });
                 }
                 else {
                     this.onerror.emit(new ResponseError(DocumentApprovalListErrorCode.SERVICE, getDocumentApprovalListErrorDescription(DocumentApprovalListErrorCode.SERVICE), 'ng-fad-portal-signature-fea-document-approval-list'));
@@ -511,68 +611,19 @@ class DocumentApprovalListComponent {
             }
         });
     }
-    async getBase64(blob, document) {
-        console.log(blob);
-        const data = new File([blob], 'file.pdf', { type: 'application/pdf' });
-        const base64 = await SharedUtils.fileToBase64(data);
-        if (base64) {
-            this.initializePdf(base64, document);
-        }
-        else {
-            this.onerror.emit(new ResponseError(DocumentApprovalListErrorCode.ERROR_PDF, getDocumentApprovalListErrorDescription(DocumentApprovalListErrorCode.HTTP), 'ng-fad-portal-signature-fea-document-approval-list'));
-        }
-    }
-    initializePdf(pdf, document) {
-        if (!this.pagesMap.has(document.id)) {
-            this.pagesMap.set(document.id, []);
-        }
-        else {
-            this.pagesMap.get(document.id).length = 0;
-        }
-        this.pdfService.initialize(pdf, SharedUtils.generateUUID());
-        this.getPages(document);
-    }
-    getPages(document) {
-        if (!this.pagesMap.has(document.id)) {
-            this.pagesMap.set(document.id, []);
-        }
-        else {
-            this.pagesMap.get(document.id).length = 0;
-        }
-        if (this.pdfLibrary) {
-            this.pdfLibrary.unsubscribe();
-        }
-        this.pdfLibrary = this.pdfService.pages.subscribe(res => {
-            const docPages = this.pagesMap.get(document.id);
-            docPages.push(res);
-            this.cdr.detectChanges();
-        });
-    }
-    //PDF General viewer methods
-    onpagechange(page) {
-        this.page = page;
-    }
-    scrollToPage(page) {
-        this.generalPdfViewerComponent.scrollToPage(page);
-    }
-    onloadpage(data) {
-        if (data.page == 1) {
-            const id = "fad-viewer-page-v1-1";
-            const dynamicDiv = document.getElementById(id);
-            ;
-            this.height = dynamicDiv.clientHeight + 'px';
-        }
+    getDocumentId(id) {
+        return "pdf" + id.replace(/-/g, '');
     }
     setCustomizationStyle(targetElement = document.documentElement) {
         this.configuration = Utils.mergeConfiguration(new Configuration(), DOCUMENT_APPROVAL_LIST_DEFAULT, this.configuration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentApprovalListComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.FadService }, { token: i0.ChangeDetectorRef }, { token: i2$2.NgFadPdfReaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DocumentApprovalListComponent, selector: "ng-fad-signature-fea-document-approval-list", inputs: { configuration: "configuration", rfc: "rfc" }, outputs: { onloader: "onloader", onevent: "onevent", onerror: "onerror" }, providers: [NgFadPdfReaderService], viewQueries: [{ propertyName: "generalPdfViewerComponent", first: true, predicate: GeneralPdfViewerComponent, descendants: true }], ngImport: i0, template: "\r\n    <ng-container *ngFor=\"let requisition of requisitionsFea\">\r\n        <div class=\"fad-portal-content\" >\r\n            <div class=\"header\" >\r\n                <div>\r\n                    <div class=\"fad-portal-title\">\r\n                        {{ requisition.name }} ({{requisition.documents.length}})\r\n                    </div>\r\n                    <div class=\"info\">\r\n                        {{configuration.customization?.moduleCustomization?.legends?.sendTo}} Alfredo Villanueva  {{ requisition.sendBy }}\r\n                    </div>\r\n                    <div class=\"info\">\r\n                        {{ requisition.sendByEmail }}\r\n                    </div>\r\n                </div>\r\n                <div class=\"requisition-id\">\r\n                    <div class=\"fad-portal-subtitle-bold\">ID {{ requisition.requisitionId }}</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"documents-container\">\r\n                <ng-container *ngFor=\"let document of documentsApprovalList\">\r\n                    <ng-container *ngIf=\"document.idRequisition === requisition.requisitionId\" >\r\n                        <div class=\"document\"  >\r\n                            <div class=\"information\" >\r\n                                <div class=\"document-name fad-portal-subtitle-bold\" >\r\n                                    {{ document.doc?.name }}\r\n                                </div>\r\n                                <div class=\"validate\">\r\n                                    \r\n                                    <ng-fad-image-inline \r\n                                            [src]=\"document.approved === false ? images.active.reject : images.inactive.reject\"\r\n                                            (click)=\"toggleRejection(document)\">\r\n                                    </ng-fad-image-inline>\r\n        \r\n                                       \r\n                                    <ng-fad-image-inline \r\n                                            [src]=\"document.approved === true ? images.active.approve : images.inactive.approve\"\r\n                                            (click)=\"toggleApproval(document)\">\r\n                                    </ng-fad-image-inline>\r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"actions\">\r\n                                <div>\r\n                                    <div class=\"fad-portal-subtitle-bold\" (click)=\"seeDocumentFea(document)\">\r\n                                        {{ document.isVisible ? 'Ocultar documento' : 'Ver documento' }}\r\n                                    </div>\r\n                                    <div class=\"fad-portal-subtitle-bold\" (click)=\"downloadDocumentFea(document)\">{{configuration.customization?.moduleCustomization?.legends?.download}}</div>\r\n                                </div>\r\n                                <div>\r\n                                    {{ document.doc?.pages }} {{configuration.customization?.moduleCustomization?.legends?.pages}}\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"pdf-viewer\" *ngIf=\"document.isVisible\"   [style.height.px]=\"1000\">\r\n                                <ng-fad-viewer-general-pdf-viewer\r\n                                  [pages]=\"pagesMap.get(document.id!) ?? []\"\r\n                                  (onpagechange)=\"onpagechange($event)\"\r\n                                  (onloadpage)=\"onloadpage($event)\">\r\n                                   \r\n                                  <ng-fad-viewer-pdf-mini-view\r\n                                    miniView\r\n                                    [configuration]=\"miniView\"\r\n                                    [pages]=\"pagesMap.get(document.id!) ?? []\"\r\n                                    [page]=\"page\"\r\n                                    (onpagechange)=\"scrollToPage($event)\">\r\n                                  </ng-fad-viewer-pdf-mini-view>\r\n                            \r\n                                </ng-fad-viewer-general-pdf-viewer>\r\n                            </div>\r\n                                \r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                \r\n            </div>\r\n            \r\n        </div>\r\n    </ng-container>\r\n    <div class=\"fad-portal-content selector-document\">\r\n        <div class=\"document-status-bar\">\r\n            \r\n            <div *ngIf=\"getApprovedCount() === 0 && getRejectedCount() === 0\" class=\"document-status-message \">\r\n                Aprueba los documentos para firmarlos con tu e.firma\r\n            </div>\r\n    \r\n          \r\n            <div *ngIf=\"getApprovedCount() > 0 || getRejectedCount() > 0\" class=\"document-status-content\">\r\n                <div class=\"approve-all\">\r\n                    <ng-fad-image-inline \r\n                        [src]=\"approveAll ? images.active.approve : images.inactive.approve\"\r\n                        (click)=\"approveAllDocuments()\">\r\n                    </ng-fad-image-inline>\r\n                    <span (click)=\"approveAllDocuments()\">Aprobar todos los documentos ({{ documentsApprovalList.length }})</span>\r\n                </div>\r\n    \r\n                \r\n                <div class=\"document-counts\">\r\n                    <span *ngIf=\"getApprovedCount() > 0 && getRejectedCount() === 0\" class=\"fad-portal-informative-bold\">\r\n                        {{ getApprovedCount() }} documentos aprobados\r\n                    </span>\r\n                    <span *ngIf=\"getRejectedCount() > 0 && getApprovedCount() === 0\" class=\"fad-portal-informative-bold\">\r\n                        {{ getRejectedCount() }} documentos rechazados\r\n                    </span>\r\n                    \r\n                    <ng-container *ngIf=\"getApprovedCount() > 0 && getRejectedCount() > 0\" >\r\n                        <span  class=\"fad-portal-informative-bold\">\r\n                            {{ getApprovedCount() }} documentos aprobados\r\n                        </span>\r\n                        <span  class=\"fad-portal-informative-bold\">\r\n                            {{ getRejectedCount() }} documentos rechazados\r\n                        </span>\r\n                    </ng-container>\r\n                </div>\r\n    \r\n               \r\n                <button class=\"fad-portal-primary\" (click)=\"emitApprovedDocuments()\">Continuar</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n\r\n", styles: [":host{box-sizing:border-box}:host .fad-portal-content{display:flex;flex-direction:column;justify-content:center;width:100%;box-sizing:border-box;margin-top:var(--fad-portal-common-separation-lg)}:host .fad-portal-content .header{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:#f5f5f5;border-radius:var(--fad-portal-common-input-border-radius);padding:var(--fad-portal-common-separation-md);overflow:hidden;box-sizing:border-box}:host .fad-portal-content .header div:nth-child(1){display:flex;flex-direction:column;row-gap:var(--fad-portal-common-separation-xs)}:host .fad-portal-content .header .info{color:var(--fad-portal-common-tertiary-color)}@media (max-width: 992px){:host .fad-portal-content .header{flex-direction:column;align-items:start;justify-content:center;row-gap:var(--fad-portal-common-separation-xs);margin-bottom:var(--fad-portal-common-separation-md)}}:host .fad-portal-content .documents-container{box-sizing:border-box}:host .fad-portal-content .documents-container .document{display:flex;align-items:center;flex-direction:column;width:100%;margin-top:var(--fad-portal-common-separation-md);border-radius:var(--fad-portal-common-input-border-radius);border:1px solid #f5f5f5}:host .fad-portal-content .documents-container .document .information{padding:var(--fad-portal-common-separation-md);display:flex;align-items:center;justify-content:space-between;width:100%}:host .fad-portal-content .documents-container .document .information .validate{padding-left:var(--fad-portal-common-separation-md);padding-right:var(--fad-portal-common-separation-md);display:flex;column-gap:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .information .document-name{padding-left:var(--fad-portal-common-separation-md);padding-right:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .actions{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:#f5f5f5;padding:var(--fad-portal-common-separation-md);box-sizing:border-box;border-radius:var(--fad-portal-common-input-border-radius);border-top-left-radius:0;border-top-right-radius:0}:host .fad-portal-content .documents-container .document .actions div:nth-child(1){display:flex;align-items:center;gap:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .actions div:nth-child(1) div{color:var(--fad-portal-common-primary-color)!important;cursor:pointer}:host .selector-document{width:100%;background-color:#262626;color:#fff;padding:var(--fad-portal-common-separation-md);margin-top:var(--fad-portal-common-separation-md);display:flex;align-items:center;justify-content:space-between;border-radius:var(--fad-portal-common-input-border-radius);box-sizing:border-box}:host .selector-document .document-status-message{display:flex;align-items:center;justify-content:center;width:100%;gap:var(--fad-portal-common-separation-md)}:host .selector-document .document-status-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;font-size:14px;box-sizing:border-box}:host .selector-document .document-status-bar .document-status-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;font-size:14px;box-sizing:border-box}:host .selector-document .document-status-bar .approve-all{display:flex;align-items:center;gap:10px;cursor:pointer;box-sizing:border-box}:host .selector-document .document-status-bar .approve-all span{cursor:pointer;-webkit-user-select:none;user-select:none}:host .selector-document .document-status-bar .document-counts{display:flex;flex-direction:column;gap:var(--fad-portal-common-separation-xs);box-sizing:border-box}:host .selector-document .document-status-bar .document-counts span{color:#fff}:host .selector-document .document-status-bar .fad-portal-primary{min-width:0px;width:50%}@media (max-width: 992px){:host .selector-document .document-status-bar .fad-portal-primary{width:100%;margin-top:var(--fad-portal-common-separation-md)}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgFadImageInlineComponent, selector: "ng-fad-image-inline", inputs: ["src"] }, { kind: "component", type: i5$1.GeneralPdfViewerComponent, selector: "ng-fad-viewer-general-pdf-viewer", inputs: ["configuration", "onerror", "pages"], outputs: ["onpagechange", "onloadpage"] }, { kind: "component", type: i5$1.PdfMiniViewComponent, selector: "ng-fad-viewer-pdf-mini-view", inputs: ["configuration", "pages", "page"], outputs: ["onpagechange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentApprovalListComponent, deps: [{ token: i0.ElementRef }, { token: i2$2.FadService }, { token: i0.ChangeDetectorRef }, { token: i1.NgFadPdfReaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DocumentApprovalListComponent, selector: "ng-fad-signature-fea-document-approval-list", inputs: { configuration: "configuration", rfc: "rfc" }, outputs: { onloader: "onloader", onevent: "onevent", onerror: "onerror" }, providers: [NgFadPdfReaderService], ngImport: i0, template: "\n    <ng-container *ngFor=\"let requisition of requisitionsFea\">\n        <div class=\"fad-portal-content\" >\n            <div class=\"header\" >\n                <div>\n                    <div class=\"fad-portal-title\">\n                        {{ requisition.name }} ({{requisition.documents.length}})\n                    </div>\n                    <div class=\"info\">\n                        {{configuration.customization?.moduleCustomization?.legends?.sendTo}} Alfredo Villanueva  {{ requisition.sendBy }}\n                    </div>\n                    <div class=\"info\">\n                        {{ requisition.sendByEmail }}\n                    </div>\n                </div>\n                <div class=\"requisition-id\">\n                    <div class=\"fad-portal-content-bold\">ID {{ requisition.requisitionId }}</div>\n                </div>\n            </div>\n            <div class=\"documents-container\">\n                <ng-container *ngFor=\"let document of documentsApprovalList; let i = index\">\n                    <ng-container *ngIf=\"document.idRequisition === requisition.requisitionId\" >\n                        <div class=\"document\"  >\n                            <div class=\"information\" >\n                                <div class=\"document-name fad-portal-content-bold\" >\n                                    {{ document.doc?.name }}\n                                </div>\n                                <div class=\"validate\">\n                                    \n                                    <ng-fad-image-inline \n                                            [src]=\"document.approved === false ? images.active.reject : images.inactive.reject\"\n                                            (click)=\"toggleRejection(document)\">\n                                    </ng-fad-image-inline>\n        \n                                       \n                                    <ng-fad-image-inline \n                                            [src]=\"document.approved === true ? images.active.approve : images.inactive.approve\"\n                                            (click)=\"toggleApproval(document)\">\n                                    </ng-fad-image-inline>\n                                </div>\n                                \n                            </div>\n                            <div class=\"actions\">\n                                <div>\n                                    <div class=\"fad-portal-content-bold\" (click)=\"seeDocumentFea(document)\">\n                                        {{ document.isVisible ? 'Ocultar documento' : 'Ver documento' }}\n                                    </div>\n                                    <div class=\"fad-portal-content-bold\" (click)=\"downloadDocumentFea(document)\">{{configuration.customization?.moduleCustomization?.legends?.download}}</div>\n                                </div>\n                                <div>\n                                    {{ document.doc?.pages }} {{configuration.customization?.moduleCustomization?.legends?.pages}}\n                                </div>\n                            </div>\n\n                            <ng-fad-signature-fea-pdf-viewer-fea\n                            *ngIf=\"document.isVisible  && document.doc?.file\"\n                            [file]=\"document.doc?.file\"\n                            [index]=\"i\"\n                            [id]=\"getDocumentId(document.id!)\"\n                            >\n                            </ng-fad-signature-fea-pdf-viewer-fea>\n                                \n                        </div>\n                    </ng-container>\n                </ng-container>\n                \n            </div>\n            \n        </div>\n    </ng-container>\n    <div class=\"fad-portal-content selector-document\">\n        <div class=\"document-status-bar\">\n            \n            <div *ngIf=\"getApprovedCount() === 0 && getRejectedCount() === 0\" class=\"document-status-message \">\n                Aprueba los documentos para firmarlos con tu e.firma\n            </div>\n    \n          \n            <div *ngIf=\"getApprovedCount() > 0 || getRejectedCount() > 0\" class=\"document-status-content\">\n                <div class=\"approve-all\">\n                    <ng-fad-image-inline \n                        [src]=\"approveAll ? images.active.approve : images.inactive.approve\"\n                        (click)=\"approveAllDocuments()\">\n                    </ng-fad-image-inline>\n                    <span (click)=\"approveAllDocuments()\">Aprobar todos los documentos ({{ documentsApprovalList.length }})</span>\n                </div>\n    \n                \n                <div class=\"document-counts\">\n                    <span *ngIf=\"getApprovedCount() > 0 && getRejectedCount() === 0\" class=\"fad-portal-informative-bold\">\n                        {{ getApprovedCount() }} documentos aprobados\n                    </span>\n                    <span *ngIf=\"getRejectedCount() > 0 && getApprovedCount() === 0\" class=\"fad-portal-informative-bold\">\n                        {{ getRejectedCount() }} documentos rechazados\n                    </span>\n                    \n                    <ng-container *ngIf=\"getApprovedCount() > 0 && getRejectedCount() > 0\" >\n                        <span  class=\"fad-portal-informative-bold\">\n                            {{ getApprovedCount() }} documentos aprobados\n                        </span>\n                        <span  class=\"fad-portal-informative-bold\">\n                            {{ getRejectedCount() }} documentos rechazados\n                        </span>\n                    </ng-container>\n                </div>\n    \n               \n                <button class=\"fad-portal-primary\" (click)=\"emitApprovedDocuments()\">Continuar</button>\n            </div>\n        </div>\n    </div>\n    \n\n", styles: [":host{box-sizing:border-box}:host .fad-portal-content{display:flex;flex-direction:column;justify-content:center;width:100%;box-sizing:border-box;margin-top:var(--fad-portal-common-separation-lg)}:host .fad-portal-content .header{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:#f5f5f5;border-radius:var(--fad-portal-common-input-border-radius);padding:var(--fad-portal-common-separation-md);overflow:hidden;box-sizing:border-box}:host .fad-portal-content .header div:nth-child(1){display:flex;flex-direction:column;row-gap:var(--fad-portal-common-separation-xs)}:host .fad-portal-content .header .info{color:var(--fad-portal-common-tertiary-color)}@media (max-width: 992px){:host .fad-portal-content .header{flex-direction:column;align-items:start;justify-content:center;row-gap:var(--fad-portal-common-separation-xs);margin-bottom:var(--fad-portal-common-separation-md)}}:host .fad-portal-content .documents-container{box-sizing:border-box}:host .fad-portal-content .documents-container .document{display:flex;align-items:center;flex-direction:column;width:100%;margin-top:var(--fad-portal-common-separation-md);border-radius:var(--fad-portal-common-input-border-radius);border:1px solid #f5f5f5}:host .fad-portal-content .documents-container .document .information{padding:var(--fad-portal-common-separation-md);display:flex;align-items:center;justify-content:space-between;width:100%}:host .fad-portal-content .documents-container .document .information .validate{padding-left:var(--fad-portal-common-separation-md);padding-right:var(--fad-portal-common-separation-md);display:flex;column-gap:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .information .document-name{padding-left:var(--fad-portal-common-separation-md);padding-right:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .actions{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:#f5f5f5;padding:var(--fad-portal-common-separation-md);box-sizing:border-box;border-radius:var(--fad-portal-common-input-border-radius);border-top-left-radius:0;border-top-right-radius:0}:host .fad-portal-content .documents-container .document .actions div:nth-child(1){display:flex;align-items:center;gap:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .actions div:nth-child(1) div{color:var(--fad-portal-common-primary-color)!important;cursor:pointer}:host .selector-document{width:100%;background-color:#262626;color:#fff;padding:var(--fad-portal-common-separation-md);margin-top:var(--fad-portal-common-separation-md);display:flex;align-items:center;justify-content:space-between;border-radius:var(--fad-portal-common-input-border-radius);box-sizing:border-box}:host .selector-document .document-status-message{display:flex;align-items:center;justify-content:center;width:100%;gap:var(--fad-portal-common-separation-md)}:host .selector-document .document-status-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;font-size:14px;box-sizing:border-box}:host .selector-document .document-status-bar .document-status-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;font-size:14px;box-sizing:border-box}:host .selector-document .document-status-bar .approve-all{display:flex;align-items:center;gap:10px;cursor:pointer;box-sizing:border-box}:host .selector-document .document-status-bar .approve-all span{cursor:pointer;-webkit-user-select:none;user-select:none}:host .selector-document .document-status-bar .document-counts{display:flex;flex-direction:column;gap:var(--fad-portal-common-separation-xs);box-sizing:border-box}:host .selector-document .document-status-bar .document-counts span{color:#fff}:host .selector-document .document-status-bar .fad-portal-primary{min-width:0px;width:50%}@media (max-width: 992px){:host .selector-document .document-status-bar .fad-portal-primary{width:100%;margin-top:var(--fad-portal-common-separation-md)}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgFadImageInlineComponent, selector: "ng-fad-image-inline", inputs: ["src"] }, { kind: "component", type: PdfViewerFeaComponent, selector: "ng-fad-signature-fea-pdf-viewer-fea", inputs: ["configuration", "file", "index", "id"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentApprovalListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-fad-signature-fea-document-approval-list', providers: [NgFadPdfReaderService], template: "\r\n    <ng-container *ngFor=\"let requisition of requisitionsFea\">\r\n        <div class=\"fad-portal-content\" >\r\n            <div class=\"header\" >\r\n                <div>\r\n                    <div class=\"fad-portal-title\">\r\n                        {{ requisition.name }} ({{requisition.documents.length}})\r\n                    </div>\r\n                    <div class=\"info\">\r\n                        {{configuration.customization?.moduleCustomization?.legends?.sendTo}} Alfredo Villanueva  {{ requisition.sendBy }}\r\n                    </div>\r\n                    <div class=\"info\">\r\n                        {{ requisition.sendByEmail }}\r\n                    </div>\r\n                </div>\r\n                <div class=\"requisition-id\">\r\n                    <div class=\"fad-portal-subtitle-bold\">ID {{ requisition.requisitionId }}</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"documents-container\">\r\n                <ng-container *ngFor=\"let document of documentsApprovalList\">\r\n                    <ng-container *ngIf=\"document.idRequisition === requisition.requisitionId\" >\r\n                        <div class=\"document\"  >\r\n                            <div class=\"information\" >\r\n                                <div class=\"document-name fad-portal-subtitle-bold\" >\r\n                                    {{ document.doc?.name }}\r\n                                </div>\r\n                                <div class=\"validate\">\r\n                                    \r\n                                    <ng-fad-image-inline \r\n                                            [src]=\"document.approved === false ? images.active.reject : images.inactive.reject\"\r\n                                            (click)=\"toggleRejection(document)\">\r\n                                    </ng-fad-image-inline>\r\n        \r\n                                       \r\n                                    <ng-fad-image-inline \r\n                                            [src]=\"document.approved === true ? images.active.approve : images.inactive.approve\"\r\n                                            (click)=\"toggleApproval(document)\">\r\n                                    </ng-fad-image-inline>\r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div class=\"actions\">\r\n                                <div>\r\n                                    <div class=\"fad-portal-subtitle-bold\" (click)=\"seeDocumentFea(document)\">\r\n                                        {{ document.isVisible ? 'Ocultar documento' : 'Ver documento' }}\r\n                                    </div>\r\n                                    <div class=\"fad-portal-subtitle-bold\" (click)=\"downloadDocumentFea(document)\">{{configuration.customization?.moduleCustomization?.legends?.download}}</div>\r\n                                </div>\r\n                                <div>\r\n                                    {{ document.doc?.pages }} {{configuration.customization?.moduleCustomization?.legends?.pages}}\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"pdf-viewer\" *ngIf=\"document.isVisible\"   [style.height.px]=\"1000\">\r\n                                <ng-fad-viewer-general-pdf-viewer\r\n                                  [pages]=\"pagesMap.get(document.id!) ?? []\"\r\n                                  (onpagechange)=\"onpagechange($event)\"\r\n                                  (onloadpage)=\"onloadpage($event)\">\r\n                                   \r\n                                  <ng-fad-viewer-pdf-mini-view\r\n                                    miniView\r\n                                    [configuration]=\"miniView\"\r\n                                    [pages]=\"pagesMap.get(document.id!) ?? []\"\r\n                                    [page]=\"page\"\r\n                                    (onpagechange)=\"scrollToPage($event)\">\r\n                                  </ng-fad-viewer-pdf-mini-view>\r\n                            \r\n                                </ng-fad-viewer-general-pdf-viewer>\r\n                            </div>\r\n                                \r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                \r\n            </div>\r\n            \r\n        </div>\r\n    </ng-container>\r\n    <div class=\"fad-portal-content selector-document\">\r\n        <div class=\"document-status-bar\">\r\n            \r\n            <div *ngIf=\"getApprovedCount() === 0 && getRejectedCount() === 0\" class=\"document-status-message \">\r\n                Aprueba los documentos para firmarlos con tu e.firma\r\n            </div>\r\n    \r\n          \r\n            <div *ngIf=\"getApprovedCount() > 0 || getRejectedCount() > 0\" class=\"document-status-content\">\r\n                <div class=\"approve-all\">\r\n                    <ng-fad-image-inline \r\n                        [src]=\"approveAll ? images.active.approve : images.inactive.approve\"\r\n                        (click)=\"approveAllDocuments()\">\r\n                    </ng-fad-image-inline>\r\n                    <span (click)=\"approveAllDocuments()\">Aprobar todos los documentos ({{ documentsApprovalList.length }})</span>\r\n                </div>\r\n    \r\n                \r\n                <div class=\"document-counts\">\r\n                    <span *ngIf=\"getApprovedCount() > 0 && getRejectedCount() === 0\" class=\"fad-portal-informative-bold\">\r\n                        {{ getApprovedCount() }} documentos aprobados\r\n                    </span>\r\n                    <span *ngIf=\"getRejectedCount() > 0 && getApprovedCount() === 0\" class=\"fad-portal-informative-bold\">\r\n                        {{ getRejectedCount() }} documentos rechazados\r\n                    </span>\r\n                    \r\n                    <ng-container *ngIf=\"getApprovedCount() > 0 && getRejectedCount() > 0\" >\r\n                        <span  class=\"fad-portal-informative-bold\">\r\n                            {{ getApprovedCount() }} documentos aprobados\r\n                        </span>\r\n                        <span  class=\"fad-portal-informative-bold\">\r\n                            {{ getRejectedCount() }} documentos rechazados\r\n                        </span>\r\n                    </ng-container>\r\n                </div>\r\n    \r\n               \r\n                <button class=\"fad-portal-primary\" (click)=\"emitApprovedDocuments()\">Continuar</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n\r\n", styles: [":host{box-sizing:border-box}:host .fad-portal-content{display:flex;flex-direction:column;justify-content:center;width:100%;box-sizing:border-box;margin-top:var(--fad-portal-common-separation-lg)}:host .fad-portal-content .header{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:#f5f5f5;border-radius:var(--fad-portal-common-input-border-radius);padding:var(--fad-portal-common-separation-md);overflow:hidden;box-sizing:border-box}:host .fad-portal-content .header div:nth-child(1){display:flex;flex-direction:column;row-gap:var(--fad-portal-common-separation-xs)}:host .fad-portal-content .header .info{color:var(--fad-portal-common-tertiary-color)}@media (max-width: 992px){:host .fad-portal-content .header{flex-direction:column;align-items:start;justify-content:center;row-gap:var(--fad-portal-common-separation-xs);margin-bottom:var(--fad-portal-common-separation-md)}}:host .fad-portal-content .documents-container{box-sizing:border-box}:host .fad-portal-content .documents-container .document{display:flex;align-items:center;flex-direction:column;width:100%;margin-top:var(--fad-portal-common-separation-md);border-radius:var(--fad-portal-common-input-border-radius);border:1px solid #f5f5f5}:host .fad-portal-content .documents-container .document .information{padding:var(--fad-portal-common-separation-md);display:flex;align-items:center;justify-content:space-between;width:100%}:host .fad-portal-content .documents-container .document .information .validate{padding-left:var(--fad-portal-common-separation-md);padding-right:var(--fad-portal-common-separation-md);display:flex;column-gap:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .information .document-name{padding-left:var(--fad-portal-common-separation-md);padding-right:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .actions{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:#f5f5f5;padding:var(--fad-portal-common-separation-md);box-sizing:border-box;border-radius:var(--fad-portal-common-input-border-radius);border-top-left-radius:0;border-top-right-radius:0}:host .fad-portal-content .documents-container .document .actions div:nth-child(1){display:flex;align-items:center;gap:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .actions div:nth-child(1) div{color:var(--fad-portal-common-primary-color)!important;cursor:pointer}:host .selector-document{width:100%;background-color:#262626;color:#fff;padding:var(--fad-portal-common-separation-md);margin-top:var(--fad-portal-common-separation-md);display:flex;align-items:center;justify-content:space-between;border-radius:var(--fad-portal-common-input-border-radius);box-sizing:border-box}:host .selector-document .document-status-message{display:flex;align-items:center;justify-content:center;width:100%;gap:var(--fad-portal-common-separation-md)}:host .selector-document .document-status-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;font-size:14px;box-sizing:border-box}:host .selector-document .document-status-bar .document-status-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;font-size:14px;box-sizing:border-box}:host .selector-document .document-status-bar .approve-all{display:flex;align-items:center;gap:10px;cursor:pointer;box-sizing:border-box}:host .selector-document .document-status-bar .approve-all span{cursor:pointer;-webkit-user-select:none;user-select:none}:host .selector-document .document-status-bar .document-counts{display:flex;flex-direction:column;gap:var(--fad-portal-common-separation-xs);box-sizing:border-box}:host .selector-document .document-status-bar .document-counts span{color:#fff}:host .selector-document .document-status-bar .fad-portal-primary{min-width:0px;width:50%}@media (max-width: 992px){:host .selector-document .document-status-bar .fad-portal-primary{width:100%;margin-top:var(--fad-portal-common-separation-md)}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.FadService }, { type: i0.ChangeDetectorRef }, { type: i2$2.NgFadPdfReaderService }]; }, propDecorators: { configuration: [{
+            args: [{ selector: 'ng-fad-signature-fea-document-approval-list', providers: [NgFadPdfReaderService], template: "\n    <ng-container *ngFor=\"let requisition of requisitionsFea\">\n        <div class=\"fad-portal-content\" >\n            <div class=\"header\" >\n                <div>\n                    <div class=\"fad-portal-title\">\n                        {{ requisition.name }} ({{requisition.documents.length}})\n                    </div>\n                    <div class=\"info\">\n                        {{configuration.customization?.moduleCustomization?.legends?.sendTo}} Alfredo Villanueva  {{ requisition.sendBy }}\n                    </div>\n                    <div class=\"info\">\n                        {{ requisition.sendByEmail }}\n                    </div>\n                </div>\n                <div class=\"requisition-id\">\n                    <div class=\"fad-portal-content-bold\">ID {{ requisition.requisitionId }}</div>\n                </div>\n            </div>\n            <div class=\"documents-container\">\n                <ng-container *ngFor=\"let document of documentsApprovalList; let i = index\">\n                    <ng-container *ngIf=\"document.idRequisition === requisition.requisitionId\" >\n                        <div class=\"document\"  >\n                            <div class=\"information\" >\n                                <div class=\"document-name fad-portal-content-bold\" >\n                                    {{ document.doc?.name }}\n                                </div>\n                                <div class=\"validate\">\n                                    \n                                    <ng-fad-image-inline \n                                            [src]=\"document.approved === false ? images.active.reject : images.inactive.reject\"\n                                            (click)=\"toggleRejection(document)\">\n                                    </ng-fad-image-inline>\n        \n                                       \n                                    <ng-fad-image-inline \n                                            [src]=\"document.approved === true ? images.active.approve : images.inactive.approve\"\n                                            (click)=\"toggleApproval(document)\">\n                                    </ng-fad-image-inline>\n                                </div>\n                                \n                            </div>\n                            <div class=\"actions\">\n                                <div>\n                                    <div class=\"fad-portal-content-bold\" (click)=\"seeDocumentFea(document)\">\n                                        {{ document.isVisible ? 'Ocultar documento' : 'Ver documento' }}\n                                    </div>\n                                    <div class=\"fad-portal-content-bold\" (click)=\"downloadDocumentFea(document)\">{{configuration.customization?.moduleCustomization?.legends?.download}}</div>\n                                </div>\n                                <div>\n                                    {{ document.doc?.pages }} {{configuration.customization?.moduleCustomization?.legends?.pages}}\n                                </div>\n                            </div>\n\n                            <ng-fad-signature-fea-pdf-viewer-fea\n                            *ngIf=\"document.isVisible  && document.doc?.file\"\n                            [file]=\"document.doc?.file\"\n                            [index]=\"i\"\n                            [id]=\"getDocumentId(document.id!)\"\n                            >\n                            </ng-fad-signature-fea-pdf-viewer-fea>\n                                \n                        </div>\n                    </ng-container>\n                </ng-container>\n                \n            </div>\n            \n        </div>\n    </ng-container>\n    <div class=\"fad-portal-content selector-document\">\n        <div class=\"document-status-bar\">\n            \n            <div *ngIf=\"getApprovedCount() === 0 && getRejectedCount() === 0\" class=\"document-status-message \">\n                Aprueba los documentos para firmarlos con tu e.firma\n            </div>\n    \n          \n            <div *ngIf=\"getApprovedCount() > 0 || getRejectedCount() > 0\" class=\"document-status-content\">\n                <div class=\"approve-all\">\n                    <ng-fad-image-inline \n                        [src]=\"approveAll ? images.active.approve : images.inactive.approve\"\n                        (click)=\"approveAllDocuments()\">\n                    </ng-fad-image-inline>\n                    <span (click)=\"approveAllDocuments()\">Aprobar todos los documentos ({{ documentsApprovalList.length }})</span>\n                </div>\n    \n                \n                <div class=\"document-counts\">\n                    <span *ngIf=\"getApprovedCount() > 0 && getRejectedCount() === 0\" class=\"fad-portal-informative-bold\">\n                        {{ getApprovedCount() }} documentos aprobados\n                    </span>\n                    <span *ngIf=\"getRejectedCount() > 0 && getApprovedCount() === 0\" class=\"fad-portal-informative-bold\">\n                        {{ getRejectedCount() }} documentos rechazados\n                    </span>\n                    \n                    <ng-container *ngIf=\"getApprovedCount() > 0 && getRejectedCount() > 0\" >\n                        <span  class=\"fad-portal-informative-bold\">\n                            {{ getApprovedCount() }} documentos aprobados\n                        </span>\n                        <span  class=\"fad-portal-informative-bold\">\n                            {{ getRejectedCount() }} documentos rechazados\n                        </span>\n                    </ng-container>\n                </div>\n    \n               \n                <button class=\"fad-portal-primary\" (click)=\"emitApprovedDocuments()\">Continuar</button>\n            </div>\n        </div>\n    </div>\n    \n\n", styles: [":host{box-sizing:border-box}:host .fad-portal-content{display:flex;flex-direction:column;justify-content:center;width:100%;box-sizing:border-box;margin-top:var(--fad-portal-common-separation-lg)}:host .fad-portal-content .header{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:#f5f5f5;border-radius:var(--fad-portal-common-input-border-radius);padding:var(--fad-portal-common-separation-md);overflow:hidden;box-sizing:border-box}:host .fad-portal-content .header div:nth-child(1){display:flex;flex-direction:column;row-gap:var(--fad-portal-common-separation-xs)}:host .fad-portal-content .header .info{color:var(--fad-portal-common-tertiary-color)}@media (max-width: 992px){:host .fad-portal-content .header{flex-direction:column;align-items:start;justify-content:center;row-gap:var(--fad-portal-common-separation-xs);margin-bottom:var(--fad-portal-common-separation-md)}}:host .fad-portal-content .documents-container{box-sizing:border-box}:host .fad-portal-content .documents-container .document{display:flex;align-items:center;flex-direction:column;width:100%;margin-top:var(--fad-portal-common-separation-md);border-radius:var(--fad-portal-common-input-border-radius);border:1px solid #f5f5f5}:host .fad-portal-content .documents-container .document .information{padding:var(--fad-portal-common-separation-md);display:flex;align-items:center;justify-content:space-between;width:100%}:host .fad-portal-content .documents-container .document .information .validate{padding-left:var(--fad-portal-common-separation-md);padding-right:var(--fad-portal-common-separation-md);display:flex;column-gap:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .information .document-name{padding-left:var(--fad-portal-common-separation-md);padding-right:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .actions{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:#f5f5f5;padding:var(--fad-portal-common-separation-md);box-sizing:border-box;border-radius:var(--fad-portal-common-input-border-radius);border-top-left-radius:0;border-top-right-radius:0}:host .fad-portal-content .documents-container .document .actions div:nth-child(1){display:flex;align-items:center;gap:var(--fad-portal-common-separation-md)}:host .fad-portal-content .documents-container .document .actions div:nth-child(1) div{color:var(--fad-portal-common-primary-color)!important;cursor:pointer}:host .selector-document{width:100%;background-color:#262626;color:#fff;padding:var(--fad-portal-common-separation-md);margin-top:var(--fad-portal-common-separation-md);display:flex;align-items:center;justify-content:space-between;border-radius:var(--fad-portal-common-input-border-radius);box-sizing:border-box}:host .selector-document .document-status-message{display:flex;align-items:center;justify-content:center;width:100%;gap:var(--fad-portal-common-separation-md)}:host .selector-document .document-status-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;font-size:14px;box-sizing:border-box}:host .selector-document .document-status-bar .document-status-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;font-size:14px;box-sizing:border-box}:host .selector-document .document-status-bar .approve-all{display:flex;align-items:center;gap:10px;cursor:pointer;box-sizing:border-box}:host .selector-document .document-status-bar .approve-all span{cursor:pointer;-webkit-user-select:none;user-select:none}:host .selector-document .document-status-bar .document-counts{display:flex;flex-direction:column;gap:var(--fad-portal-common-separation-xs);box-sizing:border-box}:host .selector-document .document-status-bar .document-counts span{color:#fff}:host .selector-document .document-status-bar .fad-portal-primary{min-width:0px;width:50%}@media (max-width: 992px){:host .selector-document .document-status-bar .fad-portal-primary{width:100%;margin-top:var(--fad-portal-common-separation-md)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$2.FadService }, { type: i0.ChangeDetectorRef }, { type: i1.NgFadPdfReaderService }]; }, propDecorators: { configuration: [{
                 type: Input
             }], rfc: [{
                 type: Input
@@ -582,9 +633,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], onerror: [{
                 type: Output
-            }], generalPdfViewerComponent: [{
-                type: ViewChild,
-                args: [GeneralPdfViewerComponent]
             }] } });
 
 class UploadESignatureComponent {
@@ -804,13 +852,13 @@ class UploadESignatureComponent {
         Utils.setVariableCss('--fad-signature-fea-e-signature-file-border-radius', this.configuration.customization?.moduleCustomization?.style?.file?.borderRadius, { targetElement });
         Utils.setVariableCss('--fad-signature-fea-e-signature-file-img-background-color', this.configuration.customization?.moduleCustomization?.style?.file?.img?.backgroundColor, { targetElement });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadESignatureComponent, deps: [{ token: i0.ElementRef }, { token: i1.FormBuilder }, { token: i2$1.FadService }, { token: i2$1.MifielService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadESignatureComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FormBuilder }, { token: i2$2.FadService }, { token: i2$2.MifielService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadESignatureComponent, selector: "ng-fad-signature-fea-upload-e-signature", inputs: { configuration: "configuration", documents: "documents", signerId: "signerId", rfc: "rfc" }, outputs: { onerror: "onerror", onloader: "onloader", oncomplete: "oncomplete" }, ngImport: i0, template: "<ng-container *ngIf=\"showComponent\">\r\n  <div>\r\n    <div *ngIf=\"documents.length > 1\" class=\"fad-portal-title-bold\">{{ documentPluralTitle }}</div>\r\n    <div *ngIf=\"documents.length === 1\" class=\"fad-portal-title-bold\">{{ documentSingularTitle }}</div>\r\n\r\n    <div class=\"container-document fad-portal-content\">\r\n      <div *ngFor=\"let i of documents\" class=\"document\">\r\n        <div>{{ i.doc.name }}</div>\r\n        <div class=\"status fad-portal-content-bold\">{{ i.approved ? configuration.customization?.moduleCustomization?.legends?.documents?.status?.approved :  configuration.customization?.moduleCustomization?.legends?.documents?.status?.rejected }}</div>\r\n        <div class=\"pages\">{{ i.doc.pages }} {{ i.doc.pages > 1 ? configuration.customization?.moduleCustomization?.legends?.documents?.pages?.plural : configuration.customization?.moduleCustomization?.legends?.documents?.pages?.singular }}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!allIsRejected()\">\r\n    <div class=\"fad-portal-title-bold\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.title }}</div>\r\n\r\n    <div>\r\n      <div class=\"container-instruction-file\">\r\n        <div class=\"fad-portal-content\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.cer?.label }}</div>\r\n        <div *ngIf=\"cer?.value\" class=\"fad-portal-content select-file\" (click)=\"openFilePicker(fileCerInput)\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.upload }}</div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"!cer?.value\"\r\n        class=\"container-upload\"\r\n        (click)=\"openFilePicker(fileCerInput)\"\r\n        dragDropDocument\r\n        [formatList]=\"formatCerList\"\r\n        [acceptMultipleFiles]=\"false\"\r\n        (onfiledropped)=\"onfiledropped($event, 'cer')\"\r\n        (onerror)=\"onerrorDirective($event, 'cer')\">\r\n        <div class=\"fad-portal-content instruction\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.cer?.instruction }}</div>\r\n        <div class=\"fad-portal-content-bold upload-btn\">\r\n          <ng-fad-image-inline [src]=\"uploadImg\"></ng-fad-image-inline>\r\n          <span>{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.cer?.upload }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"cer?.value\" class=\"container-file\">\r\n        <div class=\"document-img\">\r\n          <img [src]=\"fileImg\" alt=\"\">\r\n        </div>\r\n        <div class=\"fad-portal-content\">{{ cer?.value.name }}</div>\r\n      </div>\r\n\r\n      <input type=\"file\" accept=\".cer\" #fileCerInput style=\"display: none\" (change)=\"onFileChange($event, 'cer')\">\r\n    </div>\r\n\r\n    <div>\r\n      <div class=\"container-instruction-file\">\r\n        <div class=\"fad-portal-content\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.key?.label }}</div>\r\n        <div *ngIf=\"key?.value\" class=\"fad-portal-content select-file\" (click)=\"openFilePicker(fileKeyInput)\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.upload }}</div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"!key?.value\"\r\n        class=\"container-upload\"\r\n        (click)=\"openFilePicker(fileKeyInput)\"\r\n        dragDropDocument\r\n        [formatList]=\"formatKeyList\"\r\n        [acceptMultipleFiles]=\"false\"\r\n        (onfiledropped)=\"onfiledropped($event, 'key')\"\r\n        (onerror)=\"onerrorDirective($event, 'key')\">\r\n\r\n        <div class=\"fad-portal-content instruction\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.key?.instruction }}</div>\r\n        <div class=\"fad-portal-content-bold upload-btn\">\r\n          <ng-fad-image-inline [src]=\"uploadImg\"></ng-fad-image-inline>\r\n          <span>{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.key?.upload }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"key?.value\" class=\"container-file\">\r\n        <div class=\"document-img\">\r\n          <img [src]=\"fileImg\" alt=\"\">\r\n        </div>\r\n        <div class=\"fad-portal-content\">{{ key?.value.name }}</div>\r\n      </div>\r\n\r\n      <input type=\"file\" accept=\".key\" #fileKeyInput style=\"display: none\" (change)=\"onFileChange($event, 'key')\">\r\n    </div>\r\n\r\n    <div class=\"fad-portal-container-input\">\r\n      <label class=\"fad-portal-content\" for=\"\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.password?.label }}</label>\r\n      <div class=\"input-password\">\r\n        <input [type]=\"passwordInputType\" (input)=\"savePassword($event)\">\r\n        <div class=\"fad-portal-content-bold password-show\">\r\n          <div *ngIf=\"passwordInputType === 'text'\" (click)=\"changePaswordInputType()\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.password?.hide }}</div>\r\n          <div *ngIf=\"passwordInputType === 'password'\" (click)=\"changePaswordInputType()\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.password?.show }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n  <div></div>\r\n\r\n  <div class=\"fad-portal-content container-confirm\">\r\n    <div *ngIf=\"!allIsRejected()\" (click)=\"isValidated = !isValidated\">\r\n      <div>\r\n        <ng-fad-image-inline *ngIf=\"isValidated\" [src]=\"checkOnImg\"></ng-fad-image-inline>\r\n        <ng-fad-image-inline *ngIf=\"!isValidated\" [src]=\"checkOffImg\"></ng-fad-image-inline>\r\n      </div>\r\n      <div *ngIf=\"documents.length === 1\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.validate?.singular }}</div>\r\n      <div *ngIf=\"documents.length > 1\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.validate?.plural }}</div>\r\n    </div>\r\n\r\n    <div></div>\r\n\r\n    <div class=\"action\">\r\n      <button type=\"button\" *ngIf=\"documents.length === 1 && !allIsRejected()\" class=\"fad-portal-primary\" [disabled]=\"!form.valid || !isValidated\" (click)=\"signDocuments()\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.button?.sign?.singular }}</button>\r\n      <button type=\"button\" *ngIf=\"documents.length > 1 && !allIsRejected()\" class=\"fad-portal-primary\" [disabled]=\"!form.valid || !isValidated\" (click)=\"signDocuments()\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.button?.sign?.plural }}</button>\r\n      <button type=\"button\" *ngIf=\"documents.length === 1 && allIsRejected()\" class=\"fad-portal-primary\" (click)=\"onRejectDocument()\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.button?.reject?.singular }}</button>\r\n      <button type=\"button\" *ngIf=\"documents.length > 1 && allIsRejected()\" class=\"fad-portal-primary\" (click)=\"onRejectDocument()\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.button?.reject?.plural }}</button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;gap:var(--fad-portal-common-separation-md)}:host .container-document{display:flex;flex-direction:column;width:100%;background-color:var(--fad-signature-fea-e-signature-documents-background-color);border-radius:var(--fad-signature-fea-e-signature-documents-border-radius);padding:var(--fad-portal-common-separation-md);box-sizing:border-box;margin-top:var(--fad-portal-common-separation-xs)}:host .container-document .document{display:flex;gap:var(--fad-portal-common-separation-md);justify-content:space-between;border-bottom:1px solid var(--fad-portal-common-border-color);padding:var(--fad-portal-common-separation-md) 0}:host .container-document .document>div{flex:1}:host .container-document .document .status{text-align:center}:host .container-document .document .pages{text-align:end;color:var(--fad-portal-common-legends-secondary)}:host .document:only-child{border-bottom:none!important}:host .container-instruction-file{display:flex;gap:var(--fad-portal-common-separation-md);justify-content:space-between}:host .container-instruction-file .select-file{color:var(--fad-portal-common-primary-color);cursor:pointer}:host .container-upload{width:100%;box-sizing:border-box;border-radius:var(--fad-signature-fea-e-signature-upload-border-radius);border:var(--fad-signature-fea-e-signature-upload-border);padding:var(--fad-portal-common-separation-md);margin-top:var(--fad-portal-common-separation-xs);display:flex;flex-direction:column;gap:var(--fad-portal-common-separation-xs);align-items:center;justify-content:center;text-align:center;background-color:var(--fad-signature-fea-e-signature-upload-background-color)}:host .container-upload .instruction{color:var(--fad-portal-common-legends-secondary)}:host .container-upload .upload-btn{max-width:90%;width:300px;box-sizing:border-box;background-color:var(--fad-signature-fea-e-signature-upload-button-background-color);border-radius:var(--fad-signature-fea-e-signature-upload-button-border-radius);color:var(--fad-portal-common-legends-tertiary);padding:var(--fad-portal-common-separation-xs);cursor:pointer;transition:all .2s ease-out;display:flex;align-items:center;justify-content:center;text-align:center;gap:var(--fad-portal-common-separation-xs)}:host .container-upload .upload-btn:hover{background-color:var(--fad-signature-fea-e-signature-upload-button-hover)}:host .container-file{display:flex;gap:var(--fad-portal-common-separation-md);align-items:center;padding:var(--fad-portal-common-separation-md);border:2px solid var(--fad-portal-common-successful-color);height:71px;border-radius:var(--fad-signature-fea-e-signature-file-border-radius);margin-top:var(--fad-portal-common-separation-xs)}:host .container-file .document-img{background-color:var(--fad-signature-fea-e-signature-file-img-background-color);width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center}:host .container-file .document-img img{width:60%;max-width:100%;max-height:100%}:host .fad-portal-container-input .input-password{position:relative}:host .fad-portal-container-input .input-password input{padding-right:100px}:host .fad-portal-container-input .input-password .password-show{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--fad-portal-common-legends-secondary);cursor:pointer}:host .container-confirm{display:flex;justify-content:space-between;align-items:center;gap:var(--fad-portal-common-separation-xs)}:host .container-confirm>div:first-child{display:flex;gap:var(--fad-portal-common-separation-xs)}:host .container-confirm>div:first-child>div:first-child{width:25px;height:25px}:host .container-confirm .action{max-width:80%;width:400px}:host .container-confirm ng-fad-image-inline{cursor:pointer}@media (max-width: 992px){:host .container-document .document{flex-direction:column;gap:var(--fad-portal-common-separation-xs)}:host .container-document .document .status,:host .container-document .document .pages{text-align:start!important}:host .container-confirm{flex-direction:column}:host .container-confirm .action{max-width:100%;width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DragDropDocumentDirective, selector: "[dragDropDocument]", inputs: ["formatList", "acceptMultipleFiles"], outputs: ["onfiledropped", "onerror"] }, { kind: "component", type: i4.NgFadImageInlineComponent, selector: "ng-fad-image-inline", inputs: ["src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadESignatureComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-fad-signature-fea-upload-e-signature', template: "<ng-container *ngIf=\"showComponent\">\r\n  <div>\r\n    <div *ngIf=\"documents.length > 1\" class=\"fad-portal-title-bold\">{{ documentPluralTitle }}</div>\r\n    <div *ngIf=\"documents.length === 1\" class=\"fad-portal-title-bold\">{{ documentSingularTitle }}</div>\r\n\r\n    <div class=\"container-document fad-portal-content\">\r\n      <div *ngFor=\"let i of documents\" class=\"document\">\r\n        <div>{{ i.doc.name }}</div>\r\n        <div class=\"status fad-portal-content-bold\">{{ i.approved ? configuration.customization?.moduleCustomization?.legends?.documents?.status?.approved :  configuration.customization?.moduleCustomization?.legends?.documents?.status?.rejected }}</div>\r\n        <div class=\"pages\">{{ i.doc.pages }} {{ i.doc.pages > 1 ? configuration.customization?.moduleCustomization?.legends?.documents?.pages?.plural : configuration.customization?.moduleCustomization?.legends?.documents?.pages?.singular }}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!allIsRejected()\">\r\n    <div class=\"fad-portal-title-bold\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.title }}</div>\r\n\r\n    <div>\r\n      <div class=\"container-instruction-file\">\r\n        <div class=\"fad-portal-content\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.cer?.label }}</div>\r\n        <div *ngIf=\"cer?.value\" class=\"fad-portal-content select-file\" (click)=\"openFilePicker(fileCerInput)\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.upload }}</div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"!cer?.value\"\r\n        class=\"container-upload\"\r\n        (click)=\"openFilePicker(fileCerInput)\"\r\n        dragDropDocument\r\n        [formatList]=\"formatCerList\"\r\n        [acceptMultipleFiles]=\"false\"\r\n        (onfiledropped)=\"onfiledropped($event, 'cer')\"\r\n        (onerror)=\"onerrorDirective($event, 'cer')\">\r\n        <div class=\"fad-portal-content instruction\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.cer?.instruction }}</div>\r\n        <div class=\"fad-portal-content-bold upload-btn\">\r\n          <ng-fad-image-inline [src]=\"uploadImg\"></ng-fad-image-inline>\r\n          <span>{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.cer?.upload }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"cer?.value\" class=\"container-file\">\r\n        <div class=\"document-img\">\r\n          <img [src]=\"fileImg\" alt=\"\">\r\n        </div>\r\n        <div class=\"fad-portal-content\">{{ cer?.value.name }}</div>\r\n      </div>\r\n\r\n      <input type=\"file\" accept=\".cer\" #fileCerInput style=\"display: none\" (change)=\"onFileChange($event, 'cer')\">\r\n    </div>\r\n\r\n    <div>\r\n      <div class=\"container-instruction-file\">\r\n        <div class=\"fad-portal-content\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.key?.label }}</div>\r\n        <div *ngIf=\"key?.value\" class=\"fad-portal-content select-file\" (click)=\"openFilePicker(fileKeyInput)\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.upload }}</div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"!key?.value\"\r\n        class=\"container-upload\"\r\n        (click)=\"openFilePicker(fileKeyInput)\"\r\n        dragDropDocument\r\n        [formatList]=\"formatKeyList\"\r\n        [acceptMultipleFiles]=\"false\"\r\n        (onfiledropped)=\"onfiledropped($event, 'key')\"\r\n        (onerror)=\"onerrorDirective($event, 'key')\">\r\n\r\n        <div class=\"fad-portal-content instruction\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.key?.instruction }}</div>\r\n        <div class=\"fad-portal-content-bold upload-btn\">\r\n          <ng-fad-image-inline [src]=\"uploadImg\"></ng-fad-image-inline>\r\n          <span>{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.key?.upload }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"key?.value\" class=\"container-file\">\r\n        <div class=\"document-img\">\r\n          <img [src]=\"fileImg\" alt=\"\">\r\n        </div>\r\n        <div class=\"fad-portal-content\">{{ key?.value.name }}</div>\r\n      </div>\r\n\r\n      <input type=\"file\" accept=\".key\" #fileKeyInput style=\"display: none\" (change)=\"onFileChange($event, 'key')\">\r\n    </div>\r\n\r\n    <div class=\"fad-portal-container-input\">\r\n      <label class=\"fad-portal-content\" for=\"\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.password?.label }}</label>\r\n      <div class=\"input-password\">\r\n        <input [type]=\"passwordInputType\" (input)=\"savePassword($event)\">\r\n        <div class=\"fad-portal-content-bold password-show\">\r\n          <div *ngIf=\"passwordInputType === 'text'\" (click)=\"changePaswordInputType()\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.password?.hide }}</div>\r\n          <div *ngIf=\"passwordInputType === 'password'\" (click)=\"changePaswordInputType()\">{{ configuration.customization?.moduleCustomization?.legends?.eSignature?.password?.show }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n  <div></div>\r\n\r\n  <div class=\"fad-portal-content container-confirm\">\r\n    <div *ngIf=\"!allIsRejected()\" (click)=\"isValidated = !isValidated\">\r\n      <div>\r\n        <ng-fad-image-inline *ngIf=\"isValidated\" [src]=\"checkOnImg\"></ng-fad-image-inline>\r\n        <ng-fad-image-inline *ngIf=\"!isValidated\" [src]=\"checkOffImg\"></ng-fad-image-inline>\r\n      </div>\r\n      <div *ngIf=\"documents.length === 1\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.validate?.singular }}</div>\r\n      <div *ngIf=\"documents.length > 1\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.validate?.plural }}</div>\r\n    </div>\r\n\r\n    <div></div>\r\n\r\n    <div class=\"action\">\r\n      <button type=\"button\" *ngIf=\"documents.length === 1 && !allIsRejected()\" class=\"fad-portal-primary\" [disabled]=\"!form.valid || !isValidated\" (click)=\"signDocuments()\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.button?.sign?.singular }}</button>\r\n      <button type=\"button\" *ngIf=\"documents.length > 1 && !allIsRejected()\" class=\"fad-portal-primary\" [disabled]=\"!form.valid || !isValidated\" (click)=\"signDocuments()\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.button?.sign?.plural }}</button>\r\n      <button type=\"button\" *ngIf=\"documents.length === 1 && allIsRejected()\" class=\"fad-portal-primary\" (click)=\"onRejectDocument()\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.button?.reject?.singular }}</button>\r\n      <button type=\"button\" *ngIf=\"documents.length > 1 && allIsRejected()\" class=\"fad-portal-primary\" (click)=\"onRejectDocument()\">{{ configuration.customization?.moduleCustomization?.legends?.sign?.button?.reject?.plural }}</button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column;gap:var(--fad-portal-common-separation-md)}:host .container-document{display:flex;flex-direction:column;width:100%;background-color:var(--fad-signature-fea-e-signature-documents-background-color);border-radius:var(--fad-signature-fea-e-signature-documents-border-radius);padding:var(--fad-portal-common-separation-md);box-sizing:border-box;margin-top:var(--fad-portal-common-separation-xs)}:host .container-document .document{display:flex;gap:var(--fad-portal-common-separation-md);justify-content:space-between;border-bottom:1px solid var(--fad-portal-common-border-color);padding:var(--fad-portal-common-separation-md) 0}:host .container-document .document>div{flex:1}:host .container-document .document .status{text-align:center}:host .container-document .document .pages{text-align:end;color:var(--fad-portal-common-legends-secondary)}:host .document:only-child{border-bottom:none!important}:host .container-instruction-file{display:flex;gap:var(--fad-portal-common-separation-md);justify-content:space-between}:host .container-instruction-file .select-file{color:var(--fad-portal-common-primary-color);cursor:pointer}:host .container-upload{width:100%;box-sizing:border-box;border-radius:var(--fad-signature-fea-e-signature-upload-border-radius);border:var(--fad-signature-fea-e-signature-upload-border);padding:var(--fad-portal-common-separation-md);margin-top:var(--fad-portal-common-separation-xs);display:flex;flex-direction:column;gap:var(--fad-portal-common-separation-xs);align-items:center;justify-content:center;text-align:center;background-color:var(--fad-signature-fea-e-signature-upload-background-color)}:host .container-upload .instruction{color:var(--fad-portal-common-legends-secondary)}:host .container-upload .upload-btn{max-width:90%;width:300px;box-sizing:border-box;background-color:var(--fad-signature-fea-e-signature-upload-button-background-color);border-radius:var(--fad-signature-fea-e-signature-upload-button-border-radius);color:var(--fad-portal-common-legends-tertiary);padding:var(--fad-portal-common-separation-xs);cursor:pointer;transition:all .2s ease-out;display:flex;align-items:center;justify-content:center;text-align:center;gap:var(--fad-portal-common-separation-xs)}:host .container-upload .upload-btn:hover{background-color:var(--fad-signature-fea-e-signature-upload-button-hover)}:host .container-file{display:flex;gap:var(--fad-portal-common-separation-md);align-items:center;padding:var(--fad-portal-common-separation-md);border:2px solid var(--fad-portal-common-successful-color);height:71px;border-radius:var(--fad-signature-fea-e-signature-file-border-radius);margin-top:var(--fad-portal-common-separation-xs)}:host .container-file .document-img{background-color:var(--fad-signature-fea-e-signature-file-img-background-color);width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center}:host .container-file .document-img img{width:60%;max-width:100%;max-height:100%}:host .fad-portal-container-input .input-password{position:relative}:host .fad-portal-container-input .input-password input{padding-right:100px}:host .fad-portal-container-input .input-password .password-show{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--fad-portal-common-legends-secondary);cursor:pointer}:host .container-confirm{display:flex;justify-content:space-between;align-items:center;gap:var(--fad-portal-common-separation-xs)}:host .container-confirm>div:first-child{display:flex;gap:var(--fad-portal-common-separation-xs)}:host .container-confirm>div:first-child>div:first-child{width:25px;height:25px}:host .container-confirm .action{max-width:80%;width:400px}:host .container-confirm ng-fad-image-inline{cursor:pointer}@media (max-width: 992px){:host .container-document .document{flex-direction:column;gap:var(--fad-portal-common-separation-xs)}:host .container-document .document .status,:host .container-document .document .pages{text-align:start!important}:host .container-confirm{flex-direction:column}:host .container-confirm .action{max-width:100%;width:100%!important}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FormBuilder }, { type: i2$1.FadService }, { type: i2$1.MifielService }]; }, propDecorators: { configuration: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.FormBuilder }, { type: i2$2.FadService }, { type: i2$2.MifielService }]; }, propDecorators: { configuration: [{
                 type: Input
             }], documents: [{
                 type: Input
@@ -835,11 +883,11 @@ class GenericErrorFeaComponent {
         this.configuration = Utils.mergeConfiguration(new Configuration(), GENERIC_ERROR_FEA_CONFIGURATION_DEFAULT, this.configuration);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenericErrorFeaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GenericErrorFeaComponent, selector: "ng-fad-signature-fea-generic-error-fea", inputs: { configuration: "configuration", title: "title", instruction: "instruction" }, ngImport: i0, template: "<ng-fad-image-inline [src]=\"errorIgm\"></ng-fad-image-inline>\n<div class=\"fad-portal-title-bold\">{{ title ? title : configuration.customization?.moduleCustomization?.legends?.title }}</div>\n<div class=\"fad-portal-content\">{{ instruction ? instruction : configuration.customization?.moduleCustomization?.legends?.instruction }}</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--fad-portal-common-separation-md)}\n"], dependencies: [{ kind: "component", type: i4.NgFadImageInlineComponent, selector: "ng-fad-image-inline", inputs: ["src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GenericErrorFeaComponent, selector: "ng-fad-signature-fea-generic-error-fea", inputs: { configuration: "configuration", title: "title", instruction: "instruction" }, ngImport: i0, template: "<ng-fad-image-inline [src]=\"errorIgm\"></ng-fad-image-inline>\r\n<div class=\"fad-portal-title-bold\">{{ title ? title : configuration.customization?.moduleCustomization?.legends?.title }}</div>\r\n<div class=\"fad-portal-content\">{{ instruction ? instruction : configuration.customization?.moduleCustomization?.legends?.instruction }}</div>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--fad-portal-common-separation-md)}\n"], dependencies: [{ kind: "component", type: i4.NgFadImageInlineComponent, selector: "ng-fad-image-inline", inputs: ["src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenericErrorFeaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-fad-signature-fea-generic-error-fea', template: "<ng-fad-image-inline [src]=\"errorIgm\"></ng-fad-image-inline>\n<div class=\"fad-portal-title-bold\">{{ title ? title : configuration.customization?.moduleCustomization?.legends?.title }}</div>\n<div class=\"fad-portal-content\">{{ instruction ? instruction : configuration.customization?.moduleCustomization?.legends?.instruction }}</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--fad-portal-common-separation-md)}\n"] }]
+            args: [{ selector: 'ng-fad-signature-fea-generic-error-fea', template: "<ng-fad-image-inline [src]=\"errorIgm\"></ng-fad-image-inline>\r\n<div class=\"fad-portal-title-bold\">{{ title ? title : configuration.customization?.moduleCustomization?.legends?.title }}</div>\r\n<div class=\"fad-portal-content\">{{ instruction ? instruction : configuration.customization?.moduleCustomization?.legends?.instruction }}</div>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--fad-portal-common-separation-md)}\n"] }]
         }], propDecorators: { configuration: [{
                 type: Input
             }], title: [{
@@ -894,13 +942,13 @@ class ValidateSignatureComponent {
     setCustomizationStyle(targetElement = document.documentElement) {
         this.configuration = Utils.mergeConfiguration(new Configuration(), VALIDATE_SIGNATURE_CONFIGURATION_DEFAULT, this.configuration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidateSignatureComponent, deps: [{ token: i2$1.FadService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidateSignatureComponent, deps: [{ token: i2$2.FadService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValidateSignatureComponent, selector: "ng-fad-signature-fea-validate-signature", inputs: { configuration: "configuration", signerId: "signerId", requisitionId: "requisitionId" }, outputs: { onloader: "onloader", onerror: "onerror", oncomplete: "oncomplete", onsigned: "onsigned" }, ngImport: i0, template: "", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidateSignatureComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-fad-signature-fea-validate-signature', template: "" }]
-        }], ctorParameters: function () { return [{ type: i2$1.FadService }]; }, propDecorators: { configuration: [{
+        }], ctorParameters: function () { return [{ type: i2$2.FadService }]; }, propDecorators: { configuration: [{
                 type: Input
             }], signerId: [{
                 type: Input
@@ -916,21 +964,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+const SIGNATURE_SUMMARY_DEFAULT = {
+    dateFormat: 'es-MX',
+    customization: {
+        moduleCustomization: {
+            style: {},
+            legends: {
+                signed: "Documentos firmados",
+                rejected: "Documentos rechazados",
+                legend: "Te hemos enviado el resumen del proceso y el documento firmado a tu correo electrónico",
+                documentRejected: "Documento rechazado"
+            }
+        }
+    },
+    pathDependencies: {
+        imageDirectory: 'assets/images/fad-signature-fea/signature-summary/',
+    }
+};
+
+class SignatureSummaryComponent {
+    constructor(hostContext) {
+        this.hostContext = hostContext;
+        this.oncomplete = new EventEmitter();
+        this.images = {
+            reject: '',
+            send: ''
+        };
+        this.signedCount = 0;
+        this.rejectedCount = 0;
+        this.isAllDocumentsRejected = true;
+        this.currentDate = '';
+        this.id = '';
+        this.pdfsName = '';
+    }
+    ngOnInit() {
+        console.log(this.documentRequest);
+        this.setCustomizationStyle(this.hostContext.nativeElement);
+        if (this.configuration?.pathDependencies?.imageDirectory) {
+            this.images.reject = this.configuration.pathDependencies?.images?.reject ?? `${this.configuration.pathDependencies.imageDirectory}/rejected.svg`;
+            this.images.send = this.configuration.pathDependencies?.images?.send ?? `${this.configuration.pathDependencies.imageDirectory}/send.svg`;
+        }
+        this.updateDocumentCounts();
+        this.getPdfNames();
+        this.setCurrentDate();
+    }
+    setCurrentDate() {
+        const now = new Date();
+        let hours = now.getHours();
+        const minutes = now.getMinutes();
+        const amPm = hours >= 12 ? 'PM' : 'AM';
+        hours = hours % 12 || 12;
+        const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
+        this.currentDate = `${now.toLocaleDateString(this.configuration.dateFormat)} | ${hours}:${formattedMinutes} ${amPm}`;
+    }
+    updateDocumentCounts() {
+        // Contar documentos firmados (approved: true)
+        this.documentRequest.forEach((doc) => {
+            this.id = doc.id;
+            if (doc.approved) {
+                this.signedCount += 1;
+            }
+            else {
+                this.rejectedCount += 1;
+            }
+        });
+        console.log(this.documentRequest, this.signedCount, this.rejectedCount);
+        if (this.signedCount > 0) {
+            this.isAllDocumentsRejected = false;
+        }
+        else {
+            this.isAllDocumentsRejected = true;
+        }
+    }
+    getPdfNames() {
+        let currentFlag = '';
+        let previewFlag = '';
+        this.documentRequest.forEach((doc) => {
+            if (this.pdfsName === '') {
+                this.pdfsName = doc.doc?.name.replace('.pdf', '');
+                currentFlag = doc.idRequisition;
+                previewFlag = doc.idRequisition;
+            }
+            currentFlag = doc.idRequisition;
+            if (currentFlag !== previewFlag) {
+                this.pdfsName += ',' + doc.doc?.name.replace('.pdf', '');
+                currentFlag = doc.idRequisition;
+                previewFlag = doc.idRequisition;
+            }
+        });
+    }
+    setCustomizationStyle(targetElement = document.documentElement) {
+        this.configuration = Utils.mergeConfiguration(new Configuration(), SIGNATURE_SUMMARY_DEFAULT, this.configuration);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureSummaryComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SignatureSummaryComponent, selector: "ng-fad-signature-fea-signature-summary", inputs: { documentRequest: "documentRequest", configuration: "configuration" }, outputs: { oncomplete: "oncomplete" }, ngImport: i0, template: "<div class=\"fad-portal-content\">\n    \n    <ng-container *ngIf=\"!isAllDocumentsRejected\" >\n            <ng-fad-image-inline\n            [src]=\"images.send\"\n            >\n            </ng-fad-image-inline>\n            <div class=\"fad-portal-title-bold\">\n                {{pdfsName}}\n            </div>\n            <div class=\"fad-portal-content-bold date\">{{ currentDate }}</div>\n            <div class=\"summary\">\n                <div class=\"fad-portal-content-bold signeds\">\n                    <div>{{configuration.customization?.moduleCustomization?.legends?.signed}}</div>\n                    <div>{{signedCount}}</div>\n                </div>\n                <div class=\"line\">\n\n                </div>\n                <div class=\"fad-portal-content-bold rejecteds\">\n                    <div>{{configuration.customization?.moduleCustomization?.legends?.rejected}}</div>\n                    <div>{{rejectedCount}}</div>\n                </div>\n            </div>\n            <div class=\"legends\">\n                {{configuration.customization?.moduleCustomization?.legends?.legend}}\n            </div>\n    </ng-container>\n    <ng-container *ngIf=\"isAllDocumentsRejected\" >\n        <ng-fad-image-inline\n        [src]=\"images.reject\"\n        >\n        </ng-fad-image-inline>\n        <div class=\"document-rejected\"> {{configuration.customization?.moduleCustomization?.legends?.documentRejected}} </div>\n        <div class=\"fad-portal-title-bold title-document\">\n            {{pdfsName}}\n        </div>\n        <div class=\"id-requisition\">\n            ID {{id}} | {{ currentDate }}\n        </div>\n    </ng-container>\n    \n</div>", styles: [".fad-portal-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.fad-portal-content .fad-portal-title{margin-top:var(--fad-portal-common-separation-sm);margin-bottom:var(--fad-portal-common-separation-sm)}.fad-portal-content .date{color:#aaa}.fad-portal-content .summary{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;row-gap:var(--fad-portal-common-separation-sm);margin-bottom:var(--fad-portal-common-separation-xs)}.fad-portal-content .summary .signeds,.fad-portal-content .summary .rejecteds{width:100%;display:flex;justify-content:space-between}.fad-portal-content .summary .line{width:100%;border:1px solid var(--fad-portal-common-border-color)}.fad-portal-content .legends{text-align:center}.fad-portal-content .document-rejected{color:#aaa;margin-bottom:var(--fad-portal-common-separation-sm)}.fad-portal-content .id-requisition{color:#aaa;margin-top:var(--fad-portal-common-separation-sm)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgFadImageInlineComponent, selector: "ng-fad-image-inline", inputs: ["src"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-fad-signature-fea-signature-summary', template: "<div class=\"fad-portal-content\">\n    \n    <ng-container *ngIf=\"!isAllDocumentsRejected\" >\n            <ng-fad-image-inline\n            [src]=\"images.send\"\n            >\n            </ng-fad-image-inline>\n            <div class=\"fad-portal-title-bold\">\n                {{pdfsName}}\n            </div>\n            <div class=\"fad-portal-content-bold date\">{{ currentDate }}</div>\n            <div class=\"summary\">\n                <div class=\"fad-portal-content-bold signeds\">\n                    <div>{{configuration.customization?.moduleCustomization?.legends?.signed}}</div>\n                    <div>{{signedCount}}</div>\n                </div>\n                <div class=\"line\">\n\n                </div>\n                <div class=\"fad-portal-content-bold rejecteds\">\n                    <div>{{configuration.customization?.moduleCustomization?.legends?.rejected}}</div>\n                    <div>{{rejectedCount}}</div>\n                </div>\n            </div>\n            <div class=\"legends\">\n                {{configuration.customization?.moduleCustomization?.legends?.legend}}\n            </div>\n    </ng-container>\n    <ng-container *ngIf=\"isAllDocumentsRejected\" >\n        <ng-fad-image-inline\n        [src]=\"images.reject\"\n        >\n        </ng-fad-image-inline>\n        <div class=\"document-rejected\"> {{configuration.customization?.moduleCustomization?.legends?.documentRejected}} </div>\n        <div class=\"fad-portal-title-bold title-document\">\n            {{pdfsName}}\n        </div>\n        <div class=\"id-requisition\">\n            ID {{id}} | {{ currentDate }}\n        </div>\n    </ng-container>\n    \n</div>", styles: [".fad-portal-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.fad-portal-content .fad-portal-title{margin-top:var(--fad-portal-common-separation-sm);margin-bottom:var(--fad-portal-common-separation-sm)}.fad-portal-content .date{color:#aaa}.fad-portal-content .summary{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;row-gap:var(--fad-portal-common-separation-sm);margin-bottom:var(--fad-portal-common-separation-xs)}.fad-portal-content .summary .signeds,.fad-portal-content .summary .rejecteds{width:100%;display:flex;justify-content:space-between}.fad-portal-content .summary .line{width:100%;border:1px solid var(--fad-portal-common-border-color)}.fad-portal-content .legends{text-align:center}.fad-portal-content .document-rejected{color:#aaa;margin-bottom:var(--fad-portal-common-separation-sm)}.fad-portal-content .id-requisition{color:#aaa;margin-top:var(--fad-portal-common-separation-sm)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { documentRequest: [{
+                type: Input
+            }], configuration: [{
+                type: Input
+            }], oncomplete: [{
+                type: Output
+            }] } });
+
 class NgFadSignatureFeaModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgFadSignatureFeaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgFadSignatureFeaModule, declarations: [ValidateRfcComponent,
             DocumentApprovalListComponent,
             UploadESignatureComponent,
+            PdfViewerFeaComponent,
             GenericErrorFeaComponent,
-            ValidateSignatureComponent], imports: [CommonModule,
+            ValidateSignatureComponent,
+            SignatureSummaryComponent], imports: [CommonModule,
             ReactiveFormsModule,
             NgFadSharedModule,
             NgFadImageInlineModule,
             NgFadViewerModule], exports: [ValidateRfcComponent,
             DocumentApprovalListComponent,
             UploadESignatureComponent,
+            PdfViewerFeaComponent,
             GenericErrorFeaComponent,
-            ValidateSignatureComponent] }); }
+            ValidateSignatureComponent,
+            SignatureSummaryComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgFadSignatureFeaModule, imports: [CommonModule,
             ReactiveFormsModule,
             NgFadSharedModule,
@@ -944,8 +1102,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ValidateRfcComponent,
                         DocumentApprovalListComponent,
                         UploadESignatureComponent,
+                        PdfViewerFeaComponent,
                         GenericErrorFeaComponent,
-                        ValidateSignatureComponent
+                        ValidateSignatureComponent,
+                        SignatureSummaryComponent
                     ],
                     imports: [
                         CommonModule,
@@ -958,8 +1118,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ValidateRfcComponent,
                         DocumentApprovalListComponent,
                         UploadESignatureComponent,
+                        PdfViewerFeaComponent,
                         GenericErrorFeaComponent,
-                        ValidateSignatureComponent
+                        ValidateSignatureComponent,
+                        SignatureSummaryComponent
                     ]
                 }]
         }] });
@@ -972,5 +1134,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DOCUMENT_APPROVAL_LIST_DEFAULT, DocumentApprovalListComponent, DocumentApprovalListErrorCode, GENERIC_ERROR_FEA_CONFIGURATION_DEFAULT, GenericErrorFeaComponent, GenericErrorFeaErrorCode, NgFadSignatureFeaModule, SIGNATURE_FEA_CONFIGURATION_DEFAULT, UPLOAD_E_SIGNATURE_CONFIGURATION_DEFAULT, UploadESignatureComponent, UploadESignatureErrorCode, VALIDATE_SIGNATURE_CONFIGURATION_DEFAULT, ValidateRFCErrorCode, ValidateRfcComponent, ValidateSignatureComponent, ValidateSignatureErrorCode, getDocumentApprovalListErrorDescription, getGenericErrorFeaErrorDescription, getUploadESignatureErrorDescription, getValidateRFCErrorDescription, getValidateSignatureErrorDescription };
+export { DOCUMENT_APPROVAL_LIST_DEFAULT, DocumentApprovalListComponent, DocumentApprovalListErrorCode, GENERIC_ERROR_FEA_CONFIGURATION_DEFAULT, GenericErrorFeaComponent, GenericErrorFeaErrorCode, NgFadSignatureFeaModule, PDF_VIEWER_FEA_DEFAULT, PdfViewerFeaComponent, SIGNATURE_FEA_CONFIGURATION_DEFAULT, SignatureSummaryComponent, UPLOAD_E_SIGNATURE_CONFIGURATION_DEFAULT, UploadESignatureComponent, UploadESignatureErrorCode, VALIDATE_SIGNATURE_CONFIGURATION_DEFAULT, ValidateRFCErrorCode, ValidateRfcComponent, ValidateSignatureComponent, ValidateSignatureErrorCode, getDocumentApprovalListErrorDescription, getGenericErrorFeaErrorDescription, getUploadESignatureErrorDescription, getValidateRFCErrorDescription, getValidateSignatureErrorDescription };
 //# sourceMappingURL=fad-producto-portal-ng-fad-signature-fea.mjs.map