general-library-union 3.3.39 → 3.3.41

package/src/app/webcommon/pages/ejecucion-reporte/detalle-tipo-reporte/detalle-tipo-reporte.component.html

@@ -0,0 +1,2121 @@
+<p-tabView (onChange)="cambiarTab($event)">
+    <p-tabPanel header="{{'excel' | translate }}" [selected]="true">
+        <div class="card col-md-12">
+            <div class="Detallereporte mt-2">
+                <p class="font-semibold">{{'debe' | translate}} {{'indicar' | translate}} {{'plantilla' | translate}} {{'y' | translate}}
+                    {{'hoja' | translate}} {{'para' | translate}} {{'que' | translate}} {{'esta' | translate}}
+                    {{'opcion' | translate}} {{'se' | translate}} {{'active' | translate}}
+                </p>
+                <div class="p-fluid p-formgrid grid">
+                    <div class="field col-12 md:col-4">
+                        <app-input-helper-seleccion-plantilla [readonly]="false" [showDialog]="false"
+                            [label]="reporteFuente.archivoTodo ? reporteFuente.archivoTodo: ''"
+                            [extensiones]="'xls;xlsx'" [mostraroblicargo]="true" [labelrar]="'plantilla' | translate"
+                            (onSelected)="obtenerArchivo($event)"></app-input-helper-seleccion-plantilla>
+
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="reporteFuente.hojaExcel" size="25" maxlength="20">
+                            <label>{{'nombre' | translate }} {{'de' | translate }} {{'la' | translate }} {{'hoja' |
+                                translate }}</label>    
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaTipoCifrado" [autoDisplayFirst]="false" [showClear]="true"
+                                [(ngModel)]="reporteFuente.cifradoExcel" optionLabel="nombre"
+                                optionValue="llaveTabla"></p-dropdown>
+                            <label>{{'tipocifrado' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+                </div>
+
+                <!--BOTONES-->
+                <div class="flex justify-content-end mb-3">
+                    <button pButton pRipple class="ml-2 p-button p-button-raised"
+                        icon="glyphicons glyphicons-refresh" label="{{'link_actualizar' | translate}}"
+                        (click)="actualizar()">
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <p-pickList [source]="listaExcel" [target]="listaNoExcel" sourceHeader="Asociado" sourceFilterPlaceholder="Asociado"
+            targetHeader="Desasociado" [dragdrop]="true" [responsive]="true" targetFilterPlaceholder="Desasociado"
+            filterBy="sintaxis" (onSourceReorder)="moverAAsociado($event)"
+            (onMoveAllToTarget)="moverADesasociado($event)" (onMoveAllToSource)="moverAAsociado($event)"
+            (onMoveToTarget)="moverADesasociado($event)" (onMoveToSource)="moverAAsociado($event)">
+            <ng-template let-excel pTemplate="item">
+                <div>
+                    <label>{{excel.nombre}}</label>
+                </div>
+            </ng-template>
+        </p-pickList>
+
+        <div class="mt-4">
+            <div class="flex justify-content-between align-items-center mt-2 mb-2">
+                <h1 class="text-xl">{{'marcadores' | translate}}</h1>
+                <button pButton pRipple class="p-button-secondary font-semibold" icon="pi pi-plus"
+                    (click)="nuevoMarcadorExcel()" label="{{'link_nuevo' | translate}}" *ngIf="!verNuevoMarcadorExcel">
+                </button>
+                <div class="flex justify-content-end  mb-1" *ngIf="verNuevoMarcadorExcel">
+                    <button pButton pRipple (click)="verNuevoMarcadorExcel = false" label= "{{'listado' | translate}} {{'marcadores' | translate}}" 
+                        icon="pi pi-chevron-left" class="p-button-text font-semibold flex-shrink-0 "></button>
+                </div>
+            </div>
+            <p-table [value]="listaMarcadorExcel" responsiveLayout="scroll" [scrollable]="true"
+                dataKey="llaveTabla" selectionMode="single" [selection]="reporteMarcadorExcel" [rows]="10"
+                [totalRecords]="listaMarcadorExcel.length" [paginator]="listaMarcadorExcel.length > 10"
+                (onRowSelect)="verDetalleMarcadorExcel($event)" (onRowUnselect)="verDetalleMarcadorExcel($event)" *ngIf="!verNuevoMarcadorExcel">
+                <ng-template pTemplate="header">
+
+                    <tr class="fondoTablaPincipal">
+                        <th>{{'descripcion' | translate }}</th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-marcador>
+                    <tr [pSelectableRow]="marcador">
+                        <td>{{marcador.descripcion}}</td>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="emptymessage">
+                    <tr>
+                        <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                    </tr>
+                </ng-template>
+            </p-table>
+
+            <div class="card mt-3" *ngIf="verNuevoMarcadorExcel">
+                <h5 class="mt-3"><i class="glyphicons glyphicons-book"></i>{{'detalle' | translate}}</h5>
+                <div class="Detallereporte mt-4 ">
+                    <form [formGroup]="formMarcadorExcel" >
+                        <div class="col-md-12 p-fluid p-formgrid grid">
+
+                            <div class="field col-12 md:col-4">
+                                <p-floatLabel>
+                                    <input pInputText type="text" formControlName="descripcion" size="25" maxlength="4000">
+                                    <label>{{'descripcion' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-4">
+                                <p-floatLabel>
+                                    <input pInputText type="text" formControlName="marcador" size="25" maxlength="4000">
+                                    <label>{{'marcador' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-4">
+                                <p-floatLabel>
+                                    <p-dropdown
+                                        [options]="[{label: 'Imagen Fija', value: 'IF'}, {label: 'Marcador', value: 'MA'}]"
+                                        [autoDisplayFirst]="false" formControlName="tipo" optionLabel="label"
+                                        optionValue="value"></p-dropdown>
+                                    <label>{{'tipo' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-12" [hidden]="esImagenFija">
+                                <p-floatLabel>
+                                    <textarea class="w-full min-h-150 max-h-200"  pInputTextarea formControlName="textoRegistro"></textarea>
+                                    <label>{{'valor' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-4" [hidden]="esMarcador">
+                                <p-floatLabel>
+                                    <p-dropdown
+                                        [options]="[{label: 'Unica', value: 'U'}, {label: 'Cada Empresa', value: 'C'}]"
+                                        [autoDisplayFirst]="false" formControlName="origen" optionLabel="label"
+                                        optionValue="value"></p-dropdown>
+                                    <label>{{'origen' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-4" [hidden]="esMarcador">
+                                <app-input-helper-seleccion-plantilla [readonly]="false" [showDialog]="false"
+                                    formControlName="textoRegistro"
+                                    [label]="reporteMarcadorExcel.textoRegistro ? reporteMarcadorExcel.textoRegistro: ''"
+                                    [extensiones]="'jpg;png'" (onSelected)="obtenerArchivoMarcadorExcel($event)"
+                                    [propiedad]="'ruta_recursos'"  [labelrar]="('recursos' | translate)" [labelarch]="'recurso' | translate" [mostrarX]="true"
+                                    [mostraroblicargo]="!(!utilsService.validarCampoObligatorio(reporteMarcadorExcel.textoRegistro) && clickGuardarMarcadorExcel)"
+                                    [anexoPropiedad]="reporteMarcadorExcel.origen =='C' ? llaveEmpresa: ''"
+                                    [propiedadDeSistema]="true"></app-input-helper-seleccion-plantilla>
+                            </div>
+                        </div>
+                    </form>
+                    <!--BOTONES-->
+                    <div class="flex justify-content-end mb-3" *ngIf="verNuevoMarcadorExcel">
+                        <button pButton pRipple class="ml-2  p-button-raised" icon="glyphicons {{reporteMarcadorExcel.llave ? 'glyphicons-refresh' : 'glyphicons-floppy-save'}}"
+                            label="{{reporteMarcadorExcel.llave ? ('link_actualizar' | translate) : ('link_guardar' | translate)}}" (click)="guardarMarcadorExcel()">
+                        </button>
+                        <button pButton pRipple class="ml-2 p-button-outlined" icon="glyphicons glyphicons-bin"
+                            *ngIf="reporteMarcadorExcel.llave != null" label="{{'link_eliminar' | translate}}"
+                            (click)="eliminarMarcadorExcel($event)">
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </p-tabPanel>
+    <p-tabPanel header="{{'plantilla' | translate }}">
+        <div class="card col-md-12">
+            <div class="Detallereporte mt-2">
+                <div class="p-fluid p-formgrid grid">
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaSiNo" [(ngModel)]="reporteFuente.unicoArchivo" [autoDisplayFirst]="false" [showClear]="true"
+                                optionLabel="nombre" optionValue="codigo"></p-dropdown>
+                            <label>{{'soporte' | translate }} {{'unico' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaSiNo" [(ngModel)]="reporteFuente.descargarFuente" [autoDisplayFirst]="false" [showClear]="true"
+                                optionLabel="nombre" optionValue="codigo"></p-dropdown>
+                            <label>{{'descargardoc' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaSiNo" [(ngModel)]="reporteFuente.generarPin" [autoDisplayFirst]="false" [showClear]="true"
+                                optionLabel="nombre" optionValue="codigo"></p-dropdown>
+                            <label>{{'generarpin' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaColumnas" [(ngModel)]="reporteFuente.campoAgrupacionPlanilla" 
+                                [autoDisplayFirst]="false" [showClear]="true" optionLabel="nombre" optionValue="llaveTabla"></p-dropdown>
+                            <label>{{'agruparpor' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="reporteFuente.nombreAgrupacionPlanilla" size="25"
+                                maxlength="100">
+                            <label>{{'nombrearchivoagrupacion' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaTipoCifrado" [autoDisplayFirst]="false" [showClear]="true"
+                                [(ngModel)]="reporteFuente.cifradoPlanilla" optionLabel="nombre"
+                                optionValue="llaveTabla"></p-dropdown>
+                            <label>{{'tipocifrado' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" [hidden]="reporteFuente.unicoArchivo == 'N'">
+                        <app-input-helper-seleccion-plantilla [readonly]="false" [showDialog]="false"
+                            [label]="reporteFuente.archivoIndividual ? reporteFuente.archivoIndividual: ''"
+                            [labelrar]="'archivo' | translate" [labelarch]="'archivo' | translate" [mostraroblicargo]="true"
+                            (onSelected)="obtenerArchivoPlanilla($event)"></app-input-helper-seleccion-plantilla>
+                    </div>
+
+                </div>
+                <!--BOTONES-->
+                <div class="flex justify-content-end mb-3">
+                    <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons glyphicons-refresh"
+                        label="{{'link_actualizar' | translate}}" (click)="actualizar()">
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <p-tabView >
+            <p-tabPanel header="{{'marcadores' | translate }}" [selected]="true">
+                
+                <div class="flex justify-content-end align-items-center mb-3">
+                    <button pButton pRipple class="p-button-secondary font-semibold mb-2" icon="pi pi-plus"
+                        (click)="nuevoMarcador()" label="{{'link_nuevo' | translate}}" *ngIf="!verNuevoMarcador">
+                    </button>
+                    <div class="flex justify-content-end  mb-1" *ngIf="verNuevoMarcador">
+                        <button pButton pRipple (click)="verNuevoMarcador = false" label= "{{'listado' | translate}} {{'marcadores' | translate}}" 
+                            icon="pi pi-chevron-left" class="p-button-text font-semibold flex-shrink-0 "></button>
+                    </div>
+                </div>
+                <p-table [value]="listaMarcadores" [scrollable]="true" responsiveLayout="scroll"
+                    dataKey="llaveTabla" selectionMode="single" [selection]="reporteMarcador"
+                    [rows]="10" [totalRecords]="listaMarcadores.length"
+                    [paginator]="listaMarcadores.length > 10" *ngIf="!verNuevoMarcador"
+                    (onRowSelect)="verDetalleMarcador($event)" (onRowUnselect)="verDetalleMarcador($event)">
+                    <ng-template pTemplate="header">
+
+                        <tr class="fondoTablaPincipal">
+                            <th>{{'descripcion' | translate }}</th>
+                            <th>{{'tipo' | translate }}</th>
+                            <th>{{'columna' | translate }}</th>
+                            <th>{{'marcador' | translate }}</th>
+                        </tr>
+                        <th>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-marcador>
+                        <tr [pSelectableRow]="marcador">
+                            <td>{{marcador.descripcion}}</td>
+                            <td>{{marcador.tipo | reporteFuentePipe : 'listaTipoDatoMarcadores'}}</td>
+                            <td>{{marcador.tipo == 'IF' ? marcador.textoRegistro : marcador.nombreColumna}}</td>
+                            <td>{{marcador.marcador}}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="emptymessage">
+                        <tr>
+                            <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+
+                <div class="card col-md-12" *ngIf="verNuevoMarcador">
+                    <div class="Detallereporte mt-2">
+                        <form [formGroup]="formMarcador">
+                            <p class="font-semibold">{{'indique' | translate}} {{'en' | translate}} {{'que' | translate}} {{'columna' | translate}} {{'desea' | translate}} {{'que' | translate}} {{'aparezca' | translate}} {{'la' | translate}} {{'informacion' | translate}}. {{'la' | translate}} {{'primera' | translate}} {{'columna' | translate}} {{'es' | translate}} {{'la' | translate}} 1.</p>
+                            <div class="p-fluid p-formgrid grid" >
+                                <div class="field col-12 md:col-4">
+                                    <p-floatLabel>
+                                        <input pInputText type="text" formControlName="descripcion" size="25"
+                                            maxlength="4000">
+                                        <label>{{'descripcion' | translate }} *</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4">
+                                    <p-floatLabel>
+                                        <p-dropdown [options]="listaTipoMarcador" [autoDisplayFirst]="false" 
+                                            formControlName="tipo" optionLabel="nombre"
+                                            optionValue="codigo"></p-dropdown>
+                                        <label>{{'tipo' | translate }} *</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4"
+                                    [hidden]="!(['MA','IM','MR','IF','QR','BC','G1'].includes(reporteMarcador.tipo))">
+                                    <p-floatLabel>
+                                        <input pInputText type="text" formControlName="marcador" size="25">
+                                        <label>{{'marcador' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="reporteMarcador.tipo != 'TB'">
+                                    <p-floatLabel>
+                                        <input pInputText type="text" formControlName="tabla" size="25">
+                                        <label>{{'tabla' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="reporteMarcador.tipo != 'IF'">
+                                    <p-floatLabel>
+                                        <p-dropdown
+                                            [options]="[{label: 'Unica', value: 'U'}, {label: 'Cada Empresa', value: 'C'}]"
+                                            [autoDisplayFirst]="false" [showClear]="true" formControlName="origen" optionLabel="label"
+                                            optionValue="value"></p-dropdown>
+                                        <label>{{'origen' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4"
+                                    [hidden]="reporteMarcador.tipo != 'IF' || !reporteMarcador.origen">
+                                        <app-input-helper-seleccion-plantilla [readonly]="false" [showDialog]="false"
+                                            formControlName="textoRegistro"
+                                            [label]="reporteMarcador.textoRegistro ? reporteMarcador.textoRegistro: ''"
+                                            [extensiones]="'jpg;png'" (onSelected)="obtenerArchivoMarcador($event)"
+                                            [propiedad]="'ruta_recursos'" [labelrar]="'recursossssss' | translate"
+                                            [anexoPropiedad]="reporteMarcador.origen =='C' ? llaveEmpresa: ''"
+                                            [propiedadDeSistema]="true"></app-input-helper-seleccion-plantilla>
+                                </div>
+
+                                <div class="field col-12 md:col-4"
+                                    [hidden]="!['MA','IM','QR','BC','G1'].includes(reporteMarcador.tipo)">
+                                    <p-floatLabel>
+                                        <p-dropdown [options]="listaColumnas" formControlName="reporteColumna" [showClear]="true" [autoDisplayFirst]="false"
+                                            optionLabel="nombre" optionValue="llaveTabla"></p-dropdown>
+                                        <label>{{'columna' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="reporteMarcador.tipo != 'MA'">
+                                    <p-floatLabel>
+                                        <input pInputText type="text" formControlName="formato" size="25">
+                                        <label>{{'formato' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4"
+                                    [hidden]="!['IM','IF','QR','BC','G1'].includes(reporteMarcador.tipo)">
+                                    <p-floatLabel>
+                                        <p-inputNumber formControlName="ancho" [maxlength]="5"> </p-inputNumber>
+                                        <label>{{'ancho' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4"
+                                    [hidden]="!['IM','IF','QR','BC','G1'].includes(reporteMarcador.tipo)">
+                                    <p-floatLabel>
+                                        <p-inputNumber formControlName="alto" [maxlength]="5"> </p-inputNumber>
+                                        <label>{{'alto' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="reporteMarcador.tipo != 'MR'">
+                                    <p-floatLabel>
+                                        <textarea class="w-full min-h-150 max-h-200" pInputTextarea formControlName="grupo1"></textarea>
+                                        <label>{{'grupo1' | translate }}</label>    
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="reporteMarcador.tipo != 'MR'">
+                                    <p-floatLabel>
+                                        <textarea class="w-full min-h-150 max-h-200" pInputTextarea formControlName="grupo2"></textarea>
+                                        <label>{{'grupo2' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="reporteMarcador.tipo != 'MR'">
+                                    <p-floatLabel>
+                                        <textarea class="w-full min-h-150 max-h-200" pInputTextarea formControlName="grupo3"></textarea>
+                                        <label>{{'grupo3' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="reporteMarcador.tipo != 'MR'">
+                                    <p-floatLabel>
+                                        <textarea class="w-full min-h-150 max-h-200" pInputTextarea formControlName="finalGrupo"></textarea>
+                                        <label>{{'finalgrupo' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="reporteMarcador.tipo != 'MR'">
+                                    <p-floatLabel>
+                                        <textarea class="w-full min-h-150 max-h-200" pInputTextarea formControlName="textoRegistro"></textarea>
+                                        <label>{{'texto' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4"
+                                    [hidden]="!['MR','TB'].includes(reporteMarcador.tipo)">
+                                    <p-floatLabel>
+                                        <p-dropdown [options]="listaSiNo" formControlName="tieneSql" [showClear]="true" [autoDisplayFirst]="false"
+                                            optionLabel="nombre" optionValue="codigo"></p-dropdown>
+                                        <label>{{'sql' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="reporteMarcador.tipo != 'TB'">
+                                    <p-floatLabel>
+                                        <p-dropdown [options]="listaTipoGrafico_JFC" [autoDisplayFirst]="false" [showClear]="true"
+                                            formControlName="tipoGrafico" optionLabel="nombre"
+                                            optionValue="codigo"></p-dropdown>
+                                        <label>{{'grafica' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-12"
+                                    [hidden]="!(['MR','TB'].includes(reporteMarcador.tipo) && (['S'].includes(reporteMarcador.tieneSql)))">
+                                    <p-floatLabel>
+                                        <textarea class="w-full min-h-150 max-h-200" pInputTextarea formControlName="query"></textarea>
+                                        <label>{{'consulta' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4"
+                                    [hidden]="!(['MR','TB'].includes(reporteMarcador.tipo) && (['N'].includes(reporteMarcador.tieneSql)))">
+                                    <p-floatLabel>
+                                        <p-dropdown [options]="listaFuentes" [autoDisplayFirst]="false" [showClear]="true"
+                                            formControlName="fuente" optionLabel="descripcion"
+                                            optionValue="llave"></p-dropdown>
+                                        <label>{{'fuente' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="!reporteMarcador.tipoGrafico">
+                                    <p-floatLabel>
+                                        <input pInputText type="text" formControlName="marcadorGrafico" size="25">
+                                        <label>{{'marcadorgrafica' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4"
+                                    [hidden]="!['A'].includes(reporteMarcador.tipoGrafico)">
+                                    <p-floatLabel>
+                                        <input pInputText type="text" formControlName="titulox" size="25">
+                                        <label>{{'titulo' | translate }} X</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4"
+                                    [hidden]="!['A'].includes(reporteMarcador.tipoGrafico)">
+                                    <p-floatLabel>
+                                        <input pInputText type="text" formControlName="tituloy" size="25">
+                                        <label>{{'titulo' | translate }} Y</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="!reporteMarcador.tipoGrafico">
+                                    <p-floatLabel>
+                                        <input pInputText type="text" formControlName="banda" size="25">
+                                        <label>{{'colordinamico' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-4" [hidden]="!reporteMarcador.tipoGrafico">
+                                    <p-floatLabel>
+                                        <input pInputText type="text" formControlName="anchoJasperLabel" size="25">
+                                        <label>{{'numerocategorias' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-12"
+                                    [hidden]="!(['MR','TB'].includes(reporteMarcador.tipo) && (['N'].includes(reporteMarcador.tieneSql)))">
+                                    <p-floatLabel>
+                                        <textarea class="w-full min-h-150 max-h-200" pInputTextarea formControlName="filtro"></textarea>
+                                        <label>{{'filtro' | translate }}</label>
+                                    </p-floatLabel>
+                                </div>
+                        </div>
+                    </form>
+
+                        <!--BOTONES-->
+                        <div class="flex justify-content-end mb-3">
+                            <button pButton pRipple class="ml-2 p-button p-button-raised"
+                                icon="glyphicons {{reporteMarcador.llave ? 'glyphicons-refresh' : 'glyphicons-floppy-save' }}" label="{{reporteMarcador.llave ? ('link_actualizar' | translate) : ('link_guardar' | translate)}}"
+                                (click)="guardarMarcador()">
+                            </button>
+                            <button pButton pRipple class="ml-2 p-button-outlined" icon="glyphicons glyphicons-bin"
+                                *ngIf="reporteMarcador.llave != null" label="{{'link_eliminar' | translate}}"
+                                (click)="eliminarMarcador($event)">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div *ngIf="verNuevoMarcador && reporteMarcador.llave != null && (reporteMarcador.tipo == 'MR' || reporteMarcador.tipo == 'TB')">
+                    <div class="flex justify-content-end align-items-center mb-3">
+                        <button pButton label="{{'link_nuevo' | translate}}" (click)="nuevoCampoTabla()" icon="pi pi-plus" [disabled]="bloquearCampoMarcador"
+                            class="p-ripple p-element p-button p-component p-button-secondary mb-2"></button>
+                    </div>
+                    <p-table [value]="listaCamposMarcador" responsiveLayout="scroll" styleClass="p-datatable-striped"
+                        [rows]="10" [totalRecords]="listaCamposMarcador.length" [scrollable]="true"
+                        [paginator]="listaCamposMarcador.length > 10" 
+                        [showCurrentPageReport]="true" currentPageReportTemplate="{first} al {last} de {totalRecords} registros" 
+                        editMode="row" dataKey="llave">
+                        <ng-template pTemplate="header">
+                            <tr class="fondoTablaPincipal">
+                                <th style="width: 10%;">{{'columna' | translate }}</th>
+                                <th style="width: 10%;">{{'campo' | translate }}</th>
+                                <th style="width: 10%;">{{'formato' | translate }}</th>
+                                <th style="width: 10%;" *ngIf="reporteMarcador.tipo == 'TB'">{{'tipo' | translate }}</th>
+                                <th style="width: 10%;"*ngIf="reporteMarcador.tipo == 'TB'">{{'medidas' | translate }}</th>
+                                <th style="width: 10%;"> </th>
+                            </tr>
+                            <tr class="TablaNuevoRegistro" *ngIf="verReporteMarcadorDetalle">
+                                <td style="width: 10%;">
+                                    <input pInputText [(ngModel)]="campoMarcadorInsertar.columna" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(campoMarcadorInsertar.columna) && clickGuardarMarcadorCampo"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(campoMarcadorInsertar.columna) && clickGuardarMarcadorCampo" />
+                                </td>
+                                <td style="width: 10%;">
+                                    <input pInputText type="text" [(ngModel)]="campoMarcadorInsertar.campoFuente"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(campoMarcadorInsertar.campoFuente) && clickGuardarMarcadorCampo"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(campoMarcadorInsertar.campoFuente) && clickGuardarMarcadorCampo">
+                                </td>
+                                <td style="width: 10%;">
+                                    <input pInputText type="text" [(ngModel)]="campoMarcadorInsertar.formato">
+                                </td>
+                                <td style="width: 10%;" *ngIf="reporteMarcador.tipo == 'TB'">
+                                    <p-dropdown [options]="listaGrafico" optionLabel="nombre" optionValue="codigo"
+                                        [(ngModel)]="campoMarcadorInsertar.tipo" appendTo="body" [autoZIndex]="false"
+                                        [autoDisplayFirst]="false" [showClear]="true"></p-dropdown>
+                                </td>
+                                <td style="width: 10%;" *ngIf="reporteMarcador.tipo == 'TB'">
+                                    <div *ngIf="campoMarcadorInsertar.tipo =='I'">
+                                        <p-floatLabel>
+                                            <input pInputText type="text" [(ngModel)]="campoMarcadorInsertar.ancho">
+                                            <label>{{'ancho' | translate}}</label>
+                                        </p-floatLabel>
+                                        <p-floatLabel>
+                                            <input pInputText type="text" [(ngModel)]="campoMarcadorInsertar.alto">
+                                            <label>{{'alto' | translate}}</label>
+                                        </p-floatLabel>
+                                    </div>
+                                </td>
+                                <td style="width: 10%;"  >
+                                    <div class="flex justify-content-end">
+                                        <button pButton pRipple type="button" icon="pi pi-check" (click)="agregarCampoMarcador(campoMarcadorInsertar)"
+                                            class="p-element p-ripple p-button-rounded p-button-success mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                        <button pButton pRipple type="button" (click)="verReporteMarcadorDetalle = false; bloquearCampoMarcador = false" icon="pi pi-times"
+                                            class="p-element p-ripple p-button-rounded p-button-danger mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-campo let-editing="editing" let-ri="rowIndex">
+                            <tr [pEditableRow]="campo">
+                                <td style="width: 10%;">
+                                    <p-cellEditor>
+                                        <ng-template pTemplate="input">
+                                            <input pInputText  type="text" [(ngModel)]="campo.columna" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"
+                                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(campo.columna) && clickGuardarMarcadorCampo" 
+                                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(campo.columna) && clickGuardarMarcadorCampo" />
+                                        </ng-template>
+                                        <ng-template pTemplate="output">
+                                            {{campo.columna}}
+                                        </ng-template>
+                                    </p-cellEditor>
+                                </td>
+                                <td style="width: 10%;">
+                                    <p-cellEditor>
+                                        <ng-template pTemplate="input">
+                                            <input pInputText type="text" [(ngModel)]="campo.campoFuente"
+                                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(campo.campoFuente) && clickGuardarMarcadorCampo"
+                                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(campo.campoFuente) && clickGuardarMarcadorCampo">
+                                        </ng-template>
+                                        <ng-template pTemplate="output">
+                                            {{campo.campoFuente}}
+                                        </ng-template>
+                                    </p-cellEditor>
+                                </td>
+
+                               <td style="width: 10%;">
+                                    <p-cellEditor>
+                                        <ng-template pTemplate="input">
+                                            <input pInputText type="text" [(ngModel)]="campo.formato">
+                                        </ng-template>
+                                        <ng-template pTemplate="output">
+                                            {{campo.formato}}
+                                        </ng-template>
+                                    </p-cellEditor>
+                                </td>
+                                
+                                <td style="width: 10%;" *ngIf="reporteMarcador.tipo == 'TB'">
+                                    <p-cellEditor>
+                                        <ng-template pTemplate="input">
+                                            <p-dropdown [options]="listaGrafico" optionLabel="nombre" optionValue="codigo"
+                                                [(ngModel)]="campo.tipo" appendTo="body" [autoZIndex]="false"
+                                                [autoDisplayFirst]="false" [showClear]="true"></p-dropdown>
+                                        </ng-template>
+                                        <ng-template pTemplate="output">
+                                            {{campo.tipo | reporteFuentePipe :'listaRecursoGrafica'}}
+                                        </ng-template>
+                                    </p-cellEditor>
+                                </td>
+                                
+                                <td style="width: 10%;" *ngIf="reporteMarcador.tipo == 'TB'">
+                                    <p-cellEditor>
+                                        <ng-template pTemplate="input">
+                                            <div *ngIf="campo.tipo =='I'">
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" [(ngModel)]="campo.ancho">
+                                                    <label>{{'ancho' | translate}}</label>
+                                                </p-floatLabel>
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" [(ngModel)]="campo.alto">
+                                                    <label>{{'alto' | translate}}</label>
+                                                </p-floatLabel>
+                                            </div>
+                                        </ng-template>
+                                        <ng-template pTemplate="output">
+                                            <div *ngIf="campo.tipo =='I'">
+                                                {{'ancho' | translate}}: {{campo.ancho}} <br/>
+                                                {{'alto' | translate}}: {{campo.alto}}
+                                            </div> 
+                                        </ng-template>
+                                    </p-cellEditor>
+                                </td>
+                                <td  style="width: 10%;">
+                                    <div class="flex justify-content-end">
+                                        <!-- CHECK GUARDAR -->
+                                        <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow
+                                            icon="pi pi-check" (click)="agregarCampoMarcador(campo)"
+                                            class="p-element p-ripple p-button-rounded p-button-success mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                        <!-- CANCELAR -->
+                                        <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow
+                                            icon="pi pi-times" (click)="cargarListaCampoMarcadorAsync()"
+                                            class="p-element p-ripple p-button-rounded p-button-danger mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                        <!-- EDITAR -->
+                                        <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow [disabled]="bloquearCampoMarcador"
+                                            icon="glyphicons glyphicons-pencil" (click)="editarCampoMarcador()"
+                                            class="p-element p-ripple p-button-rounded p-button-secondary mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                        <!-- ELIMINAR -->
+                                        <button *ngIf="!editing" pButton pRipple type="button" pDeleteEditableRow [disabled]="bloquearCampoMarcador"
+                                            icon="pi pi-trash" (click)="eliminarCampoMarcador($event,campo)"
+                                            class="p-element p-ripple p-button-rounded p-button-outlined mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                    </div>
+                                </td>
+
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="emptymessage">
+                            <tr>
+                                <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                </div>
+            </p-tabPanel>
+            <p-tabPanel header="{{'soporte' | translate }} {{'archivo' | translate }}s"
+                *ngIf="reporteFuente.unicoArchivo == 'N'">
+                <div class="flex justify-content-end align-items-center mb-3">
+                    <button pButton label="{{'link_nuevo' | translate}}" (click)="nuevoSoporte()" icon="pi pi-plus"
+                        [disabled]="habilitaCampo" class="p-ripple p-element p-button p-component p-button-secondary mb-2"></button>
+                </div>
+                <p-table [value]="listaSoportes" responsiveLayout="scroll" styleClass="p-datatable-striped"
+                    [rows]="10" [totalRecords]="listaSoportes.length"
+                    [paginator]="listaSoportes.length > 10" 
+                    [showCurrentPageReport]="true" currentPageReportTemplate="{first} al {last} de {totalRecords} registros" 
+                    editMode="row" dataKey="llaveTabla">
+                    <ng-template pTemplate="header">
+                        <tr class="fondoTablaPincipal">
+                            <th style="width: 45%">{{'descripcion' | translate}}</th>
+                            <th style="width: 45%">{{'archivo' | translate}}</th>
+                            <th style="width: 10%"> </th>
+                        </tr>
+                        <tr class="TablaNuevoRegistro" *ngIf="verSoporteArchivoDetalle">
+                            <td style="width: 45%">
+                                <input pInputText type="text" [(ngModel)]="soporteIngresar.descripcion" style="width: -webkit-fill-available"
+                                    [class.ng-dirty]="!utilsService.validarCampoObligatorio(soporteIngresar.descripcion) && clickGuardarSoporteArchivo"
+                                    [class.ng-invalid]="!utilsService.validarCampoObligatorio(soporteIngresar.descripcion) && clickGuardarSoporteArchivo">
+                            </td>
+                            <td style="width: 45%">
+                                <app-input-helper-seleccion-plantilla [readonly]="false" [showDialog]="false" [mostrarX]="true"
+                                    [label]="soporteIngresar.archivoIndividual ? soporteIngresar.archivoIndividual: ''" [labelarch]="'archivo' | translate"
+                                    [mostrarLabelInput]="false" [mostraroblicargo]="true" [booleano]="!utilsService.validarCampoObligatorio(soporteIngresar.archivoIndividual) && clickGuardarSoporteArchivo"
+                                    (onSelected)="obtenerArchivoSoporte($event, soporteIngresar)"></app-input-helper-seleccion-plantilla>
+                            </td>
+                            <td style="width: 10%">
+                                <div class="flex justify-content-end">
+                                    <button pButton pRipple type="button" icon="pi pi-check" (click)="agregarSoporte(soporteIngresar)"
+                                        class="p-element p-ripple p-button-rounded p-button-success mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                    <button pButton pRipple type="button" (click)="verSoporteArchivoDetalle = false" icon="pi pi-times" (click)="cancelarSoporte()"
+                                        class="p-element p-ripple p-button-rounded p-button-danger mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                </div>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-soporte let-editing="editing" let-ri="rowIndex">
+                        <tr [pEditableRow]="soporte" style="width: 100%">
+                            <td style="width: 45%">
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <input pInputText type="text" [(ngModel)]="soporte.descripcion" style="width: -webkit-fill-available"
+                                            [class.ng-dirty]="!utilsService.validarCampoObligatorio(soporte.descripcion) && clickGuardarSoporteArchivo"
+                                            [class.ng-invalid]="!utilsService.validarCampoObligatorio(soporte.descripcion) && clickGuardarSoporteArchivo">
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{soporte.descripcion}}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                            <td style="width: 45%">
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <app-input-helper-seleccion-plantilla [readonly]="false" [showDialog]="false" [mostrarX]="true"
+                                            [label]="soporte.archivoIndividual ? soporte.archivoIndividual: ''"
+                                            [mostrarLabelInput]="false"  [booleano]="!utilsService.validarCampoObligatorio(soporte.archivoIndividual) && clickGuardarSoporteArchivo"
+                                            (onSelected)="obtenerArchivoSoporte($event, soporte)"></app-input-helper-seleccion-plantilla>
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{soporte.archivoIndividual}}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                            <td style="width: 10%">
+                                <div class="flex justify-content-end">
+                                    <!-- CHECK GUARDAR -->
+                                    <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow
+                                        icon="pi pi-check" (click)="agregarSoporte(soporte)"
+                                        class="p-element p-ripple p-button-rounded p-button-success mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                    <!-- CANCELAR -->
+                                    <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow
+                                        icon="pi pi-times" (click)="cancelarEdicion()"
+                                        class="p-element p-ripple p-button-rounded p-button-danger mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                    <!-- EDITAR -->
+                                    <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow
+                                        icon="glyphicons glyphicons-pencil" [disabled]="habilitaCampo" (click)="iniciarEdicion()"
+                                        class="p-element p-ripple p-button-rounded p-button-secondary mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                    <!-- ELIMINAR -->
+                                    <button *ngIf="!editing" pButton pRipple type="button" pDeleteEditableRow
+                                        icon="pi pi-trash" (click)="eliminarSoporte($event, soporte)" [disabled]="habilitaCampo"
+                                        class="p-element p-ripple p-button-rounded p-button-outlined mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                </div>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="emptymessage">
+                        <tr>
+                            <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </p-tabPanel>
+        </p-tabView>
+    </p-tabPanel>
+    <p-tabPanel header="{{'reporte' | translate }} {{'dinamico' | translate }}">
+        <div class="card col-md-12">
+            <div class="Detallereporte mt-2">
+                <div class="p-fluid p-formgrid grid">
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaSiNo" [(ngModel)]="reporteFuente.dobleLinea" [showClear]="true" [autoDisplayFirst]="false"
+                                optionLabel="nombre" optionValue="codigo"></p-dropdown>
+                            <label>{{'doblelinea' | translate }}</label>
+                        </p-floatLabel>
+                     </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="reporteFuente.tituloParametro" size="25"
+                                maxlength="100">
+                            <label>{{'descripcion' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaTipoCifrado" [autoDisplayFirst]="false" [showClear]="true"
+                                [(ngModel)]="reporteFuente.cifradoJasper" optionLabel="nombre"
+                                optionValue="llaveTabla"></p-dropdown>
+                            <label>{{'tipocifrado' | translate }}</label>    
+                        </p-floatLabel>
+                    </div>
+                </div>
+                <!--BOTONES-->
+                <div class="flex justify-content-end mb-3">
+                     
+                    
+                    <button pButton pRipple class="ml-2 p-button-outlined background-100" icon="glyphicons glyphicons-restart"   
+                        label="{{'link_generar' | translate}}" (click)="generarJasper()">
+                    </button>
+                    <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons glyphicons-refresh"
+                        label="{{'link_actualizar' | translate}}" (click)="actualizar()">
+                    </button>
+                    <button pButton pRipple class="ml-2 p-button-outlined" icon="pi pi-download" *ngIf="existeJasper"
+                        label="{{'link_descargar' | translate}}" (click)="descargarJasper()">
+                    </button>
+                    
+                </div>
+            </div>
+        </div>
+        
+        <div class="flex justify-content-end align-items-center mt-2 mb-2">
+            <div class="flex justify-content-end  mb-1" *ngIf="bandaSeleccionada.key">
+                <button pButton pRipple (click)="regresarBandaSeleccionada()" label= "{{'listado' | translate}} {{'bandas' | translate}}" 
+                    icon="pi pi-chevron-left" class="p-button-text font-semibold flex-shrink-0 "></button>
+            </div>
+        </div>
+        <p-table [value]="listaTipoBanda" [scrollable]="true" responsiveLayout="scroll"
+            dataKey="llaveTabla" selectionMode="single" [rows]="10"
+            [totalRecords]="listaTipoBanda.length" [paginator]="listaTipoBanda.length > 10"
+            (onRowSelect)="verBanda($event)" (onRowUnselect)="verBanda($event)" *ngIf="!bandaSeleccionada.key">
+            <ng-template pTemplate="header">
+
+                <tr class="fondoTablaPincipal">
+                    <th>{{'banda' | translate }}</th>
+                </tr>
+                <th>
+            </ng-template>
+            <ng-template pTemplate="body" let-banda>
+                <tr [pSelectableRow]="banda">
+                    <td>{{banda.value}}</td>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="emptymessage">
+                <tr>
+                    <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                </tr>
+            </ng-template>
+        </p-table>
+
+        <p-tabView *ngIf="bandaSeleccionada.key && verTabBanda">
+            <p-tabPanel header="{{'caracteristicas' | translate}}"
+                *ngIf="!['detalle','summary'].includes(bandaSeleccionada.key)">
+                <div class="card col-md-12">
+                    <div class="Detallereporte mt-2">
+                        <div class="p-fluid p-formgrid grid" >
+                            <div class="field col-12 md:col-6">
+                                <p-floatLabel>
+                                    <p-dropdown [options]="listaSiNo" [autoDisplayFirst]="false" [showClear]="true" optionLabel="nombre" optionValue="codigo"  
+                                        [(ngModel)]="reporteBanda.totales" ></p-dropdown>
+                                    <label>{{'total' | translate }}</label>
+                                </p-floatLabel>
+                            </div>
+                            <div class="field col-12 md:col-6">
+                                <p-floatLabel>
+                                    <input pInputText type="text" [(ngModel)]="reporteBanda.titulo" maxlength="200">
+                                    <label>{{'titulo' | translate }}</label>
+                                </p-floatLabel>
+                            </div>
+                        </div>
+                        <!--BOTONES-->
+                        <div class="flex justify-content-end mb-3">
+                            <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons glyphicons-floppy-save"
+                                label="{{'link_guardar' | translate}}" (click)="guardarCaracteristicaBanda()">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </p-tabPanel>
+            <p-tabPanel header="{{bandaSeleccionada.value}}" *ngIf="!nuevaBanda">
+                <div class="flex justify-content-end align-items-center mt-2 mb-2">
+                    <div class="flex justify-content-end  mb-1" >
+                        <button pButton label="{{'link_nuevo' | translate}}" (click)="nuevoMarcadorDinamico()" icon="pi pi-plus"
+                            class="p-ripple p-element p-button p-component p-button-secondary mb-2" *ngIf="!nuevoReporteMarcadorDinamico"></button>
+                    </div>
+                </div>
+                <p-table [value]="listaMarcadorDinamico" [scrollable]="true"
+                    responsiveLayout="scroll" dataKey="llaveTabla" selectionMode="single"
+                    [rows]="10" [totalRecords]="listaMarcadorDinamico.length"
+                    [paginator]="listaMarcadorDinamico.length > 10" *ngIf="!nuevoReporteMarcadorDinamico"
+                    (onRowSelect)="verMarcadorDinamico($event)"  (onRowUnselect)="verMarcadorDinamico($event)">
+                    <ng-template pTemplate="header">
+
+                        <tr class="fondoTablaPincipal">
+                            <th>{{'banda' | translate }}</th>
+                            <th>{{'orden' | translate }}</th>
+                            <th>{{'columna' | translate }}</th>
+                            <th>{{'etiqueta' | translate }}</th>
+                            <th>{{'formato' | translate }}</th>
+                            <th>{{'ancho' | translate }}</th>
+                            <th>{{'operacion' | translate }}</th>
+                        </tr>
+                        <th>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-dinamico>
+                        <tr [pSelectableRow]="dinamico">
+                            <td>{{dinamico.banda}}</td>
+                            <td>{{dinamico.banda ? dinamico.alto : ''}}</td>
+                            <td>{{dinamico.marcador}}</td>
+                            <td>{{dinamico.banda ? dinamico.descripcion : ''}}</td>
+                            <td>{{dinamico.banda ? dinamico.formato : ''}}</td>
+                            <td>{{['detalle'].includes(dinamico.banda) ? dinamico.ancho : ''}}</td>
+                            <td>{{dinamico.banda ? dinamico.operacion : ''}}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="emptymessage">
+                        <tr>
+                            <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+
+                <div *ngIf="nuevoReporteMarcadorDinamico">
+                    <div class="card col-md-12">
+                        <div class="Detallereporte mt-2">
+                            <div class="flex justify-content-between align-items-center  mb-2">                               
+                                <p class="font-semibold mt-3">{{'indique' | translate}} {{'en' | translate}} {{'que' | translate}} {{'columna' | translate}} {{'desea' | translate}} {{'que' | translate}} {{'aparezca' | translate}} {{'la' | translate}} {{'informacion' | translate}}. {{'la' | translate}} {{'primera' | translate}} {{'columna' | translate}} {{'es' | translate}} {{'la' | translate}} 1.</p>
+                                <button pButton pRipple (click)="nuevoReporteMarcadorDinamico = false" label= "{{'listado' | translate}} {{bandaSeleccionada.value}}" 
+                                    icon="pi pi-chevron-left" class="p-button-text font-semibold flex-shrink-0 " *ngIf="nuevoReporteMarcadorDinamico"></button>
+                            </div>
+                            <form [formGroup]="formReporteDinamico" class="p-fluid grid">
+                                <div class="field col-12 md:col-4">
+                                    <p-floatLabel>
+                                        <p-dropdown [options]="listaTipoCampoJasperDinamico"
+                                            [autoDisplayFirst]="false" formControlName="tipoCampo"
+                                            optionLabel="value" optionValue="key"></p-dropdown>
+                                        <label>{{'tipocampo' | translate }} *</label>
+                                    </p-floatLabel>
+                                </div>
+                                <div class="field col-12 md:col-4" *ngIf="reporteMarcadorDinamico.tipoCampo =='C'">
+                                    <p-floatLabel>
+                                        <p-dropdown [options]="listaTipoDatoSintaxis" [autoDisplayFirst]="false" 
+                                            formControlName="tipoDato" optionLabel="value"
+                                            optionValue="key"></p-dropdown>
+                                        <label>{{'tipodato' | translate }} *</label>
+                                    </p-floatLabel>
+                                </div>
+                                <div class="field col-12 md:col-4">
+                                    <p-floatLabel>
+                                        <input pInputText formControlName="alto" maxlength="5" 
+                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);" />
+                                        <label>{{'orden' | translate }} *</label>
+                                    </p-floatLabel>
+                                </div>
+                                <div class="field col-12 md:col-4" *ngIf="reporteMarcadorDinamico.tipoCampo !='C'">
+                                    <p-floatLabel>
+                                        <p-dropdown [options]="listaColumnas" [autoDisplayFirst]="false" 
+                                            formControlName="marcador" optionLabel="nombre" optionValue="llaveTabla"
+                                            *ngIf="!reporteMarcadorDinamico.llave && reporteMarcadorDinamico.tipoCampo !='C'"></p-dropdown>
+                                        <input pInputText type="text" formControlName="marcador" size="25"
+                                            *ngIf="reporteMarcadorDinamico.llave && reporteMarcadorDinamico.tipoCampo !='C'">
+                                        <label>{{'columna' | translate }} *</label>
+                                    </p-floatLabel>
+                                </div>
+                                
+                                <div class="field col-12 md:col-12" *ngIf="reporteMarcadorDinamico.tipoCampo =='C'">
+                                    <p-floatLabel>
+                                        <textarea class="w-full min-h-150 max-h-200" pInputTextarea formControlName="filtro"></textarea>
+                                        <label>{{'sintaxis' | translate }} *</label>
+                                    </p-floatLabel>
+                                </div>
+
+                                <div class="field col-12 md:col-12">
+                                    <p-fieldset class="fieldsintitulo"  class="fieldsintitulo">
+                                        <div class="p-fluid grid">
+                                            <div class="field col-12 md:col-6 lg:col-6 mb-0">
+                                                <label  class="font-semibold text-gray-900 text-base ml-1">{{'resultado' | translate}}</label>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6 mb-0" *ngIf="reporteMarcadorDinamico.tipoCampo =='C'"></div>
+                                            <div class="field col-12 md:col-6 lg:col-6 mb-0" *ngIf="reporteMarcadorDinamico.tipoCampo !='C'">
+                                                <label class="font-semibold text-gray-900 text-base ml-1" >{{'label' | translate}}</label>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6">
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" formControlName="formato" />
+                                                    <label>{{'formato' | translate }}</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6" *ngIf="reporteMarcadorDinamico.tipoCampo !='C'">
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" formControlName="descripcion" />
+                                                    <label>{{'titulo' | translate }}</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6">
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" formControlName="ancho"
+                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);" />
+                                                    <label>{{'ancho' | translate }} *</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6" *ngIf="reporteMarcadorDinamico.tipoCampo !='C' && 'detalle' == reporteMarcadorDinamico.banda "></div>
+                                            <div class="field col-12 md:col-6 lg:col-6" *ngIf="reporteMarcadorDinamico.tipoCampo !='C' && 'detalle' != reporteMarcadorDinamico.banda ">
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" formControlName="anchoJasperLabel" 
+                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"/>
+                                                    <label>{{'ancho' | translate }}</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6" *ngIf="'detalle' != reporteMarcadorDinamico.banda">
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" formControlName="resultadoX" 
+                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"/>
+                                                    <label>{{'x' | translate }} *</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6" *ngIf="reporteMarcadorDinamico.tipoCampo !='C' && 'detalle' != reporteMarcadorDinamico.banda ">
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" formControlName="titulox" 
+                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"/>
+                                                    <label>{{'x' | translate }}</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6" *ngIf="'detalle' != reporteMarcadorDinamico.banda">
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" formControlName="resultadoY" 
+                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"/>
+                                                    <label>{{'y' | translate }} *</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6" *ngIf="reporteMarcadorDinamico.tipoCampo !='C' && 'detalle' != reporteMarcadorDinamico.banda ">
+                                                <p-floatLabel>
+                                                    <input pInputText type="text" formControlName="tituloy" 
+                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"/>
+                                                    <label>{{'y' | translate }}</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6">
+                                                <p-floatLabel>
+                                                    <p-dropdown [options]="listaAlineacion" [autoDisplayFirst]="false" 
+                                                        formControlName="tipoReporte" optionLabel="nombre" optionValue="codigo" ></p-dropdown>
+                                                    <label>{{'alineacion' | translate }} *</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6" *ngIf="reporteMarcadorDinamico.tipoCampo !='C'">
+                                                <p-floatLabel>
+                                                    <p-dropdown [options]="listaAlineacion" [autoDisplayFirst]="false" [showClear]="true"
+                                                        formControlName="tipoGrafico" optionLabel="nombre" optionValue="codigo" ></p-dropdown>
+                                                    <label>{{'alineacion' | translate }}</label>
+                                                </p-floatLabel>
+                                            </div>
+                                            <div class="field col-12 md:col-6 lg:col-6" *ngIf="reporteMarcadorDinamico.tipoDato == 'N' && reporteMarcadorDinamico.tipoCampo !='C'">
+                                                <p-floatLabel>
+                                                    <p-dropdown [options]="listaOperaciones" [autoDisplayFirst]="false" [showClear]="true"
+                                                        formControlName="operacion" optionLabel="nombre" optionValue="codigo" ></p-dropdown>
+                                                    <label>{{'operacion' | translate }}</label>
+                                                </p-floatLabel>
+                                            </div>
+                                        </div>
+                                    </p-fieldset>
+                                </div>
+                            </form>
+                            
+                            <!--BOTONES-->
+                            <div class="flex justify-content-end mb-3" >
+                                <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons {{reporteMarcadorDinamico.llave ? 'glyphicons-refresh' : 'glyphicons-floppy-save'}}"
+                                    label="{{reporteMarcadorDinamico.llave ? ('link_actualizar' | translate) : ('link_guardar' | translate)}}" (click)="guardarColumnaDinamico()">
+                                </button>
+                                <button pButton pRipple class="ml-2 p-button-outlined" icon="glyphicons glyphicons-bin"
+                                    *ngIf="reporteMarcadorDinamico.llave != null" label="{{'link_eliminar' | translate}}"
+                                    (click)="eliminarColumnaDinamico($event)">
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </p-tabPanel>
+            
+        </p-tabView>
+    </p-tabPanel>
+    <p-tabPanel header="{{'reporte' | translate }} {{'texto' | translate }}">
+        <div class="card col-md-12">
+            <div class="Detallereporte mt-2">
+                <div class="p-fluid p-formgrid grid">
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="reporteFuente.archivoTexto" size="50"
+                                maxlength="200">
+                            <label>{{'nombrearchivo' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaSeparadores" [(ngModel)]="reporteFuente.separador"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(reporteFuente.separador) && clickGuardarReporteTexto"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(reporteFuente.separador) && clickGuardarReporteTexto"
+                                [autoDisplayFirst]="false" optionLabel="nombre" optionValue="codigo" ></p-dropdown>
+                            <label>{{'separador' | translate }}*</label>
+                        </p-floatLabel>
+                     </div>
+
+                     <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaTipoCifrado" [autoDisplayFirst]="false" [showClear]="true"
+                                [(ngModel)]="reporteFuente.cifradoTexto" optionLabel="nombre"
+                                optionValue="llaveTabla"></p-dropdown>
+                            <label>{{'tipocifrado' | translate }}</label>    
+                        </p-floatLabel>
+                    </div>
+
+                </div>
+                <!--BOTONES-->
+                <div class="flex justify-content-end mb-3">
+                    <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons glyphicons-refresh"
+                        label="{{'link_actualizar' | translate}}" (click)="actualizarSeparador()">
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex justify-content-between lign-items-center mb-3">
+            <h1 class="text-xl">{{'marcadores' | translate}}</h1>
+            <button pButton pRipple class="p-button-secondary font-semibold" icon="pi pi-plus"
+                (click)="nuevoMarcadorTexto()" label="{{'link_nuevo' | translate}}" *ngIf="!verNuevoMarcadorTexto">
+            </button>
+            <div class="flex justify-content-end  mb-1" *ngIf="verNuevoMarcadorTexto">
+                <button pButton pRipple (click)="verNuevoMarcadorTexto = false; clickGuardarMarcadorTexto = false;" label= "{{'listado' | translate}} {{'marcadores' | translate}}" 
+                    icon="pi pi-chevron-left" class="p-button-text font-semibold flex-shrink-0 "></button>
+            </div>
+        </div>
+        <p-table [value]="listaMarcadoresTexto" [scrollable]="true" responsiveLayout="scroll"
+            dataKey="llaveTabla" selectionMode="single" 
+            [rows]="10" [totalRecords]="listaMarcadoresTexto.length"
+            [paginator]="listaMarcadoresTexto.length > 10" *ngIf="!verNuevoMarcadorTexto"
+            (onRowSelect)="verMarcadorTexto($event)" (onRowUnselect)="verMarcadorTexto($event)">
+            <ng-template pTemplate="header">
+
+                <tr class="fondoTablaPincipal">
+                    <th>{{'tipo' | translate }}</th>
+                    <th>{{'columna' | translate }}</th>
+                    <th>{{'formato' | translate }}</th>
+                    <th>{{'orden' | translate }}</th>
+                </tr>
+                <th>
+            </ng-template>
+            <ng-template pTemplate="body" let-marctexto>
+                <tr [pSelectableRow]="marctexto">
+                    <td>{{marctexto.tipoGrafico | reporteFuentePipe : 'listaTipoMarcadoresTexto'}}</td>
+                    <td>{{marctexto.nombreColumna}}</td>
+                    <td>{{marctexto.formato}}</td>
+                    <td>{{marctexto.alto}}</td>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="emptymessage">
+                <tr>
+                    <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                </tr>
+            </ng-template>
+        </p-table>
+        <div class="card mt-3" *ngIf="verNuevoMarcadorTexto">            
+            <h5 class="mt-3"><i class="glyphicons glyphicons-notes"></i>{{'detalle' | translate}}</h5>
+            <div class="Detallereporte mt-2">
+                <div class="p-fluid p-formgrid grid" >
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaTipoMarcadorTexto" [autoDisplayFirst]="false"
+                                [(ngModel)]="marcadorTexto.tipoGrafico" optionLabel="nombre" optionValue="codigo"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorTexto.tipoGrafico) && clickGuardarMarcadorTexto"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorTexto.tipoGrafico) && clickGuardarMarcadorTexto"></p-dropdown>
+                            <label>{{'tipo' | translate }} *</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="marcadorTexto.tipoGrafico == 'D'">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaColumnas" [autoDisplayFirst]="false"
+                                [(ngModel)]="marcadorTexto.reporteColumna" optionLabel="nombre" optionValue="llaveTabla"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorTexto.reporteColumna) && clickGuardarMarcadorTexto"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorTexto.reporteColumna) && clickGuardarMarcadorTexto"></p-dropdown>
+                            <label>{{'columna' | translate }} *</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="marcadorTexto.tipoGrafico">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="marcadorTexto.formato" maxlength="50"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorTexto.formato) && clickGuardarMarcadorTexto"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorTexto.formato) && clickGuardarMarcadorTexto">
+                            <label>{{marcadorTexto.tipoGrafico == 'D' ? ('formato' | translate)+'*' : ('valor' | translate)+'*' }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="marcadorTexto.tipoGrafico == 'D'">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="marcadorTexto.ancho" maxlength="22"
+                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorTexto.ancho) && clickGuardarMarcadorTexto"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorTexto.ancho) && clickGuardarMarcadorTexto">
+                            <label>{{'ancho' | translate}} *</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="marcadorTexto.tipoGrafico">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="marcadorTexto.alto" maxlength="22"
+                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorTexto.alto) && clickGuardarMarcadorTexto"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorTexto.alto) && clickGuardarMarcadorTexto">
+                            <label>{{'orden' | translate}} *</label>
+                        </p-floatLabel>
+                    </div>
+                </div>
+                <!--BOTONES-->
+                <div class="flex justify-content-end mb-3" >
+                    <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons {{marcadorTexto.llave ? 'glyphicons-refresh' : 'glyphicons-floppy-save'}}"
+                        label="{{marcadorTexto.llave ? ('link_actualizar' | translate) : ('link_guardar' | translate)}}" (click)="guardarMarcadorTexto()">
+                    </button>
+                    <button pButton pRipple class="ml-2 p-button-outlined" icon="glyphicons glyphicons-bin"
+                        *ngIf="marcadorTexto.llave != null" label="{{'link_eliminar' | translate}}"
+                        (click)="eliminarMarcadoTexto($event)">
+                    </button>
+                </div>
+            </div>
+        </div>
+    </p-tabPanel>
+    <p-tabPanel header="{{'tabla' | translate }}">
+        <div class="card col-md-12">
+            <div class="Detallereporte mt-2">
+                <div class="p-fluid p-formgrid grid" >
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="reporteFuente.nombreTabla" maxlength="4000">
+                            <label>{{'nombretabla' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+                    <div class="field col-12 md:col-8">
+                        <!--BOTONES-->
+                        <div class="flex justify-content-end mt-1 mb-1">
+                            <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons glyphicons-refresh"
+                                label="{{'link_actualizar' | translate}}" (click)="actualizar()">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <p-pickList [source]="listaTabla" [target]="listaNoTabla" sourceHeader="Asociado" sourceFilterPlaceholder="Asociado"
+            targetHeader="Desasociado" [dragdrop]="true" [responsive]="true" targetFilterPlaceholder="Desasociado"
+            filterBy="nombre" *ngIf="isFuente()" (onSourceReorder)="reorderTabla($event)"
+            (onMoveAllToTarget)="moverADesasociadoTabla($event)" (onMoveAllToSource)="moverAAsociadoTabla($event)"
+            (onMoveToTarget)="moverADesasociadoTabla($event)" (onMoveToSource)="moverAAsociadoTabla($event)">
+            <ng-template let-tabla pTemplate="item">
+                <div>
+                    <label>{{tabla.nombre}}</label>
+                </div>
+            </ng-template>
+        </p-pickList>
+    </p-tabPanel>
+    <p-tabPanel header="{{'archivoxml' | translate }}">
+        <div class="card col-md-12">
+            <div class="Detallereporte mt-2">
+                <div class="p-fluid p-formgrid grid">
+
+                    <div class="field col-12 md:col-6">
+                        <p-floatLabel>
+                            <textarea class="w-full min-h-50 max-h-100"  pInputTextarea [(ngModel)]="reporteFuente.tagEncabezado"></textarea>
+                            <label>{{'tagencabezado' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-6">
+                        <p-floatLabel>
+                            <textarea class="w-full min-h-50 max-h-100"  pInputTextarea [(ngModel)]="reporteFuente.tagCierreEncabezado"></textarea>
+                            <label>{{'tagcierreencabezado' | translate }}</label>
+                        </p-floatLabel> 
+                    </div>
+
+                    <div class="field col-12 md:col-6">
+                        <p-floatLabel>
+                            <textarea class="w-full min-h-50 max-h-100"  pInputTextarea [(ngModel)]="reporteFuente.estructuraRegistro"></textarea>
+                            <label>{{'tagregistro' | translate }}</label>
+                        </p-floatLabel> 
+                    </div>
+
+                     <div class="field col-12 md:col-6">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaTipoCifrado" [autoDisplayFirst]="false" [showClear]="true"
+                                [(ngModel)]="reporteFuente.cifradoXml" optionLabel="nombre"
+                                optionValue="llaveTabla"></p-dropdown>
+                            <label>{{'tipocifrado' | translate }}</label>    
+                        </p-floatLabel>
+                    </div>
+
+                </div>
+                <!--BOTONES-->
+                <div class="flex justify-content-end mb-3">
+                    <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons glyphicons-refresh"
+                        label="{{'link_actualizar' | translate}}" (click)="actualizar()">
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="flex justify-content-between align-items-center mb-3">
+            <h1 class="text-xl">{{'marcadores' | translate}}</h1>
+            <button pButton pRipple class="p-button-secondary font-semibold" icon="pi pi-plus"
+                (click)="nuevoMarcadorXML()" label="{{'link_nuevo' | translate}}" *ngIf="!verNuevoMarcadorXML">
+            </button>
+            <div class="flex justify-content-end  mb-1" *ngIf="verNuevoMarcadorXML">
+                <button pButton pRipple (click)="verNuevoMarcadorXML = false; clickGuardarMarcadorXML = false;" label= "{{'listado' | translate}} {{'marcadores' | translate}}" 
+                    icon="pi pi-chevron-left" class="p-button-text font-semibold flex-shrink-0 "></button>
+            </div>
+        </div>
+        <p-table [value]="listaXML" [scrollable]="true" responsiveLayout="scroll"
+            dataKey="llaveTabla" selectionMode="single"  
+            [rows]="10" [totalRecords]="listaXML.length"
+            [paginator]="listaXML.length > 10" *ngIf="!verNuevoMarcadorXML"
+            (onRowSelect)="verMarcadorXML($event)" (onRowUnselect)="verMarcadorXML($event)">
+            <ng-template pTemplate="header">
+
+                <tr class="fondoTablaPincipal">
+                    <th>{{'descripcion' | translate }}</th>
+                    <th>{{'tipo' | translate }}</th>
+                    <th>{{'columna' | translate }}</th>
+                    <th>{{'marcador' | translate }}</th>
+                </tr>
+                <th>
+            </ng-template>
+            <ng-template pTemplate="body" let-marctexto>
+                <tr [pSelectableRow]="marctexto">
+                    <td>{{marctexto.descripcion}}</td>
+                    <td>{{marctexto.tipo | reporteFuentePipe : 'listaTipoDatoMarcadores'}}</td>
+                    <td>{{marctexto.nombreColumna}}</td>
+                    <td>{{marctexto.marcador}}</td>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="emptymessage">
+                <tr>
+                    <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                </tr>
+            </ng-template>
+        </p-table>
+        <div class="card mt-3" *ngIf="verNuevoMarcadorXML">            
+            <h5 class="mt-3"><i class="glyphicons glyphicons-notes"></i>{{'detalle' | translate}}</h5>
+            <div class="Detallereporte mt-2">
+                <div class="p-fluid p-formgrid grid" >
+                    <div class="field col-12 md:col-4" >
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="marcadorXML.descripcion" maxlength="100"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorXML.descripcion) && clickGuardarMarcadorXML"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorXML.descripcion) && clickGuardarMarcadorXML">
+                            <label>{{'descripcion' | translate}} *</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel> 
+                            <p-dropdown [options]="listaTipoMarcadorXML" [autoDisplayFirst]="false"  
+                                [(ngModel)]="marcadorXML.tipo" optionLabel="nombre" optionValue="codigo"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorXML.tipo) && clickGuardarMarcadorXML"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorXML.tipo) && clickGuardarMarcadorXML"></p-dropdown>
+                            <label>{{'tipo' | translate }} *</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="['MA','MR'].includes(marcadorXML.tipo)" >
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="marcadorXML.marcador" >
+                            <label>{{'marcador' | translate}}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="marcadorXML.tipo == 'TB'" >
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="marcadorXML.marcador" maxlength="5" 
+                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);" >
+                            <label>{{'tabla' | translate}}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4"  *ngIf="marcadorXML.tipo == 'MA'" >
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaColumnas" [autoDisplayFirst]="false" [showClear]="true"
+                                [(ngModel)]="marcadorXML.reporteColumna" optionLabel="nombre" optionValue="llaveTabla" ></p-dropdown>
+                            <label>{{'columna' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="marcadorXML.tipo == 'MA'" >
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="marcadorXML.formato" >
+                            <label>{{'formato' | translate}}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="marcadorXML.tipo == 'MR'">
+                        <p-floatLabel>
+                            <textarea class="w-full min-h-150 max-h-200" pInputTextarea [(ngModel)]="marcadorXML.textoRegistro" ></textarea>
+                            <label>{{'texto' | translate }}</label>    
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="['MR','TB'].includes(marcadorXML.tipo)">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaFuentes" [autoDisplayFirst]="false" [showClear]="true"
+                                [(ngModel)]="marcadorXML.fuente" optionLabel="descripcion" optionValue="llave"></p-dropdown>
+                            <label>{{'fuente' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="['MR','TB'].includes(marcadorXML.tipo)">
+                        <p-floatLabel>
+                            <textarea class="w-full min-h-150 max-h-200" pInputTextarea [(ngModel)]="marcadorXML.filtro"></textarea>
+                            <label>{{'filtro' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4" *ngIf="marcadorXML.tipo == 'TB'">
+                        <p-floatLabel>
+                            <textarea class="w-full min-h-150 max-h-200" pInputTextarea [(ngModel)]="marcadorXML.estructuraTablaXML"></textarea>
+                            <label>{{'estructuratabla' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+                </div>
+                <!--BOTONES-->
+                <div class="flex justify-content-end mb-3" >
+                    <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons {{marcadorXML.llave ? 'glyphicons-refresh' : 'glyphicons-floppy-save'}}"
+                        label="{{marcadorXML.llave ? ('link_actualizar' | translate) : ('link_guardar' | translate)}}" (click)="guardarMarcadorXML()">
+                    </button>
+                    <button pButton pRipple class="ml-2 p-button-outlined" icon="glyphicons glyphicons-bin"
+                        *ngIf="marcadorXML.llave != null" label="{{'link_eliminar' | translate}}"
+                        (click)="eliminarMarcadorXML($event)">
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div *ngIf="verNuevoMarcadorXML && marcadorXML.llave != null && (marcadorXML.tipo == 'MR' || marcadorXML.tipo == 'TB')">
+            <div class="flex justify-content-end align-items-center mb-3">
+                <button pButton label="{{'link_nuevo' | translate}}" (click)="nuevoCampoTablaXML()" icon="pi pi-plus" [disabled]="habilitaCampo"
+                    class="p-ripple p-element p-button p-component p-button-secondary mb-2"></button>
+            </div>
+            <p-table [value]="listaCamposMarcadorXML" responsiveLayout="scroll" styleClass="p-datatable-striped"
+                    [rows]="10" [totalRecords]="listaCamposMarcadorXML.length"
+                    [paginator]="listaCamposMarcadorXML.length > 10" 
+                    [showCurrentPageReport]="true" currentPageReportTemplate="{first} al {last} de {totalRecords} registros" 
+                    editMode="row" dataKey="llave">
+                <ng-template pTemplate="header">
+                    <tr class="fondoTablaPincipal">
+                        <th style="width: 30%;">{{'campo' | translate }}</th>
+                        <th style="width: 30%;">{{'marcador' | translate }}</th>
+                        <th style="width: 30%;">{{'formato' | translate }}</th>
+                        <th style="width: 10%"> </th>
+                    </tr>
+                    <tr class="TablaNuevoRegistro" *ngIf="verReporteMarcadorDetalleXML">
+                        <td style="width: 30%;">
+                            <input pInputText type="text" [(ngModel)]="campoMarcadorInsertarXML.campoFuente" style="width: -webkit-fill-available"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(campoMarcadorInsertarXML.campoFuente) && clickGuardarMarcadorCampoXML"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(campoMarcadorInsertarXML.campoFuente) && clickGuardarMarcadorCampoXML">
+                        </td>
+                        <td style="width: 30%;">
+                            <input pInputText type="text" [(ngModel)]="campoMarcadorInsertarXML.marcador" style="width: -webkit-fill-available"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(campoMarcadorInsertarXML.marcador) && clickGuardarMarcadorCampoXML"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(campoMarcadorInsertarXML.marcador) && clickGuardarMarcadorCampoXML">
+                        </td>
+                        <td style="width: 30%;">
+                            <input pInputText type="text" [(ngModel)]="campoMarcadorInsertarXML.formato" style="width: -webkit-fill-available">
+                        </td>
+                        <td style="width: 10%">
+                            <div class="flex justify-content-end" >
+                                <button pButton pRipple type="button" icon="pi pi-check" (click)="agregarCampoMarcadorXML(campoMarcadorInsertarXML)"
+                                    class="p-element p-ripple p-button-rounded p-button-success mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                <button pButton pRipple type="button" (click)="verReporteMarcadorDetalleXML = false; habilitaCampo = false;" icon="pi pi-times"
+                                    class="p-element p-ripple p-button-rounded p-button-danger mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                            </div>
+                        </td>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-campo let-editing="editing" let-ri="rowIndex">
+                    <tr [pEditableRow]="campo">
+                        <td style="width: 30%;">
+                            <p-cellEditor>
+                                <ng-template pTemplate="input">
+                                    <input pInputText type="text" [(ngModel)]="campo.campoFuente" style="width: -webkit-fill-available"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(campo.campoFuente) && clickGuardarMarcadorCampoXML"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(campo.campoFuente) && clickGuardarMarcadorCampoXML">
+                                </ng-template>
+                                <ng-template pTemplate="output">
+                                    {{campo.campoFuente}}
+                                </ng-template>
+                            </p-cellEditor>
+                        </td>
+                        <td style="width: 30%;">
+                            <p-cellEditor>
+                                <ng-template pTemplate="input">
+                                    <input pInputText type="text" [(ngModel)]="campo.marcador" style="width: -webkit-fill-available"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(campo.marcador) && clickGuardarMarcadorCampoXML"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(campo.marcador) && clickGuardarMarcadorCampoXML">
+                                </ng-template>
+                                <ng-template pTemplate="output">
+                                    {{campo.marcador}}
+                                </ng-template>
+                            </p-cellEditor>
+                        </td>
+                        <td style="width: 30%;">
+                            <p-cellEditor>
+                                <ng-template pTemplate="input">
+                                    <input pInputText type="text" [(ngModel)]="campo.formato" style="width: -webkit-fill-available">
+                                </ng-template>
+                                <ng-template pTemplate="output">
+                                    {{campo.formato}}
+                                </ng-template>
+                            </p-cellEditor>
+                        </td>
+                       
+                        
+                        <td style="width: 10%">
+                            <div class="flex justify-content-end">
+                                <!-- CHECK GUARDAR -->
+                                <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow
+                                    icon="pi pi-check" (click)="agregarCampoMarcadorXML(campo)"
+                                    class="p-element p-ripple p-button-rounded p-button-success mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                <!-- CANCELAR -->
+                                <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow
+                                    icon="pi pi-times" (click)="cargarListaCampoMarcadorXMLAsync()"
+                                    class="p-element p-ripple p-button-rounded p-button-danger mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                <!-- EDITAR -->
+                                <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow
+                                    icon="glyphicons glyphicons-pencil" [disabled]="habilitaCampo" (click)="iniciarEdicion()"
+                                    class="p-element p-ripple p-button-rounded p-button-secondary mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                                <!-- ELIMINAR -->
+                                <button *ngIf="!editing" pButton pRipple type="button" pDeleteEditableRow
+                                    icon="pi pi-trash" [disabled]="habilitaCampo" (click)="eliminarCampoMarcadorXML($event,campo)"
+                                    class="p-element p-ripple p-button-rounded p-button-outlined mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                            </div>
+                        </td>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="emptymessage">
+                    <tr>
+                        <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                    </tr>
+                </ng-template>
+            </p-table>
+        </div>
+    </p-tabPanel>
+    <p-tabPanel header="{{'columnario' | translate }}">
+        <p-accordion (onOpen)="cambiarTabColumnario($event)" >
+            <p-accordionTab [selected]="true" >
+                <ng-template pTemplate="header"><i class="glyphicons glyphicons-notes"></i>
+                    {{'columnasbasicas'|translate}}
+                </ng-template>
+                <div class="flex justify-content-end align-items-center mt-2 mb-2">
+                    <button pButton pRipple class="p-button-secondary font-semibold" icon="pi pi-plus"
+                        (click)="nuevoColumnaBasica()" label="{{'link_nuevo' | translate}}" *ngIf="!verNuevoReporteColumnario">
+                    </button>
+                    <div class="flex justify-content-end  mb-1" *ngIf="verNuevoReporteColumnario">
+                        <button pButton pRipple (click)="verNuevoReporteColumnario = false; clickGuardarReporteColumnario = false;" label= "{{'listado' | translate}} {{'columnasbasicas' | translate}}" 
+                            icon="pi pi-chevron-left" class="p-button-text font-semibold flex-shrink-0 "></button>
+                    </div>
+                </div>
+                <p-table [value]="listaReporteColumnario" [scrollable]="true" responsiveLayout="scroll"
+                    dataKey="llaveTabla" selectionMode="single"  
+                    [rows]="10" [totalRecords]="listaReporteColumnario.length"
+                    [paginator]="listaReporteColumnario.length > 10" *ngIf="!verNuevoReporteColumnario"
+                    (onRowSelect)="verReporteColumnario($event)" (onRowUnselect)="verReporteColumnario($event)">
+                    <ng-template pTemplate="header">
+
+                        <tr class="fondoTablaPincipal">
+                            <th>{{'nombre' | translate }}</th>
+                            <th>{{'columna' | translate }}</th>
+                            <th>{{'tipo' | translate }}</th>
+                            <th>{{'orden' | translate }}</th>
+                            <th>{{'operacion' | translate }}</th>
+                        </tr>
+                        <th>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-bean>
+                        <tr [pSelectableRow]="bean">
+                            <td>{{bean.nombre}}</td>
+                            <td>{{bean.nombreColumna}}</td>
+                            <td>{{bean.tipo | reporteColumnarioPipe: 'listaTipoColumna'}}</td>
+                            <td>{{bean.orden}}</td>
+                            <td>{{bean.operacion | reporteColumnarioPipe: 'listaOperacion'}}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="emptymessage">
+                        <tr>
+                            <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+                <div  *ngIf="verNuevoReporteColumnario">
+                    <div class="Detallereporte mt-2">
+                        <div class="p-fluid p-formgrid grid" >
+                            <div class="field col-12 md:col-4" >
+                                <p-floatLabel>
+                                    <input pInputText type="text" [(ngModel)]="columnaBasica.nombre" maxlength="100"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.nombre) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.nombre) && clickGuardarReporteColumnario">
+                                    <label>{{'nombre' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+        
+                            <div class="field col-12 md:col-4">
+                                <p-floatLabel> 
+                                    <p-dropdown [options]="listaTipoColumnas" [autoDisplayFirst]="false" appendTo="body"
+                                        [(ngModel)]="columnaBasica.tipo" optionLabel="nombre" optionValue="codigo"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.tipo) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.tipo) && clickGuardarReporteColumnario"></p-dropdown>
+                                    <label>{{'tipocolumna' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-4">
+                                <p-floatLabel> 
+                                    <p-dropdown [options]="listaColumnas" [autoDisplayFirst]="false" appendTo="body"
+                                        [(ngModel)]="columnaBasica.reporteColumna" optionLabel="nombre" optionValue="llaveTabla"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.reporteColumna) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.reporteColumna) && clickGuardarReporteColumnario"></p-dropdown>
+                                    <label>{{'columna' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-4" *ngIf="columnaBasica.tipo == 'D'">
+                                <p-floatLabel> 
+                                    <p-dropdown [options]="listaOperacionesColumnario" [autoDisplayFirst]="false" appendTo="body"
+                                        [(ngModel)]="columnaBasica.operacion" optionLabel="nombre" optionValue="codigo"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.operacion) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.operacion) && clickGuardarReporteColumnario"></p-dropdown>
+                                    <label>{{'operacion' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-4" *ngIf="isTipoColumna()">
+                                <p-floatLabel> 
+                                    <p-dropdown [options]="listaOperacionesExcelColumnario" [autoDisplayFirst]="false" appendTo="body"
+                                        [(ngModel)]="columnaBasica.operacionHorizontal" optionLabel="nombre" optionValue="codigo"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.operacionHorizontal) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.operacionHorizontal) && clickGuardarReporteColumnario"></p-dropdown>
+                                    <label>{{'operacionhorizontal' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+                            <!--  fila Operacion Vertical -->
+                            <div class="field col-12 md:col-4" *ngIf="isTipoColumna()">
+                                <p-floatLabel>
+                                    <input pInputText type="text" [(ngModel)]="columnaBasica.columnaOperacionVertical" maxlength="5"
+                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.columnaOperacionVertical) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.columnaOperacionVertical) && clickGuardarReporteColumnario">
+                                    <label>{{'columnaoperacion' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+                            <!-- Operacion Verticial -->
+                            <div class="field col-12 md:col-4" *ngIf="isTipoColumna()">
+                                <p-floatLabel> 
+                                    <p-dropdown [options]="listaOperacionesExcelColumnario" [autoDisplayFirst]="false" appendTo="body"
+                                        [(ngModel)]="columnaBasica.operacionVertical" optionLabel="nombre" optionValue="codigo"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.operacionVertical) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.operacionVertical) && clickGuardarReporteColumnario"></p-dropdown>
+                                    <label>{{'operacionvertical' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+                            <!-- Orden -->
+                            <div class="field col-12 md:col-4" *ngIf="isMostrarOrden()">
+                                <p-floatLabel>
+                                    <input pInputText type="text" [(ngModel)]="columnaBasica.orden" maxlength="5"
+                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.orden) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.orden) && clickGuardarReporteColumnario">
+                                    <label>{{'orden' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+                            <!-- Ordenamiento Filas -->
+                            <div class="field col-12 md:col-4" *ngIf="isTipoLabel() || isTipoFila()">
+                                <p-floatLabel> 
+                                    <p-dropdown [options]="listaOrdenamiento" [autoDisplayFirst]="false" [showClear]="false"  appendTo="body"
+                                        [(ngModel)]="columnaBasica.orderBy" optionLabel="nombre" optionValue="codigo" 
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.orderBy) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.orderBy) && clickGuardarReporteColumnario"></p-dropdown>
+                                    <label>{{'ordenamiento' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+                            <!-- Ordenamiento Datos de la consulta -->
+                            <div class="field col-12 md:col-4" *ngIf="isMostrarOrdenConsulta()">
+                                <p-floatLabel>
+                                    <input pInputText type="text" [(ngModel)]="columnaBasica.ordenConsulta" maxlength="5"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaBasica.ordenConsulta) && clickGuardarReporteColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaBasica.ordenConsulta) && clickGuardarReporteColumnario"
+                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);" >
+                                    <label>{{'ordenconsulta' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+                        </div>
+                        <!--BOTONES-->
+                        <div class="flex justify-content-end mb-3" >
+                            <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons {{columnaBasica.llaveTabla ? 'glyphicons-refresh' : 'glyphicons-floppy-save'}}"
+                                label="{{columnaBasica.llaveTabla ? ('link_actualizar' | translate) : ('link_guardar' | translate)}}" (click)="guardarColumnaBasica()">
+                            </button>
+                            <button pButton pRipple class="ml-2 p-button-outlined" icon="glyphicons glyphicons-bin"
+                                *ngIf="columnaBasica.llaveTabla != null" label="{{'link_eliminar' | translate}}"
+                                (click)="eliminarColumnaBasica($event)">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </p-accordionTab>
+        </p-accordion>
+        <p-accordion (onOpen)="cambiarTabColumnario($event)">
+            <p-accordionTab >
+                <ng-template pTemplate="header"><i class="glyphicons glyphicons-notes"></i>
+                    {{'datosadicionales'|translate}}
+                </ng-template>
+                <p-fieldset class="fieldsintitulo" >
+                    <div class="Detallereporte mt-2">
+                        <div class="p-fluid p-formgrid grid">
+        
+                            <div class="field col-12 md:col-3">
+                                <p-floatLabel>
+                                    <app-input-helper-seleccion-plantilla [readonly]="false" [showDialog]="false"
+                                        [label]="reporteFuente.archivoExcelColumnario ? reporteFuente.archivoExcelColumnario: ''"
+                                        [extensiones]="'xls;xlsx;xlsm'" [mostraroblicargo]="true" [labelrar]="'plantilla' | translate"
+                                        (onSelected)="obtenerArchivoColumnario($event)"></app-input-helper-seleccion-plantilla>
+                                </p-floatLabel>
+                            </div>
+        
+                            <div class="field col-12 md:col-3">
+                                <p-floatLabel>
+                                    <input pInputText type="text" [(ngModel)]="reporteFuente.hojaExcel" size="25" maxlength="20">
+                                    <label>{{'nombre' | translate }} {{'de' | translate }} {{'la' | translate }} {{'hoja' |
+                                        translate }}</label>    
+                                </p-floatLabel>
+                             </div>
+
+                             <div class="field col-12 md:col-3">
+                                <p-floatLabel>
+                                    <input pInputText [(ngModel)]="reporteFuente.filaInicioColumnario" maxlength="5" 
+                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);" />
+                                    <label>{{'filainiciocolumnario' | translate }}</label>
+                                </p-floatLabel>
+                            </div>
+
+                             <div class="field col-12 md:col-3">
+                                <p-floatLabel>
+                                    <p-dropdown [options]="listaTipoCifrado" [autoDisplayFirst]="false" [showClear]="true" appendTo="body"
+                                        [(ngModel)]="reporteFuente.cifradoColumnario" optionLabel="nombre"
+                                        optionValue="llaveTabla"></p-dropdown>
+                                    <label>{{'tipocifrado' | translate }}</label>    
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-12">
+                                <p-floatLabel>
+                                    <textarea class="w-full min-h-50 max-h-100"  pInputTextarea [(ngModel)]="reporteFuente.sintaxisColumnario"></textarea>
+                                    <label>{{'sintaxiscolumnario' | translate }}</label>
+                                </p-floatLabel>
+                            </div>
+        
+                        </div>
+                        <!--BOTONES-->
+                        <div class="flex justify-content-end mb-3">
+                            <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons glyphicons-refresh"
+                                label="{{'link_actualizar' | translate}}" (click)="actualizar()">
+                            </button>
+                        </div>
+                    </div>
+                </p-fieldset>
+                <div class="flex justify-content-between align-items-center mb-3 mt-3">
+                    <h1 class="text-xl">{{'columnaadicional' | translate}}</h1>
+                    <button pButton pRipple class="p-button-secondary font-semibold" icon="pi pi-plus"
+                        (click)="nuevaColumnaAdicional()" label="{{'link_nuevo' | translate}}" *ngIf="!verNuevoColumnaAdicional">
+                    </button>
+                    <div class="flex justify-content-end  mb-1" *ngIf="verNuevoColumnaAdicional">
+                        <button pButton pRipple (click)="verNuevoColumnaAdicional = false; clickGuardarColumnaAdicional = false;" label= "{{'listado' | translate}} {{'columnaadicional' | translate}}" 
+                            icon="pi pi-chevron-left" class="p-button-text font-semibold flex-shrink-0 "></button>
+                    </div>
+                </div>
+                <p-table [value]="columnasAdicionales" [scrollable]="true" responsiveLayout="scroll"
+                    dataKey="llaveTabla" selectionMode="single"  
+                    [rows]="10" [totalRecords]="columnasAdicionales.length"
+                    [paginator]="columnasAdicionales.length > 10" *ngIf="!verNuevoColumnaAdicional"
+                    (onRowSelect)="verDetalleAdicional($event)" (onRowUnselect)="verDetalleAdicional($event)">
+                    <ng-template pTemplate="header">
+                        <tr class="fondoTablaPincipal">
+                            <th>{{'nombre' | translate }}</th>
+                            <th>{{'orden' | translate }}</th>
+                        </tr>
+                        <th>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-columnaadicional>
+                        <tr [pSelectableRow]="columnaadicional">
+                            <td>{{columnaadicional.nombre}}</td>
+                            <td>{{columnaadicional.orden}}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="emptymessage">
+                        <tr>
+                            <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+                <p-fieldset class="fieldsintitulo"  *ngIf="verNuevoColumnaAdicional">
+                    <div class="Detallereporte mt-2">
+                        <div class="p-fluid p-formgrid grid" >
+                            <div class="field col-12 md:col-3" >
+                                <p-floatLabel>
+                                    <input pInputText type="text" [(ngModel)]="columnaAdicional.nombre" maxlength="100"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaAdicional.nombre) && clickGuardarColumnaAdicional"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaAdicional.nombre) && clickGuardarColumnaAdicional">
+                                    <label>{{'alias' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-3" >
+                                <p-floatLabel>
+                                    <input pInputText [(ngModel)]="columnaAdicional.orden" maxlength="5" 
+                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaAdicional.orden) && clickGuardarColumnaAdicional"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaAdicional.orden) && clickGuardarColumnaAdicional" />
+                                    <label>{{'orden' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-3">
+                                <p-floatLabel> 
+                                    <p-dropdown [options]="listaOrdenamiento" [autoDisplayFirst]="false" appendTo="body"
+                                        [(ngModel)]="columnaAdicional.orderBy" optionLabel="nombre" optionValue="codigo"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaAdicional.orderBy) && clickGuardarColumnaAdicional"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaAdicional.orderBy) && clickGuardarColumnaAdicional"></p-dropdown>
+                                    <label>{{'ordenamiento' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+        
+                            <div class="field col-12 md:col-3" >
+                                <p-floatLabel>
+                                    <input pInputText [(ngModel)]="columnaAdicional.ordenConsulta" maxlength="5" 
+                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 5);"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaAdicional.ordenConsulta) && clickGuardarColumnaAdicional"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaAdicional.ordenConsulta) && clickGuardarColumnaAdicional" />
+                                    <label>{{'ordenconsulta' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-12" >
+                                <p-floatLabel>
+                                    <textarea class="w-full min-h-50 max-h-100" pInputTextarea [(ngModel)]="columnaAdicional.sintaxis" maxlength="4000"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(columnaAdicional.sintaxis) && clickGuardarColumnaAdicional"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(columnaAdicional.sintaxis) && clickGuardarColumnaAdicional"></textarea>
+                                    <label>{{'sintaxis' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+                        </div>
+                        <!--BOTONES-->
+                        <div class="flex justify-content-end mb-3" >
+                            <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons {{columnaAdicional.llaveTabla ? 'glyphicons-refresh' : 'glyphicons-floppy-save'}}"
+                                label="{{columnaAdicional.llaveTabla ? ('link_actualizar' | translate) : ('link_guardar' | translate)}}" (click)="guardarColumnaAdicional()">
+                            </button>
+                            <button pButton pRipple class="ml-2 p-button-outlined" icon="glyphicons glyphicons-bin"
+                                *ngIf="columnaAdicional.llaveTabla != null" label="{{'link_eliminar' | translate}}"
+                                (click)="eliminarColumnaAdicional($event)">
+                            </button>
+                        </div>
+                    </div>
+                </p-fieldset>
+            </p-accordionTab>
+            <p-accordionTab >
+                <ng-template pTemplate="header"><i class="glyphicons glyphicons-notes"></i>
+                    {{'marcadores'|translate}}
+                </ng-template>
+                <div class="flex justify-content-end align-items-center mb-3">
+                    <button pButton pRipple class="p-button-secondary font-semibold" icon="pi pi-plus"
+                        (click)="nuevoMarcadorColumnario()" label="{{'link_nuevo' | translate}}" *ngIf="!verNuevoMarcadorColumnario">
+                    </button>
+                    <div class="flex justify-content-end  mb-1" *ngIf="verNuevoMarcadorColumnario">
+                        <button pButton pRipple (click)="verNuevoMarcadorColumnario = false; clickGuardarMarcadorColumnario = false;" label= "{{'listado' | translate}} {{'marcador' | translate}}" 
+                            icon="pi pi-chevron-left" class="p-button-text font-semibold flex-shrink-0 "></button>
+                    </div>
+                </div>
+                <p-table [value]="marcadoresColumnario" [scrollable]="true" responsiveLayout="scroll"
+                    dataKey="llaveTabla" selectionMode="single"  
+                    [rows]="10" [totalRecords]="marcadoresColumnario.length"
+                    [paginator]="marcadoresColumnario.length > 10" *ngIf="!verNuevoMarcadorColumnario"
+                    (onRowSelect)="verDetalleMarcadorColumnario($event)" (onRowUnselect)="verDetalleMarcadorColumnario($event)">
+                    <ng-template pTemplate="header">
+                        <tr class="fondoTablaPincipal">
+                            <th>{{'nombre' | translate }}</th>
+                            <th>{{'tipomarcador' | translate }}</th>
+                        </tr>
+                        <th>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-marcador>
+                        <tr [pSelectableRow]="marcador">
+                            <td>{{marcador.marcador}}</td>
+                            <td>{{marcador.tipo | reporteColumnarioPipe: 'listaTipoMarcador'}}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="emptymessage">
+                        <tr>
+                            <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+                <div *ngIf="verNuevoMarcadorColumnario">
+                    <div class="Detallereporte mt-2">
+                        <div class="p-fluid p-formgrid grid" >
+                            <div class="field col-12 md:col-4" >
+                                <p-floatLabel>
+                                    <input pInputText [(ngModel)]="marcadorColumnario.descripcion" maxlength="4000" 
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorColumnario.descripcion) && clickGuardarMarcadorColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorColumnario.descripcion) && clickGuardarMarcadorColumnario" />
+                                    <label>{{'descripcion' | translate}} *</label>
+                                </p-floatLabel>
+                                </div>
+
+                            <div class="field col-12 md:col-4" >
+                                <p-floatLabel>
+                                    <input pInputText [(ngModel)]="marcadorColumnario.marcador" maxlength="50" 
+                                    [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorColumnario.marcador) && clickGuardarMarcadorColumnario"
+                                    [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorColumnario.marcador) && clickGuardarMarcadorColumnario" />
+                                    <label>{{'marcador' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+
+                            <div class="field col-12 md:col-4">
+                                <p-floatLabel> 
+                                    <p-dropdown [options]="listaTipoMarcadorColumnario" [autoDisplayFirst]="false" appendTo="body"
+                                        [(ngModel)]="marcadorColumnario.tipo" optionLabel="nombre" optionValue="codigo"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorColumnario.tipo) && clickGuardarMarcadorColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorColumnario.tipo) && clickGuardarMarcadorColumnario"></p-dropdown>
+                                    <label>{{'tipo' | translate }} *</label>
+                                </p-floatLabel>
+                            </div>
+        
+                            <div class="field col-12 md:col-12" >
+                                <p-floatLabel>
+                                    <textarea class="w-full min-h-50 max-h-100" pInputTextarea [(ngModel)]="marcadorColumnario.textoRegistro" maxlength="4000"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(marcadorColumnario.textoRegistro) && clickGuardarMarcadorColumnario"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(marcadorColumnario.textoRegistro) && clickGuardarMarcadorColumnario"></textarea>
+                                    <label>{{'valor' | translate}} *</label>
+                                </p-floatLabel>
+                            </div>
+                        </div>
+                        <!--BOTONES-->
+                        <div class="flex justify-content-end mb-3" >
+                            <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons {{marcadorColumnario.llaveTabla ? 'glyphicons-refresh' : 'glyphicons-floppy-save'}}"
+                                label="{{marcadorColumnario.llaveTabla ? ('link_actualizar' | translate) : ('link_guardar' | translate)}}" (click)="guardarMarcadorColumnario()">
+                            </button>
+                            <button pButton pRipple class="ml-2 p-button-outlined" icon="glyphicons glyphicons-bin"
+                                *ngIf="marcadorColumnario.llaveTabla != null" label="{{'link_eliminar' | translate}}"
+                                (click)="eliminarMarcadorColumnario($event)">
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </p-accordionTab>
+        </p-accordion>
+    </p-tabPanel>
+    <p-tabPanel header="{{'grafica' | translate }}">
+        <div class="card col-md-12">
+            <div class="Detallereporte mt-2">
+                <div class="p-fluid p-formgrid grid">
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="reporteFuente.codigo" size="25"
+                                maxlength="100">
+                            <label>{{'codigo' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <input pInputText type="text" [(ngModel)]="reporteFuente.tituloGrafico" size="25"
+                                maxlength="100">
+                            <label>{{'titulo' | translate }}</label>
+                        </p-floatLabel>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p-floatLabel>
+                            <p-dropdown [options]="listaTipoGrafico" [autoDisplayFirst]="false" [showClear]="true"
+                                [(ngModel)]="reporteFuente.tipoGrafico" optionLabel="nombre"
+                                optionValue="codigo"></p-dropdown>
+                            <label>{{'tipo' | translate }}</label>    
+                        </p-floatLabel>
+                    </div>
+                </div>
+
+                <!--BOTONES-->
+                <div class="flex justify-content-end mb-3" *ngIf="isSql()">
+                    <button pButton pRipple class="ml-2 p-button p-button-raised" icon="glyphicons glyphicons-refresh"   
+                        label="{{'link_actualizar' | translate}}" (click)="guardarGrafico()">
+                    </button>
+                    <button pButton pRipple class="ml-2 p-button-outlined background-100" icon="pi pi-eye"
+                        label="{{'link_ver' | translate}}" (click)="verGrafico()">
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <p-table [value]="paginadorColumnas" responsiveLayout="scroll" [scrollable]="true"
+            [rows]="20" [totalRecords]="paginadorColumnas.length" [paginator]="paginadorColumnas.length > 20" >
+            <ng-template pTemplate="header">
+
+                <tr class="fondoTablaPincipal">
+                    <th>{{'columna' | translate }}</th>
+                    <th>{{'sintaxis' | translate }}</th>
+                    <th>{{'tipo' | translate }}</th>
+                    <th>{{'accion' | translate }}</th>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-bean>
+                <tr [pSelectableRow]="bean">
+                    <td>{{bean.nombre}}</td>
+                    <td>{{bean.sintaxis}}</td>
+                    <td>{{bean.tipoDato | reporteFuentePipe : 'listaTipoDato'}}</td>
+                    <td>
+                        <p-dropdown [options]="listaGraficoSencillo" [autoDisplayFirst]="false" [showClear]="true"
+                            [(ngModel)]="bean.graficoFuente" optionLabel="nombre"
+                            optionValue="codigo"></p-dropdown>
+                    </td>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="emptymessage">
+                <tr>
+                    <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                </tr>
+            </ng-template>
+        </p-table> 
+
+        <div class="flex justify-content-between align-items-center mt-2 mb-2">
+            <h1 class="text-xl">Colores</h1>
+            <button pButton label="{{'link_nuevo' | translate}}" (click)="nuevoColorCategoria()" icon="pi pi-plus"
+                [disabled]="habilitaCampo" class="p-ripple p-element p-button p-component p-button-secondary mb-2"></button>
+        </div>
+        <p-table [value]="paginadorColoresGrafica" responsiveLayout="scroll" styleClass="p-datatable-striped"
+            [rows]="10" [totalRecords]="paginadorColoresGrafica.length"
+            [paginator]="paginadorColoresGrafica.length > 10" 
+            [showCurrentPageReport]="true" currentPageReportTemplate="{first} al {last} de {totalRecords} registros" 
+            editMode="row" dataKey="llaveTabla">
+            <ng-template pTemplate="header">
+                <tr class="fondoTablaPincipal">
+                    <th style="width: 45%">{{'categoria' | translate}}</th>
+                    <th style="width: 45%">{{'color' | translate}}</th>
+                    <th style="width: 10%"> </th>
+                </tr>
+                <tr class="TablaNuevoRegistro" *ngIf="verColorCategoriaDetalle">
+                    <td style="width: 45%">
+                        <input pInputText type="text" [(ngModel)]="colorCategoria.titulo" style="width: -webkit-fill-available"
+                            [class.ng-dirty]="!utilsService.validarCampoObligatorio(colorCategoria.titulo) && clickGuardarColorCategoria"
+                            [class.ng-invalid]="!utilsService.validarCampoObligatorio(colorCategoria.titulo) && clickGuardarColorCategoria">
+                    </td>
+                    <td style="width: 45%">
+                        <div style="width: 100%">
+                            <p-colorPicker [(ngModel)]="colorCategoria.banda" appendTo="body"
+                                [class.ng-dirty]="!utilsService.validarCampoObligatorio(colorCategoria.banda) && clickGuardarColorCategoria"
+                                [class.ng-invalid]="!utilsService.validarCampoObligatorio(colorCategoria.banda) && clickGuardarColorCategoria" />
+                            </div>
+                    </td>
+                    <td style="width: 10%">
+                        <div class="flex justify-content-end">
+                            <button pButton pRipple type="button" icon="pi pi-check" (click)="agregarColorCategoria(colorCategoria)"
+                                class="p-element p-ripple p-button-rounded p-button-success mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                            <button pButton pRipple type="button" (click)="verColorCategoriaDetalle = false" icon="pi pi-times" (click)="cancelarColorCategoria()"
+                                class="p-element p-ripple p-button-rounded p-button-danger mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                        </div>
+                    </td>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-color let-editing="editing" let-ri="rowIndex">
+                <tr [pEditableRow]="color" style="width: 100%">
+                    <td style="width: 45%">
+                        <p-cellEditor>
+                            <ng-template pTemplate="input">
+                                <input pInputText type="text" [(ngModel)]="color.titulo" style="width: -webkit-fill-available"
+                                    [class.ng-dirty]="!utilsService.validarCampoObligatorio(color.titulo) && clickGuardarColorCategoria"
+                                    [class.ng-invalid]="!utilsService.validarCampoObligatorio(color.titulo) && clickGuardarColorCategoria">
+                            </ng-template>
+                            <ng-template pTemplate="output">
+                                {{color.titulo}}
+                            </ng-template>
+                        </p-cellEditor>
+                    </td>
+                    <td style="width: 45%">
+                        <p-cellEditor>
+                            <ng-template pTemplate="input">
+                                <div style="width: 100%">
+                                    <p-colorPicker [(ngModel)]="color.banda" appendTo="body"
+                                        [class.ng-dirty]="!utilsService.validarCampoObligatorio(color.banda) && clickGuardarColorCategoria"
+                                        [class.ng-invalid]="!utilsService.validarCampoObligatorio(color.banda) && clickGuardarColorCategoria"/>
+                                </div>
+                            </ng-template>
+                            <ng-template pTemplate="output">
+                                <p-colorPicker [(ngModel)]="color.banda" [disabled]="true" />
+                            </ng-template>
+                        </p-cellEditor>
+                    </td>
+                    <td style="width: 10%">
+                        <div class="flex justify-content-end">
+                            <!-- CHECK GUARDAR -->
+                            <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow
+                                icon="pi pi-check" (click)="agregarColorCategoria(color)"
+                                class="p-element p-ripple p-button-rounded p-button-success mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                            <!-- CANCELAR -->
+                            <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow
+                                icon="pi pi-times" (click)="cancelarEdicionColor()"
+                                class="p-element p-ripple p-button-rounded p-button-danger mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                            <!-- EDITAR -->
+                            <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow
+                                icon="glyphicons glyphicons-pencil" [disabled]="habilitaCampo" (click)="iniciarEdicion()"
+                                class="p-element p-ripple p-button-rounded p-button-secondary mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                            <!-- ELIMINAR -->
+                            <button *ngIf="!editing" pButton pRipple type="button" pDeleteEditableRow
+                                icon="pi pi-trash" (click)="eliminarColorCategoria($event, color)" [disabled]="habilitaCampo"
+                                class="p-element p-ripple p-button-rounded p-button-outlined mr-2 mb-2 p-button p-component p-button-icon-only"></button>
+                        </div>
+                    </td>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="emptymessage">
+                <tr>
+                    <td colspan="100" class="p-3 font-medium emptymessage">{{'mensajetablavacia' | translate}}</td>
+                </tr>
+            </ng-template>
+        </p-table>
+        <div #divGrafica class="flex justify-content-between card mt-3" *ngIf="grafica">
+            <h1 class="text-xl">{{'grafica' | translate}}</h1>
+            <div style="width: 35%"></div>
+            <div style="width: 30%">
+                <p-chart [type]="tipoGrafica" [data]="grafica.datosGrafica.data" [options]="grafica.datosGrafica.options"></p-chart>
+            </div>
+            <div style="width: 35%"></div>
+        </div>
+    </p-tabPanel>
+</p-tabView>