@jvsoft/components 0.0.2 → 0.0.3

package/fesm2022/jvsoft-components.mjs

@@ -1,39 +1,41 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, Injectable, Pipe, ViewChildren, Optional, ViewChild, HostListener, Directive, ElementRef, ContentChildren, HostBinding } from '@angular/core';
-import { MatDialogTitle, MatDialogClose, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
-import * as i4 from '@angular/material/icon';
-import { MatIcon, MatIconModule } from '@angular/material/icon';
-import * as i2 from '@angular/common';
-import { CommonModule, NgIf, NgTemplateOutlet, NgClass, DecimalPipe, NgForOf } from '@angular/common';
+import { EventEmitter, Output, Input, Component, Injectable, ViewChild, Optional, inject, Pipe, NgModule, ContentChildren, ViewChildren, HostListener, Directive, ElementRef, HostBinding } from '@angular/core';
+import * as i3 from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry, MatIcon } from '@angular/material/icon';
+import * as i1 from '@angular/common';
+import { CommonModule, DecimalPipe, NgIf, NgForOf } from '@angular/common';
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i5 from '@angular/material/core';
 import { MatRipple, MatRippleModule } from '@angular/material/core';
-import * as i6$1 from '@angular/material/divider';
+import * as i6 from '@angular/material/divider';
 import { MatDivider, MatDividerModule } from '@angular/material/divider';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { BehaviorSubject, Subject, takeUntil, of, fromEvent } from 'rxjs';
-import * as i1 from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/cdk/overlay';
 import { __decorate } from 'tslib';
-import * as i1$2 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, Validators, FormControl, FormGroup } from '@angular/forms';
-import * as i3 from '@angular/material/checkbox';
+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 i9 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator, MAT_PAGINATOR_DEFAULT_OPTIONS } from '@angular/material/paginator';
-import * as i6 from '@angular/material/sort';
+import * as i3$1 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
-import * as i12 from '@angular/material/table';
-import { MatTableModule, MatColumnDef, MatTableDataSource, MatTable, MatFooterRow, MatRow } from '@angular/material/table';
-import * as i7 from '@angular/material/tooltip';
+import * as i2$1 from '@angular/material/table';
+import { MatColumnDef, MatTable, MatTableModule, MatTableDataSource, MatFooterRow, MatRow } from '@angular/material/table';
+import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import shortHash from 'shorthash2';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { map, filter, take } from 'rxjs/operators';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import * as i1$1 from '@angular/platform-browser';
+import * as i1$2 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import * as i14 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import moment from 'moment';
@@ -61,9 +63,14 @@ class DialogFlotanteComponent {
         return this._btnCerrar;
     }
     set btnCerrar(val) {
-        this._btnCerrar = (typeof val === 'string' && val !== '') ? { ...this.defaultBtnCerrar, label: val } :
-            (typeof val === 'boolean' && val) ? this.defaultBtnCerrar :
-                val ?? this.defaultBtnCerrar;
+        if (val == null || val === '') {
+            this._btnCerrar = this.defaultBtnCerrar;
+        }
+        else {
+            this._btnCerrar = (typeof val === 'string' && val !== '') ? { ...this.defaultBtnCerrar, label: val } :
+                (typeof val === 'boolean' && val) ? this.defaultBtnCerrar :
+                    val ?? this.defaultBtnCerrar;
+        }
     }
     _btnCerrarBarra = true;
     get btnCerrarBarra() {
@@ -109,17 +116,21 @@ class DialogFlotanteComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DialogFlotanteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DialogFlotanteComponent, isStandalone: true, selector: "[jvsDialogFlotante]", inputs: { cssClases: "cssClases", sinTitulo: "sinTitulo", sinBarraDeAccion: "sinBarraDeAccion", btnCerrar: "btnCerrar", btnCerrarBarra: "btnCerrarBarra", btnGuardar: "btnGuardar", iconoTitulo: "iconoTitulo", matDialogRefActual: "matDialogRefActual" }, outputs: { btnGuardarClick: "btnGuardarClick", btnCerrarClick: "btnCerrarClick" }, host: { classAttribute: "jvs-dialog-flotante" }, ngImport: i0, template: "<ng-container *ngIf=\"sinTitulo; else conTitulo\">\n    <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n</ng-container>\n\n<ng-template #conTitulo>\n    <div cdkDrag class=\"block h-full\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragBoundary=\"body\">\n        <div class=\"flex-auto flex items-center justify-between hover:cursor-move gap-1\"\n            [ngClass]=\"cssClases['titulo'] ?? 'bg-primary text-primary-contrast'\"\n            mat-dialog-title cdkDragHandle>\n\n            <mat-icon *ngIf=\"iconoTitulo\" class=\"flex-none icon-xs\" [svgIcon]=\"iconoTitulo\"></mat-icon>\n            <ng-content select=\"[tituloImagen]\"></ng-content>\n            <h5 class=\"flex-1 m-0\">\n                <ng-content select=\"[titulo]\"></ng-content>\n            </h5>\n            <ng-content select=\"[selectTitulo]\"></ng-content>\n\n            <ng-container *ngIf=\"btnCerrar || btnCerrarBarra\">\n                <button matRipple class=\"flex items-center justify-center ml-2 h-6 w-6 bg-red-700 rounded-md text-white\"\n                    type=\"button\" [mat-dialog-close]=\"!matDialogRefActual\"\n                    (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n                    <mat-icon svgIcon=\"roundClose\"></mat-icon>\n                </button>\n            </ng-container>\n        </div>\n\n        <mat-divider class=\"flex-auto bg-primary\"></mat-divider>\n        <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #parteComun>\n    <mat-dialog-content class=\"flex-1\">\n        <div class=\"contenedor-cuerpo py-2\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n        </div>\n    </mat-dialog-content>\n\n    <mat-dialog-actions class=\"flex-auto flex items-center justify-between gap-1\" *ngIf=\"!sinBarraDeAccion\">\n        <div class=\"flex items-start justify-start gap-1\">\n            <ng-content select=\"[pieIzquierda]\"></ng-content>\n        </div>\n        <div class=\"flex items-center justify-center gap-1\">\n            <ng-content select=\"[pieCentro]\"></ng-content>\n        </div>\n        <div class=\"flex items-end justify-end gap-1\">\n            <ng-content select=\"[pieDerecha]\"></ng-content>\n\n            <!-- Bot\u00F3n Guardar -->\n            <button matRipple *ngIf=\"btnGuardar\" type=\"submit\"\n                class=\"boton-dialog-flotante\" [ngClass]=\"btnGuardar.class\"\n                [class]=\"cssClases['btnGuardar']\" (click)=\"guardarDialogo()\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"btnGuardar?.icono ?? ''\"></mat-icon>\n                <span>{{ btnGuardar.label }}</span>\n            </button>\n\n            <!-- Bot\u00F3n Cerrar -->\n            <button matRipple *ngIf=\"btnCerrar\" type=\"button\"\n                class=\"boton-dialog-flotante\" [ngClass]=\"btnCerrar.class\"\n                [mat-dialog-close]=\"!matDialogRefActual\" (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n                <mat-icon class=\"icon-xs\" svgIcon=\"roundClose\"></mat-icon>\n                <span>{{ btnCerrar.label }}</span>\n            </button>\n        </div>\n    </mat-dialog-actions>\n</ng-template>\n", styles: ["@tailwind base;@tailwind components;@tailwind utilities;:host fieldset{@apply w-full sm:w-auto rounded-sm bg-transparent pt-0 pb-1 px-1 border;}:host fieldset legend{@apply px-2 font-bold border-0 bg-transparent;width:auto}:host .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-form-field{color:unset}:host .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:focus:focus:not(:checked):not(:indeterminate)~.mdc-checkbox__background{border-color:var(--color-prnpx tailwindcss init --fullimary-contrast)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DialogFlotanteComponent, isStandalone: true, selector: "[jvsDialogFlotante]", inputs: { cssClases: "cssClases", sinTitulo: "sinTitulo", sinBarraDeAccion: "sinBarraDeAccion", btnCerrar: "btnCerrar", btnCerrarBarra: "btnCerrarBarra", btnGuardar: "btnGuardar", iconoTitulo: "iconoTitulo", matDialogRefActual: "matDialogRefActual" }, outputs: { btnGuardarClick: "btnGuardarClick", btnCerrarClick: "btnCerrarClick" }, host: { classAttribute: "jvs-dialog-flotante" }, ngImport: i0, template: "<ng-container *ngIf=\"sinTitulo; else conTitulo\">\n    <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n</ng-container>\n\n<ng-template #conTitulo>\n    <div cdkDrag class=\"block h-full\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragBoundary=\"body\">\n        <div class=\"flex-auto flex items-center justify-between hover:cursor-move gap-1\"\n            [ngClass]=\"cssClases['titulo'] ?? 'bg-primary text-primary-contrast'\"\n            mat-dialog-title cdkDragHandle>\n\n            <mat-icon *ngIf=\"iconoTitulo\" class=\"flex-none icon-xs\" [svgIcon]=\"iconoTitulo\"></mat-icon>\n            <ng-content select=\"[tituloImagen]\"></ng-content>\n            <h5 class=\"flex-1 m-0\">\n                <ng-content select=\"[titulo]\"></ng-content>\n            </h5>\n            <ng-content select=\"[selectTitulo]\"></ng-content>\n\n            <ng-container *ngIf=\"btnCerrar || btnCerrarBarra\">\n                <button matRipple class=\"flex items-center justify-center ml-2 h-6 w-6 bg-red-700 rounded-md text-white\"\n                    type=\"button\" [mat-dialog-close]=\"!matDialogRefActual\"\n                    (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n                    <mat-icon svgIcon=\"roundClose\"></mat-icon>\n                </button>\n            </ng-container>\n        </div>\n\n        <mat-divider class=\"flex-auto bg-primary\"></mat-divider>\n        <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #parteComun>\n    <mat-dialog-content class=\"flex-1\">\n        <div class=\"contenedor-cuerpo\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n        </div>\n    </mat-dialog-content>\n\n    <mat-dialog-actions class=\"flex-auto flex items-center justify-between gap-1 pt-0 mt-0\" *ngIf=\"!sinBarraDeAccion\">\n        <div class=\"flex items-start justify-start gap-1\">\n            <ng-content select=\"[pieIzquierda]\"></ng-content>\n        </div>\n        <div class=\"flex items-center justify-center gap-1\">\n            <ng-content select=\"[pieCentro]\"></ng-content>\n        </div>\n        <div class=\"flex items-end justify-end gap-1\">\n            <ng-content select=\"[pieDerecha]\"></ng-content>\n\n            <!-- Bot\u00F3n Guardar -->\n            <button matRipple *ngIf=\"btnGuardar\" type=\"submit\"\n                class=\"boton-dialog-flotante\" [ngClass]=\"btnGuardar.class\"\n                [class]=\"cssClases['btnGuardar']\" (click)=\"guardarDialogo()\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"btnGuardar?.icono ?? ''\"></mat-icon>\n                <span>{{ btnGuardar.label }}</span>\n            </button>\n\n            <!-- Bot\u00F3n Cerrar -->\n            <button matRipple *ngIf=\"btnCerrar\" type=\"button\"\n                class=\"boton-dialog-flotante\" [ngClass]=\"btnCerrar.class\"\n                [mat-dialog-close]=\"!matDialogRefActual\" (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n                <mat-icon class=\"icon-xs\" svgIcon=\"roundClose\"></mat-icon>\n                <span>{{ btnCerrar.label }}</span>\n            </button>\n        </div>\n    </mat-dialog-actions>\n</ng-template>\n", styles: [".jvs-dialog-flotante fieldset{@apply w-full sm:w-auto rounded-sm bg-transparent pt-0 pb-1 px-1 border;}.jvs-dialog-flotante fieldset legend{@apply px-2 font-bold border-0 bg-transparent;width:auto}.jvs-dialog-flotante .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-form-field{color:unset}.jvs-dialog-flotante .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:focus:focus:not(:checked):not(:indeterminate)~.mdc-checkbox__background{border-color:var(--color-prnpx tailwindcss init --fullimary-contrast)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DialogFlotanteComponent, decorators: [{
             type: Component,
             args: [{ selector: '[jvsDialogFlotante]', imports: [
                         CommonModule,
-                        MatIcon, NgIf, NgTemplateOutlet, CdkDrag, MatDialogTitle, CdkDragHandle, MatDialogClose,
-                        MatRipple, MatDivider, MatDialogContent, MatDialogActions, NgClass
+                        MatIconModule,
+                        MatDialogModule,
+                        CdkDrag,
+                        CdkDragHandle,
+                        MatRipple,
+                        MatDivider,
                     ], host: {
                         class: 'jvs-dialog-flotante',
-                    }, template: "<ng-container *ngIf=\"sinTitulo; else conTitulo\">\n    <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n</ng-container>\n\n<ng-template #conTitulo>\n    <div cdkDrag class=\"block h-full\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragBoundary=\"body\">\n        <div class=\"flex-auto flex items-center justify-between hover:cursor-move gap-1\"\n            [ngClass]=\"cssClases['titulo'] ?? 'bg-primary text-primary-contrast'\"\n            mat-dialog-title cdkDragHandle>\n\n            <mat-icon *ngIf=\"iconoTitulo\" class=\"flex-none icon-xs\" [svgIcon]=\"iconoTitulo\"></mat-icon>\n            <ng-content select=\"[tituloImagen]\"></ng-content>\n            <h5 class=\"flex-1 m-0\">\n                <ng-content select=\"[titulo]\"></ng-content>\n            </h5>\n            <ng-content select=\"[selectTitulo]\"></ng-content>\n\n            <ng-container *ngIf=\"btnCerrar || btnCerrarBarra\">\n                <button matRipple class=\"flex items-center justify-center ml-2 h-6 w-6 bg-red-700 rounded-md text-white\"\n                    type=\"button\" [mat-dialog-close]=\"!matDialogRefActual\"\n                    (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n                    <mat-icon svgIcon=\"roundClose\"></mat-icon>\n                </button>\n            </ng-container>\n        </div>\n\n        <mat-divider class=\"flex-auto bg-primary\"></mat-divider>\n        <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #parteComun>\n    <mat-dialog-content class=\"flex-1\">\n        <div class=\"contenedor-cuerpo py-2\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n        </div>\n    </mat-dialog-content>\n\n    <mat-dialog-actions class=\"flex-auto flex items-center justify-between gap-1\" *ngIf=\"!sinBarraDeAccion\">\n        <div class=\"flex items-start justify-start gap-1\">\n            <ng-content select=\"[pieIzquierda]\"></ng-content>\n        </div>\n        <div class=\"flex items-center justify-center gap-1\">\n            <ng-content select=\"[pieCentro]\"></ng-content>\n        </div>\n        <div class=\"flex items-end justify-end gap-1\">\n            <ng-content select=\"[pieDerecha]\"></ng-content>\n\n            <!-- Bot\u00F3n Guardar -->\n            <button matRipple *ngIf=\"btnGuardar\" type=\"submit\"\n                class=\"boton-dialog-flotante\" [ngClass]=\"btnGuardar.class\"\n                [class]=\"cssClases['btnGuardar']\" (click)=\"guardarDialogo()\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"btnGuardar?.icono ?? ''\"></mat-icon>\n                <span>{{ btnGuardar.label }}</span>\n            </button>\n\n            <!-- Bot\u00F3n Cerrar -->\n            <button matRipple *ngIf=\"btnCerrar\" type=\"button\"\n                class=\"boton-dialog-flotante\" [ngClass]=\"btnCerrar.class\"\n                [mat-dialog-close]=\"!matDialogRefActual\" (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n                <mat-icon class=\"icon-xs\" svgIcon=\"roundClose\"></mat-icon>\n                <span>{{ btnCerrar.label }}</span>\n            </button>\n        </div>\n    </mat-dialog-actions>\n</ng-template>\n", styles: ["@tailwind base;@tailwind components;@tailwind utilities;:host fieldset{@apply w-full sm:w-auto rounded-sm bg-transparent pt-0 pb-1 px-1 border;}:host fieldset legend{@apply px-2 font-bold border-0 bg-transparent;width:auto}:host .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-form-field{color:unset}:host .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:focus:focus:not(:checked):not(:indeterminate)~.mdc-checkbox__background{border-color:var(--color-prnpx tailwindcss init --fullimary-contrast)!important}\n"] }]
+                    }, template: "<ng-container *ngIf=\"sinTitulo; else conTitulo\">\n    <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n</ng-container>\n\n<ng-template #conTitulo>\n    <div cdkDrag class=\"block h-full\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragBoundary=\"body\">\n        <div class=\"flex-auto flex items-center justify-between hover:cursor-move gap-1\"\n            [ngClass]=\"cssClases['titulo'] ?? 'bg-primary text-primary-contrast'\"\n            mat-dialog-title cdkDragHandle>\n\n            <mat-icon *ngIf=\"iconoTitulo\" class=\"flex-none icon-xs\" [svgIcon]=\"iconoTitulo\"></mat-icon>\n            <ng-content select=\"[tituloImagen]\"></ng-content>\n            <h5 class=\"flex-1 m-0\">\n                <ng-content select=\"[titulo]\"></ng-content>\n            </h5>\n            <ng-content select=\"[selectTitulo]\"></ng-content>\n\n            <ng-container *ngIf=\"btnCerrar || btnCerrarBarra\">\n                <button matRipple class=\"flex items-center justify-center ml-2 h-6 w-6 bg-red-700 rounded-md text-white\"\n                    type=\"button\" [mat-dialog-close]=\"!matDialogRefActual\"\n                    (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n                    <mat-icon svgIcon=\"roundClose\"></mat-icon>\n                </button>\n            </ng-container>\n        </div>\n\n        <mat-divider class=\"flex-auto bg-primary\"></mat-divider>\n        <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #parteComun>\n    <mat-dialog-content class=\"flex-1\">\n        <div class=\"contenedor-cuerpo\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n        </div>\n    </mat-dialog-content>\n\n    <mat-dialog-actions class=\"flex-auto flex items-center justify-between gap-1 pt-0 mt-0\" *ngIf=\"!sinBarraDeAccion\">\n        <div class=\"flex items-start justify-start gap-1\">\n            <ng-content select=\"[pieIzquierda]\"></ng-content>\n        </div>\n        <div class=\"flex items-center justify-center gap-1\">\n            <ng-content select=\"[pieCentro]\"></ng-content>\n        </div>\n        <div class=\"flex items-end justify-end gap-1\">\n            <ng-content select=\"[pieDerecha]\"></ng-content>\n\n            <!-- Bot\u00F3n Guardar -->\n            <button matRipple *ngIf=\"btnGuardar\" type=\"submit\"\n                class=\"boton-dialog-flotante\" [ngClass]=\"btnGuardar.class\"\n                [class]=\"cssClases['btnGuardar']\" (click)=\"guardarDialogo()\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"btnGuardar?.icono ?? ''\"></mat-icon>\n                <span>{{ btnGuardar.label }}</span>\n            </button>\n\n            <!-- Bot\u00F3n Cerrar -->\n            <button matRipple *ngIf=\"btnCerrar\" type=\"button\"\n                class=\"boton-dialog-flotante\" [ngClass]=\"btnCerrar.class\"\n                [mat-dialog-close]=\"!matDialogRefActual\" (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n                <mat-icon class=\"icon-xs\" svgIcon=\"roundClose\"></mat-icon>\n                <span>{{ btnCerrar.label }}</span>\n            </button>\n        </div>\n    </mat-dialog-actions>\n</ng-template>\n", styles: [".jvs-dialog-flotante fieldset{@apply w-full sm:w-auto rounded-sm bg-transparent pt-0 pb-1 px-1 border;}.jvs-dialog-flotante fieldset legend{@apply px-2 font-bold border-0 bg-transparent;width:auto}.jvs-dialog-flotante .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-form-field{color:unset}.jvs-dialog-flotante .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:focus:focus:not(:checked):not(:indeterminate)~.mdc-checkbox__background{border-color:var(--color-prnpx tailwindcss init --fullimary-contrast)!important}\n"] }]
         }], propDecorators: { cssClases: [{
                 type: Input
             }], sinTitulo: [{
@@ -179,7 +190,7 @@ class ProgressSpinnerService {
             this.overlayActivo = false;
         }, timeout * 1000); // Ajusta según sea necesario
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressSpinnerService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressSpinnerService, deps: [{ token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressSpinnerService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressSpinnerService, decorators: [{
@@ -187,7 +198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.Overlay }] });
+        }], ctorParameters: () => [{ type: i1$1.Overlay }] });
 
 class ProgressSpinnerComponent {
     progresSpinnerService;
@@ -198,15 +209,209 @@ class ProgressSpinnerComponent {
         this.progresSpinnerService = progresSpinnerService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressSpinnerComponent, deps: [{ token: ProgressSpinnerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ProgressSpinnerComponent, isStandalone: true, selector: "jvs-progress-spinner", ngImport: i0, template: "<div class=\"overlay\" [style]=\"'background-color: ' + configProgressSpiiner?.fondoStyle\">\n    <div class=\"flex flex-col justify-center items-center gap-2\">\n        <mat-spinner diameter=\"40\"></mat-spinner>\n        <div class=\"w-full\">{{ configProgressSpiiner?.mensaje }}</div>\n    </div>\n\n</div>\n", styles: ["@tailwind base;@tailwind components;@tailwind utilities;:host .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffffb3;display:flex;justify-content:center;align-items:center;z-index:1000}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ProgressSpinnerComponent, isStandalone: true, selector: "jvs-progress-spinner", ngImport: i0, template: "<div class=\"overlay\" [style]=\"'background-color: ' + configProgressSpiiner?.fondoStyle\">\n    <div class=\"flex flex-col justify-center items-center gap-2\">\n        <mat-spinner diameter=\"40\"></mat-spinner>\n        <div class=\"w-full\">{{ configProgressSpiiner?.mensaje }}</div>\n    </div>\n\n</div>\n", styles: [":host .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffffb3;display:flex;justify-content:center;align-items:center;z-index:1000}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'jvs-progress-spinner', imports: [
                         MatProgressSpinner
-                    ], template: "<div class=\"overlay\" [style]=\"'background-color: ' + configProgressSpiiner?.fondoStyle\">\n    <div class=\"flex flex-col justify-center items-center gap-2\">\n        <mat-spinner diameter=\"40\"></mat-spinner>\n        <div class=\"w-full\">{{ configProgressSpiiner?.mensaje }}</div>\n    </div>\n\n</div>\n", styles: ["@tailwind base;@tailwind components;@tailwind utilities;:host .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffffb3;display:flex;justify-content:center;align-items:center;z-index:1000}\n"] }]
+                    ], template: "<div class=\"overlay\" [style]=\"'background-color: ' + configProgressSpiiner?.fondoStyle\">\n    <div class=\"flex flex-col justify-center items-center gap-2\">\n        <mat-spinner diameter=\"40\"></mat-spinner>\n        <div class=\"w-full\">{{ configProgressSpiiner?.mensaje }}</div>\n    </div>\n\n</div>\n", styles: [":host .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffffb3;display:flex;justify-content:center;align-items:center;z-index:1000}\n"] }]
         }], ctorParameters: () => [{ type: ProgressSpinnerService }] });
 
+class ColumnTypeComponent {
+    table;
+    column;
+    columnDef;
+    columnTitleTemplate; // Permite personalizar títulos
+    columnFooterTemplate; // Permite personalizar footer
+    cellTemplate; // Se usa para el contenido de las celdas
+    constructor(table) {
+        this.table = table;
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        if (this.columnDef) {
+            this.table.addColumnDef(this.columnDef);
+        }
+    }
+    accionClick(item, event) {
+        if (this.column.click) {
+            this.column.click(item);
+            event.stopPropagation();
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeComponent, deps: [{ token: i2$1.MatTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeComponent, isStandalone: false, selector: "jvs-column-type", inputs: { column: "column", columnTitleTemplate: "columnTitleTemplate", columnFooterTemplate: "columnFooterTemplate", cellTemplate: "cellTemplate" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }], ngImport: i0, template: "<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        <ng-container *ngIf=\"columnTitleTemplate; else defaultTitle\">\n            <ng-container *ngTemplateOutlet=\"columnTitleTemplate; context: { column: column }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultTitle>\n            <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n        </ng-template>\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        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { row: row, column: column }\"></ng-container>\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        <ng-container *ngIf=\"columnFooterTemplate; else defaultFooter\">\n            <ng-container *ngTemplateOutlet=\"columnFooterTemplate; context: { column: column }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultFooter>\n            {{ column.transformarFooter ? column.transformarFooter() : '' }}\n        </ng-template>\n    </th>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-column-type', standalone: false, template: "<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        <ng-container *ngIf=\"columnTitleTemplate; else defaultTitle\">\n            <ng-container *ngTemplateOutlet=\"columnTitleTemplate; context: { column: column }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultTitle>\n            <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n        </ng-template>\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        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { row: row, column: column }\"></ng-container>\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        <ng-container *ngIf=\"columnFooterTemplate; else defaultFooter\">\n            <ng-container *ngTemplateOutlet=\"columnFooterTemplate; context: { column: column }\"></ng-container>\n        </ng-container>\n        <ng-template #defaultFooter>\n            {{ column.transformarFooter ? column.transformarFooter() : '' }}\n        </ng-template>\n    </th>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i2$1.MatTable, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { column: [{
+                type: Input,
+                args: [{ required: true }]
+            }], columnDef: [{
+                type: ViewChild,
+                args: [MatColumnDef, { static: true }]
+            }], columnTitleTemplate: [{
+                type: Input
+            }], columnFooterTemplate: [{
+                type: Input
+            }], cellTemplate: [{
+                type: Input
+            }] } });
+
+class ColumnTypeNumberComponent extends ColumnTypeComponent {
+    column = {};
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeNumberComponent, isStandalone: false, selector: "jvs-column-type-number", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "\n<ng-template #cellTemplate let-row=\"row\">\n\t\t\t\t<span *ngIf=\"column.property && row[column.property]\" class=\"!text-indigo-900 font-semibold\">\n\t\t\t\t\t{{ row[column.property] | number: (column.format ? column.format : '1.0-2') }}\n\t\t\t\t</span>\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "pipe", type: i1.DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-column-type-number', standalone: false, template: "\n<ng-template #cellTemplate let-row=\"row\">\n\t\t\t\t<span *ngIf=\"column.property && row[column.property]\" class=\"!text-indigo-900 font-semibold\">\n\t\t\t\t\t{{ row[column.property] | number: (column.format ? column.format : '1.0-2') }}\n\t\t\t\t</span>\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" }]
+        }], propDecorators: { column: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ColumnTypeDateComponent extends ColumnTypeComponent {
+    column = {};
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeDateComponent, isStandalone: false, selector: "jvs-column-type-date", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n    {{ row[column.property] | date: (column.format ? column.format : 'dd/MM/yyyy') }}\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "pipe", type: i1.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-column-type-date', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n    {{ row[column.property] | date: (column.format ? column.format : 'dd/MM/yyyy') }}\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" }]
+        }], propDecorators: { column: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+const YES_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"/></svg>
+`;
+const NO_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>
+`;
+class ColumnTypeSinoComponent extends ColumnTypeComponent {
+    column = {}; // 🟢 Solución
+    constructor() {
+        super(inject(MatTable)); // 🟢 Llamar al constructor del padre
+        const iconRegistry = inject(MatIconRegistry);
+        const sanitizer = inject(DomSanitizer);
+        // Note that we provide the icon here as a string literal here due to a limitation in
+        // Stackblitz. If you want to provide the icon from a URL, you can use:
+        // `iconRegistry.addSvgIcon('thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('icon.svg'));`
+        iconRegistry.addSvgIconLiteralInNamespace('yes_no', 'yes', sanitizer.bypassSecurityTrustHtml(YES_ICON));
+        iconRegistry.addSvgIconLiteralInNamespace('yes_no', 'no', sanitizer.bypassSecurityTrustHtml(NO_ICON));
+        // iconRegistry.addSvgIconLiteral('yesIcon', sanitizer.bypassSecurityTrustHtml(YES_ICON));
+        // iconRegistry.addSvgIconLiteral('noIcon', sanitizer.bypassSecurityTrustHtml(NO_ICON));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeSinoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeSinoComponent, isStandalone: false, selector: "jvs-column-type-sino", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n    <mat-icon *ngIf=\"[column.yesValue, 1, true].includes(row[column.property])\"\n        [svgIcon]=\"column.yesIcon ?? 'yes_no:yes'\" class=\"icon-sm\"\n        [matTooltip]=\"column.yesTooltip ?? undefined\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"[column.noValue, 0, false].includes(row[column.property])\" [svgIcon]=\"column.noIcon ?? 'yes_no:no'\"\n        class=\"icon-sm\"\n        [matTooltip]=\"column.noTooltip ?? undefined\"\n    ></mat-icon>\n    <span class=\"cdk-visually-hidden\">{{ row[column.property] }}</span>\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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: ColumnTypeSinoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-column-type-sino', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n    <mat-icon *ngIf=\"[column.yesValue, 1, true].includes(row[column.property])\"\n        [svgIcon]=\"column.yesIcon ?? 'yes_no:yes'\" class=\"icon-sm\"\n        [matTooltip]=\"column.yesTooltip ?? undefined\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"[column.noValue, 0, false].includes(row[column.property])\" [svgIcon]=\"column.noIcon ?? 'yes_no:no'\"\n        class=\"icon-sm\"\n        [matTooltip]=\"column.noTooltip ?? undefined\"\n    ></mat-icon>\n    <span class=\"cdk-visually-hidden\">{{ row[column.property] }}</span>\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" }]
+        }], ctorParameters: () => [], propDecorators: { column: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ProgressBarComponent {
+    objThis;
+    porcentaje = 0;
+    textoCentrado = false;
+    _textoMostrar = '';
+    get textoMostrar() { return this._textoMostrar; }
+    set textoMostrar(val) { this._textoMostrar = val; }
+    _formatoNumero = '';
+    get formatoNumero() { return this._formatoNumero; }
+    set formatoNumero(val) { this._formatoNumero = val ?? '1.0-0'; }
+    _coloresValor = [];
+    get coloresValor() { return this._coloresValor; }
+    set coloresValor(val) {
+        if (!val || !Array.isArray(val)) {
+            this._coloresValor = [
+                { valorMaximo: 1, class: 'p-0' },
+                { valorMaximo: 40, class: 'bg-red-400 text-red-900' },
+                // {valorMaximo: 35, class: 'bg-red-600 text-red-100'},
+                { valorMaximo: 80, class: 'bg-yellow-600 text-yellow-100' },
+                { valorMaximo: 100, class: 'bg-green-600 text-green-100' },
+            ];
+        }
+        else {
+            this._coloresValor = val;
+        }
+    }
+    constructor() { }
+    ngOnInit() {
+    }
+    colorEstilo() {
+        let estiloFin = null;
+        let claseFin = null;
+        let encontro = false;
+        this.coloresValor = this.ordenarPorPropiedad(this.coloresValor, 'valorMaximo');
+        this.coloresValor.forEach(estilo => {
+            if (!encontro && (this.porcentaje <= estilo.valorMaximo)) {
+                // console.log(this.porcentaje, estilo, (this.porcentaje < estilo.valorMaximo));
+                encontro = true;
+                estiloFin = estilo.style;
+                claseFin = estilo.class;
+            }
+        });
+        return {
+            style: estiloFin ?? '',
+            class: claseFin ?? '',
+        };
+    }
+    ordenarPorPropiedad(objData, propiedad, numeros = false) {
+        if (numeros) {
+            return objData.sort((a, b) => a[propiedad] - b[propiedad]);
+        }
+        return objData.sort((a, b) => (a[propiedad] > b[propiedad]) ? 1 : ((b[propiedad] > a[propiedad]) ? -1 : 0));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ProgressBarComponent, isStandalone: true, selector: "jvs-progress-bar", inputs: { objThis: "objThis", porcentaje: "porcentaje", textoCentrado: "textoCentrado", textoMostrar: "textoMostrar", formatoNumero: "formatoNumero", coloresValor: "coloresValor" }, host: { classAttribute: "jvs-progress-bar" }, ngImport: i0, template: "<div class=\"w-full bg-gray-200 text-gray-700 rounded-full\" [class.text-center]=\"textoCentrado\">\n\t<div class=\"text-xxs font-medium text-center p-1 leading-none rounded-full\"\n\t\t [ngClass]=\"colorEstilo().class ? colorEstilo().class : 'bg-blue-600 text-blue-100'\"\n\t\t [style]=\"colorEstilo().style ? colorEstilo().style : ''\"\n\t\t [style.width]=\"(textoCentrado ? 100 : porcentaje) + '%'\"\n\t>\n        <span *ngIf=\"textoMostrar else defaultText;\" class=\"whitespace-nowrap\">{{ textoMostrar }}</span>\n        <ng-template #defaultText>{{ porcentaje | number: formatoNumero }}%</ng-template>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-progress-bar', imports: [
+                        CommonModule,
+                        DecimalPipe
+                    ], host: {
+                        class: 'jvs-progress-bar',
+                    }, template: "<div class=\"w-full bg-gray-200 text-gray-700 rounded-full\" [class.text-center]=\"textoCentrado\">\n\t<div class=\"text-xxs font-medium text-center p-1 leading-none rounded-full\"\n\t\t [ngClass]=\"colorEstilo().class ? colorEstilo().class : 'bg-blue-600 text-blue-100'\"\n\t\t [style]=\"colorEstilo().style ? colorEstilo().style : ''\"\n\t\t [style.width]=\"(textoCentrado ? 100 : porcentaje) + '%'\"\n\t>\n        <span *ngIf=\"textoMostrar else defaultText;\" class=\"whitespace-nowrap\">{{ textoMostrar }}</span>\n        <ng-template #defaultText>{{ porcentaje | number: formatoNumero }}%</ng-template>\n    </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { objThis: [{
+                type: Input
+            }], porcentaje: [{
+                type: Input
+            }], textoCentrado: [{
+                type: Input
+            }], textoMostrar: [{
+                type: Input
+            }], formatoNumero: [{
+                type: Input
+            }], coloresValor: [{
+                type: Input
+            }] } });
+
+class ColumnTypeProgressbarComponent extends ColumnTypeComponent {
+    column = {};
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeProgressbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeProgressbarComponent, isStandalone: false, selector: "jvs-column-type-progressbar", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n    <jvs-progress-bar\n        [textoCentrado]=\"!!column.progressbar.textoCentrado\"\n        [porcentaje]=\"column.progressbar.porcentaje(row)\"\n        [coloresValor]=\"column.progressbar.coloresValor\"\n        [formatoNumero]=\"column.progressbar.formatoNumero\"\n        [textoMostrar]=\"column.progressbar.textoMostrar ? column.progressbar.textoMostrar(row) : ''\"\n    ></jvs-progress-bar>\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: ProgressBarComponent, selector: "jvs-progress-bar", inputs: ["objThis", "porcentaje", "textoCentrado", "textoMostrar", "formatoNumero", "coloresValor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeProgressbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-column-type-progressbar', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n    <jvs-progress-bar\n        [textoCentrado]=\"!!column.progressbar.textoCentrado\"\n        [porcentaje]=\"column.progressbar.porcentaje(row)\"\n        [coloresValor]=\"column.progressbar.coloresValor\"\n        [formatoNumero]=\"column.progressbar.formatoNumero\"\n        [textoMostrar]=\"column.progressbar.textoMostrar ? column.progressbar.textoMostrar(row) : ''\"\n    ></jvs-progress-bar>\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" }]
+        }], propDecorators: { column: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 class NoSanitizePipe {
     domSanitizer;
     constructor(domSanitizer) {
@@ -215,13 +420,13 @@ class NoSanitizePipe {
     transform(html) {
         return this.domSanitizer.bypassSecurityTrustHtml(html);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoSanitizePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoSanitizePipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: NoSanitizePipe, isStandalone: true, name: "noSanitize" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoSanitizePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'noSanitize' }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
 
 class ZeroFillPipe {
     transform(value, digitos, ...args) {
@@ -244,6 +449,123 @@ function zeroFill(value, digitos, ...args) {
     return new ZeroFillPipe().transform(value, digitos, args);
 }
 
+// export * from './progress-spinner.service';
+
+class ColumnTypeTextComponent extends ColumnTypeComponent {
+    column = {}; // 🟢 Solución
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeTextComponent, isStandalone: false, selector: "jvs-column-type-text", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n    <div *ngIf=\"column.innerHTML; else sinInnerHTML\" [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\"\n        [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n    </div>\n    <ng-template #sinInnerHTML>\n        <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n            <div [class]=\"column.text?.cssContenedor\">\n                <ng-container\n                    *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)\">\n                    <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                        [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-template #campoTextNormal>\n            <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }\"></ng-template>\n        </ng-template>\n    </ng-template>\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-container matColumnDef=\"{{ column.property }}\">\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<ng-container *ngIf=\"column.innerHTML; else sinInnerHTML\">\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(column, row, $event)\">\n        <div [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\"\n            [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n\n        </div>\n    </td>\n</ng-container>\n<ng-template #sinInnerHTML>\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n        <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n            <div [class]=\"column.text?.cssContenedor\">\n                <ng-container\n                    *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)\">\n                    <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                        [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-template #campoTextNormal>\n            <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }\"></ng-template>\n        </ng-template>\n    </td>\n</ng-template>\n<th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell\n    [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n</th>\n</ng-container>-->\n\n<ng-template #tipoDatoString let-row=\"row\" let-fila=\"fila\" let-tipo=\"tipo\" let-value=\"value\" let-format=\"format\"\n    let-clase=\"class\">\n    <ng-container [ngSwitch]=\"tipo\">\n        <ng-container *ngSwitchCase=\"'text'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n            (click)=\"accionClick(row, $event)\">\n            <span *ngIf=\"!fila.zeroFill\">{{ value }}</span>\n            <span *ngIf=\"fila.zeroFill\">{{ value | zeroFill: fila.zeroFill }}</span>\n        </span></ng-container>\n        <ng-container *ngSwitchCase=\"'date'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n            (click)=\"accionClick(row, $event)\">{{ value | date: (format || 'dd/MM/yyyy') }}</span></ng-container>\n        <ng-container *ngSwitchCase=\"'number'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n            (click)=\"accionClick(row, $event)\">{{ value | number: (format || '0.0-2') }}</span></ng-container>\n        <ng-container *ngSwitchCase=\"'money'\"><span [ngClass]=\"clase\"\n            [class.text-sky-700]=\"(value * 1) >= 0\" [class.text-red-700]=\"(value * 1) < 0\"\n            *ngIf=\"value\" (click)=\"accionClick(row, $event)\">{{ value | number: (format || '1.2-2') }}</span>\n        </ng-container>\n\n        <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'date'\">{{ value | date: (format || 'dd/MM/yyyy') }}</span>-->\n        <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'number'\">{{ value | number: (format || '0.0-2') }}</span>-->\n    </ng-container>\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: NoSanitizePipe, name: "noSanitize" }, { kind: "pipe", type: ZeroFillPipe, name: "zeroFill" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-column-type-text', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n    <div *ngIf=\"column.innerHTML; else sinInnerHTML\" [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\"\n        [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n    </div>\n    <ng-template #sinInnerHTML>\n        <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n            <div [class]=\"column.text?.cssContenedor\">\n                <ng-container\n                    *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)\">\n                    <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                        [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-template #campoTextNormal>\n            <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }\"></ng-template>\n        </ng-template>\n    </ng-template>\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-container matColumnDef=\"{{ column.property }}\">\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<ng-container *ngIf=\"column.innerHTML; else sinInnerHTML\">\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(column, row, $event)\">\n        <div [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\"\n            [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n\n        </div>\n    </td>\n</ng-container>\n<ng-template #sinInnerHTML>\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n        <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n            <div [class]=\"column.text?.cssContenedor\">\n                <ng-container\n                    *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : row[column.property]) ?? '').split(column.text.separador)\">\n                    <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                        [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n                </ng-container>\n            </div>\n        </ng-container>\n        <ng-template #campoTextNormal>\n            <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row }\"></ng-template>\n        </ng-template>\n    </td>\n</ng-template>\n<th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell\n    [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n</th>\n</ng-container>-->\n\n<ng-template #tipoDatoString let-row=\"row\" let-fila=\"fila\" let-tipo=\"tipo\" let-value=\"value\" let-format=\"format\"\n    let-clase=\"class\">\n    <ng-container [ngSwitch]=\"tipo\">\n        <ng-container *ngSwitchCase=\"'text'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n            (click)=\"accionClick(row, $event)\">\n            <span *ngIf=\"!fila.zeroFill\">{{ value }}</span>\n            <span *ngIf=\"fila.zeroFill\">{{ value | zeroFill: fila.zeroFill }}</span>\n        </span></ng-container>\n        <ng-container *ngSwitchCase=\"'date'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n            (click)=\"accionClick(row, $event)\">{{ value | date: (format || 'dd/MM/yyyy') }}</span></ng-container>\n        <ng-container *ngSwitchCase=\"'number'\"><span [ngClass]=\"clase\" *ngIf=\"value\"\n            (click)=\"accionClick(row, $event)\">{{ value | number: (format || '0.0-2') }}</span></ng-container>\n        <ng-container *ngSwitchCase=\"'money'\"><span [ngClass]=\"clase\"\n            [class.text-sky-700]=\"(value * 1) >= 0\" [class.text-red-700]=\"(value * 1) < 0\"\n            *ngIf=\"value\" (click)=\"accionClick(row, $event)\">{{ value | number: (format || '1.2-2') }}</span>\n        </ng-container>\n\n        <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'date'\">{{ value | date: (format || 'dd/MM/yyyy') }}</span>-->\n        <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'number'\">{{ value | number: (format || '0.0-2') }}</span>-->\n    </ng-container>\n</ng-template>\n" }]
+        }], propDecorators: { column: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ColumnTypeMoneyComponent extends ColumnTypeComponent {
+    column = {};
+    value(row) {
+        return (this.column.transformar ? this.column.transformar(row) : row[this.column.property]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeMoneyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ColumnTypeMoneyComponent, isStandalone: false, selector: "jvs-column-type-money", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n     <span [ngClass]=\"column.textCss\"\n         [class.text-sky-700]=\"(value(row)) >= 0\" [class.text-red-700]=\"(value(row)) < 0\"\n         *ngIf=\"value(row)\"\n         (click)=\"accionClick(row, $event)\">{{ value(row) | number: (column.format || '1.2-2') }}</span>\n</ng-template>\n<ng-template #columnFooterTemplate let-row=\"row\">\n\t\t<span *ngIf=\"column.transformarFooter\"\n            [class.text-sky-700]=\"column.transformarFooter() >= 0\"\n            [class.text-red-700]=\"column.transformarFooter() < 0\"\n        >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n</ng-template>\n\n<!--<jvs-column-type [column]=\"column\" [cellTemplate]=\"cellTemplate\" [columnFooterTemplate]=\"columnFooterTemplate\"></jvs-column-type>-->\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        \t\t<span *ngIf=\"column.transformarFooter\"\n                    [class.text-sky-700]=\"column.transformarFooter() >= 0\"\n                    [class.text-red-700]=\"column.transformarFooter() < 0\"\n                >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n    </th>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeMoneyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-column-type-money', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n     <span [ngClass]=\"column.textCss\"\n         [class.text-sky-700]=\"(value(row)) >= 0\" [class.text-red-700]=\"(value(row)) < 0\"\n         *ngIf=\"value(row)\"\n         (click)=\"accionClick(row, $event)\">{{ value(row) | number: (column.format || '1.2-2') }}</span>\n</ng-template>\n<ng-template #columnFooterTemplate let-row=\"row\">\n\t\t<span *ngIf=\"column.transformarFooter\"\n            [class.text-sky-700]=\"column.transformarFooter() >= 0\"\n            [class.text-red-700]=\"column.transformarFooter() < 0\"\n        >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n</ng-template>\n\n<!--<jvs-column-type [column]=\"column\" [cellTemplate]=\"cellTemplate\" [columnFooterTemplate]=\"columnFooterTemplate\"></jvs-column-type>-->\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        \t\t<span *ngIf=\"column.transformarFooter\"\n                    [class.text-sky-700]=\"column.transformarFooter() >= 0\"\n                    [class.text-red-700]=\"column.transformarFooter() < 0\"\n                >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n    </th>\n</ng-container>\n" }]
+        }], propDecorators: { column: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ColumnTypeIconsComponent extends ColumnTypeComponent {
+    column = {};
+    obtenerItems(columna, row) {
+        if (typeof columna.items === 'function') {
+            return columna.items(row);
+        }
+        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"] }] });
+}
+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" }]
+        }], propDecorators: { column: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class ColumnTypeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeModule, declarations: [ColumnTypeComponent,
+            ColumnTypeTextComponent,
+            ColumnTypeMoneyComponent,
+            ColumnTypeNumberComponent,
+            ColumnTypeDateComponent,
+            ColumnTypeIconsComponent,
+            ColumnTypeSinoComponent,
+            ColumnTypeProgressbarComponent], imports: [CommonModule,
+            MatTableModule,
+            MatSortModule,
+            MatTooltipModule,
+            NoSanitizePipe,
+            ZeroFillPipe,
+            MatRipple,
+            MatIcon,
+            ProgressBarComponent], exports: [ColumnTypeTextComponent,
+            ColumnTypeMoneyComponent,
+            ColumnTypeNumberComponent,
+            ColumnTypeDateComponent,
+            ColumnTypeIconsComponent,
+            ColumnTypeSinoComponent,
+            ColumnTypeProgressbarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeModule, imports: [CommonModule,
+            MatTableModule,
+            MatSortModule,
+            MatTooltipModule,
+            MatIcon,
+            ProgressBarComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ColumnTypeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ColumnTypeComponent,
+                        ColumnTypeTextComponent,
+                        ColumnTypeMoneyComponent,
+                        ColumnTypeNumberComponent,
+                        ColumnTypeDateComponent,
+                        ColumnTypeIconsComponent,
+                        ColumnTypeSinoComponent,
+                        ColumnTypeProgressbarComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatTableModule,
+                        MatSortModule,
+                        MatTooltipModule,
+                        NoSanitizePipe,
+                        ZeroFillPipe,
+                        MatRipple,
+                        MatIcon,
+                        ProgressBarComponent,
+                    ],
+                    exports: [
+                        ColumnTypeTextComponent,
+                        ColumnTypeMoneyComponent,
+                        ColumnTypeNumberComponent,
+                        ColumnTypeDateComponent,
+                        ColumnTypeIconsComponent,
+                        ColumnTypeSinoComponent,
+                        ColumnTypeProgressbarComponent,
+                    ]
+                }]
+        }] });
+
 class TablaMantenimientoColumnDefsComponent {
     table;
     cdRef;
@@ -252,17 +574,22 @@ class TablaMantenimientoColumnDefsComponent {
     colDetalle;
     chkLista; // = new DataModel();
     chkListaChange = new EventEmitter();
-    columnDef;
+    columnDefLocales;
+    columnDefEnSubComponentes;
     constructor(table, cdRef) {
         this.table = table;
         this.cdRef = cdRef;
-        console.log(this.chkLista);
-        // this.chkLista.checkbox.establecerTodos(true)
     }
     ngAfterContentInit() {
         if (this.table) {
+            console.log('ngAfterContentInit');
+            console.log(this.columnDefEnSubComponentes);
+            console.log(this.columnDefLocales);
             this.cdRef.detectChanges();
-            this.columnDef.forEach(refCol => {
+            this.columnDefEnSubComponentes.forEach(refCol => {
+                this.table.addColumnDef(refCol);
+            });
+            this.columnDefLocales.forEach(refCol => {
                 this.table.addColumnDef(refCol);
             });
         }
@@ -270,48 +597,8 @@ class TablaMantenimientoColumnDefsComponent {
     trackByProperty(index, column) {
         return column.property;
     }
-    verTexto(row, campo, glue = ' ') {
-        if (typeof campo == 'string') {
-            return row[campo];
-        }
-        // console.log('CARGAR TEXTO');
-        let strFinal = '';
-        const arrFinal = [];
-        campo.forEach((c) => {
-            if (c.charAt(0) == '*') {
-                arrFinal.push(c.replace('*', ''));
-            }
-            else {
-                arrFinal.push((row[c] ?? '').toString().trim());
-            }
-        });
-        strFinal = arrFinal.join(glue);
-        return strFinal;
-    }
-    camposNulos(row, campos) {
-        let rpta = false;
-        campos.forEach(campo => {
-            if (!rpta && !row[campo]) {
-                rpta = true;
-            }
-        });
-        return rpta;
-    }
-    accionClick(column, item, event) {
-        if (column.click) {
-            column.click(item);
-            event.stopPropagation();
-        }
-        return false;
-    }
-    obtenerItems(columna, row) {
-        if (typeof columna.items === 'function') {
-            return columna.items(row);
-        }
-        return columna.items;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoColumnDefsComponent, deps: [{ token: i12.MatTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.7", type: TablaMantenimientoColumnDefsComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento-column-defs", inputs: { objThis: "objThis", nombreColeccion: "nombreColeccion", colDetalle: "colDetalle", chkLista: ["chkLista", "chkLista", (value) => WritableStream] }, outputs: { chkListaChange: "chkListaChange" }, viewQueries: [{ propertyName: "columnDef", predicate: MatColumnDef, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n<ng-container *ngFor=\"let column of colDetalle; trackBy: trackByProperty\">\n\n    <ng-container *ngIf=\"column.type === 'expandir'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef class=\"w-4\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n            <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n                *ngIf=\"column.click\"\n                (click)=\"column.click(row); row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n                matTooltip=\"Expandir / Contraer\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n            </button>\n            <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n                *ngIf=\"!column.click\"\n                (click)=\"row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n                matTooltip=\"Expandir / Contraer\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n            </button>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'checkbox'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"w-4 text-center\" mat-header-cell>\n\n            <mat-checkbox *ngIf=\"chkLista\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"chkLista.checkbox.establecerTodos($event.checked)\"\n                [indeterminate]=\"chkLista.checkbox.algunosActivos\"\n                [checked]=\"chkLista.checkbox.todosActivos\"\n            ></mat-checkbox>\n        </th>\n        <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n\n            <mat-checkbox *ngIf=\"chkLista\"\n                (click)=\"$event.stopPropagation()\"\n                [(ngModel)]=\"chkLista.modelosChk[chkLista.generarId(row, (column.chkField ?? column.property), column.chkFieldSeparador)]\"\n                [ngModelOptions]=\"{standalone: true}\"\n            ></mat-checkbox>\n\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'text' || column.type === 'estiloEstablecido'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >\n            <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n            <span *ngIf=\"column.type == 'estiloEstablecido'\" class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n        </th>\n        <ng-container *ngIf=\"column.innerHTML; else sinInnerHTML\">\n            <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(column, row, $event)\">\n                <div [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\" [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n\n                </div>\n            </td>\n        </ng-container>\n        <ng-template #sinInnerHTML>\n            <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n                <!--\t\t\t<span *ngIf=\"column.property && !column.textArray\">{{ row[column.property] }}</span>-->\n                <!--\t\t\t<span *ngIf=\"column.property && column.textArray\">{{ verTexto(row, column.textArray) }}</span>-->\n                <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n                    <div [class]=\"column.text?.cssContenedor\">\n                        <ng-container *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : (column.textArray ? verTexto(row, column.textArray) : row[column.property])) ?? '').split(column.text.separador)\">\n                            <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\" [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n                        </ng-container>\n                    </div>\n                </ng-container>\n                <ng-template #campoTextNormal>\n                    <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\" [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : (column.textArray ? verTexto(row, column.textArray) : row[column.property])), class: column.textCss, row: row }\"></ng-template>\n                </ng-template>\n                <span *ngIf=\"column.type == 'estiloEstablecido'\" class=\"text-red-900 font-bold\">CONFIGURAR ESTILO ESTABLECIDO</span>\n            </td>\n        </ng-template>\n        <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n        </th>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'text_rows'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n            <p *ngFor=\"let fila of column.text_rows\" style=\"font: unset; letter-spacing: unset\">\n                <ng-container *ngIf=\"row[fila.value]\">\n                    <ng-container *ngIf=\"fila.siCampoNulo && camposNulos(row, fila.siCampoNulo)\">\n                        <span [ngClass]=\"fila.cssLabelClasses\" *ngIf=\"fila.label\">{{ fila.label }}:</span><br *ngIf=\"fila.salto\">\n                        <ng-template [ngTemplateOutlet]=\"tipoDatoString\" [ngTemplateOutletContext]=\"{ fila: fila, tipo: fila.valueType || 'text', value: (fila.textArray ? verTexto(row, fila.textArray) : row[fila.value]), format: fila.valueFormat, class: fila.cssValueClasses }\"></ng-template>\n                    </ng-container>\n                    <ng-container *ngIf=\"!fila.siCampoNulo\">\n                        <span [ngClass]=\"fila.cssLabelClasses\" *ngIf=\"fila.label\">{{ fila.label }}:</span><br *ngIf=\"fila.salto\">\n                        <ng-template [ngTemplateOutlet]=\"tipoDatoString\" [ngTemplateOutletContext]=\"{ fila: fila, tipo: fila.valueType || 'text', value: (fila.textArray ? verTexto(row, fila.textArray) : row[fila.value]), format: fila.valueFormat, class: fila.cssValueClasses }\"></ng-template>\n                    </ng-container>\n                </ng-container>\n            </p>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'money'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" class=\"text-right\" mat-cell>\n            <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                [ngTemplateOutletContext]=\"{ fila: column, tipo: 'money', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row, format: (column.format ?? '1.2-2') }\"></ng-template>\n        </td>\n        <td *matFooterCellDef class=\"text-right\" [ngClass]=\"column.cssFooterClasses\" mat-cell>\n\t\t\t\t<span *ngIf=\"column.transformarFooter\"\n                    [class.text-sky-700]=\"column.transformarFooter() >= 0\" [class.text-red-700]=\"column.transformarFooter() < 0\"\n                >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n        </td>\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'number'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n\t\t\t\t<span *ngIf=\"column.property && row[column.property]\" class=\"!text-indigo-900 font-semibold\">\n\t\t\t\t\t<span *ngIf=\"column.zeroFill\">{{ row[column.property] | zeroFill: column.zeroFill }}</span>\n\t\t\t\t\t<span *ngIf=\"!column.zeroFill\">{{ row[column.property] | number: (column.format ? column.format : '1.0-2') }}</span>\n\t\t\t\t</span>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'date'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell><span *ngIf=\"column.property\">{{ row[column.property] | date: (column.format ? column.format : 'dd/MM/yyyy') }}</span></td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'icon'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n            <ng-container [ngSwitch]=\"row[column.property]\">\n                <ng-container *ngFor=\"let opc of column.opcSwitchIcon.casos\">\n                    <mat-icon *ngSwitchCase=\"opc.case\" [ngClass]=\"opc.cssClasses\" style=\"height: unset; width: unset;\" [svgIcon]=\"opc.icon\"\n                        [matTooltip]=\"opc.campoTooltip ? row[opc.campoTooltip] : (opc.tooltip ?? '')\" [matTooltipDisabled]=\"!opc.tooltip && !opc.campoTooltip\"\n                        class=\"icon-sm\"></mat-icon>\n                </ng-container>\n                <ng-container *ngIf=\"column.opcSwitchIcon.default\">\n                    <div *ngSwitchDefault></div>\n                </ng-container>\n            </ng-container>\n            <span class=\"cdk-visually-hidden\">{{ row[column.property] }}</span>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'icon_checkbox'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" [ngClass]=\"column.headerCssClasses\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n            <mat-icon [svgIcon]=\"(row[column.property] == 1 ? 'checkboxChecked20Regular' : 'checkboxUnchecked20Regular' )\" class=\"icon-sm\"></mat-icon>\n            <span class=\"cdk-visually-hidden\">{{ row[column.property] }}</span>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'progress'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" [ngClass]=\"column.headerCssClasses\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n<!--            <jvsoft-progress-bar\n                [textoCentrado]=\"column.progressbar.textoCentrado\"\n                [porcentaje]=\"(column.progressbar.porcentaje(row))\"\n                [coloresValor]=\"column.progressbar.coloresValor\"\n                [formatoNumero]=\"column.progressbar.formatoNumero\"\n                [textoMostrar]=\"column.progressbar.textoMostrar ? column.progressbar.textoMostrar(row) : undefined\"\n            ></jvsoft-progress-bar>-->\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'buttons'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell>  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n\n            <div class=\"flex\">\n                <ng-container *ngFor=\"let field of column.fields\">\n                    <a *ngIf=\"field.href && row[field.campo]\"\n                        [href]=\"field.href.pre + row[field.campo]\"\n                        [target]=\"field.href.target ? field.href.target : '_self'\"\n                        [matTooltip]=\"row[field.campo]\"\n                        class=\"w-6 h-6 btn-rounded-30 {{field.class}}\"\n                    >\n                        <mat-icon [svgIcon]=\"field.icono\"  class=\"icon-sm\"></mat-icon>\n                    </a>\n                    <a *ngIf=\"!field.fnClick && !field.href && row[field.campo]\"\n                        (click)=\"$event.stopPropagation()\"\n                        [matTooltip]=\"row[field.campo]\"\n                        class=\"w-6 h-6  btn-rounded-30 {{field.class}}\"\n                    >\n                        <mat-icon [svgIcon]=\"field.icono\"  class=\"icon-sm\"></mat-icon>\n                    </a>\n                    <a *ngIf=\"field.fnClick && row[field.campo]\"\n                        (click)=\"objThis[field.fnClick](row, field.fnClickData); $event.stopPropagation()\"\n                        [matTooltip]=\"row[field.campo]\"\n                        class=\"w-6 h-6  btn-rounded-30 {{field.class}}\"\n                    >\n                        <mat-icon [svgIcon]=\"field.icono\" class=\"icon-sm\"></mat-icon>\n                    </a>\n                </ng-container>\n            </div>\n\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'icons'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell>  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\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\" [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\" [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            <span class=\"cdk-visually-hidden\" *ngIf=\"column.innerHTMLInvisible\" [innerHTML]=\"column.innerHTMLInvisible(row)\"></span>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n    </ng-container>\n\n\n</ng-container>\n\n<ng-template #tipoDatoString let-row=\"row\" let-fila=\"fila\" let-tipo=\"tipo\" let-value=\"value\" let-format=\"format\" let-clase=\"class\">\n    <ng-container [ngSwitch]=\"tipo\">\n        <ng-container *ngSwitchCase=\"'text'\"><span [ngClass]=\"clase\" *ngIf=\"value\" (click)=\"accionClick(fila, row, $event)\">\n            <span *ngIf=\"!fila.zeroFill\">{{ value }}</span>\n            <span *ngIf=\"fila.zeroFill\">{{ value | zeroFill: fila.zeroFill }}</span>\n        </span></ng-container>\n        <ng-container *ngSwitchCase=\"'date'\"><span [ngClass]=\"clase\" *ngIf=\"value\" (click)=\"accionClick(fila, row, $event)\" >{{ value | date: (format || 'dd/MM/yyyy') }}</span></ng-container>\n        <ng-container *ngSwitchCase=\"'number'\"><span [ngClass]=\"clase\" *ngIf=\"value\" (click)=\"accionClick(fila, row, $event)\" >{{ value | number: (format || '0.0-2') }}</span></ng-container>\n        <ng-container *ngSwitchCase=\"'money'\"><span [ngClass]=\"clase\"\n            [class.text-sky-700]=\"(value * 1) >= 0\" [class.text-red-700]=\"(value * 1) < 0\"\n            *ngIf=\"value\" (click)=\"accionClick(fila, row, $event)\" >{{ value | number: (format || '1.2-2') }}</span></ng-container>\n\n        <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'date'\">{{ value | date: (format || 'dd/MM/yyyy') }}</span>-->\n        <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'number'\">{{ value | number: (format || '0.0-2') }}</span>-->\n    </ng-container>\n</ng-template>\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", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.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: MatIconModule }, { kind: "component", type: i4.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: MatSortModule }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i12.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: NoSanitizePipe, name: "noSanitize" }, { kind: "pipe", type: ZeroFillPipe, name: "zeroFill" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoColumnDefsComponent, deps: [{ token: i2$1.MatTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: TablaMantenimientoColumnDefsComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento-column-defs", inputs: { objThis: "objThis", nombreColeccion: "nombreColeccion", colDetalle: "colDetalle", chkLista: "chkLista" }, outputs: { chkListaChange: "chkListaChange" }, queries: [{ propertyName: "columnDefEnSubComponentes", predicate: MatColumnDef, descendants: true }], viewQueries: [{ propertyName: "columnDefLocales", predicate: MatColumnDef, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n<ng-container *ngFor=\"let column of colDetalle; trackBy: trackByProperty\">\n\n    <ng-container *ngIf=\"column.type === 'expandir'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef class=\"w-4\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n            <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n                *ngIf=\"column.click\"\n                (click)=\"column.click(row); row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n                matTooltip=\"Expandir / Contraer\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n            </button>\n            <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n                *ngIf=\"!column.click\"\n                (click)=\"row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n                matTooltip=\"Expandir / Contraer\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n            </button>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'checkbox'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"w-4 text-center\" mat-header-cell>\n            <mat-checkbox *ngIf=\"chkLista\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"chkLista.checkbox.establecerTodos($event.checked)\"\n                [indeterminate]=\"chkLista.checkbox.algunosActivos\"\n                [checked]=\"chkLista.checkbox.todosActivos\"\n            ></mat-checkbox>\n        </th>\n        <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n            <mat-checkbox *ngIf=\"chkLista\"\n                (click)=\"$event.stopPropagation()\"\n                [(ngModel)]=\"chkLista.modelosChk[chkLista.generarId(row, (column.chkField ?? column.property), column.chkFieldSeparador)]\"\n                [ngModelOptions]=\"{standalone: true}\"\n            ></mat-checkbox>\n\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'estiloEstablecido'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell\n            mat-sort-header\n            [disabled]=\"column.sort === false\">\n            <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n            <span class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n        </th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n            {{ column.property }}\n            <span class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n        </td>\n        <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell\n            [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n        </th>\n\n    </ng-container>\n\n    <jvs-column-type-text  *ngIf=\"column.type == 'text'\" [column]=\"column\"></jvs-column-type-text>\n    <jvs-column-type-money *ngIf=\"column.type == 'money'\" [column]=\"column\"></jvs-column-type-money>\n    <jvs-column-type-number *ngIf=\"column.type == 'number'\" [column]=\"column\"></jvs-column-type-number>\n    <jvs-column-type-date *ngIf=\"column.type == 'date'\" [column]=\"column\"></jvs-column-type-date>\n    <jvs-column-type-icons *ngIf=\"column.type == 'icons'\" [column]=\"column\"></jvs-column-type-icons>\n    <jvs-column-type-sino *ngIf=\"column.type == 'yes_no'\" [column]=\"column\"></jvs-column-type-sino>\n    <jvs-column-type-progressbar *ngIf=\"column.type == 'progress'\" [column]=\"column\"></jvs-column-type-progressbar>\n\n\n\n</ng-container>\n", styles: [""], 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: "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: 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: MatSortModule }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { 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: "directive", type: i2$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { 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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ColumnTypeModule }, { kind: "component", type: ColumnTypeTextComponent, selector: "jvs-column-type-text", inputs: ["column"] }, { kind: "component", type: ColumnTypeMoneyComponent, selector: "jvs-column-type-money", inputs: ["column"] }, { kind: "component", type: ColumnTypeNumberComponent, selector: "jvs-column-type-number", inputs: ["column"] }, { kind: "component", type: ColumnTypeDateComponent, selector: "jvs-column-type-date", inputs: ["column"] }, { kind: "component", type: ColumnTypeIconsComponent, selector: "jvs-column-type-icons", inputs: ["column"] }, { kind: "component", type: ColumnTypeSinoComponent, selector: "jvs-column-type-sino", inputs: ["column"] }, { kind: "component", type: ColumnTypeProgressbarComponent, selector: "jvs-column-type-progressbar", inputs: ["column"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoColumnDefsComponent, decorators: [{
             type: Component,
@@ -325,10 +612,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                         MatTooltipModule,
                         ReactiveFormsModule,
                         FormsModule,
-                        NoSanitizePipe,
-                        ZeroFillPipe,
-                    ], template: "<ng-content></ng-content>\n\n\n\n<ng-container *ngFor=\"let column of colDetalle; trackBy: trackByProperty\">\n\n    <ng-container *ngIf=\"column.type === 'expandir'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef class=\"w-4\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n            <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n                *ngIf=\"column.click\"\n                (click)=\"column.click(row); row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n                matTooltip=\"Expandir / Contraer\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n            </button>\n            <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n                *ngIf=\"!column.click\"\n                (click)=\"row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n                matTooltip=\"Expandir / Contraer\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n            </button>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'checkbox'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"w-4 text-center\" mat-header-cell>\n\n            <mat-checkbox *ngIf=\"chkLista\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"chkLista.checkbox.establecerTodos($event.checked)\"\n                [indeterminate]=\"chkLista.checkbox.algunosActivos\"\n                [checked]=\"chkLista.checkbox.todosActivos\"\n            ></mat-checkbox>\n        </th>\n        <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n\n            <mat-checkbox *ngIf=\"chkLista\"\n                (click)=\"$event.stopPropagation()\"\n                [(ngModel)]=\"chkLista.modelosChk[chkLista.generarId(row, (column.chkField ?? column.property), column.chkFieldSeparador)]\"\n                [ngModelOptions]=\"{standalone: true}\"\n            ></mat-checkbox>\n\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'text' || column.type === 'estiloEstablecido'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >\n            <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n            <span *ngIf=\"column.type == 'estiloEstablecido'\" class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n        </th>\n        <ng-container *ngIf=\"column.innerHTML; else sinInnerHTML\">\n            <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(column, row, $event)\">\n                <div [class]=\"column.text?.cssContenedor\" [ngStyle]=\"column.text?.cssStyle\" class=\"hover:!max-h-max\" [innerHTML]=\"column.innerHTML(row) | noSanitize\">\n\n                </div>\n            </td>\n        </ng-container>\n        <ng-template #sinInnerHTML>\n            <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n                <!--\t\t\t<span *ngIf=\"column.property && !column.textArray\">{{ row[column.property] }}</span>-->\n                <!--\t\t\t<span *ngIf=\"column.property && column.textArray\">{{ verTexto(row, column.textArray) }}</span>-->\n                <ng-container *ngIf=\"column.text && column.text?.separador else campoTextNormal\">\n                    <div [class]=\"column.text?.cssContenedor\">\n                        <ng-container *ngFor=\"let itm of ((column.transformar ? column.transformar(row) : (column.textArray ? verTexto(row, column.textArray) : row[column.property])) ?? '').split(column.text.separador)\">\n                            <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\" [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: itm, class: column.textCss, row: row }\"></ng-template>\n                        </ng-container>\n                    </div>\n                </ng-container>\n                <ng-template #campoTextNormal>\n                    <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\" [ngTemplateOutletContext]=\"{ fila: column, tipo: 'text', value: (column.transformar ? column.transformar(row) : (column.textArray ? verTexto(row, column.textArray) : row[column.property])), class: column.textCss, row: row }\"></ng-template>\n                </ng-template>\n                <span *ngIf=\"column.type == 'estiloEstablecido'\" class=\"text-red-900 font-bold\">CONFIGURAR ESTILO ESTABLECIDO</span>\n            </td>\n        </ng-template>\n        <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n        </th>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'text_rows'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n            <p *ngFor=\"let fila of column.text_rows\" style=\"font: unset; letter-spacing: unset\">\n                <ng-container *ngIf=\"row[fila.value]\">\n                    <ng-container *ngIf=\"fila.siCampoNulo && camposNulos(row, fila.siCampoNulo)\">\n                        <span [ngClass]=\"fila.cssLabelClasses\" *ngIf=\"fila.label\">{{ fila.label }}:</span><br *ngIf=\"fila.salto\">\n                        <ng-template [ngTemplateOutlet]=\"tipoDatoString\" [ngTemplateOutletContext]=\"{ fila: fila, tipo: fila.valueType || 'text', value: (fila.textArray ? verTexto(row, fila.textArray) : row[fila.value]), format: fila.valueFormat, class: fila.cssValueClasses }\"></ng-template>\n                    </ng-container>\n                    <ng-container *ngIf=\"!fila.siCampoNulo\">\n                        <span [ngClass]=\"fila.cssLabelClasses\" *ngIf=\"fila.label\">{{ fila.label }}:</span><br *ngIf=\"fila.salto\">\n                        <ng-template [ngTemplateOutlet]=\"tipoDatoString\" [ngTemplateOutletContext]=\"{ fila: fila, tipo: fila.valueType || 'text', value: (fila.textArray ? verTexto(row, fila.textArray) : row[fila.value]), format: fila.valueFormat, class: fila.cssValueClasses }\"></ng-template>\n                    </ng-container>\n                </ng-container>\n            </p>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'money'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" class=\"text-right\" mat-cell>\n            <ng-template *ngIf=\"column.property\" [ngTemplateOutlet]=\"tipoDatoString\"\n                [ngTemplateOutletContext]=\"{ fila: column, tipo: 'money', value: (column.transformar ? column.transformar(row) : row[column.property]), class: column.textCss, row: row, format: (column.format ?? '1.2-2') }\"></ng-template>\n        </td>\n        <td *matFooterCellDef class=\"text-right\" [ngClass]=\"column.cssFooterClasses\" mat-cell>\n\t\t\t\t<span *ngIf=\"column.transformarFooter\"\n                    [class.text-sky-700]=\"column.transformarFooter() >= 0\" [class.text-red-700]=\"column.transformarFooter() < 0\"\n                >\n\t\t\t\t\t<span>{{ column.transformarFooter() | currency: column.simboloMoneda ?? 'S/' }}</span>\n\t\t\t\t</span>\n        </td>\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'number'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n\t\t\t\t<span *ngIf=\"column.property && row[column.property]\" class=\"!text-indigo-900 font-semibold\">\n\t\t\t\t\t<span *ngIf=\"column.zeroFill\">{{ row[column.property] | zeroFill: column.zeroFill }}</span>\n\t\t\t\t\t<span *ngIf=\"!column.zeroFill\">{{ row[column.property] | number: (column.format ? column.format : '1.0-2') }}</span>\n\t\t\t\t</span>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'date'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell mat-sort-header [disabled]=\"column.sort === false\" >  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell><span *ngIf=\"column.property\">{{ row[column.property] | date: (column.format ? column.format : 'dd/MM/yyyy') }}</span></td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'icon'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n            <ng-container [ngSwitch]=\"row[column.property]\">\n                <ng-container *ngFor=\"let opc of column.opcSwitchIcon.casos\">\n                    <mat-icon *ngSwitchCase=\"opc.case\" [ngClass]=\"opc.cssClasses\" style=\"height: unset; width: unset;\" [svgIcon]=\"opc.icon\"\n                        [matTooltip]=\"opc.campoTooltip ? row[opc.campoTooltip] : (opc.tooltip ?? '')\" [matTooltipDisabled]=\"!opc.tooltip && !opc.campoTooltip\"\n                        class=\"icon-sm\"></mat-icon>\n                </ng-container>\n                <ng-container *ngIf=\"column.opcSwitchIcon.default\">\n                    <div *ngSwitchDefault></div>\n                </ng-container>\n            </ng-container>\n            <span class=\"cdk-visually-hidden\">{{ row[column.property] }}</span>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'icon_checkbox'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" [ngClass]=\"column.headerCssClasses\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n            <mat-icon [svgIcon]=\"(row[column.property] == 1 ? 'checkboxChecked20Regular' : 'checkboxUnchecked20Regular' )\" class=\"icon-sm\"></mat-icon>\n            <span class=\"cdk-visually-hidden\">{{ row[column.property] }}</span>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'progress'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" [ngClass]=\"column.headerCssClasses\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n<!--            <jvsoft-progress-bar\n                [textoCentrado]=\"column.progressbar.textoCentrado\"\n                [porcentaje]=\"(column.progressbar.porcentaje(row))\"\n                [coloresValor]=\"column.progressbar.coloresValor\"\n                [formatoNumero]=\"column.progressbar.formatoNumero\"\n                [textoMostrar]=\"column.progressbar.textoMostrar ? column.progressbar.textoMostrar(row) : undefined\"\n            ></jvsoft-progress-bar>-->\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'buttons'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell>  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n\n            <div class=\"flex\">\n                <ng-container *ngFor=\"let field of column.fields\">\n                    <a *ngIf=\"field.href && row[field.campo]\"\n                        [href]=\"field.href.pre + row[field.campo]\"\n                        [target]=\"field.href.target ? field.href.target : '_self'\"\n                        [matTooltip]=\"row[field.campo]\"\n                        class=\"w-6 h-6 btn-rounded-30 {{field.class}}\"\n                    >\n                        <mat-icon [svgIcon]=\"field.icono\"  class=\"icon-sm\"></mat-icon>\n                    </a>\n                    <a *ngIf=\"!field.fnClick && !field.href && row[field.campo]\"\n                        (click)=\"$event.stopPropagation()\"\n                        [matTooltip]=\"row[field.campo]\"\n                        class=\"w-6 h-6  btn-rounded-30 {{field.class}}\"\n                    >\n                        <mat-icon [svgIcon]=\"field.icono\"  class=\"icon-sm\"></mat-icon>\n                    </a>\n                    <a *ngIf=\"field.fnClick && row[field.campo]\"\n                        (click)=\"objThis[field.fnClick](row, field.fnClickData); $event.stopPropagation()\"\n                        [matTooltip]=\"row[field.campo]\"\n                        class=\"w-6 h-6  btn-rounded-30 {{field.class}}\"\n                    >\n                        <mat-icon [svgIcon]=\"field.icono\" class=\"icon-sm\"></mat-icon>\n                    </a>\n                </ng-container>\n            </div>\n\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'icons'\" [matColumnDef]=\"column.property\" [stickyEnd]=\"column.stickyEnd\" [sticky]=\"column.sticky\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase\" mat-header-cell>  <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\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\" [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\" [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            <span class=\"cdk-visually-hidden\" *ngIf=\"column.innerHTMLInvisible\" [innerHTML]=\"column.innerHTMLInvisible(row)\"></span>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n    </ng-container>\n\n\n</ng-container>\n\n<ng-template #tipoDatoString let-row=\"row\" let-fila=\"fila\" let-tipo=\"tipo\" let-value=\"value\" let-format=\"format\" let-clase=\"class\">\n    <ng-container [ngSwitch]=\"tipo\">\n        <ng-container *ngSwitchCase=\"'text'\"><span [ngClass]=\"clase\" *ngIf=\"value\" (click)=\"accionClick(fila, row, $event)\">\n            <span *ngIf=\"!fila.zeroFill\">{{ value }}</span>\n            <span *ngIf=\"fila.zeroFill\">{{ value | zeroFill: fila.zeroFill }}</span>\n        </span></ng-container>\n        <ng-container *ngSwitchCase=\"'date'\"><span [ngClass]=\"clase\" *ngIf=\"value\" (click)=\"accionClick(fila, row, $event)\" >{{ value | date: (format || 'dd/MM/yyyy') }}</span></ng-container>\n        <ng-container *ngSwitchCase=\"'number'\"><span [ngClass]=\"clase\" *ngIf=\"value\" (click)=\"accionClick(fila, row, $event)\" >{{ value | number: (format || '0.0-2') }}</span></ng-container>\n        <ng-container *ngSwitchCase=\"'money'\"><span [ngClass]=\"clase\"\n            [class.text-sky-700]=\"(value * 1) >= 0\" [class.text-red-700]=\"(value * 1) < 0\"\n            *ngIf=\"value\" (click)=\"accionClick(fila, row, $event)\" >{{ value | number: (format || '1.2-2') }}</span></ng-container>\n\n        <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'date'\">{{ value | date: (format || 'dd/MM/yyyy') }}</span>-->\n        <!--\t\t<span [ngClass]=\"class\" *ngSwitchCase=\"'number'\">{{ value | number: (format || '0.0-2') }}</span>-->\n    </ng-container>\n</ng-template>\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" }]
-        }], ctorParameters: () => [{ type: i12.MatTable, decorators: [{
+                        ColumnTypeModule,
+                    ], template: "<ng-content></ng-content>\n\n\n\n<ng-container *ngFor=\"let column of colDetalle; trackBy: trackByProperty\">\n\n    <ng-container *ngIf=\"column.type === 'expandir'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef class=\"w-4\" mat-header-cell> <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span></th>\n        <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n            <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n                *ngIf=\"column.click\"\n                (click)=\"column.click(row); row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n                matTooltip=\"Expandir / Contraer\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n            </button>\n            <button type=\"button\" class=\"boton-circular text-primary-contrast bg-primary mat-elevation-z2\" matRipple\n                *ngIf=\"!column.click\"\n                (click)=\"row.isExpanded = !row.isExpanded; $event.stopPropagation()\"\n                matTooltip=\"Expandir / Contraer\">\n                <mat-icon class=\"icon-xs\" [svgIcon]=\"(row.isExpanded ? 'roundExpandLess' : 'roundExpandMore')\"></mat-icon>\n            </button>\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'checkbox'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"w-4 text-center\" mat-header-cell>\n            <mat-checkbox *ngIf=\"chkLista\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"chkLista.checkbox.establecerTodos($event.checked)\"\n                [indeterminate]=\"chkLista.checkbox.algunosActivos\"\n                [checked]=\"chkLista.checkbox.todosActivos\"\n            ></mat-checkbox>\n        </th>\n        <td *matCellDef=\"let row\" class=\"w-4 text-center\" mat-cell>\n            <mat-checkbox *ngIf=\"chkLista\"\n                (click)=\"$event.stopPropagation()\"\n                [(ngModel)]=\"chkLista.modelosChk[chkLista.generarId(row, (column.chkField ?? column.property), column.chkFieldSeparador)]\"\n                [ngModelOptions]=\"{standalone: true}\"\n            ></mat-checkbox>\n\n        </td>\n        <td *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell></td>\n\n    </ng-container>\n    <ng-container *ngIf=\"column.type === 'estiloEstablecido'\" [matColumnDef]=\"column.property\">\n\n        <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell\n            mat-sort-header\n            [disabled]=\"column.sort === false\">\n            <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n            <span class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n        </th>\n        <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell>\n            {{ column.property }}\n            <span class=\"text-red-900 font-bold bg-white\">CONFIGURAR ESTILO ESTABLECIDO</span>\n        </td>\n        <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" style=\"height: unset !important;\" mat-footer-cell\n            [innerHTML]=\"column.transformarFooter ? column.transformarFooter() : ''\">\n        </th>\n\n    </ng-container>\n\n    <jvs-column-type-text  *ngIf=\"column.type == 'text'\" [column]=\"column\"></jvs-column-type-text>\n    <jvs-column-type-money *ngIf=\"column.type == 'money'\" [column]=\"column\"></jvs-column-type-money>\n    <jvs-column-type-number *ngIf=\"column.type == 'number'\" [column]=\"column\"></jvs-column-type-number>\n    <jvs-column-type-date *ngIf=\"column.type == 'date'\" [column]=\"column\"></jvs-column-type-date>\n    <jvs-column-type-icons *ngIf=\"column.type == 'icons'\" [column]=\"column\"></jvs-column-type-icons>\n    <jvs-column-type-sino *ngIf=\"column.type == 'yes_no'\" [column]=\"column\"></jvs-column-type-sino>\n    <jvs-column-type-progressbar *ngIf=\"column.type == 'progress'\" [column]=\"column\"></jvs-column-type-progressbar>\n\n\n\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i2$1.MatTable, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { objThis: [{
                 type: Input
@@ -337,13 +623,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }], colDetalle: [{
                 type: Input
             }], chkLista: [{
-                type: Input,
-                args: [{ transform: (value) => WritableStream }]
+                type: Input
             }], chkListaChange: [{
                 type: Output
-            }], columnDef: [{
+            }], columnDefLocales: [{
                 type: ViewChildren,
                 args: [MatColumnDef]
+            }], columnDefEnSubComponentes: [{
+                type: ContentChildren,
+                args: [MatColumnDef, { descendants: true }]
             }] } });
 
 class TablaMantenimientoMenuComponent {
@@ -362,7 +650,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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i8.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,
@@ -832,6 +1120,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
     // FILTRO BUSQUEDA
     opcFiltroActual = {};
     capitalizarTexto = capitalizarTexto;
+    _seleccionado = {};
     cCampoBusqueda = new FormControl('');
     chkLista = new DataModel();
     constructor(fb, overlay, viewContainerRef, tablaMantenimientoService, cdRef) {
@@ -840,6 +1129,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         this.viewContainerRef = viewContainerRef;
         this.tablaMantenimientoService = tablaMantenimientoService;
         this.cdRef = cdRef;
+        // this._seleccionado[this.nombreColeccion] = null;
     }
     _ctrlBusqueda = '';
     get ctrlBusqueda() {
@@ -891,17 +1181,49 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
                         ...btnActual
                     };
                 }
-                if (!!!listaInicial[idx].text) {
-                    listaInicial[idx].text = {
-                        cssStyle: {}
-                    };
+                if (listaInicial[idx].type == 'text') {
+                    if (!listaInicial[idx].text) {
+                        listaInicial[idx].text = {
+                            cssStyle: {}
+                        };
+                    }
+                    else if (!listaInicial[idx].text.cssStyle) {
+                        listaInicial[idx].text.cssStyle = {};
+                    }
+                    listaInicial[idx].text.cssStyle = { ...listaInicial[idx].text.cssStyle, ...{ 'max-height': this.itemSize + 'px' } };
                 }
-                else if (!!!listaInicial[idx].text.cssStyle) {
-                    listaInicial[idx].text.cssStyle = {};
+                else if (listaInicial[idx].type == 'estado') {
+                    const mutar = {
+                        ...listaInicial[idx],
+                        type: 'icons',
+                        iconsDef: {
+                            soloIcono: true,
+                            iconSize: '16px',
+                            items: [
+                            // {
+                            //     icon: 'roundToggleOff', contentCss: 'text-gray-400',
+                            //     esVisible: (row) => row['iCredDepenTareaEstado'] == 0
+                            // },
+                            // {
+                            //     icon: 'roundToggleOn', contentCss: 'text-green-600',
+                            //     esVisible: (row) => row['iCredDepenTareaEstado'] == 1
+                            // },
+                            ]
+                        },
+                    };
+                    if (listaInicial[idx].estados) {
+                        listaInicial[idx].estados.forEach((estado) => {
+                            if (Array.isArray(mutar.iconsDef.items)) {
+                                mutar.iconsDef.items.push({
+                                    icon: estado.icon, contentCss: estado.cssClasses,
+                                    esVisible: (row) => row[listaInicial[idx].property] == estado.estado,
+                                });
+                            }
+                        });
+                    }
+                    listaInicial[idx] = mutar;
                 }
-                listaInicial[idx].text.cssStyle = { ...listaInicial[idx].text.cssStyle, ...{ 'max-height': this.itemSize + 'px' } };
                 if (btnActual.type == 'custom') {
-                    listaInicial[idx]['visibleAlias'] = listaInicial[idx].visible ?? true;
                     listaInicial[idx].visible = false;
                 }
             });
@@ -997,10 +1319,16 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
     get tieneCheckbox() {
         return this.columnasTabla && this.columnasTabla.length > 0 && this.columnasTabla.find(col => col.type === 'checkbox') || false;
     }
+    get buscarItemSeleccionado() {
+        return this.dataSource.data.find(itm => this._seleccionado === this.propiedadSeleccion(itm));
+    }
     get objSeleccionado() {
-        return this.objThis?.['seleccionados']?.[this.nombreColeccion];
+        return this.buscarItemSeleccionado; // ?? this.objThis?.['seleccionados']?.[this.nombreColeccion];
     }
     set objSeleccionado(val) {
+        if (val) {
+            this.seleccionarItem(val, true);
+        }
         if (!this.objThis) {
             this.objThis = {};
         }
@@ -1039,16 +1367,20 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
             this.dataSuscription.subscribe(res => {
                 if (res) {
                     if (this.objSeleccionado) {
+                        console.log('SELECCIONADO');
                         if (this.idTabla && this.idTabla.length > 0) {
+                            console.log('ID TABLA');
                             const arrayData = this.idTabla.map(d => this.objSeleccionado[d]);
-                            // console.log(arrayData);
+                            console.log(arrayData);
                             const busqueda = buscarEnArray(res, this.idTabla, arrayData);
+                            console.log(busqueda);
                             if (busqueda) {
                                 console.log(busqueda);
                                 this.objSeleccionado = busqueda;
                             }
                         }
                         else {
+                            console.log('eLSE ID TABLA');
                             const dataStr = res.find((itm) => shortHash(JSON.stringify({
                                 ...itm, claseFinal: undefined
                             })) == shortHash(JSON.stringify({ ...this.objSeleccionado, claseFinal: undefined })));
@@ -1067,14 +1399,6 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         this.componenteCargadoTotalmente = true;
         this.cdRef.detectChanges();
         this.columnDefs.forEach(columnDef => {
-            const col = this.columnasTabla.find(col => col.property == columnDef.name);
-            if (col) {
-                col.visible = col['visibleAlias'] ?? col.visible;
-                if (col['visibleAlias']) {
-                    delete col['visibleAlias'];
-                    // col['visibleAlias'] = undefined;
-                }
-            }
             this.table.addColumnDef(columnDef);
             // this.cdRef.detectChanges();
         });
@@ -1091,9 +1415,9 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
             this.agregarBotonesExportacion();
         }
     }
-    trackByFn(index, item) {
-        return this.nombreColeccion + '_' + this.idTablaValor(item);
-    }
+    trackByFn = (index, item) => {
+        return this.propiedadSeleccion(item);
+    };
     agregarBotonesExportacion() {
         const fnAddBoton = (condicion, tipoBoton) => {
             if (condicion) {
@@ -1158,7 +1482,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         if (this.campoAnulado && (item[this.campoAnulado] == 1)) {
             claseFinal = claseFinal.concat(this.classAnulado);
         }
-        if (this.objSeleccionado == item) {
+        if (this.objSeleccionado == item || this.esSeleccionActual(item)) {
             claseFinal = claseFinal.concat(this.classSeleccionado);
         }
         claseFinal = claseFinal.concat(this.condicionesClaseFila(item));
@@ -1274,7 +1598,24 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         }
         return disabled;
     }
+    propiedadSeleccion(item) {
+        return `${this.nombreColeccion}_${this.idTablaValor(item)}`;
+    }
+    esSeleccionActual(item) {
+        return this._seleccionado === this.propiedadSeleccion(item);
+    }
+    seleccionarItem(item, forzado = false) {
+        const idItem = this.propiedadSeleccion(item);
+        console.log(this._seleccionado, idItem);
+        if (forzado) {
+            this._seleccionado = idItem;
+        }
+        else {
+            this._seleccionado = this._seleccionado === idItem ? null : idItem;
+        }
+    }
     opcMenu(item, objMenu, modal = null, retorno = false) {
+        console.log(this.buscarItemSeleccionado);
         console.log(objMenu);
         // let salir = this.readOnly;
         // if (salir && this.readOnly === 'permitirSeleccion' && ['ver', 'seleccionar'].includes(objMenu.tipo)) {
@@ -1330,7 +1671,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
                                 acumulador[nColumn] = dataGeneradoPorHtml.sheetToJson[idx][columna.label];
                             }
                             else {
-                                if (columna.innerHTML) {
+                                if (columna.type == 'text' && columna.innerHTML) {
                                     const convertirHtmlATexto = (html) => {
                                         const elementoTemporal = document.createElement('div');
                                         elementoTemporal.innerHTML = html;
@@ -1417,15 +1758,27 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         this.accionRecargar.emit(this.opcFiltroActual);
         // this.accionRecargar.emit({ ...this.opcFiltroActual, ...{seleccionado: this.objSeleccionado}});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: TablaMantenimientoComponent, deps: [{ token: i1$2.FormBuilder }, { token: i1.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$3.FormBuilder }, { token: i1$1.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" }, 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 }], 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            <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                #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)=\"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]=\"nombreColeccion + '_' + idTablaValor(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 ? '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\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!btn.soloIcono\">{{ 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 ? '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\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!btn.soloIcono\">{{ 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: ["@tailwind base;@tailwind components;@tailwind utilities;:root{--tabla-mantenimiento-seleccion-fondo: rgb(179, 217, 252);--tabla-mantenimiento-seleccion-texto: rgb(1, 84, 164)}: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}html{--mat-paginator-container-size: 30px}:host{width:inherit}:host .example-viewport{height:500px;width:100%;border:1px solid black}:host .table{width:100%}:host ::ng-deep .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}:host ::ng-deep .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}:host ::ng-deep .mat-mdc-menu-panel{min-height:auto!important}:host ::ng-deep .mat-mdc-table .mat-mdc-cell,:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}:host .table-container{max-height:600px!important}:host ::ng-deep .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}:host ::ng-deep .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}:host ::ng-deep .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}:host ::ng-deep .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}:host ::ng-deep .table-mantenimiento th .form-input{@apply w-auto;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell,:host ::ng-deep .table-mantenimiento td.mat-mdc-cell,:host ::ng-deep .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}:host ::ng-deep .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}:host ::ng-deep .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}:host ::ng-deep .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}:host ::ng-deep .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,:host ::ng-deep .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}:host ::ng-deep .table-mantenimiento .mat-mdc-row .mat-mdc-cell,:host ::ng-deep .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}:host ::ng-deep .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,:host ::ng-deep .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}:host ::ng-deep .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}:host ::ng-deep .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}:host .rotate{animation:rotation 2s infinite linear}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}:host .contenedor-botones>*:first-child{@apply rounded-l;}:host .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento{width:inherit}.tabla-mantenimiento-boton-superior-firmar{@apply tabla-mantenimiento-boton-superior mat-elevation-z2 px-2 uppercase;@apply rounded disabled:bg-gray-300 dark:disabled:bg-gray-500 !important;}.tabla-mantenimiento-boton-superior{@apply 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;}.tabla-mantenimiento-boton-contextual{@apply flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent;}.tabla-mantenimiento-paginador{--mat-form-field-container-height: 36px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 6px;--mat-form-field-filled-with-label-container-padding-top: 6px;--mat-form-field-filled-with-label-container-padding-bottom: 6px}.tabla-mantenimiento-paginador{--mat-select-arrow-transform: none}.tabla-mantenimiento-paginador{--mdc-checkbox-state-layer-size: 28px}.tabla-mantenimiento-paginador{--mat-checkbox-touch-target-display: none}.tabla-mantenimiento-paginador .mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.tabla-mantenimiento-paginador{--mdc-switch-state-layer-size: 28px}.tabla-mantenimiento-paginador{--mdc-radio-state-layer-size: 28px}.tabla-mantenimiento-paginador{--mat-radio-touch-target-display: none}.tabla-mantenimiento-paginador{--mdc-list-list-item-one-line-container-height: 24px;--mdc-list-list-item-two-line-container-height: 48px;--mdc-list-list-item-three-line-container-height: 56px}.tabla-mantenimiento-paginador{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px}.tabla-mantenimiento-paginador .mdc-list-item__start,.tabla-mantenimiento-paginador .mdc-list-item__end{--mdc-radio-state-layer-size: 28px}.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:40px}.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:56px}.tabla-mantenimiento-paginador{--mat-paginator-container-size: 40px;--mat-paginator-form-field-container-height: 36px;--mat-paginator-form-field-container-vertical-padding: 6px;--mat-paginator-touch-target-display: none}.tabla-mantenimiento-paginador .mat-mdc-tab-header{--mdc-secondary-navigation-tab-container-height: 32px}.tabla-mantenimiento-paginador{--mdc-text-button-container-height: 24px}.tabla-mantenimiento-paginador{--mdc-filled-button-container-height: 24px}.tabla-mantenimiento-paginador{--mdc-protected-button-container-height: 24px}.tabla-mantenimiento-paginador{--mdc-outlined-button-container-height: 24px}.tabla-mantenimiento-paginador{--mat-text-button-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-filled-button-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-protected-button-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-outlined-button-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-icon-button-touch-target-display: none}.tabla-mantenimiento-paginador .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.tabla-mantenimiento-paginador{--mat-fab-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-fab-small-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.tabla-mantenimiento-paginador{--mat-expansion-header-collapsed-state-height: 36px;--mat-expansion-header-expanded-state-height: 48px}.tabla-mantenimiento-paginador{--mat-stepper-header-height: 42px}.tabla-mantenimiento-paginador{--mat-toolbar-standard-height: 52px;--mat-toolbar-mobile-height: 44px}.tabla-mantenimiento-paginador{--mat-tree-node-min-height: 28px}.tabla-mantenimiento-paginador{--mat-standard-button-toggle-height: 24px}.tabla-mantenimiento-paginador .mat-mdc-paginator-container{min-height:unset!important}.tabla-mantenimiento-paginador .mat-mdc-text-field-wrapper{@apply px-1;}.tabla-mantenimiento-paginador .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{height:25px!important;min-height:25px;max-height:25px;@apply py-0;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.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.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$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: i6.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i12.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i12.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.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; 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 ? '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\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!btn.soloIcono\">{{ 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 ? '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\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!btn.soloIcono\">{{ 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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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$3.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: '*' })),
                 transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
             ]),
+            trigger('fadeInUp', [
+                transition(':enter', [
+                    style({
+                        transform: 'translateY(20px)',
+                        opacity: 0
+                    }),
+                    animate(`400ms cubic-bezier(0.35, 0, 0.25, 1)`, style({
+                        transform: 'translateY(0)',
+                        opacity: 1
+                    }))
+                ])
+            ]),
         ] });
 };
 TablaMantenimientoComponent = TablaMantenimientoComponent_1 = __decorate([
@@ -1458,10 +1811,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
+                        trigger('fadeInUp', [
+                            transition(':enter', [
+                                style({
+                                    transform: 'translateY(20px)',
+                                    opacity: 0
+                                }),
+                                animate(`400ms cubic-bezier(0.35, 0, 0.25, 1)`, style({
+                                    transform: 'translateY(0)',
+                                    opacity: 1
+                                }))
+                            ])
+                        ]),
                     ], providers: [
                         { provide: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: { formFieldAppearance: 'outline' } }
-                    ], 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            <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                #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)=\"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]=\"nombreColeccion + '_' + idTablaValor(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 ? '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\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!btn.soloIcono\">{{ 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 ? '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\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!btn.soloIcono\">{{ 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: ["@tailwind base;@tailwind components;@tailwind utilities;:root{--tabla-mantenimiento-seleccion-fondo: rgb(179, 217, 252);--tabla-mantenimiento-seleccion-texto: rgb(1, 84, 164)}: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}html{--mat-paginator-container-size: 30px}:host{width:inherit}:host .example-viewport{height:500px;width:100%;border:1px solid black}:host .table{width:100%}:host ::ng-deep .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}:host ::ng-deep .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}:host ::ng-deep .mat-mdc-menu-panel{min-height:auto!important}:host ::ng-deep .mat-mdc-table .mat-mdc-cell,:host ::ng-deep .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}:host .table-container{max-height:600px!important}:host ::ng-deep .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}:host ::ng-deep .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}:host ::ng-deep .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}:host ::ng-deep .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}:host ::ng-deep .table-mantenimiento th .form-input{@apply w-auto;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell,:host ::ng-deep .table-mantenimiento td.mat-mdc-cell,:host ::ng-deep .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),:host ::ng-deep .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}:host ::ng-deep .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}:host ::ng-deep .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}:host ::ng-deep .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}:host ::ng-deep .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,:host ::ng-deep .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}:host ::ng-deep .table-mantenimiento .mat-mdc-row .mat-mdc-cell,:host ::ng-deep .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}:host ::ng-deep .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,:host ::ng-deep .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}:host ::ng-deep .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}:host ::ng-deep .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}:host ::ng-deep .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}:host .rotate{animation:rotation 2s infinite linear}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}:host .contenedor-botones>*:first-child{@apply rounded-l;}:host .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento{width:inherit}.tabla-mantenimiento-boton-superior-firmar{@apply tabla-mantenimiento-boton-superior mat-elevation-z2 px-2 uppercase;@apply rounded disabled:bg-gray-300 dark:disabled:bg-gray-500 !important;}.tabla-mantenimiento-boton-superior{@apply 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;}.tabla-mantenimiento-boton-contextual{@apply flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent;}.tabla-mantenimiento-paginador{--mat-form-field-container-height: 36px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 6px;--mat-form-field-filled-with-label-container-padding-top: 6px;--mat-form-field-filled-with-label-container-padding-bottom: 6px}.tabla-mantenimiento-paginador{--mat-select-arrow-transform: none}.tabla-mantenimiento-paginador{--mdc-checkbox-state-layer-size: 28px}.tabla-mantenimiento-paginador{--mat-checkbox-touch-target-display: none}.tabla-mantenimiento-paginador .mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 24px}.tabla-mantenimiento-paginador{--mdc-switch-state-layer-size: 28px}.tabla-mantenimiento-paginador{--mdc-radio-state-layer-size: 28px}.tabla-mantenimiento-paginador{--mat-radio-touch-target-display: none}.tabla-mantenimiento-paginador{--mdc-list-list-item-one-line-container-height: 24px;--mdc-list-list-item-two-line-container-height: 48px;--mdc-list-list-item-three-line-container-height: 56px}.tabla-mantenimiento-paginador{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px}.tabla-mantenimiento-paginador .mdc-list-item__start,.tabla-mantenimiento-paginador .mdc-list-item__end{--mdc-radio-state-layer-size: 28px}.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:40px}.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.tabla-mantenimiento-paginador .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:56px}.tabla-mantenimiento-paginador{--mat-paginator-container-size: 40px;--mat-paginator-form-field-container-height: 36px;--mat-paginator-form-field-container-vertical-padding: 6px;--mat-paginator-touch-target-display: none}.tabla-mantenimiento-paginador .mat-mdc-tab-header{--mdc-secondary-navigation-tab-container-height: 32px}.tabla-mantenimiento-paginador{--mdc-text-button-container-height: 24px}.tabla-mantenimiento-paginador{--mdc-filled-button-container-height: 24px}.tabla-mantenimiento-paginador{--mdc-protected-button-container-height: 24px}.tabla-mantenimiento-paginador{--mdc-outlined-button-container-height: 24px}.tabla-mantenimiento-paginador{--mat-text-button-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-filled-button-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-protected-button-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-outlined-button-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-icon-button-touch-target-display: none}.tabla-mantenimiento-paginador .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:2px}.tabla-mantenimiento-paginador{--mat-fab-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-fab-small-touch-target-display: none}.tabla-mantenimiento-paginador{--mat-table-header-container-height: 40px;--mat-table-footer-container-height: 36px;--mat-table-row-item-container-height: 36px}.tabla-mantenimiento-paginador{--mat-expansion-header-collapsed-state-height: 36px;--mat-expansion-header-expanded-state-height: 48px}.tabla-mantenimiento-paginador{--mat-stepper-header-height: 42px}.tabla-mantenimiento-paginador{--mat-toolbar-standard-height: 52px;--mat-toolbar-mobile-height: 44px}.tabla-mantenimiento-paginador{--mat-tree-node-min-height: 28px}.tabla-mantenimiento-paginador{--mat-standard-button-toggle-height: 24px}.tabla-mantenimiento-paginador .mat-mdc-paginator-container{min-height:unset!important}.tabla-mantenimiento-paginador .mat-mdc-text-field-wrapper{@apply px-1;}.tabla-mantenimiento-paginador .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{height:25px!important;min-height:25px;max-height:25px;@apply py-0;}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i1.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; 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 ? '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\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!btn.soloIcono\">{{ 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 ? '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\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!btn.soloIcono\">{{ 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$3.FormBuilder }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: TablaMantenimientoService }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: HostBinding
             }], virtualScroll: [{
                 type: Input
@@ -1540,7 +1905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 args: [MatTable, { static: false }]
             }], columnDefs: [{
                 type: ContentChildren,
-                args: [MatColumnDef]
+                args: [MatColumnDef, { descendants: true }]
             }], derechosActuales: [{
                 type: Input
             }], rows: [{
@@ -1566,83 +1931,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 type: Input
             }] } });
 
-class ProgressBarComponent {
-    objThis;
-    porcentaje = 0;
-    textoCentrado = false;
-    _textoMostrar = '';
-    get textoMostrar() { return this._textoMostrar; }
-    set textoMostrar(val) { this._textoMostrar = val; }
-    _formatoNumero = '';
-    get formatoNumero() { return this._formatoNumero; }
-    set formatoNumero(val) { this._formatoNumero = val ?? '1.0-0'; }
-    _coloresValor = [];
-    get coloresValor() { return this._coloresValor; }
-    set coloresValor(val) {
-        if (!val || !Array.isArray(val)) {
-            this._coloresValor = [
-                { valorMaximo: 1, class: 'p-0' },
-                { valorMaximo: 40, class: 'bg-red-400 text-red-900' },
-                // {valorMaximo: 35, class: 'bg-red-600 text-red-100'},
-                { valorMaximo: 80, class: 'bg-yellow-600 text-yellow-100' },
-                { valorMaximo: 100, class: 'bg-green-600 text-green-100' },
-            ];
-        }
-        else {
-            this._coloresValor = val;
-        }
-    }
-    constructor() { }
-    ngOnInit() {
-    }
-    colorEstilo() {
-        let estiloFin = null;
-        let claseFin = null;
-        let encontro = false;
-        this.coloresValor = this.ordenarPorPropiedad(this.coloresValor, 'valorMaximo');
-        this.coloresValor.forEach(estilo => {
-            if (!encontro && (this.porcentaje <= estilo.valorMaximo)) {
-                // console.log(this.porcentaje, estilo, (this.porcentaje < estilo.valorMaximo));
-                encontro = true;
-                estiloFin = estilo.style;
-                claseFin = estilo.class;
-            }
-        });
-        return {
-            style: estiloFin ?? '',
-            class: claseFin ?? '',
-        };
+function tipoValorFuncion(datoParam, ...param) {
+    if (typeof datoParam === 'function') {
+        return datoParam(...param);
     }
-    ordenarPorPropiedad(objData, propiedad, numeros = false) {
-        if (numeros) {
-            return objData.sort((a, b) => a[propiedad] - b[propiedad]);
-        }
-        return objData.sort((a, b) => (a[propiedad] > b[propiedad]) ? 1 : ((b[propiedad] > a[propiedad]) ? -1 : 0));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: ProgressBarComponent, isStandalone: true, selector: "jvsoft-progress-bar", inputs: { objThis: "objThis", porcentaje: "porcentaje", textoCentrado: "textoCentrado", textoMostrar: "textoMostrar", formatoNumero: "formatoNumero", coloresValor: "coloresValor" }, ngImport: i0, template: "<div class=\"w-full bg-gray-200 text-gray-700 rounded-full\" [class.text-center]=\"textoCentrado\">\n\t<div class=\"text-xxs font-medium text-center p-1 leading-none rounded-full\"\n\t\t [ngClass]=\"colorEstilo().class ? colorEstilo().class : 'bg-blue-600 text-blue-100'\"\n\t\t [style]=\"colorEstilo().style ? colorEstilo().style : ''\"\n\t\t [style.width]=\"(textoCentrado ? 100 : porcentaje) + '%'\"\n\t>\n        <span *ngIf=\"textoMostrar else defaultText;\" class=\"whitespace-nowrap\">{{ textoMostrar }}</span>\n        <ng-template #defaultText>{{ porcentaje | number: formatoNumero }}%</ng-template>\n    </div>\n</div>\n", styles: ["@tailwind base;@tailwind components;@tailwind utilities;\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] });
+    return datoParam;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jvsoft-progress-bar', imports: [
-                        CommonModule,
-                        DecimalPipe
-                    ], template: "<div class=\"w-full bg-gray-200 text-gray-700 rounded-full\" [class.text-center]=\"textoCentrado\">\n\t<div class=\"text-xxs font-medium text-center p-1 leading-none rounded-full\"\n\t\t [ngClass]=\"colorEstilo().class ? colorEstilo().class : 'bg-blue-600 text-blue-100'\"\n\t\t [style]=\"colorEstilo().style ? colorEstilo().style : ''\"\n\t\t [style.width]=\"(textoCentrado ? 100 : porcentaje) + '%'\"\n\t>\n        <span *ngIf=\"textoMostrar else defaultText;\" class=\"whitespace-nowrap\">{{ textoMostrar }}</span>\n        <ng-template #defaultText>{{ porcentaje | number: formatoNumero }}%</ng-template>\n    </div>\n</div>\n", styles: ["@tailwind base;@tailwind components;@tailwind utilities;\n"] }]
-        }], ctorParameters: () => [], propDecorators: { objThis: [{
-                type: Input
-            }], porcentaje: [{
-                type: Input
-            }], textoCentrado: [{
-                type: Input
-            }], textoMostrar: [{
-                type: Input
-            }], formatoNumero: [{
-                type: Input
-            }], coloresValor: [{
-                type: Input
-            }] } });
-
-// export * from './progress-spinner.service';
 
 class LucesNavidadComponent {
     enProduccion = true;
@@ -1710,5 +2004,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DialogFlotanteComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, ProgressBarComponent, ProgressSpinnerComponent, ProgressSpinnerService, TablaMantenimientoComponent, TablaMantenimientoService };
+export { DialogFlotanteComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, ProgressBarComponent, ProgressSpinnerComponent, ProgressSpinnerService, TablaMantenimientoComponent, TablaMantenimientoService, tipoValorFuncion };
 //# sourceMappingURL=jvsoft-components.mjs.map