general-library-union 2.4.99 → 2.5.1

package/src/app/core/componentes/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MenuItem } from 'primeng/api';
+import { MenuService } from '../../../core/servicios/menu.service';
+import { UtilsService } from '../../servicios/utils.service';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+
+@Component({
+  selector: 'app-breadcrumb',
+    imports: [BreadcrumbModule],
+    standalone: true,
+    templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.scss'],
+})
+export class BreadcrumbComponent implements OnInit, OnDestroy {
+  subscription: Subscription;
+  items: MenuItem[];
+  home: MenuItem;
+
+  constructor(private menuService: MenuService, public utilsService: UtilsService) {}
+
+  ngOnInit(): void {
+    this.subscription = this.menuService.breadcrumb.subscribe((items) => {
+      this.items = items;
+    });
+    if (window.location.href.toString().includes('admonPortal')) {
+      this.home = { icon: 'pi pi-home', routerLink: '/'+ this.utilsService.obtenerBase() + '/admonPortal/inicio' };
+    } else {
+      this.home = { icon: 'pi pi-home', routerLink: '/'+ this.utilsService.obtenerBase() + '/inicio' };
+    }
+    
+  }
+
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+}

package/src/app/core/componentes/carga-breadcrumb/carga-breadcrumb.component.html

@@ -0,0 +1 @@
+<p-progressBar *ngIf="isLoading" mode="indeterminate" [style]="{'height': '3px'}"> </p-progressBar>

package/src/app/core/componentes/carga-breadcrumb/carga-breadcrumb.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LoadingService } from '../../servicios/loading.service';
+import { ProgressBarModule } from 'primeng/progressbar';
+
+@Component({
+  selector: 'app-carga-breadcrumb',
+    imports: [ProgressBarModule],
+    standalone: true,
+    templateUrl: './carga-breadcrumb.component.html',
+  styleUrls: ['./carga-breadcrumb.component.scss']
+})
+export class CargaBreadcrumbComponent implements OnInit {
+
+  isLoading: boolean = false;
+  private loadingSubscription: Subscription;
+
+  constructor(private loadingService:LoadingService) { }
+
+  ngOnInit(): void {
+    this.loadingSubscription = this.loadingService.loadingBreadCrumb.subscribe(status =>
+      this.isLoading = status
+    )
+  }
+
+  ngOnDestroy(): void {
+    if(this.loadingSubscription){
+      this.loadingSubscription.unsubscribe();
+    }
+  }
+}

package/src/app/core/componentes/carga-pantalla-completa/carga-pantalla-completa.component.html

@@ -0,0 +1,9 @@
+<div *ngIf="isLoading" class="progress-spinner">
+  <div class="splash-screen">
+    <div class="splash-loader-container">
+      <svg class="splash-loader" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+        <circle class="splash-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+      </svg>
+    </div>
+  </div>
+</div>

package/src/app/core/componentes/carga-pantalla-completa/carga-pantalla-completa.component.scss

@@ -0,0 +1,28 @@
+.progress-spinner {
+  position: fixed;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+.progress-spinner:before {
+content: '';
+display: block;
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+background-color: rgba(0,0,0,0.53);
+}
+
+.splash-screen{
+  background: transparent !important;
+}

package/src/app/core/componentes/carga-pantalla-completa/carga-pantalla-completa.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LoadingService } from '../../servicios/loading.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-carga-pantalla-completa',
+  imports: [CommonModule],
+    standalone: true,
+    templateUrl: './carga-pantalla-completa.component.html',
+  styleUrls: ['./carga-pantalla-completa.component.scss']
+})
+export class CargaPantallaCompletaComponent implements OnInit {
+
+  public isLoading: boolean;
+  loadingSubscription: Subscription;
+
+  constructor(private loadingService: LoadingService) { }
+
+  ngOnInit(): void {
+    this.loadingSubscription = this.loadingService.loadingFullScreen.subscribe(
+      state => this.isLoading = state
+    )
+  }
+
+  ngOnDestroy(): void {
+    if(this.loadingSubscription){
+      this.loadingSubscription.unsubscribe();
+    }
+  }
+
+}

package/src/app/core/componentes/filtro-general/filtro-general.component.html

@@ -0,0 +1,34 @@
+<div class="flex justify-content-start align-items-center">
+  <div class="flex align-items-center">
+    <h4 class="m-0 mr-2 text-black-alpha-90">Filtros</h4>
+    <button
+      pButton
+      pRipple
+      type="button"
+      icon="pi pi-filter"
+      class="p-button-rounded p-button-outlined"
+      (click)="abrirPanel($event)"
+    ></button>
+  </div>
+  <div class="ml-3">
+    <p-chip
+      *ngFor="let chip of chips"
+      [label]="chip.header + ': ' + (chip.labelMostrar.length > 100 ? chip.labelMostrar.substring(0, 100) + '...' : chip.labelMostrar)"
+      styleClass="m-1"
+      [removable]="true"
+      (onRemove)="removeChip(chip)"
+    ></p-chip>
+  </div>
+</div>
+
+<p-overlayPanel (onHide)="onHide()" [dismissable]="false" [showCloseIcon]="true">
+  <div class="grid p-input-filled">
+    <form [formGroup]="filterForm" class="p-fluid col-12">
+      <ng-container *ngTemplateOutlet="inputFilters; context: { $implicit: filterForm }"></ng-container>
+      <div class="flex justify-content-end mt-2 align-items-center">
+        <button pButton pRipple (click)="aplicarFiltros()" class="ml-2">{{'link_aplicar' | translate}}</button>
+        <button pButton pRipple (click)="limpiarFiltros()" icon="glyphicons glyphicons-cleaning" class="p-button-rounded p-button-outlined ml-2"></button>
+      </div>
+    </form>
+  </div>
+</p-overlayPanel>

package/src/app/core/componentes/filtro-general/filtro-general.component.scss

@@ -0,0 +1,3 @@
+.grid .flex button:last-child {
+    width: auto;
+}

package/src/app/core/componentes/filtro-general/filtro-general.component.ts

@@ -0,0 +1,154 @@
+import { CommonModule, DatePipe } from '@angular/common';
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonModule } from 'primeng/button';
+import { ChipModule } from 'primeng/chip';
+import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
+
+@Component({
+  selector: 'app-filtro-general',
+  imports: [ChipModule, OverlayPanelModule, ReactiveFormsModule, TranslateModule, ButtonModule, FormsModule, CommonModule],
+    standalone: true,
+    templateUrl: './filtro-general.component.html',
+  styleUrls: ['./filtro-general.component.scss'],
+})
+export class FiltroGeneralComponent implements OnInit {
+  @Input() filtros: any[];
+
+  @Input() datatable;
+
+  @Output() metodoRegresar = new EventEmitter();
+  @Output() metodoRegresarAdicional = new EventEmitter();
+
+  @ViewChild(OverlayPanel) panel: OverlayPanel;
+  public eventoPanel;
+  @ContentChild(TemplateRef) inputFilters: TemplateRef<any>;
+
+  filterForm: FormGroup = new FormGroup({});
+
+  chips: any[] = [];
+
+  isApply: boolean = false;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    if (this.filtros === undefined) {
+    } else {
+      this.filtros.forEach((control) => {
+        this.filterForm.addControl(control.field, new FormControl());
+      });
+    }
+  }
+
+  onHide() {
+    if (!this.isApply) {
+      this.filtros.forEach((filtro) => {
+        const chipActive = this.chips.find(
+          (chip) => chip.field === filtro.field
+        );
+        this.filterForm.get(filtro.field).setValue(chipActive?.value);
+      });
+    }
+    this.isApply = false;
+  }
+
+  abrirPanel(event): void {
+    this.eventoPanel = event;
+    this.panel.show(event);
+  }
+
+  limpiarFiltros() {
+    this.isApply = false;
+    this.chips = [];
+    this.filterForm.reset();
+    this._updateFilters();
+  }
+
+  aplicarFiltros() {
+    this.isApply = true;
+    this.panel.hide();
+    this.chips = [];
+    this._updateFilters();
+  }
+
+  removeChip(chip) {
+    this._updateFilters(chip);
+  }
+
+  _updateFilters(chip?: any): void {
+    const filters = {};
+    this.filtros.forEach((filtro) => {
+      if (chip?.field !== filtro.field) {
+        const value = this.filterForm.get(filtro.field).value;
+        if (value) {
+          filters[filtro.field] = { value: value, matchMode: filtro.matchMode };
+
+          if (!chip) {
+            if (Array.isArray(value)){
+              var mostrar = '';
+              for (let i = 0; i < value.length; i++){
+                if (i > 0){
+                  mostrar = mostrar + ' - '
+                }
+                if (value[i] instanceof Date){
+                  mostrar = mostrar + new DatePipe('en-US').transform(value[i], 'dd/MM/yyyy') 
+                } else {
+                  mostrar = mostrar + value[i]
+                }
+              }
+              this.chips.push({
+                field: filtro.field,
+                value: value,
+                label: filtro.values ? filtro.values(value) : value,
+                header: filtro.header,
+                labelMostrar: mostrar
+              });
+            } else {
+              this.chips.push({
+                field: filtro.field,
+                value: value,
+                label: filtro.values ? filtro.values(value) : value,
+                header: filtro.header,
+                labelMostrar: filtro.formatDate
+                  ? new DatePipe('en-US').transform(value, 'dd/MM/yyyy')
+                  : filtro.values
+                  ? filtro.values(value)
+                  : value,
+                formatDate: filtro.formatDate,
+              });
+            }
+          }
+        }
+      } else {
+        this.chips = this.chips.filter((chip) => chip.field !== filtro.field);
+        this.filterForm.get(filtro.field).setValue(null);
+      }
+    });
+    if (this.datatable) {
+      if (this.datatable.table?.filters) {
+        this.datatable.table.filters = filters;
+        this.datatable.table._filter();
+      } else {
+        this.datatable.filters = filters;
+        this.datatable._filter();
+      }
+    } else {
+      this.metodoRegresar.emit(filters);
+    }
+
+    if (this.metodoRegresarAdicional){
+      this.metodoRegresarAdicional.emit(filters);
+    }
+  }
+}

package/src/app/core/componentes/footer/footer.component.html

@@ -0,0 +1,13 @@
+<div class="layout-footer flex align-items-center p-3 shadow-2">
+  <img id="footer-logo" [id]="'logoImg'" [src]="'assets/images/logo-union-simple.png'" alt="ultima-footer-logo" />
+  <img id="footer-logo" [id]="'logoName'" [src]=" 'assets/images/texto-union-soluciones.png'" alt="ultima-footer-logo" />
+  <button
+    pButton
+    pRipple
+    type="button"
+    icon="pi pi-facebook fs-large"
+    class="p-button-rounded p-button-text p-button-plain ml-auto mr-2"
+  ></button>
+  <button pButton pRipple  
+  type="button" icon="pi pi-twitter fs-large" class="p-button-rounded p-button-text p-button-plain mr-2"></button>
+</div>

package/src/app/core/componentes/footer/footer.component.scss

@@ -0,0 +1,3 @@
+img {
+    height: 40px;
+}

package/src/app/core/componentes/footer/footer.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  
+    standalone: true,
+    templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() {}
+
+  ngOnInit(): void {
+  }
+
+  cambiarColor(color){
+  }
+
+}

package/src/app/core/componentes/formulariodinamico/formulariodinamico.component.html

@@ -0,0 +1,267 @@
+<p-table [value]="campos">
+  <ng-template pTemplate="body" let-campo>
+    <tr *ngIf="validarVisibilidadCampos(campo)">
+      <td style="width: 20%;">
+        <label *ngIf="campo.editable != 'N'" [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [class]="campo.tipo  == 'I' ? 'font-bold color-400 mt-7' : ''">
+            {{ campo.descripcion }} 
+            <ng-container *ngIf="campo.editable != 'N' && campo.obligatorio">*</ng-container>
+        </label>
+      </td>
+      <td style="width: 80%">
+        <div class="p-fluid p-formgrid grid">
+        <div [ngClass]="campo.ayuda && campo.editable != 'N' ? 'col-11' : 'col-12'">
+        <!--campo tipo FECHA-->
+        <p-calendar
+          class="w-full"
+          appendTo="body" 
+          type="text"
+          [(ngModel)]="campo.valor"
+          [disabled]="!editable || campo.editable == 'L'"
+          dateFormat="dd/mm/yy"
+          [tabIndex]="campo.orden + 1"
+          *ngIf="campo.tipo == 'F' && campo.editable != 'N'"
+          [showIcon]="true"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+                                    
+        ></p-calendar>
+
+        <!--campo tipo HORA-->
+        <p-calendar
+          class="w-full"
+          appendTo="body" 
+          [(ngModel)]="campo.valor"
+          [disabled]="!editable || campo.editable == 'L'"
+          [tabIndex]="campo.orden + 1"
+          *ngIf="campo.tipo == 'X' && campo.editable != 'N'"
+          [showTime]="true"
+          [showSeconds]="true"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+        ></p-calendar>
+
+        <!--campo tipo HORA VALOR-->
+        <input
+          pInputText
+          type="time"
+          [disabled]="!editable || campo.editable == 'L'"
+          [(ngModel)]="campo.valor"
+          [tabIndex]="campo.orden + 1"
+          *ngIf="campo.tipo == 'Z' && campo.editable != 'N'"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+        />
+
+        <!--campo tipo TEXTO-->
+        <input
+          pInputText
+          [disabled]="!editable || campo.editable == 'L'"
+          [(ngModel)]="campo.valor"
+          [tabIndex]="campo.orden + 1"
+          *ngIf="campo.tipo == 'T' && campo.editable != 'N'"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+        />
+
+        <!--campo tipo AREA TEXTO-->
+        <textarea
+          pInputTextarea
+          [(ngModel)]="campo.valor"
+          rows="5"
+          cols="5"
+          [tabIndex]="campo.orden + 1"
+          [disabled]="!editable || campo.editable == 'L'"
+          *ngIf="campo.tipo == 'A' && campo.editable != 'N'"
+          class="w-full p-inputtextarea p-inputtext p-component p-element min-h-100 max-h-250"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+        >
+        </textarea>
+
+        <!--campo tipo NUMERO-->
+        <p-inputNumber
+          [disabled]="!editable || campo.editable == 'L'"
+          [(ngModel)]="campo.valor"
+          [tabIndex]="campo.orden + 1"
+          [maxlength]="campo.longitud"
+          *ngIf="campo.tipo == 'N' && campo.editable != 'N'"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+        >
+        </p-inputNumber>
+
+        <!--campo tipo DECIMAL-->
+        <p-inputNumber
+          [disabled]="!editable || campo.editable == 'L'"
+          [(ngModel)]="campo.valor"
+          mode="decimal"
+          [minFractionDigits]="2"
+          *ngIf="campo.tipo == 'D' && campo.editable != 'N'"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+        >
+        </p-inputNumber>
+
+        <!--campo tipo SECRET-->
+        <p-password
+          [feedback]="false"
+          [disabled]="!editable || campo.editable == 'L'"
+          [(ngModel)]="campo.valor"
+          [tabIndex]="campo.orden + 1"
+          *ngIf="campo.tipo == 'S' && campo.editable != 'N'"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+        ></p-password>
+
+        <!--campo tipo COMBO-->
+        <p-dropdown
+          class="w-full"
+          appendTo="body"
+          [options]="campo.lista"
+          [autoDisplayFirst]="false"
+          [(ngModel)]="campo.valor"
+          [disabled]="!editable || campo.editable == 'L'"
+          *ngIf="campo.tipo == 'C' && campo.editable != 'N'"
+          [showClear]="!campo.obligatorio"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+        >
+        </p-dropdown>
+
+        <!--campo tipo LOGICO-->
+        <div *ngIf="campo.tipo == 'L' && campo.editable != 'N'">
+          <div class="col-md-12">
+            <div class="p-fluid p-formgrid grid">
+              <div *ngFor="let valor of listaSiNoRadioButton" class="mt-4 col-12 md:col-2 field-checkbox">
+                <p-radioButton
+                  [inputId]="valor.key"
+                  name="valor"
+                  [value]="valor.key"
+                  [label]="valor.name"
+                  [(ngModel)]="campo.valor"
+                  [disabled]="!editable || campo.editable == 'L'"
+                  [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+                  [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+                ></p-radioButton>
+                <label>    </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--campo tipo RADIO-->
+        <div *ngIf="campo.tipo == 'R' && campo.editable != 'N'">
+          <div class="col-md-12">
+            <div class="p-fluid p-formgrid grid">
+              <div *ngFor="let valor of campo.lista" class="mt-4 col-12 md:col-2 field-checkbox">
+              <p-radioButton
+                [inputId]="valor.value"
+                name="valor"
+                [value]="valor.value"
+                [label]="valor.label"
+                [(ngModel)]="campo.valor"
+                [disabled]="!editable || campo.editable == 'L'"
+                [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+                [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+              ></p-radioButton>
+            </div>
+            </div>
+          </div>
+        </div>
+
+        <!--campo tipo CHECKBOX-->
+        <div *ngIf="campo.tipo == 'H' && campo.editable != 'N'">
+          <div class="col-md-12">
+            <div class="p-fluid p-formgrid grid">
+              <div *ngFor="let valor of campo.lista" class="col-12 md:col-3 field-checkbox">
+                    <p-checkbox
+                      [inputId]="valor.value"
+                      name="valor"
+                      [value]="valor"
+                      [(ngModel)]="campo.valor"
+                      [disabled]="!editable || campo.editable == 'L'"
+                      [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+                      [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+                    ></p-checkbox>
+                    <label [for]="valor.value">{{ valor.label }}</label>
+                </div>
+              </div>
+          </div>
+        </div>
+
+        <!--campo tipo AUTOCOMPLETAR-->
+        <p-autoComplete
+          *ngIf="
+            (campo.tipo == 'O' || campo.tipo == 'Y') && campo.editable != 'N'
+          "
+          [disabled]="!editable || campo.editable == 'L'"
+          [(ngModel)]="campo.valor"
+          [suggestions]="campo.listaAutocompleteFiltrada"
+          (completeMethod)="campo.filtrarAutocomplete($event)"
+          field="label"
+          [dropdown]="true"
+          [style.color]="campo.resaltado ? 'var(--color-500) !important' : ''"
+          [pTooltip]="campo.novedad ? campo.novedad : null" tooltipPosition="top"
+          [class.ng-dirty]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+          [class.ng-invalid]="campo.obligatorio ? (!utilsService.validarCampoObligatorio(campo.valor) && validando) : false"
+        >
+          <ng-template let-valor pTemplate="item">
+            <div>
+              <div>{{ valor.label }}</div>
+            </div>
+          </ng-template>
+        </p-autoComplete>
+
+        <!--campo tipo POPUP-->
+        <div class="field" *ngIf="campo.tipo == 'P' && campo.editable != 'N'" >
+          <ng-container   *ngFor="let item of campo.listaPopups" [hash]="item"></ng-container>
+        </div>
+        <div *ngIf="verMensajeFuncion" class="text-center w-1">
+          <label>{{ campo.mensajeFuncion }}</label>
+        </div>
+        <div *ngIf="isMensaje">
+          <label *ngIf="campo.mensaje">{{ campo.mensaje }}</label>
+        </div>
+        </div>
+
+        <div *ngIf="campo.ayuda && campo.editable != 'N'" class="col-1 contenedor"  >
+          <span
+          class="w-1rem"
+          style="color: var(--color-400)"
+          tooltipStyleClass="tw-250"
+          [hideDelay]="1800"
+          pTooltip="{{ campo.ayuda }}"
+          tooltipPosition="top"
+          *ngIf="campo.ayuda && campo.editable != 'N'"
+          ><i class="pi pi-question-circle"></i
+        ></span>
+          </div>
+        </div>
+    </td>
+    </tr>
+  </ng-template>
+</p-table>

package/src/app/core/componentes/formulariodinamico/formulariodinamico.component.scss

@@ -0,0 +1,21 @@
+.contenedor {
+    display: flex;
+    justify-content: center; /* Centrado horizontal */
+    align-items: center; /* Centrado vertical */
+  }
+
+  :host ::ng-deep .subtitulo{
+    display: table;
+    margin-top: 12px;
+    margin-bottom: 30px;
+  }
+
+  :host ::ng-deep .subtitulo label{
+    position: absolute;
+    font-weight: 600;
+    color: #232323;
+  }
+
+  :host ::ng-deep .p-datatable table{
+    background: #fafafa;
+  }