@jvsoft/components 0.0.10 → 0.0.12

package/tabla-mantenimiento/tabla-mantenimiento.component.ts

@@ -0,0 +1,951 @@
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {Overlay, OverlayRef} from '@angular/cdk/overlay';
+import {TemplatePortal} from '@angular/cdk/portal';
+import {CommonModule} from '@angular/common';
+import {AfterContentInit, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnInit, Output, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
+import {FormBuilder, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatRippleModule} from '@angular/material/core';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import {MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
+import {MatSort, MatSortModule} from '@angular/material/sort';
+import {MatColumnDef, MatFooterRow, MatRow, MatTable, MatTableDataSource, MatTableModule} from '@angular/material/table';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';
+
+import moment from 'moment';
+import {fromEvent, Observable, of, Subscription} from 'rxjs';
+import {filter, map, take} from 'rxjs/operators';
+import shortHash from 'shorthash2';
+import {DataModel} from './classes/data-model';
+import {BotonMantenimiento, ColumnaIcons, ColumnaTabla, OpcionSeleccionada, SeccionesBotonesMantenimiento} from './interfaces';
+import {tipoValorFuncion, TipoValorFuncion} from './interfaces/global/no-export';
+import {MatRowKeyboardSelectionDirective} from './mat-row-keyboard-selection.directive';
+import {TablaMantenimientoColumnDefsComponent} from './tabla-mantenimiento-column-defs/tabla-mantenimiento-column-defs.component';
+import {TablaMantenimientoMenuComponent} from './tabla-mantenimiento-menu/tabla-mantenimiento-menu.component';
+import {buscarEnArray, capitalizarTexto, formatearFecha, getBrowserName} from './tabla-mantenimiento.functions';
+import {TablaMantenimientoService} from './tabla-mantenimiento.service';
+import {TableUtil} from './table-util';
+import {SelectionModel} from '@angular/cdk/collections';
+
+export interface MantenimientoFilaExtraData {
+    template?: TemplateRef<any>;
+    esVisible?(item?: any): boolean;
+}
+
+type TiposControlBusqueda ='query' | 'simple' | '';
+@UntilDestroy({ checkProperties: true })
+@Component({
+    selector: 'jvs-tabla-mantenimiento',
+    standalone: true,
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatCheckboxModule,
+        MatDividerModule,
+        MatIconModule,
+        MatMenuModule,
+        MatPaginatorModule,
+        MatRippleModule,
+        MatSortModule,
+        MatTableModule,
+        MatTooltipModule,
+        ReactiveFormsModule,
+        TablaMantenimientoColumnDefsComponent,
+        MatBadgeModule,
+        TablaMantenimientoMenuComponent,
+        MatRowKeyboardSelectionDirective,
+    ],
+    templateUrl: './tabla-mantenimiento.component.html',
+    styleUrls: ['./tabla-mantenimiento.component.scss'],
+    host: {
+        class: 'jvs-tabla-mantenimiento',
+    },
+    animations: [
+        trigger('detailExpand', [
+            state('collapsed', style({height: '0px', minHeight: '0'})),
+            state('expanded', style({height: '*'})),
+            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+        ]),
+        trigger('fadeInUp', [
+            transition(':enter', [
+                style({
+                    transform: 'translateY(20px)',
+                    opacity: 0
+                }),
+                animate(`400ms cubic-bezier(0.35, 0, 0.25, 1)`, style({
+                    transform: 'translateY(0)',
+                    opacity: 1
+                }))
+            ])
+        ]),
+    ],
+    providers: [
+        {provide: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: {formFieldAppearance: 'outline'}}
+    ]
+})
+export class TablaMantenimientoComponent<T> implements OnInit, AfterContentInit, OnChanges {
+    static nextId = 0;
+    @HostBinding()
+    readonly id = `jvs-tabla-mantenimiento-id-${TablaMantenimientoComponent.nextId++}`;
+
+    get templateBotonesComunes(): BotonMantenimiento[] {
+        return this.tablaMantenimientoService.templateBotonesComunes;
+    };
+    get templateColumnasTabla(): ColumnaTabla<any>[] {
+        return this.tablaMantenimientoService.templateColumnasTabla;
+    };
+
+    @Input() dataSuscription: Observable<any> | undefined ;
+    @Input({required: true}) objThis: any;
+    @Input({required: true}) nombreColeccion: any;
+    @Input() ctrlBusquedaValue = '';
+    @Input() ctrlBusquedaPlaceholder = 'Buscar...';
+    @Input() filtroCampos = true;
+    @Input() paginador = true;
+    @Input() esTabla = true;
+    @Input() readOnly: boolean | 'permitirSeleccion' = false;
+    @Input() filaExtraHeader: MantenimientoFilaExtraData | any;
+    @Input() filaFooter = false;
+    @Input() botonesCRUD = 'CUD';
+    @Output() dblclickItem = new EventEmitter();
+    @Input() objBotonesCRUD: BotonMantenimiento[] = [
+        {tipo: 'nuevo', sinCondicion: true},
+        {tipo: 'editar'},
+        {tipo: 'eliminar'},
+    ];
+    @Input() classSeleccionado = ['elemento-seleccionado', /*'!bg-primary-activo','text-primary-contrast', */ 'mat-elevation-z8', /*'dark:!bg-primary-dark-activo',*/ 'border-y-2 border-primary-contrast', 'font-bold', 'text-2xl'];
+    // @Input() classAnulado = ['line-through', 'text-red', 'italic'];
+    @Input() classAnulado = ['elemento-anulado', /*'line-through', */'text-red-900', 'bg-red-200'];
+    @Input() campoAnulado: any = null;
+    @Input() campoAnuladoMensaje: any = null;
+    @Output() opcionSelecionada = new EventEmitter();
+    @Output() opcBusqueda = new EventEmitter();
+    @Output() accionRecargar = new EventEmitter();
+
+
+    @Input() set selectionModel(val: SelectionModel<any>) {
+        this.objSeleccionado = val;
+    }
+    @Output() selectionModelChange = new EventEmitter<SelectionModel<any>>();
+
+    isRecargarUsed = false;
+    @Input() filaExtraTemplate: TemplateRef<any> | undefined;
+    @ViewChild(MatPaginator) paginator!: MatPaginator;
+    @ViewChild(MatSort) sort!: MatSort;
+    @Input() exportarExcel = true;
+    // MIO
+    @Input() pageSize = 25;
+    @Input() pageSizeOptions = [5, 10, 25, 50, 100, 500, 1000];
+    @Output() dataSourceChange: EventEmitter<any> = new EventEmitter();
+
+    @Output() resultados = new EventEmitter<any>();
+    dataSource = new MatTableDataSource(); // or whatever type of datasource you have
+    // this is where the magic happens:
+    @ViewChild(MatTable, {static: false}) table!: MatTable<T>;
+    @ContentChildren(MatColumnDef, {descendants: true}) columnDefs!: QueryList<MatColumnDef>;
+
+    componenteCargadoTotalmente = false;
+
+
+
+    /////////////////////
+    paginacion = {
+        pageSize: 25,
+        pageSizeOptions: <number[]>[],
+        pageCurrent: <any>null,
+        pageIndex: 0,
+        pageLength: null,
+    };
+    // All that's left is to add them to the table ourselves:
+    ignorarDerechos = false;
+    @Input() derechosActuales: any = null;
+    // listaCRUD: BotonMantenimiento[] = [];
+    @ViewChildren(MatRow, {read: ElementRef}) rows!: QueryList<ElementRef<HTMLTableRowElement>>;
+    @ViewChild(MatFooterRow, {read: ElementRef}) rowFooter!: ElementRef<HTMLTableRowElement>;
+    mouseEvent$: Subscription | undefined;
+    overlayRef: OverlayRef | undefined;
+    @ViewChild('userMenu') userMenu!: TemplateRef<any>;
+    // FILTRO BUSQUEDA
+    opcFiltroActual = {};
+
+    protected readonly capitalizarTexto = capitalizarTexto;
+
+
+    _seleccionado: any = {};
+
+    cCampoBusqueda = new FormControl('');
+    chkLista = new DataModel();
+    constructor(
+        private fb: FormBuilder,
+        public overlay: Overlay,
+        public viewContainerRef: ViewContainerRef,
+        protected tablaMantenimientoService: TablaMantenimientoService,
+        private cdRef: ChangeDetectorRef
+    ) {
+        // this._seleccionado[this.nombreColeccion] = null;
+    }
+
+    _ctrlBusqueda: TiposControlBusqueda = '';
+
+    get ctrlBusqueda() {
+        return this._ctrlBusqueda;
+    }
+
+    @Input() set ctrlBusqueda(val: TiposControlBusqueda) {
+        if (val == '') {
+            val = 'simple';
+        }
+        this._ctrlBusqueda = val;
+    }
+
+    // @Input() leyenda;
+    private _leyenda: { text: string, class?: string } | undefined = undefined;
+
+    get leyenda(): { text: string, class?: string } | undefined {
+        return this._leyenda;
+    }
+
+    @Input() set leyenda(val: { text: string, class?: string } | string) {
+        if (typeof val == 'string') {
+            this._leyenda = {text: val};
+        }
+        else {
+            this._leyenda = val;
+        }
+    }
+
+    // @Input() idTabla: string[];
+    private _idTabla: string[] = [];
+
+    get idTabla(): string[] {
+        return this._idTabla;
+    }
+
+    @Input({required: true}) set idTabla(val: string[] | string) {
+        if (Array.isArray(val)) {
+            this._idTabla = val;
+        }
+        else {
+            this._idTabla.push(val);
+        }
+    }
+
+    private _columnasTabla: ColumnaTabla<any>[] = [];
+
+    get columnasTabla(): ColumnaTabla<any>[] {
+        return this._columnasTabla ?? [];
+    }
+
+    @Input() set columnasTabla(val: ColumnaTabla<any>[]) {
+        const reemplazarConTemplate = (listaInicial: ColumnaTabla<any>[] = []) => {
+            listaInicial.forEach((btnActual, idx) => {
+                const btnEnTemplate = buscarEnArray(this.templateColumnasTabla, 'property', btnActual.property);
+                if (btnEnTemplate) {
+                    listaInicial[idx] = {
+                        ...btnEnTemplate,
+                        ...btnActual
+                    };
+                }
+                if (listaInicial[idx].type == 'text') {
+                    if (!listaInicial[idx].text) {
+                        listaInicial[idx].text = {
+                            cssStyle: {}
+                        };
+                    }
+                    else if (!listaInicial[idx].text.cssStyle) {
+                        listaInicial[idx].text.cssStyle = {};
+                    }
+                    listaInicial[idx].text.cssStyle = {...listaInicial[idx].text.cssStyle};
+                }
+                else if (listaInicial[idx].type == 'estado') {
+                    const mutar: ColumnaIcons<any> = {
+                        ...listaInicial[idx],
+                        type: 'icons',
+                        iconsDef: {
+                            soloIcono: true,
+                            iconSize: '16px',
+                            items: [
+                                // {
+                                //     icon: 'roundToggleOff', contentCss: 'text-gray-400',
+                                //     esVisible: (row) => row['iCredDepenTareaEstado'] == 0
+                                // },
+                                // {
+                                //     icon: 'roundToggleOn', contentCss: 'text-green-600',
+                                //     esVisible: (row) => row['iCredDepenTareaEstado'] == 1
+                                // },
+                            ]
+                        },
+                    };
+                    if (listaInicial[idx].estados) {
+                        listaInicial[idx].estados.forEach((estado: any) => {
+                            if (Array.isArray(mutar.iconsDef.items)) {
+                                mutar.iconsDef.items.push({
+                                    icon: estado.icon , contentCss: estado.cssClasses,
+                                    esVisible: (row) => row[listaInicial[idx].property] == estado.estado,
+                                })
+                            }
+                        });
+                    }
+                    listaInicial[idx] = mutar;
+                }
+
+                if (btnActual.type == 'custom') {
+
+                    listaInicial[idx].datosExtra = {
+                        ...listaInicial[idx].datosExtra,
+                        tabla_mantenimiento_config_visibleAlias: listaInicial[idx].visible == undefined ? true : listaInicial[idx].visible,
+                    }
+                    listaInicial[idx].visible = false
+                }
+            });
+            return listaInicial;
+        };
+        this._columnasTabla = val ? reemplazarConTemplate(val):[];
+    }
+
+    // @Input() botonesMenu: BotonMantenimiento[] = [];
+    private _botonesMenu: SeccionesBotonesMantenimiento = {
+        crud: undefined,
+        principal: [],
+        izquierda: [],
+        derecha: [],
+        secundario: [],
+        inferior: [],
+    };
+
+    get botonesMenu(): SeccionesBotonesMantenimiento {
+        return this._botonesMenu;
+    }
+
+    get botonesMenuFinal(): SeccionesBotonesMantenimiento {
+        const nuevoBotonesMenu: SeccionesBotonesMantenimiento = this.botonesMenu;
+
+        // Iteramos sobre cada sección de botones
+        Object.keys(nuevoBotonesMenu).forEach(seccion => {
+            nuevoBotonesMenu[seccion] = nuevoBotonesMenu[seccion]?.filter((boton: BotonMantenimiento) => {
+                if (this.readOnly) {
+                    if (boton.subItems) {
+                        boton.subItems = boton.subItems.filter((subItem: BotonMantenimiento) => subItem.ignorarReadOnly === true);
+                        return boton.subItems.length < 1;
+                    }
+                    return boton.ignorarReadOnly === true;
+                }
+                return true;
+            }); // Filtramos los botones nulos
+        });
+
+        return nuevoBotonesMenu;
+    }
+
+    @Input() set botonesMenu(val: SeccionesBotonesMantenimiento) {
+        const reemplazarConTemplate: any = (listaInicial: BotonMantenimiento[] = []) =>
+            listaInicial.map((btnActual: BotonMantenimiento) => {
+                const btnEnTemplate = buscarEnArray(this.templateBotonesComunes, 'tipo', btnActual.tipoTemplate ?? btnActual.tipo);
+                if (btnEnTemplate) {
+                    if (btnActual.tipoTemplate && !btnActual.label) {
+                        btnEnTemplate.label = undefined;
+                    }
+                    if (btnActual.subItems) {
+                        return { ...btnEnTemplate, ...btnActual, seccion: this.nombreColeccion, subItems: reemplazarConTemplate(btnActual.subItems) };
+                    }
+                    return { ...btnEnTemplate, ...btnActual, seccion: this.nombreColeccion };
+                }
+                return btnActual;
+            });
+
+        if (val?.crud) {
+            this.objBotonesCRUD = this.templateBotonesComunes
+            .filter(obj => ['nuevo', 'editar', 'eliminar'].includes(obj.tipo))
+            .map(obj => val.crud?.find(o => o.tipo === obj.tipo) ?? obj);
+
+        }
+
+
+        Object.keys(val).forEach(btnKey => {
+            if (val[btnKey]) {
+                val[btnKey] = reemplazarConTemplate(val[btnKey]);
+            }
+        });
+
+        this._botonesMenu = {...this._botonesMenu, ...val};
+    }
+
+    get listaMenuCompleto(): BotonMantenimiento[] {
+        let menuTotal: BotonMantenimiento[] = [];
+        menuTotal = menuTotal.concat(this.botonesMenu.izquierda ?? []);
+        menuTotal = menuTotal.concat(this.botonesMenu.crud ?? []);
+        menuTotal = menuTotal.concat(this.botonesMenu.principal ?? []);
+        menuTotal = menuTotal.concat(this.botonesMenu.derecha ?? []);
+        menuTotal = menuTotal.concat(this.botonesMenu.secundario ?? []);
+        menuTotal = menuTotal.concat(this.botonesMenu.inferior ?? []);
+        return menuTotal;
+    }
+
+    get objVisibleColumns() {
+        return this.columnasTabla.filter(column => {
+            if (column.noMostrar != undefined) {
+                column.noMostrarEnLista = column.noMostrar;
+            }
+            return !tipoValorFuncion(column.noMostrarEnLista, false)
+        }).filter(column => {
+            // SECCION MODIFICADOR
+            if (this.filaExtraTemplate) {
+                column.sort = false;
+            }
+            // Fin SECCION MODIFICADOR
+
+            column.visible = tipoValorFuncion(column.visible, true);
+            if (!column.visible && column.esVisible != undefined) {
+                column.visible = column.esVisible();
+            }
+            return column.visible;
+        });
+    }
+
+    get visibleColumns() {
+        return this.objVisibleColumns.map(column => column.property);
+    }
+
+    get tieneCheckbox() {
+        return this.columnasTabla && this.columnasTabla.length > 0 && this.columnasTabla.find(col => col.type === 'checkbox') || false;
+    }
+
+    get buscarItemSeleccionado(): any {
+        const dRet = this.dataSource.data.find(itm => this._seleccionado === this.propiedadSeleccion(itm));
+        return dRet ?? null;
+    }
+
+    get objSeleccionado() {
+        return this.buscarItemSeleccionado; // ?? this.objThis?.['seleccionados']?.[this.nombreColeccion];
+    }
+    set objSeleccionado(val: any) {
+
+        // if (val) {
+            this.seleccionarItem(val, true);
+        // }
+    /*    if (!this.objThis) {
+            this.objThis = {};
+        }
+        if (!this.objThis['seleccionados']) {
+            this.objThis['seleccionados'] = {};
+        }
+        this.objThis['seleccionados'][this.nombreColeccion] = val;*/
+    }
+    get idsSeleccionado(): string {
+        return <string>this.chkLista.generarLista();
+    }
+
+    idTablaValor(data: any): string {
+        if (data) {
+            if (this.idTabla.length < 1) {
+                return shortHash(JSON.stringify({data, claseFinal: undefined}))
+            }
+            return this.idTabla.map(d => data[d]).join('-');
+        }
+        return '';
+    }
+
+    @Input() condicionesClaseFila = (item: any): any[] => [];
+    @Input() rowTooltip = (item: any): string => '';
+    @Input() soloIconos? :TipoValorFuncion<boolean> = false;
+
+    ngOnInit(): void {
+        // this.sharedService.dataRutaActual$.pipe(untilDestroyed(this)).subscribe(datRouteData => {
+        //     if (datRouteData) {
+        //         this.derechosActuales = datRouteData['derechos'];
+        //         if (!this.ignorarDerechos) {
+        //             this.ignorarDerechos = datRouteData['ignorarDerechos'] ?? false;
+        //         }
+        //     }
+        // });
+        this.paginacion.pageSize = this.pageSize;
+        this.paginacion.pageSizeOptions = this.pageSizeOptions;
+        this.actualizarCrud();
+
+        this.agregarBotonesExportacion();
+        if (this.dataSuscription) {
+            this.dataSuscription.subscribe(res => {
+                if (res) {
+                    if (this.objSeleccionado) {
+                        console.log('SELECCIONADO');
+                        if (this.idTabla && this.idTabla.length > 0) {
+                            console.log('ID TABLA');
+                            const arrayData = this.idTabla.map(d => this.objSeleccionado[d]);
+                            console.log(arrayData);
+                            const busqueda = buscarEnArray(res, this.idTabla, arrayData);
+                            console.log(busqueda);
+
+                            if (busqueda) {
+                                console.log(busqueda);
+                                this.objSeleccionado = busqueda;
+                            }
+                        }
+                        else {
+
+                            console.log('eLSE ID TABLA');
+                            const dataStr = res.find((itm: any) => shortHash(JSON.stringify({
+                                ...itm, claseFinal: undefined
+                            })) == shortHash(JSON.stringify({...this.objSeleccionado, claseFinal: undefined})));
+                            if (dataStr) {
+                                this.objSeleccionado = dataStr;
+                            }
+                        }
+                    }
+                    this.setData(res);
+                }
+            });
+        }
+        this.isRecargarUsed = this.accionRecargar.observed;
+    }
+
+    ngAfterContentInit() {
+        this.componenteCargadoTotalmente = true;
+        this.cdRef.detectChanges();
+        this.columnDefs.forEach(columnDef => {
+            this.table.addColumnDef(columnDef);
+            const col = this.columnasTabla.find(col => col.property == columnDef.name);
+            if (col && col.type == 'custom') {
+                col.visible = col.datosExtra?.tabla_mantenimiento_config_visibleAlias ?? col.visible;
+                delete col.datosExtra?.tabla_mantenimiento_config_visibleAlias;
+                if (Object.keys(col.datosExtra).length < 1) {
+                    delete col.datosExtra;
+                }
+            }
+        });
+        // console.log(a);
+        if (this.ctrlBusquedaValue) {
+            this.cCampoBusqueda.setValue(this.ctrlBusquedaValue);
+        }
+        this.table.renderRows();  // 🔹 Refrescar la tabla
+
+
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['botonesCRUD'] || changes['ctrlBusqueda']) {
+            this.actualizarCrud();
+        }
+        if (changes['botonesMenu']) {
+            this.agregarBotonesExportacion();
+        }
+    }
+
+    trackByFn = (index: number, item: any): string => {
+        return this.propiedadSeleccion(item);
+    };
+
+
+    agregarBotonesExportacion() {
+        const fnAddBoton = (condicion: boolean, tipoBoton: string) => {
+            if (condicion) {
+                const objBoton = buscarEnArray(this.templateBotonesComunes, 'tipo', tipoBoton);
+                const objBotonEnInferior = buscarEnArray((this.botonesMenu?.inferior ?? []), 'tipo', tipoBoton);
+
+                if (!objBotonEnInferior && objBoton) {
+                    if (!this.botonesMenu.inferior) {
+                        this.botonesMenu.inferior = [];
+                    }
+                    this.botonesMenu?.inferior?.push({
+                        ...objBoton,
+                        esIndependiente: true,
+                    });
+                }
+            }
+        }
+        fnAddBoton((this.exportarExcel && this.esTabla), 'exportar_excel');
+    }
+
+    actualizarCrud() {
+        const operacionesCRUD: Record<'C' | 'U' | 'D', string> = {
+            'C': 'nuevo',
+            'U': 'editar',
+            'D': 'eliminar'
+        };
+
+        const agregarBoton = (tipo: string) => {
+            let botonComun = buscarEnArray(this.templateBotonesComunes, 'tipo', tipo);
+            if (botonComun) {
+                const personalizado = buscarEnArray(this.objBotonesCRUD, 'tipo', tipo);
+                const boton = personalizado ? {...botonComun, ...personalizado}:botonComun;
+                if (this.botonesMenu.crud) {
+                    this.botonesMenu.crud.push(boton);
+                }
+            }
+        };
+
+        const lstCRUD = (this.botonesMenu.crud ?? []).map(i => i.tipo);
+
+        if (lstCRUD.length > 0) {
+            for (const operacion of (this.botonesCRUD || "").toUpperCase()) {
+                const operacionKey = operacion as 'C' | 'U' | 'D';
+                if (lstCRUD.includes(operacion) && operacionesCRUD[operacionKey]) {
+                    agregarBoton(operacionesCRUD[operacionKey]);
+                }
+            }
+        }
+        else {
+            this.botonesMenu.crud = [];
+            for (const operacion of (this.botonesCRUD || "").toUpperCase()) {
+                const operacionKey = operacion as 'C' | 'U' | 'D';
+                if (operacionesCRUD[operacionKey]) {
+                    agregarBoton(operacionesCRUD[operacionKey]);
+                }
+            }
+        }
+
+        if (this.ctrlBusqueda === 'simple') {
+            this.cCampoBusqueda.valueChanges.pipe(
+                untilDestroyed(this),
+            ).subscribe(value => this.onFilterChange(value ?? ''));
+        }
+
+        if (this.botonesCRUD === '-') {
+            this.botonesMenu.crud = [];
+        }
+    }
+    classFila(item: any) {
+        let claseFinal: any[] = [];
+        if (this.campoAnulado && (item[this.campoAnulado] == 1)) {
+            claseFinal = claseFinal.concat(this.classAnulado);
+        }
+        if (this.objSeleccionado == item || this.esSeleccionActual(item)) {
+            claseFinal = claseFinal.concat(this.classSeleccionado);
+        }
+        claseFinal = claseFinal.concat(this.condicionesClaseFila(item));
+        item.claseFinal = claseFinal;
+        return claseFinal;
+    }
+
+    procesarRowTooltip(item: any) {
+        let txtTooptip = [];
+        if (this.campoAnuladoMensaje && (item[this.campoAnulado] == 1)) {
+            txtTooptip.push(item[this.campoAnuladoMensaje]);
+            // return item[this.campoAnuladoMensaje];
+        }
+        if (this.rowTooltip) {
+            txtTooptip.push(this.rowTooltip(item));
+        }
+        return txtTooptip.filter(itm => !!itm).join(' | ');
+    }
+
+    subItemsActivos(btn: any, item: any) {
+        return btn.subItems.filter((sub: any) => !sub.esVisible || sub.esVisible(item)).length > 0;
+    }
+
+    get noData() {
+        if (!this.esTabla){
+            return of(true);
+        }
+        if (!this.dataSource || !this.table) {
+            return of(true);
+        }
+        // @ts-ignore
+        return this.table.dataSource?.connect().pipe(map(data => data?.length === 0));
+    }
+
+    onFilterChange(value: string) {
+        if (!this.dataSource) {
+            return;
+        }
+        value = value.trim();
+        value = value.toLowerCase();
+        this.dataSource.filter = value;
+    }
+
+    toggleColumnVisibility(column: any, event: any) {
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        column.visible = !column.visible;
+    }
+
+    cargarData(retorno = false) {
+
+        if (this.ctrlBusqueda && this.ctrlBusqueda == 'simple') {
+            if (!retorno) {
+                this.dataSource.paginator = this.paginator;
+                this.dataSource.sort = this.sort;
+            }
+
+            const aS: any = this.dataSource?.data;
+
+            if (
+                (!aS || !aS[0] || !aS[0]['iTotalRegistros'])
+            ) {
+                return false;
+            }
+        }
+        const dPag: any = {
+            iPaginacion: 1,
+            iPageSize: this.paginator?.pageSize ? this.paginator?.pageSize:this.paginacion.pageCurrent?.pageSize,
+            iPageNumber: (this.paginator?.pageIndex ? this.paginator?.pageIndex:0) + 1,
+        };
+        if (this.ctrlBusqueda && this.ctrlBusqueda == 'query') {
+            dPag['cCampoBusqueda'] = this.cCampoBusqueda.value;
+        }
+        if (retorno) {
+            return dPag;
+        }
+        this.resultados.emit(dPag);
+        this.opcBusqueda.emit(dPag);
+    }
+
+    // FIN FILTRO BUSQUEDA INTEGRAR
+
+    setData(data: any) {
+        this.dataSource = new MatTableDataSource(data);
+        this.dataSource.sortingDataAccessor = (item: any, property) => {
+            const dColumn: ColumnaTabla<any> | null = buscarEnArray(this.columnasTabla, 'property', property);
+            if (dColumn) {
+                switch (dColumn.sortType ?? dColumn.type) {
+                    case 'number':
+                        return item[property] * 1;
+                    case 'date':
+                        return formatearFecha(item[property]);
+                }
+            }
+            if (item) {
+                switch (property) {
+                    case 'fromDate':
+                        return new Date(item['fromDate']);
+                    default:
+                        return item[property];
+                }
+            }
+        };
+        // this.paginator.length = (data && data[0] && data[0]['iTotalRegistros']) ? data[0]['iTotalRegistros'] : data.length;
+        // this.dataSource.paginator = this.paginator;
+        if (this.sort) {
+            this.dataSource.sort = this.sort;
+        }
+        // this.dataSource.filter = this.filter;
+        this.dataSourceChange.emit(this.dataSource);
+        // this.dataSource.paginator.pageSize = this.paginacion.pageSize;
+        if (data && data[0] && data[0]['iPageNumber']) {
+            this.paginacion.pageIndex = (data && data[0] && data[0]['iPageNumber']) ? data[0]['iPageNumber']:0;
+        }
+        this.paginacion.pageLength = (data && data[0] && data[0]['iTotalRegistros']) ? data[0]['iTotalRegistros']:data.length;
+        if (data && data[0] && !data[0]['iTotalRegistros']) {
+            this.dataSource.paginator = this.paginator;
+        }
+
+        if (this.tieneCheckbox) {
+            this.chkLista.agregarControles(data, this.tieneCheckbox.property, !this.tieneCheckbox.chkFieldPersistente, (this.tieneCheckbox.chkField ?? null), this.tieneCheckbox.chkFieldSeparador);
+        }
+    }
+
+    botonDisabled(btn: BotonMantenimiento, item: any) {
+        let disabled;
+        if (!btn.sinCondicion) {
+            if (btn.estaDeshabilitado) {
+                disabled = btn.estaDeshabilitado(item, this);
+            }
+            else {
+                disabled = !this.objSeleccionado;
+            }
+        }
+        if (!disabled && !btn.esIndependiente && !btn.ignorarDerecho && this.derechosActuales) {
+            // if (!this.usuarioService.esEquipoJVSoft()) {
+                disabled = !(this.derechosActuales[btn.cDerechoCodigo ?? btn.tipo]);
+            // }
+        }
+        return disabled;
+    }
+
+    propiedadSeleccion(item: any): string {
+        return `${this.nombreColeccion}_${this.idTablaValor(item)}`;
+    }
+
+    esSeleccionActual(item: any): boolean {
+        return this._seleccionado === this.propiedadSeleccion(item);
+    }
+
+    seleccionarItem(item?: any, forzado: boolean = false): void {
+        const idItem = this.propiedadSeleccion(item);
+        if (forzado) {
+            this._seleccionado = idItem;
+        }
+        else {
+            this._seleccionado = this._seleccionado === idItem ? null:idItem;
+        }
+        this.selectionModelChange.emit(this.objSeleccionado);
+
+        /*if (!this.objThis) {
+            this.objThis = {};
+        }
+        if (!this.objThis['seleccionados']) {
+            this.objThis['seleccionados'] = {};
+        }
+        this.objThis['seleccionados'][this.nombreColeccion] = this._seleccionado;*/
+    }
+
+    opcMenu(item: any, objMenu: OpcionSeleccionada, modal = null, retorno = false) {
+
+        // console.log(this.buscarItemSeleccionado);
+        // console.log(objMenu);
+        // let salir = this.readOnly;
+        // if (salir && this.readOnly === 'permitirSeleccion' && ['ver', 'seleccionar'].includes(objMenu.tipo)) {
+        //     salir = false;
+        // }
+        // if (salir) {
+        //     return false;
+        // }
+
+        // console.warn(objMenu);
+        if (objMenu.tipo == 'exportar_excel' && this.exportarExcel) {
+            /*
+            TableUtil.exportArrayToExcel(this.dataSource.data.map(x => {
+                const columnasNumeros = this.objVisibleColumns.filter(column => ['money', 'number'].includes(column.type));
+                columnasNumeros.forEach(columna => {
+                    x[columna.property] *= 1;
+                });
+                return x;
+            }), 'TEST');
+            */
+            const dataGeneradoPorHtml = TableUtil.getWorkBook('tabla_' + this.nombreColeccion, []);
+            const objetosExtraidos = this.dataSource.filteredData.map((objeto: any, idx) =>
+                this.objVisibleColumns.reduce((acumulador, columna) => {
+                    // console.log(propiedad);
+                    const nColumn = (columna.labelLista ?? columna.label).toUpperCase().replace('<BR>', ' ');
+                    switch (columna.type) {
+                        case 'date':
+                            // acumulador[nColumn] = (new DatePipe('es-PE')).transform(objeto[columna.property], 'dd/MM/yyyy' /*'yyyy-MM-dd'*/);
+                            // new Date(dateString.replace(/(\d{2}:\d{2}:\d{2}):\w{2}/, '$1'));
+                            // acumulador[nColumn] = new Date(objeto[columna.property].replace(/(\d{2}:\d{2}:\d{2}):\w{2}/, '$1'));
+                            // acumulador[nColumn] = formatearFechaFormato(objeto[columna.property], 'dd/MM/yyyy');
+                            // acumulador[nColumn] = formatearFechaTimezone(objeto[columna.property]);
+                            // acumulador[nColumn] = new Date(objeto[columna.property]);
+                            let fecha = objeto[columna.property];
+                            if (objeto[columna.property]) {
+                                fecha = new Date(objeto[columna.property].replace(/(\d{2}:\d{2}:\d{2}):\w{2}/, '$1'));
+                                if (getBrowserName() == 'chrome') {
+                                    fecha = moment(objeto[columna.property], true).add(2, 'minutes').toDate();
+                                }
+                            }
+                            acumulador[nColumn] = fecha;
+                            // acumulador[nColumn] = objeto[columna.property];
+                            break;
+                        case 'number':
+                        case 'money':
+                            acumulador[nColumn] = objeto[columna.property] * 1;
+                            break;
+                        default:
+                            if (columna.property == 'numeracion_automatica') {
+                                acumulador[nColumn] = idx + 1;
+                            }
+                            else {
+                                if (columna.type == 'custom') {
+                                    // dataGeneradoPorHtml.sheetToJson
+                                    acumulador[nColumn] = dataGeneradoPorHtml.sheetToJson[idx][columna.label];
+                                }
+                                else {
+                                    if (columna.type == 'text' && columna.innerHTML) {
+                                        const convertirHtmlATexto = (html: string): string => {
+                                            const elementoTemporal = document.createElement('div');
+                                            elementoTemporal.innerHTML = html;
+                                            return elementoTemporal.textContent || "";
+                                        }
+                                        acumulador[nColumn] = convertirHtmlATexto(columna.innerHTML(objeto));
+                                    }
+                                    else if (columna.transformar) {
+                                        acumulador[nColumn] = columna.transformar(objeto);
+                                    }
+                                    else {
+                                        acumulador[nColumn] = objeto[columna.property];
+                                    }
+                                }
+                            }
+                            break;
+                    }
+                    return acumulador;
+                }, {} as Record<string, any>)
+            );
+
+            // TableUtil.exportTableToExcel('tabla_' + this.nombreColeccion);
+            // console.log(objetosExtraidos);
+            TableUtil.exportArrayToExcel(objetosExtraidos, this.nombreColeccion);
+
+            // this.tableExporter.exportTable('xlsx', {fileName: 'JVSoftExport'});
+        }
+
+        const opAdic: any = {seccion: this.nombreColeccion};
+        if (item) {
+            opAdic['item'] = item;
+        }
+        opAdic['itemSeleccionado'] = this.objSeleccionado;
+
+        if (this.tieneCheckbox) {
+            // itmsSeleccionados = this.formulariosGlobalesService.generarLista(this.nombreColeccion);
+            opAdic['idsSeleccionados'] = this.idsSeleccionado;
+        }
+        // opAdic['refTabla'] = this;
+        objMenu = {...objMenu, ...opAdic};
+        if (retorno) {
+            return objMenu;
+        }
+        // console.warn(objMenu);
+        this.opcionSelecionada.emit(objMenu);
+        return 1;
+    }
+
+    emitirResultados(evento = {}) {
+        this.opcFiltroActual = {...this.opcFiltroActual, ...evento, ...this.cargarData(true)};
+        // console.warn('resultadosFILTRO', this.opcFiltroActual);
+        this.resultados.emit(this.opcFiltroActual);
+    }
+    abrirMenuContextual({x, y}: MouseEvent, user: any) {
+        // console.log(user);
+        // this.opcMenu(user, {tipo: 'ver'});
+        this.objSeleccionado = user;
+        this.cerrarMenuContextual();
+        const positionStrategy = this.overlay.position().flexibleConnectedTo({x, y}).withPositions([
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+        ]);
+
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+        });
+
+        this.overlayRef.attach(new TemplatePortal(this.userMenu, this.viewContainerRef, {
+            // $implicit: user
+            item: user,
+        }));
+
+        this.mouseEvent$ = fromEvent<MouseEvent>(document, 'click').pipe(
+            filter(event => {
+                const clickTarget = event.target as HTMLElement;
+                return !!this.overlayRef && !this.overlayRef.overlayElement.contains(clickTarget);
+            }),
+            take(1),
+        ).subscribe(() => this.cerrarMenuContextual());
+
+    }
+
+    cerrarMenuContextual() {
+        this.mouseEvent$ && this.mouseEvent$.unsubscribe();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = undefined;
+        }
+    }
+
+    emitirAccionRecargar() {
+        if (!this.idTabla) {
+            this.objSeleccionado = null;
+        }
+        this.accionRecargar.emit(this.opcFiltroActual);
+        // this.accionRecargar.emit({ ...this.opcFiltroActual, ...{seleccionado: this.objSeleccionado}});
+    }
+
+    protected readonly tipoValorFuncion = tipoValorFuncion;
+}
+