brainloper-ui 14.1.13 → 14.1.15

package/fesm2020/brainloper-ui.mjs

@@ -805,12 +805,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+// export interface TemplatePdfOt {
+//   name?: string;
+//   nit?: string;
+//   address?: string;
+//   telephone?: string;
+//   mail?: string;
+//   image?: string;
+//   code?: string;
+//   date?: string;
+//   responsible?: string;
+//   third?: string;
+//   approved_by?: string;
+//   description?: string;
+//   consecutive?: string;
+//   nameProvider?: string;
+//   addressProvider?: string;
+//   area?: string;
+//   odometer?: string;
+//   invoiceReference?: string;
+// }
 class WorkOrderPdfService {
     constructor() { }
-    /**
-     * Genera PDF de orden de trabajo con diseño profesional
-     * Dimensiones fijas, independiente del DOM
-     */
     generateWorkOrderPDF(data, options) {
         return new Promise((resolve, reject) => {
             try {
@@ -860,6 +876,41 @@ class WorkOrderPdfService {
             }
         });
     }
+    /**
+   * Genera PDF optimizado para impresión
+   */
+    generateForPrint(data) {
+        return this.generateWorkOrderPDF(data, {
+            format: 'letter',
+            download: false
+        });
+    }
+    /**
+     * Genera PDF y lo devuelve como Blob para envío por email
+     */
+    generateAsBlob(data) {
+        return new Promise((resolve, reject) => {
+            this.generateWorkOrderPDF(data, { download: false })
+                .then(doc => {
+                const pdfBlob = doc.output('blob');
+                resolve(pdfBlob);
+            })
+                .catch(reject);
+        });
+    }
+    /**
+     * Genera PDF y lo devuelve como base64
+     */
+    generateAsBase64(data) {
+        return new Promise((resolve, reject) => {
+            this.generateWorkOrderPDF(data, { download: false })
+                .then(doc => {
+                const base64 = doc.output('datauristring');
+                resolve(base64);
+            })
+                .catch(reject);
+        });
+    }
     addHeader(doc, data, margin, y, pageWidth, color) {
         // Fondo del encabezado
         doc.setFillColor(color[0], color[1], color[2]);
@@ -1062,43 +1113,6 @@ class WorkOrderPdfService {
         }
         return finalBoxY + boxHeight;
     }
-    /**
-     * Método auxiliar para manejar texto largo que puede necesitar múltiples páginas
-     */
-    addLongText(doc, text, x, y, maxWidth, fontSize = 11) {
-        if (!text || !text.trim())
-            return y;
-        doc.setFontSize(fontSize);
-        const lines = doc.splitTextToSize(text.trim(), maxWidth);
-        const lineHeight = fontSize + 3;
-        const pageHeight = doc.internal.pageSize.getHeight();
-        const margin = 40;
-        let currentY = y;
-        let lineIndex = 0;
-        while (lineIndex < lines.length) {
-            // Verificar si necesitamos una nueva página
-            if (currentY + lineHeight > pageHeight - margin) {
-                doc.addPage();
-                currentY = margin;
-            }
-            // Calcular cuántas líneas caben en la página actual
-            const remainingSpace = pageHeight - currentY - margin;
-            const maxLinesInPage = Math.floor(remainingSpace / lineHeight);
-            if (maxLinesInPage > 0) {
-                const linesToShow = Math.min(maxLinesInPage, lines.length - lineIndex);
-                const pageLines = lines.slice(lineIndex, lineIndex + linesToShow);
-                doc.text(pageLines, x, currentY);
-                currentY += pageLines.length * lineHeight;
-                lineIndex += linesToShow;
-            }
-            else {
-                // Si no cabe ni una línea, ir a nueva página
-                doc.addPage();
-                currentY = margin;
-            }
-        }
-        return currentY;
-    }
     addAuthorization(doc, data, y, margin, pageWidth) {
         const tableData = [
             [
@@ -1140,41 +1154,6 @@ class WorkOrderPdfService {
         // Resetear color
         doc.setTextColor(0, 0, 0);
     }
-    /**
-     * Genera PDF optimizado para impresión
-     */
-    generateForPrint(data) {
-        return this.generateWorkOrderPDF(data, {
-            format: 'letter',
-            download: false
-        });
-    }
-    /**
-     * Genera PDF y lo devuelve como Blob para envío por email
-     */
-    generateAsBlob(data) {
-        return new Promise((resolve, reject) => {
-            this.generateWorkOrderPDF(data, { download: false })
-                .then(doc => {
-                const pdfBlob = doc.output('blob');
-                resolve(pdfBlob);
-            })
-                .catch(reject);
-        });
-    }
-    /**
-     * Genera PDF y lo devuelve como base64
-     */
-    generateAsBase64(data) {
-        return new Promise((resolve, reject) => {
-            this.generateWorkOrderPDF(data, { download: false })
-                .then(doc => {
-                const base64 = doc.output('datauristring');
-                resolve(base64);
-            })
-                .catch(reject);
-        });
-    }
 }
 WorkOrderPdfService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WorkOrderPdfService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 WorkOrderPdfService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WorkOrderPdfService, providedIn: 'root' });
@@ -1218,12 +1197,7 @@ class TemplateOtComponent {
     }
     ngAfterViewInit() {
         if (this.dataModal.autoGenerate) {
-            if (this.dataModal.useNewMethod) {
-                this.generatePdfWithJsPDFVersion2();
-            }
-            else {
-                this.generatePdfWithHtml2Canvas();
-            }
+            this.generatePdfWithHtml2Canvas();
         }
     }
     generatePdfWithHtml2Canvas() {
@@ -1251,218 +1225,40 @@ class TemplateOtComponent {
             this.message.closeLoading();
         });
     }
-    generatePdfWithJsPDFVersion2() {
-        this.message.openLoading("Cargando", "Generando PDF con nuevo método");
-        try {
-            const doc = new jsPDF('p', 'pt', 'letter');
-            const pageWidth = doc.internal.pageSize.getWidth();
-            const margin = 40;
-            let currentY = margin;
-            // Encabezado simple
-            doc.setFont('helvetica', 'bold');
-            doc.setFontSize(18);
-            const title = 'ORDEN DE TRABAJO';
-            const titleWidth = doc.getTextWidth(title);
-            doc.text(title, (pageWidth - titleWidth) / 2, currentY);
-            currentY += 30;
-            doc.setFontSize(14);
-            const numberText = `N° ${this.data.consecutive}`;
-            const numberWidth = doc.getTextWidth(numberText);
-            doc.text(numberText, (pageWidth - numberWidth) / 2, currentY);
-            currentY += 40;
-            // Información básica
-            doc.setFont('helvetica', 'normal');
-            doc.setFontSize(12);
-            const info = [
-                `Empresa: ${this.data.name}`,
-                `NIT: ${this.data.nit}`,
-                `Área: ${this.data.area}`,
-                `Código: ${this.data.code}`,
-                `Fecha: ${this.data.date}`,
-                `Operario: ${this.data.responsible}`,
-                `Proveedor: ${this.data.nameProvider}`,
-                `Descripción: ${this.data.description}`
-            ];
-            info.forEach(line => {
-                doc.text(line, margin, currentY);
-                currentY += 20;
-            });
-            doc.output('dataurlnewwindow', { filename: 'orden_trabajo.pdf' });
-            this.dialog.closeAll();
-            this.message.closeLoading();
-        }
-        catch (error) {
-            console.error('Error generando PDF nuevo:', error);
-            this.message.closeLoading();
-            this.generatePdfWithHtml2Canvas();
-        }
-    }
-    generatePdfWithJsPDFVersion3() {
-        this.message.openLoading("Cargando", "Generando PDF profesional");
-        this.workOrderPdfService.generateWorkOrderPDF(this.data)
-            .then(() => {
-            this.dialog.closeAll();
-            this.message.closeLoading();
-        })
-            .catch((error) => {
-            console.error('Error generando PDF profesional:', error);
-            this.message.closeLoading();
-            this.generatePdfWithHtml2Canvas();
-        });
-    }
 }
 TemplateOtComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TemplateOtComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialog }, { token: MessageService }, { token: WorkOrderPdfService }], target: i0.ɵɵFactoryTarget.Component });
-TemplateOtComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TemplateOtComponent, selector: "app-template-ot", ngImport: i0, template: "<div id=\"templateOT\" #templateOT>\n    <div class=\"d-flex flex-column w-100 white-background\">\n\n        <!-- Encabezado  -->\n        <div class=\"borde w-100 d-flex flex-row align-items-center header-section\">\n            <div class=\"d-flex flex-column align-items-center text-content\" style=\"width:80%\">\n                <h2 class=\"text-header text-uppercase wrap-text\">{{data.name}}</h2>\n                <h2 class=\"text-header wrap-text\">NIT: {{data.nit}}</h2>\n                <div class=\"w-100 d-flex flex-row justify-content-evenly\">\n                    <h3 class=\"text-header wrap-text\">{{data.address}}</h3>\n                    <h3 class=\"text-header wrap-text\">TEL: {{data.telephone}}</h3>\n                </div>\n            </div>\n            <div style=\"width:20%\">\n                <div class=\"img w-100\" [style.background-image]=\"'url(' + data.image + ')'\">\n                </div>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Orden de trabajo</h2>\n            <h2 class=\"wrap-text\">N\u00B0: {{data.consecutive}}</h2>\n        </div>\n\n        <!-- Cuerpo -->\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">\u00C1rea:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.area}}</h2>\n            </div>\n              <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">C\u00F3digo:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.code}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Fecha:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.date}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Operario:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.responsible}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Od\u00F3metro:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.odometer}}</h2>\n            </div>\n             <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Referencia Factura:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.invoiceReference}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Datos del proveedor</h2>\n        </div>\n\n        <div class=\"borde flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Nombre:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.nameProvider}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Direcci\u00F3n:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.addressProvider}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Detalles del servicio</h2>\n        </div>\n\n        <div class=\"borde w-100 description-section\">\n            <h2 class=\"wrap-text text-start\">{{data.description}}</h2>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:35%\">\n                <h2 class=\"fw-bold\">AUTORIZADA POR:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:65%\">\n                <h2 class=\"wrap-text\">{{data.approved_by}}</h2>\n            </div>\n        </div>\n\n        <!-- piso -->\n        <div class=\"borde d-flex flex-column align-items-center justify-content-center w-100 footer-section\">\n            <h2>Favor adjuntar la orden a la factura o cuenta de cobro</h2>\n            <h2 class=\"wrap-text\">{{data.mail}}</h2>\n        </div>\n\n    </div>\n</div>\n\n<div class=\"download-container\">\n    <button (click)=\"generatePdfWithHtml2Canvas()\" color='primary' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF\n    </button>\n    <!-- <button (click)=\"generatePdfWithJsPDFVersion2()\" color='warn' mat-raised-button style=\"margin-right: 10px;\">\n            Generar PDF (version 2.0)\n    </button>\n    <button (click)=\"generatePdfWithJsPDFVersion3()\" color='accent' mat-raised-button>\n        <mat-icon>picture_as_pdf</mat-icon>\n        Generar PDF (version 3.0)\n    </button> -->\n\n</div>", styles: [".img{background-size:100%!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;height:22mm!important;margin:0!important;padding:0!important}h2{font-size:1rem!important;line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}h3{line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}.text-header{line-height:1.5!important;font-weight:700!important}.text-uppercase{text-transform:uppercase!important}.wrap-text{white-space:pre-wrap!important}.text-content{padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.borde{border:1px solid blue!important}.border-r{border-right:1px solid blue!important;min-height:100%!important;align-self:stretch!important}.container-text{display:flex!important;justify-content:center!important;align-items:center!important;min-height:inherit!important}.container-headers{display:flex!important;align-items:center!important;justify-content:space-evenly!important;width:100%!important;min-height:8mm!important;background:rgba(240,244,255,.6117647059)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.container-headers h2{font-weight:700!important}.flexible-row{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:11mm!important}.header-section{min-height:25mm!important}.footer-section{min-height:14mm!important;background:rgba(240,244,255,.35)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.description-section{min-height:20mm!important;padding:10px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.w-100{width:100%!important}.text-start{text-align:start!important}.white-background{background-color:#fff!important}.download-container{display:flex!important;justify-content:center!important;margin-top:15px!important}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+TemplateOtComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TemplateOtComponent, selector: "app-template-ot", ngImport: i0, template: "<div id=\"templateOT\" #templateOT>\n    <div class=\"d-flex flex-column w-100 white-background\">\n\n        <!-- Encabezado  -->\n        <div class=\"borde w-100 d-flex flex-row align-items-center header-section\">\n            <div class=\"d-flex flex-column align-items-center text-content\" style=\"width:80%\">\n                <h2 class=\"text-header text-uppercase wrap-text\">{{data.name}}</h2>\n                <h2 class=\"text-header wrap-text\">NIT: {{data.nit}}</h2>\n                <div class=\"w-100 d-flex flex-row justify-content-evenly\">\n                    <h3 class=\"text-header wrap-text\">{{data.address}}</h3>\n                    <h3 class=\"text-header wrap-text\">TEL: {{data.telephone}}</h3>\n                </div>\n            </div>\n            <div style=\"width:20%\">\n                <div class=\"img w-100\" [style.background-image]=\"'url(' + data.image + ')'\">\n                </div>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Orden de trabajo</h2>\n            <h2 class=\"wrap-text\">N\u00B0: {{data.consecutive}}</h2>\n        </div>\n\n        <!-- Cuerpo -->\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">\u00C1rea:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.area}}</h2>\n            </div>\n              <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">C\u00F3digo:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.code}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Fecha:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.date}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Operario:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.responsible}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Od\u00F3metro:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.odometer}}</h2>\n            </div>\n             <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Referencia Factura:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.invoiceReference}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Datos del proveedor</h2>\n        </div>\n\n        <div class=\"borde flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Nombre:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.nameProvider}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Direcci\u00F3n:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.addressProvider}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Detalles del servicio</h2>\n        </div>\n\n        <div class=\"borde w-100 description-section\">\n            <h2 class=\"wrap-text text-start\">{{data.description}}</h2>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:35%\">\n                <h2 class=\"fw-bold\">AUTORIZADA POR:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:65%\">\n                <h2 class=\"wrap-text\">{{data.approved_by}}</h2>\n            </div>\n        </div>\n\n        <!-- piso -->\n        <div class=\"borde d-flex flex-column align-items-center justify-content-center w-100 footer-section\">\n            <h2>Favor adjuntar la orden a la factura o cuenta de cobro</h2>\n            <h2 class=\"wrap-text\">{{data.mail}}</h2>\n        </div>\n\n    </div>\n</div>\n\n<div class=\"download-container\">\n    <button (click)=\"generatePdfWithHtml2Canvas()\" color='primary' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF\n    </button>\n</div>", styles: [".img{background-size:100%!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;height:22mm!important;margin:0!important;padding:0!important}h2{font-size:1rem!important;line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}h3{line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}.text-header{line-height:1.5!important;font-weight:700!important}.text-uppercase{text-transform:uppercase!important}.wrap-text{white-space:pre-wrap!important}.text-content{padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.borde{border:1px solid blue!important}.border-r{border-right:1px solid blue!important;min-height:100%!important;align-self:stretch!important}.container-text{display:flex!important;justify-content:center!important;align-items:center!important;min-height:inherit!important}.container-headers{display:flex!important;align-items:center!important;justify-content:space-evenly!important;width:100%!important;min-height:8mm!important;background:rgba(240,244,255,.6117647059)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.container-headers h2{font-weight:700!important}.flexible-row{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:11mm!important}.header-section{min-height:25mm!important}.footer-section{min-height:14mm!important;background:rgba(240,244,255,.35)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.description-section{min-height:20mm!important;padding:10px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.w-100{width:100%!important}.text-start{text-align:start!important}.white-background{background-color:#fff!important}.download-container{display:flex!important;justify-content:center!important;margin-top:15px!important}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TemplateOtComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-template-ot', template: "<div id=\"templateOT\" #templateOT>\n    <div class=\"d-flex flex-column w-100 white-background\">\n\n        <!-- Encabezado  -->\n        <div class=\"borde w-100 d-flex flex-row align-items-center header-section\">\n            <div class=\"d-flex flex-column align-items-center text-content\" style=\"width:80%\">\n                <h2 class=\"text-header text-uppercase wrap-text\">{{data.name}}</h2>\n                <h2 class=\"text-header wrap-text\">NIT: {{data.nit}}</h2>\n                <div class=\"w-100 d-flex flex-row justify-content-evenly\">\n                    <h3 class=\"text-header wrap-text\">{{data.address}}</h3>\n                    <h3 class=\"text-header wrap-text\">TEL: {{data.telephone}}</h3>\n                </div>\n            </div>\n            <div style=\"width:20%\">\n                <div class=\"img w-100\" [style.background-image]=\"'url(' + data.image + ')'\">\n                </div>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Orden de trabajo</h2>\n            <h2 class=\"wrap-text\">N\u00B0: {{data.consecutive}}</h2>\n        </div>\n\n        <!-- Cuerpo -->\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">\u00C1rea:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.area}}</h2>\n            </div>\n              <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">C\u00F3digo:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.code}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Fecha:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.date}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Operario:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.responsible}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Od\u00F3metro:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.odometer}}</h2>\n            </div>\n             <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Referencia Factura:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.invoiceReference}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Datos del proveedor</h2>\n        </div>\n\n        <div class=\"borde flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Nombre:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.nameProvider}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Direcci\u00F3n:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.addressProvider}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Detalles del servicio</h2>\n        </div>\n\n        <div class=\"borde w-100 description-section\">\n            <h2 class=\"wrap-text text-start\">{{data.description}}</h2>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:35%\">\n                <h2 class=\"fw-bold\">AUTORIZADA POR:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:65%\">\n                <h2 class=\"wrap-text\">{{data.approved_by}}</h2>\n            </div>\n        </div>\n\n        <!-- piso -->\n        <div class=\"borde d-flex flex-column align-items-center justify-content-center w-100 footer-section\">\n            <h2>Favor adjuntar la orden a la factura o cuenta de cobro</h2>\n            <h2 class=\"wrap-text\">{{data.mail}}</h2>\n        </div>\n\n    </div>\n</div>\n\n<div class=\"download-container\">\n    <button (click)=\"generatePdfWithHtml2Canvas()\" color='primary' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF\n    </button>\n    <!-- <button (click)=\"generatePdfWithJsPDFVersion2()\" color='warn' mat-raised-button style=\"margin-right: 10px;\">\n            Generar PDF (version 2.0)\n    </button>\n    <button (click)=\"generatePdfWithJsPDFVersion3()\" color='accent' mat-raised-button>\n        <mat-icon>picture_as_pdf</mat-icon>\n        Generar PDF (version 3.0)\n    </button> -->\n\n</div>", styles: [".img{background-size:100%!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;height:22mm!important;margin:0!important;padding:0!important}h2{font-size:1rem!important;line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}h3{line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}.text-header{line-height:1.5!important;font-weight:700!important}.text-uppercase{text-transform:uppercase!important}.wrap-text{white-space:pre-wrap!important}.text-content{padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.borde{border:1px solid blue!important}.border-r{border-right:1px solid blue!important;min-height:100%!important;align-self:stretch!important}.container-text{display:flex!important;justify-content:center!important;align-items:center!important;min-height:inherit!important}.container-headers{display:flex!important;align-items:center!important;justify-content:space-evenly!important;width:100%!important;min-height:8mm!important;background:rgba(240,244,255,.6117647059)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.container-headers h2{font-weight:700!important}.flexible-row{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:11mm!important}.header-section{min-height:25mm!important}.footer-section{min-height:14mm!important;background:rgba(240,244,255,.35)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.description-section{min-height:20mm!important;padding:10px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.w-100{width:100%!important}.text-start{text-align:start!important}.white-background{background-color:#fff!important}.download-container{display:flex!important;justify-content:center!important;margin-top:15px!important}\n"] }]
+            args: [{ selector: 'app-template-ot', template: "<div id=\"templateOT\" #templateOT>\n    <div class=\"d-flex flex-column w-100 white-background\">\n\n        <!-- Encabezado  -->\n        <div class=\"borde w-100 d-flex flex-row align-items-center header-section\">\n            <div class=\"d-flex flex-column align-items-center text-content\" style=\"width:80%\">\n                <h2 class=\"text-header text-uppercase wrap-text\">{{data.name}}</h2>\n                <h2 class=\"text-header wrap-text\">NIT: {{data.nit}}</h2>\n                <div class=\"w-100 d-flex flex-row justify-content-evenly\">\n                    <h3 class=\"text-header wrap-text\">{{data.address}}</h3>\n                    <h3 class=\"text-header wrap-text\">TEL: {{data.telephone}}</h3>\n                </div>\n            </div>\n            <div style=\"width:20%\">\n                <div class=\"img w-100\" [style.background-image]=\"'url(' + data.image + ')'\">\n                </div>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Orden de trabajo</h2>\n            <h2 class=\"wrap-text\">N\u00B0: {{data.consecutive}}</h2>\n        </div>\n\n        <!-- Cuerpo -->\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">\u00C1rea:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.area}}</h2>\n            </div>\n              <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">C\u00F3digo:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.code}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Fecha:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.date}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Operario:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.responsible}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Od\u00F3metro:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.odometer}}</h2>\n            </div>\n             <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Referencia Factura:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.invoiceReference}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Datos del proveedor</h2>\n        </div>\n\n        <div class=\"borde flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Nombre:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.nameProvider}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Direcci\u00F3n:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.addressProvider}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Detalles del servicio</h2>\n        </div>\n\n        <div class=\"borde w-100 description-section\">\n            <h2 class=\"wrap-text text-start\">{{data.description}}</h2>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:35%\">\n                <h2 class=\"fw-bold\">AUTORIZADA POR:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:65%\">\n                <h2 class=\"wrap-text\">{{data.approved_by}}</h2>\n            </div>\n        </div>\n\n        <!-- piso -->\n        <div class=\"borde d-flex flex-column align-items-center justify-content-center w-100 footer-section\">\n            <h2>Favor adjuntar la orden a la factura o cuenta de cobro</h2>\n            <h2 class=\"wrap-text\">{{data.mail}}</h2>\n        </div>\n\n    </div>\n</div>\n\n<div class=\"download-container\">\n    <button (click)=\"generatePdfWithHtml2Canvas()\" color='primary' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF\n    </button>\n</div>", styles: [".img{background-size:100%!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;height:22mm!important;margin:0!important;padding:0!important}h2{font-size:1rem!important;line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}h3{line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}.text-header{line-height:1.5!important;font-weight:700!important}.text-uppercase{text-transform:uppercase!important}.wrap-text{white-space:pre-wrap!important}.text-content{padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.borde{border:1px solid blue!important}.border-r{border-right:1px solid blue!important;min-height:100%!important;align-self:stretch!important}.container-text{display:flex!important;justify-content:center!important;align-items:center!important;min-height:inherit!important}.container-headers{display:flex!important;align-items:center!important;justify-content:space-evenly!important;width:100%!important;min-height:8mm!important;background:rgba(240,244,255,.6117647059)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.container-headers h2{font-weight:700!important}.flexible-row{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:11mm!important}.header-section{min-height:25mm!important}.footer-section{min-height:14mm!important;background:rgba(240,244,255,.35)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.description-section{min-height:20mm!important;padding:10px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.w-100{width:100%!important}.text-start{text-align:start!important}.white-background{background-color:#fff!important}.download-container{display:flex!important;justify-content:center!important;margin-top:15px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1.MatDialog }, { type: MessageService }, { type: WorkOrderPdfService }]; } });
 
+// export interface TemplatePdfFo {
+//   name: string;
+//   nit: string;
+//   address: string;
+//   telephone: string;
+//   mail: string;
+//   image?: string;
+//   code: string;
+//   date: string;
+//   responsible: string;
+//   id_place: string;
+//   approved_by: string;
+//   detalle: string;
+//   description: string;
+//   consecutive: string;
+//   namePlace: string;
+//   addressPlace: string;
+//   area: string;
+//   odometer: string;
+//   invoiceReference?: string;
+// }
 class FuelOrderPdfService {
     constructor() { }
-    generateFuelOrderPDF(data) {
-        //return this.FuelOrderPdfService.generateFuelOrderPDF(data);
-        return new Promise((resolve, reject) => {
-            try {
-                const doc = new jsPDF('p', 'pt', 'letter'); // Tamaño carta fijo
-                const pageWidth = doc.internal.pageSize.getWidth();
-                const pageHeight = doc.internal.pageSize.getHeight();
-                const margin = 40;
-                let currentY = margin;
-                // Configurar fuentes
-                doc.setFont('helvetica', 'bold');
-                doc.setFontSize(16);
-                // Función auxiliar para añadir texto centrado
-                const addCenteredText = (text, y, fontSize = 12, style = 'normal') => {
-                    doc.setFont('helvetica', style);
-                    doc.setFontSize(fontSize);
-                    const textWidth = doc.getTextWidth(text);
-                    doc.text(text, (pageWidth - textWidth) / 2, y);
-                    return y + fontSize + 5;
-                };
-                // Función auxiliar para añadir texto con ajuste de línea
-                const addWrappedText = (text, x, y, maxWidth, fontSize = 10, style = 'normal') => {
-                    doc.setFont('helvetica', style);
-                    doc.setFontSize(fontSize);
-                    const lines = doc.splitTextToSize(text, maxWidth);
-                    doc.text(lines, x, y);
-                    return y + (lines.length * fontSize) + 5;
-                };
-                // Función para dibujar rectángulo con borde
-                const drawRect = (x, y, width, height) => {
-                    doc.rect(x, y, width, height);
-                };
-                // ENCABEZADO
-                currentY = addCenteredText(data.name.toUpperCase(), currentY, 16, 'bold');
-                currentY = addCenteredText(`NIT: ${data.nit}`, currentY, 12, 'bold');
-                currentY = addCenteredText(data.address, currentY, 10);
-                currentY = addCenteredText(`TEL: ${data.telephone}`, currentY, 10);
-                currentY += 20;
-                // Título del documento
-                currentY = addCenteredText('ORDEN DE COMBUSTIBLE', currentY, 18, 'bold');
-                currentY = addCenteredText(`N°: ${data.consecutive}`, currentY, 14, 'bold');
-                currentY += 20;
-                // Información principal en tabla
-                const tableData = [
-                    ['Área:', data.area, 'Código:', data.code, 'Fecha:', data.date],
-                    ['Operario:', data.responsible, 'Odómetro:', data.odometer, '', '']
-                ];
-                doc.autoTable({
-                    startY: currentY,
-                    head: [],
-                    body: tableData,
-                    theme: 'grid',
-                    styles: {
-                        fontSize: 10,
-                        cellPadding: 8,
-                        lineColor: [0, 0, 0],
-                        lineWidth: 0.5
-                    },
-                    columnStyles: {
-                        0: { fontStyle: 'bold', cellWidth: 60 },
-                        1: { cellWidth: 120 },
-                        2: { fontStyle: 'bold', cellWidth: 60 },
-                        3: { cellWidth: 80 },
-                        4: { fontStyle: 'bold', cellWidth: 60 },
-                        5: { cellWidth: 80 }
-                    },
-                    margin: { left: margin, right: margin }
-                });
-                currentY = doc.lastAutoTable.finalY + 20;
-                // Datos del proveedor
-                currentY = addCenteredText('DATOS DEL PROVEEDOR', currentY, 14, 'bold');
-                currentY += 10;
-                const providerData = [
-                    ['Lugar:', data.namePlace, 'Dirección:', data.addressPlace]
-                ];
-                doc.autoTable({
-                    startY: currentY,
-                    head: [],
-                    body: providerData,
-                    theme: 'grid',
-                    styles: {
-                        fontSize: 10,
-                        cellPadding: 8,
-                        lineColor: [0, 0, 0],
-                        lineWidth: 0.5
-                    },
-                    columnStyles: {
-                        0: { fontStyle: 'bold', cellWidth: 80 },
-                        1: { cellWidth: 150 },
-                        2: { fontStyle: 'bold', cellWidth: 80 },
-                        3: { cellWidth: 150 }
-                    },
-                    margin: { left: margin, right: margin }
-                });
-                currentY = doc.lastAutoTable.finalY + 20;
-                // Detalles del servicio
-                currentY = addCenteredText('DETALLES DEL SERVICIO', currentY, 14, 'bold');
-                currentY += 15;
-                // Contenedor para detalles
-                const detailsY = currentY;
-                const detailsHeight = 80;
-                drawRect(margin, detailsY, pageWidth - (margin * 2), detailsHeight);
-                currentY += 15;
-                currentY = addWrappedText(data.detalle, margin + 10, currentY, pageWidth - (margin * 2) - 20, 10);
-                currentY = addWrappedText(`Descripción: ${data.description}`, margin + 10, currentY, pageWidth - (margin * 2) - 20, 10);
-                currentY = detailsY + detailsHeight + 20;
-                // Autorización
-                const authData = [
-                    ['AUTORIZADA POR:', data.approved_by]
-                ];
-                doc.autoTable({
-                    startY: currentY,
-                    head: [],
-                    body: authData,
-                    theme: 'grid',
-                    styles: {
-                        fontSize: 12,
-                        cellPadding: 10,
-                        lineColor: [0, 0, 0],
-                        lineWidth: 0.5
-                    },
-                    columnStyles: {
-                        0: { fontStyle: 'bold', cellWidth: 150 },
-                        1: { cellWidth: 310 }
-                    },
-                    margin: { left: margin, right: margin }
-                });
-                currentY = doc.lastAutoTable.finalY + 30;
-                // Pie de página
-                currentY = addCenteredText('Favor adjuntar la orden de venta o factura', currentY, 12, 'bold');
-                currentY = addCenteredText(data.mail, currentY, 10);
-                // Generar el PDF
-                doc.output('dataurlnewwindow', { filename: 'orden_combustible.pdf' });
-                resolve();
-            }
-            catch (error) {
-                reject(error);
-            }
-        });
-    }
     generateFuelOrderProfesionalPDF(data, options) {
         return new Promise((resolve, reject) => {
             try {
@@ -1512,6 +1308,15 @@ class FuelOrderPdfService {
             }
         });
     }
+    /**
+     * Genera PDF optimizado para impresión
+     */
+    generateForPrint(data) {
+        return this.generateFuelOrderProfesionalPDF(data, {
+            format: 'letter',
+            download: false
+        });
+    }
     addHeader(doc, data, margin, y, pageWidth, color) {
         // Fondo del encabezado
         doc.setFillColor(color[0], color[1], color[2]);
@@ -1722,43 +1527,6 @@ class FuelOrderPdfService {
         }
         return finalBoxY + boxHeight;
     }
-    /**
-     * Método auxiliar para manejar texto largo que puede necesitar múltiples páginas
-     */
-    addLongText(doc, text, x, y, maxWidth, fontSize = 11) {
-        if (!text || !text.trim())
-            return y;
-        doc.setFontSize(fontSize);
-        const lines = doc.splitTextToSize(text.trim(), maxWidth);
-        const lineHeight = fontSize + 3;
-        const pageHeight = doc.internal.pageSize.getHeight();
-        const margin = 40;
-        let currentY = y;
-        let lineIndex = 0;
-        while (lineIndex < lines.length) {
-            // Verificar si necesitamos una nueva página
-            if (currentY + lineHeight > pageHeight - margin) {
-                doc.addPage();
-                currentY = margin;
-            }
-            // Calcular cuántas líneas caben en la página actual
-            const remainingSpace = pageHeight - currentY - margin;
-            const maxLinesInPage = Math.floor(remainingSpace / lineHeight);
-            if (maxLinesInPage > 0) {
-                const linesToShow = Math.min(maxLinesInPage, lines.length - lineIndex);
-                const pageLines = lines.slice(lineIndex, lineIndex + linesToShow);
-                doc.text(pageLines, x, currentY);
-                currentY += pageLines.length * lineHeight;
-                lineIndex += linesToShow;
-            }
-            else {
-                // Si no cabe ni una línea, ir a nueva página
-                doc.addPage();
-                currentY = margin;
-            }
-        }
-        return currentY;
-    }
     addAuthorization(doc, data, y, margin, pageWidth) {
         const tableData = [
             [
@@ -1800,41 +1568,6 @@ class FuelOrderPdfService {
         // Resetear color
         doc.setTextColor(0, 0, 0);
     }
-    /**
-     * Genera PDF optimizado para impresión
-     */
-    generateForPrint(data) {
-        return this.generateFuelOrderProfesionalPDF(data, {
-            format: 'letter',
-            download: false
-        });
-    }
-    /**
-     * Genera PDF y lo devuelve como Blob para envío por email
-     */
-    generateAsBlob(data) {
-        return new Promise((resolve, reject) => {
-            this.generateFuelOrderProfesionalPDF(data, { download: false })
-                .then(doc => {
-                const pdfBlob = doc.output('blob');
-                resolve(pdfBlob);
-            })
-                .catch(reject);
-        });
-    }
-    /**
-     * Genera PDF y lo devuelve como base64
-     */
-    generateAsBase64(data) {
-        return new Promise((resolve, reject) => {
-            this.generateFuelOrderProfesionalPDF(data, { download: false })
-                .then(doc => {
-                const base64 = doc.output('datauristring');
-                resolve(base64);
-            })
-                .catch(reject);
-        });
-    }
 }
 FuelOrderPdfService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FuelOrderPdfService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 FuelOrderPdfService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FuelOrderPdfService, providedIn: 'root' });
@@ -1879,12 +1612,7 @@ class TemplateFuelComponent {
     }
     ngAfterViewInit() {
         if (this.dataModal.autoGenerate) {
-            if (this.dataModal.useNewMethod) {
-                this.generatePdfWithHtml2Canvas();
-            }
-            else {
-                this.generatePdfWithHtml2Canvas();
-            }
+            this.generatePdfWithHtml2Canvas();
         }
     }
     generatePdfWithHtml2Canvas() {
@@ -1914,38 +1642,12 @@ class TemplateFuelComponent {
             this.message.closeLoading();
         });
     }
-    generatePdfWithJsPDFVersion2() {
-        this.message.openLoading("Cargando", "Generando PDF con nuevo método");
-        this.FuelOrderPdfService.generateFuelOrderPDF(this.data)
-            .then(() => {
-            this.dialog.closeAll();
-            this.message.closeLoading();
-        })
-            .catch((error) => {
-            console.error('Error generando PDF:', error);
-            this.message.closeLoading();
-            this.generatePdfWithHtml2Canvas();
-        });
-    }
-    generatePdfWithJsPDFVersion3() {
-        this.message.openLoading("Cargando", "Generando PDF profesional");
-        this.FuelOrderPdfService.generateFuelOrderProfesionalPDF(this.data)
-            .then(() => {
-            this.dialog.closeAll();
-            this.message.closeLoading();
-        })
-            .catch((error) => {
-            console.error('Error generando PDF profesional:', error);
-            this.message.closeLoading();
-            this.generatePdfWithHtml2Canvas();
-        });
-    }
 }
 TemplateFuelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TemplateFuelComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialog }, { token: MessageService }, { token: FuelOrderPdfService }], target: i0.ɵɵFactoryTarget.Component });
-TemplateFuelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TemplateFuelComponent, selector: "app-template-fuel", ngImport: i0, template: "<div id=\"templateFO\" #templateFO>\n    <div class=\"d-flex flex-column w-100 white-background\">\n\n        <!-- Encabezado  -->\n        <div class=\"borde w-100 d-flex flex-row align-items-center header-section\">\n            <div class=\"d-flex flex-column align-items-center text-content\" style=\"width:80%\">\n                <h2 class=\"text-header text-uppercase wrap-text\">{{data.name}}</h2>\n                <h2 class=\"text-header wrap-text\">NIT: {{data.nit}}</h2>\n                <div class=\"w-100 d-flex flex-row justify-content-evenly\">\n                    <h3 class=\"text-header wrap-text\">{{data.address}}</h3>\n                    <h3 class=\"text-header wrap-text\">TEL: {{data.telephone}}</h3>\n                </div>\n            </div>\n            <div style=\"width:20%\">\n                <div class=\"img w-100\" [style.background-image]=\"'url(' + data.image + ')'\">\n                </div>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Orden de combustible</h2>\n            <h2 class=\"wrap-text\">N\u00B0: {{data.consecutive}}</h2>\n        </div>\n\n        <!-- Cuerpo -->\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">\u00C1rea:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.area}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">C\u00F3digo:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.code}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Fecha:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.date}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Operario:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.responsible}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Od\u00F3metro:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:44%\">\n                <h2 class=\"wrap-text\">{{data.odometer}}</h2>\n            </div>\n            <!-- <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Referencia Factura:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.invoiceReference}}</h2>\n            </div> -->\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h3>Datos del proveedor</h3>\n        </div>\n\n        <div class=\"borde flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Lugar:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.namePlace}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Direcci\u00F3n:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.addressPlace}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h3>Detalles del servicio</h3>\n        </div>\n\n        <div class=\"borde w-100 description-section\">\n            <h3 class=\"wrap-text text-start\">{{data.detalle}}</h3>\n            <h3 class=\"wrap-text text-start\">Descripci\u00F3n: {{data.description}}</h3>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:35%\">\n                <h2 class=\"fw-bold\">AUTORIZADA POR:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:65%\">\n                <h2 class=\"wrap-text\">{{data.approved_by}}</h2>\n            </div>\n        </div>\n\n        <!-- piso -->\n        <div class=\"borde d-flex flex-column align-items-center justify-content-center w-100 footer-section\">\n            <h2>Favor adjuntar la orden de venta o factura</h2>\n            <h2 class=\"wrap-text\">{{data.mail}}</h2>\n        </div>\n\n    </div>\n</div>\n\n<div class=\"download-container\">\n    <button (click)=\"generatePdfWithHtml2Canvas()\" color='primary' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF\n    </button>\n    <!-- <button (click)=\"generatePdfWithJsPDFVersion2()\" color='warn' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF (Version 2.0)\n    </button>\n    <button (click)=\"generatePdfWithJsPDFVersion3()\" color='accent' mat-raised-button>\n        <mat-icon>picture_as_pdf</mat-icon>\n        Generar PDF (Version 3.0)\n    </button> -->\n</div>", styles: [".img{background-size:100%!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;height:22mm!important;margin:0!important;padding:0!important}h2{font-size:1rem!important;line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}h3{line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}.text-header{line-height:1.5!important;font-weight:700!important}.text-uppercase{text-transform:uppercase!important}.wrap-text{white-space:pre-wrap!important}.text-content{padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.borde{border:1px solid blue!important}.border-r{border-right:1px solid blue!important;min-height:100%!important;align-self:stretch!important}.container-text{display:flex!important;justify-content:center!important;align-items:center!important;min-height:inherit!important}.container-headers{display:flex!important;align-items:center!important;justify-content:space-evenly!important;width:100%!important;min-height:8mm!important;background:rgba(240,244,255,.6117647059)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.container-headers h2,.container-headers h3{font-weight:700!important}.flexible-row{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:11mm!important}.header-section{min-height:25mm!important}.footer-section{min-height:14mm!important;background:rgba(240,244,255,.35)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.description-section{min-height:20mm!important;padding:10px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.w-100{width:100%!important}.text-start{text-align:start!important}.white-background{background-color:#fff!important}.download-container{display:flex!important;justify-content:center!important;margin-top:15px!important}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+TemplateFuelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TemplateFuelComponent, selector: "app-template-fuel", ngImport: i0, template: "<div id=\"templateFO\" #templateFO>\n    <div class=\"d-flex flex-column w-100 white-background\">\n\n        <!-- Encabezado  -->\n        <div class=\"borde w-100 d-flex flex-row align-items-center header-section\">\n            <div class=\"d-flex flex-column align-items-center text-content\" style=\"width:80%\">\n                <h2 class=\"text-header text-uppercase wrap-text\">{{data.name}}</h2>\n                <h2 class=\"text-header wrap-text\">NIT: {{data.nit}}</h2>\n                <div class=\"w-100 d-flex flex-row justify-content-evenly\">\n                    <h3 class=\"text-header wrap-text\">{{data.address}}</h3>\n                    <h3 class=\"text-header wrap-text\">TEL: {{data.telephone}}</h3>\n                </div>\n            </div>\n            <div style=\"width:20%\">\n                <div class=\"img w-100\" [style.background-image]=\"'url(' + data.image + ')'\">\n                </div>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Orden de combustible</h2>\n            <h2 class=\"wrap-text\">N\u00B0: {{data.consecutive}}</h2>\n        </div>\n\n        <!-- Cuerpo -->\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">\u00C1rea:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.area}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">C\u00F3digo:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.code}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Fecha:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.date}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Operario:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.responsible}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Od\u00F3metro:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:44%\">\n                <h2 class=\"wrap-text\">{{data.odometer}}</h2>\n            </div>\n            <!-- <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Referencia Factura:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.invoiceReference}}</h2>\n            </div> -->\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h3>Datos del proveedor</h3>\n        </div>\n\n        <div class=\"borde flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Lugar:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.namePlace}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Direcci\u00F3n:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.addressPlace}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h3>Detalles del servicio</h3>\n        </div>\n\n        <div class=\"borde w-100 description-section\">\n            <h3 class=\"wrap-text text-start\">{{data.detalle}}</h3>\n            <h3 class=\"wrap-text text-start\">Descripci\u00F3n: {{data.description}}</h3>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:35%\">\n                <h2 class=\"fw-bold\">AUTORIZADA POR:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:65%\">\n                <h2 class=\"wrap-text\">{{data.approved_by}}</h2>\n            </div>\n        </div>\n\n        <!-- piso -->\n        <div class=\"borde d-flex flex-column align-items-center justify-content-center w-100 footer-section\">\n            <h2>Favor adjuntar la orden de venta o factura</h2>\n            <h2 class=\"wrap-text\">{{data.mail}}</h2>\n        </div>\n\n    </div>\n</div>\n\n<div class=\"download-container\">\n    <button (click)=\"generatePdfWithHtml2Canvas()\" color='primary' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF\n    </button>\n</div>", styles: [".img{background-size:100%!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;height:22mm!important;margin:0!important;padding:0!important}h2{font-size:1rem!important;line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}h3{line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}.text-header{line-height:1.5!important;font-weight:700!important}.text-uppercase{text-transform:uppercase!important}.wrap-text{white-space:pre-wrap!important}.text-content{padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.borde{border:1px solid blue!important}.border-r{border-right:1px solid blue!important;min-height:100%!important;align-self:stretch!important}.container-text{display:flex!important;justify-content:center!important;align-items:center!important;min-height:inherit!important}.container-headers{display:flex!important;align-items:center!important;justify-content:space-evenly!important;width:100%!important;min-height:8mm!important;background:rgba(240,244,255,.6117647059)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.container-headers h2,.container-headers h3{font-weight:700!important}.flexible-row{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:11mm!important}.header-section{min-height:25mm!important}.footer-section{min-height:14mm!important;background:rgba(240,244,255,.35)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.description-section{min-height:20mm!important;padding:10px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.w-100{width:100%!important}.text-start{text-align:start!important}.white-background{background-color:#fff!important}.download-container{display:flex!important;justify-content:center!important;margin-top:15px!important}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TemplateFuelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-template-fuel', template: "<div id=\"templateFO\" #templateFO>\n    <div class=\"d-flex flex-column w-100 white-background\">\n\n        <!-- Encabezado  -->\n        <div class=\"borde w-100 d-flex flex-row align-items-center header-section\">\n            <div class=\"d-flex flex-column align-items-center text-content\" style=\"width:80%\">\n                <h2 class=\"text-header text-uppercase wrap-text\">{{data.name}}</h2>\n                <h2 class=\"text-header wrap-text\">NIT: {{data.nit}}</h2>\n                <div class=\"w-100 d-flex flex-row justify-content-evenly\">\n                    <h3 class=\"text-header wrap-text\">{{data.address}}</h3>\n                    <h3 class=\"text-header wrap-text\">TEL: {{data.telephone}}</h3>\n                </div>\n            </div>\n            <div style=\"width:20%\">\n                <div class=\"img w-100\" [style.background-image]=\"'url(' + data.image + ')'\">\n                </div>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Orden de combustible</h2>\n            <h2 class=\"wrap-text\">N\u00B0: {{data.consecutive}}</h2>\n        </div>\n\n        <!-- Cuerpo -->\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">\u00C1rea:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.area}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">C\u00F3digo:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.code}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Fecha:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.date}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Operario:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.responsible}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Od\u00F3metro:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:44%\">\n                <h2 class=\"wrap-text\">{{data.odometer}}</h2>\n            </div>\n            <!-- <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Referencia Factura:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.invoiceReference}}</h2>\n            </div> -->\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h3>Datos del proveedor</h3>\n        </div>\n\n        <div class=\"borde flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Lugar:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.namePlace}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Direcci\u00F3n:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.addressPlace}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h3>Detalles del servicio</h3>\n        </div>\n\n        <div class=\"borde w-100 description-section\">\n            <h3 class=\"wrap-text text-start\">{{data.detalle}}</h3>\n            <h3 class=\"wrap-text text-start\">Descripci\u00F3n: {{data.description}}</h3>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:35%\">\n                <h2 class=\"fw-bold\">AUTORIZADA POR:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:65%\">\n                <h2 class=\"wrap-text\">{{data.approved_by}}</h2>\n            </div>\n        </div>\n\n        <!-- piso -->\n        <div class=\"borde d-flex flex-column align-items-center justify-content-center w-100 footer-section\">\n            <h2>Favor adjuntar la orden de venta o factura</h2>\n            <h2 class=\"wrap-text\">{{data.mail}}</h2>\n        </div>\n\n    </div>\n</div>\n\n<div class=\"download-container\">\n    <button (click)=\"generatePdfWithHtml2Canvas()\" color='primary' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF\n    </button>\n    <!-- <button (click)=\"generatePdfWithJsPDFVersion2()\" color='warn' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF (Version 2.0)\n    </button>\n    <button (click)=\"generatePdfWithJsPDFVersion3()\" color='accent' mat-raised-button>\n        <mat-icon>picture_as_pdf</mat-icon>\n        Generar PDF (Version 3.0)\n    </button> -->\n</div>", styles: [".img{background-size:100%!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;height:22mm!important;margin:0!important;padding:0!important}h2{font-size:1rem!important;line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}h3{line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}.text-header{line-height:1.5!important;font-weight:700!important}.text-uppercase{text-transform:uppercase!important}.wrap-text{white-space:pre-wrap!important}.text-content{padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.borde{border:1px solid blue!important}.border-r{border-right:1px solid blue!important;min-height:100%!important;align-self:stretch!important}.container-text{display:flex!important;justify-content:center!important;align-items:center!important;min-height:inherit!important}.container-headers{display:flex!important;align-items:center!important;justify-content:space-evenly!important;width:100%!important;min-height:8mm!important;background:rgba(240,244,255,.6117647059)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.container-headers h2,.container-headers h3{font-weight:700!important}.flexible-row{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:11mm!important}.header-section{min-height:25mm!important}.footer-section{min-height:14mm!important;background:rgba(240,244,255,.35)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.description-section{min-height:20mm!important;padding:10px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.w-100{width:100%!important}.text-start{text-align:start!important}.white-background{background-color:#fff!important}.download-container{display:flex!important;justify-content:center!important;margin-top:15px!important}\n"] }]
+            args: [{ selector: 'app-template-fuel', template: "<div id=\"templateFO\" #templateFO>\n    <div class=\"d-flex flex-column w-100 white-background\">\n\n        <!-- Encabezado  -->\n        <div class=\"borde w-100 d-flex flex-row align-items-center header-section\">\n            <div class=\"d-flex flex-column align-items-center text-content\" style=\"width:80%\">\n                <h2 class=\"text-header text-uppercase wrap-text\">{{data.name}}</h2>\n                <h2 class=\"text-header wrap-text\">NIT: {{data.nit}}</h2>\n                <div class=\"w-100 d-flex flex-row justify-content-evenly\">\n                    <h3 class=\"text-header wrap-text\">{{data.address}}</h3>\n                    <h3 class=\"text-header wrap-text\">TEL: {{data.telephone}}</h3>\n                </div>\n            </div>\n            <div style=\"width:20%\">\n                <div class=\"img w-100\" [style.background-image]=\"'url(' + data.image + ')'\">\n                </div>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h2>Orden de combustible</h2>\n            <h2 class=\"wrap-text\">N\u00B0: {{data.consecutive}}</h2>\n        </div>\n\n        <!-- Cuerpo -->\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">\u00C1rea:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.area}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">C\u00F3digo:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.code}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Fecha:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.date}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Operario:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:32%\">\n                <h2 class=\"wrap-text\">{{data.responsible}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Od\u00F3metro:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:44%\">\n                <h2 class=\"wrap-text\">{{data.odometer}}</h2>\n            </div>\n            <!-- <div class=\"border-r container-text\" style=\"width:12%\">\n                <h2 class=\"fw-bold\">Referencia Factura:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:16%\">\n                <h2 class=\"wrap-text\">{{data.invoiceReference}}</h2>\n            </div> -->\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h3>Datos del proveedor</h3>\n        </div>\n\n        <div class=\"borde flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Lugar:</h2>\n            </div>\n            <div class=\"border-r container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.namePlace}}</h2>\n            </div>\n            <div class=\"border-r container-text\" style=\"width:15%\">\n                <h2 class=\"fw-bold\">Direcci\u00F3n:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:35%\">\n                <h2 class=\"wrap-text\">{{data.addressPlace}}</h2>\n            </div>\n        </div>\n\n        <div class=\"borde container-headers\">\n            <h3>Detalles del servicio</h3>\n        </div>\n\n        <div class=\"borde w-100 description-section\">\n            <h3 class=\"wrap-text text-start\">{{data.detalle}}</h3>\n            <h3 class=\"wrap-text text-start\">Descripci\u00F3n: {{data.description}}</h3>\n        </div>\n\n        <div class=\"borde w-100 flexible-row\">\n            <div class=\"border-r container-text\" style=\"width:35%\">\n                <h2 class=\"fw-bold\">AUTORIZADA POR:</h2>\n            </div>\n            <div class=\"container-text text-content\" style=\"width:65%\">\n                <h2 class=\"wrap-text\">{{data.approved_by}}</h2>\n            </div>\n        </div>\n\n        <!-- piso -->\n        <div class=\"borde d-flex flex-column align-items-center justify-content-center w-100 footer-section\">\n            <h2>Favor adjuntar la orden de venta o factura</h2>\n            <h2 class=\"wrap-text\">{{data.mail}}</h2>\n        </div>\n\n    </div>\n</div>\n\n<div class=\"download-container\">\n    <button (click)=\"generatePdfWithHtml2Canvas()\" color='primary' mat-raised-button style=\"margin-right: 10px;\">\n        Generar PDF\n    </button>\n</div>", styles: [".img{background-size:100%!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;height:22mm!important;margin:0!important;padding:0!important}h2{font-size:1rem!important;line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}h3{line-height:1.2!important;margin:0!important;padding:0!important;text-align:center!important}.text-header{line-height:1.5!important;font-weight:700!important}.text-uppercase{text-transform:uppercase!important}.wrap-text{white-space:pre-wrap!important}.text-content{padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.borde{border:1px solid blue!important}.border-r{border-right:1px solid blue!important;min-height:100%!important;align-self:stretch!important}.container-text{display:flex!important;justify-content:center!important;align-items:center!important;min-height:inherit!important}.container-headers{display:flex!important;align-items:center!important;justify-content:space-evenly!important;width:100%!important;min-height:8mm!important;background:rgba(240,244,255,.6117647059)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.container-headers h2,.container-headers h3{font-weight:700!important}.flexible-row{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:11mm!important}.header-section{min-height:25mm!important}.footer-section{min-height:14mm!important;background:rgba(240,244,255,.35)!important;padding:5px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.description-section{min-height:20mm!important;padding:10px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}.w-100{width:100%!important}.text-start{text-align:start!important}.white-background{background-color:#fff!important}.download-container{display:flex!important;justify-content:center!important;margin-top:15px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2088,6 +1790,27 @@ class FunctionsService {
         });
         return uniqueArray;
     }
+    transformDate(date) {
+        if (!date) {
+            return '';
+        }
+        const dateObj = new Date(date);
+        const day = this.validateTwoDigitFormat(dateObj.getDate().toString());
+        const month = this.validateTwoDigitFormat((dateObj.getMonth() + 1).toString());
+        const year = dateObj.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+    formatNumber(value) {
+        if (value === null || value === undefined) {
+            return '$ 0';
+        }
+        return new Intl.NumberFormat('es-CO', {
+            style: 'currency',
+            currency: 'COP',
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        }).format(value);
+    }
     validateTwoDigitFormat(number) {
         if (number.length == 1)
             number = "0" + number;
@@ -3766,11 +3489,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: CryptoService }]; } });
 
+class PurchaseOrderPdfService {
+    constructor(functions) {
+        this.functions = functions;
+    }
+    generatePurchaseOrderPDF(order, options) {
+        return new Promise((resolve, reject) => {
+            try {
+                const opts = {
+                    format: 'letter',
+                    download: true,
+                    filename: `orden_compra_${order.consecutive}.pdf`,
+                    ...options
+                };
+                const doc = new jsPDF('p', 'pt', opts.format);
+                const pageWidth = doc.internal.pageSize.getWidth();
+                const margin = 40;
+                let currentY = margin;
+                // === ENCABEZADO ===
+                currentY = this.addHeader(doc, order, currentY, pageWidth, margin);
+                currentY += 18;
+                // === DETALLES DE LA ORDEN ===
+                currentY = this.addOrderDetails(doc, order, currentY, margin, pageWidth);
+                currentY += 20;
+                // === ITEMS DE LA ORDEN ===
+                currentY = this.addOrderItems(doc, order, currentY, margin, pageWidth);
+                currentY += 20;
+                // === COMENTARIOS ===
+                if (order.comment) {
+                    currentY = this.addComments(doc, order, currentY, margin, pageWidth);
+                    currentY += 20;
+                }
+                // === PIE DE PÁGINA ===
+                this.addFooter(doc, pageWidth, doc.internal.pageSize.getHeight());
+                if (opts.download) {
+                    doc.save(opts.filename);
+                }
+                resolve(doc);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    }
+    addHeader(doc, order, y, pageWidth, margin) {
+        // Título centrado y número derecha
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(14);
+        doc.setTextColor(0, 0, 0);
+        doc.text('ORDEN DE COMPRA', pageWidth / 2, y + 8, { align: 'center' });
+        doc.setFontSize(10);
+        doc.text(`N° ${order.consecutive}`, pageWidth - margin, y + 8, { align: 'right' });
+        y += 26;
+        // Línea bajo título
+        doc.setDrawColor(180);
+        doc.setLineWidth(0.5);
+        doc.line(margin, y, pageWidth - margin, y);
+        y += 8;
+        // Logo a la izquierda
+        const logoW = 80;
+        const logoH = 60;
+        if (order.image) {
+            doc.addImage(order.image, 'PNG', margin, y, logoW, logoH);
+        }
+        // Datos empresa a la derecha (alineados a la derecha)
+        const rightX = pageWidth - margin;
+        let infoY = y + 2;
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(10);
+        if (order.name) {
+            doc.text(order.name, rightX, infoY, { align: 'right' });
+            infoY += 14;
+        }
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(8);
+        const add = (value) => {
+            if (!value)
+                return;
+            doc.text(value, rightX, infoY, { align: 'right' });
+            infoY += 12;
+        };
+        add(order.nit ? `Nit: ${order.nit}` : '');
+        add(order.address);
+        add(order.telephone ? `Tel: ${order.telephone}` : '');
+        add(order.mail ? `Email: ${order.mail}` : '');
+        // Altura total ocupada
+        const blockBottom = Math.max(y + logoH, infoY);
+        const separatorY = blockBottom + 6;
+        // Separador
+        doc.setDrawColor(180);
+        doc.line(margin, separatorY, pageWidth - margin, separatorY);
+        return separatorY + 10;
+    }
+    addOrderDetails(doc, order, y, margin, pageWidth) {
+        doc.setFontSize(10);
+        const rows = [
+            [
+                { content: `Proveedor: ${order.providerName}`, styles: { fontStyle: 'bold' } },
+                { content: `Fecha de creación: ${this.functions.transformDate(order.created)}`, styles: { halign: 'right' } }
+            ],
+            [
+                { content: `Almacén: ${order.warehouse}` },
+                { content: `Solicita: ${order.requestsName}`, styles: { halign: 'right' } }
+            ]
+        ];
+        if (order.authorizeName && order.authorizeName !== order.requestsName) {
+            rows.push([
+                { content: '' },
+                { content: `Autoriza: ${order.authorizeName}`, styles: { halign: 'right' } }
+            ]);
+        }
+        doc.autoTable({
+            startY: y,
+            body: rows,
+            theme: 'plain',
+            styles: { fontSize: 10, cellPadding: 2 }
+        });
+        return doc.lastAutoTable.finalY;
+    }
+    addOrderItems(doc, order, y, margin, pageWidth) {
+        const head = [['Código', 'Nombre', 'U.M.', 'Cant.', 'Descripción']];
+        const body = order.items.map(item => [
+            item.code,
+            item.itemName,
+            item.unitMeasurement,
+            item.amount,
+            item.description || ''
+        ]);
+        doc.autoTable({
+            startY: y,
+            head: head,
+            body: body,
+            theme: 'grid',
+            headStyles: { fillColor: [220, 220, 220], textColor: 0, fontStyle: 'bold' },
+            columnStyles: {
+                3: { halign: 'right' },
+                4: { halign: 'right' },
+                5: { halign: 'right' }
+            }
+        });
+        let finalY = doc.lastAutoTable.finalY;
+        return finalY;
+    }
+    addComments(doc, order, y, margin, pageWidth) {
+        doc.setFontSize(10);
+        doc.setFont('helvetica', 'bold');
+        doc.text('Comentarios:', margin, y);
+        y += 15;
+        doc.setFont('helvetica', 'normal');
+        const splitText = doc.splitTextToSize(order.comment, pageWidth - margin * 2);
+        doc.text(splitText, margin, y);
+        return y + splitText.length * 12;
+    }
+    addFooter(doc, pageWidth, pageHeight) {
+        const footerText = 'Documento generado por Brainloper';
+        doc.setFontSize(8);
+        const footerWidth = doc.getStringUnitWidth(footerText) * 8 / doc.internal.scaleFactor;
+        doc.text(footerText, (pageWidth - footerWidth) / 2, pageHeight - 20);
+    }
+}
+PurchaseOrderPdfService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PurchaseOrderPdfService, deps: [{ token: FunctionsService }], target: i0.ɵɵFactoryTarget.Injectable });
+PurchaseOrderPdfService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PurchaseOrderPdfService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PurchaseOrderPdfService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: FunctionsService }]; } });
+
 class GeneratePdfService {
-    constructor(dialog, workOrderPdfService, FuelOrderPdfService) {
+    constructor(dialog, workOrderPdfService, FuelOrderPdfService, purchaseOrderPdfService) {
         this.dialog = dialog;
         this.workOrderPdfService = workOrderPdfService;
         this.FuelOrderPdfService = FuelOrderPdfService;
+        this.purchaseOrderPdfService = purchaseOrderPdfService;
     }
     getPdfOt(data, autoGenerateData) {
         let autoGenerate = false;
@@ -3811,62 +3703,40 @@ class GeneratePdfService {
             });
         });
     }
-    /**
-   * Método mejorado para generar PDF de orden de combustible
-   */
-    getPdfFoNew(data, autoGenerateData) {
+    getPdfFoV2(data) {
         return new Promise((resolve, reject) => {
-            if (autoGenerateData) {
-                this.FuelOrderPdfService.generateFuelOrderPDF(data)
-                    .then(() => resolve(true))
-                    .catch(error => reject(error));
-            }
-            else {
-                let screen = "850px";
-                this.dialog.open(TemplateFuelComponent, {
-                    data: {
-                        data,
-                        autoGenerate: false,
-                        useNewMethod: true
-                    },
-                    width: screen
-                }).afterClosed().subscribe((res) => {
-                    resolve(true);
-                });
-            }
+            this.FuelOrderPdfService.generateFuelOrderProfesionalPDF(data)
+                .then(() => resolve(true))
+                .catch(error => reject(error));
         });
     }
-    getPdfOtNew(data, autoGenerateData) {
+    getPdfOtV2(data) {
         return new Promise((resolve, reject) => {
-            if (autoGenerateData) {
-                this.workOrderPdfService.generateWorkOrderPDF(data)
-                    .then(() => resolve(true))
-                    .catch(error => reject(error));
-            }
-            else {
-                let screen = "850px";
-                this.dialog.open(TemplateOtComponent, {
-                    data: {
-                        data,
-                        autoGenerate: false,
-                        useNewMethod: true
-                    },
-                    width: screen
-                }).afterClosed().subscribe((res) => {
-                    resolve(true);
-                });
-            }
+            this.workOrderPdfService.generateWorkOrderPDF(data)
+                .then(() => resolve(true))
+                .catch(error => reject(error));
+        });
+    }
+    generatePurchaseOrderPDF(order) {
+        return new Promise((resolve, reject) => {
+            this.purchaseOrderPdfService.generatePurchaseOrderPDF(order, { download: false })
+                .then((doc) => {
+                const blobUrl = doc.output('bloburl');
+                window.open(blobUrl, '_blank');
+                resolve(true);
+            })
+                .catch(error => reject(error));
         });
     }
 }
-GeneratePdfService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeneratePdfService, deps: [{ token: i1.MatDialog }, { token: WorkOrderPdfService }, { token: FuelOrderPdfService }], target: i0.ɵɵFactoryTarget.Injectable });
+GeneratePdfService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeneratePdfService, deps: [{ token: i1.MatDialog }, { token: WorkOrderPdfService }, { token: FuelOrderPdfService }, { token: PurchaseOrderPdfService }], target: i0.ɵɵFactoryTarget.Injectable });
 GeneratePdfService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeneratePdfService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeneratePdfService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: WorkOrderPdfService }, { type: FuelOrderPdfService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: WorkOrderPdfService }, { type: FuelOrderPdfService }, { type: PurchaseOrderPdfService }]; } });
 
 class LocalStorageService {
     constructor() {