brainloper-ui 20.0.5 → 20.0.7

package/fesm2022/brainloper-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Inject, ViewEncapsulation, Component, Injectable, EventEmitter, Output, Input, ViewChild, Directive, ContentChildren, NgModule } from '@angular/core';
+import { Inject, ViewEncapsulation, Component, Injectable, forwardRef, HostListener, Directive, EventEmitter, Output, Input, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@angular/material/button';
@@ -53,7 +53,7 @@ import { MatTableModule } from '@angular/material/table';
 import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i1$2 from '@angular/forms';
-import { UntypedFormGroup, UntypedFormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
 import { HttpParams, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { forkJoin } from 'rxjs';
@@ -61,7 +61,7 @@ import { map } from 'rxjs/operators';
 import Swal from 'sweetalert2';
 import { jsPDF } from 'jspdf';
 import html2canvas from 'html2canvas';
-import 'jspdf-autotable';
+import autoTable from 'jspdf-autotable';
 import * as i1$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { modulesByRol } from '@edgarzon93/brainloper-shared';
@@ -438,6 +438,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: MessageService }] });
 
+class ThousandSeparatorDirective {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(el) {
+        this.el = el;
+    }
+    writeValue(value) {
+        if (value !== null && value !== undefined) {
+            const stringValue = value.toString();
+            let cleanValue = stringValue.replace(/[^\d]/g, '');
+            const parts = cleanValue.split('.');
+            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+            this.el.nativeElement.value = parts.join('.');
+        }
+        else {
+            this.el.nativeElement.value = '';
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.nativeElement.disabled = isDisabled;
+    }
+    onInput(event) {
+        const input = event.target;
+        const originalValue = input.value;
+        const cursorStart = input.selectionStart ?? 0;
+        let digitsBeforeCursor = 0;
+        for (let i = 0; i < cursorStart; i++) {
+            if (/\d/.test(originalValue[i])) {
+                digitsBeforeCursor++;
+            }
+        }
+        let value = originalValue.replace(/[^\d]/g, '');
+        let numericValue = value;
+        const parts = value.split('.');
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+        value = parts.join('.');
+        if (value !== originalValue) {
+            input.value = value;
+            let newCursorPos = 0;
+            let digitsSeen = 0;
+            for (let i = 0; i < value.length; i++) {
+                if (digitsSeen >= digitsBeforeCursor) {
+                    break;
+                }
+                if (/\d/.test(value[i])) {
+                    digitsSeen++;
+                }
+                newCursorPos++;
+            }
+            input.setSelectionRange(newCursorPos, newCursorPos);
+        }
+        if (numericValue === '') {
+            this.onChange(null);
+        }
+        else {
+            this.onChange(Number(numericValue));
+        }
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThousandSeparatorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThousandSeparatorDirective, isStandalone: false, selector: "[appThousandSeparator]", host: { listeners: { "input": "onInput($event)", "blur": "onBlur()" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ThousandSeparatorDirective),
+                multi: true
+            }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThousandSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appThousandSeparator]',
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ThousandSeparatorDirective),
+                            multi: true
+                        }],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 class TableModalComponent {
     dialogRef;
     data;
@@ -518,6 +612,9 @@ class TableModalComponent {
                         this.modalForm.addControl(element.ID + 'Combo', new UntypedFormControl(x));
                     }
                 }
+                if (element.type === 'thousandSeparator') {
+                    this.modalForm.get(element.ID).setValue(this.modalForm.value[element.ID]?.toString().replace(/\./g, ''));
+                }
             });
             this.dialogRef.close(this.modalForm.value);
         }
@@ -533,11 +630,11 @@ class TableModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableModalComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HttpService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableModalComponent, isStandalone: false, selector: "app-table-modal", ngImport: i0, template: "<mat-dialog-content>\n  <div style='display:flex; justify-content: space-between;'>\n    <div>\n      <strong>\n        @if (data.action==\"edit\") {\n          <h3> Editar </h3>\n        }\n        @if (data.action==\"add\") {\n          <h3> Agregar </h3>\n        }\n      </strong>\n    </div>\n    <div mat-dialog-close>\n      <i class=\"fa fa-times-circle\" style=\"font-size: 150%; position: relative;\"></i>\n    </div>\n  </div>\n\n  <form [formGroup]=\"modalForm\">\n\n    @for (input of data.columns; track input) {\n      <div>\n        @if (data.action==\"edit\") {\n          <div>\n            @if (!input.disregardForEdit) {\n              <mat-form-field>\n                <mat-label>{{input.label}}</mat-label>\n                @if (input.type==\"combo\") {\n                  <div>\n                    <mat-select [value]=\"input.value\" (selectionChange)='onChange(input.ID,$event, input.type)'\n                      placeholder='{{input.label}}' [required]=\"input.required\">\n                      @for (data of dataCombo[input.identifierCombo]; track data) {\n                        <mat-option\n                          [value]='data[input.paramsCombo.selectionField]'>\n                        {{data[input.paramsCombo.visibleField]}}</mat-option>\n                      }\n                    </mat-select>\n                  </div>\n                } @else {\n                  <input [type]='input.type' [name]='input.ID' [value]='input.value'\n                    (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label'\n                    [required]=\"input.required\" />\n                }\n                <mat-error>Campo Obligatorio</mat-error>\n              </mat-form-field>\n            }\n          </div>\n        } @else {\n          @if (!input.disregardForAdd) {\n            <mat-form-field>\n              <mat-label>{{input.label}}</mat-label>\n              @if (input.type==\"combo\") {\n                <div>\n                  <mat-select (selectionChange)='onChange(input.ID,$event, input.type)'\n                    placeholder='{{input.label}}' [required]=\"input.required\">\n                    @for (data of dataCombo[input.identifierCombo]; track data) {\n                      <mat-option\n                        [value]='data[input.paramsCombo.selectionField]'>\n                      {{data[input.paramsCombo.visibleField]}}</mat-option>\n                    }\n                  </mat-select>\n                </div>\n              } @else {\n                <input [type]='input.type' [name]='input.ID' (input)='onChange(input.ID, $event, input.type)'\n                  matInput [placeholder]='input.label' [required]=\"input.required\" />\n              }\n              <mat-error>Campo Obligatorio</mat-error>\n            </mat-form-field>\n          }\n        }\n      </div>\n    }\n\n    @if (data.action==\"add\" || data.action==\"edit\") {\n      <button (click)='onSubmit()' color='primary' mat-raised-button\n      [disabled]=\"!modalForm.valid\">Guardar</button>\n    }\n\n  </form>\n</mat-dialog-content>", styles: ["button{width:100%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableModalComponent, isStandalone: false, selector: "app-table-modal", ngImport: i0, template: "<mat-dialog-content>\n  <div style='display:flex; justify-content: space-between;'>\n    <div>\n      <strong>\n        @if (data.action==\"edit\") {\n          <h3> Editar </h3>\n        }\n        @if (data.action==\"add\") {\n          <h3> Agregar </h3>\n        }\n      </strong>\n    </div>\n    <div mat-dialog-close>\n      <i class=\"fa fa-times-circle\" style=\"font-size: 150%; position: relative;\"></i>\n    </div>\n  </div>\n\n  <form [formGroup]=\"modalForm\">\n\n    @for (input of data.columns; track input) {\n      <div>\n        @if (data.action==\"edit\") {\n          <div>\n            @if (!input.disregardForEdit) {\n              <mat-form-field>\n                <mat-label>{{input.label}}</mat-label>\n                @if (input.type==\"combo\") {\n                  <div>\n                    <mat-select [value]=\"input.value\" (selectionChange)='onChange(input.ID,$event, input.type)'\n                      placeholder='{{input.label}}' [required]=\"input.required\">\n                      @for (data of dataCombo[input.identifierCombo]; track data) {\n                        <mat-option\n                          [value]='data[input.paramsCombo.selectionField]'>\n                        {{data[input.paramsCombo.visibleField]}}</mat-option>\n                      }\n                    </mat-select>\n                  </div>\n                } @else if (input.type == 'thousandSeparator') {\n                  <input type='text' appThousandSeparator [name]='input.ID' [value]='input.value'\n                    (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label'\n                    [required]=\"input.required\" />\n                } @else {\n                  <input [type]='input.type' [name]='input.ID' [value]='input.value'\n                    (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label'\n                    [required]=\"input.required\" />\n                }\n                <mat-error>Campo Obligatorio</mat-error>\n              </mat-form-field>\n            }\n          </div>\n        } @else {\n          @if (!input.disregardForAdd) {\n            <mat-form-field>\n              <mat-label>{{input.label}}</mat-label>\n              @if (input.type==\"combo\") {\n                <div>\n                  <mat-select (selectionChange)='onChange(input.ID,$event, input.type)'\n                    placeholder='{{input.label}}' [required]=\"input.required\">\n                    @for (data of dataCombo[input.identifierCombo]; track data) {\n                      <mat-option\n                        [value]='data[input.paramsCombo.selectionField]'>\n                      {{data[input.paramsCombo.visibleField]}}</mat-option>\n                    }\n                  </mat-select>\n                </div>\n              } @else if (input.type == 'thousandSeparator') {\n                <input type='text' appThousandSeparator [name]='input.ID'\n                  (input)='onChange(input.ID, $event, input.type)'\n                  matInput [placeholder]='input.label' [required]=\"input.required\" />\n              } @else {\n                <input [type]='input.type' [name]='input.ID' (input)='onChange(input.ID, $event, input.type)'\n                  matInput [placeholder]='input.label' [required]=\"input.required\" />\n              }\n              <mat-error>Campo Obligatorio</mat-error>\n            </mat-form-field>\n          }\n        }\n      </div>\n    }\n\n    @if (data.action==\"add\" || data.action==\"edit\") {\n      <button (click)='onSubmit()' color='primary' mat-raised-button\n      [disabled]=\"!modalForm.valid\">Guardar</button>\n    }\n\n  </form>\n</mat-dialog-content>", styles: ["button{width:100%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThousandSeparatorDirective, selector: "[appThousandSeparator]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-modal', standalone: false, template: "<mat-dialog-content>\n  <div style='display:flex; justify-content: space-between;'>\n    <div>\n      <strong>\n        @if (data.action==\"edit\") {\n          <h3> Editar </h3>\n        }\n        @if (data.action==\"add\") {\n          <h3> Agregar </h3>\n        }\n      </strong>\n    </div>\n    <div mat-dialog-close>\n      <i class=\"fa fa-times-circle\" style=\"font-size: 150%; position: relative;\"></i>\n    </div>\n  </div>\n\n  <form [formGroup]=\"modalForm\">\n\n    @for (input of data.columns; track input) {\n      <div>\n        @if (data.action==\"edit\") {\n          <div>\n            @if (!input.disregardForEdit) {\n              <mat-form-field>\n                <mat-label>{{input.label}}</mat-label>\n                @if (input.type==\"combo\") {\n                  <div>\n                    <mat-select [value]=\"input.value\" (selectionChange)='onChange(input.ID,$event, input.type)'\n                      placeholder='{{input.label}}' [required]=\"input.required\">\n                      @for (data of dataCombo[input.identifierCombo]; track data) {\n                        <mat-option\n                          [value]='data[input.paramsCombo.selectionField]'>\n                        {{data[input.paramsCombo.visibleField]}}</mat-option>\n                      }\n                    </mat-select>\n                  </div>\n                } @else {\n                  <input [type]='input.type' [name]='input.ID' [value]='input.value'\n                    (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label'\n                    [required]=\"input.required\" />\n                }\n                <mat-error>Campo Obligatorio</mat-error>\n              </mat-form-field>\n            }\n          </div>\n        } @else {\n          @if (!input.disregardForAdd) {\n            <mat-form-field>\n              <mat-label>{{input.label}}</mat-label>\n              @if (input.type==\"combo\") {\n                <div>\n                  <mat-select (selectionChange)='onChange(input.ID,$event, input.type)'\n                    placeholder='{{input.label}}' [required]=\"input.required\">\n                    @for (data of dataCombo[input.identifierCombo]; track data) {\n                      <mat-option\n                        [value]='data[input.paramsCombo.selectionField]'>\n                      {{data[input.paramsCombo.visibleField]}}</mat-option>\n                    }\n                  </mat-select>\n                </div>\n              } @else {\n                <input [type]='input.type' [name]='input.ID' (input)='onChange(input.ID, $event, input.type)'\n                  matInput [placeholder]='input.label' [required]=\"input.required\" />\n              }\n              <mat-error>Campo Obligatorio</mat-error>\n            </mat-form-field>\n          }\n        }\n      </div>\n    }\n\n    @if (data.action==\"add\" || data.action==\"edit\") {\n      <button (click)='onSubmit()' color='primary' mat-raised-button\n      [disabled]=\"!modalForm.valid\">Guardar</button>\n    }\n\n  </form>\n</mat-dialog-content>", styles: ["button{width:100%}mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'app-table-modal', standalone: false, template: "<mat-dialog-content>\n  <div style='display:flex; justify-content: space-between;'>\n    <div>\n      <strong>\n        @if (data.action==\"edit\") {\n          <h3> Editar </h3>\n        }\n        @if (data.action==\"add\") {\n          <h3> Agregar </h3>\n        }\n      </strong>\n    </div>\n    <div mat-dialog-close>\n      <i class=\"fa fa-times-circle\" style=\"font-size: 150%; position: relative;\"></i>\n    </div>\n  </div>\n\n  <form [formGroup]=\"modalForm\">\n\n    @for (input of data.columns; track input) {\n      <div>\n        @if (data.action==\"edit\") {\n          <div>\n            @if (!input.disregardForEdit) {\n              <mat-form-field>\n                <mat-label>{{input.label}}</mat-label>\n                @if (input.type==\"combo\") {\n                  <div>\n                    <mat-select [value]=\"input.value\" (selectionChange)='onChange(input.ID,$event, input.type)'\n                      placeholder='{{input.label}}' [required]=\"input.required\">\n                      @for (data of dataCombo[input.identifierCombo]; track data) {\n                        <mat-option\n                          [value]='data[input.paramsCombo.selectionField]'>\n                        {{data[input.paramsCombo.visibleField]}}</mat-option>\n                      }\n                    </mat-select>\n                  </div>\n                } @else if (input.type == 'thousandSeparator') {\n                  <input type='text' appThousandSeparator [name]='input.ID' [value]='input.value'\n                    (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label'\n                    [required]=\"input.required\" />\n                } @else {\n                  <input [type]='input.type' [name]='input.ID' [value]='input.value'\n                    (input)='onChange(input.ID,$event, input.type)' matInput [placeholder]='input.label'\n                    [required]=\"input.required\" />\n                }\n                <mat-error>Campo Obligatorio</mat-error>\n              </mat-form-field>\n            }\n          </div>\n        } @else {\n          @if (!input.disregardForAdd) {\n            <mat-form-field>\n              <mat-label>{{input.label}}</mat-label>\n              @if (input.type==\"combo\") {\n                <div>\n                  <mat-select (selectionChange)='onChange(input.ID,$event, input.type)'\n                    placeholder='{{input.label}}' [required]=\"input.required\">\n                    @for (data of dataCombo[input.identifierCombo]; track data) {\n                      <mat-option\n                        [value]='data[input.paramsCombo.selectionField]'>\n                      {{data[input.paramsCombo.visibleField]}}</mat-option>\n                    }\n                  </mat-select>\n                </div>\n              } @else if (input.type == 'thousandSeparator') {\n                <input type='text' appThousandSeparator [name]='input.ID'\n                  (input)='onChange(input.ID, $event, input.type)'\n                  matInput [placeholder]='input.label' [required]=\"input.required\" />\n              } @else {\n                <input [type]='input.type' [name]='input.ID' (input)='onChange(input.ID, $event, input.type)'\n                  matInput [placeholder]='input.label' [required]=\"input.required\" />\n              }\n              <mat-error>Campo Obligatorio</mat-error>\n            </mat-form-field>\n          }\n        }\n      </div>\n    }\n\n    @if (data.action==\"add\" || data.action==\"edit\") {\n      <button (click)='onSubmit()' color='primary' mat-raised-button\n      [disabled]=\"!modalForm.valid\">Guardar</button>\n    }\n\n  </form>\n</mat-dialog-content>", styles: ["button{width:100%}mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -986,7 +1083,7 @@ class WorkOrderPdfService {
                 { content: data.invoiceReference || '-', styles: {} }
             ]
         ];
-        doc.autoTable({
+        autoTable(doc, {
             startY: y,
             body: tableData,
             theme: 'grid',
@@ -1025,7 +1122,7 @@ class WorkOrderPdfService {
                 { content: data.addressProvider || '', styles: {} }
             ]
         ];
-        doc.autoTable({
+        autoTable(doc, {
             startY: y + 20,
             body: tableData,
             theme: 'grid',
@@ -1140,7 +1237,7 @@ class WorkOrderPdfService {
                 { content: data.approved_by || '', styles: { fontSize: 12 } }
             ]
         ];
-        doc.autoTable({
+        autoTable(doc, {
             startY: y,
             body: tableData,
             theme: 'grid',
@@ -1251,11 +1348,11 @@ class TemplateOtComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateOtComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialog }, { token: MessageService }, { token: WorkOrderPdfService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TemplateOtComponent, isStandalone: false, selector: "app-template-ot", ngImport: i0, template: "<mat-dialog-content 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</mat-dialog-content>\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:#f0f4ff9c!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:#f0f4ff59!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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TemplateOtComponent, isStandalone: false, selector: "app-template-ot", ngImport: i0, template: "<mat-dialog-content 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\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>\n</mat-dialog-content>\n\n", 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:#f0f4ff9c!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:#f0f4ff59!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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateOtComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-template-ot', standalone: false, template: "<mat-dialog-content 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</mat-dialog-content>\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:#f0f4ff9c!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:#f0f4ff59!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', standalone: false, template: "<mat-dialog-content 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\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>\n</mat-dialog-content>\n\n", 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:#f0f4ff9c!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:#f0f4ff59!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: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1395,7 +1492,7 @@ class FuelOrderPdfService {
                 { content: data.odometer, styles: {} }
             ]
         ];
-        doc.autoTable({
+        autoTable(doc, {
             startY: y,
             body: tableData,
             theme: 'grid',
@@ -1434,7 +1531,7 @@ class FuelOrderPdfService {
                 { content: data.addressPlace, styles: {} }
             ]
         ];
-        doc.autoTable({
+        autoTable(doc, {
             startY: y + 20,
             body: tableData,
             theme: 'grid',
@@ -1559,7 +1656,7 @@ class FuelOrderPdfService {
                 { content: data.approved_by, styles: { fontSize: 12 } }
             ]
         ];
-        doc.autoTable({
+        autoTable(doc, {
             startY: y,
             body: tableData,
             theme: 'grid',
@@ -1673,11 +1770,11 @@ class TemplateFuelComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateFuelComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialog }, { token: MessageService }, { token: FuelOrderPdfService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TemplateFuelComponent, isStandalone: false, selector: "app-template-fuel", ngImport: i0, template: "<mat-dialog-content 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</mat-dialog-content>\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:#f0f4ff9c!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:#f0f4ff59!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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TemplateFuelComponent, isStandalone: false, selector: "app-template-fuel", ngImport: i0, template: "<mat-dialog-content 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\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>\n</mat-dialog-content>\n", 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:#f0f4ff9c!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:#f0f4ff59!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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateFuelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-template-fuel', standalone: false, template: "<mat-dialog-content 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</mat-dialog-content>\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:#f0f4ff9c!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:#f0f4ff59!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', standalone: false, template: "<mat-dialog-content 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\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>\n</mat-dialog-content>\n", 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:#f0f4ff9c!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:#f0f4ff59!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: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2582,7 +2679,7 @@ class DataTableComponent {
                         this.functionEter.dateIso(columnValue);
                 if (columns.type == 'dateWithTime')
                     this.data[indexData][columns.ID] = this.functionEter.dateWithTime(columnValue?.toString() ?? columnValue);
-                if (columns.type == 'currency')
+                if (columns.type == 'currency' || columns.type == 'thousandSeparator')
                     this.data[indexData][columns.ID] =
                         Intl.NumberFormat('es-CO').format(columnValue);
                 if (columns.type == 'boolean')
@@ -2694,7 +2791,13 @@ class DataTableComponent {
                         .afterClosed()
                         .subscribe((result) => {
                         if (result) {
-                            this.edit.emit({ new: result, old: currentRow[0] });
+                            const oldRow = { ...currentRow[0] };
+                            this.columns.forEach(col => {
+                                if (col.type === 'thousandSeparator' && oldRow[col.ID] != null) {
+                                    oldRow[col.ID] = oldRow[col.ID].toString().replace(/\./g, '');
+                                }
+                            });
+                            this.edit.emit({ new: result, old: oldRow });
                         }
                     });
                 }
@@ -3311,7 +3414,8 @@ class BrainloperUiModule {
             CarouselComponent,
             FiltersComponent,
             SelectFilterComponent,
-            CarouselItemDirective], imports: [CommonModule,
+            CarouselItemDirective,
+            ThousandSeparatorDirective], imports: [CommonModule,
             MatButtonModule, MatSlideToggleModule,
             MatProgressBarModule,
             MatRippleModule,
@@ -3396,7 +3500,8 @@ class BrainloperUiModule {
             CarouselComponent,
             FiltersComponent,
             SelectFilterComponent,
-            CarouselItemDirective] });
+            CarouselItemDirective,
+            ThousandSeparatorDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrainloperUiModule, providers: [
             HttpService,
             provideHttpClient(withInterceptorsFromDi())
@@ -3466,7 +3571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CarouselComponent,
                         FiltersComponent,
                         SelectFilterComponent,
-                        CarouselItemDirective
+                        CarouselItemDirective,
+                        ThousandSeparatorDirective
                     ],
                     exports: [
                         ...Material,
@@ -3482,7 +3588,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         CarouselComponent,
                         FiltersComponent,
                         SelectFilterComponent,
-                        CarouselItemDirective
+                        CarouselItemDirective,
+                        ThousandSeparatorDirective
                     ], imports: [
                         CommonModule,
                         MatButtonModule,
@@ -3697,7 +3804,7 @@ class PurchaseOrderPdfService {
                 { content: `Autoriza: ${order.authorizeName}`, styles: { halign: 'right' } }
             ]);
         }
-        doc.autoTable({
+        autoTable(doc, {
             startY: y,
             body: rows,
             theme: 'plain',
@@ -3714,7 +3821,7 @@ class PurchaseOrderPdfService {
             item.amount,
             item.description || ''
         ]);
-        doc.autoTable({
+        autoTable(doc, {
             startY: y,
             head: head,
             body: body,
@@ -3983,5 +4090,5 @@ var enumRules;
  * Generated bundle index. Do not edit.
  */
 
-export { BrainloperUiModule, BreadCrumbComponent, ButtonIconComponent, ButtonLabelComponent, CarouselComponent, CarouselItemDirective, CombosComponent, CryptoService, DataTableComponent, ExportDataService, FileFormsService, FileInputComponent, FiltersComponent, FunctionsService, GeneratePdfService, HttpResponseType, HttpService, LoadingComponent, LocalStorageService, MenuBreadCrumb, MessageService, ScreenSizeUtil, SelectFilterComponent, SessionService, TableModalComponent, enumActions, enumRules };
+export { BrainloperUiModule, BreadCrumbComponent, ButtonIconComponent, ButtonLabelComponent, CarouselComponent, CarouselItemDirective, CombosComponent, CryptoService, DataTableComponent, ExportDataService, FileFormsService, FileInputComponent, FiltersComponent, FunctionsService, GeneratePdfService, HttpResponseType, HttpService, LoadingComponent, LocalStorageService, MenuBreadCrumb, MessageService, ScreenSizeUtil, SelectFilterComponent, SessionService, TableModalComponent, ThousandSeparatorDirective, enumActions, enumRules };
 //# sourceMappingURL=brainloper-ui.mjs.map