@jvsoft/components 0.0.10 → 0.0.12

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

@@ -0,0 +1,28 @@
+<ng-template #cellTemplate let-row="row">
+    <jvs-progress-bar
+        [textoCentrado]="!!column.progressbar.textoCentrado"
+        [porcentaje]="column.progressbar.porcentaje(row)"
+        [coloresValor]="column.progressbar.coloresValor"
+        [formatoNumero]="column.progressbar.formatoNumero"
+        [textoMostrar]="column.progressbar.textoMostrar ? column.progressbar.textoMostrar(row) : ''"
+    ></jvs-progress-bar>
+</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-progressbar/column-type-progressbar.component.ts

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

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

@@ -0,0 +1,30 @@
+<ng-template #cellTemplate let-row="row">
+    <mat-icon *ngIf="[column.yesValue, 1, true].includes(row[column.property])"
+        [svgIcon]="column.yesIcon ?? 'yes_no:yes'" class="icon-sm"
+        [matTooltip]="column.yesTooltip ?? undefined"
+    ></mat-icon>
+    <mat-icon *ngIf="[column.noValue, 0, false].includes(row[column.property])" [svgIcon]="column.noIcon ?? 'yes_no:no'"
+        class="icon-sm"
+        [matTooltip]="column.noTooltip ?? undefined"
+    ></mat-icon>
+    <span class="cdk-visually-hidden">{{ row[column.property] }}</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-sino/column-type-sino.component.ts

@@ -0,0 +1,38 @@
+import {Component, inject, Input} from '@angular/core';
+
+import {MatIconRegistry} from '@angular/material/icon';
+import {DomSanitizer} from '@angular/platform-browser';
+import {ColumnaYesNo} from '../../../interfaces';
+import {ColumnTypeComponent} from '../column-type.component';
+import {MatTable} from '@angular/material/table';
+
+const YES_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"/></svg>
+`;
+const NO_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>
+`;
+
+@Component({
+  selector: 'jvs-column-type-sino',
+  standalone: false,
+  templateUrl: './column-type-sino.component.html'
+})
+export class ColumnTypeSinoComponent<T> extends ColumnTypeComponent<T> {
+    @Input({required: true}) override column: ColumnaYesNo<T> = {} as ColumnaYesNo<T>; // 🟢 Solución
+
+
+    constructor() {
+        super(inject(MatTable)); // 🟢 Llamar al constructor del padre
+        const iconRegistry = inject(MatIconRegistry);
+        const sanitizer = inject(DomSanitizer);
+
+        // Note that we provide the icon here as a string literal here due to a limitation in
+        // Stackblitz. If you want to provide the icon from a URL, you can use:
+        // `iconRegistry.addSvgIcon('thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('icon.svg'));`
+        iconRegistry.addSvgIconLiteralInNamespace('yes_no', 'yes', sanitizer.bypassSecurityTrustHtml(YES_ICON));
+        iconRegistry.addSvgIconLiteralInNamespace('yes_no', 'no', sanitizer.bypassSecurityTrustHtml(NO_ICON));
+        // iconRegistry.addSvgIconLiteral('yesIcon', sanitizer.bypassSecurityTrustHtml(YES_ICON));
+        // iconRegistry.addSvgIconLiteral('noIcon', sanitizer.bypassSecurityTrustHtml(NO_ICON));
+    }
+}

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

@@ -0,0 +1,97 @@
+<ng-template #cellTemplate let-row="row">
+    <div *ngIf="column.innerHTML; else sinInnerHTML" [class]="column.text?.cssContenedor" [ngStyle]="column.text?.cssStyle" class="hover:!max-h-max"
+        [innerHTML]="column.innerHTML(row) | noSanitize">
+    </div>
+    <ng-template #sinInnerHTML>
+        <ng-container *ngIf="column.text && column.text?.separador else campoTextNormal">
+            <div [class]="column.text?.cssContenedor">
+                <ng-container
+                    *ngFor="let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)">
+                    <ng-template *ngIf="column.property" [ngTemplateOutlet]="tipoDatoString"
+                        [ngTemplateOutletContext]="{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }"></ng-template>
+                </ng-container>
+            </div>
+        </ng-container>
+        <ng-template #campoTextNormal>
+            <ng-template *ngIf="column.property" [ngTemplateOutlet]="tipoDatoString"
+                [ngTemplateOutletContext]="{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }"></ng-template>
+        </ng-template>
+    </ng-template>
+</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-container matColumnDef="{{ column.property }}">
+<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>
+<ng-container *ngIf="column.innerHTML; else sinInnerHTML">
+    <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell (click)="accionClick(column, row, $event)">
+        <div [class]="column.text?.cssContenedor" [ngStyle]="column.text?.cssStyle" class="hover:!max-h-max"
+            [innerHTML]="column.innerHTML(row) | noSanitize">
+
+        </div>
+    </td>
+</ng-container>
+<ng-template #sinInnerHTML>
+    <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell>
+        <ng-container *ngIf="column.text && column.text?.separador else campoTextNormal">
+            <div [class]="column.text?.cssContenedor">
+                <ng-container
+                    *ngFor="let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)">
+                    <ng-template *ngIf="column.property" [ngTemplateOutlet]="tipoDatoString"
+                        [ngTemplateOutletContext]="{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }"></ng-template>
+                </ng-container>
+            </div>
+        </ng-container>
+        <ng-template #campoTextNormal>
+            <ng-template *ngIf="column.property" [ngTemplateOutlet]="tipoDatoString"
+                [ngTemplateOutletContext]="{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }"></ng-template>
+        </ng-template>
+    </td>
+</ng-template>
+<th *matFooterCellDef [ngClass]="column.cssFooterClasses" style="height: unset !important;" mat-footer-cell
+    [innerHTML]="column.transformarFooter ? column.transformarFooter() : ''">
+</th>
+</ng-container>-->
+
+<ng-template #tipoDatoString let-row="row" let-fila="fila" let-tipo="tipo" let-value="value" let-format="format"
+    let-clase="class">
+    <ng-container [ngSwitch]="tipo">
+        <ng-container *ngSwitchCase="'text'"><span [ngClass]="clase" *ngIf="value"
+            (click)="accionClick(row, $event)">
+            <span *ngIf="!fila.zeroFill">{{ value }}</span>
+            <span *ngIf="fila.zeroFill">{{ value | zeroFill: fila.zeroFill }}</span>
+        </span></ng-container>
+        <ng-container *ngSwitchCase="'date'"><span [ngClass]="clase" *ngIf="value"
+            (click)="accionClick(row, $event)">{{ value | date: (format || 'dd/MM/yyyy') }}</span></ng-container>
+        <ng-container *ngSwitchCase="'number'"><span [ngClass]="clase" *ngIf="value"
+            (click)="accionClick(row, $event)">{{ value | number: (format || '0.0-2') }}</span></ng-container>
+        <ng-container *ngSwitchCase="'money'"><span [ngClass]="clase"
+            [class.text-sky-700]="(value * 1) >= 0" [class.text-red-700]="(value * 1) < 0"
+            *ngIf="value" (click)="accionClick(row, $event)">{{ value | number: (format || '1.2-2') }}</span>
+        </ng-container>
+
+        <!--		<span [ngClass]="class" *ngSwitchCase="'date'">{{ value | date: (format || 'dd/MM/yyyy') }}</span>-->
+        <!--		<span [ngClass]="class" *ngSwitchCase="'number'">{{ value | number: (format || '0.0-2') }}</span>-->
+    </ng-container>
+</ng-template>

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

@@ -0,0 +1,43 @@
+import {Component, Input} from '@angular/core';
+import {ColumnTypeComponent} from '../column-type.component';
+import {ColumnaTexto} from '../../../interfaces';
+
+@Component({
+    selector: 'jvs-column-type-text',
+    templateUrl: './column-type-text.component.html',
+    standalone: false,
+})
+
+export class ColumnTypeTextComponent<T> extends ColumnTypeComponent<T> {
+    @Input({required: true}) override column: ColumnaTexto<T> = {} as ColumnaTexto<T>; // 🟢 Solución
+
+    // @ViewChild('titleTemplate', {static: true}) titleTemplateRef!: TemplateRef<any>;
+    // @ViewChild('cellTemplate', {static: true}) cellTemplateRef!: TemplateRef<any>;
+}
+
+// export class ColumnTypeTextComponent implements OnInit, AfterViewInit {
+//     @Input({required: true}) column!: ColumnaTexto<any>;
+//     @ViewChild(MatColumnDef, {static: true}) columnDef!: MatColumnDef;
+//
+//     constructor(
+//         @Optional() public table: MatTable<any>,
+//     ) {
+//     }
+//
+//     ngOnInit() {
+//     }
+//
+//     ngAfterViewInit() {
+//         if (this.columnDef) {
+//             this.table.addColumnDef(this.columnDef);
+//         }
+//     }
+//
+//     accionClick(column: any, item: any, event: any) {
+//         if (column.click) {
+//             column.click(item);
+//             event.stopPropagation();
+//         }
+//         return false;
+//     }
+// }

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

@@ -0,0 +1,26 @@
+<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">
+        <ng-container *ngIf="columnTitleTemplate; else defaultTitle">
+            <ng-container *ngTemplateOutlet="columnTitleTemplate; context: { column: column }"></ng-container>
+        </ng-container>
+        <ng-template #defaultTitle>
+            <span [innerHTML]="column.label ?? ''">{{ column.label }} </span>
+        </ng-template>
+    </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; context: { row: row, column: column }"></ng-container>
+    </td>
+
+    <th *matFooterCellDef [ngClass]="column.cssFooterClasses" mat-footer-cell>
+        <ng-container *ngIf="columnFooterTemplate; else defaultFooter">
+            <ng-container *ngTemplateOutlet="columnFooterTemplate; context: { column: column }"></ng-container>
+        </ng-container>
+        <ng-template #defaultFooter>
+            {{ column.transformarFooter ? column.transformarFooter() : '' }}
+        </ng-template>
+    </th>
+</ng-container>

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

@@ -0,0 +1,36 @@
+import {AfterViewInit, Component, Input, OnInit, Optional, TemplateRef, ViewChild} from '@angular/core';
+import {MatColumnDef, MatTable} from '@angular/material/table';
+import {ColumnaTabla} from '../../interfaces';
+
+@Component({
+    selector: 'jvs-column-type',
+    templateUrl: './column-type.component.html',
+    standalone: false,
+})
+export class ColumnTypeComponent<T> implements OnInit, AfterViewInit {
+    @Input({required: true}) column!: ColumnaTabla<T>;
+    @ViewChild(MatColumnDef, {static: true}) columnDef!: MatColumnDef;
+    @Input() columnTitleTemplate?: TemplateRef<any>; // Permite personalizar títulos
+    @Input() columnFooterTemplate?: TemplateRef<any>; // Permite personalizar footer
+    @Input() cellTemplate!: TemplateRef<any>; // Se usa para el contenido de las celdas
+
+    constructor(@Optional() private table: MatTable<T>) {
+    }
+
+    ngOnInit() {
+    }
+
+    ngAfterViewInit() {
+        if (this.columnDef) {
+            this.table.addColumnDef(this.columnDef);
+        }
+    }
+
+    accionClick(item: T, event: Event) {
+        if (this.column.click) {
+            this.column.click(item);
+            event.stopPropagation();
+        }
+        return false;
+    }
+}

package/tabla-mantenimiento/tabla-mantenimiento-column-defs/column-type/column-type.module.ts

@@ -0,0 +1,54 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatTableModule} from '@angular/material/table';
+import {MatSortModule} from '@angular/material/sort';
+import {ColumnTypeNumberComponent} from './column-type-number/column-type-number.component';
+import {ColumnTypeDateComponent} from './column-type-date/column-type-date.component';
+import {MatRipple} from '@angular/material/core';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatIcon} from '@angular/material/icon';
+import {ColumnTypeSinoComponent} from './column-type-sino/column-type-sino.component';
+import {ColumnTypeProgressbarComponent} from './column-type-progressbar/column-type-progressbar.component';
+import {NoSanitizePipe} from '../../pipes/no-sanitize.pipe';
+import {ZeroFillPipe} from '../../pipes/zero-fill.pipe';
+import {ProgressBarComponent} from '../../components/progress-bar';
+import {ColumnTypeTextComponent} from './column-type-text/column-type-text.component';
+import {ColumnTypeMoneyComponent} from './column-type-money/column-type-money.component';
+import {ColumnTypeIconsComponent} from './column-type-icons/column-type-icons.component';
+import {ColumnTypeComponent} from './column-type.component';
+
+
+@NgModule({
+    declarations: [
+        ColumnTypeComponent,
+        ColumnTypeTextComponent,
+        ColumnTypeMoneyComponent,
+        ColumnTypeNumberComponent,
+        ColumnTypeDateComponent,
+        ColumnTypeIconsComponent,
+        ColumnTypeSinoComponent,
+        ColumnTypeProgressbarComponent,
+    ],
+    imports: [
+        CommonModule,
+        MatTableModule,
+        MatSortModule,
+        MatTooltipModule,
+        NoSanitizePipe,
+        ZeroFillPipe,
+        MatRipple,
+        MatIcon,
+        ProgressBarComponent,
+    ],
+    exports: [
+        ColumnTypeTextComponent,
+        ColumnTypeMoneyComponent,
+        ColumnTypeNumberComponent,
+        ColumnTypeDateComponent,
+        ColumnTypeIconsComponent,
+        ColumnTypeSinoComponent,
+        ColumnTypeProgressbarComponent,
+    ]
+})
+export class ColumnTypeModule {
+}

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

@@ -0,0 +1,76 @@
+<ng-content></ng-content>
+
+
+
+<ng-container *ngFor="let column of colDetalle; trackBy: trackByProperty">
+
+    <ng-container *ngIf="column.type === 'expandir'" [matColumnDef]="column.property">
+
+        <th *matHeaderCellDef class="w-4" mat-header-cell> <span [innerHTML]="column.label ?? ''">{{ column.label }} </span></th>
+        <td *matCellDef="let row" class="w-4 text-center" mat-cell>
+            <button type="button" class="boton-circular text-primary-contrast bg-primary mat-elevation-z2" matRipple
+                *ngIf="column.click"
+                (click)="column.click(row); row.isExpanded = !row.isExpanded; $event.stopPropagation()"
+                matTooltip="Expandir / Contraer">
+                <mat-icon class="icon-xs" [svgIcon]="(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')"></mat-icon>
+            </button>
+            <button type="button" class="boton-circular text-primary-contrast bg-primary mat-elevation-z2" matRipple
+                *ngIf="!column.click"
+                (click)="row.isExpanded = !row.isExpanded; $event.stopPropagation()"
+                matTooltip="Expandir / Contraer">
+                <mat-icon class="icon-xs" [svgIcon]="(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')"></mat-icon>
+            </button>
+        </td>
+        <td *matFooterCellDef [ngClass]="column.cssFooterClasses" mat-footer-cell></td>
+
+    </ng-container>
+    <ng-container *ngIf="column.type === 'checkbox'" [matColumnDef]="column.property">
+
+        <th *matHeaderCellDef [ngClass]="column.cssClassesTH" class="w-4 text-center" mat-header-cell>
+            <mat-checkbox *ngIf="chkLista"
+                (click)="$event.stopPropagation()"
+                (change)="chkLista.checkbox.establecerTodos($event.checked)"
+                [indeterminate]="chkLista.checkbox.algunosActivos"
+                [checked]="chkLista.checkbox.todosActivos"
+            ></mat-checkbox>
+        </th>
+        <td *matCellDef="let row" class="w-4 text-center" mat-cell>
+            <mat-checkbox *ngIf="chkLista"
+                (click)="$event.stopPropagation()"
+                [(ngModel)]="chkLista.modelosChk[chkLista.generarId(row, (column.chkField ?? column.property), column.chkFieldSeparador)]"
+                [ngModelOptions]="{standalone: true}"
+            ></mat-checkbox>
+
+        </td>
+        <td *matFooterCellDef [ngClass]="column.cssFooterClasses" mat-footer-cell></td>
+
+    </ng-container>
+    <ng-container *ngIf="column.type === 'estiloEstablecido'" [matColumnDef]="column.property">
+
+        <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>
+            <span class="text-red-900 font-bold bg-white">CONFIGURAR ESTILO ESTABLECIDO</span>
+        </th>
+        <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell>
+            {{ column.property }}
+            <span class="text-red-900 font-bold bg-white">CONFIGURAR ESTILO ESTABLECIDO</span>
+        </td>
+        <th *matFooterCellDef [ngClass]="column.cssFooterClasses" style="height: unset !important;" mat-footer-cell
+            [innerHTML]="column.transformarFooter ? column.transformarFooter() : ''">
+        </th>
+
+    </ng-container>
+
+    <jvs-column-type-text  *ngIf="column.type == 'text'" [column]="column"></jvs-column-type-text>
+    <jvs-column-type-money *ngIf="column.type == 'money'" [column]="column"></jvs-column-type-money>
+    <jvs-column-type-number *ngIf="column.type == 'number'" [column]="column"></jvs-column-type-number>
+    <jvs-column-type-date *ngIf="column.type == 'date'" [column]="column"></jvs-column-type-date>
+    <jvs-column-type-icons *ngIf="column.type == 'icons'" [column]="column"></jvs-column-type-icons>
+    <jvs-column-type-sino *ngIf="column.type == 'yes_no'" [column]="column"></jvs-column-type-sino>
+    <jvs-column-type-progressbar *ngIf="column.type == 'progress'" [column]="column"></jvs-column-type-progressbar>
+
+
+
+</ng-container>

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

@@ -0,0 +1,67 @@
+import {AfterContentInit, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, Optional, Output, QueryList, ViewChildren} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatColumnDef, MatTable, MatTableModule} from '@angular/material/table';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatIconModule} from '@angular/material/icon';
+import {MatRippleModule} from '@angular/material/core';
+import {MatSortModule} from '@angular/material/sort';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ColumnaTabla} from '../interfaces/global';
+import {DataModel} from '../classes/data-model';
+import {ColumnTypeModule} from './column-type/column-type.module';
+
+@Component({
+    selector: 'jvs-tabla-mantenimiento-column-defs',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatCheckboxModule,
+        MatIconModule,
+        MatRippleModule,
+        MatSortModule,
+        MatTableModule,
+        MatTooltipModule,
+        ReactiveFormsModule,
+        FormsModule,
+        ColumnTypeModule,
+
+    ],
+    templateUrl: './tabla-mantenimiento-column-defs.component.html',
+    styleUrls: ['./tabla-mantenimiento-column-defs.component.scss']
+})
+export class TablaMantenimientoColumnDefsComponent implements AfterContentInit {
+
+    @Input() objThis: any;
+    @Input() nombreColeccion: any;
+    @Input() colDetalle!: ColumnaTabla<any>[];
+
+    @Input() chkLista!: DataModel; // = new DataModel();
+    @Output() chkListaChange = new EventEmitter<DataModel>();
+
+    @ViewChildren(MatColumnDef) columnDefLocales!: QueryList<MatColumnDef>;
+    @ContentChildren(MatColumnDef, {descendants: true}) columnDefEnSubComponentes!: QueryList<MatColumnDef>;
+
+
+    constructor(
+        @Optional() public table: MatTable<any>, private cdRef: ChangeDetectorRef,
+    ) {
+    }
+
+    ngAfterContentInit() {
+        if (this.table) {
+            this.cdRef.detectChanges();
+            this.columnDefEnSubComponentes.forEach(refCol => {
+                this.table.addColumnDef(refCol);
+            });
+            this.columnDefLocales.forEach(refCol => {
+                this.table.addColumnDef(refCol);
+            });
+        }
+    }
+
+    trackByProperty<T>(index: number, column: ColumnaTabla<T>) {
+        return column.property;
+    }
+
+}

package/tabla-mantenimiento/tabla-mantenimiento-menu/tabla-mantenimiento-menu.component.html

@@ -0,0 +1,7 @@
+<mat-menu #menu="matMenu">
+    <div class="mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual w-full">
+        <ng-container *ngFor="let btn of subItems">
+            <ng-container *ngTemplateOutlet="botonTemplate; context:{btn: btn, item: objThis['seleccionados'][nombreColeccion], barraSuperior: false}"></ng-container>
+        </ng-container>
+    </div>
+</mat-menu>

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

@@ -0,0 +1,39 @@
+import {Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatMenu, MatMenuModule} from '@angular/material/menu';
+import {BotonMantenimiento} from '../interfaces/global';
+
+@Component({
+    selector: 'jvs-tabla-mantenimiento-menu',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatMenuModule,
+    ],
+    templateUrl: './tabla-mantenimiento-menu.component.html',
+    styleUrls: ['./tabla-mantenimiento-menu.component.scss']
+})
+export class TablaMantenimientoMenuComponent implements OnInit {
+    @Input() objThis: any;
+    @Input() nombreColeccion!: string;
+    @Input() item: any;
+    @Input() derechosActuales: any;
+    // @Input() modalPrincipal;
+    // @Input() botonDisabled = (btn: BotonMantenimiento, item: any) => [];
+
+    @Output() opcionSelecionada = new EventEmitter();
+
+    @ViewChild('menu', {static: true}) public menu!: MatMenu;
+    @Input({required: true}) subItems!: BotonMantenimiento[];
+
+    @Input({required: true}) botonTemplate!: TemplateRef<any>;
+
+    constructor(
+    ) {
+    }
+
+    ngOnInit(): void {
+    }
+
+
+}