@jvsoft/components 0.0.13-alpha.3 → 1.0.0-alpha.10

package/fesm2022/jvsoft-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, HostListener, Directive, ViewChild, Optional, inject, Pipe, NgModule, ContentChildren, ViewChildren, Injectable, ElementRef, HostBinding } from '@angular/core';
+import { input, booleanAttribute, output, computed, Component, EventEmitter, HostListener, Output, Input, Directive, ViewChild, Optional, inject, Pipe, NgModule, ContentChildren, ViewChildren, Injectable, signal, ElementRef, HostBinding, effect, untracked, InjectionToken } from '@angular/core';
 import * as i3 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i4 from '@angular/material/icon';
@@ -8,118 +8,120 @@ 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 { MatRipple, MatRippleModule, MatOptionModule } from '@angular/material/core';
 import * as i6 from '@angular/material/divider';
 import { MatDivider, MatDividerModule } from '@angular/material/divider';
 import { __decorate } from 'tslib';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i1$2 from '@angular/forms';
-import { Validators, FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/forms';
+import { Validators, FormControl, FormGroup, ReactiveFormsModule, FormsModule, FormBuilder } from '@angular/forms';
 import * as i14 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i5$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$1 from '@angular/material/menu';
-import { MatMenuModule, MatMenu } from '@angular/material/menu';
+import * as i2$2 from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger, MatMenu } from '@angular/material/menu';
 import * as i9 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator, MAT_PAGINATOR_DEFAULT_OPTIONS } from '@angular/material/paginator';
 import * as i3$1 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
 import * as i2 from '@angular/material/table';
 import { MatColumnDef, MatTable, MatTableModule, MatTableDataSource, MatFooterRow, MatRow } from '@angular/material/table';
-import * as i4$1 from '@angular/material/tooltip';
+import * as i4$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import moment from 'moment';
-import { Subject, takeUntil, startWith, of, fromEvent } from 'rxjs';
-import { filter, map, take } from 'rxjs/operators';
+import { Subject, takeUntil, startWith, of, fromEvent, BehaviorSubject } from 'rxjs';
+import { filter, map, take, switchMap, debounceTime, takeUntil as takeUntil$1, distinctUntilChanged } from 'rxjs/operators';
 import shortHash from 'shorthash2';
+import * as i4$1 from '@jvsoft/utils';
+import { JvsPopoverDirective, JvsPopoverListenerDirective, DataModel as DataModel$1, generateRandomString, dataEnLista, tipoValorFuncion as tipoValorFuncion$1, getUniqueValues, establecerQuitarRequired, mostrarValorEnBusqueda, getFormValidationErrors } from '@jvsoft/utils';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as XLSX from 'xlsx';
 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
-import * as i2$2 from '@angular/cdk/overlay';
+import * as i2$3 from '@angular/cdk/overlay';
 import * as i3$2 from '@angular/material/tree';
 import { MatTreeModule } from '@angular/material/tree';
 import { NestedTreeControl } from '@angular/cdk/tree';
-import { DataModel as DataModel$1 } from '@jvsoft/utils';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i3$3 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i4$3 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i5$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import * as i8 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import { ToastrService } from 'ngx-toastr';
 
 class DialogFlotanteComponent {
-    cssClases = {};
-    _sinTitulo = false;
-    get sinTitulo() {
-        return !!this._sinTitulo;
-    }
-    set sinTitulo(val) {
-        this._sinTitulo = val == '';
-    }
-    _sinBarraDeAccion = false;
-    get sinBarraDeAccion() {
-        return !!this._sinBarraDeAccion;
-    }
-    set sinBarraDeAccion(val) {
-        this._sinBarraDeAccion = val == '';
-    }
+    cssClases = input({});
+    sinTitulo = input(false, { transform: booleanAttribute });
+    sinBarraDeAccion = input(false, { transform: booleanAttribute });
+    btnCerrarBarra = input(false, { transform: booleanAttribute });
+    iconoTitulo = input(undefined);
+    matDialogRefActual = input(undefined);
+    // Inputs crudos para botones (string | boolean | object)
+    btnGuardarInput = input(undefined, { alias: 'btnGuardar' });
+    btnCerrarInput = input(undefined, { alias: 'btnCerrar' });
+    btnGuardarClick = output();
+    btnCerrarClick = output();
     defaultBtnCerrar = { label: 'CERRAR', class: 'text-gray-700 border-gray-700' };
-    _btnCerrar = this.defaultBtnCerrar;
-    get btnCerrar() {
-        return this._btnCerrar;
-    }
-    set btnCerrar(val) {
-        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() {
-        return this._btnCerrarBarra;
-    }
-    set btnCerrarBarra(val) {
-        this._btnCerrarBarra = val || true;
-    }
     defaultBtnGuardar = {
         label: 'GUARDAR', class: 'text-blue-700 border-blue-700', icono: 'roundSave'
     };
-    _btnGuardar = this.defaultBtnGuardar;
-    get btnGuardar() {
-        return this._btnGuardar;
-    }
-    set btnGuardar(val) {
-        if (val == null || val === '') {
-            this._btnGuardar = this.defaultBtnGuardar;
-        }
-        else {
-            this._btnGuardar = (typeof val === 'string' && val !== '') ? { ...this.defaultBtnGuardar, label: val } :
-                (typeof val === 'boolean' && val) ? this.defaultBtnGuardar :
-                    val ?? this.defaultBtnGuardar;
-        }
-    }
-    iconoTitulo;
-    matDialogRefActual;
-    btnGuardarClick = new EventEmitter();
-    btnCerrarClick = new EventEmitter();
+    // Computed signals para normalizar la configuración de botones
+    btnCerrar = computed(() => {
+        const val = this.btnCerrarInput();
+        // Si es false, null o undefined -> NO MOSTRAR
+        if (val === false || val === null || val === undefined)
+            return undefined;
+        // Si es string vacío (atributo presente sin valor) o true -> MOSTRAR DEFAULT
+        if (val === '' || val === true)
+            return this.defaultBtnCerrar;
+        // Si es string con valor -> MOSTRAR DEFAULT CON LABEL
+        if (typeof val === 'string')
+            return { ...this.defaultBtnCerrar, label: val };
+        // Si es objeto -> USAR EL OBJETO
+        return val;
+    });
+    btnGuardar = computed(() => {
+        const val = this.btnGuardarInput();
+        // Si es false, null o undefined -> NO MOSTRAR
+        if (val === false || val === null || val === undefined)
+            return undefined;
+        // Si es string vacío (atributo presente sin valor) o true -> MOSTRAR DEFAULT
+        if (val === '' || val === true)
+            return this.defaultBtnGuardar;
+        // Si es string con valor -> MOSTRAR DEFAULT CON LABEL
+        if (typeof val === 'string')
+            return { ...this.defaultBtnGuardar, label: val };
+        // Si es objeto -> USAR EL OBJETO
+        return val;
+    });
     guardarDialogo() {
         this.btnGuardarClick.emit(true);
     }
     cerrarDialogo() {
         this.btnCerrarClick.emit(true);
-        if (this.matDialogRefActual) {
-            if (this.matDialogRefActual.componentInstance?.validarCerrarDialog) {
-                this.matDialogRefActual.componentInstance?.validarCerrarDialog();
+        const ref = this.matDialogRefActual();
+        if (ref) {
+            if (ref.componentInstance?.validarCerrarDialog) {
+                ref.componentInstance?.validarCerrarDialog();
             }
             else {
-                this.matDialogRefActual.close('Cerrado GDLG');
+                ref.close('Cerrado GDLG');
             }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogFlotanteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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{max-width:98vw}.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}.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}\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: i4.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: DialogFlotanteComponent, isStandalone: true, selector: "[jvsDialogFlotante]", inputs: { cssClases: { classPropertyName: "cssClases", publicName: "cssClases", isSignal: true, isRequired: false, transformFunction: null }, sinTitulo: { classPropertyName: "sinTitulo", publicName: "sinTitulo", isSignal: true, isRequired: false, transformFunction: null }, sinBarraDeAccion: { classPropertyName: "sinBarraDeAccion", publicName: "sinBarraDeAccion", isSignal: true, isRequired: false, transformFunction: null }, btnCerrarBarra: { classPropertyName: "btnCerrarBarra", publicName: "btnCerrarBarra", isSignal: true, isRequired: false, transformFunction: null }, iconoTitulo: { classPropertyName: "iconoTitulo", publicName: "iconoTitulo", isSignal: true, isRequired: false, transformFunction: null }, matDialogRefActual: { classPropertyName: "matDialogRefActual", publicName: "matDialogRefActual", isSignal: true, isRequired: false, transformFunction: null }, btnGuardarInput: { classPropertyName: "btnGuardarInput", publicName: "btnGuardar", isSignal: true, isRequired: false, transformFunction: null }, btnCerrarInput: { classPropertyName: "btnCerrarInput", publicName: "btnCerrar", isSignal: true, isRequired: false, transformFunction: null } }, 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{max-width:98vw}.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}.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}\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: i4.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.2.14", ngImport: i0, type: DialogFlotanteComponent, decorators: [{
             type: Component,
@@ -133,28 +135,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         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\">\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{max-width:98vw}.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}.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}\n"] }]
-        }], propDecorators: { cssClases: [{
-                type: Input
-            }], sinTitulo: [{
-                type: Input
-            }], sinBarraDeAccion: [{
-                type: Input
-            }], btnCerrar: [{
-                type: Input
-            }], btnCerrarBarra: [{
-                type: Input
-            }], btnGuardar: [{
-                type: Input
-            }], iconoTitulo: [{
-                type: Input
-            }], matDialogRefActual: [{
-                type: Input
-            }], btnGuardarClick: [{
-                type: Output
-            }], btnCerrarClick: [{
-                type: Output
-            }] } });
+                    }, 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{max-width:98vw}.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}.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}\n"] }]
+        }] });
 
 function buscarEnArray(coleccion, idBuscar, dato) {
     if (!Array.isArray(coleccion) || coleccion.length === 0)
@@ -485,11 +467,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class ColumnTypeNumberComponent extends ColumnTypeComponent {
     column = {};
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnTypeNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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\" class=\"!text-indigo-900 font-semibold\"\n            [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n            [context]=\"row\"\n            [trigger]=\"column.popover?.trigger || 'hover'\"\n            [position]=\"column.popover?.position || 'bottom'\"\n            [customClass]=\"column.popover?.customClass || ''\">\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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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$1.JvsPopoverDirective, selector: "[jvsPopover]", inputs: ["jvsPopover", "context", "trigger", "position", "customClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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" }]
+            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\" class=\"!text-indigo-900 font-semibold\"\n            [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n            [context]=\"row\"\n            [trigger]=\"column.popover?.trigger || 'hover'\"\n            [position]=\"column.popover?.position || 'bottom'\"\n            [customClass]=\"column.popover?.customClass || ''\">\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 }]
@@ -498,11 +480,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class ColumnTypeDateComponent extends ColumnTypeComponent {
     column = {};
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnTypeDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ColumnTypeDateComponent, isStandalone: false, selector: "jvs-column-type-date", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n    <span [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n        [context]=\"row\"\n        [trigger]=\"column.popover?.trigger || 'hover'\"\n        [position]=\"column.popover?.position || 'bottom'\"\n        [customClass]=\"column.popover?.customClass || ''\"\n        *ngIf=\"column.property && row[column.property]\">\n        {{ row[column.property] | date: (column.format ? column.format : 'dd/MM/yyyy') }}\n    </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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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$1.JvsPopoverDirective, selector: "[jvsPopover]", inputs: ["jvsPopover", "context", "trigger", "position", "customClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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" }]
+            args: [{ selector: 'jvs-column-type-date', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n    <span [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n        [context]=\"row\"\n        [trigger]=\"column.popover?.trigger || 'hover'\"\n        [position]=\"column.popover?.position || 'bottom'\"\n        [customClass]=\"column.popover?.customClass || ''\"\n        *ngIf=\"column.property && row[column.property]\">\n        {{ row[column.property] | date: (column.format ? column.format : 'dd/MM/yyyy') }}\n    </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 }]
@@ -529,11 +511,11 @@ class ColumnTypeSinoComponent extends ColumnTypeComponent {
         // iconRegistry.addSvgIconLiteral('noIcon', sanitizer.bypassSecurityTrustHtml(NO_ICON));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnTypeSinoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ColumnTypeSinoComponent, isStandalone: false, selector: "jvs-column-type-sino", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n    <div class=\"flex items-center justify-center\"\n        [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n        [context]=\"row\"\n        [trigger]=\"column.popover?.trigger || 'hover'\"\n        [position]=\"column.popover?.position || 'bottom'\"\n        [customClass]=\"column.popover?.customClass || ''\">\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    </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", 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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.JvsPopoverDirective, selector: "[jvsPopover]", inputs: ["jvsPopover", "context", "trigger", "position", "customClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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" }]
+            args: [{ selector: 'jvs-column-type-sino', standalone: false, template: "<ng-template #cellTemplate let-row=\"row\">\n    <div class=\"flex items-center justify-center\"\n        [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n        [context]=\"row\"\n        [trigger]=\"column.popover?.trigger || 'hover'\"\n        [position]=\"column.popover?.position || 'bottom'\"\n        [customClass]=\"column.popover?.customClass || ''\">\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    </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" }]
         }], ctorParameters: () => [], propDecorators: { column: [{
                 type: Input,
                 args: [{ required: true }]
@@ -597,7 +579,7 @@ class ProgressBarComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jvs-progress-bar', imports: [
+            args: [{ selector: 'jvs-progress-bar', standalone: true, imports: [
                         CommonModule,
                         DecimalPipe
                     ], host: {
@@ -620,11 +602,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class ColumnTypeProgressbarComponent extends ColumnTypeComponent {
     column = {};
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnTypeProgressbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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        [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n        [context]=\"row\"\n        [trigger]=\"column.popover?.trigger || 'hover'\"\n        [position]=\"column.popover?.position || 'bottom'\"\n        [customClass]=\"column.popover?.customClass || ''\"\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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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"] }, { kind: "directive", type: i4$1.JvsPopoverDirective, selector: "[jvsPopover]", inputs: ["jvsPopover", "context", "trigger", "position", "customClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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" }]
+            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        [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n        [context]=\"row\"\n        [trigger]=\"column.popover?.trigger || 'hover'\"\n        [position]=\"column.popover?.position || 'bottom'\"\n        [customClass]=\"column.popover?.customClass || ''\"\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 }]
@@ -643,7 +625,10 @@ class NoSanitizePipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NoSanitizePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'noSanitize' }]
+            args: [{
+                    name: 'noSanitize',
+                    standalone: true
+                }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
 class ZeroFillPipe {
@@ -661,6 +646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Pipe,
             args: [{
                     name: 'zeroFill',
+                    standalone: true
                 }]
         }] });
 function zeroFill(value, digitos, ...args) {
@@ -672,11 +658,11 @@ function zeroFill(value, digitos, ...args) {
 class ColumnTypeTextComponent extends ColumnTypeComponent {
     column = {}; // 🟢 Solución
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnTypeTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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        jvsPopoverListener [trigger]=\"column.popover?.trigger || 'hover'\">\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            [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n            [context]=\"row\"\n            [trigger]=\"column.popover?.trigger || 'hover'\"\n            [position]=\"column.popover?.position || 'bottom'\"\n            [customClass]=\"column.popover?.customClass || ''\">\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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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$1.JvsPopoverDirective, selector: "[jvsPopover]", inputs: ["jvsPopover", "context", "trigger", "position", "customClass"] }, { kind: "directive", type: i4$1.JvsPopoverListenerDirective, selector: "[jvsPopoverListener]", inputs: ["trigger"] }, { 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.2.14", 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" }]
+            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        jvsPopoverListener [trigger]=\"column.popover?.trigger || 'hover'\">\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            [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n            [context]=\"row\"\n            [trigger]=\"column.popover?.trigger || 'hover'\"\n            [position]=\"column.popover?.position || 'bottom'\"\n            [customClass]=\"column.popover?.customClass || ''\">\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 }]
@@ -688,11 +674,11 @@ class ColumnTypeMoneyComponent extends ColumnTypeComponent {
         return (this.column.transformar ? this.column.transformar(row) : row[this.column.property]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnTypeMoneyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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         [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n         [context]=\"row\"\n         [trigger]=\"column.popover?.trigger || 'hover'\"\n         [position]=\"column.popover?.position || 'bottom'\"\n         [customClass]=\"column.popover?.customClass || ''\"\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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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$1.JvsPopoverDirective, selector: "[jvsPopover]", inputs: ["jvsPopover", "context", "trigger", "position", "customClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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" }]
+            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         [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n         [context]=\"row\"\n         [trigger]=\"column.popover?.trigger || 'hover'\"\n         [position]=\"column.popover?.position || 'bottom'\"\n         [customClass]=\"column.popover?.customClass || ''\"\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 }]
@@ -707,11 +693,11 @@ class ColumnTypeIconsComponent extends ColumnTypeComponent {
         return columna.items;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnTypeIconsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ColumnTypeIconsComponent, isStandalone: false, selector: "jvs-column-type-icons", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cellTemplate let-row=\"row\">\n    <div class=\"flex items-center justify-center\" [ngClass]=\"{ '-space-x-1': !column.iconsDef?.soloIcono }\"\n    >\n        <ng-container *ngFor=\"let icon of obtenerItems(column.iconsDef, row)\">\n            <ng-container *ngIf=\"!column.iconsDef?.soloIcono; else soloIcono\">\n                <button matRipple type=\"button\" *ngIf=\"!icon.esVisible || icon.esVisible(row)\"\n                    (click)=\"icon.click ? icon.click(row) : false; $event.stopPropagation()\"\n                    class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n                    [ngClass]=\"icon.contentCss\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </button>\n            </ng-container>\n            <ng-template #soloIcono>\n                <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n                    class=\"flex items-center\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n    <!-- Definici\u00F3n del encabezado de la columna -->\n    <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n        [disabled]=\"column.sort === false\">\n        <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n    </th>\n\n    <!-- Cuerpo de la celda, definido por los hijos -->\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n        <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        {{ column.transformarFooter ? column.transformarFooter() : '' }}\n    </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n    <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n        [style.font-size]=\"size\"\n        [style.height]=\"size\"\n        [style.width]=\"size\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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$1.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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        [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n        [context]=\"row\"\n        [trigger]=\"column.popover?.trigger || 'hover'\"\n        [position]=\"column.popover?.position || 'bottom'\"\n        [customClass]=\"column.popover?.customClass || ''\">\n        <ng-container *ngFor=\"let icon of obtenerItems(column.iconsDef, row)\">\n            <ng-container *ngIf=\"!column.iconsDef.soloIcono; else soloIcono\">\n                <button matRipple type=\"button\" *ngIf=\"!icon.esVisible || icon.esVisible(row)\"\n                    (click)=\"icon.click ? icon.click(row) : false; $event.stopPropagation()\"\n                    class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n                    [ngClass]=\"icon.contentCss\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </button>\n            </ng-container>\n            <ng-template #soloIcono>\n                <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n                    class=\"flex items-center\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n    <!-- Definici\u00F3n del encabezado de la columna -->\n    <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n        [disabled]=\"column.sort === false\">\n        <span [innerHTML]=\"column.label\">{{ column.label }} </span>\n    </th>\n\n    <!-- Cuerpo de la celda, definido por los hijos -->\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n        <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        {{ column.transformarFooter ? column.transformarFooter() : '' }}\n    </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n    <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n        [style.font-size]=\"size\"\n        [style.height]=\"size\"\n        [style.width]=\"size\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.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$2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.JvsPopoverDirective, selector: "[jvsPopover]", inputs: ["jvsPopover", "context", "trigger", "position", "customClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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; $event.stopPropagation()\"\n                    class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n                    [ngClass]=\"icon.contentCss\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </button>\n            </ng-container>\n            <ng-template #soloIcono>\n                <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n                    class=\"flex items-center\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n    <!-- Definici\u00F3n del encabezado de la columna -->\n    <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n        [disabled]=\"column.sort === false\">\n        <span [innerHTML]=\"column.label ?? ''\">{{ column.label }} </span>\n    </th>\n\n    <!-- Cuerpo de la celda, definido por los hijos -->\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n        <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        {{ column.transformarFooter ? column.transformarFooter() : '' }}\n    </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n    <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n        [style.font-size]=\"size\"\n        [style.height]=\"size\"\n        [style.width]=\"size\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n" }]
+            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        [jvsPopover]=\"(column.popover?.template || column.popover?.content?.(row)) ?? null\"\n        [context]=\"row\"\n        [trigger]=\"column.popover?.trigger || 'hover'\"\n        [position]=\"column.popover?.position || 'bottom'\"\n        [customClass]=\"column.popover?.customClass || ''\">\n        <ng-container *ngFor=\"let icon of obtenerItems(column.iconsDef, row)\">\n            <ng-container *ngIf=\"!column.iconsDef.soloIcono; else soloIcono\">\n                <button matRipple type=\"button\" *ngIf=\"!icon.esVisible || icon.esVisible(row)\"\n                    (click)=\"icon.click ? icon.click(row) : false; $event.stopPropagation()\"\n                    class=\"flex items-center justify-center p-1 rounded border shadow-sm hover:shadow-lg\"\n                    [ngClass]=\"icon.contentCss\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </button>\n            </ng-container>\n            <ng-template #soloIcono>\n                <div *ngIf=\"!icon.esVisible || icon.esVisible(row)\" [ngClass]=\"icon.contentCss\"\n                    class=\"flex items-center\"\n                    [matTooltip]=\"icon.toolTip ?? row[icon.toolTipField ?? '_field_']\"\n                    [matTooltipDisabled]=\"!icon.toolTip && !icon.toolTipField\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"iconoConTamanio\"\n                        [ngTemplateOutletContext]=\"{icon: icon.icon, iconClass: icon.cssClass, size: (icon.iconSize ?? column.iconsDef?.iconSize)}\"></ng-container>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-container matColumnDef=\"{{ column.property }}\">\n    <!-- Definici\u00F3n del encabezado de la columna -->\n    <th *matHeaderCellDef [ngClass]=\"column.cssClassesTH\" class=\"uppercase text-center\" mat-header-cell mat-sort-header\n        [disabled]=\"column.sort === false\">\n        <span [innerHTML]=\"column.label\">{{ column.label }} </span>\n    </th>\n\n    <!-- Cuerpo de la celda, definido por los hijos -->\n    <td *matCellDef=\"let row\" [ngClass]=\"column.cssClasses\" mat-cell (click)=\"accionClick(row, $event)\">\n\n        <ng-container [ngTemplateOutlet]=\"cellTemplate\" [ngTemplateOutletContext]=\"{row}\"></ng-container>\n\n    </td>\n\n    <th *matFooterCellDef [ngClass]=\"column.cssFooterClasses\" mat-footer-cell>\n        {{ column.transformarFooter ? column.transformarFooter() : '' }}\n    </th>\n</ng-container>\n\n\n<ng-template #iconoConTamanio let-icon=\"icon\" let-iconClass=\"iconClass\" let-size=\"size\">\n    <mat-icon *ngIf=\"size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\" [inline]=\"true\"\n        [style.font-size]=\"size\"\n        [style.height]=\"size\"\n        [style.width]=\"size\"\n    ></mat-icon>\n    <mat-icon *ngIf=\"!size\" [svgIcon]=\"icon\" [ngClass]=\"iconClass\"></mat-icon>\n</ng-template>\n" }]
         }], propDecorators: { column: [{
                 type: Input,
                 args: [{ required: true }]
@@ -734,7 +720,9 @@ class ColumnTypeModule {
             ZeroFillPipe,
             MatRipple,
             MatIcon,
-            ProgressBarComponent], exports: [ColumnTypeTextComponent,
+            ProgressBarComponent,
+            JvsPopoverDirective,
+            JvsPopoverListenerDirective], exports: [ColumnTypeTextComponent,
             ColumnTypeMoneyComponent,
             ColumnTypeNumberComponent,
             ColumnTypeDateComponent,
@@ -771,6 +759,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatRipple,
                         MatIcon,
                         ProgressBarComponent,
+                        JvsPopoverDirective,
+                        JvsPopoverListenerDirective
                     ],
                     exports: [
                         ColumnTypeTextComponent,
@@ -813,7 +803,7 @@ class TablaMantenimientoColumnDefsComponent {
         return column.property;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablaMantenimientoColumnDefsComponent, deps: [{ token: i2.MatTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: i5$1.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: 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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.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: "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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: i5$1.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: 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.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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.2.14", ngImport: i0, type: TablaMantenimientoColumnDefsComponent, decorators: [{
             type: Component,
@@ -865,7 +855,7 @@ class TablaMantenimientoMenuComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablaMantenimientoMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: item, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$1.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.2.14", 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: item, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablaMantenimientoMenuComponent, decorators: [{
             type: Component,
@@ -1002,8 +992,8 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
     dataSuscription;
     objThis;
     nombreColeccion;
-    ctrlBusquedaValue = '';
-    ctrlBusquedaPlaceholder = 'Buscar...';
+    busquedaValor = input('', { alias: 'ctrlBusquedaValue' });
+    busquedaPlaceholder = input('Buscar...', { alias: 'ctrlBusquedaPlaceholder' });
     filtroCampos = true;
     paginador = true;
     esTabla = true;
@@ -1034,6 +1024,8 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
     paginator;
     sort;
     exportarExcel = true;
+    busquedaCompacta = input(false);
+    alturaFull = input(false);
     // MIO
     pageSize = 25;
     pageSizeOptions = [5, 10, 25, 50, 100, 500, 1000];
@@ -1061,12 +1053,15 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
     mouseEvent$;
     overlayRef;
     userMenu;
+    compactSearchMenuTrigger;
     // FILTRO BUSQUEDA
     opcFiltroActual = {};
     capitalizarTexto = capitalizarTexto;
     _seleccionado = {};
     cCampoBusqueda = new FormControl('');
     chkLista = new DataModel();
+    bDireccionOrden = signal(1);
+    mostrarBotonOrden = input(false);
     constructor(fb, overlay, viewContainerRef, tablaMantenimientoService, cdRef) {
         this.fb = fb;
         this.overlay = overlay;
@@ -1075,16 +1070,14 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         this.cdRef = cdRef;
         // this._seleccionado[this.nombreColeccion] = null;
     }
-    _ctrlBusqueda = '';
-    get ctrlBusqueda() {
-        return this._ctrlBusqueda;
-    }
-    set ctrlBusqueda(val) {
-        if (val == '') {
-            val = 'simple';
+    busquedaTipo = input('simple', {
+        alias: 'ctrlBusqueda',
+        transform: (val) => {
+            if (val === '')
+                return 'simple';
+            return val;
         }
-        this._ctrlBusqueda = val;
-    }
+    });
     // @Input() leyenda;
     _leyenda = undefined;
     get leyenda() {
@@ -1270,27 +1263,39 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         return this.columnasTabla && this.columnasTabla.length > 0 && this.columnasTabla.find(col => col.type === 'checkbox') || false;
     }
     get buscarItemSeleccionado() {
+        if (!this.dataSource?.data || !Array.isArray(this.dataSource.data)) {
+            return null;
+        }
         const dRet = this.dataSource.data.find(itm => this._seleccionado === this.propiedadSeleccion(itm));
         return dRet ?? null;
     }
     get objSeleccionado() {
-        return this.buscarItemSeleccionado; // ?? this.objThis?.['seleccionados']?.[this.nombreColeccion];
+        return this.buscarItemSeleccionado ?? this.objThis?.['seleccionados']?.[this.nombreColeccion];
     }
     set objSeleccionado(val) {
         // if (val) {
         this.seleccionarItem(val, true);
         // }
-        /*    if (!this.objThis) {
-                this.objThis = {};
-            }
+        /*if (this.objThis) {
             if (!this.objThis['seleccionados']) {
                 this.objThis['seleccionados'] = {};
             }
-            this.objThis['seleccionados'][this.nombreColeccion] = val;*/
+            this.objThis['seleccionados'][this.nombreColeccion] = val;
+        }*/
     }
     get idsSeleccionado() {
         return this.chkLista.generarLista();
     }
+    get itemsSeleccionados() {
+        const checkbox = this.tieneCheckbox;
+        if (!checkbox || !this.dataSource?.data) {
+            return [];
+        }
+        return this.dataSource.data.filter(item => {
+            const id = this.chkLista.generarId(item, (checkbox.chkField ?? checkbox.property), checkbox.chkFieldSeparador);
+            return !!this.chkLista.getState(id);
+        });
+    }
     idTablaValor(data) {
         if (data) {
             if (this.idTabla.length < 1) {
@@ -1339,9 +1344,9 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
                         }
                         else {
                             console.log('eLSE ID TABLA');
-                            const dataStr = res.find((itm) => shortHash(JSON.stringify({
+                            const dataStr = Array.isArray(res) ? res.find((itm) => shortHash(JSON.stringify({
                                 ...itm, claseFinal: undefined
-                            })) == shortHash(JSON.stringify({ ...this.objSeleccionado, claseFinal: undefined })));
+                            })) == shortHash(JSON.stringify({ ...this.objSeleccionado, claseFinal: undefined }))) : null;
                             if (dataStr) {
                                 this.objSeleccionado = dataStr;
                             }
@@ -1368,13 +1373,13 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
             }
         });
         // console.log(a);
-        if (this.ctrlBusquedaValue) {
-            this.cCampoBusqueda.setValue(this.ctrlBusquedaValue);
+        if (this.busquedaValor()) {
+            this.cCampoBusqueda.setValue(this.busquedaValor());
         }
         this.table.renderRows(); // 🔹 Refrescar la tabla
     }
     ngOnChanges(changes) {
-        if (changes['botonesCRUD'] || changes['ctrlBusqueda']) {
+        if (changes['botonesCRUD'] || changes['busquedaTipo']) {
             this.actualizarCrud();
         }
         if (changes['botonesMenu']) {
@@ -1442,7 +1447,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
                 }
             }
         }
-        if (this.ctrlBusqueda === 'simple') {
+        if (this.busquedaTipo() === 'simple') {
             this.cCampoBusqueda.valueChanges.pipe(untilDestroyed(this)).subscribe(value => this.onFilterChange(value ?? ''));
         }
         if (this.botonesCRUD === '-') {
@@ -1499,7 +1504,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         column.visible = !column.visible;
     }
     cargarData(retorno = false) {
-        if (this.ctrlBusqueda && this.ctrlBusqueda == 'simple') {
+        if (this.busquedaTipo() && this.busquedaTipo() == 'simple') {
             if (!retorno) {
                 this.dataSource.paginator = this.paginator;
                 this.dataSource.sort = this.sort;
@@ -1513,8 +1518,9 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
             iPaginacion: 1,
             iPageSize: this.paginator?.pageSize ? this.paginator?.pageSize : this.paginacion.pageCurrent?.pageSize,
             iPageNumber: (this.paginator?.pageIndex ? this.paginator?.pageIndex : 0) + 1,
+            bDireccionOrden: this.bDireccionOrden(),
         };
-        if (this.ctrlBusqueda && this.ctrlBusqueda == 'query') {
+        if (this.busquedaTipo() && this.busquedaTipo() == 'query') {
             dPag['cCampoBusqueda'] = this.cCampoBusqueda.value;
         }
         if (retorno) {
@@ -1523,8 +1529,20 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         this.resultados.emit(dPag);
         this.opcBusqueda.emit(dPag);
     }
+    toggleDireccionOrden() {
+        this.bDireccionOrden.update((v) => v === 0 ? 1 : 0);
+        this.emitirResultados();
+        // if (this.busquedaTipo() === 'query') {
+        //     this.cargarData();
+        // } else {
+        //     this.emitirAccionRecargar();
+        // }
+    }
     // FIN FILTRO BUSQUEDA INTEGRAR
     setData(data) {
+        if (!Array.isArray(data)) {
+            data = [];
+        }
         this.dataSource = new MatTableDataSource(data);
         this.dataSource.sortingDataAccessor = (item, property) => {
             const dColumn = buscarEnArray(this.columnasTabla, 'property', property);
@@ -1556,6 +1574,9 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         if (data && data[0] && data[0]['iPageNumber']) {
             this.paginacion.pageIndex = (data && data[0] && data[0]['iPageNumber']) ? data[0]['iPageNumber'] : 0;
         }
+        if (data && data[0] && 'bDireccionOrden' in data[0]) {
+            this.bDireccionOrden.set(data[0]['bDireccionOrden']);
+        }
         this.paginacion.pageLength = (data && data[0] && data[0]['iTotalRegistros']) ? data[0]['iTotalRegistros'] : data.length;
         if (data && data[0] && !data[0]['iTotalRegistros']) {
             this.dataSource.paginator = this.paginator;
@@ -1596,13 +1617,12 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
             this._seleccionado = this._seleccionado === idItem ? null : idItem;
         }
         this.selectionModelChange.emit(this.objSeleccionado);
-        /*if (!this.objThis) {
-            this.objThis = {};
-        }
-        if (!this.objThis['seleccionados']) {
-            this.objThis['seleccionados'] = {};
-        }
-        this.objThis['seleccionados'][this.nombreColeccion] = this._seleccionado;*/
+        /*if (this.objThis) {
+            if (!this.objThis['seleccionados']) {
+                this.objThis['seleccionados'] = {};
+            }
+            this.objThis['seleccionados'][this.nombreColeccion] = this.objSeleccionado;
+        }*/
     }
     opcMenu(item, objMenu, modal = null, retorno = false) {
         // console.log(this.buscarItemSeleccionado);
@@ -1694,6 +1714,7 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         if (this.tieneCheckbox) {
             // itmsSeleccionados = this.formulariosGlobalesService.generarLista(this.nombreColeccion);
             opAdic['idsSeleccionados'] = this.idsSeleccionado;
+            opAdic['itemsSeleccionados'] = this.itemsSeleccionados;
         }
         // opAdic['refTabla'] = this;
         objMenu = { ...objMenu, ...opAdic };
@@ -1742,6 +1763,12 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
             this.overlayRef = undefined;
         }
     }
+    ejecutarBusquedaCompacta() {
+        if (this.busquedaTipo() === 'query') {
+            this.cargarData();
+        }
+        this.compactSearchMenuTrigger.closeMenu();
+    }
     emitirAccionRecargar() {
         if (!this.idTabla) {
             this.objSeleccionado = null;
@@ -1750,10 +1777,10 @@ let TablaMantenimientoComponent = class TablaMantenimientoComponent {
         // this.accionRecargar.emit({ ...this.opcFiltroActual, ...{seleccionado: this.objSeleccionado}});
     }
     tipoValorFuncion = tipoValorFuncion;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablaMantenimientoComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$2.Overlay }, { token: i0.ViewContainerRef }, { token: TablaMantenimientoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TablaMantenimientoComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento", inputs: { 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", selectionModel: "selectionModel", filaExtraTemplate: "filaExtraTemplate", exportarExcel: "exportarExcel", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", derechosActuales: "derechosActuales", ctrlBusqueda: "ctrlBusqueda", leyenda: "leyenda", idTabla: "idTabla", columnasTabla: "columnasTabla", botonesMenu: "botonesMenu", condicionesClaseFila: "condicionesClaseFila", rowTooltip: "rowTooltip", soloIconos: "soloIconos" }, outputs: { dblclickItem: "dblclickItem", opcionSelecionada: "opcionSelecionada", opcBusqueda: "opcBusqueda", accionRecargar: "accionRecargar", selectionModelChange: "selectionModelChange", dataSourceChange: "dataSourceChange", resultados: "resultados" }, host: { properties: { "id": "this.id" }, classAttribute: "jvs-tabla-mantenimiento" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablaMantenimientoComponent, deps: [{ token: i2$1.FormBuilder }, { token: i2$3.Overlay }, { token: i0.ViewContainerRef }, { token: TablaMantenimientoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: TablaMantenimientoComponent, isStandalone: true, selector: "jvs-tabla-mantenimiento", inputs: { dataSuscription: { classPropertyName: "dataSuscription", publicName: "dataSuscription", isSignal: false, isRequired: false, transformFunction: null }, objThis: { classPropertyName: "objThis", publicName: "objThis", isSignal: false, isRequired: true, transformFunction: null }, nombreColeccion: { classPropertyName: "nombreColeccion", publicName: "nombreColeccion", isSignal: false, isRequired: true, transformFunction: null }, busquedaValor: { classPropertyName: "busquedaValor", publicName: "ctrlBusquedaValue", isSignal: true, isRequired: false, transformFunction: null }, busquedaPlaceholder: { classPropertyName: "busquedaPlaceholder", publicName: "ctrlBusquedaPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filtroCampos: { classPropertyName: "filtroCampos", publicName: "filtroCampos", isSignal: false, isRequired: false, transformFunction: null }, paginador: { classPropertyName: "paginador", publicName: "paginador", isSignal: false, isRequired: false, transformFunction: null }, esTabla: { classPropertyName: "esTabla", publicName: "esTabla", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: false, isRequired: false, transformFunction: null }, filaExtraHeader: { classPropertyName: "filaExtraHeader", publicName: "filaExtraHeader", isSignal: false, isRequired: false, transformFunction: null }, filaFooter: { classPropertyName: "filaFooter", publicName: "filaFooter", isSignal: false, isRequired: false, transformFunction: null }, botonesCRUD: { classPropertyName: "botonesCRUD", publicName: "botonesCRUD", isSignal: false, isRequired: false, transformFunction: null }, objBotonesCRUD: { classPropertyName: "objBotonesCRUD", publicName: "objBotonesCRUD", isSignal: false, isRequired: false, transformFunction: null }, classSeleccionado: { classPropertyName: "classSeleccionado", publicName: "classSeleccionado", isSignal: false, isRequired: false, transformFunction: null }, classAnulado: { classPropertyName: "classAnulado", publicName: "classAnulado", isSignal: false, isRequired: false, transformFunction: null }, campoAnulado: { classPropertyName: "campoAnulado", publicName: "campoAnulado", isSignal: false, isRequired: false, transformFunction: null }, campoAnuladoMensaje: { classPropertyName: "campoAnuladoMensaje", publicName: "campoAnuladoMensaje", isSignal: false, isRequired: false, transformFunction: null }, selectionModel: { classPropertyName: "selectionModel", publicName: "selectionModel", isSignal: false, isRequired: false, transformFunction: null }, filaExtraTemplate: { classPropertyName: "filaExtraTemplate", publicName: "filaExtraTemplate", isSignal: false, isRequired: false, transformFunction: null }, exportarExcel: { classPropertyName: "exportarExcel", publicName: "exportarExcel", isSignal: false, isRequired: false, transformFunction: null }, busquedaCompacta: { classPropertyName: "busquedaCompacta", publicName: "busquedaCompacta", isSignal: true, isRequired: false, transformFunction: null }, alturaFull: { classPropertyName: "alturaFull", publicName: "alturaFull", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, derechosActuales: { classPropertyName: "derechosActuales", publicName: "derechosActuales", isSignal: false, isRequired: false, transformFunction: null }, mostrarBotonOrden: { classPropertyName: "mostrarBotonOrden", publicName: "mostrarBotonOrden", isSignal: true, isRequired: false, transformFunction: null }, busquedaTipo: { classPropertyName: "busquedaTipo", publicName: "ctrlBusqueda", isSignal: true, isRequired: false, transformFunction: null }, leyenda: { classPropertyName: "leyenda", publicName: "leyenda", isSignal: false, isRequired: false, transformFunction: null }, idTabla: { classPropertyName: "idTabla", publicName: "idTabla", isSignal: false, isRequired: true, transformFunction: null }, columnasTabla: { classPropertyName: "columnasTabla", publicName: "columnasTabla", isSignal: false, isRequired: false, transformFunction: null }, botonesMenu: { classPropertyName: "botonesMenu", publicName: "botonesMenu", isSignal: false, isRequired: false, transformFunction: null }, condicionesClaseFila: { classPropertyName: "condicionesClaseFila", publicName: "condicionesClaseFila", isSignal: false, isRequired: false, transformFunction: null }, rowTooltip: { classPropertyName: "rowTooltip", publicName: "rowTooltip", isSignal: false, isRequired: false, transformFunction: null }, soloIconos: { classPropertyName: "soloIconos", publicName: "soloIconos", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dblclickItem: "dblclickItem", opcionSelecionada: "opcionSelecionada", opcBusqueda: "opcBusqueda", accionRecargar: "accionRecargar", selectionModelChange: "selectionModelChange", dataSourceChange: "dataSourceChange", resultados: "resultados" }, host: { properties: { "class.h-full": "alturaFull()", "id": "this.id" }, classAttribute: "jvs-tabla-mantenimiento" }, providers: [
             { provide: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: { formFieldAppearance: 'outline' } }
-        ], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "rowFooter", first: true, predicate: MatFooterRow, descendants: true, read: ElementRef }, { propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }, { propertyName: "rows", predicate: MatRow, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-fit\">\n    <div class=\"grow flex items-center justify-between bg-white\">\n        <ng-content select=\"[filtro]\"></ng-content>\n    </div>\n\n    <div class=\"flex flex-col border-t\">\n        <div class=\"flex-1 bg-app-bar flex items-center justify-between p-1\">\n            <!--        <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">-->\n            <!--        </div>-->\n            <div class=\"flex items-center flex-wrap mr-1 h-full\" *ngIf=\"leyenda\">\n                <span class=\"font-bold\" [class]=\"leyenda.class\">{{ leyenda.text }}</span>\n            </div>\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.izquierda ?? []).length > 0 \" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.izquierda; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.izquierda?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.crud ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.crud; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.crud?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.principal ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.principal; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.principal?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.derecha ?? []).length > 0\" class=\"flex-auto flex items-center justify-end contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.derecha; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.derecha?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n                <ng-content select=\"[objetosMenuPegado]\"></ng-content>\n            </div>\n            <div class=\"flex flex-1 sm:hidden items-center flex-wrap gap-1\">\n                <button class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matRipple\n                    matTooltip=\"Botones de Acci\u00F3n\"\n                    type=\"button\"\n                    [matMenuTriggerFor]=\"menuOpciones\"\n                >\n                    <mat-icon class=\"icon-xs\" svgIcon=\"roundMenu\"></mat-icon>\n                </button>\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <div class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                    <ng-content select=\"[objetosMenu]\"></ng-content>\n                </div>\n            </div>\n            <div *ngIf=\"ctrlBusqueda\" class=\"hidden flex-initial sm:flex items-center form-input  max-w-[150px] bg-card rounded-full border m-1 px-1 border-l-2\"\n            >\n                <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n                <input [formControl]=\"cCampoBusqueda\"\n                    class=\"text-xs px-1 py-1 border-0 outline-none w-full bg-transparent max-w-sm\"\n                    [placeholder]=\"ctrlBusquedaPlaceholder\"\n                    (keyup.enter)=\"ctrlBusqueda == 'query' ? cargarData() : false;\"\n                    type=\"search\">\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <ng-content select=\"[botonesFiltro]\"></ng-content>\n                <button matRipple *ngIf=\"isRecargarUsed || ctrlBusqueda == 'query'\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-green-700\"\n                    matTooltip=\"Actualizar datos\"\n                    (click)=\"(ctrlBusqueda == 'query' ? cargarData() : emitirAccionRecargar())\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n                </button>\n                <button matRipple [matMenuTriggerFor]=\"columnFilterMenu\" *ngIf=\"filtroCampos\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matTooltip=\"Columnas Filtro\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundFilterList\" class=\"icon-xs\"></mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div *ngIf=\"(botonesMenuFinal.secundario ?? []).length > 0\" class=\"flex-1 bg-app-bar flex items-center justify-between p-1 border-t\">\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.secundario; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.secundario?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!--<div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <pre>{{ this.chkLista.modelosChk | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.cantidadActivos | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.algunosActivos | json }}</pre>\n        </div>-->\n        <div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n\n            <table [id]=\"'tabla_' + nombreColeccion\" [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"true\"\n                [hidden]=\"!esTabla\"\n                class=\"flex-1 table-mantenimiento table-auto h-fit\" mat-table matSort\n                [trackBy]=\"trackByFn\"\n                #tablaMantenimiento\n            >\n\n                <!--<table [dataSource]=\"dataSource\" class=\"table-mantenimiento table-auto h-auto w-full justify-center\" mat-table matSort>-->\n\n\n                <ng-content select=\"[tableDefinitions]\"></ng-content>\n                <ng-container matColumnDef=\"numeracion_automatica\">\n                    <th mat-header-cell *matHeaderCellDef style=\"width: 16px !important\">N\u00BA</th>\n                    <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"p-0 celda-numeracion-fila\">\n                        <div class=\"flex items-center justify-center font-bold numeracionFila\">\n                            <ng-container *ngIf=\"esTabla && paginador\">\n                                {{ (this.paginator?.pageIndex == 0 ? i + 1 : 1 + i + (this.paginator?.pageIndex ?? 1) * (this.paginator?.pageSize ?? 1)) }}\n                            </ng-container>\n                            <ng-container *ngIf=\"!paginador\">\n                                {{ (i + 1) }}\n                            </ng-container>\n                        </div>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef class=\"uppercase\"></td>\n                </ng-container>\n                <jvs-tabla-mantenimiento-column-defs [objThis]=\"this\" [colDetalle]=\"columnasTabla\"\n                    [nombreColeccion]=\"nombreColeccion\" [(chkLista)]=\"chkLista\"></jvs-tabla-mantenimiento-column-defs>\n\n                <tr *matHeaderRowDef=\"visibleColumns; sticky: true\" mat-header-row class=\"title\" matHeader\n                ></tr>\n\n                <ng-container *ngIf=\"!!filaExtraHeader\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n                        [style.height.px]=\"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]=\"0\"\n                        [id]=\"nombreColeccion + '_filaFooter'\"\n                    ></tr>\n                </ng-container>\n\n                <!--\t<tr\n                        *matRowDef=\"let row; columns: visibleColumns;\"\n                        class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n                        mat-row></tr>-->\n                <tr\n                    [matRowKeyboardSelection]=\"tablaMantenimiento\"\n                    [rowModel]=\"row\"\n                    (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n                    *matRowDef=\"let row; let idxTabla = dataIndex; columns: visibleColumns;\"\n                    (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver', tableDataIndex: idxTabla });\"\n                    (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n                    (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n                    [ngClass]=\"classFila(row)\"\n                    @fadeInUp\n                    class=\"trans-ease-out cursor-pointer h-auto\"\n                    [style.height.px]=\"0\"\n                    [id]=\"propiedadSeleccion(row)\"\n                    [matTooltip]=\"procesarRowTooltip(row)\"\n                    matTooltipPosition=\"below\"\n                    [matTooltipPositionAtOrigin]=\"true\"\n                    [matTooltipClass]=\"['bg-red-700', 'text-red-100', 'm-0']\"\n                    [matTooltipDisabled]=\"!procesarRowTooltip(row)\"\n                    [class.regAnulado]=\"row[campoAnulado] == 1\"\n                    [class.regTooltip]=\"!!procesarRowTooltip(row)\"\n                    (keyup.delete)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'eliminar'})\"\n                    mat-row></tr>\n                <ng-container *ngIf=\"filaExtraTemplate\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"student-detail-row h-0\"></tr>\n\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"row.isExpanded ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container [ngTemplateOutlet]=\"filaExtraTemplate\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n            </table>\n\n            <ng-container *ngIf=\"componenteCargadoTotalmente\">\n                <div *ngIf=\"(noData | async) && esTabla\" class=\"flex-1 text-center text-secondary font-medium\">\n                    No se encontraron datos\n                </div>\n            </ng-container>\n        </div>\n        <ng-content select=\"[appendTable]\"></ng-content>\n        <div class=\"flex-1 bg-app-bar flex flex-col sm:flex-row items-start justify-between p-1\">\n            <div class=\"flex-1 flex items-start flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n\n            <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n            </div>\n        </div>\n    </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let column of columnasTabla\">\n        <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!tipoValorFuncion(column.noMostrarEnLista, false)\"\n            class=\"checkbox-item mat-menu-item\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n                <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n    <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n    <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n        <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n        <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n        <!--\t\t</button>-->\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n                [class]=\"(btn.class?btn.class:'')\"\n\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n                [class]=\"(btn.class?btn.class:'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n            </button>\n\n        </ng-container>\n\n    </ng-container>\n    <ng-template #noBarraSuperior>\n\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n            >\n                <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n                >\n                    <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n                        class=\"flex-none icon-xs\"\n                    ></mat-icon>\n                    <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n                </div>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n                <mat-divider></mat-divider>\n            </ng-container>\n            <ng-template #itemsNormales>\n                <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                    *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                    [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                    [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                    [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                    (click)=\"opcMenu(item, btn)\"\n                >\n                    <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n                        <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n                        ></mat-icon>\n                        <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    </div>\n                </button>\n            </ng-template>\n\n        </ng-container>\n\n    </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n        <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n            <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n        <ng-container\n            *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n    </ng-container>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";: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 tr.regTooltip>td:first-child div:first-child:before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child div:first-child:before{content:\"\\26a0\\fe0f  \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child:not(:has(div)):before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child:not(:has(div)):before{content:\"\\26a0\\fe0f  \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}.jvs-tabla-mantenimiento .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}.jvs-tabla-mantenimiento .mat-mdc-menu-panel{min-height:auto!important}.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-cell,.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}.jvs-tabla-mantenimiento .table-container{max-height:600px!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}.jvs-tabla-mantenimiento .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}.jvs-tabla-mantenimiento .table-mantenimiento th .form-input{@apply w-auto;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}.jvs-tabla-mantenimiento .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.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.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.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: "compactSearchMenuTrigger", first: true, predicate: ["compactSearchMenuTrigger"], descendants: true, read: MatMenuTrigger }, { propertyName: "rows", predicate: MatRow, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col\" [ngClass]=\"alturaFull() ? 'h-full' : 'h-fit'\">\n    <div class=\"flex-none 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\" [ngClass]=\"alturaFull() ? 'grow' : ''\">\n        <div class=\"flex-none 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=\"busquedaTipo() && !busquedaCompacta()\" 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]=\"busquedaPlaceholder()\"\n                    (keyup.enter)=\"busquedaTipo() == 'query' ? cargarData() : false;\"\n                    type=\"search\">\n            </div>\n\n\n            <mat-menu #compactSearchMenu=\"matMenu\" class=\"compact-search-menu\">\n                <div class=\"flex items-center gap-1\" (click)=\"$event.stopPropagation()\">\n                    <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs text-gray-400\"></mat-icon>\n                    <input [formControl]=\"cCampoBusqueda\"\n                           class=\"text-xs px-2 py-1 border border-gray-200 rounded outline-none w-[180px] bg-white\"\n                           [placeholder]=\"busquedaPlaceholder()\"\n                           (keyup.enter)=\"ejecutarBusquedaCompacta()\"\n                           type=\"search\"\n                           (click)=\"$event.stopPropagation()\">\n                </div>\n            </mat-menu>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <ng-content select=\"[botonesFiltro]\"></ng-content>\n                <ng-content select=\"[botonesConfig]\"></ng-content>\n\n                <button matRipple *ngIf=\"busquedaTipo() && busquedaCompacta()\"\n                        class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                        matTooltip=\"Buscar...\"\n                        [matMenuTriggerFor]=\"compactSearchMenu\"\n                        #compactSearchMenuTrigger=\"matMenuTrigger\"\n                        type=\"button\">\n                    <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n                </button>\n\n                <button matRipple *ngIf=\"isRecargarUsed || busquedaTipo() == '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)=\"(busquedaTipo() == 'query' ? cargarData() : emitirAccionRecargar())\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n                </button>\n                <button matRipple *ngIf=\"mostrarBotonOrden()\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-blue-700\"\n                    [matTooltip]=\"bDireccionOrden() === 0 ? 'Orden Ascendente' : 'Orden Descendente'\"\n                    (click)=\"toggleDireccionOrden()\"\n                    type=\"button\">\n                    <mat-icon [svgIcon]=\"bDireccionOrden() === 0 ? 'roundArrowUpward' : 'roundArrowDownward'\" class=\"icon-xs\"></mat-icon>\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=\"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                ></tr>\n\n                <ng-container *ngIf=\"!!filaExtraHeader\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n                        [style.height.px]=\"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]=\"0\"\n                        [id]=\"nombreColeccion + '_filaFooter'\"\n                    ></tr>\n                </ng-container>\n\n                <!--\t<tr\n                        *matRowDef=\"let row; columns: visibleColumns;\"\n                        class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n                        mat-row></tr>-->\n                <tr\n                    [matRowKeyboardSelection]=\"tablaMantenimiento\"\n                    [rowModel]=\"row\"\n                    (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n                    *matRowDef=\"let row; let idxTabla = dataIndex; columns: visibleColumns;\"\n                    (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver', tableDataIndex: idxTabla });\"\n                    (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n                    (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n                    [ngClass]=\"classFila(row)\"\n                    @fadeInUp\n                    class=\"trans-ease-out cursor-pointer h-auto\"\n                    [style.height.px]=\"0\"\n                    [id]=\"propiedadSeleccion(row)\"\n                    [matTooltip]=\"procesarRowTooltip(row)\"\n                    matTooltipPosition=\"below\"\n                    [matTooltipPositionAtOrigin]=\"true\"\n                    [matTooltipClass]=\"['bg-red-700', 'text-red-100', 'm-0']\"\n                    [matTooltipDisabled]=\"!procesarRowTooltip(row)\"\n                    [class.regAnulado]=\"row[campoAnulado] == 1\"\n                    [class.regTooltip]=\"!!procesarRowTooltip(row)\"\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-none 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\n                <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\"flex items-center contenedor-botones\">\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 *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n                    </ng-container>\n                </div>-->\n            </div>\n\n            <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n            </div>\n        </div>\n    </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let column of columnasTabla\">\n        <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!tipoValorFuncion(column.noMostrarEnLista, false)\"\n            class=\"checkbox-item mat-menu-item\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n                <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n    <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n    <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n        <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n        <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n        <!--\t\t</button>-->\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n                [class]=\"(btn.class?btn.class:'')\"\n\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n                [class]=\"(btn.class?btn.class:'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n            </button>\n\n        </ng-container>\n\n    </ng-container>\n    <ng-template #noBarraSuperior>\n\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n            >\n                <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n                >\n                    <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n                        class=\"flex-none icon-xs\"\n                    ></mat-icon>\n                    <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n                </div>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n                <mat-divider></mat-divider>\n            </ng-container>\n            <ng-template #itemsNormales>\n                <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                    *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                    [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                    [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                    [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                    (click)=\"opcMenu(item, btn)\"\n                >\n                    <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n                        <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n                        ></mat-icon>\n                        <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    </div>\n                </button>\n            </ng-template>\n\n        </ng-container>\n\n    </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n        <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n            <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n        <ng-container\n            *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n    </ng-container>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";: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;display:flex;flex-direction:column}.jvs-tabla-mantenimiento .contenedor-botones>*:first-child{@apply rounded-l;}.jvs-tabla-mantenimiento .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child div:first-child:before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child div:first-child:before{content:\"\\26a0\\fe0f  \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child:not(:has(div)):before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child:not(:has(div)):before{content:\"\\26a0\\fe0f  \";color:red;margin-right:4px;font-size:12px}.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-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}.compact-search-menu{min-width:200px!important;overflow:hidden}.compact-search-menu input:focus{@apply border-primary;}\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: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i9.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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: '*' })),
@@ -1785,6 +1812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatDividerModule,
                         MatIconModule,
                         MatMenuModule,
+                        MatMenuTrigger,
                         MatPaginatorModule,
                         MatRippleModule,
                         MatSortModule,
@@ -1797,6 +1825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatRowKeyboardSelectionDirective,
                     ], host: {
                         class: 'jvs-tabla-mantenimiento',
+                        '[class.h-full]': 'alturaFull()',
                     }, animations: [
                         trigger('detailExpand', [
                             state('collapsed', style({ height: '0px', minHeight: '0' })),
@@ -1817,8 +1846,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         ]),
                     ], providers: [
                         { provide: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: { formFieldAppearance: 'outline' } }
-                    ], template: "<div class=\"flex flex-col h-fit\">\n    <div class=\"grow flex items-center justify-between bg-white\">\n        <ng-content select=\"[filtro]\"></ng-content>\n    </div>\n\n    <div class=\"flex flex-col border-t\">\n        <div class=\"flex-1 bg-app-bar flex items-center justify-between p-1\">\n            <!--        <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">-->\n            <!--        </div>-->\n            <div class=\"flex items-center flex-wrap mr-1 h-full\" *ngIf=\"leyenda\">\n                <span class=\"font-bold\" [class]=\"leyenda.class\">{{ leyenda.text }}</span>\n            </div>\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.izquierda ?? []).length > 0 \" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.izquierda; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.izquierda?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.crud ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.crud; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.crud?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.principal ?? []).length > 0\" class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.principal; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.principal?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n\n                <div *ngIf=\"(botonesMenuFinal.derecha ?? []).length > 0\" class=\"flex-auto flex items-center justify-end contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.derecha; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.derecha?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n                <ng-content select=\"[objetosMenuPegado]\"></ng-content>\n            </div>\n            <div class=\"flex flex-1 sm:hidden items-center flex-wrap gap-1\">\n                <button class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matRipple\n                    matTooltip=\"Botones de Acci\u00F3n\"\n                    type=\"button\"\n                    [matMenuTriggerFor]=\"menuOpciones\"\n                >\n                    <mat-icon class=\"icon-xs\" svgIcon=\"roundMenu\"></mat-icon>\n                </button>\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <div class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                    <ng-content select=\"[objetosMenu]\"></ng-content>\n                </div>\n            </div>\n            <div *ngIf=\"ctrlBusqueda\" class=\"hidden flex-initial sm:flex items-center form-input  max-w-[150px] bg-card rounded-full border m-1 px-1 border-l-2\"\n            >\n                <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n                <input [formControl]=\"cCampoBusqueda\"\n                    class=\"text-xs px-1 py-1 border-0 outline-none w-full bg-transparent max-w-sm\"\n                    [placeholder]=\"ctrlBusquedaPlaceholder\"\n                    (keyup.enter)=\"ctrlBusqueda == 'query' ? cargarData() : false;\"\n                    type=\"search\">\n            </div>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <ng-content select=\"[botonesFiltro]\"></ng-content>\n                <button matRipple *ngIf=\"isRecargarUsed || ctrlBusqueda == 'query'\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-green-700\"\n                    matTooltip=\"Actualizar datos\"\n                    (click)=\"(ctrlBusqueda == 'query' ? cargarData() : emitirAccionRecargar())\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n                </button>\n                <button matRipple [matMenuTriggerFor]=\"columnFilterMenu\" *ngIf=\"filtroCampos\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                    matTooltip=\"Columnas Filtro\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundFilterList\" class=\"icon-xs\"></mat-icon>\n                </button>\n            </div>\n        </div>\n\n        <div *ngIf=\"(botonesMenuFinal.secundario ?? []).length > 0\" class=\"flex-1 bg-app-bar flex items-center justify-between p-1 border-t\">\n            <div class=\"hidden flex-1 sm:flex items-center flex-wrap gap-1\">\n                <div class=\" flex items-center flex-wrap contenedor-botones\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.secundario; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.secundario?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <!--<div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <pre>{{ this.chkLista.modelosChk | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.cantidadActivos | json }}</pre>\n            <pre>{{ this.chkLista.checkbox.algunosActivos | json }}</pre>\n        </div>-->\n        <div class=\"grow flex flex-col items-stretch contenedor-tabla\" [ngClass]=\"{'table-container overflow-auto': esTabla}\">\n            <ng-content select=\"[cuerpo]\"></ng-content>\n\n            <table [id]=\"'tabla_' + nombreColeccion\" [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"true\"\n                [hidden]=\"!esTabla\"\n                class=\"flex-1 table-mantenimiento table-auto h-fit\" mat-table matSort\n                [trackBy]=\"trackByFn\"\n                #tablaMantenimiento\n            >\n\n                <!--<table [dataSource]=\"dataSource\" class=\"table-mantenimiento table-auto h-auto w-full justify-center\" mat-table matSort>-->\n\n\n                <ng-content select=\"[tableDefinitions]\"></ng-content>\n                <ng-container matColumnDef=\"numeracion_automatica\">\n                    <th mat-header-cell *matHeaderCellDef style=\"width: 16px !important\">N\u00BA</th>\n                    <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"p-0 celda-numeracion-fila\">\n                        <div class=\"flex items-center justify-center font-bold numeracionFila\">\n                            <ng-container *ngIf=\"esTabla && paginador\">\n                                {{ (this.paginator?.pageIndex == 0 ? i + 1 : 1 + i + (this.paginator?.pageIndex ?? 1) * (this.paginator?.pageSize ?? 1)) }}\n                            </ng-container>\n                            <ng-container *ngIf=\"!paginador\">\n                                {{ (i + 1) }}\n                            </ng-container>\n                        </div>\n                    </td>\n                    <td mat-footer-cell *matFooterCellDef class=\"uppercase\"></td>\n                </ng-container>\n                <jvs-tabla-mantenimiento-column-defs [objThis]=\"this\" [colDetalle]=\"columnasTabla\"\n                    [nombreColeccion]=\"nombreColeccion\" [(chkLista)]=\"chkLista\"></jvs-tabla-mantenimiento-column-defs>\n\n                <tr *matHeaderRowDef=\"visibleColumns; sticky: true\" mat-header-row class=\"title\" matHeader\n                ></tr>\n\n                <ng-container *ngIf=\"!!filaExtraHeader\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n                        [style.height.px]=\"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]=\"0\"\n                        [id]=\"nombreColeccion + '_filaFooter'\"\n                    ></tr>\n                </ng-container>\n\n                <!--\t<tr\n                        *matRowDef=\"let row; columns: visibleColumns;\"\n                        class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n                        mat-row></tr>-->\n                <tr\n                    [matRowKeyboardSelection]=\"tablaMantenimiento\"\n                    [rowModel]=\"row\"\n                    (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n                    *matRowDef=\"let row; let idxTabla = dataIndex; columns: visibleColumns;\"\n                    (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver', tableDataIndex: idxTabla });\"\n                    (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n                    (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n                    [ngClass]=\"classFila(row)\"\n                    @fadeInUp\n                    class=\"trans-ease-out cursor-pointer h-auto\"\n                    [style.height.px]=\"0\"\n                    [id]=\"propiedadSeleccion(row)\"\n                    [matTooltip]=\"procesarRowTooltip(row)\"\n                    matTooltipPosition=\"below\"\n                    [matTooltipPositionAtOrigin]=\"true\"\n                    [matTooltipClass]=\"['bg-red-700', 'text-red-100', 'm-0']\"\n                    [matTooltipDisabled]=\"!procesarRowTooltip(row)\"\n                    [class.regAnulado]=\"row[campoAnulado] == 1\"\n                    [class.regTooltip]=\"!!procesarRowTooltip(row)\"\n                    (keyup.delete)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'eliminar'})\"\n                    mat-row></tr>\n                <ng-container *ngIf=\"filaExtraTemplate\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"student-detail-row h-0\"></tr>\n\n                    <ng-container matColumnDef=\"expandedDetail\">\n                        <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"visibleColumns.length\">\n\n                            <div class=\"row m-0 student-element-detail\"\n                                [@detailExpand]=\"row.isExpanded ? 'expanded' : 'collapsed'\"\n                                [style.padding-right.px]=\"row.isExpanded ? 5 : 0\"\n                                [style.padding-left.px]=\"row.isExpanded ? 5 : 0\"\n                            >\n                                <ng-container [ngTemplateOutlet]=\"filaExtraTemplate\"\n                                    [ngTemplateOutletContext]=\"{ row: row }\"></ng-container>\n                            </div>\n\n                        </td>\n                    </ng-container>\n                </ng-container>\n            </table>\n\n            <ng-container *ngIf=\"componenteCargadoTotalmente\">\n                <div *ngIf=\"(noData | async) && esTabla\" class=\"flex-1 text-center text-secondary font-medium\">\n                    No se encontraron datos\n                </div>\n            </ng-container>\n        </div>\n        <ng-content select=\"[appendTable]\"></ng-content>\n        <div class=\"flex-1 bg-app-bar flex flex-col sm:flex-row items-start justify-between p-1\">\n            <div class=\"flex-1 flex items-start flex-wrap gap-1\">\n                <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n\n            <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n            </div>\n        </div>\n    </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let column of columnasTabla\">\n        <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!tipoValorFuncion(column.noMostrarEnLista, false)\"\n            class=\"checkbox-item mat-menu-item\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n                <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n    <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n    <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n        <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n        <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n        <!--\t\t</button>-->\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n                [class]=\"(btn.class?btn.class:'')\"\n\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n                [class]=\"(btn.class?btn.class:'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n            </button>\n\n        </ng-container>\n\n    </ng-container>\n    <ng-template #noBarraSuperior>\n\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n            >\n                <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n                >\n                    <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n                        class=\"flex-none icon-xs\"\n                    ></mat-icon>\n                    <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n                </div>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n                <mat-divider></mat-divider>\n            </ng-container>\n            <ng-template #itemsNormales>\n                <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                    *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                    [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                    [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                    [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                    (click)=\"opcMenu(item, btn)\"\n                >\n                    <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n                        <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n                        ></mat-icon>\n                        <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    </div>\n                </button>\n            </ng-template>\n\n        </ng-container>\n\n    </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n        <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n            <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n        <ng-container\n            *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n    </ng-container>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";: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 tr.regTooltip>td:first-child div:first-child:before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child div:first-child:before{content:\"\\26a0\\fe0f  \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child:not(:has(div)):before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child:not(:has(div)):before{content:\"\\26a0\\fe0f  \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento .mat-mdc-menu-content:not(:empty){@apply flex flex-col items-start;padding:0!important}.jvs-tabla-mantenimiento .mat-mdc-menu-item{line-height:24px!important;height:24px!important;min-height:24px!important}.jvs-tabla-mantenimiento .mat-mdc-menu-panel{min-height:auto!important}.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-cell,.jvs-tabla-mantenimiento .mat-mdc-table .mat-mdc-header-cell .mat-mdc-footer-cell{white-space:unset}.jvs-tabla-mantenimiento .table-container{max-height:600px!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-right{border-left:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0}.jvs-tabla-mantenimiento .table-mantenimiento tr.regAnulado .mat-mdc-cell{color:unset!important}.jvs-tabla-mantenimiento .table-mantenimiento .bg-primary-activo .numeracionFila{@apply rounded-full bg-primary-contrast text-primary mx-1 p-1 w-6 h-6;}.jvs-tabla-mantenimiento .table-mantenimiento th .form-input{@apply w-auto;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell{border-width:1px;border-style:solid}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:not(.celda-numeracion-fila){padding:.05rem .25rem}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-cell:last-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:first-of-type:not(.celda-numeracion-fila),.jvs-tabla-mantenimiento .table-mantenimiento td.mat-mdc-footer-cell:last-of-type:not(.celda-numeracion-fila){padding:0 .25rem}.jvs-tabla-mantenimiento .table-mantenimiento .student-element-detail{overflow:hidden;display:flex;align-items:center;justify-content:center}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-row{height:25px!important;color:rgb(var(--color-primary))!important;background-color:rgb(var(--color-primary-contrast))!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-header-cell{padding:5px;font-size:10px;line-height:10px;font-weight:700!important;color:inherit}.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):hover,.jvs-tabla-mantenimiento .table-mantenimiento .mdc-data-table__row:not(.mdc-data-table__row--selected):not(.elemento-seleccionado):focus{background-color:rgba(var(--color-primary-contrast),.04)}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-cell,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-cell{font-size:10px}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-row .mat-mdc-footer-cell:empty,.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-footer-row .mat-mdc-footer-cell:empty{border-width:0!important}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-cell{@apply leading-tight;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell{border-color:#d4d0d0;@apply text-center uppercase;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container{@apply flex items-center justify-between w-full;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-content{@apply inline w-full text-center;}.jvs-tabla-mantenimiento .table-mantenimiento th.mat-mdc-header-cell .mat-sort-header-container .mat-sort-header-arrow{@apply flex-none;}.jvs-tabla-mantenimiento .table-mantenimiento .mat-mdc-sort-header-content{width:100%;text-align:center;display:unset;align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$2.Overlay }, { type: i0.ViewContainerRef }, { type: TablaMantenimientoService }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+                    ], template: "<div class=\"flex flex-col\" [ngClass]=\"alturaFull() ? 'h-full' : 'h-fit'\">\n    <div class=\"flex-none 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\" [ngClass]=\"alturaFull() ? 'grow' : ''\">\n        <div class=\"flex-none 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=\"busquedaTipo() && !busquedaCompacta()\" 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]=\"busquedaPlaceholder()\"\n                    (keyup.enter)=\"busquedaTipo() == 'query' ? cargarData() : false;\"\n                    type=\"search\">\n            </div>\n\n\n            <mat-menu #compactSearchMenu=\"matMenu\" class=\"compact-search-menu\">\n                <div class=\"flex items-center gap-1\" (click)=\"$event.stopPropagation()\">\n                    <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs text-gray-400\"></mat-icon>\n                    <input [formControl]=\"cCampoBusqueda\"\n                           class=\"text-xs px-2 py-1 border border-gray-200 rounded outline-none w-[180px] bg-white\"\n                           [placeholder]=\"busquedaPlaceholder()\"\n                           (keyup.enter)=\"ejecutarBusquedaCompacta()\"\n                           type=\"search\"\n                           (click)=\"$event.stopPropagation()\">\n                </div>\n            </mat-menu>\n            <div class=\"flex-none flex items-center justify-end border-l-2\">\n                <ng-content select=\"[botonesFiltro]\"></ng-content>\n                <ng-content select=\"[botonesConfig]\"></ng-content>\n\n                <button matRipple *ngIf=\"busquedaTipo() && busquedaCompacta()\"\n                        class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1\"\n                        matTooltip=\"Buscar...\"\n                        [matMenuTriggerFor]=\"compactSearchMenu\"\n                        #compactSearchMenuTrigger=\"matMenuTrigger\"\n                        type=\"button\">\n                    <mat-icon svgIcon=\"roundSearch\" class=\"icon-xs\"></mat-icon>\n                </button>\n\n                <button matRipple *ngIf=\"isRecargarUsed || busquedaTipo() == '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)=\"(busquedaTipo() == 'query' ? cargarData() : emitirAccionRecargar())\"\n                    type=\"button\">\n                    <mat-icon svgIcon=\"roundRefresh\" class=\"icon-xs\"></mat-icon>\n\n                </button>\n                <button matRipple *ngIf=\"mostrarBotonOrden()\"\n                    class=\"flex items-center justify-center text-2xs leading-none rounded-full p-1 text-blue-700\"\n                    [matTooltip]=\"bDireccionOrden() === 0 ? 'Orden Ascendente' : 'Orden Descendente'\"\n                    (click)=\"toggleDireccionOrden()\"\n                    type=\"button\">\n                    <mat-icon [svgIcon]=\"bDireccionOrden() === 0 ? 'roundArrowUpward' : 'roundArrowDownward'\" class=\"icon-xs\"></mat-icon>\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=\"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                ></tr>\n\n                <ng-container *ngIf=\"!!filaExtraHeader\">\n                    <tr mat-row *matRowDef=\"let row; columns: ['filaExtraHeader']\" class=\"student-detail-row\"\n                        [style.height.px]=\"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]=\"0\"\n                        [id]=\"nombreColeccion + '_filaFooter'\"\n                    ></tr>\n                </ng-container>\n\n                <!--\t<tr\n                        *matRowDef=\"let row; columns: visibleColumns;\"\n                        class=\"hover:bg-secondary trans-ease-out cursor-pointer\"\n                        mat-row></tr>-->\n                <tr\n                    [matRowKeyboardSelection]=\"tablaMantenimiento\"\n                    [rowModel]=\"row\"\n                    (seleccionarSiguiente)=\"opcMenu($event, {seccion: nombreColeccion, tipo: 'ver'});\"\n\n                    *matRowDef=\"let row; let idxTabla = dataIndex; columns: visibleColumns;\"\n                    (click)=\"seleccionarItem(row); opcMenu(row, {seccion: nombreColeccion, tipo: 'ver', tableDataIndex: idxTabla });\"\n                    (dblclick)=\"opcMenu(row, {seccion: nombreColeccion, tipo: 'seleccionar'}); dblclickItem.emit(row)\"\n                    (contextmenu)=\"(abrirMenuContextual($event, row)); $event. preventDefault();\"\n                    [ngClass]=\"classFila(row)\"\n                    @fadeInUp\n                    class=\"trans-ease-out cursor-pointer h-auto\"\n                    [style.height.px]=\"0\"\n                    [id]=\"propiedadSeleccion(row)\"\n                    [matTooltip]=\"procesarRowTooltip(row)\"\n                    matTooltipPosition=\"below\"\n                    [matTooltipPositionAtOrigin]=\"true\"\n                    [matTooltipClass]=\"['bg-red-700', 'text-red-100', 'm-0']\"\n                    [matTooltipDisabled]=\"!procesarRowTooltip(row)\"\n                    [class.regAnulado]=\"row[campoAnulado] == 1\"\n                    [class.regTooltip]=\"!!procesarRowTooltip(row)\"\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-none 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\n                <div *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\"flex items-center contenedor-botones\">\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 *ngIf=\"(botonesMenuFinal.inferior ?? []).length > 0\" class=\" flex items-center flex-wrap\">\n                    <ng-container *ngFor=\"let btn of botonesMenu.inferior; let idx = index;\">\n                        <ng-container *ngTemplateOutlet=\"botonesSuperiores; context:{btn: btn, idx: {inicio: idx, fin: botonesMenu.inferior?.length}}\"></ng-container>\n                    </ng-container>\n                </div>-->\n            </div>\n\n            <div *ngIf=\"esTabla && paginador\" class=\"flex-1 sm:flex-none flex items-center justify-end\">\n                <mat-paginator class=\"tabla-mantenimiento-paginador\" [pageSizeOptions]=\"paginacion.pageSizeOptions\" [pageIndex]=\"paginacion.pageIndex - 1\" [length]=\"paginacion.pageLength\" [pageSize]=\"paginacion.pageSize\" (page)=\"paginacion.pageCurrent = $event; emitirResultados();\" ></mat-paginator>\n            </div>\n        </div>\n    </div>\n\n</div>\n\n\n\n<!-- SECCION DE TEMPLATES O MENUS -->\n\n\n<mat-menu #columnFilterMenu=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let column of columnasTabla\">\n        <button (click)=\"toggleColumnVisibility(column, $event)\" *ngIf=\"!tipoValorFuncion(column.noMostrarEnLista, false)\"\n            class=\"checkbox-item mat-menu-item\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" [(ngModel)]=\"column.visible\" [ngModelOptions]=\"{standalone: true}\" color=\"primary\">\n                <span [innerHTML]=\"(column.labelLista ?? column.label).replace('<br>', ' ')\"></span>\n            </mat-checkbox>\n        </button>\n    </ng-container>\n</mat-menu>\n\n\n\n\n\n\n<ng-template #botonesSuperiores let-btn=\"btn\" let-idx=\"idx\">\n    <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: true, idx: idx}\"></ng-container>\n</ng-template>\n\n<ng-template #botonesContextual let-btn=\"btn\" let-item=\"item\" let-barraSuperior=\"barraSuperior\" let-idx=\"idx\">\n\n    <ng-container *ngIf=\"barraSuperior; else noBarraSuperior\">\n\n        <!--\t\t<button mat-button style=\"min-width: unset; border: 1px !important;\" class=\"uppercase border border-gray rounded-none h-full px-1 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\">-->\n        <!--\t\t\t<mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" size=\"15px\" class=\"icon-xs\"></mat-icon>-->\n        <!--\t\t</button>-->\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"(!btn.esVisible || btn.esVisible(item, this)) && subItemsActivos(btn, item)\"\n                [class]=\"(btn.class?btn.class:'')\"\n\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" ></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                <mat-icon class=\"icon-xs\" svgIcon=\"fa5sCaretDown\" ></mat-icon>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <button class=\"flex items-center justify-between uppercase text-2xs leading-none rounded-none px-2 py-1 bg-opacity-95 hover:bg-opacity-100 disabled:opacity-50 disabled:text-secondary disabled:!bg-gray-300 dark:disabled:!bg-gray-500 mat-elevation-z2\" type=\"button\"\n\n                *ngIf=\"!btn.esVisible || btn.esVisible(item, this)\"\n                [class]=\"(btn.class?btn.class:'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo])) && !(['nuevo', 'editar', 'eliminar'].includes(btn.tipo))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn)\"\n                [style.min-width]=\"((btn.soloIcono ?? tipoValorFuncion(soloIconos)) ? 'unset' : '')\"\n                [matTooltip]=\"btn.tooltip || (btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo))) \"\n\n                [matBadge]=\"btn.badge\"\n                matBadgeSize=\"small\"\n            >\n                <mat-icon class=\"icon-xs\" [class.mr-0.5]=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\" *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"></mat-icon>\n                <span class=\"whitespace-nowrap\" *ngIf=\"!(btn.soloIcono ?? tipoValorFuncion(soloIconos))\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n            </button>\n\n        </ng-container>\n\n    </ng-container>\n    <ng-template #noBarraSuperior>\n\n        <ng-container *ngIf=\"btn.subItems && btn.subItems.length > 0\">\n            <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                (click)=\"opcMenu(item, btn); $event.stopPropagation();\"\n                [matMenuTriggerFor]=\"menuOtrosBarra.menu\"\n            >\n                <div class=\"flex w-full items-center justify-between uppercase text-2xs\"\n                >\n                    <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\"\n                        class=\"flex-none icon-xs\"\n                    ></mat-icon>\n                    <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    <mat-icon class=\"flex-none icon-xs\" svgIcon=\"fa5sCaretRight\"></mat-icon>\n                </div>\n            </button>\n\n            <jvs-tabla-mantenimiento-menu #menuOtrosBarra\n                [objThis]=\"objThis\"\n                [nombreColeccion]=\"nombreColeccion\"\n                [item]=\"item\"\n                [derechosActuales]=\"derechosActuales\"\n                [subItems]=\"btn.subItems\"\n                (opcionSelecionada)=\"opcMenu($event.item, $event.btn)\"\n                [botonTemplate]=\"botonesContextual\"\n            >\n            </jvs-tabla-mantenimiento-menu>\n        </ng-container>\n        <ng-container *ngIf=\"!btn.subItems || btn.subItems.length == 0\">\n            <ng-container *ngIf=\"btn.tipo == '-#SEPARADOR#-'; else itemsNormales\">\n                <mat-divider></mat-divider>\n            </ng-container>\n            <ng-template #itemsNormales>\n                <button class=\"flex items-center justify-between uppercase w-full rounded-none px-2 disabled:opacity-50 disabled:text-secondary disabled:bg-transparent\" mat-menu-item type=\"button\"\n                    *ngIf=\"!btn.noContextual && (!btn.esVisible || btn.esVisible(item, this))\"\n                    [class]=\"(btn.class?btn.class.replace('text-white', '').replace('bg', 'text'):'text-secondary')\"\n                    [ngClass]=\"{'text-secondary italic': !ignorarDerechos && !btn.esIndependiente && (!btn.ignorarDerecho && (!derechosActuales || !derechosActuales[btn.cDerechoCodigo ?? btn.tipo]))}\"\n                    [disabled]=\"!btn.esIndependiente && botonDisabled(btn, item)\"\n                    (click)=\"opcMenu(item, btn)\"\n                >\n                    <div class=\"flex w-full items-center justify-between uppercase text-2xs\">\n                        <mat-icon *ngIf=\"btn.icono\" [svgIcon]=\"btn.icono\" class=\"flex-none icon-xs\"\n                        ></mat-icon>\n                        <span class=\"grow text-2xs\">{{ btn.label ? btn.label : ( (derechosActuales && derechosActuales[btn.cDerechoCodigo ?? btn.tipo]) ? derechosActuales[btn.cDerechoCodigo ?? btn.tipo]['cDerechoNombre'] : capitalizarTexto(btn.tipo)) }}</span>\n                    </div>\n                </button>\n            </ng-template>\n\n        </ng-container>\n\n    </ng-template>\n\n</ng-template>\n\n<ng-template #userMenu let-item=\"item\">\n    <div class=\"mat-menu bg-white rounded mat-elevation-z8 shadow botonesContextual\">\n        <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n            <ng-container *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n\n\n<mat-menu #menuOpciones=\"matMenu\" xPosition=\"before\" yPosition=\"below\">\n    <ng-container *ngFor=\"let btn of listaMenuCompleto\">\n        <ng-container\n            *ngTemplateOutlet=\"botonesContextual; context:{btn: btn, item: objSeleccionado, barraSuperior: false}\"></ng-container>\n    </ng-container>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";: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;display:flex;flex-direction:column}.jvs-tabla-mantenimiento .contenedor-botones>*:first-child{@apply rounded-l;}.jvs-tabla-mantenimiento .contenedor-botones>*:last-child{@apply rounded-r;}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child div:first-child:before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child div:first-child:before{content:\"\\26a0\\fe0f  \";color:red;margin-right:4px;font-size:12px}.jvs-tabla-mantenimiento tr.regTooltip>td:first-child:not(:has(div)):before,.jvs-tabla-mantenimiento tr.regTooltip>th:first-child:not(:has(div)):before{content:\"\\26a0\\fe0f  \";color:red;margin-right:4px;font-size:12px}.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-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}.compact-search-menu{min-width:200px!important;overflow:hidden}.compact-search-menu input:focus{@apply border-primary;}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.FormBuilder }, { type: i2$3.Overlay }, { type: i0.ViewContainerRef }, { type: TablaMantenimientoService }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: HostBinding
             }], dataSuscription: [{
                 type: Input
@@ -1828,10 +1857,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], nombreColeccion: [{
                 type: Input,
                 args: [{ required: true }]
-            }], ctrlBusquedaValue: [{
-                type: Input
-            }], ctrlBusquedaPlaceholder: [{
-                type: Input
             }], filtroCampos: [{
                 type: Input
             }], paginador: [{
@@ -1903,8 +1928,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], userMenu: [{
                 type: ViewChild,
                 args: ['userMenu']
-            }], ctrlBusqueda: [{
-                type: Input
+            }], compactSearchMenuTrigger: [{
+                type: ViewChild,
+                args: ['compactSearchMenuTrigger', { read: MatMenuTrigger }]
             }], leyenda: [{
                 type: Input
             }], idTabla: [{
@@ -1953,6 +1979,8 @@ class MatSuffixSearchButtonComponent {
         return this.fControl;
     }
     emitirClick() {
+        if (this.control.disabled)
+            return;
         if (this.control.value) {
             this.control.reset();
             this.eventLimpiar.emit(true);
@@ -1962,7 +1990,7 @@ class MatSuffixSearchButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatSuffixSearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MatSuffixSearchButtonComponent, isStandalone: true, selector: "div[matSuffix][matSuffixSearchButton]", inputs: { fControl: "fControl" }, outputs: { eventLimpiar: "eventLimpiar", eventBuscar: "eventBuscar" }, host: { classAttribute: "flex items-center justify-start" }, ngImport: i0, template: "<button matRipple type=\"button\" class=\"boton-circular-gris\"\n    (click)=\"emitirClick(); $event.preventDefault();\"\n>\n    <mat-icon [svgIcon]=\"(control.value ? 'roundCancel' : 'roundSearch')\" class=\"icon-xs\"></mat-icon>\n</button>\n", dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MatSuffixSearchButtonComponent, isStandalone: true, selector: "div[matSuffix][matSuffixSearchButton]", inputs: { fControl: "fControl" }, outputs: { eventLimpiar: "eventLimpiar", eventBuscar: "eventBuscar" }, host: { classAttribute: "flex items-center justify-start" }, ngImport: i0, template: "@if (!control.disabled) {\n    <button matRipple type=\"button\" class=\"boton-circular-gris\"\n        (click)=\"emitirClick(); $event.preventDefault();\"\n    >\n        <mat-icon [svgIcon]=\"(control.value ? 'roundCancel' : 'roundSearch')\" class=\"icon-xs\"></mat-icon>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MatSuffixSearchButtonComponent, decorators: [{
             type: Component,
@@ -1971,7 +1999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatIcon
                     ], host: {
                         class: 'flex items-center justify-start',
-                    }, template: "<button matRipple type=\"button\" class=\"boton-circular-gris\"\n    (click)=\"emitirClick(); $event.preventDefault();\"\n>\n    <mat-icon [svgIcon]=\"(control.value ? 'roundCancel' : 'roundSearch')\" class=\"icon-xs\"></mat-icon>\n</button>\n" }]
+                    }, template: "@if (!control.disabled) {\n    <button matRipple type=\"button\" class=\"boton-circular-gris\"\n        (click)=\"emitirClick(); $event.preventDefault();\"\n    >\n        <mat-icon [svgIcon]=\"(control.value ? 'roundCancel' : 'roundSearch')\" class=\"icon-xs\"></mat-icon>\n    </button>\n}\n" }]
         }], propDecorators: { fControl: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2036,7 +2064,7 @@ class MenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuComponent, isStandalone: true, selector: "jvs-menu", inputs: { cssBoton: "cssBoton", title: "title", disabled: "disabled", itemSeleccion: "itemSeleccion", menu: "menu" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "matmenus", predicate: MatMenu, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"yet\">\n    <button matRipple [matMenuTriggerFor]=\"matmenus.first\"\n        [disabled]=\"disabled\"\n        type=\"button\" [class]=\"cssBoton ?? 'boton-circular boton-circular-red border-0'\"\n        (click)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\n        [matTooltip]=\"title\"\n    >\n        <ng-content></ng-content>\n    </button>\n</ng-container>\n\n<!--<pre  class=\"text-indigo-900\">{{_submenus | json}}</pre>-->\n<ng-container *ngFor=\"let menu of _submenus\">\n    <!--<pre  class=\"text-red-700\">{{menu | json}}</pre>-->\n    <mat-menu xPosition=\"before\" yPosition=\"below\" class=\"max-w-none\">\n        <ng-container *ngFor=\"let item of menu\">\n            <!--<pre *ngIf=\"menu$\" class=\"text-orange-700\">{{item | json}}</pre>-->\n            <!--<span>{{ [item.label, item.idxOpcionCalc!=-1 , yet , (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion})), [!item.esVisible , (item.esVisible ? item.esVisible({itemMenu: item, archivo: itemSeleccion}) : 'NO HAY')]] | json }}</span>-->\n            <button mat-menu-item *ngIf=\"item.idxOpcionCalc!=-1 && yet && (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion}))\"\n                class=\"flex items-center justify-items-center uppercase w-full rounded-none px-2 \"\n                [matMenuTriggerFor]=\"getMenu(item.idxOpcionCalc)\">\n                <mat-icon *ngIf=\"item.icono\"\n                    class=\"flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs\"\n                    [svgIcon]=\"item.icono ?? 'fa5sFileSignature'\"\n                ></mat-icon>\n                <span class=\"grow text-2xs\" [innerHTML]=\"item.label\">{{item.label}}</span>\n            </button>\n            <button mat-menu-item *ngIf=\"item.idxOpcionCalc==-1 && (!item.esVisible || item.esVisible(item))\" (click)=\"onClick(item.valorSeleccion)\"\n                class=\"flex items-center justify-items-center uppercase w-full rounded-none px-2 \"\n            >\n                <mat-icon *ngIf=\"item.icono\"\n                    class=\"flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs\"\n                    [svgIcon]=\"item.icono ?? 'fa5sFileSignature'\"\n                ></mat-icon>\n                <span class=\"grow text-2xs\" [innerHTML]=\"item.label\">{{item.label}} </span>\n            </button>\n\n        </ng-container>\n    </mat-menu>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuComponent, isStandalone: true, selector: "jvs-menu", inputs: { cssBoton: "cssBoton", title: "title", disabled: "disabled", itemSeleccion: "itemSeleccion", menu: "menu" }, outputs: { action: "action" }, viewQueries: [{ propertyName: "matmenus", predicate: MatMenu, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"yet\">\n    <button matRipple [matMenuTriggerFor]=\"matmenus.first\"\n        [disabled]=\"disabled\"\n        type=\"button\" [class]=\"cssBoton ?? 'boton-circular boton-circular-red border-0'\"\n        (click)=\"$event.preventDefault(); $event.stopImmediatePropagation()\"\n        [matTooltip]=\"title\"\n    >\n        <ng-content></ng-content>\n    </button>\n</ng-container>\n\n<!--<pre  class=\"text-indigo-900\">{{_submenus | json}}</pre>-->\n<ng-container *ngFor=\"let menu of _submenus\">\n    <!--<pre  class=\"text-red-700\">{{menu | json}}</pre>-->\n    <mat-menu xPosition=\"before\" yPosition=\"below\" class=\"max-w-none\">\n        <ng-container *ngFor=\"let item of menu\">\n            <!--<pre *ngIf=\"menu$\" class=\"text-orange-700\">{{item | json}}</pre>-->\n            <!--<span>{{ [item.label, item.idxOpcionCalc!=-1 , yet , (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion})), [!item.esVisible , (item.esVisible ? item.esVisible({itemMenu: item, archivo: itemSeleccion}) : 'NO HAY')]] | json }}</span>-->\n            <button mat-menu-item *ngIf=\"item.idxOpcionCalc!=-1 && yet && (!item.esVisible || item.esVisible({itemMenu: item, archivo: itemSeleccion}))\"\n                class=\"flex items-center justify-items-center uppercase w-full rounded-none px-2 \"\n                [matMenuTriggerFor]=\"getMenu(item.idxOpcionCalc)\">\n                <mat-icon *ngIf=\"item.icono\"\n                    class=\"flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs\"\n                    [svgIcon]=\"item.icono ?? 'fa5sFileSignature'\"\n                ></mat-icon>\n                <span class=\"grow text-2xs\" [innerHTML]=\"item.label\">{{item.label}}</span>\n            </button>\n            <button mat-menu-item *ngIf=\"item.idxOpcionCalc==-1 && (!item.esVisible || item.esVisible(item))\" (click)=\"onClick(item.valorSeleccion)\"\n                class=\"flex items-center justify-items-center uppercase w-full rounded-none px-2 \"\n            >\n                <mat-icon *ngIf=\"item.icono\"\n                    class=\"flex-none flex items-center justify-center !text-red-700 !mr-1 icon-2xs\"\n                    [svgIcon]=\"item.icono ?? 'fa5sFileSignature'\"\n                ></mat-icon>\n                <span class=\"grow text-2xs\" [innerHTML]=\"item.label\">{{item.label}} </span>\n            </button>\n\n        </ng-container>\n    </mat-menu>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -2094,77 +2122,94 @@ function generarArbol(params) {
 }
 
 class ListaArbolComponent {
-    listaSuscription;
-    nombreColeccion;
-    checkbox = false;
-    expandirRecursivo = false;
-    checkboxSeleccionados = [];
-    campoId;
-    campoIdPadre;
-    campoStr;
-    campoOrden;
-    strHijoContainer = 'hijos';
-    menuContextual;
-    classSeleccionado = ['bg-primary-activo', 'text-primary', 'dark:!bg-primary-dark-activo'];
-    classAnulado = ['line-through', 'text-red', 'italic'];
-    campoAnulado;
-    templateTxtData;
-    condicionMostrar;
-    condicionesClaseFila = () => [];
-    set selectionModel(val) {
-        this.objSeleccionado = val;
-    }
-    selectionModelChange = new EventEmitter();
-    seleccionado = new EventEmitter();
-    listaCheck = new EventEmitter();
-    listaCheckObj = new EventEmitter();
-    _idTabla = [];
-    get idTabla() {
-        return this._idTabla;
-    }
-    set idTabla(val) {
-        if (Array.isArray(val)) {
-            this._idTabla = val;
-        }
-        else {
-            this._idTabla.push(val);
+    // Inputs
+    listaSuscription = input.required();
+    nombreColeccion = input.required();
+    checkbox = input(false);
+    expandirRecursivo = input(false);
+    checkboxSeleccionados = input([]);
+    campoId = input.required();
+    campoIdPadre = input.required();
+    campoStr = input(''); // Optional - can use templateTxtData instead
+    campoOrden = input();
+    strHijoContainer = input('hijos');
+    menuContextual = input();
+    classSeleccionado = input(['bg-primary-activo', 'text-primary', 'dark:!bg-primary-dark-activo']);
+    classAnulado = input(['line-through', 'text-red', 'italic']);
+    campoAnulado = input();
+    templateTxtData = input();
+    condicionMostrar = input();
+    condicionesClaseFila = input(() => []);
+    // idTabla input with transform to support both string and string[]
+    idTabla = input.required({
+        transform: (val) => {
+            if (Array.isArray(val)) {
+                this._idTabla.set(val);
+                return val;
+            }
+            else {
+                this._idTabla.update(current => [...current, val]);
+                return [val];
+            }
         }
-    }
-    get buscarItemSeleccionado() {
-        const dRet = this.listaOriginal.find(itm => this._seleccionado === this.propiedadSeleccion(itm));
-        return dRet ?? null;
-    }
-    get objSeleccionado() {
-        return this.buscarItemSeleccionado; // ?? this.objThis?.['seleccionados']?.[this.nombreColeccion];
-    }
-    set objSeleccionado(val) {
-        this.seleccionarItem(val, true);
-    }
+    });
+    // selectionModel input for backward compatibility  
+    selectionModel = input();
+    // Outputs
+    selectionModelChange = output();
+    seleccionado = output();
+    listaCheck = output();
+    listaCheckObj = output();
+    // Internal state as signals
+    _idTabla = signal([]);
+    _seleccionado = signal(null);
+    listaMuestraArbol = signal([]);
+    listaOriginal = signal([]);
     chkLista = new DataModel$1();
-    listaMuestraArbol = [];
-    listaOriginal = [];
-    treeControl = new NestedTreeControl((node) => node[this.strHijoContainer]);
-    _seleccionado = {};
-    ngOnInit() {
-        this.listaSuscription.subscribe(res => {
+    // Computed values
+    idTablaValue = computed(() => this._idTabla());
+    buscarItemSeleccionado = computed(() => {
+        const selId = this._seleccionado();
+        const lista = this.listaOriginal();
+        if (!selId)
+            return null;
+        return lista.find(itm => selId === this.propiedadSeleccion(itm)) ?? null;
+    });
+    objSeleccionado = computed(() => this.buscarItemSeleccionado());
+    treeControl = new NestedTreeControl((node) => node[this.strHijoContainer()]);
+    // Convert signal to observable for proper subscription management
+    listaSuscription$ = toObservable(this.listaSuscription);
+    constructor() {
+        // Watch selectionModel input for backward compatibility
+        effect(() => {
+            const selModel = this.selectionModel();
+            if (selModel) {
+                untracked(() => this.seleccionarItem(selModel, true));
+            }
+        });
+        // Setup subscription with automatic cleanup using switchMap
+        // switchMap automatically unsubscribes from previous observable when a new one arrives
+        this.listaSuscription$
+            .pipe(switchMap(obs => obs), takeUntilDestroyed())
+            .subscribe(res => {
             if (res) {
-                this.listaOriginal = res;
+                this.listaOriginal.set(res);
                 const listaAs = generarArbol({
                     lista: res,
-                    campoId: this.campoId,
-                    campoIdPadre: this.campoIdPadre,
+                    campoId: this.campoId(),
+                    campoIdPadre: this.campoIdPadre(),
                     idPadre: null,
-                    strChildren: this.strHijoContainer,
-                    campoOrden: this.campoOrden
+                    strChildren: this.strHijoContainer(),
+                    campoOrden: this.campoOrden(),
+                });
+                // Use untracked to avoid unnecessary re-renders
+                untracked(() => {
+                    this.listaMuestraArbol.set(listaAs);
                 });
-                this.listaMuestraArbol = [];
-                setTimeout(() => {
-                    this.listaMuestraArbol = listaAs;
-                }, 1);
-                if (this.checkbox) {
-                    this.chkLista.agregarControles(res, this.campoId);
-                    this.checkboxSeleccionados.forEach((chkSel) => {
-                        this.chkLista.setState(chkSel[this.campoId], true);
+                if (this.checkbox()) {
+                    this.chkLista.agregarControles(res, this.campoId());
+                    this.checkboxSeleccionados().forEach((chkSel) => {
+                        this.chkLista.setState(chkSel[this.campoId()], true);
                     });
                     this.emitirModeloCheck();
                 }
@@ -2173,47 +2218,50 @@ class ListaArbolComponent {
     }
     idTablaValor(data) {
         if (data) {
-            if (this.idTabla.length < 1) {
+            const idTablaVal = this._idTabla();
+            if (idTablaVal.length < 1) {
                 return shortHash(JSON.stringify({ data, claseFinal: undefined }));
             }
-            return this.idTabla.map(d => data[d]).join('-');
+            return idTablaVal.map(d => data[d]).join('-');
         }
         return '';
     }
     propiedadSeleccion(item) {
-        return `${this.nombreColeccion}_${this.idTablaValor(item)}`;
+        return `${this.nombreColeccion()}_${this.idTablaValor(item)}`;
     }
     esSeleccionActual(item) {
-        return this._seleccionado === this.propiedadSeleccion(item);
+        return this._seleccionado() === this.propiedadSeleccion(item);
     }
     seleccionarItem(item, forzado = false) {
         const idItem = this.propiedadSeleccion(item);
         if (forzado) {
-            this._seleccionado = idItem;
+            this._seleccionado.set(idItem);
         }
         else {
-            this._seleccionado = this._seleccionado === idItem ? null : idItem;
+            this._seleccionado.update(current => current === idItem ? null : idItem);
         }
-        this.selectionModelChange.emit(this.objSeleccionado);
-        this.seleccionado.emit(this.objSeleccionado);
+        const objSel = this.objSeleccionado();
+        this.selectionModelChange.emit(objSel);
+        this.seleccionado.emit(objSel);
     }
-    hasChild = (_, node) => !!node[this.strHijoContainer] && node[this.strHijoContainer].length > 0;
+    hasChild = (_, node) => {
+        const strHijo = this.strHijoContainer();
+        return !!node[strHijo] && node[strHijo].length > 0;
+    };
     opcMenu(v) {
-        // console.warn(v);
-        // console.warn(this.objSeleccionado);
-        const opAdic = { seccion: this.nombreColeccion };
-        opAdic['itemSeleccionado'] = this.objSeleccionado;
-        // v = {...v, ...opAdic};
-        // this.seleccionado.emit(v);
+        const opAdic = { seccion: this.nombreColeccion() };
+        opAdic['itemSeleccionado'] = this.objSeleccionado();
     }
     emitirModeloCheck() {
         this.listaCheck.emit(this.chkLista.generarLista());
         this.listaCheckObj.emit(this.chkLista.generarLista('object'));
     }
     cambiarPadre(checkActual, estado) {
-        const parentId = checkActual[this.campoIdPadre];
+        const parentId = checkActual[this.campoIdPadre()];
         if (parentId) {
-            const padreAct = this.listaMuestraArbol.find((itm) => itm[this.campoId] == parentId);
+            // Fix: buscar en listaOriginal en lugar de listaMuestraArbol
+            const listaOrig = this.listaOriginal();
+            const padreAct = listaOrig.find((itm) => itm[this.campoId()] === parentId);
             if (padreAct) {
                 this.chkLista.setState(parentId, this.hijosActivos('checked', padreAct) || this.hijosActivos('indeterminate', padreAct));
                 this.cambiarPadre(padreAct, estado);
@@ -2227,14 +2275,14 @@ class ListaArbolComponent {
             });
         }
         this.cambiarPadre(checkActual, estado);
-        this.chkLista.setState(checkActual[this.campoId], estado);
+        this.chkLista.setState(checkActual[this.campoId()], estado);
     }
     hijosActivos(tipo, checkActual) {
         let totalHijos = 0;
         let cantActivo = 0;
         if (this.hasChild(0, checkActual)) {
             (this.treeControl.getChildren(checkActual) ?? []).forEach((vas) => {
-                if (this.chkLista.getState(vas[this.campoId] + '')) {
+                if (this.chkLista.getState(vas[this.campoId()] + '')) {
                     cantActivo++;
                 }
                 totalHijos++;
@@ -2242,29 +2290,30 @@ class ListaArbolComponent {
         }
         switch (tipo) {
             case 'checked':
-                return (cantActivo == totalHijos);
+                return (cantActivo === totalHijos);
             case 'indeterminate':
-                if (cantActivo == totalHijos) {
-                    this.chkLista.setState(checkActual[this.campoId], true);
-                }
-                return ((cantActivo > 0) && (cantActivo != totalHijos));
+                // Fix: remover efecto secundario
+                return ((cantActivo > 0) && (cantActivo !== totalHijos));
         }
         return false;
     }
     classFila(item) {
         let claseFinal = [];
-        if (this.campoAnulado && (item[this.campoAnulado] == 1)) {
-            claseFinal = claseFinal.concat(this.classAnulado);
+        const campoAnul = this.campoAnulado();
+        if (campoAnul && (item[campoAnul] === 1)) {
+            claseFinal = claseFinal.concat(this.classAnulado());
         }
-        if (this.objSeleccionado == item || this.esSeleccionActual(item)) {
-            claseFinal = claseFinal.concat(this.classSeleccionado);
+        const objSel = this.objSeleccionado();
+        if (objSel === item || this.esSeleccionActual(item)) {
+            claseFinal = claseFinal.concat(this.classSeleccionado());
         }
-        claseFinal = claseFinal.concat(this.condicionesClaseFila(item));
-        item.claseFinal = claseFinal;
+        const condClases = this.condicionesClaseFila();
+        claseFinal = claseFinal.concat(condClases(item));
+        // Fix: no mutar el objeto original
         return claseFinal;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListaArbolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListaArbolComponent, isStandalone: true, selector: "jvs-lista-arbol", inputs: { listaSuscription: "listaSuscription", nombreColeccion: "nombreColeccion", checkbox: "checkbox", expandirRecursivo: "expandirRecursivo", checkboxSeleccionados: "checkboxSeleccionados", campoId: "campoId", campoIdPadre: "campoIdPadre", campoStr: "campoStr", campoOrden: "campoOrden", strHijoContainer: "strHijoContainer", menuContextual: "menuContextual", classSeleccionado: "classSeleccionado", classAnulado: "classAnulado", campoAnulado: "campoAnulado", templateTxtData: "templateTxtData", condicionMostrar: "condicionMostrar", condicionesClaseFila: "condicionesClaseFila", selectionModel: "selectionModel", idTabla: "idTabla" }, outputs: { selectionModelChange: "selectionModelChange", seleccionado: "seleccionado", listaCheck: "listaCheck", listaCheckObj: "listaCheckObj" }, ngImport: i0, template: "<mat-tree [dataSource]=\"listaMuestraArbol\" [treeControl]=\"treeControl\">\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"flex flex-col trans-ease-out cursor-pointer\" matTreeNodeToggle\n            [matTreeNodeToggleRecursive]=\"expandirRecursivo\">\n            <ng-container [ngTemplateOutlet]=\"liDat\"\n                [ngTemplateOutletContext]=\"{ node: node, nested: true }\"></ng-container>\n            <div class=\"pl-4\" [class.tree-invisible]=\"!treeControl.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </div>\n    </mat-nested-tree-node>\n\n    <!-- Cambiar mat-tree-node plano por mat-nested-tree-node sin hijos -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node\">\n        <div class=\"flex flex-col trans-ease-out\">\n            <ng-container [ngTemplateOutlet]=\"liDat\"\n                [ngTemplateOutletContext]=\"{ node: node, nested: false }\"></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n\n<ng-template #liDat let-node=\"node\" let-nested=\"nested\">\n    <div class=\"flex items-center gap-0 text-sm trans-ease-out cursor-pointer p-0 w-full\"\n        (contextmenu)=\"menuContextual?.abrirMenuContextual($event, node); $event.preventDefault();\"\n        (click)=\"seleccionarItem(node); opcMenu({ seccion: nombreColeccion, tipo: 'ver', item: node }); menuContextual?.cerrarMenuContextual(); (nested === false) && $event.stopPropagation();\"\n        [ngClass]=\"classFila(node)\">\n        <mat-icon *ngIf=\"!nested\"></mat-icon>\n        <mat-icon *ngIf=\"nested\"\n            [svgIcon]=\"treeControl.isExpanded(node) ? 'roundExpandMore' : 'roundChevronRight'\"></mat-icon>\n\n        <mat-checkbox *ngIf=\"checkbox\"\n            [(ngModel)]=\"chkLista.modelosChk[node[campoId]]\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"cambiarCheck(node, $event.checked); emitirModeloCheck()\"\n            [checked]=\"nested ? hijosActivos('checked', node) : false\"\n            [indeterminate]=\"nested ? hijosActivos('indeterminate', node) : false\">\n        </mat-checkbox>\n\n        <span *ngIf=\"!templateTxtData\" class=\"w-full\">{{ node[campoStr] }}</span>\n        <ng-container *ngIf=\"templateTxtData\" [ngTemplateOutlet]=\"templateTxtData\"\n            [ngTemplateOutletContext]=\"{ data: node, treeControl }\"></ng-container>\n    </div>\n</ng-template>\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: FormsModule }, { 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: MatTreeModule }, { kind: "directive", type: i3$2.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: ListaArbolComponent, isStandalone: true, selector: "jvs-lista-arbol", inputs: { listaSuscription: { classPropertyName: "listaSuscription", publicName: "listaSuscription", isSignal: true, isRequired: true, transformFunction: null }, nombreColeccion: { classPropertyName: "nombreColeccion", publicName: "nombreColeccion", isSignal: true, isRequired: true, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, expandirRecursivo: { classPropertyName: "expandirRecursivo", publicName: "expandirRecursivo", isSignal: true, isRequired: false, transformFunction: null }, checkboxSeleccionados: { classPropertyName: "checkboxSeleccionados", publicName: "checkboxSeleccionados", isSignal: true, isRequired: false, transformFunction: null }, campoId: { classPropertyName: "campoId", publicName: "campoId", isSignal: true, isRequired: true, transformFunction: null }, campoIdPadre: { classPropertyName: "campoIdPadre", publicName: "campoIdPadre", isSignal: true, isRequired: true, transformFunction: null }, campoStr: { classPropertyName: "campoStr", publicName: "campoStr", isSignal: true, isRequired: false, transformFunction: null }, campoOrden: { classPropertyName: "campoOrden", publicName: "campoOrden", isSignal: true, isRequired: false, transformFunction: null }, strHijoContainer: { classPropertyName: "strHijoContainer", publicName: "strHijoContainer", isSignal: true, isRequired: false, transformFunction: null }, menuContextual: { classPropertyName: "menuContextual", publicName: "menuContextual", isSignal: true, isRequired: false, transformFunction: null }, classSeleccionado: { classPropertyName: "classSeleccionado", publicName: "classSeleccionado", isSignal: true, isRequired: false, transformFunction: null }, classAnulado: { classPropertyName: "classAnulado", publicName: "classAnulado", isSignal: true, isRequired: false, transformFunction: null }, campoAnulado: { classPropertyName: "campoAnulado", publicName: "campoAnulado", isSignal: true, isRequired: false, transformFunction: null }, templateTxtData: { classPropertyName: "templateTxtData", publicName: "templateTxtData", isSignal: true, isRequired: false, transformFunction: null }, condicionMostrar: { classPropertyName: "condicionMostrar", publicName: "condicionMostrar", isSignal: true, isRequired: false, transformFunction: null }, condicionesClaseFila: { classPropertyName: "condicionesClaseFila", publicName: "condicionesClaseFila", isSignal: true, isRequired: false, transformFunction: null }, idTabla: { classPropertyName: "idTabla", publicName: "idTabla", isSignal: true, isRequired: true, transformFunction: null }, selectionModel: { classPropertyName: "selectionModel", publicName: "selectionModel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionModelChange: "selectionModelChange", seleccionado: "seleccionado", listaCheck: "listaCheck", listaCheckObj: "listaCheckObj" }, ngImport: i0, template: "<mat-tree [dataSource]=\"listaMuestraArbol()\" [treeControl]=\"treeControl\">\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"flex flex-col trans-ease-out cursor-pointer\" matTreeNodeToggle\n            [matTreeNodeToggleRecursive]=\"expandirRecursivo()\">\n            <ng-container [ngTemplateOutlet]=\"liDat\"\n                [ngTemplateOutletContext]=\"{ node: node, nested: true }\"></ng-container>\n            <div class=\"pl-4\" [class.hidden]=\"!treeControl.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </div>\n    </mat-nested-tree-node>\n\n    <!-- Cambiar mat-tree-node plano por mat-nested-tree-node sin hijos -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node\">\n        <div class=\"flex flex-col trans-ease-out\">\n            <ng-container [ngTemplateOutlet]=\"liDat\"\n                [ngTemplateOutletContext]=\"{ node: node, nested: false }\"></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n\n<ng-template #liDat let-node=\"node\" let-nested=\"nested\">\n    <div class=\"flex items-center gap-0 text-sm trans-ease-out cursor-pointer p-0 w-full\"\n        (contextmenu)=\"menuContextual()?.abrirMenuContextual($event, node); $event.preventDefault();\"\n        (click)=\"seleccionarItem(node); opcMenu({ seccion: nombreColeccion(), tipo: 'ver', item: node }); menuContextual()?.cerrarMenuContextual(); (nested === false) && $event.stopPropagation();\"\n        [ngClass]=\"classFila(node)\">\n        <mat-icon *ngIf=\"!nested\"></mat-icon>\n        <mat-icon *ngIf=\"nested\"\n            [svgIcon]=\"treeControl.isExpanded(node) ? 'roundExpandMore' : 'roundChevronRight'\"></mat-icon>\n\n        <mat-checkbox *ngIf=\"checkbox()\"\n            [(ngModel)]=\"chkLista.modelosChk[node[campoId()]]\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"cambiarCheck(node, $event.checked); emitirModeloCheck()\"\n            [indeterminate]=\"hasChild(0, node) && hijosActivos('indeterminate', node)\"\n            [checked]=\"hasChild(0, node) ? hijosActivos('checked', node) : chkLista.modelosChk[node[campoId()]]\">\n        </mat-checkbox>\n\n        <span *ngIf=\"!templateTxtData()\" class=\"w-full\">{{ node[campoStr()] }}</span>\n        <ng-container *ngIf=\"templateTxtData()\" [ngTemplateOutlet]=\"templateTxtData()!\"\n            [ngTemplateOutletContext]=\"{ data: node, treeControl }\"></ng-container>\n    </div>\n</ng-template>\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: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListaArbolComponent, decorators: [{
             type: Component,
@@ -2274,55 +2323,633 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatTreeModule,
                         MatIconModule,
                         MatCheckboxModule,
-                    ], template: "<mat-tree [dataSource]=\"listaMuestraArbol\" [treeControl]=\"treeControl\">\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"flex flex-col trans-ease-out cursor-pointer\" matTreeNodeToggle\n            [matTreeNodeToggleRecursive]=\"expandirRecursivo\">\n            <ng-container [ngTemplateOutlet]=\"liDat\"\n                [ngTemplateOutletContext]=\"{ node: node, nested: true }\"></ng-container>\n            <div class=\"pl-4\" [class.tree-invisible]=\"!treeControl.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </div>\n    </mat-nested-tree-node>\n\n    <!-- Cambiar mat-tree-node plano por mat-nested-tree-node sin hijos -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node\">\n        <div class=\"flex flex-col trans-ease-out\">\n            <ng-container [ngTemplateOutlet]=\"liDat\"\n                [ngTemplateOutletContext]=\"{ node: node, nested: false }\"></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n\n<ng-template #liDat let-node=\"node\" let-nested=\"nested\">\n    <div class=\"flex items-center gap-0 text-sm trans-ease-out cursor-pointer p-0 w-full\"\n        (contextmenu)=\"menuContextual?.abrirMenuContextual($event, node); $event.preventDefault();\"\n        (click)=\"seleccionarItem(node); opcMenu({ seccion: nombreColeccion, tipo: 'ver', item: node }); menuContextual?.cerrarMenuContextual(); (nested === false) && $event.stopPropagation();\"\n        [ngClass]=\"classFila(node)\">\n        <mat-icon *ngIf=\"!nested\"></mat-icon>\n        <mat-icon *ngIf=\"nested\"\n            [svgIcon]=\"treeControl.isExpanded(node) ? 'roundExpandMore' : 'roundChevronRight'\"></mat-icon>\n\n        <mat-checkbox *ngIf=\"checkbox\"\n            [(ngModel)]=\"chkLista.modelosChk[node[campoId]]\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"cambiarCheck(node, $event.checked); emitirModeloCheck()\"\n            [checked]=\"nested ? hijosActivos('checked', node) : false\"\n            [indeterminate]=\"nested ? hijosActivos('indeterminate', node) : false\">\n        </mat-checkbox>\n\n        <span *ngIf=\"!templateTxtData\" class=\"w-full\">{{ node[campoStr] }}</span>\n        <ng-container *ngIf=\"templateTxtData\" [ngTemplateOutlet]=\"templateTxtData\"\n            [ngTemplateOutletContext]=\"{ data: node, treeControl }\"></ng-container>\n    </div>\n</ng-template>\n" }]
-        }], propDecorators: { listaSuscription: [{
-                type: Input
-            }], nombreColeccion: [{
-                type: Input
-            }], checkbox: [{
-                type: Input
-            }], expandirRecursivo: [{
-                type: Input
-            }], checkboxSeleccionados: [{
-                type: Input
-            }], campoId: [{
-                type: Input
-            }], campoIdPadre: [{
-                type: Input
-            }], campoStr: [{
-                type: Input
-            }], campoOrden: [{
-                type: Input
-            }], strHijoContainer: [{
-                type: Input
-            }], menuContextual: [{
-                type: Input
-            }], classSeleccionado: [{
-                type: Input
-            }], classAnulado: [{
-                type: Input
-            }], campoAnulado: [{
-                type: Input
-            }], templateTxtData: [{
-                type: Input
-            }], condicionMostrar: [{
-                type: Input
-            }], condicionesClaseFila: [{
-                type: Input
-            }], selectionModel: [{
-                type: Input
-            }], selectionModelChange: [{
-                type: Output
-            }], seleccionado: [{
-                type: Output
-            }], listaCheck: [{
-                type: Output
-            }], listaCheckObj: [{
-                type: Output
-            }], idTabla: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+                    ], template: "<mat-tree [dataSource]=\"listaMuestraArbol()\" [treeControl]=\"treeControl\">\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"flex flex-col trans-ease-out cursor-pointer\" matTreeNodeToggle\n            [matTreeNodeToggleRecursive]=\"expandirRecursivo()\">\n            <ng-container [ngTemplateOutlet]=\"liDat\"\n                [ngTemplateOutletContext]=\"{ node: node, nested: true }\"></ng-container>\n            <div class=\"pl-4\" [class.hidden]=\"!treeControl.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet></ng-container>\n            </div>\n        </div>\n    </mat-nested-tree-node>\n\n    <!-- Cambiar mat-tree-node plano por mat-nested-tree-node sin hijos -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node\">\n        <div class=\"flex flex-col trans-ease-out\">\n            <ng-container [ngTemplateOutlet]=\"liDat\"\n                [ngTemplateOutletContext]=\"{ node: node, nested: false }\"></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n\n<ng-template #liDat let-node=\"node\" let-nested=\"nested\">\n    <div class=\"flex items-center gap-0 text-sm trans-ease-out cursor-pointer p-0 w-full\"\n        (contextmenu)=\"menuContextual()?.abrirMenuContextual($event, node); $event.preventDefault();\"\n        (click)=\"seleccionarItem(node); opcMenu({ seccion: nombreColeccion(), tipo: 'ver', item: node }); menuContextual()?.cerrarMenuContextual(); (nested === false) && $event.stopPropagation();\"\n        [ngClass]=\"classFila(node)\">\n        <mat-icon *ngIf=\"!nested\"></mat-icon>\n        <mat-icon *ngIf=\"nested\"\n            [svgIcon]=\"treeControl.isExpanded(node) ? 'roundExpandMore' : 'roundChevronRight'\"></mat-icon>\n\n        <mat-checkbox *ngIf=\"checkbox()\"\n            [(ngModel)]=\"chkLista.modelosChk[node[campoId()]]\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"cambiarCheck(node, $event.checked); emitirModeloCheck()\"\n            [indeterminate]=\"hasChild(0, node) && hijosActivos('indeterminate', node)\"\n            [checked]=\"hasChild(0, node) ? hijosActivos('checked', node) : chkLista.modelosChk[node[campoId()]]\">\n        </mat-checkbox>\n\n        <span *ngIf=\"!templateTxtData()\" class=\"w-full\">{{ node[campoStr()] }}</span>\n        <ng-container *ngIf=\"templateTxtData()\" [ngTemplateOutlet]=\"templateTxtData()!\"\n            [ngTemplateOutletContext]=\"{ data: node, treeControl }\"></ng-container>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
+class FiltroBusquedaService {
+    // Estado centralizado con Signals (Angular 19+)
+    _filtrosActivos = signal(new Map());
+    _dataServidorActivos = signal(new Map());
+    // Interfaz de sólo lectura expuesta
+    filtrosActivos = this._filtrosActivos.asReadonly();
+    dataServidorActivos = this._dataServidorActivos.asReadonly();
+    /**
+     * Establece un valor para un filtro reactivo
+     */
+    setValue(nombreFiltro, val) {
+        this._filtrosActivos.update(map => {
+            const nextMap = new Map(map);
+            nextMap.set(nombreFiltro, val);
+            return nextMap;
+        });
+    }
+    /**
+     * @deprecated Usa `getFiltroSignal(nombreFiltro)` en componentes modernos.
+     * Retorna el snapshot sincrónico actual (para componentes legacy).
+     */
+    getValue(nombreFiltro) {
+        return this._filtrosActivos().get(nombreFiltro);
+    }
+    /**
+     * Actualiza la metadata del servidor (Signals).
+     */
+    setDataServidorSuscripcion(nombreFiltro, campo, data) {
+        this._dataServidorActivos.update(map => {
+            const nextMap = new Map(map);
+            let filterMap = nextMap.get(nombreFiltro) || new Map();
+            const nextFilterMap = new Map(filterMap);
+            nextFilterMap.set(campo, data);
+            nextMap.set(nombreFiltro, nextFilterMap);
+            return nextMap;
+        });
+    }
+    /**
+     * @deprecated Usa `getDataServidorSignal(nombreFiltro, campo)` en componentes modernos.
+     * Retorna el snapshot sincrónico actual de metadata (para componentes legacy).
+     */
+    getDataServidorSuscripcion(nombreFiltro, campo) {
+        return this._dataServidorActivos().get(nombreFiltro)?.get(campo);
+    }
+    // --- Opciones Signal (Angular 19+) ---
+    /**
+     * Crea y devuelve un Signal reactivo continuo para observar los valores aplicados de un filtro particular.
+     * @param nombreFiltro Nombre del filtro que se desea escuchar
+     * @param defaultValue Valor de respaldo seguro si aún no se ha inicializado el filtro.
+     */
+    getFiltroSignal(nombreFiltro, defaultValue) {
+        return computed(() => {
+            const value = this._filtrosActivos().get(nombreFiltro);
+            return (value ?? defaultValue);
+        });
+    }
+    /**
+     * Crea y devuelve un Signal reactivo continuo para escuchar la metadata/catálogo recibida del backend para un campo.
+     * @param nombreFiltro Nombre de la colección del filtro principal
+     * @param campo Campo específico (ej: id_usuario, categoria) del que se espera escuchar la lista u objeto servidor
+     * @param defaultValue Valor de respaldo seguro si aún no hay data del servidor.
+     */
+    getDataServidorSignal(nombreFiltro, campo, defaultValue) {
+        return computed(() => {
+            const value = this._dataServidorActivos().get(nombreFiltro)?.get(campo);
+            return (value ?? defaultValue);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const QUERY_SERVICE_TOKEN = new InjectionToken('QUERY_SERVICE_TOKEN');
+class FiltroBusquedaComponent {
+    fb = inject(FormBuilder);
+    toastr = inject(ToastrService);
+    filtroBusquedaService = inject(FiltroBusquedaService);
+    queryService = inject(QUERY_SERVICE_TOKEN, { optional: true });
+    opciones = input([]);
+    nombreColeccionInput = input(generateRandomString(10), { alias: 'nombreColeccion' });
+    prefijoConsulta = input('grl');
+    busquedaAutomatica = input(false);
+    opciones$ = input();
+    modificarOpciones$ = input();
+    defaultTab = input(0);
+    /**
+     * @deprecated Paradigma Zero-Output: Inyecta FiltroBusquedaService y usa `getFiltroSignal('nombreColeccion')` para estado en tiempo real, esto evita renderizados innecesarios del padre.
+     */
+    dataFiltro = output();
+    /**
+     * @deprecated Su payload de diccionario crudo desaparecerá pronto (Mejora 2). Migra al nuevo evento `(buscar)` que emite la interfaz `FiltroResultante`.
+     * Se mantiene temporalmente para componentes legacy.
+     */
+    resultados = output();
+    /**
+     * Evento principal explícito de búsqueda (Click en Filtrar). Emite el objeto con metadata y labels.
+     */
+    buscar = output();
+    /**
+     * @deprecated Paradigma Zero-Output: Maneja la finalización de carga a través de los Signals internos del servicio o asume inmediatez de la arquitectura nueva.
+     */
+    cargaCompleta = output();
+    tabActual = signal(0);
+    dataOpcionesNuevo = signal([]);
+    isCargaCompleta = signal(false);
+    frmFiltroBusqueda = this.fb.group({
+        opcion: [0],
+        opciones: this.fb.array([]),
+    });
+    get opcionesTabs() {
+        return this.frmFiltroBusqueda.get('opciones');
+    }
+    get frmGroupSeleccionado() {
+        return this.opcionesTabs.at(this.tabActual()) || this.fb.group({});
+    }
+    getControl(nombre) {
+        return this.frmGroupSeleccionado.get(nombre);
+    }
+    getControlRaiz(nombre) {
+        return this.frmFiltroBusqueda.get(nombre);
+    }
+    getAutocompleteLabel(controlData, value) {
+        if (!value)
+            return '';
+        const config = controlData.autocomplete;
+        if (!config)
+            return '';
+        const list = this.dataServidorSuscripcion[config.data]?.getValue() || [];
+        const item = dataEnLista(list, config.campoValor || controlData.campo, value);
+        if (item) {
+            return this.campoTextEval(controlData, item);
+        }
+        // Fallback search in the filtered results if not in the main list
+        const filteredList = this.filtrados[controlData.campo] || [];
+        const filteredItem = dataEnLista(filteredList, config.campoValor || controlData.campo, value);
+        if (filteredItem) {
+            return this.campoTextEval(controlData, filteredItem);
+        }
+        return value?.toString() || '';
+    }
+    dataServidor = {};
+    dataServidorSuscripcion = {};
+    filtrados = {};
+    inputParaEnviarAutocomplete = new Subject();
+    destroy$ = new Subject();
+    sufixTemporal = '_temporal';
+    tipoValorFuncion = tipoValorFuncion$1;
+    fechaActual = moment().toDate();
+    constructor() {
+        this.inputParaEnviarAutocomplete.pipe(debounceTime(500), takeUntil$1(this.destroy$)).subscribe((param) => {
+            this.queryService?.cargar(this, [param.reqQuery], param.reqData, false, this.prefijoConsulta()).then((dRet) => {
+                if (dRet) {
+                    this.filtrados[param.controlData.campo] = dRet[param.reqQuery];
+                    this.filtroBusquedaService.setDataServidorSuscripcion(this.nombreColeccionInput(), param.controlData.campo, dRet[param.reqQuery]);
+                }
+            });
+        });
+    }
+    ngOnInit() {
+        this.tabActual.set(this.defaultTab());
+        this.frmFiltroBusqueda.get('opcion')?.setValue(this.tabActual());
+        if (this.opciones().length > 0) {
+            this.initOpciones(this.opciones());
+        }
+        this.opciones$()?.pipe(takeUntil$1(this.destroy$)).subscribe(val => {
+            if (val)
+                this.initOpciones(val);
+        });
+        this.modificarOpciones$()?.pipe(takeUntil$1(this.destroy$)).subscribe(val => {
+            if (val) {
+                Object.keys(val).forEach(x => {
+                    const ev = val[x];
+                    this.actualizarEnFormArray(x, ev.value ?? ev['val'], { disabled: ev.disabled });
+                });
+            }
+        });
+        this.frmFiltroBusqueda.valueChanges.pipe(distinctUntilChanged(), takeUntil$1(this.destroy$)).subscribe(() => {
+            this.actualizarEstadoService();
+        });
+        this.frmFiltroBusqueda.get('opcion')?.valueChanges.pipe(distinctUntilChanged(), takeUntil$1(this.destroy$)).subscribe((val) => {
+            if (val !== null) {
+                this.tabActual.set(val);
+                this.cargarDatosFiltroNuevo(val);
+            }
+        });
+    }
+    initOpciones(val) {
+        const nOpc = this.reorganizarOpcionesNuevas(val);
+        this.dataOpcionesNuevo.set(nOpc);
+        this.cargarDatosFiltroNuevo();
+    }
+    reorganizarOpcionesNuevas(val) {
+        return val.filter(tab => !tab.esVisible || tipoValorFuncion$1(tab.esVisible, true, tab)).map(tab => ({
+            label: tab.label,
+            campos: tab.campos || []
+        }));
+    }
+    async cargarDatosFiltroNuevo(idTab) {
+        const tabIdx = idTab !== undefined ? idTab : this.tabActual();
+        const currentTab = this.dataOpcionesNuevo()[tabIdx];
+        if (!currentTab)
+            return;
+        let llamadasJuntas = [[], [], [], [], []];
+        let llamadasJuntasParams = [{}, {}, {}, {}, {}];
+        const camposDisabled = [];
+        const camposRequired = [];
+        const procesarCampos = (campos, grupoFrm, agrupado = false) => {
+            campos.forEach((campo) => {
+                let val = campo;
+                if (val.modificadorDatos)
+                    val = val.modificadorDatos(val);
+                if (val.disabled)
+                    camposDisabled.push(val.campo);
+                if (val.required)
+                    camposRequired.push(val.campo);
+                if (val.dateRange) {
+                    const [fIni, fFin] = val.dateRange.campo;
+                    grupoFrm[fIni] = val.dateRange.value?.[0] === '*fechaActual*' ? this.fechaActual : (val.dateRange.value?.[0] || '');
+                    grupoFrm[fFin] = val.dateRange.value?.[1] === '*fechaActual*' ? this.fechaActual : (val.dateRange.value?.[1] || '');
+                }
+                else if (val.autocomplete) {
+                    grupoFrm[val.campo + this.sufixTemporal] = val.value || '';
+                    grupoFrm[val.campo] = val.value || '';
+                }
+                else if (val.controlAgrupado) {
+                    grupoFrm[val.campo] = val.value || '';
+                    procesarCampos(val.controlAgrupado, grupoFrm, true);
+                }
+                else {
+                    grupoFrm[val.campo] = val.value === '*fechaActual*' ? this.fechaActual : (val.value || '');
+                }
+                if (val.select || val.autocomplete) {
+                    const config = (val.select || val.autocomplete);
+                    if (agrupado)
+                        config.ordenPeticion = 3;
+                    if (config.customData) {
+                        this.setCustomData(config.data, config.customData);
+                    }
+                    else {
+                        const level = config.ordenPeticion || 0;
+                        if (config.data)
+                            llamadasJuntas[level].push(config.data);
+                        if (val.reqParams?.fields) {
+                            val.reqParams.fields.forEach(f => {
+                                if (grupoFrm[f] && !['*primero*', '*deUsuario*'].includes(grupoFrm[f])) {
+                                    llamadasJuntasParams[level][f] = grupoFrm[f];
+                                }
+                            });
+                        }
+                        if (val.reqParams?.params) {
+                            llamadasJuntasParams[level] = { ...llamadasJuntasParams[level], ...val.reqParams.params };
+                        }
+                    }
+                }
+            });
+        };
+        const targetOpciones = idTab !== undefined ? [this.dataOpcionesNuevo()[idTab]] : this.dataOpcionesNuevo();
+        targetOpciones.forEach(tab => {
+            const grupoFrm = {};
+            procesarCampos(tab.campos, grupoFrm);
+            const group = this.fb.group(grupoFrm);
+            if (idTab === undefined) {
+                this.opcionesTabs.push(group);
+            }
+            else {
+                this.opcionesTabs.setControl(idTab, group);
+            }
+        });
+        getUniqueValues(camposDisabled).forEach(c => this.actualizarEnFormArray(c, undefined, { disabled: true }));
+        establecerQuitarRequired(this.frmGroupSeleccionado, getUniqueValues(camposRequired));
+        const cargaNivel = async (idx) => {
+            const types = getUniqueValues(llamadasJuntas[idx]);
+            if (types.length === 0)
+                return;
+            const dRet = await this.queryService?.cargar(this, types, llamadasJuntasParams[idx], false, this.prefijoConsulta());
+            if (dRet) {
+                this.procesarRetornoDatos(idx, dRet, llamadasJuntasParams);
+            }
+        };
+        await cargaNivel(0);
+        await cargaNivel(1);
+        await cargaNivel(2);
+        await cargaNivel(3);
+        await cargaNivel(4);
+        this.isCargaCompleta.set(true);
+        this.actualizarEstadoService();
+        this.cargaCompleta.emit(true);
+    }
+    actualizarEstadoService() {
+        if (this.isCargaCompleta()) {
+            const res = this.getFiltroResultante();
+            this.filtroBusquedaService.setValue(this.nombreColeccionInput(), res);
+            this.dataFiltro.emit(res.datosFiltro);
+        }
+    }
+    setCustomData(key, data) {
+        if (!this.dataServidorSuscripcion[key]) {
+            this.dataServidorSuscripcion[key] = new BehaviorSubject(null);
+        }
+        this.dataServidorSuscripcion[key].next(data);
+    }
+    procesarRetornoDatos(idxLevel, data, paramsRef) {
+        const tabCampos = this.dataOpcionesNuevo()[this.tabActual()].campos;
+        const affected = tabCampos.filter(c => {
+            const config = c.select || c.autocomplete;
+            return config && (config.ordenPeticion || 0) === idxLevel;
+        });
+        affected.forEach(campo => {
+            const config = (campo.select || campo.autocomplete);
+            const res = data[config.data];
+            if (!this.dataServidorSuscripcion[config.data]) {
+                this.dataServidorSuscripcion[config.data] = new BehaviorSubject(null);
+            }
+            this.dataServidorSuscripcion[config.data].next(res);
+            this.filtroBusquedaService.setDataServidorSuscripcion(this.nombreColeccionInput(), campo.campo, res);
+            if (campo.value === '*primero*' && res?.length > 0) {
+                const firstVal = config.campoValor === '*objeto*' ? res[0] : res[0][config.campoValor || campo.campo];
+                this.actualizarEnFormArray(campo.campo, firstVal);
+                paramsRef.forEach((p, i) => {
+                    if (i > idxLevel && p[campo.campo] === '')
+                        p[campo.campo] = firstVal;
+                });
+            }
+            if (campo.autocomplete) {
+                this.filtrados[campo.campo] = res;
+            }
+            if (campo.change) {
+                this.cambiarSeleccionNuevo(campo);
+            }
+        });
+    }
+    getFiltroResultante() {
+        const rawForm = this.frmGroupSeleccionado.getRawValue();
+        const datosFiltro = { opcion: this.tabActual() };
+        const datosFiltroConLabel = [];
+        const resumenItems = [];
+        const campos = this.dataOpcionesNuevo()[this.tabActual()]?.campos || [];
+        const procesarMetadatos = (campo) => {
+            const meta = { campo: campo.campo, label: campo.label || '', value: null };
+            if (campo.dateRange) {
+                const [fIni, fFin] = campo.dateRange.campo;
+                datosFiltro[fIni] = rawForm[fIni] ? moment(rawForm[fIni]).format('YYYYMMDD') : '';
+                datosFiltro[fFin] = rawForm[fFin] ? moment(rawForm[fFin]).format('YYYYMMDD') : '';
+                if (rawForm[fIni] && rawForm[fFin]) {
+                    meta.value = `${moment(rawForm[fIni]).format('DD/MM/YYYY')} - ${moment(rawForm[fFin]).format('DD/MM/YYYY')}`;
+                    resumenItems.push(`${meta.label}: ${meta.value}`);
+                }
+            }
+            else if (campo.control === 'date') {
+                const val = rawForm[campo.campo];
+                datosFiltro[campo.campo] = val ? moment(val).format('YYYYMMDD') : '';
+                meta.value = val ? moment(val).format('DD/MM/YYYY') : '';
+                if (meta.value)
+                    resumenItems.push(`${meta.label}: ${meta.value}`);
+            }
+            else if (campo.control === 'checkbox') {
+                datosFiltro[campo.campo] = rawForm[campo.campo];
+                meta.value = rawForm[campo.campo];
+                if (meta.value)
+                    resumenItems.push(`${meta.label}`);
+            }
+            else {
+                const val = rawForm[campo.campo];
+                datosFiltro[campo.campo] = val;
+                meta.value = val;
+                if (campo.select || campo.autocomplete) {
+                    const config = (campo.select || campo.autocomplete);
+                    const list = this.dataServidorSuscripcion[config.data]?.getValue() || [];
+                    const item = config.campoValor === '*objeto*' ? val : dataEnLista(list, config.campoValor || campo.campo, val);
+                    if (item) {
+                        meta.list = list;
+                        meta.valueObject = item;
+                        meta.valueString = this.campoTextEval(campo, item);
+                        resumenItems.push(`${meta.label}: ${meta.valueString}`);
+                    }
+                }
+                else if (val !== null && val !== undefined && val !== '') {
+                    resumenItems.push(`${meta.label}: ${val}`);
+                }
+            }
+            datosFiltroConLabel.push(meta);
+        };
+        campos.forEach(c => {
+            if (c.controlAgrupado) {
+                c.controlAgrupado.forEach(sub => procesarMetadatos(sub));
+            }
+            else {
+                procesarMetadatos(c);
+            }
+        });
+        const labelResumen = resumenItems.join(' | ');
+        return { datosFiltro, datosFiltroConLabel, labelResumen };
+    }
+    mostrarValorEnBusqueda = mostrarValorEnBusqueda;
+    campoValorEval(campoFiltro, itemSelect) {
+        if (campoFiltro.select || campoFiltro.autocomplete) {
+            const selectOrAutocomplete = campoFiltro.select ? campoFiltro.select : campoFiltro.autocomplete;
+            if (selectOrAutocomplete?.campoValor === '*objeto*') {
+                return itemSelect;
+            }
+            if (campoFiltro.campo === '*objeto*') {
+                return itemSelect;
+            }
+            if (selectOrAutocomplete && itemSelect[selectOrAutocomplete.campoValor] !== undefined) {
+                return itemSelect[selectOrAutocomplete.campoValor];
+            }
+        }
+        return itemSelect[campoFiltro.campo];
+    }
+    campoTextEval(campoFiltro, itemSelect) {
+        if (campoFiltro.select || campoFiltro.autocomplete) {
+            const selectOrAutocomplete = (campoFiltro.select || campoFiltro.autocomplete);
+            if (selectOrAutocomplete.optionText) {
+                return selectOrAutocomplete.optionText(itemSelect);
+            }
+            if (selectOrAutocomplete.camposText) {
+                return selectOrAutocomplete.camposText.map(c => itemSelect[c]).join(' ');
+            }
+            return itemSelect[campoFiltro.campo];
+        }
+        return '';
+    }
+    concatenarCadenasArray(array, objData) {
+        if (typeof array === 'string') {
+            return objData[array];
+        }
+        const nTxtArray = [];
+        array.forEach(campo => {
+            if (campo.charAt(0) === '*') {
+                nTxtArray.push(campo.replace('*', ''));
+            }
+            else {
+                nTxtArray.push(objData[campo]);
+            }
+        });
+        return nTxtArray.join(' ');
+    }
+    filtrarData() {
+        if (this.frmGroupSeleccionado.invalid) {
+            const errors = getFormValidationErrors(this.frmGroupSeleccionado);
+            const labels = errors.map(e => {
+                const found = this.dataOpcionesNuevo()[this.tabActual()].campos.find(c => c.campo === e.control);
+                return found?.label || e.control;
+            });
+            this.toastr.error(`Campos requeridos:<br>${labels.join(', ')}`, undefined, { enableHtml: true });
+            return;
+        }
+        this.actualizarEstadoService();
+        const res = this.getFiltroResultante();
+        // Soporte temporal a usos actuales
+        this.resultados.emit(res.datosFiltro);
+        // Nueva mejora 2 (Emisión completa)
+        this.buscar.emit(res);
+    }
+    actualizarEnFormArray(name, value, extra) {
+        this.opcionesTabs.controls.forEach((control) => {
+            const fc = control.get(name);
+            if (fc) {
+                if (value !== undefined)
+                    fc.setValue(value, { emitEvent: false });
+                if (extra?.disabled === true)
+                    fc.disable();
+                if (extra?.disabled === false)
+                    fc.enable();
+                fc.updateValueAndValidity();
+            }
+        });
+    }
+    accionPosteriorCambioAutocomplete(controlData, valControl) {
+        const list = this.dataServidorSuscripcion[controlData.autocomplete?.data]?.getValue() || [];
+        this.filtrados[controlData.campo] = list.filter((algo) => {
+            let nTextVerif = this.concatenarCadenasArray(controlData.autocomplete?.camposText, algo);
+            if (controlData.autocomplete?.searchFields) {
+                const nTextVerifExtra = this.concatenarCadenasArray(controlData.autocomplete.searchFields, algo);
+                nTextVerif = nTextVerif.concat(nTextVerifExtra);
+            }
+            const textBuscar = valControl && typeof valControl === 'string' ? valControl.toLowerCase() : null;
+            if (nTextVerif) {
+                return nTextVerif.toLowerCase().includes(textBuscar) ? algo : null;
+            }
+            return null;
+        });
+    }
+    cambiarNuevo(campo, val) {
+        if (campo.autocomplete) {
+            const valControl = this.frmGroupSeleccionado.get(campo.campo + this.sufixTemporal)?.value;
+            if (!valControl) {
+                this.filtrados[campo.campo] = this.dataServidorSuscripcion[campo.autocomplete.data]?.getValue() || [];
+            }
+            else {
+                const config = campo.autocomplete;
+                if (config.campotxtBuscar && val && val.length > (config.campotxtBuscarLength || 3)) {
+                    const reqQuery = config.data;
+                    let reqData = {};
+                    if (campo.reqParams?.fields) {
+                        campo.reqParams.fields.forEach(f => {
+                            const ctrl = this.buscarControl(f);
+                            reqData[ctrl?.aliasCampoEnviar || f] = this.frmGroupSeleccionado.get(f)?.value;
+                        });
+                    }
+                    reqData[config.campotxtBuscar || campo.campo] = val;
+                    if (campo.reqParams?.params)
+                        Object.assign(reqData, campo.reqParams.params);
+                    this.inputParaEnviarAutocomplete.next({ reqQuery, reqData, controlData: campo });
+                }
+                else {
+                    this.accionPosteriorCambioAutocomplete(campo, valControl);
+                }
+            }
+        }
+    }
+    cambiarSeleccionNuevo(campo, event) {
+        const val = event?.option?.value ?? event?.value ?? (event?.target ? event.target.value : event);
+        if (val !== undefined) {
+            this.actualizarEnFormArray(campo.campo, val);
+            if (campo.autocomplete) {
+                const config = campo.autocomplete;
+                const list = this.dataServidorSuscripcion[config.data]?.getValue() || [];
+                const item = config.campoValor === '*objeto*' ? val : dataEnLista(list, config.campoValor || campo.campo, val);
+                if (item) {
+                    const text = this.campoTextEval(campo, item);
+                    this.actualizarEnFormArray(campo.campo + this.sufixTemporal, text);
+                }
+            }
+            const groupedMatch = this.dataOpcionesNuevo()[this.tabActual()].campos
+                .filter(c => c.controlAgrupado)
+                .find(c => c.controlAgrupado?.some(sub => sub.campo === campo.campo));
+            if (groupedMatch)
+                this.frmGroupSeleccionado.get(groupedMatch.campo)?.setValue(val);
+        }
+        if (campo.change?.filterFields) {
+            campo.change.filterFields.forEach(target => {
+                const targetMeta = this.buscarControl(target);
+                if (targetMeta) {
+                    const params = this.generarParams(targetMeta, campo);
+                    this.actualizarEnFormArray(target, null);
+                    this.actualizarEnFormArray(target + this.sufixTemporal, null);
+                    this.dataServidorSuscripcion[target]?.next(null);
+                    const config = (targetMeta.select || targetMeta.autocomplete);
+                    if (config?.data) {
+                        this.queryService?.cargar(this, [config.data], params, false, this.prefijoConsulta()).then(d => {
+                            if (d) {
+                                const res = d[config.data];
+                                this.actualizarEnFormArray(target, targetMeta.value || null);
+                                this.actualizarEnFormArray(target + this.sufixTemporal, targetMeta.value || null);
+                                if (!this.dataServidorSuscripcion[config.data]) {
+                                    this.dataServidorSuscripcion[config.data] = new BehaviorSubject(null);
+                                }
+                                this.dataServidorSuscripcion[config.data].next(res);
+                                this.filtrados[target] = res;
+                            }
+                        });
+                    }
+                }
+            });
+        }
+        else if (campo.change?.filter) {
+            setTimeout(() => this.filtrarData(), 1);
+        }
+    }
+    buscarControl(campo) {
+        const rootCampos = this.dataOpcionesNuevo()[this.tabActual()].campos;
+        let found = rootCampos.find(c => c.campo === campo);
+        if (!found) {
+            found = rootCampos.filter(c => c.controlAgrupado).flatMap(c => c.controlAgrupado).find(c => c.campo === campo);
+        }
+        return found;
+    }
+    generarParams(meta, trigger) {
+        const params = {};
+        if (meta.reqParams?.fields) {
+            meta.reqParams.fields.forEach(f => {
+                const ctrl = this.buscarControl(f);
+                params[ctrl?.aliasCampoEnviar || f] = this.frmGroupSeleccionado.get(f)?.value;
+            });
+        }
+        else {
+            params[meta.aliasCampoEnviar || trigger.campo || meta.campo] = this.frmGroupSeleccionado.get(trigger.campo || meta.campo)?.value;
+        }
+        if (meta.reqParams?.params)
+            Object.assign(params, meta.reqParams.params);
+        return params;
+    }
+    limpiarAutocomplete(campo, event) {
+        this.actualizarEnFormArray(campo.campo, '');
+        this.actualizarEnFormArray(campo.campo + this.sufixTemporal, '');
+        this.cambiarSeleccionNuevo(campo, { option: { value: '' } });
+        event.preventDefault();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FiltroBusquedaComponent, isStandalone: true, selector: "jvs-filtro-busqueda", inputs: { opciones: { classPropertyName: "opciones", publicName: "opciones", isSignal: true, isRequired: false, transformFunction: null }, nombreColeccionInput: { classPropertyName: "nombreColeccionInput", publicName: "nombreColeccion", isSignal: true, isRequired: false, transformFunction: null }, prefijoConsulta: { classPropertyName: "prefijoConsulta", publicName: "prefijoConsulta", isSignal: true, isRequired: false, transformFunction: null }, busquedaAutomatica: { classPropertyName: "busquedaAutomatica", publicName: "busquedaAutomatica", isSignal: true, isRequired: false, transformFunction: null }, opciones$: { classPropertyName: "opciones$", publicName: "opciones$", isSignal: true, isRequired: false, transformFunction: null }, modificarOpciones$: { classPropertyName: "modificarOpciones$", publicName: "modificarOpciones$", isSignal: true, isRequired: false, transformFunction: null }, defaultTab: { classPropertyName: "defaultTab", publicName: "defaultTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataFiltro: "dataFiltro", resultados: "resultados", buscar: "buscar", cargaCompleta: "cargaCompleta" }, host: { classAttribute: "jvsFiltroBusqueda" }, ngImport: i0, template: "@if (isCargaCompleta()) {\n  <div class=\"filtroBusqueda w-full\">\n    <div class=\"border-none p-0 flex flex-col\">\n\n      @if (dataOpcionesNuevo().length === 1) {\n        <div class=\"flex-1 flex items-end max-sm:flex-col flex-wrap gap-2\">\n            <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n        </div>\n      } @else if (dataOpcionesNuevo().length > 1) {\n        <div class=\"flex-1 flex flex-col flex-wrap gap-2 border\">\n            <mat-tab-group\n                [selectedIndex]=\"tabActual()\"\n                (selectedIndexChange)=\"getControlRaiz('opcion').setValue($event)\"\n                class=\"flex-1 flex flex-wrap\"\n                [mat-stretch-tabs]=\"false\"\n                dynamicHeight\n                mat-align-tabs=\"start\"\n            >\n                @for (item of dataOpcionesNuevo(); track $index) {\n                    <mat-tab [aria-label]=\"(tabActual() === $index) ? 'primary' : ''\">\n                        <ng-template mat-tab-label>\n                            @if (tabActual() === $index) {\n                                <mat-icon class=\"icon-xs\" svgIcon=\"roundVerified\"></mat-icon>\n                            }\n                            &nbsp;{{ item.label }}\n                        </ng-template>\n\n                        <div class=\"mx-2 mt-0 pt-0 flex flex-col items-end sm:flex-row flex-wrap gap-2\">\n                            <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n                        </div>\n                    </mat-tab>\n                }\n            </mat-tab-group>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #verOpcionesT>\n    @for (campo of dataOpcionesNuevo()[tabActual()]?.campos; track campo.campo) {\n        <ng-container [ngTemplateOutletContext]=\"{controlData: campo}\" [ngTemplateOutlet]=\"controlesFormularioNuevo\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"botonFiltrar\"></ng-container>\n</ng-template>\n\n<ng-template #botonFiltrar>\n    <button (click)=\"filtrarData()\"\n        class=\"flex items-center justify-center bg-primary text-primary-contrast font-bold uppercase text-xs px-2 py-1 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150\"\n        matRipple type=\"button\"\n        [disabled]=\"!isCargaCompleta()\"\n    >\n        <mat-icon class=\"icon-xs\" svgIcon=\"roundFilterAlt\"></mat-icon>&nbsp;\n        <span>Filtrar</span>\n    </button>\n</ng-template>\n\n<ng-template #controlesFormularioNuevo let-controlData=\"controlData\">\n    @switch (controlData.control) {\n        @case ('controlAgrupado') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputControlAgrupado, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('select') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputSelect, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('autocomplete') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputAutocomplete, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('date') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputDate, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('date_range') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputDateRange, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('checkbox') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputCheckBox, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @default {\n            @if (controlData.control === 'text' || controlData.control === 'number') {\n                <ng-container [ngTemplateOutletContext]=\"{template: inputTextNumber, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n            }\n        }\n    }\n</ng-template>\n\n<ng-template #contenedorInput let-template=\"template\" let-controlData=\"controlData\">\n    <fieldset [class.flex-auto]=\"!controlData.cssClass\" [class]=\"controlData.cssClass\" class=\"appearance-none contenedorCampo relative\">\n        <legend>\n            <label [for]=\"controlData.campo\">{{ controlData.label }}@if(controlData.required){<span class=\"text-red-700 font-bold\"> *</span>}</label>\n        </legend>\n        <ng-container [ngTemplateOutletContext]=\"{controlData: controlData}\" [ngTemplateOutlet]=\"template\"></ng-container>\n    </fieldset>\n</ng-template>\n\n<ng-template #inputSelect let-controlData=\"controlData\">\n    <select [formControl]=\"getControl(controlData.campo)\"\n        (change)=\"cambiarSeleccionNuevo(controlData, $event);\"\n        [class]=\"controlData.select?.cssClass?.class\"\n        [id]=\"controlData.campo\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n    >\n        @if (controlData.select?.textoCuandoNulo) {\n            <option value=\"\">{{ controlData.select?.textoCuandoNulo }}</option>\n        }\n        @for (itemSelect of dataServidorSuscripcion[controlData.select?.data!] | async; track $index) {\n            <option [class]=\"controlData.select?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n                {{ campoTextEval(controlData, itemSelect) }}\n            </option>\n        }\n    </select>\n</ng-template>\n\n<ng-template #inputControlAgrupado let-controlData=\"controlData\">\n    <div class=\"flex items-center campos-container\">\n        @for (sub of controlData.controlAgrupado; track sub.campo) {\n            @switch (sub.control) {\n                @case ('select') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputSelect\"></ng-container>\n                }\n                @case ('autocomplete') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputAutocomplete\"></ng-container>\n                }\n                @case ('date') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDate\"></ng-container>\n                }\n                @case ('date_range') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDateRange\"></ng-container>\n                }\n                @case ('checkbox') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputCheckBox\"></ng-container>\n                }\n                @default {\n                    @if (sub.control === 'text' || sub.control === 'number') {\n                        <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputTextNumber\"></ng-container>\n                    }\n                }\n            }\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputAutocomplete let-controlData=\"controlData\">\n    <div class=\"flex items-center formcontrol-container\">\n        <input [formControl]=\"getControl(controlData.campo + sufixTemporal)\"\n            (input)=\"cambiarNuevo(controlData, $any($event.target).value)\"\n            [matAutocomplete]=\"auto\"\n            autocomplete=\"off\"\n            [id]=\"controlData.campo\"\n            placeholder=\"{{ controlData.autocomplete?.textoCuandoNulo ?? controlData.label }}\"\n            [required]=\"controlData.required\"\n            [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        >\n        <mat-autocomplete #auto=\"matAutocomplete\"\n            (optionSelected)=\"cambiarSeleccionNuevo(controlData, $event)\"\n            [panelWidth]=\"'auto'\"\n            [displayWith]=\"getAutocompleteLabel.bind(this, controlData)\"\n        >\n            @for (itemSelect of filtrados[controlData.campo]; track $index) {\n                <mat-option [class]=\"controlData.autocomplete?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n                    @if (controlData.autocomplete?.optionInnerHtml) {\n                        <div [innerHTML]=\"controlData.autocomplete?.optionInnerHtml!(itemSelect)\"></div>\n                    } @else {\n                        {{ campoTextEval(controlData, itemSelect) }}\n                    }\n                </mat-option>\n            }\n        </mat-autocomplete>\n\n        <div class=\"flex items-center justify-start\">\n            <button (click)=\"limpiarAutocomplete(controlData, $event)\" class=\"boton-circular-gris\"\n                matRipple\n                type=\"button\"\n            >\n                <mat-icon [svgIcon]=\"(getControl(controlData.campo).value ? 'roundCancel' : 'roundSearch')\" class=\"icon-2xs\"></mat-icon>\n            </button>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #inputTextNumber let-controlData=\"controlData\">\n    <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n        [formControl]=\"getControl(controlData.campo)\"\n        [type]=\"controlData.control\"\n        autocomplete=\"off\"\n        [id]=\"controlData.campo\"\n        placeholder=\"{{ controlData.label }}\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n    >\n</ng-template>\n\n<ng-template #inputDate let-controlData=\"controlData\">\n    <div class=\"flex items-center date-container\">\n        <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n            [formControl]=\"getControl(controlData.campo)\"\n            (dateChange)=\"cambiarSeleccionNuevo(controlData, $event)\"\n            [matDatepicker]=\"i\"\n            autocomplete=\"off\"\n            [id]=\"controlData.campo\"\n            placeholder=\"{{ controlData.label }}\"\n            type=\"text\"\n            [required]=\"controlData.required\"\n            [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        >\n        <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #i></mat-datepicker>\n    </div>\n</ng-template>\n\n<ng-template #inputDateRange let-controlData=\"controlData\">\n    <div class=\"flex items-center daterange-container\">\n        <mat-date-range-input [rangePicker]=\"i\">\n            <input [formControl]=\"getControl(controlData.dateRange?.campo![0])\" matStartDate placeholder=\"Desde\">\n            <input [formControl]=\"getControl(controlData.dateRange?.campo![1])\" matEndDate placeholder=\"Hasta\">\n        </mat-date-range-input>\n        <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\"></mat-datepicker-toggle>\n        <mat-date-range-picker #i></mat-date-range-picker>\n    </div>\n</ng-template>\n\n<ng-template #inputCheckBox let-controlData=\"controlData\">\n    <input [formControl]=\"getControl(controlData.campo)\"\n        [id]=\"controlData.campo\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        type=\"checkbox\"\n        (change)=\"cambiarSeleccionNuevo(controlData, $event)\"\n    >\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.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: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i5$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatRadioModule }, { 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: MatSelectModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: TextFieldModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-filtro-busqueda', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatCheckboxModule,
+                        MatDatepickerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatOptionModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSelectModule,
+                        MatTabsModule,
+                        TextFieldModule,
+                    ], host: {
+                        class: 'jvsFiltroBusqueda',
+                    }, template: "@if (isCargaCompleta()) {\n  <div class=\"filtroBusqueda w-full\">\n    <div class=\"border-none p-0 flex flex-col\">\n\n      @if (dataOpcionesNuevo().length === 1) {\n        <div class=\"flex-1 flex items-end max-sm:flex-col flex-wrap gap-2\">\n            <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n        </div>\n      } @else if (dataOpcionesNuevo().length > 1) {\n        <div class=\"flex-1 flex flex-col flex-wrap gap-2 border\">\n            <mat-tab-group\n                [selectedIndex]=\"tabActual()\"\n                (selectedIndexChange)=\"getControlRaiz('opcion').setValue($event)\"\n                class=\"flex-1 flex flex-wrap\"\n                [mat-stretch-tabs]=\"false\"\n                dynamicHeight\n                mat-align-tabs=\"start\"\n            >\n                @for (item of dataOpcionesNuevo(); track $index) {\n                    <mat-tab [aria-label]=\"(tabActual() === $index) ? 'primary' : ''\">\n                        <ng-template mat-tab-label>\n                            @if (tabActual() === $index) {\n                                <mat-icon class=\"icon-xs\" svgIcon=\"roundVerified\"></mat-icon>\n                            }\n                            &nbsp;{{ item.label }}\n                        </ng-template>\n\n                        <div class=\"mx-2 mt-0 pt-0 flex flex-col items-end sm:flex-row flex-wrap gap-2\">\n                            <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n                        </div>\n                    </mat-tab>\n                }\n            </mat-tab-group>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #verOpcionesT>\n    @for (campo of dataOpcionesNuevo()[tabActual()]?.campos; track campo.campo) {\n        <ng-container [ngTemplateOutletContext]=\"{controlData: campo}\" [ngTemplateOutlet]=\"controlesFormularioNuevo\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"botonFiltrar\"></ng-container>\n</ng-template>\n\n<ng-template #botonFiltrar>\n    <button (click)=\"filtrarData()\"\n        class=\"flex items-center justify-center bg-primary text-primary-contrast font-bold uppercase text-xs px-2 py-1 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150\"\n        matRipple type=\"button\"\n        [disabled]=\"!isCargaCompleta()\"\n    >\n        <mat-icon class=\"icon-xs\" svgIcon=\"roundFilterAlt\"></mat-icon>&nbsp;\n        <span>Filtrar</span>\n    </button>\n</ng-template>\n\n<ng-template #controlesFormularioNuevo let-controlData=\"controlData\">\n    @switch (controlData.control) {\n        @case ('controlAgrupado') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputControlAgrupado, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('select') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputSelect, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('autocomplete') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputAutocomplete, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('date') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputDate, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('date_range') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputDateRange, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('checkbox') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputCheckBox, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @default {\n            @if (controlData.control === 'text' || controlData.control === 'number') {\n                <ng-container [ngTemplateOutletContext]=\"{template: inputTextNumber, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n            }\n        }\n    }\n</ng-template>\n\n<ng-template #contenedorInput let-template=\"template\" let-controlData=\"controlData\">\n    <fieldset [class.flex-auto]=\"!controlData.cssClass\" [class]=\"controlData.cssClass\" class=\"appearance-none contenedorCampo relative\">\n        <legend>\n            <label [for]=\"controlData.campo\">{{ controlData.label }}@if(controlData.required){<span class=\"text-red-700 font-bold\"> *</span>}</label>\n        </legend>\n        <ng-container [ngTemplateOutletContext]=\"{controlData: controlData}\" [ngTemplateOutlet]=\"template\"></ng-container>\n    </fieldset>\n</ng-template>\n\n<ng-template #inputSelect let-controlData=\"controlData\">\n    <select [formControl]=\"getControl(controlData.campo)\"\n        (change)=\"cambiarSeleccionNuevo(controlData, $event);\"\n        [class]=\"controlData.select?.cssClass?.class\"\n        [id]=\"controlData.campo\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n    >\n        @if (controlData.select?.textoCuandoNulo) {\n            <option value=\"\">{{ controlData.select?.textoCuandoNulo }}</option>\n        }\n        @for (itemSelect of dataServidorSuscripcion[controlData.select?.data!] | async; track $index) {\n            <option [class]=\"controlData.select?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n                {{ campoTextEval(controlData, itemSelect) }}\n            </option>\n        }\n    </select>\n</ng-template>\n\n<ng-template #inputControlAgrupado let-controlData=\"controlData\">\n    <div class=\"flex items-center campos-container\">\n        @for (sub of controlData.controlAgrupado; track sub.campo) {\n            @switch (sub.control) {\n                @case ('select') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputSelect\"></ng-container>\n                }\n                @case ('autocomplete') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputAutocomplete\"></ng-container>\n                }\n                @case ('date') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDate\"></ng-container>\n                }\n                @case ('date_range') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDateRange\"></ng-container>\n                }\n                @case ('checkbox') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputCheckBox\"></ng-container>\n                }\n                @default {\n                    @if (sub.control === 'text' || sub.control === 'number') {\n                        <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputTextNumber\"></ng-container>\n                    }\n                }\n            }\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputAutocomplete let-controlData=\"controlData\">\n    <div class=\"flex items-center formcontrol-container\">\n        <input [formControl]=\"getControl(controlData.campo + sufixTemporal)\"\n            (input)=\"cambiarNuevo(controlData, $any($event.target).value)\"\n            [matAutocomplete]=\"auto\"\n            autocomplete=\"off\"\n            [id]=\"controlData.campo\"\n            placeholder=\"{{ controlData.autocomplete?.textoCuandoNulo ?? controlData.label }}\"\n            [required]=\"controlData.required\"\n            [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        >\n        <mat-autocomplete #auto=\"matAutocomplete\"\n            (optionSelected)=\"cambiarSeleccionNuevo(controlData, $event)\"\n            [panelWidth]=\"'auto'\"\n            [displayWith]=\"getAutocompleteLabel.bind(this, controlData)\"\n        >\n            @for (itemSelect of filtrados[controlData.campo]; track $index) {\n                <mat-option [class]=\"controlData.autocomplete?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n                    @if (controlData.autocomplete?.optionInnerHtml) {\n                        <div [innerHTML]=\"controlData.autocomplete?.optionInnerHtml!(itemSelect)\"></div>\n                    } @else {\n                        {{ campoTextEval(controlData, itemSelect) }}\n                    }\n                </mat-option>\n            }\n        </mat-autocomplete>\n\n        <div class=\"flex items-center justify-start\">\n            <button (click)=\"limpiarAutocomplete(controlData, $event)\" class=\"boton-circular-gris\"\n                matRipple\n                type=\"button\"\n            >\n                <mat-icon [svgIcon]=\"(getControl(controlData.campo).value ? 'roundCancel' : 'roundSearch')\" class=\"icon-2xs\"></mat-icon>\n            </button>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #inputTextNumber let-controlData=\"controlData\">\n    <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n        [formControl]=\"getControl(controlData.campo)\"\n        [type]=\"controlData.control\"\n        autocomplete=\"off\"\n        [id]=\"controlData.campo\"\n        placeholder=\"{{ controlData.label }}\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n    >\n</ng-template>\n\n<ng-template #inputDate let-controlData=\"controlData\">\n    <div class=\"flex items-center date-container\">\n        <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n            [formControl]=\"getControl(controlData.campo)\"\n            (dateChange)=\"cambiarSeleccionNuevo(controlData, $event)\"\n            [matDatepicker]=\"i\"\n            autocomplete=\"off\"\n            [id]=\"controlData.campo\"\n            placeholder=\"{{ controlData.label }}\"\n            type=\"text\"\n            [required]=\"controlData.required\"\n            [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        >\n        <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #i></mat-datepicker>\n    </div>\n</ng-template>\n\n<ng-template #inputDateRange let-controlData=\"controlData\">\n    <div class=\"flex items-center daterange-container\">\n        <mat-date-range-input [rangePicker]=\"i\">\n            <input [formControl]=\"getControl(controlData.dateRange?.campo![0])\" matStartDate placeholder=\"Desde\">\n            <input [formControl]=\"getControl(controlData.dateRange?.campo![1])\" matEndDate placeholder=\"Hasta\">\n        </mat-date-range-input>\n        <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\"></mat-datepicker-toggle>\n        <mat-date-range-picker #i></mat-date-range-picker>\n    </div>\n</ng-template>\n\n<ng-template #inputCheckBox let-controlData=\"controlData\">\n    <input [formControl]=\"getControl(controlData.campo)\"\n        [id]=\"controlData.campo\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        type=\"checkbox\"\n        (change)=\"cambiarSeleccionNuevo(controlData, $event)\"\n    >\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
 
 // export {};
 // import './src/styles.scss';
@@ -2331,5 +2958,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DialogFlotanteComponent, ListaArbolComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, MenuComponent, ProgressBarComponent, TablaMantenimientoComponent, TablaMantenimientoService };
+export { DialogFlotanteComponent, FiltroBusquedaComponent, FiltroBusquedaService, ListaArbolComponent, LucesNavidadComponent, MatSuffixSearchButtonComponent, MenuComponent, ProgressBarComponent, QUERY_SERVICE_TOKEN, TablaMantenimientoComponent, TablaMantenimientoService };
 //# sourceMappingURL=jvsoft-components.mjs.map