lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/tabla1/tabla1.component.html

@@ -0,0 +1,63 @@
+<p-table
+  #dt
+  [value]="data"
+  [rows]="rows"
+  [paginator]="paginator"
+  [globalFilterFields]="['name']"
+  [tableStyle]="{ 'min-width': '75rem' }"
+  [selection]="selectedItems"
+  (selectionChange)="onSelectionChange($event)"
+  [rowHover]="true"
+  dataKey="id"
+  currentPageReportTemplate="Showing {first} to {last} of {totalRecords} items"
+  [showCurrentPageReport]="showCurrentPageReport"
+  [rowsPerPageOptions]="rowsPerPageOptions"
+>
+  <ng-template #header>
+    <tr *ngIf="showDefaultHeader">
+      <th style="width: 3rem"><p-tableHeaderCheckbox /></th>
+      <th style="width: 8rem">Actions</th>
+      <th *ngFor="let field of displayFields" style="min-width: 12rem">
+        {{ field.label }}
+      </th>
+    </tr>
+  </ng-template>
+
+  <ng-template #body let-item>
+    <tr *ngIf="showDefaultBody">
+      <td style="width: 3rem"><p-tableCheckbox [value]="item" /></td>
+      <td style="width: 8rem">
+        <div class="flex gap-2 items-center">
+          <lib-button-actions-row1 [item]="item" (edit)="onEditItem($event)">
+          </lib-button-actions-row1>
+        </div>
+      </td>
+      <td *ngFor="let field of displayFields">
+        <ng-container [ngSwitch]="field.type">
+          <img
+            *ngSwitchCase="'img'"
+            [src]="getImageUrl(field, getValue(item, field))"
+            [alt]="getImageAltText(field, item)"
+            style="width: 64px"
+            class="rounded"
+          />
+
+          <span *ngSwitchCase="'checkbox'" class="flex items-center gap-2">
+            <i
+              [class]="
+                getValue(item, field)
+                  ? 'pi pi-check-circle text-green-500'
+                  : 'pi pi-times-circle text-red-500'
+              "
+            ></i>
+            <span>{{ getValue(item, field) ? 'Yes' : 'No' }}</span>
+          </span>
+
+          <span *ngSwitchDefault>
+            {{ formatDynamicFieldValue(field, getValue(item, field)) }}
+          </span>
+        </ng-container>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/tabla1/tabla1.component.ts

@@ -0,0 +1,128 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableModule } from 'primeng/table';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { FormsModule } from '@angular/forms';
+import { DynamicField } from '../../interfaces/dynamic-field.interface';
+import { FieldType } from '@juliaosistem/core-dtos';
+import { DynamicFieldService } from '../../services/dynamic-field.service';
+import { ButtonActionsRow1Component } from '../../atoms/button-actions-row1/button-actions-row1.component';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-tabla1',
+  standalone: true,
+  templateUrl: './tabla1.component.html',
+  styleUrl: './tabla1.component.scss',
+  imports: [CommonModule, TableModule, PrimegModule, FormsModule, ButtonActionsRow1Component],
+})
+export class Tabla1Component implements OnInit {
+  @Input() data: Record<string, unknown>[] = [];
+  @Input() selectedItems!: Record<string, unknown>[] | null;
+  @Output() selectedItemsChange = new EventEmitter<Record<string, unknown>[] | null>();
+  @Input() fieldTypeConfig: Record<string, FieldType> = {}; // Tipos por campo
+  @Input() fieldLabels: Record<string, string> = {};        // Etiquetas personalizadas
+  @Input() fieldOrder: string[] = [];                       // Orden de columnas
+  @Input() excludeFields: string[] = ['id'];                // Campos a excluir
+@Input() fieldSelectOptions: Record<string, { label: string; value: string | number | boolean }[]> = {};
+  @Input() displayFields: DynamicField[] = [];              // Campos para mostrar
+
+  @Input() showDefaultHeader: boolean = true;               // Mostrar encabezado por defecto
+  @Input() showDefaultBody: boolean = true;                 // Mostrar cuerpo por defecto
+
+  // Propiedades del paginador
+  @Input() rows: number = 10;                               // Filas por página
+  @Input() paginator: boolean = true;                       // Habilitar paginador
+  @Input() rowsPerPageOptions: number[] = [10, 20, 30];     // Opciones de filas por página
+  @Input() showCurrentPageReport: boolean = true;           // Mostrar reporte de página
+
+  @Output() editItem = new EventEmitter<Record<string, unknown>>();
+  
+  fields: DynamicField[] = []; // Campos dinámicos generados
+
+  componente: ComponentesDTO = {
+    id: 17,
+    nombreComponente: 'lib-tabla1',
+    version: '1.0'
+  };
+  
+  constructor(
+    private dynamicFieldService: DynamicFieldService
+  ) {}
+
+  ngOnInit() {
+    this.initFields();
+  }
+
+  initFields() {
+    // Inicializar campos dinámicos si no se han generado y no se pasan desde el padre
+    if (this.fields.length === 0 && this.displayFields.length === 0) {
+      this.fields = this.dynamicFieldService.generateFieldsFromData({
+        data: this.data,
+        fieldTypeConfig: this.fieldTypeConfig,
+        fieldLabels: this.fieldLabels,
+        fieldOrder: this.fieldOrder,
+        excludeFields: this.excludeFields
+      });
+      this.displayFields = [...this.fields];
+    }
+  }
+
+  // ✅ Métodos de renderizado - delegan al servicio
+  formatDynamicFieldValue(field: DynamicField, value: unknown): string {
+    return this.dynamicFieldService.formatDynamicFieldValue(field, value);
+  }
+
+  getImageUrl(field: DynamicField, value: unknown): string {
+    return this.dynamicFieldService.getImageUrl(field, value);
+  }
+
+  getImageAltText(field: DynamicField, item: Record<string, unknown>): string {
+    return this.dynamicFieldService.getImageAltText(field, item);
+  }
+
+  // ✅ Eventos que se emiten al componente padre
+  onEditItem(item: Record<string, unknown>) {
+    this.editItem.emit(item);
+  }
+
+  // ✅ Método para capturar cambios de selección de PrimeNG
+  onSelectionChange(newSelection: Record<string, unknown>[] | null) {
+    this.selectedItems = newSelection;
+    this.selectedItemsChange.emit(newSelection);
+  }
+
+  // ✅ Obtener valores anidados como "cliente.direccion.ciudad" o "precios[0].monto"
+// ✅ Devuelve valor de campo, soportando anidados tipo "precios[0].precio"
+getValue(item: Record<string, any>, field: DynamicField) {
+  if (!field || !field.key) return undefined;
+
+  // Primero intenta acceso directo
+  if (item[field.key] !== undefined) return item[field.key];
+
+  // Si no existe, usa getNestedValue
+  return this.getNestedValue(item, field.key);
+}
+
+// Obtener valor anidado
+getNestedValue(item: Record<string, any>, path: string): any {
+  if (!path) return undefined;
+  return path
+    .replace(/\[(\d+)]/g, '.$1') // "precios[0]" → "precios.0"
+    .split('.')
+    .reduce((acc, part) => acc?.[part], item);
+}
+
+getFieldValue(item: Record<string, any>, key: string) {
+  if (!key) return undefined;
+
+  // Primero intento acceso directo
+  if (item[key] !== undefined) return item[key];
+
+  // Si no existe, uso path anidado
+  return key
+    .replace(/\[(\d+)]/g, '.$1') // "precios[0]" → "precios.0"
+    .split('.')
+    .reduce((acc, part) => acc?.[part], item);
+}
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/tool-bar1/tool-bar1.component.html

@@ -0,0 +1,29 @@
+<p-toolbar styleClass="mb-6">
+  <ng-template #start>
+    <div class="flex items-center gap-2">
+      <lib-button-options-table 
+      [isAdd]="showDropdownAddButton"
+        (onAdd)="onNewItem()"
+        [isDelete]="showDropdownDeleteButton"
+        (onDelete)="onDeleteSelected()"
+        (onExportExcel)="onExportToExcel()">
+      </lib-button-options-table>
+      <lib-button-add1 
+        *ngIf="showAddButton"
+        (add)="onNewItem()">
+      </lib-button-add1>
+      <lib-button-delete1 
+        *ngIf="shouldShowDeleteButton"
+        (delete)="onDeleteSelected()">
+      </lib-button-delete1>
+    </div>
+  </ng-template>
+
+  <ng-template #end>
+    <lib-view-buttons-container1 
+      [currentView]="currentView" 
+      (viewChange)="onViewChange($event)" />
+  </ng-template>
+</p-toolbar>
+
+

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/tool-bar1/tool-bar1.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonOptionsTableComponent } from '../../atoms/button-options-table/button-options-table.component';
+import { ButtonAdd1Component } from '../../atoms/button-add1/button-add1.component';
+import { ButtonDelete1Component } from '../../atoms/button-delete1/button-delete1.component';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { ViewButtonsContainer1Component } from '../view-buttons-container1/view-buttons-container1.component';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-tool-bar1',
+  imports: [
+    CommonModule,
+    ButtonOptionsTableComponent,
+    ButtonAdd1Component,
+    ButtonDelete1Component,
+    PrimegModule,
+    ViewButtonsContainer1Component
+  ],
+  templateUrl: './tool-bar1.component.html',
+  styleUrl: './tool-bar1.component.scss',
+  standalone: true
+  
+})
+export class ToolBar1Component {
+  @Input() currentView: 'table' | 'grid' = 'table';
+  @Input() showAddButton: boolean = true;
+  @Input() selectedItems: Record<string, unknown>[] = [];
+  @Input() showDropdownAddButton: boolean = true;
+  @Input() showDropdownDeleteButton: boolean = false;
+
+  @Output() viewChange = new EventEmitter<'table' | 'grid'>();
+  @Output() newItem = new EventEmitter<void>();
+  @Output() deleteSelected = new EventEmitter<void>();
+  @Output() exportToExcel = new EventEmitter<void>();
+
+  componente: ComponentesDTO = {
+    id: 16,
+    nombreComponente: 'lib-tool-bar1',
+    version: '1.0'
+  };
+
+  // ✅ Getter para determinar si mostrar el botón delete
+  get shouldShowDeleteButton(): boolean {
+    return this.selectedItems.length > 0;
+  }
+
+  onViewChange(newView: 'table' | 'grid'): void {
+    this.viewChange.emit(newView);
+  }
+  
+  onNewItem(): void {
+    this.newItem.emit();
+  }
+
+  onDeleteSelected(): void {
+    this.deleteSelected.emit();
+  }
+
+  onExportToExcel(): void {
+    this.exportToExcel.emit();
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/view-buttons-container1/view-buttons-container1.component.html

@@ -0,0 +1,16 @@
+<p-selectbutton
+  [(ngModel)]="value"
+  [options]="stateOptions"
+  optionLabel="label"
+  optionValue="value"
+  [allowEmpty]="false"
+>
+  <ng-template pTemplate="item" let-item>
+    <span *ngIf="item.value === 'table'">
+      <lib-button-table-view1></lib-button-table-view1>
+    </span>
+    <span *ngIf="item.value === 'grid'">
+      <lib-button-card-view1></lib-button-card-view1>
+    </span>
+  </ng-template>
+</p-selectbutton>

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/view-buttons-container1/view-buttons-container1.component.ts

@@ -0,0 +1,52 @@
+import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { CommonModule } from '@angular/common';
+
+import { ButtonTableView1Component } from '../../atoms/button-table-view1/button-table-view1.component';
+import { ButtonCardView1Component } from '../../atoms/button-card-view1/button-card-view1.component';
+import { FormsModule } from '@angular/forms';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-view-buttons-container1',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SelectButtonModule,
+    ButtonTableView1Component,
+    ButtonCardView1Component,
+    FormsModule,
+  ],
+  templateUrl: './view-buttons-container1.component.html',
+  styleUrl: './view-buttons-container1.component.scss',
+})
+export class ViewButtonsContainer1Component {
+  // Input para recibir el valor actual desde el componente padre
+  @Input() currentView: 'table' | 'grid' = 'table';
+  
+  // Output para emitir cuando cambia la vista
+  @Output() viewChange = new EventEmitter<'table' | 'grid'>();
+
+  componente: ComponentesDTO = {
+    id: 20,
+    nombreComponente: 'lib-view-buttons-container1',
+    version: '1.0'
+  };
+
+  stateOptions = [
+    { label: 'Table View', value: 'table' },
+    { label: 'Card View', value: 'grid' },
+  ];
+
+  // Getter/Setter para sincronizar con currentView
+  get value(): string {
+    return this.currentView;
+  }
+
+  set value(newValue: string) {
+    if (newValue === 'table' || newValue === 'grid') {
+      this.currentView = newValue;
+      this.viewChange.emit(newValue);
+    }
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/pages/crud/crud.component.html

@@ -0,0 +1,53 @@
+<!-- En crud.component.html -->
+<div class="card">
+    <!-- Toolbar para cambiar vista -->
+    <lib-tool-bar1 
+        (viewChange)="onViewChange($event)"
+        [currentView]="tableType"
+        [selectedItems]="selectedItems"
+        (newItem)="openNew()"
+        (deleteSelected)="deleteSelectedItems()"
+        (exportToExcel)="exportToExcel()">
+    </lib-tool-bar1>
+
+    <!-- Vista de tabla con sistema dinámico -->
+    <lib-tabla1 
+        *ngIf="tableType === 'table'"
+        [data]="data"
+        [selectedItems]="selectedItems"
+        (selectedItemsChange)="onSelectedItemsChange($event)"
+        [fieldTypeConfig]="fieldTypeConfig"
+        [fieldLabels]="fieldLabels"
+        [fieldOrder]="fieldOrder"
+        [excludeFields]="excludeFields"
+        [fieldSelectOptions]="fieldSelectOptions"
+        [displayFields]="displayFields"
+        [rows]="rows"
+        [paginator]="paginator"
+        [rowsPerPageOptions]="rowsPerPageOptions"
+        [showCurrentPageReport]="showCurrentPageReport"
+        (editItem)="editItem($event)">
+    </lib-tabla1>
+
+    <!-- Vista de grid -->
+    <lib-grid1 
+        *ngIf="tableType === 'grid'"
+        [data]="data"
+        [selectedItems]="selectedItems"
+        (selectedItemsChange)="onSelectedItemsChange($event)"
+        [fieldTypeConfig]="fieldTypeConfig"
+        [fieldLabels]="fieldLabels"
+        [fieldOrder]="fieldOrder"
+        [excludeFields]="excludeFields"
+        [fieldSelectOptions]="fieldSelectOptions"
+        [displayFields]="displayFields"
+        [rows]="rows"
+        [paginator]="paginator"
+        [rowsPerPageOptions]="rowsPerPageOptions"
+        [showCurrentPageReport]="showCurrentPageReport"
+        (editItem)="editItem($event)">
+    </lib-grid1>
+
+    <!-- Diálogo de confirmación -->
+    <p-confirmDialog></p-confirmDialog>
+</div>

package/projects/lib-common-angular/src/lib/componentes/shared/pages/crud/crud.component.ts

@@ -0,0 +1,256 @@
+// En crud.ts - Agregar las propiedades para el sistema dinámico
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { TableModule } from 'primeng/table';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { Tabla1Component } from '../../molecules/tabla1/tabla1.component';
+import { Grid1Component } from '../../molecules/grid1/grid1.component';
+import { ToolBar1Component } from '../../molecules/tool-bar1/tool-bar1.component';
+
+// ✅ Importar los tipos del sistema dinámico
+import { FieldType, DynamicField } from '@juliaosistem/core-dtos';
+import { DynamicFieldService } from '../../services/dynamic-field.service';
+import { ExcelExportService } from '../../services/excel-export.service';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+    selector: 'lib-crud',
+    standalone: true,
+    imports: [
+        CommonModule,
+        TableModule,
+        FormsModule,
+        PrimegModule,
+        ToolBar1Component,
+        Tabla1Component,
+        Grid1Component
+    ],
+    templateUrl: './crud.component.html',
+    providers: [MessageService, ConfirmationService]
+})
+export class Crud implements OnInit {
+    @Input() showDialog: boolean = false;
+    @Input() submitted: boolean = false;
+    @Input() loaded: boolean = false;
+    @Input() tableType: 'table' | 'grid' = 'table';
+    @Input() data: Record<string, unknown>[] = [];
+    @Input() fieldTypeConfig: Record<string, FieldType> = {}; // Configuración de tipos de campo
+    @Input() fieldLabels: Record<string, string> = {};        // Etiquetas personal
+    @Input() fieldOrder: string[] = [];                       // Orden de columnas
+    @Input() excludeFields: string[] = ['id'];                // Campos a excluir
+@Input() fieldSelectOptions: Record<string, { label: string; value: string | number | boolean }[]> = {};
+
+    // Propiedades del paginador
+    @Input() rows: number = 10;                               // Filas por página
+    @Input() paginator: boolean = true;                       // Habilitar paginador
+    @Input() rowsPerPageOptions: number[] = [10, 20, 30];     // Opciones de filas por página
+    @Input() showCurrentPageReport: boolean = true;           // Mostrar reporte de página
+
+    // ✅ EVENTOS PARA COMUNICACIÓN CON EL PADRE
+    @Output() dataChange = new EventEmitter<Record<string, unknown>[]>();
+    @Output() editItemRequest = new EventEmitter<Record<string, unknown>>();
+    @Output() newItemRequest = new EventEmitter<void>();
+    @Output() itemSaved = new EventEmitter<Record<string, unknown>>();
+    @Output() dialogCanceled = new EventEmitter<void>();
+    @Input() displayFields: DynamicField[] = [];            
+@Output() deleteItemRequest = new EventEmitter<Record<string, unknown>>();
+
+    // ✅ Propiedades para el manejo del CRUD
+    currentItem: Record<string, unknown> = {};
+    selectedItems: Record<string, unknown>[] = [];
+    fields: DynamicField[] = [];
+
+    componente: ComponentesDTO = {
+        id: 21,
+        nombreComponente: 'lib-crud',
+        version: '1.0'
+    };
+
+    constructor(
+        private messageService: MessageService,
+        private confirmationService: ConfirmationService,
+        private dynamicFieldService: DynamicFieldService,
+        private excelExportService: ExcelExportService
+    ) {}
+
+    ngOnInit() {
+        this.initFields();
+    }
+initFields() {
+    // Inicializar campos dinámicos si no se han generado
+    if (this.fields.length === 0) {
+        this.fields = this.dynamicFieldService.generateFieldsFromData({
+            data: this.data,
+            fieldTypeConfig: this.fieldTypeConfig,
+            fieldLabels: this.fieldLabels,
+            fieldOrder: this.fieldOrder,
+            excludeFields: this.excludeFields
+        });
+        this.displayFields = [...this.fields];
+    }
+
+    // 🔹 Filtrar displayFields según excludeFields siempre
+    if (this.displayFields?.length) {
+        this.displayFields = this.displayFields.filter(
+            f => !this.excludeFields.includes(f.key)
+        );
+    }
+}
+
+    // ✅ Método para abrir el diálogo de edición
+    editItem(item: Record<string, unknown>) {
+        this.editItemRequest.emit(item);
+    }
+
+    // ✅ Método para crear un nuevo item
+    openNew() {
+        this.newItemRequest.emit();
+    }
+
+    // ✅ Manejar cuando se guarda un item desde el diálogo
+    onItemSaved(savedItem: Record<string, unknown>) {
+        this.currentItem = { ...savedItem };
+
+        if (this.currentItem['id']) {
+            this.updateExistingItem();
+        } else {
+            this.createNewItem();
+        }
+        this.finalizeItemSave();
+        this.itemSaved.emit(this.currentItem);
+    }
+
+    // ✅ Manejar cuando se cancela el diálogo
+    onDialogCanceled() {
+        this.currentItem = {};
+        this.dialogCanceled.emit();
+    }
+
+    // ✅ Eliminar item con confirmación
+deleteItem(item: Record<string, unknown>) {
+    const itemName = String(item['name'] || 'this item');
+    this.confirmationService.confirm({
+        message: 'Are you sure you want to delete ' + itemName + '?',
+        header: 'Confirm',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            this.executeItemsDeletion([item], 1);
+            this.deleteItemRequest.emit(item); // ✅ ahora sí llega al padre
+        },
+    });
+}
+
+    // ✅ Eliminar elementos seleccionados con confirmación
+deleteSelectedItems() {
+    if (!this.selectedItems || this.selectedItems.length === 0) {
+        this.messageService.add({
+            severity: 'warn',
+            summary: 'Warning',
+            detail: 'No items selected',
+            life: 3000,
+        });
+        return;
+    }
+
+    const selectedCount = this.selectedItems.length;
+    const itemsToDelete = [...this.selectedItems]; // Copia para emitir
+    this.confirmationService.confirm({
+        message: `Are you sure you want to delete ${selectedCount} selected item${selectedCount > 1 ? 's' : ''}?`,
+        header: 'Confirm Deletion',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            this.executeItemsDeletion(itemsToDelete, selectedCount);
+            // Emitir al componente padre
+            itemsToDelete.forEach(item => this.deleteItemRequest.emit(item));
+        },
+    });
+}
+
+
+    private executeItemsDeletion(itemsToDelete: Record<string, unknown>[], count: number) {
+        const idsToDelete = itemsToDelete.map(item => item['id']);
+        this.data = this.data.filter(item => !idsToDelete.includes(item['id']));
+        this.selectedItems = [];
+        this.dataChange.emit([...this.data]);
+        this.messageService.add({
+            severity: 'success',
+            summary: 'Successful',
+            detail: `${count} item${count > 1 ? 's' : ''} deleted`,
+            life: 3000,
+        });
+    }
+
+    // ✅ Métodos privados para actualizar y crear items
+    private updateExistingItem() {
+        if (!this.currentItem['id']) return;
+        
+        const index = this.dynamicFieldService.findIndexById(this.data, String(this.currentItem['id']));
+        if (index !== -1) {
+            this.data[index] = { ...this.currentItem };
+
+            this.messageService.add({
+                severity: 'success',
+                summary: 'Successful',
+                detail: 'Item Updated',
+                life: 3000,
+            });
+        }
+    }
+
+    private createNewItem() {
+        this.currentItem['id'] = this.dynamicFieldService.generateId();
+        this.data.push({ ...this.currentItem });
+
+        this.messageService.add({
+            severity: 'success',
+            summary: 'Successful',
+            detail: 'Item Created',
+            life: 3000,
+        });
+    }
+
+    // ✅ Método público para procesar el guardado desde el componente padre
+    public processItemSave(savedItem: Record<string, unknown>) {
+        this.currentItem = { ...savedItem };
+
+        if (this.currentItem['id']) {
+            this.updateExistingItem();
+        } else {
+            this.createNewItem();
+        }
+        this.finalizeItemSave();
+    }
+
+    // ✅ Método público para establecer el item actual desde el componente padre
+    public setCurrentItem(item: Record<string, unknown>) {
+        this.currentItem = { ...item };
+    }
+
+    private finalizeItemSave() {
+        this.data = [...this.data];
+        this.dataChange.emit([...this.data]); // ✅ Emitir cambios
+        this.currentItem = {};
+    }
+
+    onViewChange(newView: 'table' | 'grid'): void {
+        this.tableType = newView;
+    }
+
+    // ✅ Debug: Método para detectar cambios en selectedItems
+    onSelectedItemsChange(newSelection: Record<string, unknown>[] | null) {
+        this.selectedItems = newSelection || [];
+    }
+
+    // ✅ Método para exportar a Excel
+    exportToExcel(): void {
+        this.excelExportService.exportToExcel({
+            data: this.data,
+            fieldOrder: this.fieldOrder,
+            fieldLabels: this.fieldLabels,
+            excludeFields: this.excludeFields,
+        });
+    }
+}