@jvsoft/components 0.0.5 → 0.0.7

package/fesm2022/jvsoft-components.mjs

@@ -20,8 +20,8 @@ import * as i14 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i8 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
+import * as i2$2 from '@angular/material/menu';
+import { MatMenuModule, MatMenu } from '@angular/material/menu';
 import * as i9 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator, MAT_PAGINATOR_DEFAULT_OPTIONS } from '@angular/material/paginator';
 import * as i3$1 from '@angular/material/sort';
@@ -38,7 +38,7 @@ import shortHash from 'shorthash2';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as XLSX from 'xlsx';
-import * as i2$2 from '@angular/cdk/overlay';
+import * as i2$3 from '@angular/cdk/overlay';
 
 class DialogFlotanteComponent {
     cssClases = {};
@@ -327,7 +327,10 @@ class ForCheckboxModel {
     }
 }
 
-function tipoValorFuncion(datoParam, ...param) {
+function tipoValorFuncion(datoParam, defaultValue, ...param) {
+    if (datoParam === undefined || datoParam === null) {
+        return defaultValue; // Retorna el valor por defecto si es undefined
+    }
     if (typeof datoParam === 'function') {
         return datoParam(...param);
     }
@@ -700,11 +703,11 @@ class ColumnTypeIconsComponent extends ColumnTypeComponent {
         return columna.items;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeIconsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeIconsComponent, isStandalone: false, selector: "jvs-column-type-icons", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n    <div class=\"flex items-center justify-center\" [ngClass]=\"{ '-space-x-1': !column.iconsDef?.soloIcono }\"\n    >\n        <ng-container *ngFor=\"let icon of obtenerItems(column.iconsDef, row)\">\n            <ng-container *ngIf=\"!column.iconsDef?.soloIcono; else soloIcono\">\n                <button matRipple type=\"button\" *ngIf=\"!icon.esVisible || icon.esVisible(row)\"\n                    (click)=\"icon.click ? icon.click(row) : false;\"\n                    class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n                    [ngClass]=\"icon.contentCss\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </button>\n            </ng-container>\n            <ng-template #soloIcono>\n                <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n                    class=\"flex items-center\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n    <!-- Definici\u00F3n del encabezado de la columna -->\n    <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n        [disabled]=\"column.sort === false\">\n        <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n    </th>\n\n    <!-- Cuerpo de la celda, definido por los hijos -->\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n        <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        {{ column.transformarFooter ? column.transformarFooter() : '' }}\n    </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n    <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n        [style.font-size]=\"size\"\n        [style.height]=\"size\"\n        [style.width]=\"size\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeIconsComponent, isStandalone: false, selector: "jvs-column-type-icons", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n    <div class=\"flex items-center justify-center\" [ngClass]=\"{ '-space-x-1': !column.iconsDef?.soloIcono }\"\n    >\n        <ng-container *ngFor=\"let icon of obtenerItems(column.iconsDef, row)\">\n            <ng-container *ngIf=\"!column.iconsDef?.soloIcono; else soloIcono\">\n                <button matRipple type=\"button\" *ngIf=\"!icon.esVisible || icon.esVisible(row)\"\n                    (click)=\"icon.click ? icon.click(row) : false; $event.stopPropagation()\"\n                    class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n                    [ngClass]=\"icon.contentCss\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </button>\n            </ng-container>\n            <ng-template #soloIcono>\n                <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n                    class=\"flex items-center\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n    <!-- Definici\u00F3n del encabezado de la columna -->\n    <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n        [disabled]=\"column.sort === false\">\n        <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n    </th>\n\n    <!-- Cuerpo de la celda, definido por los hijos -->\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n        <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        {{ column.transformarFooter ? column.transformarFooter() : '' }}\n    </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n    <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n        [style.font-size]=\"size\"\n        [style.height]=\"size\"\n        [style.width]=\"size\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeIconsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jvs-column-type-icons', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n    <div class=\"flex items-center justify-center\" [ngClass]=\"{ '-space-x-1': !column.iconsDef?.soloIcono }\"\n    >\n        <ng-container *ngFor=\"let icon of obtenerItems(column.iconsDef, row)\">\n            <ng-container *ngIf=\"!column.iconsDef?.soloIcono; else soloIcono\">\n                <button matRipple type=\"button\" *ngIf=\"!icon.esVisible || icon.esVisible(row)\"\n                    (click)=\"icon.click ? icon.click(row) : false;\"\n                    class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n                    [ngClass]=\"icon.contentCss\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </button>\n            </ng-container>\n            <ng-template #soloIcono>\n                <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n                    class=\"flex items-center\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n    <!-- Definici\u00F3n del encabezado de la columna -->\n    <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n        [disabled]=\"column.sort === false\">\n        <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n    </th>\n\n    <!-- Cuerpo de la celda, definido por los hijos -->\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n        <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        {{ column.transformarFooter ? column.transformarFooter() : '' }}\n    </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n    <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n        [style.font-size]=\"size\"\n        [style.height]=\"size\"\n        [style.width]=\"size\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n" }]
+            args: [{ selector: 'jvs-column-type-icons', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n    <div class=\"flex items-center justify-center\" [ngClass]=\"{ '-space-x-1': !column.iconsDef?.soloIcono }\"\n    >\n        <ng-container *ngFor=\"let icon of obtenerItems(column.iconsDef, row)\">\n            <ng-container *ngIf=\"!column.iconsDef?.soloIcono; else soloIcono\">\n                <button matRipple type=\"button\" *ngIf=\"!icon.esVisible || icon.esVisible(row)\"\n                    (click)=\"icon.click ? icon.click(row) : false; $event.stopPropagation()\"\n                    class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n                    [ngClass]=\"icon.contentCss\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </button>\n            </ng-container>\n            <ng-template #soloIcono>\n                <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n                    class=\"flex items-center\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n    <!-- Definici\u00F3n del encabezado de la columna -->\n    <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n        [disabled]=\"column.sort === false\">\n        <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n    </th>\n\n    <!-- Cuerpo de la celda, definido por los hijos -->\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n        <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        {{ column.transformarFooter ? column.transformarFooter() : '' }}\n    </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n    <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n        [style.font-size]=\"size\"\n        [style.height]=\"size\"\n        [style.width]=\"size\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n" }]
         }], propDecorators: { column: [{
                 type: Input,
                 args: [{ required: true }]
@@ -858,7 +861,7 @@ class TablaMantenimientoMenuComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: TablaMantenimientoMenuComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento-menu", inputs: { objThis: "objThis", nombreColeccion: "nombreColeccion", item: "item", derechosActuales: "derechosActuales", subItems: "subItems", botonTemplate: "botonTemplate" }, outputs: { opcionSelecionada: "opcionSelecionada" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual w-full\">\n        <ng-container *ngFor=\"let btn of subItems\">\n            <ng-container *ngTemplateOutlet=\"botonTemplate; context:{btn: btn, item: objThis['seleccionados'][nombreColeccion], barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: TablaMantenimientoMenuComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento-menu", inputs: { objThis: "objThis", nombreColeccion: "nombreColeccion", item: "item", derechosActuales: "derechosActuales", subItems: "subItems", botonTemplate: "botonTemplate" }, outputs: { opcionSelecionada: "opcionSelecionada" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual w-full\">\n        <ng-container *ngFor=\"let btn of subItems\">\n            <ng-container *ngTemplateOutlet=\"botonTemplate; context:{btn: btn, item: objThis['seleccionados'][nombreColeccion], barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoMenuComponent, decorators: [{
             type: Component,
@@ -1162,6 +1165,10 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
                     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;
                 }
             });
@@ -1236,18 +1243,20 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
     }
     get objVisibleColumns() {
         return this.columnasTabla.filter(column => {
-            if (column.visible == undefined) {
-                column.visible = true;
+            if (column.noMostrar != undefined) {
+                column.noMostrarEnLista = column.noMostrar;
             }
+            return !tipoValorFuncion(column.noMostrarEnLista, false);
+        }).filter(column => {
+            // SECCION MODIFICADOR
             if (this.filaExtraTemplate) {
                 column.sort = false;
             }
-            if (column.esVisible != undefined) {
+            // Fin SECCION MODIFICADOR
+            column.visible = tipoValorFuncion(column.visible, true);
+            if (!column.visible && column.esVisible != undefined) {
                 column.visible = column.esVisible();
             }
-            if (column.noMostrar != undefined) {
-                column.visible = !column.noMostrar();
-            }
             return column.visible;
         });
     }
@@ -1339,14 +1348,24 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         this.cdRef.detectChanges();
         this.columnDefs.forEach(columnDef => {
             this.table.addColumnDef(columnDef);
-            // this.cdRef.detectChanges();
+            const col = this.columnasTabla.find(col => col.property == columnDef.name);
+            if (col && col.type == 'custom') {
+                console.warn(JSON.stringify(col));
+                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) {
+        console.warn(changes);
         if (changes['botonesCRUD'] || changes['ctrlBusqueda']) {
             this.actualizarCrud();
         }
@@ -1698,10 +1717,10 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         // this.accionRecargar.emit({ ...this.opcFiltroActual, ...{seleccionado: this.objSeleccionado}});
     }
     tipoValorFuncion = tipoValorFuncion;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$2.Overlay }, { token: i0.ViewContainerRef }, { token: TablaMantenimientoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$3.Overlay }, { token: i0.ViewContainerRef }, { token: TablaMantenimientoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: TablaMantenimientoComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento", inputs: { virtualScroll: "virtualScroll", itemSize: "itemSize", headerize: "headerize", dataSuscription: "dataSuscription", objThis: "objThis", nombreColeccion: "nombreColeccion", ctrlBusquedaValue: "ctrlBusquedaValue", ctrlBusquedaPlaceholder: "ctrlBusquedaPlaceholder", filtroCampos: "filtroCampos", paginador: "paginador", esTabla: "esTabla", readOnly: "readOnly", filaExtraHeader: "filaExtraHeader", filaFooter: "filaFooter", botonesCRUD: "botonesCRUD", objBotonesCRUD: "objBotonesCRUD", classSeleccionado: "classSeleccionado", classAnulado: "classAnulado", campoAnulado: "campoAnulado", campoAnuladoMensaje: "campoAnuladoMensaje", filaExtraTemplate: "filaExtraTemplate", exportarExcel: "exportarExcel", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", derechosActuales: "derechosActuales", ctrlBusqueda: "ctrlBusqueda", leyenda: "leyenda", idTabla: "idTabla", columnasTabla: "columnasTabla", botonesMenu: "botonesMenu", condicionesClaseFila: "condicionesClaseFila", soloIconos: "soloIconos" }, outputs: { dblclickItem: "dblclickItem", opcionSelecionada: "opcionSelecionada", opcBusqueda: "opcBusqueda", accionRecargar: "accionRecargar", dataSourceChange: "dataSourceChange", resultados: "resultados", resultadosConLabel: "resultadosConLabel", dataFiltro: "dataFiltro" }, host: { properties: { "id": "this.id" }, classAttribute: "jvs-tabla-mantenimiento" }, providers: [
             { provide: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: { formFieldAppearance: 'outline' } }
-        ], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "rowFooter", first: true, predicate: MatFooterRow, descendants: true, read: ElementRef }, { propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }, { propertyName: "rows", predicate: MatRow, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-fit\">\n    <div class=\"grow flex items-center justify-between bg-white\">\n        <ng-content select=\"[filtro]\"></ng-content>\n    </div>\n\n    <div class=\"flex flex-col border-t\">\n        <div class=\"flex-1 bg-app-bar flex items-center justify-between p-1\">\n            <!--        <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">-->\n            <!--        </div>-->\n            <div class=\"flex items-center flex-wrap mr-1 h-full\" *ngIf=\"leyenda\">\n                <span class=\"font-bold\" [class]=\"leyenda.class\">{{ leyenda.text }}</span>\n            </div>\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.izquierda ?? []).length > 0 \" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.izquierda; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.izquierda?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.crud ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.crud; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.crud?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.principal ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.principal; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.principal?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.derecha ?? []).length > 0\" class=\"flex-auto flex items-center justify-end contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.derecha; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.derecha?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n                <ng-content select=\"[objetosMenuPegado]\"></ng-content>\n            </div>\n            <div class=\"flex flex-1 sm:hidden items-center flex-wrap gap-1\">\n                <button class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matRipple\n                    matTooltip=\"Botones de Acci\u00F3n\"\n                    type=\"button\"\n                    [matMenuTriggerFor]=\"menuOpciones\"\n                >\n                    <mat-icon class=\"icon-xs\" svgIcon=\"roundMenu\"></mat-icon>\n                </button>\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <div class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                    <ng-content select=\"[objetosMenu]\"></ng-content>\n                </div>\n            </div>\n            <div *ngIf=\"ctrlBusqueda\" class=\"hidden flex-initial sm:flex items-center form-input  max-w-[150px] bg-card rounded-full border m-1 px-1 border-l-2\"\n            >\n                <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n                <input [formControl]=\"cCampoBusqueda\"\n                    class=\"text-xs px-1 py-1 border-0 outline-none w-full bg-transparent max-w-sm\"\n                    [placeholder]=\"ctrlBusquedaPlaceholder\"\n                    (keyup.enter)=\"ctrlBusqueda == 'query' ? cargarData() : false;\"\n                    type=\"search\">\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <ng-content select=\"[botonesFiltro]\"></ng-content>\n                <button matRipple *ngIf=\"isRecargarUsed || ctrlBusqueda == 'query'\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-green-700\"\n                    matTooltip=\"Actualizar datos\"\n                    (click)=\"(ctrlBusqueda == 'query' ? cargarData() : emitirAccionRecargar())\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n                </button>\n                <button matRipple [matMenuTriggerFor]=\"columnFilterMenu\" *ngIf=\"filtroCampos\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matTooltip=\"Columnas Filtro\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundFilterList\" class=\"icon-xs\"></mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div *ngIf=\"(botonesMenuFinal.secundario ?? []).length > 0\" class=\"flex-1 bg-app-bar flex items-center justify-between p-1 border-t\">\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.secundario; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.secundario?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!--<div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <pre>{{ this.chkLista.modelosChk | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.cantidadActivos | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.algunosActivos | json }}</pre>\n        </div>-->\n        <div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n\n            <table [id]=\"'tabla_' + nombreColeccion\" [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"true\"\n                [hidden]=\"!esTabla\"\n                class=\"flex-1 table-mantenimiento table-auto h-fit\" mat-table matSort\n                [trackBy]=\"trackByFn\"\n                #tablaMantenimiento\n            >\n\n                <!--<table [dataSource]=\"dataSource\" class=\"table-mantenimiento table-auto h-auto w-full justify-center\" mat-table matSort>-->\n\n\n                <ng-content select=\"[tableDefinitions]\"></ng-content>\n                <ng-container matColumnDef=\"numeracion_automatica\">\n                    <th mat-header-cell *matHeaderCellDef style=\"width: 16px !important\">N\u00BA</th>\n                    <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"p-0 celda-numeracion-fila\">\n                        <div class=\"flex items-center justify-center font-bold numeracionFila\">\n                            <ng-container *ngIf=\"esTabla && paginador\">\n                                {{ (this.paginator?.pageIndex == 0 ? i + 1 : 1 + i + (this.paginator?.pageIndex ?? 1) * (this.paginator?.pageSize ?? 1)) }}\n                            </ng-container>\n                            <ng-container *ngIf=\"!paginador\">\n                                {{ (i + 1) }}\n                            </ng-container>\n                        </div>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef class=\"uppercase\"></td>\n                </ng-container>\n                <jvs-tabla-mantenimiento-column-defs [objThis]=\"this\" [colDetalle]=\"columnasTabla\"\n                    [nombreColeccion]=\"nombreColeccion\" [(chkLista)]=\"chkLista\"></jvs-tabla-mantenimiento-column-defs>\n\n                <tr *matHeaderRowDef=\"visibleColumns; sticky: true\" mat-header-row class=\"title\" matHeader\n                    [style.height.px]=\"placeholderHeight\"\n                ></tr>\n\n                <ng-container *ngIf=\"!!filaExtraHeader\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n                        [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                    ></tr>\n\n                    <ng-container matColumnDef=\"filaExtraHeader\">\n                        <td mat-cell *matCellDef=\"let row; let i = dataIndex\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"(i == 0 && filaExtraHeader.esVisible && filaExtraHeader.esVisible()) ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container *ngIf=\"filaExtraHeader.template\"\n                                    [ngTemplateOutlet]=\"filaExtraHeader.template\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"filaFooter\">\n                    <tr *matFooterRowDef=\"visibleColumns\" mat-footer-row\n                        [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                        [id]=\"nombreColeccion + '_filaFooter'\"\n                    ></tr>\n                </ng-container>\n\n                <!--\t<tr\n                        *matRowDef=\"let row; columns: visibleColumns;\"\n                        class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n                        mat-row></tr>-->\n                <tr\n                    [matRowKeyboardSelection]=\"tablaMantenimiento\"\n                    [rowModel]=\"row\"\n                    (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n                    *matRowDef=\"let row; columns: visibleColumns;\"\n                    (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver'});\"\n                    (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n                    (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n                    [ngClass]=\"classFila(row)\"\n                    @fadeInUp\n                    class=\"trans-ease-out cursor-pointer h-auto\"\n                    [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                    [id]=\"propiedadSeleccion(row)\"\n                    [matTooltip]=\"row[campoAnuladoMensaje ?? '']\"\n                    matTooltipPosition=\"below\"\n                    matTooltipClass=\"bg-red-700 text-red-100 m-0\"\n                    [matTooltipDisabled]=\"!campoAnuladoMensaje || !row[campoAnuladoMensaje]\"\n                    [class.regAnulado]=\"row[campoAnulado ?? ''] == 1\"\n                    (keyup.delete)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'eliminar'})\"\n                    mat-row></tr>\n                <ng-container *ngIf=\"filaExtraTemplate\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"student-detail-row h-0\"></tr>\n\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"row.isExpanded ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container [ngTemplateOutlet]=\"filaExtraTemplate\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n            </table>\n\n            <ng-container *ngIf=\"componenteCargadoTotalmente\">\n                <div *ngIf=\"(noData | async) && esTabla\" class=\"flex-1 text-center text-secondary font-medium\">\n                    No se encontraron datos\n                </div>\n            </ng-container>\n        </div>\n        <ng-content select=\"[appendTable]\"></ng-content>\n        <div class=\"flex-1 bg-app-bar flex flex-col sm:flex-row items-start justify-between p-1\">\n            <div class=\"flex-1 flex items-start flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n\n            <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n            </div>\n        </div>\n    </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let column of columnasTabla\">\n        <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!column.noMostrar || !column.noMostrar()\"\n            class=\"checkbox-item mat-menu-item\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n                <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n    <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n    <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n        <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n        <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n        <!--\t\t</button>-->\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button matRipple [matRippleUnbounded]=\"false\" class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n                [class]=\"(btn.class?btn.class:'')\"\n\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n                [class]=\"(btn.class?btn.class:'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n            </button>\n\n        </ng-container>\n\n    </ng-container>\n    <ng-template #noBarraSuperior>\n\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n            >\n                <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n                >\n                    <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n                        class=\"flex-none icon-xs\"\n                    ></mat-icon>\n                    <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n                </div>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n                <mat-divider></mat-divider>\n            </ng-container>\n            <ng-template #itemsNormales>\n                <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                    *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                    [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                    [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                    [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                    (click)=\"opcMenu(item, btn)\"\n                >\n                    <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n                        <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n                        ></mat-icon>\n                        <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    </div>\n                </button>\n            </ng-template>\n\n        </ng-container>\n\n    </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n        <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n            <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n        <ng-container\n            *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n    </ng-container>\n</mat-menu>\n", styles: [":root{--tabla-mantenimiento-seleccion-fondo: rgb(179, 217, 252);--tabla-mantenimiento-seleccion-texto: rgb(1, 84, 164);--mat-paginator-container-size: 30px}:root .table-mantenimiento .elemento-seleccionado{background-color:var(--tabla-mantenimiento-seleccion-fondo)!important;color:var(--tabla-mantenimiento-seleccion-texto)!important;border-color:var(--tabla-mantenimiento-seleccion-texto)!important}.jvs-tabla-mantenimiento{width:inherit}.jvs-tabla-mantenimiento .contenedor-botones>*:first-child{@apply rounded-l;}.jvs-tabla-mantenimiento .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}.jvs-tabla-mantenimiento .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}.jvs-tabla-mantenimiento .mat-mdc-menu-panel{min-height:auto!important}.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-cell,.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}.jvs-tabla-mantenimiento .table-container{max-height:600px!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}.jvs-tabla-mantenimiento .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}.jvs-tabla-mantenimiento .table-mantenimiento th .form-input{@apply w-auto;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}.jvs-tabla-mantenimiento .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i9.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TablaMantenimientoColumnDefsComponent, selector: "jvs-tabla-mantenimiento-column-defs", inputs: ["objThis", "nombreColeccion", "colDetalle", "chkLista"], outputs: ["chkListaChange"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TablaMantenimientoMenuComponent, selector: "jvs-tabla-mantenimiento-menu", inputs: ["objThis", "nombreColeccion", "item", "derechosActuales", "subItems", "botonTemplate"], outputs: ["opcionSelecionada"] }, { kind: "directive", type: MatRowKeyboardSelectionDirective, selector: "[matRowKeyboardSelection]", inputs: ["matRowKeyboardSelection", "rowModel"], outputs: ["seleccionarSiguiente"] }], animations: [
+        ], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "rowFooter", first: true, predicate: MatFooterRow, descendants: true, read: ElementRef }, { propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }, { propertyName: "rows", predicate: MatRow, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-fit\">\n    <div class=\"grow flex items-center justify-between bg-white\">\n        <ng-content select=\"[filtro]\"></ng-content>\n    </div>\n\n    <div class=\"flex flex-col border-t\">\n        <div class=\"flex-1 bg-app-bar flex items-center justify-between p-1\">\n            <!--        <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">-->\n            <!--        </div>-->\n            <div class=\"flex items-center flex-wrap mr-1 h-full\" *ngIf=\"leyenda\">\n                <span class=\"font-bold\" [class]=\"leyenda.class\">{{ leyenda.text }}</span>\n            </div>\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.izquierda ?? []).length > 0 \" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.izquierda; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.izquierda?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.crud ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.crud; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.crud?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.principal ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.principal; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.principal?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.derecha ?? []).length > 0\" class=\"flex-auto flex items-center justify-end contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.derecha; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.derecha?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n                <ng-content select=\"[objetosMenuPegado]\"></ng-content>\n            </div>\n            <div class=\"flex flex-1 sm:hidden items-center flex-wrap gap-1\">\n                <button class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matRipple\n                    matTooltip=\"Botones de Acci\u00F3n\"\n                    type=\"button\"\n                    [matMenuTriggerFor]=\"menuOpciones\"\n                >\n                    <mat-icon class=\"icon-xs\" svgIcon=\"roundMenu\"></mat-icon>\n                </button>\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <div class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                    <ng-content select=\"[objetosMenu]\"></ng-content>\n                </div>\n            </div>\n            <div *ngIf=\"ctrlBusqueda\" class=\"hidden flex-initial sm:flex items-center form-input  max-w-[150px] bg-card rounded-full border m-1 px-1 border-l-2\"\n            >\n                <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n                <input [formControl]=\"cCampoBusqueda\"\n                    class=\"text-xs px-1 py-1 border-0 outline-none w-full bg-transparent max-w-sm\"\n                    [placeholder]=\"ctrlBusquedaPlaceholder\"\n                    (keyup.enter)=\"ctrlBusqueda == 'query' ? cargarData() : false;\"\n                    type=\"search\">\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <ng-content select=\"[botonesFiltro]\"></ng-content>\n                <button matRipple *ngIf=\"isRecargarUsed || ctrlBusqueda == 'query'\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-green-700\"\n                    matTooltip=\"Actualizar datos\"\n                    (click)=\"(ctrlBusqueda == 'query' ? cargarData() : emitirAccionRecargar())\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n                </button>\n                <button matRipple [matMenuTriggerFor]=\"columnFilterMenu\" *ngIf=\"filtroCampos\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matTooltip=\"Columnas Filtro\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundFilterList\" class=\"icon-xs\"></mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div *ngIf=\"(botonesMenuFinal.secundario ?? []).length > 0\" class=\"flex-1 bg-app-bar flex items-center justify-between p-1 border-t\">\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.secundario; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.secundario?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!--<div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <pre>{{ this.chkLista.modelosChk | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.cantidadActivos | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.algunosActivos | json }}</pre>\n        </div>-->\n        <div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n\n            <table [id]=\"'tabla_' + nombreColeccion\" [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"true\"\n                [hidden]=\"!esTabla\"\n                class=\"flex-1 table-mantenimiento table-auto h-fit\" mat-table matSort\n                [trackBy]=\"trackByFn\"\n                #tablaMantenimiento\n            >\n\n                <!--<table [dataSource]=\"dataSource\" class=\"table-mantenimiento table-auto h-auto w-full justify-center\" mat-table matSort>-->\n\n\n                <ng-content select=\"[tableDefinitions]\"></ng-content>\n                <ng-container matColumnDef=\"numeracion_automatica\">\n                    <th mat-header-cell *matHeaderCellDef style=\"width: 16px !important\">N\u00BA</th>\n                    <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"p-0 celda-numeracion-fila\">\n                        <div class=\"flex items-center justify-center font-bold numeracionFila\">\n                            <ng-container *ngIf=\"esTabla && paginador\">\n                                {{ (this.paginator?.pageIndex == 0 ? i + 1 : 1 + i + (this.paginator?.pageIndex ?? 1) * (this.paginator?.pageSize ?? 1)) }}\n                            </ng-container>\n                            <ng-container *ngIf=\"!paginador\">\n                                {{ (i + 1) }}\n                            </ng-container>\n                        </div>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef class=\"uppercase\"></td>\n                </ng-container>\n                <jvs-tabla-mantenimiento-column-defs [objThis]=\"this\" [colDetalle]=\"columnasTabla\"\n                    [nombreColeccion]=\"nombreColeccion\" [(chkLista)]=\"chkLista\"></jvs-tabla-mantenimiento-column-defs>\n\n                <tr *matHeaderRowDef=\"visibleColumns; sticky: true\" mat-header-row class=\"title\" matHeader\n                    [style.height.px]=\"placeholderHeight\"\n                ></tr>\n\n                <ng-container *ngIf=\"!!filaExtraHeader\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n                        [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                    ></tr>\n\n                    <ng-container matColumnDef=\"filaExtraHeader\">\n                        <td mat-cell *matCellDef=\"let row; let i = dataIndex\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"(i == 0 && filaExtraHeader.esVisible && filaExtraHeader.esVisible()) ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container *ngIf=\"filaExtraHeader.template\"\n                                    [ngTemplateOutlet]=\"filaExtraHeader.template\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"filaFooter\">\n                    <tr *matFooterRowDef=\"visibleColumns\" mat-footer-row\n                        [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                        [id]=\"nombreColeccion + '_filaFooter'\"\n                    ></tr>\n                </ng-container>\n\n                <!--\t<tr\n                        *matRowDef=\"let row; columns: visibleColumns;\"\n                        class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n                        mat-row></tr>-->\n                <tr\n                    [matRowKeyboardSelection]=\"tablaMantenimiento\"\n                    [rowModel]=\"row\"\n                    (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n                    *matRowDef=\"let row; let idxTabla = dataIndex; columns: visibleColumns;\"\n                    (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver', tableDataIndex: idxTabla });\"\n                    (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n                    (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n                    [ngClass]=\"classFila(row)\"\n                    @fadeInUp\n                    class=\"trans-ease-out cursor-pointer h-auto\"\n                    [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                    [id]=\"propiedadSeleccion(row)\"\n                    [matTooltip]=\"row[campoAnuladoMensaje ?? '']\"\n                    matTooltipPosition=\"below\"\n                    matTooltipClass=\"bg-red-700 text-red-100 m-0\"\n                    [matTooltipDisabled]=\"!campoAnuladoMensaje || !row[campoAnuladoMensaje]\"\n                    [class.regAnulado]=\"row[campoAnulado ?? ''] == 1\"\n                    (keyup.delete)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'eliminar'})\"\n                    mat-row></tr>\n                <ng-container *ngIf=\"filaExtraTemplate\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"student-detail-row h-0\"></tr>\n\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"row.isExpanded ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container [ngTemplateOutlet]=\"filaExtraTemplate\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n            </table>\n\n            <ng-container *ngIf=\"componenteCargadoTotalmente\">\n                <div *ngIf=\"(noData | async) && esTabla\" class=\"flex-1 text-center text-secondary font-medium\">\n                    No se encontraron datos\n                </div>\n            </ng-container>\n        </div>\n        <ng-content select=\"[appendTable]\"></ng-content>\n        <div class=\"flex-1 bg-app-bar flex flex-col sm:flex-row items-start justify-between p-1\">\n            <div class=\"flex-1 flex items-start flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n\n            <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n            </div>\n        </div>\n    </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let column of columnasTabla\">\n        <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!tipoValorFuncion(column.noMostrarEnLista, false)\"\n            class=\"checkbox-item mat-menu-item\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n                <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n    <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n    <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n        <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n        <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n        <!--\t\t</button>-->\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button matRipple [matRippleUnbounded]=\"false\" class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n                [class]=\"(btn.class?btn.class:'')\"\n\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n                [class]=\"(btn.class?btn.class:'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n            </button>\n\n        </ng-container>\n\n    </ng-container>\n    <ng-template #noBarraSuperior>\n\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n            >\n                <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n                >\n                    <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n                        class=\"flex-none icon-xs\"\n                    ></mat-icon>\n                    <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n                </div>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n                <mat-divider></mat-divider>\n            </ng-container>\n            <ng-template #itemsNormales>\n                <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                    *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                    [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                    [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                    [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                    (click)=\"opcMenu(item, btn)\"\n                >\n                    <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n                        <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n                        ></mat-icon>\n                        <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    </div>\n                </button>\n            </ng-template>\n\n        </ng-container>\n\n    </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n        <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n            <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n        <ng-container\n            *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n    </ng-container>\n</mat-menu>\n", styles: [":root{--tabla-mantenimiento-seleccion-fondo: rgb(179, 217, 252);--tabla-mantenimiento-seleccion-texto: rgb(1, 84, 164);--mat-paginator-container-size: 30px}:root .table-mantenimiento .elemento-seleccionado{background-color:var(--tabla-mantenimiento-seleccion-fondo)!important;color:var(--tabla-mantenimiento-seleccion-texto)!important;border-color:var(--tabla-mantenimiento-seleccion-texto)!important}.jvs-tabla-mantenimiento{width:inherit}.jvs-tabla-mantenimiento .contenedor-botones>*:first-child{@apply rounded-l;}.jvs-tabla-mantenimiento .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}.jvs-tabla-mantenimiento .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}.jvs-tabla-mantenimiento .mat-mdc-menu-panel{min-height:auto!important}.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-cell,.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}.jvs-tabla-mantenimiento .table-container{max-height:600px!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}.jvs-tabla-mantenimiento .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}.jvs-tabla-mantenimiento .table-mantenimiento th .form-input{@apply w-auto;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}.jvs-tabla-mantenimiento .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i9.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TablaMantenimientoColumnDefsComponent, selector: "jvs-tabla-mantenimiento-column-defs", inputs: ["objThis", "nombreColeccion", "colDetalle", "chkLista"], outputs: ["chkListaChange"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TablaMantenimientoMenuComponent, selector: "jvs-tabla-mantenimiento-menu", inputs: ["objThis", "nombreColeccion", "item", "derechosActuales", "subItems", "botonTemplate"], outputs: ["opcionSelecionada"] }, { kind: "directive", type: MatRowKeyboardSelectionDirective, selector: "[matRowKeyboardSelection]", inputs: ["matRowKeyboardSelection", "rowModel"], outputs: ["seleccionarSiguiente"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -1765,8 +1784,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         ]),
                     ], providers: [
                         { provide: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: { formFieldAppearance: 'outline' } }
-                    ], template: "<div class=\"flex flex-col h-fit\">\n    <div class=\"grow flex items-center justify-between bg-white\">\n        <ng-content select=\"[filtro]\"></ng-content>\n    </div>\n\n    <div class=\"flex flex-col border-t\">\n        <div class=\"flex-1 bg-app-bar flex items-center justify-between p-1\">\n            <!--        <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">-->\n            <!--        </div>-->\n            <div class=\"flex items-center flex-wrap mr-1 h-full\" *ngIf=\"leyenda\">\n                <span class=\"font-bold\" [class]=\"leyenda.class\">{{ leyenda.text }}</span>\n            </div>\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.izquierda ?? []).length > 0 \" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.izquierda; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.izquierda?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.crud ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.crud; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.crud?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.principal ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.principal; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.principal?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.derecha ?? []).length > 0\" class=\"flex-auto flex items-center justify-end contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.derecha; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.derecha?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n                <ng-content select=\"[objetosMenuPegado]\"></ng-content>\n            </div>\n            <div class=\"flex flex-1 sm:hidden items-center flex-wrap gap-1\">\n                <button class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matRipple\n                    matTooltip=\"Botones de Acci\u00F3n\"\n                    type=\"button\"\n                    [matMenuTriggerFor]=\"menuOpciones\"\n                >\n                    <mat-icon class=\"icon-xs\" svgIcon=\"roundMenu\"></mat-icon>\n                </button>\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <div class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                    <ng-content select=\"[objetosMenu]\"></ng-content>\n                </div>\n            </div>\n            <div *ngIf=\"ctrlBusqueda\" class=\"hidden flex-initial sm:flex items-center form-input  max-w-[150px] bg-card rounded-full border m-1 px-1 border-l-2\"\n            >\n                <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n                <input [formControl]=\"cCampoBusqueda\"\n                    class=\"text-xs px-1 py-1 border-0 outline-none w-full bg-transparent max-w-sm\"\n                    [placeholder]=\"ctrlBusquedaPlaceholder\"\n                    (keyup.enter)=\"ctrlBusqueda == 'query' ? cargarData() : false;\"\n                    type=\"search\">\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <ng-content select=\"[botonesFiltro]\"></ng-content>\n                <button matRipple *ngIf=\"isRecargarUsed || ctrlBusqueda == 'query'\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-green-700\"\n                    matTooltip=\"Actualizar datos\"\n                    (click)=\"(ctrlBusqueda == 'query' ? cargarData() : emitirAccionRecargar())\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n                </button>\n                <button matRipple [matMenuTriggerFor]=\"columnFilterMenu\" *ngIf=\"filtroCampos\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matTooltip=\"Columnas Filtro\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundFilterList\" class=\"icon-xs\"></mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div *ngIf=\"(botonesMenuFinal.secundario ?? []).length > 0\" class=\"flex-1 bg-app-bar flex items-center justify-between p-1 border-t\">\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.secundario; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.secundario?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!--<div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <pre>{{ this.chkLista.modelosChk | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.cantidadActivos | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.algunosActivos | json }}</pre>\n        </div>-->\n        <div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n\n            <table [id]=\"'tabla_' + nombreColeccion\" [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"true\"\n                [hidden]=\"!esTabla\"\n                class=\"flex-1 table-mantenimiento table-auto h-fit\" mat-table matSort\n                [trackBy]=\"trackByFn\"\n                #tablaMantenimiento\n            >\n\n                <!--<table [dataSource]=\"dataSource\" class=\"table-mantenimiento table-auto h-auto w-full justify-center\" mat-table matSort>-->\n\n\n                <ng-content select=\"[tableDefinitions]\"></ng-content>\n                <ng-container matColumnDef=\"numeracion_automatica\">\n                    <th mat-header-cell *matHeaderCellDef style=\"width: 16px !important\">N\u00BA</th>\n                    <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"p-0 celda-numeracion-fila\">\n                        <div class=\"flex items-center justify-center font-bold numeracionFila\">\n                            <ng-container *ngIf=\"esTabla && paginador\">\n                                {{ (this.paginator?.pageIndex == 0 ? i + 1 : 1 + i + (this.paginator?.pageIndex ?? 1) * (this.paginator?.pageSize ?? 1)) }}\n                            </ng-container>\n                            <ng-container *ngIf=\"!paginador\">\n                                {{ (i + 1) }}\n                            </ng-container>\n                        </div>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef class=\"uppercase\"></td>\n                </ng-container>\n                <jvs-tabla-mantenimiento-column-defs [objThis]=\"this\" [colDetalle]=\"columnasTabla\"\n                    [nombreColeccion]=\"nombreColeccion\" [(chkLista)]=\"chkLista\"></jvs-tabla-mantenimiento-column-defs>\n\n                <tr *matHeaderRowDef=\"visibleColumns; sticky: true\" mat-header-row class=\"title\" matHeader\n                    [style.height.px]=\"placeholderHeight\"\n                ></tr>\n\n                <ng-container *ngIf=\"!!filaExtraHeader\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n                        [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                    ></tr>\n\n                    <ng-container matColumnDef=\"filaExtraHeader\">\n                        <td mat-cell *matCellDef=\"let row; let i = dataIndex\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"(i == 0 && filaExtraHeader.esVisible && filaExtraHeader.esVisible()) ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container *ngIf=\"filaExtraHeader.template\"\n                                    [ngTemplateOutlet]=\"filaExtraHeader.template\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"filaFooter\">\n                    <tr *matFooterRowDef=\"visibleColumns\" mat-footer-row\n                        [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                        [id]=\"nombreColeccion + '_filaFooter'\"\n                    ></tr>\n                </ng-container>\n\n                <!--\t<tr\n                        *matRowDef=\"let row; columns: visibleColumns;\"\n                        class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n                        mat-row></tr>-->\n                <tr\n                    [matRowKeyboardSelection]=\"tablaMantenimiento\"\n                    [rowModel]=\"row\"\n                    (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n                    *matRowDef=\"let row; columns: visibleColumns;\"\n                    (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver'});\"\n                    (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n                    (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n                    [ngClass]=\"classFila(row)\"\n                    @fadeInUp\n                    class=\"trans-ease-out cursor-pointer h-auto\"\n                    [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                    [id]=\"propiedadSeleccion(row)\"\n                    [matTooltip]=\"row[campoAnuladoMensaje ?? '']\"\n                    matTooltipPosition=\"below\"\n                    matTooltipClass=\"bg-red-700 text-red-100 m-0\"\n                    [matTooltipDisabled]=\"!campoAnuladoMensaje || !row[campoAnuladoMensaje]\"\n                    [class.regAnulado]=\"row[campoAnulado ?? ''] == 1\"\n                    (keyup.delete)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'eliminar'})\"\n                    mat-row></tr>\n                <ng-container *ngIf=\"filaExtraTemplate\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"student-detail-row h-0\"></tr>\n\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"row.isExpanded ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container [ngTemplateOutlet]=\"filaExtraTemplate\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n            </table>\n\n            <ng-container *ngIf=\"componenteCargadoTotalmente\">\n                <div *ngIf=\"(noData | async) && esTabla\" class=\"flex-1 text-center text-secondary font-medium\">\n                    No se encontraron datos\n                </div>\n            </ng-container>\n        </div>\n        <ng-content select=\"[appendTable]\"></ng-content>\n        <div class=\"flex-1 bg-app-bar flex flex-col sm:flex-row items-start justify-between p-1\">\n            <div class=\"flex-1 flex items-start flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n\n            <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n            </div>\n        </div>\n    </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let column of columnasTabla\">\n        <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!column.noMostrar || !column.noMostrar()\"\n            class=\"checkbox-item mat-menu-item\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n                <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n    <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n    <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n        <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n        <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n        <!--\t\t</button>-->\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button matRipple [matRippleUnbounded]=\"false\" class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n                [class]=\"(btn.class?btn.class:'')\"\n\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n                [class]=\"(btn.class?btn.class:'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n            </button>\n\n        </ng-container>\n\n    </ng-container>\n    <ng-template #noBarraSuperior>\n\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n            >\n                <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n                >\n                    <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n                        class=\"flex-none icon-xs\"\n                    ></mat-icon>\n                    <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n                </div>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n                <mat-divider></mat-divider>\n            </ng-container>\n            <ng-template #itemsNormales>\n                <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                    *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                    [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                    [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                    [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                    (click)=\"opcMenu(item, btn)\"\n                >\n                    <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n                        <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n                        ></mat-icon>\n                        <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    </div>\n                </button>\n            </ng-template>\n\n        </ng-container>\n\n    </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n        <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n            <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n        <ng-container\n            *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n    </ng-container>\n</mat-menu>\n", styles: [":root{--tabla-mantenimiento-seleccion-fondo: rgb(179, 217, 252);--tabla-mantenimiento-seleccion-texto: rgb(1, 84, 164);--mat-paginator-container-size: 30px}:root .table-mantenimiento .elemento-seleccionado{background-color:var(--tabla-mantenimiento-seleccion-fondo)!important;color:var(--tabla-mantenimiento-seleccion-texto)!important;border-color:var(--tabla-mantenimiento-seleccion-texto)!important}.jvs-tabla-mantenimiento{width:inherit}.jvs-tabla-mantenimiento .contenedor-botones>*:first-child{@apply rounded-l;}.jvs-tabla-mantenimiento .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}.jvs-tabla-mantenimiento .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}.jvs-tabla-mantenimiento .mat-mdc-menu-panel{min-height:auto!important}.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-cell,.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}.jvs-tabla-mantenimiento .table-container{max-height:600px!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}.jvs-tabla-mantenimiento .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}.jvs-tabla-mantenimiento .table-mantenimiento th .form-input{@apply w-auto;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}.jvs-tabla-mantenimiento .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$2.Overlay }, { type: i0.ViewContainerRef }, { type: TablaMantenimientoService }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+                    ], template: "<div class=\"flex flex-col h-fit\">\n    <div class=\"grow flex items-center justify-between bg-white\">\n        <ng-content select=\"[filtro]\"></ng-content>\n    </div>\n\n    <div class=\"flex flex-col border-t\">\n        <div class=\"flex-1 bg-app-bar flex items-center justify-between p-1\">\n            <!--        <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">-->\n            <!--        </div>-->\n            <div class=\"flex items-center flex-wrap mr-1 h-full\" *ngIf=\"leyenda\">\n                <span class=\"font-bold\" [class]=\"leyenda.class\">{{ leyenda.text }}</span>\n            </div>\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.izquierda ?? []).length > 0 \" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.izquierda; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.izquierda?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.crud ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.crud; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.crud?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.principal ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.principal; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.principal?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.derecha ?? []).length > 0\" class=\"flex-auto flex items-center justify-end contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.derecha; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.derecha?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n                <ng-content select=\"[objetosMenuPegado]\"></ng-content>\n            </div>\n            <div class=\"flex flex-1 sm:hidden items-center flex-wrap gap-1\">\n                <button class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matRipple\n                    matTooltip=\"Botones de Acci\u00F3n\"\n                    type=\"button\"\n                    [matMenuTriggerFor]=\"menuOpciones\"\n                >\n                    <mat-icon class=\"icon-xs\" svgIcon=\"roundMenu\"></mat-icon>\n                </button>\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <div class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                    <ng-content select=\"[objetosMenu]\"></ng-content>\n                </div>\n            </div>\n            <div *ngIf=\"ctrlBusqueda\" class=\"hidden flex-initial sm:flex items-center form-input  max-w-[150px] bg-card rounded-full border m-1 px-1 border-l-2\"\n            >\n                <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n                <input [formControl]=\"cCampoBusqueda\"\n                    class=\"text-xs px-1 py-1 border-0 outline-none w-full bg-transparent max-w-sm\"\n                    [placeholder]=\"ctrlBusquedaPlaceholder\"\n                    (keyup.enter)=\"ctrlBusqueda == 'query' ? cargarData() : false;\"\n                    type=\"search\">\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <ng-content select=\"[botonesFiltro]\"></ng-content>\n                <button matRipple *ngIf=\"isRecargarUsed || ctrlBusqueda == 'query'\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-green-700\"\n                    matTooltip=\"Actualizar datos\"\n                    (click)=\"(ctrlBusqueda == 'query' ? cargarData() : emitirAccionRecargar())\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n                </button>\n                <button matRipple [matMenuTriggerFor]=\"columnFilterMenu\" *ngIf=\"filtroCampos\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matTooltip=\"Columnas Filtro\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundFilterList\" class=\"icon-xs\"></mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div *ngIf=\"(botonesMenuFinal.secundario ?? []).length > 0\" class=\"flex-1 bg-app-bar flex items-center justify-between p-1 border-t\">\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.secundario; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.secundario?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!--<div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <pre>{{ this.chkLista.modelosChk | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.cantidadActivos | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.algunosActivos | json }}</pre>\n        </div>-->\n        <div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n\n            <table [id]=\"'tabla_' + nombreColeccion\" [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"true\"\n                [hidden]=\"!esTabla\"\n                class=\"flex-1 table-mantenimiento table-auto h-fit\" mat-table matSort\n                [trackBy]=\"trackByFn\"\n                #tablaMantenimiento\n            >\n\n                <!--<table [dataSource]=\"dataSource\" class=\"table-mantenimiento table-auto h-auto w-full justify-center\" mat-table matSort>-->\n\n\n                <ng-content select=\"[tableDefinitions]\"></ng-content>\n                <ng-container matColumnDef=\"numeracion_automatica\">\n                    <th mat-header-cell *matHeaderCellDef style=\"width: 16px !important\">N\u00BA</th>\n                    <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"p-0 celda-numeracion-fila\">\n                        <div class=\"flex items-center justify-center font-bold numeracionFila\">\n                            <ng-container *ngIf=\"esTabla && paginador\">\n                                {{ (this.paginator?.pageIndex == 0 ? i + 1 : 1 + i + (this.paginator?.pageIndex ?? 1) * (this.paginator?.pageSize ?? 1)) }}\n                            </ng-container>\n                            <ng-container *ngIf=\"!paginador\">\n                                {{ (i + 1) }}\n                            </ng-container>\n                        </div>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef class=\"uppercase\"></td>\n                </ng-container>\n                <jvs-tabla-mantenimiento-column-defs [objThis]=\"this\" [colDetalle]=\"columnasTabla\"\n                    [nombreColeccion]=\"nombreColeccion\" [(chkLista)]=\"chkLista\"></jvs-tabla-mantenimiento-column-defs>\n\n                <tr *matHeaderRowDef=\"visibleColumns; sticky: true\" mat-header-row class=\"title\" matHeader\n                    [style.height.px]=\"placeholderHeight\"\n                ></tr>\n\n                <ng-container *ngIf=\"!!filaExtraHeader\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n                        [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                    ></tr>\n\n                    <ng-container matColumnDef=\"filaExtraHeader\">\n                        <td mat-cell *matCellDef=\"let row; let i = dataIndex\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"(i == 0 && filaExtraHeader.esVisible && filaExtraHeader.esVisible()) ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container *ngIf=\"filaExtraHeader.template\"\n                                    [ngTemplateOutlet]=\"filaExtraHeader.template\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"filaFooter\">\n                    <tr *matFooterRowDef=\"visibleColumns\" mat-footer-row\n                        [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                        [id]=\"nombreColeccion + '_filaFooter'\"\n                    ></tr>\n                </ng-container>\n\n                <!--\t<tr\n                        *matRowDef=\"let row; columns: visibleColumns;\"\n                        class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n                        mat-row></tr>-->\n                <tr\n                    [matRowKeyboardSelection]=\"tablaMantenimiento\"\n                    [rowModel]=\"row\"\n                    (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n                    *matRowDef=\"let row; let idxTabla = dataIndex; columns: visibleColumns;\"\n                    (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver', tableDataIndex: idxTabla });\"\n                    (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n                    (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n                    [ngClass]=\"classFila(row)\"\n                    @fadeInUp\n                    class=\"trans-ease-out cursor-pointer h-auto\"\n                    [style.height.px]=\"(virtualScroll ? (itemSize ? itemSize : 0) : 0)\"\n                    [id]=\"propiedadSeleccion(row)\"\n                    [matTooltip]=\"row[campoAnuladoMensaje ?? '']\"\n                    matTooltipPosition=\"below\"\n                    matTooltipClass=\"bg-red-700 text-red-100 m-0\"\n                    [matTooltipDisabled]=\"!campoAnuladoMensaje || !row[campoAnuladoMensaje]\"\n                    [class.regAnulado]=\"row[campoAnulado ?? ''] == 1\"\n                    (keyup.delete)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'eliminar'})\"\n                    mat-row></tr>\n                <ng-container *ngIf=\"filaExtraTemplate\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"student-detail-row h-0\"></tr>\n\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"row.isExpanded ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container [ngTemplateOutlet]=\"filaExtraTemplate\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n            </table>\n\n            <ng-container *ngIf=\"componenteCargadoTotalmente\">\n                <div *ngIf=\"(noData | async) && esTabla\" class=\"flex-1 text-center text-secondary font-medium\">\n                    No se encontraron datos\n                </div>\n            </ng-container>\n        </div>\n        <ng-content select=\"[appendTable]\"></ng-content>\n        <div class=\"flex-1 bg-app-bar flex flex-col sm:flex-row items-start justify-between p-1\">\n            <div class=\"flex-1 flex items-start flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n\n            <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n            </div>\n        </div>\n    </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let column of columnasTabla\">\n        <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!tipoValorFuncion(column.noMostrarEnLista, false)\"\n            class=\"checkbox-item mat-menu-item\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n                <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n    <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n    <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n        <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n        <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n        <!--\t\t</button>-->\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button matRipple [matRippleUnbounded]=\"false\" class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n                [class]=\"(btn.class?btn.class:'')\"\n\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n                [class]=\"(btn.class?btn.class:'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n            </button>\n\n        </ng-container>\n\n    </ng-container>\n    <ng-template #noBarraSuperior>\n\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n            >\n                <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n                >\n                    <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n                        class=\"flex-none icon-xs\"\n                    ></mat-icon>\n                    <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n                </div>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n                <mat-divider></mat-divider>\n            </ng-container>\n            <ng-template #itemsNormales>\n                <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                    *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                    [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                    [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                    [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                    (click)=\"opcMenu(item, btn)\"\n                >\n                    <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n                        <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n                        ></mat-icon>\n                        <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    </div>\n                </button>\n            </ng-template>\n\n        </ng-container>\n\n    </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n        <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n            <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n        <ng-container\n            *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n    </ng-container>\n</mat-menu>\n", styles: [":root{--tabla-mantenimiento-seleccion-fondo: rgb(179, 217, 252);--tabla-mantenimiento-seleccion-texto: rgb(1, 84, 164);--mat-paginator-container-size: 30px}:root .table-mantenimiento .elemento-seleccionado{background-color:var(--tabla-mantenimiento-seleccion-fondo)!important;color:var(--tabla-mantenimiento-seleccion-texto)!important;border-color:var(--tabla-mantenimiento-seleccion-texto)!important}.jvs-tabla-mantenimiento{width:inherit}.jvs-tabla-mantenimiento .contenedor-botones>*:first-child{@apply rounded-l;}.jvs-tabla-mantenimiento .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}.jvs-tabla-mantenimiento .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}.jvs-tabla-mantenimiento .mat-mdc-menu-panel{min-height:auto!important}.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-cell,.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}.jvs-tabla-mantenimiento .table-container{max-height:600px!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}.jvs-tabla-mantenimiento .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}.jvs-tabla-mantenimiento .table-mantenimiento th .form-input{@apply w-auto;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}.jvs-tabla-mantenimiento .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$3.Overlay }, { type: i0.ViewContainerRef }, { type: TablaMantenimientoService }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: HostBinding
             }], virtualScroll: [{
                 type: Input
@@ -1932,6 +1951,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Output
             }] } });
 
+class MenuComponent {
+    cssBoton;
+    title;
+    disabled = false;
+    itemSeleccion;
+    menu = [];
+    action = new EventEmitter();
+    matmenus;
+    menuItems = [];
+    yet = false;
+    _submenus = []; // 🔥 Tipo explícito como Array de Array de BotonMenu
+    get submenus() {
+        return this._submenus.filter(() => true); // Mantiene la estructura, aunque no hace filtro real
+    }
+    ngOnInit() {
+        this.createSubmenus(this.menu, 's0', 1);
+        this.reindex();
+    }
+    ngAfterViewInit() {
+        // Previene errores de Angular al repintar el menú
+        setTimeout(() => {
+            this.yet = true;
+        });
+    }
+    onClick(value) {
+        this.action.emit(value);
+    }
+    getMenu(index) {
+        return index >= 0 && this.matmenus ? this.matmenus.get(index) ?? null : null;
+    }
+    reindex() {
+        // Asigna el índice del ítem del menú
+        this._submenus.forEach((menu) => {
+            menu.forEach((item) => {
+                if (item.idxOpcionCalc !== -1) {
+                    item.idxOpcionCalc = this.menuItems.indexOf(item.valorSeleccion ?? '');
+                }
+            });
+        });
+    }
+    createSubmenus(menu, prefix, count) {
+        this.menuItems.push(prefix);
+        this._submenus.push(menu.map((item, index) => ({
+            ...item,
+            valorSeleccion: item.subItems ? `${prefix}${index}` : item.valorSeleccion,
+            idxOpcionCalc: item.subItems ? 0 : -1,
+        })));
+        // Llamada recursiva para crear submenús
+        menu.forEach((item, index) => {
+            if (item.subItems) {
+                this.createSubmenus(item.subItems, `${prefix}${index}`, count + 1);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: MenuComponent, isStandalone: true, selector: "jvs-menu", inputs: { cssBoton: "cssBoton", title: "title", disabled: "disabled", itemSeleccion: "itemSeleccion", menu: "menu" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "matmenus", predicate: MatMenu, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"yet\">\n    <button matRipple [matMenuTriggerFor]=\"matmenus.first\"\n        [disabled]=\"disabled\"\n        type=\"button\" [class]=\"cssBoton ?? 'boton-circular boton-circular-red border-0'\"\n        (click)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\n        [matTooltip]=\"title\"\n    >\n        <ng-content></ng-content>\n    </button>\n</ng-container>\n\n<!--<pre  class=\"text-indigo-900\">{{_submenus | json}}</pre>-->\n<ng-container *ngFor=\"let menu of _submenus\">\n    <!--<pre  class=\"text-red-700\">{{menu | json}}</pre>-->\n    <mat-menu xPosition=\"before\" yPosition=\"below\" class=\"max-w-none\">\n        <ng-container *ngFor=\"let item of menu\">\n            <!--<pre *ngIf=\"menu$\" class=\"text-orange-700\">{{item | json}}</pre>-->\n            <!--<span>{{ [item.label, item.idxOpcionCalc!=-1 , yet , (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion})), [!item.esVisible , (item.esVisible ? item.esVisible({itemMenu: item, archivo: itemSeleccion}) : 'NO HAY')]] | json }}</span>-->\n            <button mat-menu-item *ngIf=\"item.idxOpcionCalc!=-1 && yet && (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion}))\"\n                class=\"flex items-center justify-items-center uppercase w-full rounded-none px-2 \"\n                [matMenuTriggerFor]=\"getMenu(item.idxOpcionCalc)\">\n                <mat-icon *ngIf=\"item.icono\"\n                    class=\"flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs\"\n                    [svgIcon]=\"item.icono ?? 'fa5sFileSignature'\"\n                ></mat-icon>\n                <span class=\"grow text-2xs\" [innerHTML]=\"item.label\">{{item.label}}</span>\n            </button>\n            <button mat-menu-item *ngIf=\"item.idxOpcionCalc==-1 && (!item.esVisible || item.esVisible(item))\" (click)=\"onClick(item.valorSeleccion)\"\n                class=\"flex items-center justify-items-center uppercase w-full rounded-none px-2 \"\n            >\n                <mat-icon *ngIf=\"item.icono\"\n                    class=\"flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs\"\n                    [svgIcon]=\"item.icono ?? 'fa5sFileSignature'\"\n                ></mat-icon>\n                <span class=\"grow text-2xs\" [innerHTML]=\"item.label\">{{item.label}} </span>\n            </button>\n\n        </ng-container>\n    </mat-menu>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-menu', standalone: true, imports: [
+                        CommonModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        MatRippleModule,
+                        MatTooltipModule,
+                    ], template: "<ng-container *ngIf=\"yet\">\n    <button matRipple [matMenuTriggerFor]=\"matmenus.first\"\n        [disabled]=\"disabled\"\n        type=\"button\" [class]=\"cssBoton ?? 'boton-circular boton-circular-red border-0'\"\n        (click)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\n        [matTooltip]=\"title\"\n    >\n        <ng-content></ng-content>\n    </button>\n</ng-container>\n\n<!--<pre  class=\"text-indigo-900\">{{_submenus | json}}</pre>-->\n<ng-container *ngFor=\"let menu of _submenus\">\n    <!--<pre  class=\"text-red-700\">{{menu | json}}</pre>-->\n    <mat-menu xPosition=\"before\" yPosition=\"below\" class=\"max-w-none\">\n        <ng-container *ngFor=\"let item of menu\">\n            <!--<pre *ngIf=\"menu$\" class=\"text-orange-700\">{{item | json}}</pre>-->\n            <!--<span>{{ [item.label, item.idxOpcionCalc!=-1 , yet , (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion})), [!item.esVisible , (item.esVisible ? item.esVisible({itemMenu: item, archivo: itemSeleccion}) : 'NO HAY')]] | json }}</span>-->\n            <button mat-menu-item *ngIf=\"item.idxOpcionCalc!=-1 && yet && (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion}))\"\n                class=\"flex items-center justify-items-center uppercase w-full rounded-none px-2 \"\n                [matMenuTriggerFor]=\"getMenu(item.idxOpcionCalc)\">\n                <mat-icon *ngIf=\"item.icono\"\n                    class=\"flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs\"\n                    [svgIcon]=\"item.icono ?? 'fa5sFileSignature'\"\n                ></mat-icon>\n                <span class=\"grow text-2xs\" [innerHTML]=\"item.label\">{{item.label}}</span>\n            </button>\n            <button mat-menu-item *ngIf=\"item.idxOpcionCalc==-1 && (!item.esVisible || item.esVisible(item))\" (click)=\"onClick(item.valorSeleccion)\"\n                class=\"flex items-center justify-items-center uppercase w-full rounded-none px-2 \"\n            >\n                <mat-icon *ngIf=\"item.icono\"\n                    class=\"flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs\"\n                    [svgIcon]=\"item.icono ?? 'fa5sFileSignature'\"\n                ></mat-icon>\n                <span class=\"grow text-2xs\" [innerHTML]=\"item.label\">{{item.label}} </span>\n            </button>\n\n        </ng-container>\n    </mat-menu>\n</ng-container>\n" }]
+        }], propDecorators: { cssBoton: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], itemSeleccion: [{
+                type: Input
+            }], menu: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], matmenus: [{
+                type: ViewChildren,
+                args: [MatMenu]
+            }] } });
+
 // export {};
 // import './src/styles.scss';
 
@@ -1939,5 +2041,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DialogFlotanteComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, ProgressBarComponent, TablaMantenimientoComponent, TablaMantenimientoService };
+export { DialogFlotanteComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, MenuComponent, ProgressBarComponent, TablaMantenimientoComponent, TablaMantenimientoService };
 //# sourceMappingURL=jvsoft-components.mjs.map