@qbs-sign/sign-lib 2.1.26

package/fesm2022/qbs-sign-sign-lib.mjs

@@ -0,0 +1,871 @@
+import * as i0 from '@angular/core';
+import { Injectable, Pipe, Input, ViewChild, Component, EventEmitter, Output, NgModule } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i5 from 'ng2-pdf-viewer';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+import * as i7 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+class SignLibService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignLibService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignLibService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class StateService {
+    // Default instance for backward compatibility
+    get config() {
+        return this.getConfig('default');
+    }
+    get config$() {
+        return this.getConfig$('default');
+    }
+    get notification() {
+        return this.getNotification('default');
+    }
+    getConfig(instanceId = 'default') {
+        if (!this.configs.has(instanceId)) {
+            this.configs.set(instanceId, { ...this.defaultConfig });
+        }
+        return this.configs.get(instanceId);
+    }
+    getConfig$(instanceId = 'default') {
+        if (!this.configSources.has(instanceId)) {
+            const config = this.getConfig(instanceId);
+            this.configSources.set(instanceId, new BehaviorSubject(config));
+        }
+        return this.configSources.get(instanceId).asObservable();
+    }
+    getNotification(instanceId = 'default') {
+        if (!this.notificationSources.has(instanceId)) {
+            this.notificationSources.set(instanceId, new BehaviorSubject(''));
+        }
+        return this.notificationSources.get(instanceId).asObservable();
+    }
+    configSet(config, instanceId = 'default') {
+        this.configs.set(instanceId, config);
+        if (!this.configSources.has(instanceId)) {
+            this.configSources.set(instanceId, new BehaviorSubject(config));
+        }
+        else {
+            this.configSources.get(instanceId).next(config);
+        }
+        // If this config has translations, share them with ALL instances
+        if (config.LabelTranslations && config.LabelTranslations.length > 0) {
+            // Share with all existing instances
+            for (const [id, existingConfig] of this.configs.entries()) {
+                if (id !== instanceId &&
+                    (!existingConfig.LabelTranslations ||
+                        existingConfig.LabelTranslations.length === 0)) {
+                    existingConfig.LabelTranslations = [...config.LabelTranslations];
+                    this.configSources.get(id)?.next(existingConfig);
+                }
+            }
+        }
+    }
+    notify(notification, instanceId = 'default') {
+        if (!this.notificationSources.has(instanceId)) {
+            this.notificationSources.set(instanceId, new BehaviorSubject(notification));
+        }
+        else {
+            this.notificationSources.get(instanceId).next(notification);
+        }
+    }
+    constructor() {
+        this.defaultConfig = {
+            InputConfig: {
+                AppDataId: '',
+                PhoneNumber: '',
+                StepId: '',
+                Token: '',
+                BaseUrl: '',
+                SignMode: 'client',
+                AutoSign: false,
+            },
+            UrisConfig: {
+                QualifiedSmsApiUrl: '/web/evrotrust/doc-sign/send-otp',
+                QualifiedSignApiUrl: '/web/evrotrust/doc-sign/otp',
+                SmsApiUrl: '/web/doc-sign/send-otp',
+                SignApiUrl: '/web/doc-sign/otp',
+                DocsApiUrl: '/web/doc-sign/view',
+                AutoSignApiUrl: '/web/doc-sign/auto',
+                LabelsApiUrl: '/public/infrastructure/labels',
+            },
+            HeaderBackgroundColor: '#fffff',
+            HeaderLogo: 'https://placeholderlogo.com/img/placeholder-logo-1.png',
+            Show15DaysAgreement: true,
+            OrderId: '',
+            FirstName: '',
+            LastName: '',
+            PhoneNumber: '',
+            PDFs: [],
+            CallbackURL: '',
+            RedirectURL: '',
+            LabelTranslations: [],
+        };
+        // Instance-scoped configs
+        this.configs = new Map();
+        this.configSources = new Map();
+        this.notificationSources = new Map();
+    }
+    get data() {
+        return JSON.parse(localStorage.getItem('data') || '{}');
+    }
+    set data(value) {
+        localStorage.setItem('data', JSON.stringify(value));
+    }
+    // Cleanup method to remove instance data when no longer needed
+    cleanupInstance(instanceId) {
+        this.configs.delete(instanceId);
+        this.configSources.get(instanceId)?.complete();
+        this.configSources.delete(instanceId);
+        this.notificationSources.get(instanceId)?.complete();
+        this.notificationSources.delete(instanceId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: StateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+function smoothScroll(target, duration) {
+    const start = window.scrollY;
+    const targetPosition = target.getBoundingClientRect().top + start;
+    const distance = targetPosition - start;
+    let startTime = null;
+    function animation(currentTime) {
+        if (startTime === null)
+            startTime = currentTime;
+        const timeElapsed = currentTime - startTime;
+        const run = ease(timeElapsed, start, distance, duration);
+        window.scrollTo(0, run);
+        if (timeElapsed < duration)
+            requestAnimationFrame(animation);
+    }
+    function ease(t, b, c, d) {
+        t /= d / 2;
+        if (t < 1)
+            return c / 2 * t * t + b;
+        t--;
+        return -c / 2 * (t * (t - 2) - 1) + b;
+    }
+    requestAnimationFrame(animation);
+}
+
+class LabelKeys {
+    constructor() {
+        this.DocumentOf = 'signComponent.viewfiles.documentOf';
+        this.NoSignedDocs = 'signComponent.viewfiles.noSignedDocs';
+        this.Agreement = 'signComponent.viewfiles.agreement';
+        this.Sign = 'signComponent.viewfiles.sign';
+        this.SendCode = 'signComponent.viewfiles.sendCode';
+        this.PhoneNumber = 'signComponent.viewfiles.phoneNumber';
+        this.FirstName = 'signComponent.viewfiles.firstName';
+        this.LastName = 'signComponent.viewfiles.lastName';
+        this.Confirm = 'signComponent.viewfiles.confirm';
+        this.CheckCode = 'signComponent.viewfiles.checkCode';
+        this.InsertCode = 'signComponent.viewfiles.insertCode';
+        this.SignDocuments = 'signComponent.viewfiles.signDocuments';
+        this.InvalidCode = 'signComponent.viewfiles.invalidCode';
+        this.Success = 'signComponent.viewfiles.success';
+    }
+}
+
+class BaseService {
+    getHeaders(instanceId) {
+        const configToUse = this.state.getConfig(instanceId || this.instanceId);
+        return new HttpHeaders({
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${configToUse.InputConfig.Token}`,
+        });
+    }
+    // Keep backward compatibility
+    get headers() {
+        return this.getHeaders();
+    }
+    constructor(http, state) {
+        this.http = http;
+        this.state = state;
+        this.instanceId = 'default';
+    }
+    setInstanceId(instanceId) {
+        this.instanceId = instanceId;
+    }
+}
+
+class OtpService extends BaseService {
+    constructor(http, state) {
+        super(http, state);
+    }
+    sendOTP(documentId, instanceId) {
+        const configToUse = this.state.getConfig(instanceId || this.instanceId);
+        let url = configToUse.InputConfig.BaseUrl;
+        if (configToUse.InputConfig.SignQualified) {
+            url += configToUse.UrisConfig.QualifiedSmsApiUrl;
+        }
+        else {
+            url += configToUse.UrisConfig.SmsApiUrl;
+        }
+        const body = {
+            appDataId: configToUse.InputConfig.AppDataId,
+            stepId: configToUse.InputConfig.StepId,
+            documentId: documentId,
+            phoneNumber: configToUse.PhoneNumber,
+        };
+        return this.http.post(url, body, {
+            headers: this.getHeaders(instanceId),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OtpService, deps: [{ token: i1.HttpClient }, { token: StateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OtpService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OtpService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: StateService }] });
+
+class SignService extends BaseService {
+    constructor(http, state) {
+        super(http, state);
+    }
+    signPDF(pdfId, otpCode, instanceId) {
+        const configToUse = this.state.getConfig(instanceId || this.instanceId);
+        let url = configToUse.InputConfig.BaseUrl;
+        if (configToUse.InputConfig.SignQualified) {
+            url += configToUse.UrisConfig.QualifiedSignApiUrl;
+        }
+        else {
+            url += configToUse.UrisConfig.SignApiUrl;
+        }
+        const body = {
+            appDataId: configToUse.InputConfig.AppDataId,
+            stepId: configToUse.InputConfig.StepId,
+            documentId: pdfId,
+            otp: otpCode,
+            phoneNumber: configToUse.PhoneNumber,
+            signMode: configToUse.InputConfig.SignMode,
+            ipAddress: '0.0.0.0',
+        };
+        return this.http.post(url, body, {
+            headers: this.getHeaders(instanceId),
+        });
+    }
+    autoSignPdfs(instanceId) {
+        const configToUse = this.state.getConfig(instanceId || this.instanceId);
+        const url = `${configToUse.InputConfig.BaseUrl}${configToUse.UrisConfig.AutoSignApiUrl}`;
+        const body = {
+            appDataId: configToUse.InputConfig.AppDataId,
+            stepId: configToUse.InputConfig.StepId,
+            signMode: configToUse.InputConfig.SignMode
+        };
+        return this.http.post(url, body, {
+            headers: this.getHeaders(instanceId),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignService, deps: [{ token: i1.HttpClient }, { token: StateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: StateService }] });
+
+class DocumentService extends BaseService {
+    constructor(http, state) {
+        super(http, state);
+    }
+    getDocumentsToBeSigned(instanceId) {
+        const configToUse = this.state.getConfig(instanceId || this.instanceId);
+        const url = `${configToUse.InputConfig.BaseUrl}${configToUse.UrisConfig.DocsApiUrl}`;
+        const body = {
+            appDataId: configToUse.InputConfig.AppDataId,
+            stepId: configToUse.InputConfig.StepId,
+        };
+        return this.http.post(url, body, { headers: this.getHeaders(instanceId) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DocumentService, deps: [{ token: i1.HttpClient }, { token: StateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DocumentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DocumentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: StateService }] });
+
+class LabelsService {
+    constructor(http, state) {
+        this.http = http;
+        this.state = state;
+    }
+    getLabels(instanceId) {
+        const configToUse = this.state.getConfig(instanceId || 'default');
+        return this.http.get(`${configToUse.InputConfig.BaseUrl}${configToUse.UrisConfig.LabelsApiUrl}?AppSiteId=SignComponent`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LabelsService, deps: [{ token: i1.HttpClient }, { token: StateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LabelsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LabelsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: StateService }] });
+
+class TranslatePipe {
+    constructor(stateService, labelsService, cdr) {
+        this.stateService = stateService;
+        this.labelsService = labelsService;
+        this.cdr = cdr;
+        this.isLoading = false;
+        this.config = this.stateService.config;
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    ngOnInit() {
+        this.subscription = this.stateService.config$.subscribe((config) => {
+            this.config = config;
+        });
+    }
+    loadLabelsIfNecessary() {
+        if (this.config.LabelTranslations.length === 0 && this.isLoading === false) {
+            if (this.config.InputConfig.BaseUrl) {
+                this.isLoading = true;
+                this.labelsService.getLabels('default').subscribe((labels) => {
+                    this.config.LabelTranslations = labels;
+                    this.isLoading = false;
+                    // Update the default config
+                    this.stateService.configSet(this.config, 'default');
+                    this.cdr.detectChanges();
+                }, (error) => {
+                    console.error('🔷 TranslatePipe: Failed to load translation labels:', error);
+                    this.isLoading = false;
+                });
+            }
+            else {
+                console.warn('🔷 TranslatePipe: No BaseUrl available for loading translations');
+            }
+        }
+    }
+    transform(value, args) {
+        this.loadLabelsIfNecessary();
+        var translatedValue = this.config.LabelTranslations.find((t) => t.labelName == value)?.labelValue;
+        if (!translatedValue) {
+            return value;
+        }
+        if (args?.length && args?.length > 0) {
+            args.forEach((arg, index) => {
+                translatedValue = translatedValue.replace(`{${index}}`, arg);
+            });
+        }
+        return translatedValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TranslatePipe, deps: [{ token: StateService }, { token: LabelsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: TranslatePipe, isStandalone: false, name: "translate", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translate',
+                    pure: false,
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: StateService }, { type: LabelsService }, { type: i0.ChangeDetectorRef }] });
+
+class ViewFilesComponent {
+    constructor(cdr, state, otpService, signService, documentService) {
+        this.cdr = cdr;
+        this.state = state;
+        this.otpService = otpService;
+        this.signService = signService;
+        this.documentService = documentService;
+        this.instanceId = 'default';
+        this.currentIndex = 0;
+        this.showPdfContainer = false;
+        this.showCodeContainer = false;
+        this.showCodeError = false;
+        this.showPhoneError = false;
+        this.showSendCodeError = false;
+        this.otpFlow = false;
+        this.isPhoneNumberDisabled = true;
+        this.isFirstNameProvided = false;
+        this.isLastNameProvided = false;
+        this.codeSent = false;
+        this.scrollPending = false;
+        this.labelKeys = new LabelKeys();
+        this.otpCode = '';
+        this.currentPdf = '';
+        this.isLoading = false;
+        this.isSigningDocument = false;
+        this.isSendingCode = false;
+        this.showSuccessSigned = false;
+        this.showNoSignedDocuments = false;
+        this.showErrorSigned = false;
+        this.hasInitialized = false;
+        this.documentsLoadingInProgress = false;
+        this.lastInstanceId = '';
+        // Don't initialize config here - instanceId is not set yet by Angular
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        // Cleanup instance data when component is destroyed
+        if (this.lastInstanceId) {
+            this.state.cleanupInstance(this.lastInstanceId);
+        }
+    }
+    ngOnInit() {
+        if (this.config &&
+            this.config.InputConfig.Styles &&
+            typeof this.config.InputConfig.Styles.buttonStyles !== 'object') {
+            throw new Error(`Invalid config.InputConfig.Styles.buttonStyles: Expected an object.\n\nExample usage:\nconfig = {\n  ...,\n  InputConfig: {\n    Styles: {\n      buttonStyles: {\n        backgroundColor: '#b9193f',\n        color: '#1a1818',\n        border: '6px solid',\n        borderColor: '#bf3929',\n        borderRadius: '12px',\n        padding: '10px 30px',\n        fontFamily: 'Trebuchet MS, sans-serif',\n        fontSize: '16px',\n        letterSpacing: '0px',\n        width: 'auto',\n        height: 'auto',\n        minWidth: '80px',\n        minHeight: 'fit-content',\n        maxWidth: 'fit-content',\n        maxHeight: 'fit-content'\n      }\n    }\n  }\n}\n`);
+        }
+        // Check if instanceId has changed - if so, reset initialization
+        if (this.lastInstanceId !== this.instanceId) {
+            // Clean up previous instance if it exists
+            if (this.lastInstanceId) {
+                this.state.cleanupInstance(this.lastInstanceId);
+                if (this.subscription) {
+                    this.subscription.unsubscribe();
+                }
+            }
+            // Reset initialization state for new instance
+            this.hasInitialized = false;
+            this.lastInstanceId = this.instanceId;
+            // Reset component state
+            this.resetComponentState();
+        }
+        if (this.hasInitialized)
+            return;
+        this.hasInitialized = true;
+        // Now instanceId is properly set by Angular's @Input
+        this.config = this.state.getConfig(this.instanceId);
+        this.isPhoneNumberDisabled = this.config.PhoneNumber ? true : false;
+        this.isFirstNameProvided = !!this.config.FirstName;
+        this.isLastNameProvided = !!this.config.LastName;
+        // Set up subscription to config changes for this instance
+        this.subscription = this.state
+            .getConfig$(this.instanceId)
+            .subscribe(async (config) => {
+            if (!config)
+                return;
+            this.config = config;
+            this.isPhoneNumberDisabled = this.config.PhoneNumber ? true : false;
+            this.isFirstNameProvided = !!this.config.FirstName;
+            this.isLastNameProvided = !!this.config.LastName;
+            if (this.config.InputConfig?.AppDataId &&
+                this.config.InputConfig?.StepId) {
+                if (this.config.InputConfig.AutoSign) {
+                    this.otpFlow = false;
+                    this.showPdfContainer = false;
+                    this.proceedSigning();
+                }
+                else {
+                    this.loadDocuments();
+                }
+            }
+            else {
+                this.resetLoadingState();
+            }
+        });
+        // Initial check for existing config
+        if (this.config?.InputConfig?.AppDataId &&
+            this.config?.InputConfig?.StepId) {
+            this.loadDocuments();
+        }
+        else {
+            this.resetLoadingState();
+        }
+    }
+    resetComponentState() {
+        // Reset all component state variables
+        this.currentIndex = 0;
+        this.showPdfContainer = false;
+        this.showCodeContainer = false;
+        this.showCodeError = false;
+        this.showPhoneError = false;
+        this.showSendCodeError = false;
+        this.otpFlow = false;
+        this.codeSent = false;
+        this.scrollPending = false;
+        this.otpCode = '';
+        this.currentPdf = '';
+        this.isLoading = false;
+        this.isSigningDocument = false;
+        this.isSendingCode = false;
+        this.showSuccessSigned = false;
+        this.showNoSignedDocuments = false;
+        this.showErrorSigned = false;
+        this.documentsLoadingInProgress = false;
+    }
+    resetLoadingState() {
+        this.isLoading = false;
+        this.documentsLoadingInProgress = false;
+        this.cdr.markForCheck();
+    }
+    loadDocuments() {
+        // Prevent multiple simultaneous loads
+        if (this.documentsLoadingInProgress) {
+            return;
+        }
+        // Reset error states
+        this.showNoSignedDocuments = false;
+        this.showErrorSigned = false;
+        this.documentsLoadingInProgress = true;
+        this.isLoading = true;
+        this.cdr.markForCheck();
+        // Add timeout to prevent infinite loading
+        const loadingTimeout = setTimeout(() => {
+            console.error('🔷 ViewFilesComponent: Loading timeout - forcing reset');
+            this.resetLoadingState();
+            this.showNoSignedDocuments = true;
+        }, 30000);
+        try {
+            if (!this.config.PDFs || this.config.PDFs.length === 0) {
+                this.documentService.getDocumentsToBeSigned(this.instanceId).subscribe({
+                    next: (docsToSign) => {
+                        clearTimeout(loadingTimeout);
+                        this.resetLoadingState();
+                        if (docsToSign && docsToSign.length > 0) {
+                            this.config.PDFs = this.convertToSignDocuments(docsToSign);
+                            this.showPdfContainer = true;
+                            this.refreshCurrentPDF();
+                            this.otpFlow = true;
+                            this.showNoSignedDocuments = false;
+                        }
+                        else {
+                            this.showPdfContainer = false;
+                            this.showNoSignedDocuments = true;
+                        }
+                        // Force change detection
+                        setTimeout(() => {
+                            this.cdr.detectChanges();
+                        }, 100);
+                    },
+                    error: (error) => {
+                        clearTimeout(loadingTimeout);
+                        console.error('🔷 ViewFilesComponent: Error fetching documents:', error);
+                        this.resetLoadingState();
+                        this.showPdfContainer = false;
+                        this.showNoSignedDocuments = true;
+                        this.cdr.markForCheck();
+                    },
+                });
+            }
+            else {
+                clearTimeout(loadingTimeout);
+                // Documents already loaded
+                this.resetLoadingState();
+                this.showPdfContainer = this.config.PDFs.length > 0;
+                if (this.showPdfContainer) {
+                    this.refreshCurrentPDF();
+                    this.otpFlow = true;
+                }
+                else {
+                    this.showNoSignedDocuments = true;
+                }
+                this.cdr.markForCheck();
+            }
+        }
+        catch (ex) {
+            clearTimeout(loadingTimeout);
+            console.error('🔷 ViewFilesComponent: Exception in loadDocuments:', ex);
+            this.resetLoadingState();
+            this.showPdfContainer = false;
+            this.showNoSignedDocuments = true;
+            this.cdr.markForCheck();
+        }
+    }
+    convertToSignDocuments(documents) {
+        return documents.map((d) => {
+            return {
+                id: d.id,
+                name: d.name,
+                data: d.data,
+                pdfData: this.getB64ForSrc(d.data),
+                isSigned: false,
+                isAgreementChecked: this.config.InputConfig.ShowConfirm == false,
+            };
+        });
+    }
+    ngAfterViewChecked() {
+        if (this.scrollPending && this.codeContainer) {
+            smoothScroll(this.codeContainer.nativeElement, 300);
+            this.scrollPending = false;
+        }
+    }
+    nextPdf() {
+        if (this.currentIndex < this.config.PDFs.length - 1) {
+            this.currentIndex++;
+            this.refreshCurrentPDF();
+        }
+    }
+    previousPdf() {
+        if (this.currentIndex > 0) {
+            this.currentIndex--;
+            this.refreshCurrentPDF();
+        }
+    }
+    refreshCurrentPDF() {
+        this.currentPdf = this.config.PDFs[this.currentIndex].pdfData;
+    }
+    proceedSigning() {
+        if (this.otpFlow) {
+            if (!this.config.PDFs[this.currentIndex].isAgreementChecked) {
+                return;
+            }
+            this.showCodeContainer = true;
+            // If phone is pre-provided, skip to send code directly
+            // Otherwise show the form so user can enter phone (and name if needed)
+            if (this.isPhoneNumberDisabled) {
+                this.codeSent = true;
+                this.sendCode();
+            }
+            else {
+                this.codeSent = false;
+            }
+        }
+        else {
+            if (!this.isSigningDocument) {
+                this.showPdfContainer = false;
+                this.isSigningDocument = true;
+                this.signService.autoSignPdfs(this.instanceId).subscribe({
+                    next: (data) => {
+                        this.isSigningDocument = false;
+                        if (data && data.length > 0) {
+                            this.showSuccessSigned = true;
+                        }
+                        else {
+                            this.showNoSignedDocuments = true;
+                        }
+                        this.state.notify('success', this.instanceId);
+                    },
+                    error: (err) => {
+                        this.isSigningDocument = false;
+                        this.showErrorSigned = true;
+                    },
+                });
+            }
+        }
+    }
+    get canSendCode() {
+        return !!this.config.PhoneNumber;
+    }
+    sendCode() {
+        this.isSendingCode = true;
+        this.showCodeError = false;
+        this.showSendCodeError = false;
+        this.showPhoneError = false;
+        if (this.config.PhoneNumber) {
+            const docId = this.config.PDFs[this.currentIndex].id;
+            if (docId) {
+                this.otpService.sendOTP(docId, this.instanceId).subscribe({
+                    next: () => {
+                        this.isSendingCode = false;
+                        this.codeSent = true;
+                    },
+                    error: (err) => {
+                        this.isSendingCode = false;
+                        this.showSendCodeError = true;
+                        console.error('Error sending code', err);
+                    },
+                });
+            }
+        }
+        else {
+            this.isSendingCode = false;
+            this.showPhoneError = true;
+        }
+    }
+    retrySendCode() {
+        this.showSendCodeError = false;
+        this.showPhoneError = false;
+    }
+    signDocuments() {
+        this.showCodeError = false;
+        this.showErrorSigned = false;
+        if (this.otpCode) {
+            this.isSigningDocument = true;
+            this.signService
+                .signPDF(this.config.PDFs[this.currentIndex].id, this.otpCode, this.instanceId)
+                .subscribe({
+                next: (data) => {
+                    this.isSigningDocument = false;
+                    this.otpCode = '';
+                    this.showCodeError = false;
+                    // Mark all documents as signed
+                    this.config.PDFs.forEach((i) => (i.isSigned = true));
+                    // If all documents are signed mark as success
+                    if (!this.config.PDFs.find((d) => !d.isSigned)) {
+                        this.showSuccessSigned = true;
+                        this.state.notify('success', this.instanceId);
+                    }
+                    this.showCodeContainer = false;
+                },
+                error: (err) => {
+                    this.isSigningDocument = false;
+                    if (err && err.status === 498) {
+                        this.showCodeError = true;
+                    }
+                    else {
+                        this.showErrorSigned = true;
+                    }
+                },
+            });
+        }
+        else {
+            this.showCodeError = true;
+        }
+    }
+    getB64ForSrc(b64Value) {
+        return `data:application/pdf;base64,${b64Value}`;
+    }
+    retry() {
+        this.showCodeContainer = true;
+        this.codeSent = false;
+        this.showPhoneError = false;
+        this.showCodeError = false;
+        this.showErrorSigned = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ViewFilesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: StateService }, { token: OtpService }, { token: SignService }, { token: DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ViewFilesComponent, isStandalone: false, selector: "lib-view-files", inputs: { instanceId: "instanceId" }, viewQueries: [{ propertyName: "codeContainer", first: true, predicate: ["codeContainer"], descendants: true }], ngImport: i0, template: "<!-- Loading State -->\n<div class=\"loading-section\" *ngIf=\"isLoading === true\">\n  <div class=\"loading-spinner\"></div>\n  <p class=\"loading-text\">{{ \"loading\" | translate }}...</p>\n</div>\n\n<!-- Signing Document State -->\n<div class=\"loading-section\" *ngIf=\"isSigningDocument === true\">\n  <div class=\"loading-spinner\"></div>\n  <p class=\"loading-text\">\n    {{ \"signComponent.viewfiles.signingDocuments\" | translate }}...\n  </p>\n</div>\n\n<div *ngIf=\"isLoading === false\">\n  <!-- PDF Viewer -->\n  <div *ngIf=\"showPdfContainer\" class=\"pdf-viewer-container\">\n    <div class=\"documents-navigation\">\n      <button\n        (click)=\"previousPdf()\"\n        [disabled]=\"currentIndex === 0 || isSigningDocument === true\"\n        class=\"nav-button\"\n      >\n        &#8592;\n      </button>\n\n      <p class=\"file-info font-paragraph\">\n        {{\n          labelKeys.DocumentOf\n            | translate : [currentIndex + 1, config.PDFs.length]\n        }}\n      </p>\n\n      <button\n        (click)=\"nextPdf()\"\n        [disabled]=\"\n          currentIndex === config.PDFs.length - 1 ||\n          isSigningDocument === true ||\n          showCodeContainer === true\n        \"\n        class=\"nav-button\"\n      >\n        &#8594;\n      </button>\n    </div>\n\n    <pdf-viewer\n      [src]=\"currentPdf\"\n      [render-text]=\"true\"\n      [original-size]=\"false\"\n      [external-link-target]=\"'blank'\"\n      class=\"pdf-viewer\"\n    ></pdf-viewer>\n  </div>\n\n  <!-- No Signed Documents -->\n  <div *ngIf=\"showNoSignedDocuments\" class=\"no-files font-paragraph\">\n    <p>{{ labelKeys.NoSignedDocs | translate }}</p>\n  </div>\n\n  <!-- Agreement Section -->\n  <div\n    class=\"agreement-section\"\n    *ngIf=\"\n      config.PDFs.length > 0 &&\n      !config.PDFs[currentIndex].isSigned &&\n      !showCodeContainer\n    \"\n  >\n    <div class=\"agreement-content\">\n      <p class=\"font-paragraph\">\n        {{ labelKeys.Agreement | translate }}\n      </p>\n\n      <div\n        class=\"agreement-confirm-section\"\n        *ngIf=\"config.InputConfig.ShowConfirm != false\"\n      >\n        <input\n          class=\"checkbox component-checkbox\"\n          type=\"checkbox\"\n          id=\"termsCheckbox\"\n          [(ngModel)]=\"config.PDFs[currentIndex].isAgreementChecked\"\n        />\n        <label\n          for=\"termsCheckbox\"\n          class=\"checkbox-confirm-label component-checkbox-label\"\n          >{{ labelKeys.Confirm | translate }}</label\n        >\n      </div>\n    </div>\n\n    <button\n      (click)=\"proceedSigning()\"\n      [disabled]=\"!config.PDFs[currentIndex].isAgreementChecked\"\n      class=\"sign-button\"\n      [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n    >\n      {{ labelKeys.Sign | translate }}\n    </button>\n  </div>\n\n  <!-- OTP / Send Code Flow -->\n  <div\n    #codeContainer\n    class=\"send-code-container\"\n    *ngIf=\"\n      showCodeContainer &&\n      config.PDFs.length > 0 &&\n      config.PDFs[currentIndex].isSigned === false\n    \"\n  >\n    <!-- Phase 1: Send Code (with name + phone inputs) -->\n    <div class=\"send-code-content\" *ngIf=\"!codeSent\">\n      <h2 class=\"font-heading-2\">{{ labelKeys.SendCode | translate }}</h2>\n\n      <!-- First Name input (when not provided in config) -->\n      <div *ngIf=\"!isFirstNameProvided\" class=\"name-input-group\">\n        <label for=\"firstName\">\n          {{ labelKeys.FirstName | translate }}\n        </label>\n        <input\n          type=\"text\"\n          id=\"firstName\"\n          [(ngModel)]=\"config.FirstName\"\n        />\n      </div>\n\n      <!-- Last Name input (when not provided in config) -->\n      <div *ngIf=\"!isLastNameProvided\" class=\"name-input-group\">\n        <label for=\"lastName\">\n          {{ labelKeys.LastName | translate }}\n        </label>\n        <input\n          type=\"text\"\n          id=\"lastName\"\n          [(ngModel)]=\"config.LastName\"\n        />\n      </div>\n\n      <!-- Phone Number input -->\n      <label class=\"component-camp-text-label\" for=\"phoneNumber\">\n        {{ labelKeys.PhoneNumber | translate }}\n      </label>\n      <input\n        class=\"component-camp-text\"\n        type=\"text\"\n        id=\"phoneNumber\"\n        [(ngModel)]=\"config.PhoneNumber\"\n        [disabled]=\"isPhoneNumberDisabled\"\n        required\n      />\n\n      <button\n        type=\"button\"\n        (click)=\"sendCode()\"\n        [disabled]=\"isSendingCode || !canSendCode\"\n        [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n      >\n        {{\n          isSendingCode\n            ? (\"signComponent.viewfiles.sending\" | translate) + \"...\"\n            : (labelKeys.SendCode | translate)\n        }}\n      </button>\n\n      <!-- Phone validation error -->\n      <div *ngIf=\"showPhoneError\">\n        <p class=\"error-message\">\n          {{ \"signComponent.viewfiles.invalidPhoneNumber\" | translate }}\n        </p>\n      </div>\n\n      <!-- Send code error -->\n      <div *ngIf=\"showSendCodeError\">\n        <p class=\"error-message\">\n          {{ \"signComponent.viewfiles.errorSigning\" | translate }}\n        </p>\n        <button\n          (click)=\"retrySendCode()\"\n          class=\"retry-button\"\n          [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n        >\n          {{ \"signComponent.viewfiles.retry\" | translate }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Phase 2: Enter OTP Code -->\n    <div class=\"code-sent-content\" *ngIf=\"codeSent\">\n      <h2 class=\"font-heading-2\">{{ labelKeys.CheckCode | translate }}</h2>\n      <label class=\"component-camp-text-label\" for=\"code-sent\">\n        {{ labelKeys.InsertCode | translate }}\n      </label>\n      <input\n        class=\"component-camp-text\"\n        type=\"text\"\n        id=\"code-sent\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"otpCode\"\n        required\n      />\n      <button\n        (click)=\"signDocuments()\"\n        [disabled]=\"isSigningDocument\"\n        [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n      >\n        {{\n          isSigningDocument\n            ? (\"signComponent.viewfiles.signing\" | translate) + \"...\"\n            : (\"signComponent.viewfiles.signDocument\" | translate)\n        }}\n      </button>\n\n      <!-- Invalid OTP code error -->\n      <div *ngIf=\"showCodeError\">\n        <p class=\"error-message\">{{ labelKeys.InvalidCode | translate }}</p>\n        <button\n          (click)=\"retry()\"\n          class=\"retry-button\"\n          [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n        >\n          {{ \"signComponent.viewfiles.retry\" | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Success State -->\n  <div class=\"success-section\" *ngIf=\"showSuccessSigned\">\n    <div class=\"success-content\">\n      <p class=\"font-paragraph success-message\">\n        {{ \"signComponent.viewfiles.documentIsSigned\" | translate }}\n      </p>\n    </div>\n  </div>\n\n  <!-- Error State (with retry) -->\n  <div class=\"success-section\" *ngIf=\"showErrorSigned\">\n    <div class=\"success-content\">\n      <p class=\"font-paragraph error-message\">\n        {{ \"signComponent.viewfiles.errorSigning\" | translate }}\n      </p>\n      <button\n        (click)=\"retry()\"\n        class=\"retry-button\"\n        [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n      >\n        {{ \"signComponent.viewfiles.retry\" | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}*{box-sizing:border-box}div{text-align:center;margin:10px}.loading-spinner{width:36px;height:36px;border:3px solid #e5eaef;border-top-color:#5d87ff;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}.loading-section{width:min(500px,90%);background-color:#fff;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 30px;box-shadow:0 2px 12px #00000014;border-radius:7px;animation:fadeIn .3s ease-out}.loading-text{color:#5a6a85;font-size:.95rem;margin:0}ng2-pdf-viewer{display:block;margin:0 auto;width:80%;height:600px}.pdf-viewer-container{display:flex;flex-direction:column;align-items:center;margin:20px}.documents-navigation{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:16px}.nav-button{width:40px;height:40px;background-color:#5d87ff;display:flex;justify-content:center;align-items:center;color:#fff;text-align:center;border:none;padding:0;border-radius:7px;cursor:pointer;font-size:1.2rem;font-weight:700;transition:background-color .2s ease;flex-shrink:0}.nav-button:hover{background-color:#5d87ffd9}.nav-button:disabled{background-color:#ccc;cursor:not-allowed}.file-info{margin:0 8px;font-weight:600;font-size:1rem;color:#2a3547}.pdf-viewer{width:100%;height:70vh;max-width:800px;max-height:900px;min-width:300px;min-height:400px;border:1px solid #e5eaef;border-radius:7px;overflow:auto}.no-files{text-align:center;margin-top:20px;color:#5a6a85}.agreement-section{width:min(500px,90%);background-color:#fff;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 30px;position:relative;box-shadow:0 2px 12px #00000014;border-radius:7px}.agreement-content{display:flex;flex-direction:column;justify-content:center;align-items:center}.success-section{width:min(500px,90%);background-color:#fff;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 30px;position:relative;box-shadow:0 2px 12px #00000014;border-radius:7px}.success-content{display:flex;flex-direction:column;justify-content:center;align-items:center}.success-message{color:#13deb9}.error-message{color:#fa896b}.checkbox{width:20px;height:20px;cursor:pointer;margin:0;accent-color:#5d87ff}.agreement-confirm-section{display:flex;flex-direction:row;justify-content:center;align-items:center}.checkbox-confirm-label{margin-left:4px;cursor:pointer}.sign-button{margin-top:10px;background-color:#5d87ff;color:#fff;border:none;padding:10px 24px;border-radius:7px;cursor:pointer;font-size:1rem;font-weight:600;transition:background-color .2s ease;min-height:44px}.sign-button:hover{background-color:#5d87ffd9}button:disabled{background-color:#ccc;cursor:not-allowed}.send-code-container button:disabled{background-color:#ccc;cursor:not-allowed}.send-code-container button:disabled:hover{background-color:#ccc}.send-code-container{width:min(500px,90%);background-color:#fff;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 30px;gap:16px;position:relative;box-shadow:0 2px 12px #00000014;border-radius:7px}.send-code-container h2{font-size:1.3rem;color:#2a3547;font-weight:700}.send-code-container button{width:100%;background-color:#5d87ff;color:#fff;border:none;padding:10px 20px;border-radius:7px;cursor:pointer;font-size:1rem;font-weight:600;transition:background-color .2s ease;min-height:44px}.send-code-container button:hover{background-color:#5d87ffd9}.send-code-container input{background-color:#f2f6fa;width:100%;margin-bottom:10px;padding:10px 20px;text-align:center;border:1px solid #e5eaef;border-radius:7px;caret-color:#5d87ff;outline:none;font-weight:500;transition:border-color .2s ease;font-size:1rem}.send-code-container input:focus{border-color:#5d87ff}.send-code-content,.code-sent-content{display:flex;flex-direction:column;align-items:center;color:#2a3547}.send-code-container label{font-size:1rem;color:#5a6a85;line-height:17px;text-align:left;padding-left:2px;margin-right:auto;margin-bottom:10px}.name-input-group{width:100%;display:flex;flex-direction:column;align-items:flex-start;margin:0}.name-input-group label{font-size:1rem;color:#5a6a85;line-height:17px;text-align:left;padding-left:2px;margin-bottom:6px}.name-input-group input{background-color:#f2f6fa;width:100%;padding:10px 20px;text-align:left;border:1px solid #e5eaef;border-radius:7px;caret-color:#5d87ff;outline:none;font-weight:500;transition:border-color .2s ease;font-size:1rem}.name-input-group input:focus{border-color:#5d87ff}.retry-button{margin-top:12px;background-color:#5d87ff;color:#fff;border:none;padding:10px 24px;border-radius:7px;cursor:pointer;font-size:1rem;font-weight:600;transition:background-color .2s ease;min-height:44px}.retry-button:hover{background-color:#5d87ffd9}@media(max-width:600px){.documents-navigation{flex-wrap:wrap;gap:8px}.file-info{order:-1;width:100%;margin:0 0 4px;font-size:.9rem}.nav-button{margin:0}.pdf-viewer{height:60vh;min-height:300px}.agreement-section,.success-section,.send-code-container{padding:16px 20px}}\n"], dependencies: [{ kind: "component", type: i5.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.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: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ViewFilesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-view-files', standalone: false, template: "<!-- Loading State -->\n<div class=\"loading-section\" *ngIf=\"isLoading === true\">\n  <div class=\"loading-spinner\"></div>\n  <p class=\"loading-text\">{{ \"loading\" | translate }}...</p>\n</div>\n\n<!-- Signing Document State -->\n<div class=\"loading-section\" *ngIf=\"isSigningDocument === true\">\n  <div class=\"loading-spinner\"></div>\n  <p class=\"loading-text\">\n    {{ \"signComponent.viewfiles.signingDocuments\" | translate }}...\n  </p>\n</div>\n\n<div *ngIf=\"isLoading === false\">\n  <!-- PDF Viewer -->\n  <div *ngIf=\"showPdfContainer\" class=\"pdf-viewer-container\">\n    <div class=\"documents-navigation\">\n      <button\n        (click)=\"previousPdf()\"\n        [disabled]=\"currentIndex === 0 || isSigningDocument === true\"\n        class=\"nav-button\"\n      >\n        &#8592;\n      </button>\n\n      <p class=\"file-info font-paragraph\">\n        {{\n          labelKeys.DocumentOf\n            | translate : [currentIndex + 1, config.PDFs.length]\n        }}\n      </p>\n\n      <button\n        (click)=\"nextPdf()\"\n        [disabled]=\"\n          currentIndex === config.PDFs.length - 1 ||\n          isSigningDocument === true ||\n          showCodeContainer === true\n        \"\n        class=\"nav-button\"\n      >\n        &#8594;\n      </button>\n    </div>\n\n    <pdf-viewer\n      [src]=\"currentPdf\"\n      [render-text]=\"true\"\n      [original-size]=\"false\"\n      [external-link-target]=\"'blank'\"\n      class=\"pdf-viewer\"\n    ></pdf-viewer>\n  </div>\n\n  <!-- No Signed Documents -->\n  <div *ngIf=\"showNoSignedDocuments\" class=\"no-files font-paragraph\">\n    <p>{{ labelKeys.NoSignedDocs | translate }}</p>\n  </div>\n\n  <!-- Agreement Section -->\n  <div\n    class=\"agreement-section\"\n    *ngIf=\"\n      config.PDFs.length > 0 &&\n      !config.PDFs[currentIndex].isSigned &&\n      !showCodeContainer\n    \"\n  >\n    <div class=\"agreement-content\">\n      <p class=\"font-paragraph\">\n        {{ labelKeys.Agreement | translate }}\n      </p>\n\n      <div\n        class=\"agreement-confirm-section\"\n        *ngIf=\"config.InputConfig.ShowConfirm != false\"\n      >\n        <input\n          class=\"checkbox component-checkbox\"\n          type=\"checkbox\"\n          id=\"termsCheckbox\"\n          [(ngModel)]=\"config.PDFs[currentIndex].isAgreementChecked\"\n        />\n        <label\n          for=\"termsCheckbox\"\n          class=\"checkbox-confirm-label component-checkbox-label\"\n          >{{ labelKeys.Confirm | translate }}</label\n        >\n      </div>\n    </div>\n\n    <button\n      (click)=\"proceedSigning()\"\n      [disabled]=\"!config.PDFs[currentIndex].isAgreementChecked\"\n      class=\"sign-button\"\n      [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n    >\n      {{ labelKeys.Sign | translate }}\n    </button>\n  </div>\n\n  <!-- OTP / Send Code Flow -->\n  <div\n    #codeContainer\n    class=\"send-code-container\"\n    *ngIf=\"\n      showCodeContainer &&\n      config.PDFs.length > 0 &&\n      config.PDFs[currentIndex].isSigned === false\n    \"\n  >\n    <!-- Phase 1: Send Code (with name + phone inputs) -->\n    <div class=\"send-code-content\" *ngIf=\"!codeSent\">\n      <h2 class=\"font-heading-2\">{{ labelKeys.SendCode | translate }}</h2>\n\n      <!-- First Name input (when not provided in config) -->\n      <div *ngIf=\"!isFirstNameProvided\" class=\"name-input-group\">\n        <label for=\"firstName\">\n          {{ labelKeys.FirstName | translate }}\n        </label>\n        <input\n          type=\"text\"\n          id=\"firstName\"\n          [(ngModel)]=\"config.FirstName\"\n        />\n      </div>\n\n      <!-- Last Name input (when not provided in config) -->\n      <div *ngIf=\"!isLastNameProvided\" class=\"name-input-group\">\n        <label for=\"lastName\">\n          {{ labelKeys.LastName | translate }}\n        </label>\n        <input\n          type=\"text\"\n          id=\"lastName\"\n          [(ngModel)]=\"config.LastName\"\n        />\n      </div>\n\n      <!-- Phone Number input -->\n      <label class=\"component-camp-text-label\" for=\"phoneNumber\">\n        {{ labelKeys.PhoneNumber | translate }}\n      </label>\n      <input\n        class=\"component-camp-text\"\n        type=\"text\"\n        id=\"phoneNumber\"\n        [(ngModel)]=\"config.PhoneNumber\"\n        [disabled]=\"isPhoneNumberDisabled\"\n        required\n      />\n\n      <button\n        type=\"button\"\n        (click)=\"sendCode()\"\n        [disabled]=\"isSendingCode || !canSendCode\"\n        [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n      >\n        {{\n          isSendingCode\n            ? (\"signComponent.viewfiles.sending\" | translate) + \"...\"\n            : (labelKeys.SendCode | translate)\n        }}\n      </button>\n\n      <!-- Phone validation error -->\n      <div *ngIf=\"showPhoneError\">\n        <p class=\"error-message\">\n          {{ \"signComponent.viewfiles.invalidPhoneNumber\" | translate }}\n        </p>\n      </div>\n\n      <!-- Send code error -->\n      <div *ngIf=\"showSendCodeError\">\n        <p class=\"error-message\">\n          {{ \"signComponent.viewfiles.errorSigning\" | translate }}\n        </p>\n        <button\n          (click)=\"retrySendCode()\"\n          class=\"retry-button\"\n          [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n        >\n          {{ \"signComponent.viewfiles.retry\" | translate }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Phase 2: Enter OTP Code -->\n    <div class=\"code-sent-content\" *ngIf=\"codeSent\">\n      <h2 class=\"font-heading-2\">{{ labelKeys.CheckCode | translate }}</h2>\n      <label class=\"component-camp-text-label\" for=\"code-sent\">\n        {{ labelKeys.InsertCode | translate }}\n      </label>\n      <input\n        class=\"component-camp-text\"\n        type=\"text\"\n        id=\"code-sent\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"otpCode\"\n        required\n      />\n      <button\n        (click)=\"signDocuments()\"\n        [disabled]=\"isSigningDocument\"\n        [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n      >\n        {{\n          isSigningDocument\n            ? (\"signComponent.viewfiles.signing\" | translate) + \"...\"\n            : (\"signComponent.viewfiles.signDocument\" | translate)\n        }}\n      </button>\n\n      <!-- Invalid OTP code error -->\n      <div *ngIf=\"showCodeError\">\n        <p class=\"error-message\">{{ labelKeys.InvalidCode | translate }}</p>\n        <button\n          (click)=\"retry()\"\n          class=\"retry-button\"\n          [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n        >\n          {{ \"signComponent.viewfiles.retry\" | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Success State -->\n  <div class=\"success-section\" *ngIf=\"showSuccessSigned\">\n    <div class=\"success-content\">\n      <p class=\"font-paragraph success-message\">\n        {{ \"signComponent.viewfiles.documentIsSigned\" | translate }}\n      </p>\n    </div>\n  </div>\n\n  <!-- Error State (with retry) -->\n  <div class=\"success-section\" *ngIf=\"showErrorSigned\">\n    <div class=\"success-content\">\n      <p class=\"font-paragraph error-message\">\n        {{ \"signComponent.viewfiles.errorSigning\" | translate }}\n      </p>\n      <button\n        (click)=\"retry()\"\n        class=\"retry-button\"\n        [ngStyle]=\"config.InputConfig.Styles?.buttonStyles\"\n      >\n        {{ \"signComponent.viewfiles.retry\" | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}*{box-sizing:border-box}div{text-align:center;margin:10px}.loading-spinner{width:36px;height:36px;border:3px solid #e5eaef;border-top-color:#5d87ff;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}.loading-section{width:min(500px,90%);background-color:#fff;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 30px;box-shadow:0 2px 12px #00000014;border-radius:7px;animation:fadeIn .3s ease-out}.loading-text{color:#5a6a85;font-size:.95rem;margin:0}ng2-pdf-viewer{display:block;margin:0 auto;width:80%;height:600px}.pdf-viewer-container{display:flex;flex-direction:column;align-items:center;margin:20px}.documents-navigation{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:16px}.nav-button{width:40px;height:40px;background-color:#5d87ff;display:flex;justify-content:center;align-items:center;color:#fff;text-align:center;border:none;padding:0;border-radius:7px;cursor:pointer;font-size:1.2rem;font-weight:700;transition:background-color .2s ease;flex-shrink:0}.nav-button:hover{background-color:#5d87ffd9}.nav-button:disabled{background-color:#ccc;cursor:not-allowed}.file-info{margin:0 8px;font-weight:600;font-size:1rem;color:#2a3547}.pdf-viewer{width:100%;height:70vh;max-width:800px;max-height:900px;min-width:300px;min-height:400px;border:1px solid #e5eaef;border-radius:7px;overflow:auto}.no-files{text-align:center;margin-top:20px;color:#5a6a85}.agreement-section{width:min(500px,90%);background-color:#fff;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 30px;position:relative;box-shadow:0 2px 12px #00000014;border-radius:7px}.agreement-content{display:flex;flex-direction:column;justify-content:center;align-items:center}.success-section{width:min(500px,90%);background-color:#fff;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 30px;position:relative;box-shadow:0 2px 12px #00000014;border-radius:7px}.success-content{display:flex;flex-direction:column;justify-content:center;align-items:center}.success-message{color:#13deb9}.error-message{color:#fa896b}.checkbox{width:20px;height:20px;cursor:pointer;margin:0;accent-color:#5d87ff}.agreement-confirm-section{display:flex;flex-direction:row;justify-content:center;align-items:center}.checkbox-confirm-label{margin-left:4px;cursor:pointer}.sign-button{margin-top:10px;background-color:#5d87ff;color:#fff;border:none;padding:10px 24px;border-radius:7px;cursor:pointer;font-size:1rem;font-weight:600;transition:background-color .2s ease;min-height:44px}.sign-button:hover{background-color:#5d87ffd9}button:disabled{background-color:#ccc;cursor:not-allowed}.send-code-container button:disabled{background-color:#ccc;cursor:not-allowed}.send-code-container button:disabled:hover{background-color:#ccc}.send-code-container{width:min(500px,90%);background-color:#fff;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 30px;gap:16px;position:relative;box-shadow:0 2px 12px #00000014;border-radius:7px}.send-code-container h2{font-size:1.3rem;color:#2a3547;font-weight:700}.send-code-container button{width:100%;background-color:#5d87ff;color:#fff;border:none;padding:10px 20px;border-radius:7px;cursor:pointer;font-size:1rem;font-weight:600;transition:background-color .2s ease;min-height:44px}.send-code-container button:hover{background-color:#5d87ffd9}.send-code-container input{background-color:#f2f6fa;width:100%;margin-bottom:10px;padding:10px 20px;text-align:center;border:1px solid #e5eaef;border-radius:7px;caret-color:#5d87ff;outline:none;font-weight:500;transition:border-color .2s ease;font-size:1rem}.send-code-container input:focus{border-color:#5d87ff}.send-code-content,.code-sent-content{display:flex;flex-direction:column;align-items:center;color:#2a3547}.send-code-container label{font-size:1rem;color:#5a6a85;line-height:17px;text-align:left;padding-left:2px;margin-right:auto;margin-bottom:10px}.name-input-group{width:100%;display:flex;flex-direction:column;align-items:flex-start;margin:0}.name-input-group label{font-size:1rem;color:#5a6a85;line-height:17px;text-align:left;padding-left:2px;margin-bottom:6px}.name-input-group input{background-color:#f2f6fa;width:100%;padding:10px 20px;text-align:left;border:1px solid #e5eaef;border-radius:7px;caret-color:#5d87ff;outline:none;font-weight:500;transition:border-color .2s ease;font-size:1rem}.name-input-group input:focus{border-color:#5d87ff}.retry-button{margin-top:12px;background-color:#5d87ff;color:#fff;border:none;padding:10px 24px;border-radius:7px;cursor:pointer;font-size:1rem;font-weight:600;transition:background-color .2s ease;min-height:44px}.retry-button:hover{background-color:#5d87ffd9}@media(max-width:600px){.documents-navigation{flex-wrap:wrap;gap:8px}.file-info{order:-1;width:100%;margin:0 0 4px;font-size:.9rem}.nav-button{margin:0}.pdf-viewer{height:60vh;min-height:300px}.agreement-section,.success-section,.send-code-container{padding:16px 20px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: StateService }, { type: OtpService }, { type: SignService }, { type: DocumentService }], propDecorators: { codeContainer: [{
+                type: ViewChild,
+                args: ['codeContainer']
+            }], instanceId: [{
+                type: Input
+            }] } });
+
+class SignLibComponent {
+    constructor(state) {
+        this.state = state;
+        this.config = undefined;
+        this.instanceId = '';
+        this.event = new EventEmitter();
+        // Don't initialize signConfig here - we'll create a fresh one in ngOnInit
+    }
+    async ngOnInit() {
+        this.event.emit('loaded');
+        // Generate instanceId if not provided
+        if (!this.instanceId) {
+            this.instanceId = 'sign-lib-' + Math.random().toString(36).substr(2, 9);
+        }
+        if (typeof this.config === 'string') {
+            try {
+                this.config = JSON.parse(this.config);
+            }
+            catch (error) {
+                console.error('Invalid config: ', error);
+            }
+        }
+        if (this.config) {
+            // Create a fresh signConfig for this instance - don't reuse the old one!
+            this.signConfig = this.state.getConfig(this.instanceId);
+            // Update with new input config
+            this.signConfig.InputConfig = this.config;
+            this.signConfig.InputConfig.AppDataId = this.config.AppDataId || 'n/a';
+            this.signConfig.InputConfig.StepId = this.config.StepId || 'n/a';
+            this.signConfig.InputConfig.PhoneNumber =
+                this.config.PhoneNumber || 'n/a';
+            this.signConfig.PhoneNumber = this.config.PhoneNumber || 'n/a';
+            // Ensure PDFs array is empty for new instance
+            this.signConfig.PDFs = [];
+            this.signConfig.LabelTranslations = Object.entries(this.config.Labels || {}).map((i) => {
+                return {
+                    labelName: 'signComponent.viewfiles.' + i[0],
+                    labelValue: i[1],
+                };
+            });
+            // IMPORTANT: Also update the default config with connection info so TranslatePipe can work
+            const defaultConfig = this.state.getConfig('default');
+            if (!defaultConfig.InputConfig.BaseUrl ||
+                defaultConfig.InputConfig.BaseUrl === '') {
+                defaultConfig.InputConfig.BaseUrl = this.config.BaseUrl;
+                defaultConfig.InputConfig.Token = this.config.Token;
+                this.state.configSet(defaultConfig, 'default');
+            }
+            // Preserve existing translations if they exist in any instance
+            const existingTranslations = defaultConfig.LabelTranslations;
+            if (existingTranslations && existingTranslations.length > 0) {
+                this.signConfig.LabelTranslations = [...existingTranslations];
+            }
+            // Use instance-scoped state
+            this.state.configSet(this.signConfig, this.instanceId);
+            this.state.getNotification(this.instanceId).subscribe((message) => {
+                if (message) {
+                    this.event.emit(message);
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignLibComponent, deps: [{ token: StateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SignLibComponent, isStandalone: false, selector: "lib-sign", inputs: { config: "config", instanceId: "instanceId" }, outputs: { event: "event" }, ngImport: i0, template: `<lib-view-files
+    *ngIf="config"
+    [instanceId]="instanceId"
+  ></lib-view-files>`, isInline: true, dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ViewFilesComponent, selector: "lib-view-files", inputs: ["instanceId"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignLibComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sign', template: `<lib-view-files
+    *ngIf="config"
+    [instanceId]="instanceId"
+  ></lib-view-files>`, standalone: false }]
+        }], ctorParameters: () => [{ type: StateService }], propDecorators: { config: [{
+                type: Input
+            }], instanceId: [{
+                type: Input
+            }], event: [{
+                type: Output
+            }] } });
+
+class SignLibModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: SignLibModule, declarations: [SignLibComponent, ViewFilesComponent, TranslatePipe], imports: [PdfViewerModule, CommonModule, HttpClientModule, FormsModule], exports: [SignLibComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignLibModule, providers: [TranslatePipe], imports: [PdfViewerModule, CommonModule, HttpClientModule, FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SignLibComponent, ViewFilesComponent, TranslatePipe],
+                    imports: [PdfViewerModule, CommonModule, HttpClientModule, FormsModule],
+                    exports: [SignLibComponent],
+                    providers: [TranslatePipe],
+                }]
+        }] });
+
+/*
+ * Public API Surface of sign-lib
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SignLibComponent, SignLibModule, SignLibService };
+//# sourceMappingURL=qbs-sign-sign-lib.mjs.map