@jvsoft/components 0.0.10 → 0.0.11

package/tabla-mantenimiento/interfaces/global/{columnas-tabla.d.ts → columnas-tabla.ts}

@@ -1,6 +1,25 @@
-import { EstilosBarra } from '../../components/progress-bar';
-import { TipoValorFuncion } from './no-export';
-type TiposColumnas = 'yes_no' | 'estiloEstablecido' | 'text' | 'number' | 'money' | 'date' | 'image' | 'estado' | 'badge' | 'progress' | 'checkbox' | 'icon' | 'icons' | 'icon_checkbox' | 'custom' | 'expandir' | 'numeracion_automatica';
+import {EstilosBarra} from '../../components/progress-bar';
+import {TipoValorFuncion} from './no-export';
+
+type TiposColumnas =
+    | 'yes_no'
+    | 'estiloEstablecido'
+    | 'text'
+    | 'number'
+    | 'money'
+    | 'date'
+    | 'image'
+    | 'estado'
+    | 'badge'
+    | 'progress'
+    | 'checkbox'
+    | 'icon'
+    | 'icons'
+    | 'icon_checkbox'
+    | 'custom'
+    | 'expandir'
+    | 'numeracion_automatica';
+
 export interface ColumnaTablaReporte {
     ocultar?: boolean;
     transformar?: (row: any) => any;
@@ -10,11 +29,13 @@ export interface ColumnaTablaReporte {
     };
     opcionesPdfmake?: {
         transformarCuerpo?(row: any): any;
-        titulo?: object;
-        cuerpo?: object;
+        titulo?: object,
+        cuerpo?: object,
         total?: TipoValorFuncion<any>;
-    };
+    }
 }
+
+
 export interface IconsIcon {
     icon: string;
     iconSize?: string;
@@ -22,14 +43,29 @@ export interface IconsIcon {
     toolTipField?: string;
     contentCss?: string;
     cssClass?: string;
+
     click?(row: any): void;
+
     esVisible?(row: any): boolean;
 }
-export type TiposColumnasNuevo = 'text' | 'checkbox' | 'money' | 'icon' | 'icons' | 'progress' | 'expandir' | 'date' | 'number';
+
+// VERSION MEJORADA //
+
+export type TiposColumnasNuevo =
+    | 'text'
+    | 'checkbox'
+    | 'money'
+    | 'icon'
+    | 'icons'
+    | 'progress'
+    | 'expandir'
+    | 'date'
+    | 'number';
+
 type PropiedadString<T> = Extract<keyof T, string>;
 interface BaseColumna<T> {
     tableDataIndex?: number;
-    label: string;
+    label: '' | string;
     labelLista?: string;
     property: PropiedadString<T> | string;
     /** esta propiedad solo se usa cuando se usará una funcion para modificarla */
@@ -39,57 +75,72 @@ interface BaseColumna<T> {
     sortType?: 'number' | 'date';
     reportType?: TiposColumnas;
     visible?: TipoValorFuncion<boolean>;
+    // sticky?: boolean;
+    // stickyEnd?: boolean;
     cssClasses?: string[];
     cssClassesTH?: string[];
     textCss?: string | string[];
     cssFooterClasses?: string[];
     datosExtra?: any;
+
     reporte?: ColumnaTablaReporte;
+
     innerHTMLInvisible?: (row: any) => string;
     /** @deprecated usar `visible` en su lugar: ejm: visible: ():boolean => {}, visible: boolean */
     esVisible?: () => boolean;
     /** @deprecated usar `noMostrarEnLista` en su lugar: ejm: noMostrarEnLista: ():boolean => {}, noMostrarEnLista: boolean */
     noMostrar?: () => boolean;
     noMostrarEnLista?: TipoValorFuncion<boolean>;
+
     click?: (row: any) => void;
     transformar?: (row: any) => any;
     transformarFooter?: () => any;
+
     /** @deprecated usar `reporte.opcionesPdfmake.transformarCuerpo` */
     transformarDirecto?: never;
+
 }
+
 export interface ColumnaTexto<T> extends BaseColumna<T> {
     type: 'text';
     innerHTML?: (row: any) => string;
     zeroFill?: number;
     text?: PropiedadesText;
 }
+
 export interface ColumnaCheckbox<T> extends BaseColumna<T> {
     type: 'checkbox';
     chkField?: string | string[];
     chkFieldPersistente?: boolean;
     chkFieldSeparador?: string;
 }
+
 export interface ColumnaMoney<T> extends BaseColumna<T> {
     type: 'money';
     simboloMoneda?: string;
     format?: string;
 }
+
 export interface ColumnaIcons<T> extends BaseColumna<T> {
     type: 'icons';
     iconsDef: ColumnaIconsDef;
+
 }
 export interface ColumnaProgress<T> extends BaseColumna<T> {
     type: 'progress';
     progressbar: PropiedadesProgressBar;
 }
+
 export interface ColumnaDate<T> extends BaseColumna<T> {
     type: 'date';
     format?: string;
 }
+
 export interface ColumnaNumber<T> extends BaseColumna<T> {
     type: 'number';
     format?: string;
 }
+
 export interface ColumnaExpandir<T> extends BaseColumna<T> {
     type: 'expandir';
 }
@@ -97,27 +148,52 @@ export interface ColumnaYesNo<T> extends BaseColumna<T> {
     type: 'yes_no';
     yesIcon?: string;
     yesTooltip?: string;
-    yesValue?: any;
+    yesValue?: any,
     noIcon?: string;
     noTooltip?: string;
-    noValue?: any;
+    noValue?: any,
 }
+
 export interface ColumnaEstiloEstablecido<T> extends BaseColumna<T> {
     type: 'estiloEstablecido';
     propertyTemplate: PropiedadString<T> | string;
 }
+
 export interface ColumnaOtros<T> extends BaseColumna<T> {
-    type: 'image' | 'custom' | 'estado' | 'numeracion_automatica';
+    type:
+        // | 'estiloEstablecido'
+        | 'image'
+        | 'custom'
+        | 'estado'
+        | 'numeracion_automatica';
+
     /** @deprecated */
     readonly estados?: object[];
 }
-export type ColumnaTabla<T> = ColumnaEstiloEstablecido<T> | ColumnaTexto<T> | ColumnaCheckbox<T> | ColumnaMoney<T> | ColumnaIcons<T> | ColumnaProgress<T> | ColumnaDate<T> | ColumnaNumber<T> | ColumnaExpandir<T> | ColumnaYesNo<T> | ColumnaOtros<T>;
+
+// 🔹 Unimos todas las interfaces en un solo tipo discriminado
+export type ColumnaTabla<T> =
+    | ColumnaEstiloEstablecido<T>
+
+    | ColumnaTexto<T>
+    | ColumnaCheckbox<T>
+    | ColumnaMoney<T>
+    | ColumnaIcons<T>
+    | ColumnaProgress<T>
+    | ColumnaDate<T>
+    | ColumnaNumber<T>
+    | ColumnaExpandir<T>
+    | ColumnaYesNo<T>
+    | ColumnaOtros<T>
+
+// 🟢 Definición de propiedades específicas
 export interface PropiedadesText {
     separador?: string;
     cssContenedor?: string;
     cssStyle?: object;
     click?: (row: any) => void;
 }
+
 export interface PropiedadesProgressBar {
     formatoNumero?: string;
     coloresValor?: EstilosBarra[];
@@ -125,11 +201,13 @@ export interface PropiedadesProgressBar {
     textoMostrar?: (row: any) => string;
     porcentaje: (row: any) => number;
 }
+
 export interface ColumnaIconsDef {
     items: TipoValorFuncion<IconsIcon[]>;
     soloIcono?: boolean;
     iconSize?: string;
 }
+
 export interface IconsIcon {
     icon: string;
     iconSize?: string;
@@ -140,4 +218,3 @@ export interface IconsIcon {
     click?: (row: any) => void;
     esVisible?: (row: any) => boolean;
 }
-export {};

package/tabla-mantenimiento/interfaces/global/no-export.ts

@@ -0,0 +1,11 @@
+export type TipoValorFuncion<T> = T | ((...param: any) => T);
+
+export function tipoValorFuncion<T>(datoParam: TipoValorFuncion<T>, defaultValue?: T, ...param: any[]): T | undefined {
+    if (datoParam === undefined || datoParam === null) {
+        return defaultValue;  // Retorna el valor por defecto si es undefined
+    }
+    if (typeof datoParam === 'function') {
+        return (datoParam as (...args: any) => T)(...param);
+    }
+    return datoParam;
+}

package/tabla-mantenimiento/interfaces/global/{otros.d.ts → otros.ts}

@@ -1,5 +1,6 @@
-import { BehaviorSubject } from 'rxjs';
-import { TiposOpciones } from './boton-mantenimiento';
+import {BehaviorSubject} from 'rxjs';
+import {TiposOpciones} from './boton-mantenimiento';
+
 export interface OpcionSeleccionada {
     readonly tableDataIndex?: number;
     item?: any;
@@ -14,13 +15,24 @@ export interface OpcionSeleccionada {
     /** @deprecated usar '`datosExtra`' en su lugar */
     dialog?: any;
 }
+
+interface DatosExtra {
+    /** templateRef del '`GeneralFileUpload`' **/
+    templateArchivos: any;
+    [key: string]: any;
+}
+
+
+
 export interface DialogDatosRecibidos {
     opcMenuSubmit?: OpcionSeleccionada;
+
     [key: string]: any;
 }
 export interface DataServidor {
     [key: string]: BehaviorSubject<any>;
 }
-export interface OpcMenuEvent extends OpcionSeleccionada {
+
+export interface OpcMenuEvent extends OpcionSeleccionada{
     datosGuardados?: any;
 }

package/tabla-mantenimiento/interfaces/implements/{incluye-tabla-mantenimiento.d.ts → incluye-tabla-mantenimiento.ts}

@@ -1,11 +1,13 @@
-import { ColumnaTabla, DataServidor, OpcionSeleccionada, TablaMantenimientoSeccionBotones } from '../global';
+import {ColumnaTabla, DataServidor, OpcionSeleccionada, TablaMantenimientoSeccionBotones} from '../global';
+
+
 export declare interface IncluyeTablaMantenimiento {
     dataServidorSuscripcion?: DataServidor;
     botonesMenu?: TablaMantenimientoSeccionBotones;
+    // opcionesFiltro?: TabSeccion[];
     columnasPrincipal: ColumnaTabla<any>[];
-    seleccionados: {
-        [key: string]: any;
-    };
+    // columnasTabla: ColumnaTabla<any>[];
+    seleccionados: { [key:string]: any };
     cargaInicial?<T>(): void | Promise<T>;
     cargarLista?<T>(): void | Promise<T>;
     opcMenu?(v: OpcionSeleccionada): void;

package/tabla-mantenimiento/interfaces/implements/{index.d.ts → index.ts}

@@ -1 +1,2 @@
+
 export * from './incluye-tabla-mantenimiento';

package/tabla-mantenimiento/mat-row-keyboard-selection.directive.ts

@@ -0,0 +1,97 @@
+import {Directive, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {Subject, takeUntil} from 'rxjs';
+
+@Directive({
+    selector: '[matRowKeyboardSelection]'
+})
+export class MatRowKeyboardSelectionDirective implements OnInit, OnDestroy {
+
+    private rows!: HTMLElement[];
+    private renderedData!: any[];
+
+    @Input('matRowKeyboardSelection') tabla!: MatTable<any>; // Entrada: Referencia a la tabla
+    @Input() rowModel: any; // Entrada: Modelo de fila actual
+    @Output() seleccionarSiguiente = new EventEmitter(); // Salida: Evento al seleccionar siguiente
+
+    private unsubscriber$ = new Subject();
+
+    constructor(private el: ElementRef) {}
+
+    ngOnInit(): void {
+        // Asignar tabindex si no está definido
+        if (this.el.nativeElement.tabIndex < 0) {
+            this.el.nativeElement.tabIndex = 0;
+        }
+
+        // Obtener la fuente de datos de la tabla
+        const dataSource = this.tabla.dataSource as MatTableDataSource<any>;
+
+        // Suscribirse a los cambios en los datos
+        dataSource.connect().pipe(takeUntil(this.unsubscriber$)).subscribe(data => {
+            this.renderedData = data;
+            this.rows = Array.from(<NodeListOf<HTMLElement>>this.getTableRows());
+        });
+    }
+
+    ngOnDestroy(): void {
+        // Finalizar la suscripción al destruir la directiva
+        this.unsubscriber$.next(null);
+        this.unsubscriber$.complete();
+    }
+
+    @HostListener('keydown', ['$event']) onKeydown(event: KeyboardEvent): void {
+        var element = event.target as HTMLElement;
+        if (element.tagName === "INPUT") {
+            event.stopPropagation();
+        }
+        else {
+            const currentIndex = this.renderedData.findIndex(row => row === this.rowModel);
+            const eRef = event.target as HTMLElement;
+            this.rows = this.rows.filter(elem => elem.hasAttribute('id'));
+            const arrayFilas = Array.from(this.rows);
+
+            const fElem = arrayFilas.filter(elem => elem.id == eRef.id).pop();
+            const cElemIdx = arrayFilas.findIndex(elem => elem == fElem);
+
+            let newRow: HTMLElement | undefined;
+
+            // Controlar las teclas presionadas
+            switch (event.key) {
+                case 'ArrowDown':
+                    newRow = this.rows[cElemIdx + 1];
+                    break;
+                case 'ArrowUp':
+                    newRow = this.rows[cElemIdx - 1];
+                    break;
+                case 'Enter':
+                case ' ':
+                    this.seleccionarSiguiente.next(this.renderedData[currentIndex]);
+                    event.preventDefault();
+                    break;
+            }
+
+            // Enfocar la nueva fila seleccionada
+            if (newRow) {
+                newRow.classList.add('estaFocus');
+                newRow.focus();
+            }
+        }
+    }
+
+    private getTableRows(): NodeListOf<HTMLElement> | undefined {
+        let el = this.el.nativeElement;
+
+        // Recorrer los elementos padres hasta encontrar la tabla
+        while (el && el.parentNode) {
+            el = el.parentNode;
+
+            // Verificar si es una tabla de material
+            if (el.tagName && el.tagName.toLowerCase() === 'mat-table' || el.hasAttribute('mat-table')) {
+                return el.querySelectorAll('mat-row, tr[mat-row]');
+            }
+        }
+
+        return undefined;
+    }
+}

package/tabla-mantenimiento/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/tabla-mantenimiento/pipes/no-sanitize.pipe.ts

@@ -0,0 +1,12 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
+
+@Pipe({ name: 'noSanitize' })
+export class NoSanitizePipe implements PipeTransform {
+	constructor(private domSanitizer: DomSanitizer) {
+
+	}
+	transform(html: string): SafeHtml {
+		return this.domSanitizer.bypassSecurityTrustHtml(html);
+	}
+}

package/tabla-mantenimiento/pipes/zero-fill.pipe.ts

@@ -0,0 +1,19 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+	name: 'zeroFill',
+})
+export class ZeroFillPipe implements PipeTransform {
+
+	transform(value: unknown, digitos: number, ...args: unknown[]) {
+		let s = value + '';
+		while (s.length < digitos) {
+			s = '0' + s;
+		}
+		return s;
+	}
+
+}
+export function zeroFill(value: unknown, digitos: number, ...args: unknown[]) {
+	return new ZeroFillPipe().transform(value, digitos, args);
+}

package/tabla-mantenimiento/{public-api.d.ts → public-api.ts}

@@ -1,4 +1,5 @@
 export * from './tabla-mantenimiento.component';
 export * from './tabla-mantenimiento.service';
-export * from './components/progress-bar';
-export * from './interfaces';
+export * from './components/progress-bar'
+export * from './interfaces'
+

package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-date/column-type-date.component.html

@@ -0,0 +1,22 @@
+<ng-template #cellTemplate let-row="row">
+    {{ row[column.property] | date: (column.format ? column.format : 'dd/MM/yyyy') }}
+</ng-template>
+
+<ng-container matColumnDef="{{ column.property }}">
+    <!-- Definición del encabezado de la columna -->
+    <th *matHeaderCellDef [ngClass]="column.cssClassesTH" class="uppercase text-center" mat-header-cell mat-sort-header
+        [disabled]="column.sort === false">
+        <span [innerHTML]="column.label ?? ''">{{ column.label }} </span>
+    </th>
+
+    <!-- Cuerpo de la celda, definido por los hijos -->
+    <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell (click)="accionClick(row, $event)">
+
+        <ng-container [ngTemplateOutlet]="cellTemplate" [ngTemplateOutletContext]="{row}"></ng-container>
+
+    </td>
+
+    <th *matFooterCellDef [ngClass]="column.cssFooterClasses" mat-footer-cell>
+        {{ column.transformarFooter ? column.transformarFooter() : '' }}
+    </th>
+</ng-container>

package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-date/column-type-date.component.ts

@@ -0,0 +1,12 @@
+import {Component, Input} from '@angular/core';
+import {ColumnaDate} from '../../../interfaces';
+import {ColumnTypeComponent} from '../column-type.component';
+
+@Component({
+    selector: 'jvs-column-type-date',
+    standalone: false,
+    templateUrl: './column-type-date.component.html'
+})
+export class ColumnTypeDateComponent<T> extends ColumnTypeComponent<T> {
+    @Input({required: true}) override column: ColumnaDate<T> = {} as ColumnaDate<T>;
+}

package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-icons/column-type-icons.component.html

@@ -0,0 +1,58 @@
+<ng-template #cellTemplate let-row="row">
+    <div class="flex items-center justify-center" [ngClass]="{ '-space-x-1': !column.iconsDef?.soloIcono }"
+    >
+        <ng-container *ngFor="let icon of obtenerItems(column.iconsDef, row)">
+            <ng-container *ngIf="!column.iconsDef?.soloIcono; else soloIcono">
+                <button matRipple type="button" *ngIf="!icon.esVisible || icon.esVisible(row)"
+                    (click)="icon.click ? icon.click(row) : false; $event.stopPropagation()"
+                    class="flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg"
+                    [ngClass]="icon.contentCss"
+                    [matTooltip]="icon.toolTip ?? row[icon.toolTipField ?? '_field_']"
+                    [matTooltipDisabled]="!icon.toolTip && !icon.toolTipField"
+                >
+                    <ng-container [ngTemplateOutlet]="iconoConTamanio"
+                        [ngTemplateOutletContext]="{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}"></ng-container>
+                </button>
+            </ng-container>
+            <ng-template #soloIcono>
+                <div *ngIf="!icon.esVisible || icon.esVisible(row)" [ngClass]="icon.contentCss"
+                    class="flex items-center"
+                    [matTooltip]="icon.toolTip ?? row[icon.toolTipField ?? '_field_']"
+                    [matTooltipDisabled]="!icon.toolTip && !icon.toolTipField"
+                >
+                    <ng-container [ngTemplateOutlet]="iconoConTamanio"
+                        [ngTemplateOutletContext]="{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}"></ng-container>
+                </div>
+            </ng-template>
+        </ng-container>
+    </div>
+</ng-template>
+
+<ng-container matColumnDef="{{ column.property }}">
+    <!-- Definición del encabezado de la columna -->
+    <th *matHeaderCellDef [ngClass]="column.cssClassesTH" class="uppercase text-center" mat-header-cell mat-sort-header
+        [disabled]="column.sort === false">
+        <span [innerHTML]="column.label ?? ''">{{ column.label }} </span>
+    </th>
+
+    <!-- Cuerpo de la celda, definido por los hijos -->
+    <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell (click)="accionClick(row, $event)">
+
+        <ng-container [ngTemplateOutlet]="cellTemplate" [ngTemplateOutletContext]="{row}"></ng-container>
+
+    </td>
+
+    <th *matFooterCellDef [ngClass]="column.cssFooterClasses" mat-footer-cell>
+        {{ column.transformarFooter ? column.transformarFooter() : '' }}
+    </th>
+</ng-container>
+
+
+<ng-template #iconoConTamanio let-icon="icon" let-iconClass="iconClass" let-size="size">
+    <mat-icon *ngIf="size" [svgIcon]="icon" [ngClass]="iconClass" [inline]="true"
+        [style.font-size]="size"
+        [style.height]="size"
+        [style.width]="size"
+    ></mat-icon>
+    <mat-icon *ngIf="!size" [svgIcon]="icon" [ngClass]="iconClass"></mat-icon>
+</ng-template>

package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-icons/column-type-icons.component.ts

@@ -0,0 +1,19 @@
+import {Component, Input} from '@angular/core';
+import {ColumnaIcons, IconsIcon} from '../../../interfaces';
+import {ColumnTypeComponent} from '../column-type.component';
+
+@Component({
+  selector: 'jvs-column-type-icons',
+  standalone: false,
+  templateUrl: './column-type-icons.component.html'
+})
+export class ColumnTypeIconsComponent<T> extends ColumnTypeComponent<T> {
+    @Input({required: true}) override column: ColumnaIcons<T> = {} as ColumnaIcons<T>;
+
+    obtenerItems(columna: any, row: any): IconsIcon[] {
+        if (typeof columna.items === 'function') {
+            return columna.items(row);
+        }
+        return columna.items;
+    }
+}

package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-money/column-type-money.component.html

@@ -0,0 +1,40 @@
+<ng-template #cellTemplate let-row="row">
+     <span [ngClass]="column.textCss"
+         [class.text-sky-700]="(value(row)) >= 0" [class.text-red-700]="(value(row)) < 0"
+         *ngIf="value(row)"
+         (click)="accionClick(row, $event)">{{ value(row) | number: (column.format || '1.2-2') }}</span>
+</ng-template>
+<ng-template #columnFooterTemplate let-row="row">
+		<span *ngIf="column.transformarFooter"
+            [class.text-sky-700]="column.transformarFooter() >= 0"
+            [class.text-red-700]="column.transformarFooter() < 0"
+        >
+					<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>
+				</span>
+</ng-template>
+
+<!--<jvs-column-type [column]="column" [cellTemplate]="cellTemplate" [columnFooterTemplate]="columnFooterTemplate"></jvs-column-type>-->
+
+<ng-container matColumnDef="{{ column.property }}">
+    <!-- Definición del encabezado de la columna -->
+    <th *matHeaderCellDef [ngClass]="column.cssClassesTH" class="uppercase text-center" mat-header-cell mat-sort-header
+        [disabled]="column.sort === false">
+        <span [innerHTML]="column.label ?? ''">{{ column.label }} </span>
+    </th>
+
+    <!-- Cuerpo de la celda, definido por los hijos -->
+    <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell (click)="accionClick(row, $event)">
+
+        <ng-container [ngTemplateOutlet]="cellTemplate" [ngTemplateOutletContext]="{row}"></ng-container>
+
+    </td>
+
+    <th *matFooterCellDef [ngClass]="column.cssFooterClasses" mat-footer-cell>
+        		<span *ngIf="column.transformarFooter"
+                    [class.text-sky-700]="column.transformarFooter() >= 0"
+                    [class.text-red-700]="column.transformarFooter() < 0"
+                >
+					<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>
+				</span>
+    </th>
+</ng-container>

package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-money/column-type-money.component.ts

@@ -0,0 +1,17 @@
+import {Component, Input} from '@angular/core';
+import {ColumnaMoney} from '../../../interfaces';
+import {ColumnTypeComponent} from '../column-type.component';
+
+@Component({
+    selector: 'jvs-column-type-money',
+    templateUrl: './column-type-money.component.html',
+    standalone: false,
+})
+export class ColumnTypeMoneyComponent<T> extends ColumnTypeComponent<T> {
+    @Input({required: true}) override column: ColumnaMoney<T> = {} as ColumnaMoney<T>;
+
+
+    value(row: any): number {
+        return (this.column.transformar ? this.column.transformar(row):row[this.column.property]);
+    }
+}

package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-number/column-type-number.component.html

@@ -0,0 +1,25 @@
+
+<ng-template #cellTemplate let-row="row">
+				<span *ngIf="column.property && row[column.property]" class="!text-indigo-900 font-semibold">
+					{{ row[column.property] | number: (column.format ? column.format : '1.0-2') }}
+				</span>
+</ng-template>
+
+<ng-container matColumnDef="{{ column.property }}">
+    <!-- Definición del encabezado de la columna -->
+    <th *matHeaderCellDef [ngClass]="column.cssClassesTH" class="uppercase text-center" mat-header-cell mat-sort-header
+        [disabled]="column.sort === false">
+        <span [innerHTML]="column.label ?? ''">{{ column.label }} </span>
+    </th>
+
+    <!-- Cuerpo de la celda, definido por los hijos -->
+    <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell (click)="accionClick(row, $event)">
+
+        <ng-container [ngTemplateOutlet]="cellTemplate" [ngTemplateOutletContext]="{row}"></ng-container>
+
+    </td>
+
+    <th *matFooterCellDef [ngClass]="column.cssFooterClasses" mat-footer-cell>
+        {{ column.transformarFooter ? column.transformarFooter() : '' }}
+    </th>
+</ng-container>

package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type-number/column-type-number.component.ts

@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+import {ColumnaNumber} from '../../../interfaces';
+import {ColumnTypeComponent} from '../column-type.component';
+
+
+@Component({
+  selector: 'jvs-column-type-number',
+  standalone: false,
+  templateUrl: './column-type-number.component.html'
+})
+export class ColumnTypeNumberComponent<T> extends ColumnTypeComponent<T> {
+    @Input({required: true}) override column: ColumnaNumber<T> = {} as ColumnaNumber<T>;
+
+}