ng-components-tsi 0.0.31 → 0.0.33

package/fesm2022/ng-components-tsi.mjs

@@ -17,7 +17,7 @@ import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterOutlet, Router
 import { toSignal, rxResource } from '@angular/core/rxjs-interop';
 import { SesionService } from 'core-tsi';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import Swal from 'sweetalert2';
+import Swal from 'sweetalert2/dist/sweetalert2.js';
 
 class AtajosDirective {
     altKeyCombination = input('');
@@ -26,8 +26,8 @@ class AtajosDirective {
         const key = event.key?.toLowerCase?.();
         if (!key)
             return;
-        if (event.altKey &&
-            !event.ctrlKey &&
+        if (event.ctrlKey &&
+            !event.altKey &&
             !event.metaKey &&
             !event.shiftKey &&
             key === this.altKeyCombination().toLowerCase()) {
@@ -191,14 +191,14 @@ class ButtonComponent {
         }
     }
     construirAlt = () => {
-        return this.atajo() ? `${this.texto()}: Alt + ${this.atajo()}` : "";
+        return this.atajo() ? `${this.texto()}: Ctrl + ${this.atajo()}` : "";
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, texto: { classPropertyName: "texto", publicName: "texto", isSignal: true, isRequired: false, transformFunction: null }, isHtml: { classPropertyName: "isHtml", publicName: "isHtml", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, sunatButton: { classPropertyName: "sunatButton", publicName: "sunatButton", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null }, buttonDeshabilitado: { classPropertyName: "buttonDeshabilitado", publicName: "buttonDeshabilitado", isSignal: true, isRequired: false, transformFunction: null }, atajo: { classPropertyName: "atajo", publicName: "atajo", isSignal: true, isRequired: false, transformFunction: null }, dropdownButton: { classPropertyName: "dropdownButton", publicName: "dropdownButton", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, uploadButton: { classPropertyName: "uploadButton", publicName: "uploadButton", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, isNotStyle: { classPropertyName: "isNotStyle", publicName: "isNotStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accion: "accion", fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "buttonNormal", first: true, predicate: ["boton"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ? texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span>{{ texto() }}</span>\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: AtajosDirective, selector: "[atajoTecla]", inputs: ["altKeyCombination"], outputs: ["emitirAtajo"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, texto: { classPropertyName: "texto", publicName: "texto", isSignal: true, isRequired: false, transformFunction: null }, isHtml: { classPropertyName: "isHtml", publicName: "isHtml", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, sunatButton: { classPropertyName: "sunatButton", publicName: "sunatButton", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null }, buttonDeshabilitado: { classPropertyName: "buttonDeshabilitado", publicName: "buttonDeshabilitado", isSignal: true, isRequired: false, transformFunction: null }, atajo: { classPropertyName: "atajo", publicName: "atajo", isSignal: true, isRequired: false, transformFunction: null }, dropdownButton: { classPropertyName: "dropdownButton", publicName: "dropdownButton", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, uploadButton: { classPropertyName: "uploadButton", publicName: "uploadButton", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, isNotStyle: { classPropertyName: "isNotStyle", publicName: "isNotStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accion: "accion", fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "buttonNormal", first: true, predicate: ["boton"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass()]\" (click)=\"ejecutarAccion()\"\r\n    [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ?\r\n    texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n    (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span>{{ texto() }}</span>\r\n    }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: AtajosDirective, selector: "[atajoTecla]", inputs: ["altKeyCombination"], outputs: ["emitirAtajo"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', imports: [CommonModule, NgbTooltipModule, AtajosDirective], template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ? texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span>{{ texto() }}</span>\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"] }]
+            args: [{ selector: 'app-button', imports: [CommonModule, NgbTooltipModule, AtajosDirective], template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass()]\" (click)=\"ejecutarAccion()\"\r\n    [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ?\r\n    texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n    (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span>{{ texto() }}</span>\r\n    }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -353,6 +353,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class AlertaComponent {
     titulo = input('Atención:');
     mensaje = input('La consulta muestra los 100 primeros registros.');
+    iconSize = input(25);
+    classContainer = input('p-2');
+    paddingClass = input(73);
     validateSalto = input(false);
     mensajeFormateado = computed(() => {
         if (!this.validateSalto()) {
@@ -361,11 +364,11 @@ class AlertaComponent {
         return this.mensaje().replace(/\n/g, '<br>');
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertaComponent, isStandalone: true, selector: "app-alerta", inputs: { titulo: { classPropertyName: "titulo", publicName: "titulo", isSignal: true, isRequired: false, transformFunction: null }, mensaje: { classPropertyName: "mensaje", publicName: "mensaje", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex bg-title align-items-center flex-md-row p-2\"\r\n    [ngClass]=\"{'flex-column': (titulo()?.length || 0) + (mensajeFormateado()?.length || 0) > 100}\">\r\n    <i class=\"fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0\"></i>\r\n    <div class=\"text-alerta text-center text-sm-start ms-1\" [class.text-hanging]=\"validateSalto()\">\r\n        @if (titulo()) {\r\n        <strong class=\"alert-title\">{{ titulo() }}</strong>\r\n        }\r\n        @if (!validateSalto()) {\r\n        {{ mensaje() }}\r\n        }\r\n\r\n        @if (validateSalto()) {\r\n        <span class=\"alert-message\" [innerHTML]=\"mensajeFormateado()\"></span>\r\n        }\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".bg-title{position:relative;background:#fff0d5;display:inline-flex;padding:5px;color:#000;font-weight:400;border-radius:8px;overflow:hidden}.bg-title:after{content:\"\";position:absolute;background:#f0ad86;top:0;left:0;animation:moveAround 4s linear infinite}@keyframes moveAround{0%{top:0;left:0;width:200px;height:2px}25%{top:0;left:calc(100% + -0px);width:2px;height:2px}50%{top:calc(100% - 2px);left:calc(100% - 2px);width:200px;height:50px}75%{top:calc(100% - 2px);left:0;width:2px;height:50px}to{top:0;left:0;width:2px;height:2px}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:25px;color:#855d16}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}.text-alerta{font-size:14px}.text-hanging{position:relative;padding-left:73px}.text-hanging .alert-title{position:absolute;left:0;top:50%;transform:translateY(-50%)}.text-hanging .alert-message{display:block;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertaComponent, isStandalone: true, selector: "app-alerta", inputs: { titulo: { classPropertyName: "titulo", publicName: "titulo", isSignal: true, isRequired: false, transformFunction: null }, mensaje: { classPropertyName: "mensaje", publicName: "mensaje", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, classContainer: { classPropertyName: "classContainer", publicName: "classContainer", isSignal: true, isRequired: false, transformFunction: null }, paddingClass: { classPropertyName: "paddingClass", publicName: "paddingClass", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex bg-title align-items-center flex-md-row {{classContainer()}}\"\r\n    [ngClass]=\"{'flex-column': (titulo()?.length || 0) + (mensajeFormateado()?.length || 0) > 100}\">\r\n    <i class=\"fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0\" [style.fontSize.px]=\"iconSize()\"></i>\r\n    <div class=\"text-alerta text-center text-sm-start ms-1\" [class.text-hanging]=\"validateSalto()\"\r\n    [style.paddingLeft.px]=\"validateSalto() ? paddingClass() : null\" >\r\n        @if (titulo()) {\r\n        <strong class=\"alert-title\">{{ titulo() }}</strong>\r\n        }\r\n        @if (!validateSalto()) {\r\n        {{ mensaje() }}\r\n        }\r\n\r\n        @if (validateSalto()) {\r\n        <span class=\"alert-message\" [innerHTML]=\"mensajeFormateado()\"></span>\r\n        }\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".bg-title{position:relative;background:#fff0d5;display:inline-flex;padding:5px;color:#000;font-weight:400;border-radius:8px;overflow:hidden}.bg-title:after{content:\"\";position:absolute;background:#f0ad86;top:0;left:0;animation:moveAround 4s linear infinite}@keyframes moveAround{0%{top:0;left:0;width:200px;height:2px}25%{top:0;left:calc(100% + -0px);width:2px;height:2px}50%{top:calc(100% - 2px);left:calc(100% - 2px);width:200px;height:50px}75%{top:calc(100% - 2px);left:0;width:2px;height:50px}to{top:0;left:0;width:2px;height:2px}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;color:#855d16}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}.text-alerta{font-size:14px}.text-hanging{position:relative;padding-left:73px}.text-hanging .alert-title{position:absolute;left:0;top:50%;transform:translateY(-50%)}.text-hanging .alert-message{display:block;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-alerta', imports: [NgClass], template: "<div class=\"d-flex bg-title align-items-center flex-md-row p-2\"\r\n    [ngClass]=\"{'flex-column': (titulo()?.length || 0) + (mensajeFormateado()?.length || 0) > 100}\">\r\n    <i class=\"fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0\"></i>\r\n    <div class=\"text-alerta text-center text-sm-start ms-1\" [class.text-hanging]=\"validateSalto()\">\r\n        @if (titulo()) {\r\n        <strong class=\"alert-title\">{{ titulo() }}</strong>\r\n        }\r\n        @if (!validateSalto()) {\r\n        {{ mensaje() }}\r\n        }\r\n\r\n        @if (validateSalto()) {\r\n        <span class=\"alert-message\" [innerHTML]=\"mensajeFormateado()\"></span>\r\n        }\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".bg-title{position:relative;background:#fff0d5;display:inline-flex;padding:5px;color:#000;font-weight:400;border-radius:8px;overflow:hidden}.bg-title:after{content:\"\";position:absolute;background:#f0ad86;top:0;left:0;animation:moveAround 4s linear infinite}@keyframes moveAround{0%{top:0;left:0;width:200px;height:2px}25%{top:0;left:calc(100% + -0px);width:2px;height:2px}50%{top:calc(100% - 2px);left:calc(100% - 2px);width:200px;height:50px}75%{top:calc(100% - 2px);left:0;width:2px;height:50px}to{top:0;left:0;width:2px;height:2px}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:25px;color:#855d16}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}.text-alerta{font-size:14px}.text-hanging{position:relative;padding-left:73px}.text-hanging .alert-title{position:absolute;left:0;top:50%;transform:translateY(-50%)}.text-hanging .alert-message{display:block;white-space:pre-line}\n"] }]
+            args: [{ selector: 'app-alerta', imports: [NgClass], template: "<div class=\"d-flex bg-title align-items-center flex-md-row {{classContainer()}}\"\r\n    [ngClass]=\"{'flex-column': (titulo()?.length || 0) + (mensajeFormateado()?.length || 0) > 100}\">\r\n    <i class=\"fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0\" [style.fontSize.px]=\"iconSize()\"></i>\r\n    <div class=\"text-alerta text-center text-sm-start ms-1\" [class.text-hanging]=\"validateSalto()\"\r\n    [style.paddingLeft.px]=\"validateSalto() ? paddingClass() : null\" >\r\n        @if (titulo()) {\r\n        <strong class=\"alert-title\">{{ titulo() }}</strong>\r\n        }\r\n        @if (!validateSalto()) {\r\n        {{ mensaje() }}\r\n        }\r\n\r\n        @if (validateSalto()) {\r\n        <span class=\"alert-message\" [innerHTML]=\"mensajeFormateado()\"></span>\r\n        }\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".bg-title{position:relative;background:#fff0d5;display:inline-flex;padding:5px;color:#000;font-weight:400;border-radius:8px;overflow:hidden}.bg-title:after{content:\"\";position:absolute;background:#f0ad86;top:0;left:0;animation:moveAround 4s linear infinite}@keyframes moveAround{0%{top:0;left:0;width:200px;height:2px}25%{top:0;left:calc(100% + -0px);width:2px;height:2px}50%{top:calc(100% - 2px);left:calc(100% - 2px);width:200px;height:50px}75%{top:calc(100% - 2px);left:0;width:2px;height:50px}to{top:0;left:0;width:2px;height:2px}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;color:#855d16}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}.text-alerta{font-size:14px}.text-hanging{position:relative;padding-left:73px}.text-hanging .alert-title{position:absolute;left:0;top:50%;transform:translateY(-50%)}.text-hanging .alert-message{display:block;white-space:pre-line}\n"] }]
         }] });
 
 class AlertErrorComponent {
@@ -532,6 +535,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ['customActions', { static: false }]
             }] } });
 
+class FilterToggleComponent {
+    hasData = input(false);
+    tamanio = input('7');
+    withFiltro = model(true);
+    toggleFiltro() {
+        if (this.hasData()) {
+            this.withFiltro.update(value => !value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FilterToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: FilterToggleComponent, isStandalone: true, selector: "app-filter-toggle", inputs: { hasData: { classPropertyName: "hasData", publicName: "hasData", isSignal: true, isRequired: false, transformFunction: null }, tamanio: { classPropertyName: "tamanio", publicName: "tamanio", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withFiltro: "withFiltroChange" }, ngImport: i0, template: `
+    <div class="d-flex align-items-center cursor-pointer"
+         [ngClass]="{ 'disabled-icon': !hasData() }">
+      <i class="fa-solid fa-filter px-2 me-1" [class]="'fs-' + tamanio()"></i>
+      <i class="icon-arrow fa-solid fa-chevron-down"
+         [ngClass]="{ 'rotate-up': !withFiltro(), 'disabled-icon': !hasData() }"></i>
+    </div>
+  `, isInline: true, styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FilterToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-filter-toggle', imports: [CommonModule], template: `
+    <div class="d-flex align-items-center cursor-pointer"
+         [ngClass]="{ 'disabled-icon': !hasData() }">
+      <i class="fa-solid fa-filter px-2 me-1" [class]="'fs-' + tamanio()"></i>
+      <i class="icon-arrow fa-solid fa-chevron-down"
+         [ngClass]="{ 'rotate-up': !withFiltro(), 'disabled-icon': !hasData() }"></i>
+    </div>
+  `, styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"] }]
+        }] });
+
 class HeaderComponent {
     title = input('');
     tamanio = input('7');
@@ -552,11 +586,11 @@ class HeaderComponent {
         this.cerrarModal.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tamanio: { classPropertyName: "tamanio", publicName: "tamanio", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, hasData: { classPropertyName: "hasData", publicName: "hasData", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withFiltro: "withFiltroChange", cerrarModal: "cerrarModal" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between position-relative flex-wrap\"\r\n    [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n    <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n        <h5 class=\"fw-bold pe-2\" [ngClass]=\"['fs-' + tamanio(),  isModal() ? 'pt-3' : 'pt-2']\">\r\n            {{ title() }}\r\n        </h5>\r\n        @if(showFiltro()){\r\n        <div [ngClass]=\"{'pt-2': isModal()}\">\r\n            <i class=\"fa-solid fa-filter px-2 me-1\" [class]=\"'fs-' + tamanio()\"\r\n                [ngClass]=\"{ 'disabled-icon': !hasData() }\"></i>\r\n\r\n            <i class=\"icon-arrow fa-solid fa-chevron-down\"\r\n                [ngClass]=\"{ 'rotate-up': !withFiltro(), 'disabled-icon': !hasData()}\"></i>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-actions\">\r\n        @if (showAlerta()) {\r\n        <app-alerta [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n        }\r\n        @if(isModal()){\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }, { kind: "component", type: AlertaComponent, selector: "app-alerta", inputs: ["titulo", "mensaje", "validateSalto"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tamanio: { classPropertyName: "tamanio", publicName: "tamanio", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, hasData: { classPropertyName: "hasData", publicName: "hasData", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withFiltro: "withFiltroChange", cerrarModal: "cerrarModal" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between position-relative flex-wrap\"\r\n    [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n    <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n        <h5 class=\"fw-bold no-select\" [ngClass]=\"['fs-' + tamanio(),  isModal() ? 'pt-3' : 'pt-2']\">\r\n            {{ title() }}\r\n        </h5>\r\n        @if(showFiltro()){\r\n        <div [ngClass]=\"{'pt-2': isModal()}\">\r\n            <app-filter-toggle [hasData]=\"hasData()\" [(withFiltro)]=\"withFiltro\" />\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-actions\">\r\n        @if (showAlerta()) {\r\n        <app-alerta [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n        }\r\n        @if(isModal()){\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }, { kind: "component", type: AlertaComponent, selector: "app-alerta", inputs: ["titulo", "mensaje", "iconSize", "classContainer", "paddingClass", "validateSalto"] }, { kind: "component", type: FilterToggleComponent, selector: "app-filter-toggle", inputs: ["hasData", "tamanio", "withFiltro"], outputs: ["withFiltroChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-header', imports: [CommonModule, ButtonComponent, AlertaComponent], template: "<div class=\"d-flex justify-content-between position-relative flex-wrap\"\r\n    [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n    <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n        <h5 class=\"fw-bold pe-2\" [ngClass]=\"['fs-' + tamanio(),  isModal() ? 'pt-3' : 'pt-2']\">\r\n            {{ title() }}\r\n        </h5>\r\n        @if(showFiltro()){\r\n        <div [ngClass]=\"{'pt-2': isModal()}\">\r\n            <i class=\"fa-solid fa-filter px-2 me-1\" [class]=\"'fs-' + tamanio()\"\r\n                [ngClass]=\"{ 'disabled-icon': !hasData() }\"></i>\r\n\r\n            <i class=\"icon-arrow fa-solid fa-chevron-down\"\r\n                [ngClass]=\"{ 'rotate-up': !withFiltro(), 'disabled-icon': !hasData()}\"></i>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-actions\">\r\n        @if (showAlerta()) {\r\n        <app-alerta [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n        }\r\n        @if(isModal()){\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"] }]
+            args: [{ selector: 'app-header', imports: [CommonModule, ButtonComponent, AlertaComponent, FilterToggleComponent], template: "<div class=\"d-flex justify-content-between position-relative flex-wrap\"\r\n    [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n    <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n        <h5 class=\"fw-bold no-select\" [ngClass]=\"['fs-' + tamanio(),  isModal() ? 'pt-3' : 'pt-2']\">\r\n            {{ title() }}\r\n        </h5>\r\n        @if(showFiltro()){\r\n        <div [ngClass]=\"{'pt-2': isModal()}\">\r\n            <app-filter-toggle [hasData]=\"hasData()\" [(withFiltro)]=\"withFiltro\" />\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-actions\">\r\n        @if (showAlerta()) {\r\n        <app-alerta [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n        }\r\n        @if(isModal()){\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"] }]
         }] });
 
 class AutocompleteComponent {
@@ -1959,9 +1993,43 @@ class DropdownMenuComponent {
     factores = signal(this.sesion.getSession().factores);
     activeSubmenu = signal({});
     inputButton = input(false);
-    visibleOptions = computed(() => this.options().filter(opt => opt.condition !== false &&
-        (!opt.factor || this.factores()[opt.factor.key])));
+    isMobile = signal(window.innerWidth <= 768);
+    onResize(event) {
+        this.isMobile.set(event.target.innerWidth <= 768);
+    }
+    visibleOptions = computed(() => {
+        const allOptions = this.options();
+        if (this.isMobile()) {
+            return allOptions.filter(opt => opt.condition !== false &&
+                (!opt.factor || this.factores()[opt.factor.key]) &&
+                (opt.action || opt.upload || opt.fileAction || opt.submenu));
+        }
+        return allOptions.filter(opt => opt.condition !== false &&
+            (!opt.factor || this.factores()[opt.factor.key]));
+    });
     buttonProps = computed(() => this.buttonProperties());
+    mobileFlatOptions = computed(() => {
+        if (!this.isMobile())
+            return [];
+        const flat = [];
+        this.visibleOptions().forEach(option => {
+            if (option.submenu) {
+                const subs = this.getVisibleSubmenuItems(option.submenu);
+                subs.forEach(sub => flat.push(sub));
+            }
+            else {
+                flat.push(option);
+            }
+        });
+        return flat;
+    });
+    isFirstMobileItem(item) {
+        return this.mobileFlatOptions()[0] == item;
+    }
+    isLastMobileItem(item) {
+        const list = this.mobileFlatOptions();
+        return list[list.length - 1] == item;
+    }
     handleMainButtonMouseEnter() {
         if (this.hoverTrigger()) {
             this.dropdown.open();
@@ -2031,11 +2099,11 @@ class DropdownMenuComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, buttonProperties: { classPropertyName: "buttonProperties", publicName: "buttonProperties", isSignal: true, isRequired: false, transformFunction: null }, hoverTrigger: { classPropertyName: "hoverTrigger", publicName: "hoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: NgbDropdown, descendants: true }, { propertyName: "submenuAnchors", predicate: ["submenuAnchor"], descendants: true }, { propertyName: "submenuDivs", predicate: ["submenuDiv"], descendants: true }], ngImport: i0, template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n  @if (buttonProps()) {\r\n  <button \r\n    [colorBtn]=\"buttonProps()?.color || null\" \r\n    [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"  \r\n    class=\"button-tilt-hover w-auto w-sm-100\"\r\n    [ngClass]=\"{\r\n      'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n      'pbp-6 wrap': !inputButton()\r\n    }\"\r\n    ngbDropdownToggle\r\n    (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n    <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i> {{ buttonProps()?.texto }}\r\n  </button>\r\n  } @else {\r\n  <button class=\"btn btn-sm border-0\" ngbDropdownToggle\r\n    (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\"\r\n    [disabled]=\"disabled()\"\r\n    >\r\n    <i class=\"fas fa-align-left fs-6\"></i>\r\n  </button>\r\n  }\r\n\r\n  <div ngbDropdownMenu class=\"my-0 py-0\"\r\n    (mouseenter)=\"handleDropdownMouseEnter()\"\r\n    (mouseleave)=\"handleDropdownMouseLeave()\">\r\n    @for (option of visibleOptions(); track $index) {\r\n    <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n      (mouseenter)=\"submenuAnchor.open()\">\r\n      @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n      <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n        [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n        (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n        [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n        [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n        (mouseleave)=\"mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n        @if (option.submenu) {\r\n        <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n          (mouseleave)=\"mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n          @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n          <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n            [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n            [tooltip]=\"getPropertyName(sub.property)\"\r\n            [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n            [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n          }\r\n        </div>\r\n        }\r\n      </app-button>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media (max-width: 575px){.d-inline-block{display:block!important}}button.radius-none,.btn.radius-none{border-radius:0!important}.padd{padding:3px 8px!important}\n"], dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }, { kind: "directive", type: IconsDirective, selector: "[iconName]", inputs: ["iconName"] }, { kind: "directive", type: ButtonsModalDirective, selector: "[colorBtn]", inputs: ["colorBtn"] }, { kind: "directive", type: ButtonsOutlineDirective, selector: "[colorOutlineBtn]", inputs: ["colorOutlineBtn"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, buttonProperties: { classPropertyName: "buttonProperties", publicName: "buttonProperties", isSignal: true, isRequired: false, transformFunction: null }, hoverTrigger: { classPropertyName: "hoverTrigger", publicName: "hoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: NgbDropdown, descendants: true }, { propertyName: "submenuAnchors", predicate: ["submenuAnchor"], descendants: true }, { propertyName: "submenuDivs", predicate: ["submenuDiv"], descendants: true }], ngImport: i0, template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n  @if (buttonProps()) {\r\n  <button [colorBtn]=\"buttonProps()?.color || null\"\r\n    [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"\r\n    class=\"button-tilt-hover w-auto w-sm-100\" [ngClass]=\"{\r\n      'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n      'pbp-6 wrap': !inputButton()\r\n    }\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\" (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n    <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i> {{ buttonProps()?.texto }}\r\n  </button>\r\n  } @else {\r\n  <button class=\"btn btn-sm border-0\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\" [disabled]=\"disabled()\">\r\n    <i class=\"fas fa-align-left fs-6\"></i>\r\n  </button>\r\n  }\r\n\r\n  <div ngbDropdownMenu class=\"my-0 py-0\" (mouseenter)=\"!isMobile() && handleDropdownMouseEnter()\"\r\n    (mouseleave)=\"!isMobile() && handleDropdownMouseLeave()\">\r\n    @for (option of visibleOptions(); track $index) {\r\n    @if (isMobile() && option.submenu) {\r\n    @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n    <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\" [uploadButton]=\"sub.upload\"\r\n      [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n      [tooltip]=\"getPropertyName(sub.property)\" [extraClass]=\"\r\n    (isFirstMobileItem(sub) ? 'border-top-radius ' : '') +\r\n    (isLastMobileItem(sub) ? 'border-bottom-radius' : '')\r\n  \" [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n    }\r\n    }\r\n    @else if (!option.submenu || (option.submenu && !isMobile())) {\r\n    <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n      (mouseenter)=\"!isMobile() && submenuAnchor.open()\">\r\n      @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n      <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n        [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n        (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n        [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n        [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n        (mouseleave)=\"!isMobile() && mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n        @if (option.submenu && !isMobile()) {\r\n        <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n          (mouseleave)=\"!isMobile() && mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n          @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n          <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n            [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n            [tooltip]=\"getPropertyName(sub.property)\"\r\n            [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n            [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n          }\r\n        </div>\r\n        }\r\n      </app-button>\r\n      }\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media (max-width: 575px){.d-inline-block{display:block!important}}button.radius-none,.btn.radius-none{border-radius:0!important}.padd{padding:3px 8px!important}\n"], dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }, { kind: "directive", type: IconsDirective, selector: "[iconName]", inputs: ["iconName"] }, { kind: "directive", type: ButtonsModalDirective, selector: "[colorBtn]", inputs: ["colorBtn"] }, { kind: "directive", type: ButtonsOutlineDirective, selector: "[colorOutlineBtn]", inputs: ["colorOutlineBtn"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dropdown-menu', imports: [NgbDropdownModule, CommonModule, ButtonComponent, IconsDirective, ButtonsModalDirective, ButtonsOutlineDirective], template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n  @if (buttonProps()) {\r\n  <button \r\n    [colorBtn]=\"buttonProps()?.color || null\" \r\n    [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"  \r\n    class=\"button-tilt-hover w-auto w-sm-100\"\r\n    [ngClass]=\"{\r\n      'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n      'pbp-6 wrap': !inputButton()\r\n    }\"\r\n    ngbDropdownToggle\r\n    (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n    <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i> {{ buttonProps()?.texto }}\r\n  </button>\r\n  } @else {\r\n  <button class=\"btn btn-sm border-0\" ngbDropdownToggle\r\n    (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\"\r\n    [disabled]=\"disabled()\"\r\n    >\r\n    <i class=\"fas fa-align-left fs-6\"></i>\r\n  </button>\r\n  }\r\n\r\n  <div ngbDropdownMenu class=\"my-0 py-0\"\r\n    (mouseenter)=\"handleDropdownMouseEnter()\"\r\n    (mouseleave)=\"handleDropdownMouseLeave()\">\r\n    @for (option of visibleOptions(); track $index) {\r\n    <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n      (mouseenter)=\"submenuAnchor.open()\">\r\n      @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n      <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n        [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n        (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n        [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n        [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n        (mouseleave)=\"mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n        @if (option.submenu) {\r\n        <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n          (mouseleave)=\"mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n          @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n          <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n            [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n            [tooltip]=\"getPropertyName(sub.property)\"\r\n            [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n            [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n          }\r\n        </div>\r\n        }\r\n      </app-button>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media (max-width: 575px){.d-inline-block{display:block!important}}button.radius-none,.btn.radius-none{border-radius:0!important}.padd{padding:3px 8px!important}\n"] }]
+            args: [{ selector: 'app-dropdown-menu', imports: [NgbDropdownModule, CommonModule, ButtonComponent, IconsDirective, ButtonsModalDirective, ButtonsOutlineDirective], template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n  @if (buttonProps()) {\r\n  <button [colorBtn]=\"buttonProps()?.color || null\"\r\n    [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"\r\n    class=\"button-tilt-hover w-auto w-sm-100\" [ngClass]=\"{\r\n      'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n      'pbp-6 wrap': !inputButton()\r\n    }\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\" (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n    <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i> {{ buttonProps()?.texto }}\r\n  </button>\r\n  } @else {\r\n  <button class=\"btn btn-sm border-0\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\" [disabled]=\"disabled()\">\r\n    <i class=\"fas fa-align-left fs-6\"></i>\r\n  </button>\r\n  }\r\n\r\n  <div ngbDropdownMenu class=\"my-0 py-0\" (mouseenter)=\"!isMobile() && handleDropdownMouseEnter()\"\r\n    (mouseleave)=\"!isMobile() && handleDropdownMouseLeave()\">\r\n    @for (option of visibleOptions(); track $index) {\r\n    @if (isMobile() && option.submenu) {\r\n    @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n    <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\" [uploadButton]=\"sub.upload\"\r\n      [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n      [tooltip]=\"getPropertyName(sub.property)\" [extraClass]=\"\r\n    (isFirstMobileItem(sub) ? 'border-top-radius ' : '') +\r\n    (isLastMobileItem(sub) ? 'border-bottom-radius' : '')\r\n  \" [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n    }\r\n    }\r\n    @else if (!option.submenu || (option.submenu && !isMobile())) {\r\n    <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n      (mouseenter)=\"!isMobile() && submenuAnchor.open()\">\r\n      @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n      <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n        [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n        (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n        [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n        [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n        (mouseleave)=\"!isMobile() && mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n        @if (option.submenu && !isMobile()) {\r\n        <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n          (mouseleave)=\"!isMobile() && mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n          @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n          <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n            [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n            [tooltip]=\"getPropertyName(sub.property)\"\r\n            [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n            [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n          }\r\n        </div>\r\n        }\r\n      </app-button>\r\n      }\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media (max-width: 575px){.d-inline-block{display:block!important}}button.radius-none,.btn.radius-none{border-radius:0!important}.padd{padding:3px 8px!important}\n"] }]
         }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: [NgbDropdown]
@@ -2045,6 +2113,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             }], submenuDivs: [{
                 type: ViewChildren,
                 args: ['submenuDiv']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }] } });
 
 class CardMobileComponent {
@@ -3427,7 +3498,6 @@ class TableUltimateComponent {
     selectedRow = model(null);
     identifier = input([]);
     altoContenedor = signal(0);
-    showPopoverFilter = signal(false);
     withHeight = input(false);
     rendered = input([]);
     withTotal = input(false);
@@ -3473,11 +3543,10 @@ class TableUltimateComponent {
         });
     }
     visibilidadColumn = linkedSignal(() => {
-        const columns = this.columns();
         const columnVisibility = {};
-        columns.forEach((col) => {
-            if (col.caption) {
-                columnVisibility[col.caption] = true;
+        this.columns().forEach(col => {
+            if (col.fieldname) {
+                columnVisibility[col.fieldname] = true;
             }
         });
         return columnVisibility;
@@ -3543,9 +3612,6 @@ class TableUltimateComponent {
         });
         this.observer.observe(this.anchor().nativeElement);
     }
-    togglePopoverFilter() {
-        this.showPopoverFilter.update(prev => !prev);
-    }
     selectRow(index) {
         if (this.identifier().length < 1) {
             return this.selectedRow.set(index);
@@ -3568,6 +3634,14 @@ class TableUltimateComponent {
                     ? valueA - valueB
                     : valueB - valueA;
             }
+            // VALIDACION ADICIONAL, SI ES TEXTO ,PERO NUMEROS
+            const numA = Number(valueA);
+            const numB = Number(valueB);
+            if (!isNaN(numA) && !isNaN(numB)) {
+                return this.sortDirection === 'asc'
+                    ? numA - numB
+                    : numB - numA;
+            }
             return this.sortDirection === 'asc'
                 ? valueA.toString().localeCompare(valueB.toString())
                 : valueB.toString().localeCompare(valueA.toString());
@@ -3721,11 +3795,365 @@ class TableUltimateComponent {
         this.rowEvent.emit({ usecase: 3, data: row });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{'switch_' + col.caption}}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                            <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                                for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\" [style.width.px]=\"column?.width\"\r\n                            [style.max-width.px]=\"column?.width\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width.px]=\"column?.width\" [style.max-width.px]=\"column?.width\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n    <app-dropdown-cdk>\r\n        <ng-template #trigger>\r\n            <button class=\"btn btn-dark boton-buscar fs-7\">\r\n                <i class=\"fas fa-cog\"></i>\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #content>\r\n            <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n                <div class=\"popover-title fs-7 bg-white\">\r\n                    Filtros\r\n                </div>\r\n\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n                        (change)=\"toggleFiltros($event)\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n                        Todos\r\n                    </label>\r\n                </div>\r\n\r\n                @for (col of columns(); track col.caption) {\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                        id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n                        {{ col.caption }}\r\n                    </label>\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n    </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{ 'switch_' + col.caption }}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n                                            <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n                                                for=\"{{ 'switch_' + col.caption }}\">\r\n                                                {{ col.caption }}\r\n                                            </label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], animations: [fadeInOut, dropdownAnimation] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-ultimate', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective], animations: [fadeInOut], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{'switch_' + col.caption}}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                            <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                                for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\" [style.width.px]=\"column?.width\"\r\n                            [style.max-width.px]=\"column?.width\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width.px]=\"column?.width\" [style.max-width.px]=\"column?.width\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
+            args: [{ selector: 'app-table-ultimate', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective], animations: [fadeInOut, dropdownAnimation], template: "\r\n@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n    <app-dropdown-cdk>\r\n        <ng-template #trigger>\r\n            <button class=\"btn btn-dark boton-buscar fs-7\">\r\n                <i class=\"fas fa-cog\"></i>\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #content>\r\n            <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n                <div class=\"popover-title fs-7 bg-white\">\r\n                    Filtros\r\n                </div>\r\n\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n                        (change)=\"toggleFiltros($event)\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n                        Todos\r\n                    </label>\r\n                </div>\r\n\r\n                @for (col of columns(); track col.caption) {\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                        id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n                        {{ col.caption }}\r\n                    </label>\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n    </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{ 'switch_' + col.caption }}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n                                            <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n                                                for=\"{{ 'switch_' + col.caption }}\">\r\n                                                {{ col.caption }}\r\n                                            </label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class TableAgrupadaComponent {
+    tableHeaders = viewChild('thElement');
+    customActions = contentChild('customActions');
+    anchor = viewChild('anchor');
+    formateador = inject(FormateadorService);
+    decimalPipe = inject(DecimalPipe);
+    titleTabla = input('Contrato');
+    rows = input([]);
+    columns = input([]);
+    withDetails = input(false);
+    withFiltro = input(false);
+    altoContainer = input();
+    colorHeader = input('normal');
+    busqueda = signal('');
+    selectedRow = model(null);
+    identifier = input([]);
+    altoContenedor = signal(0);
+    withHeight = input(false);
+    rendered = input([]);
+    withTotal = input(false);
+    withCheckbox = input(false);
+    selectItems = model([]);
+    isDarkMode = input(false);
+    sortColumn = null;
+    sortDirection = 'asc';
+    expandedRows = -1;
+    activeMobileMode = input(true);
+    /* VARIABLES PARA OPTIMIZAR */
+    dataVirtual = signal([]);
+    isLoading = signal(false);
+    isLoadingResponsive = signal(false);
+    loadedCount = 0;
+    observer;
+    maxItems = input(50);
+    batchSize = input(40);
+    rowClassFn = input(null);
+    rowDisabledFn = input(null);
+    hasColumnGroups = computed(() => this.columns().some(col => !!col.group));
+    groupedColumns = computed(() => {
+        if (!this.hasColumnGroups())
+            return [];
+        return this.columns().filter(c => c.group && c.visible !== false);
+    });
+    headerSegments = computed(() => {
+        const cols = this.columns().filter(c => c.visible !== false);
+        if (!cols.some(c => c.group)) {
+            return cols.map(col => ({ type: 'column', column: col }));
+        }
+        const result = [];
+        let i = 0;
+        while (i < cols.length) {
+            const col = cols[i];
+            if (!col.group) {
+                result.push({ type: 'column', column: col });
+                i++;
+                continue;
+            }
+            const groupName = col.group;
+            let colspan = 0;
+            while (i < cols.length && cols[i].group === groupName) {
+                colspan++;
+                i++;
+            }
+            result.push({ type: 'group', group: { label: groupName, colspan } });
+        }
+        return result;
+    });
+    rowEvent = output();
+    rowFormat = computed(() => this.formateador.procesarLista(this.rows(), this.columns()));
+    rowFilter = linkedSignal(() => {
+        const term = this.busqueda().toLowerCase();
+        const currentRows = this.rowFormat?.() || [];
+        return currentRows.filter(item => this.filtraItem(item, term));
+    });
+    filtrarColumnas = linkedSignal(() => {
+        const columns = this.columns();
+        const filtro = {};
+        columns.forEach((col) => {
+            if (col.fieldname) {
+                filtro[col.fieldname] = true;
+            }
+        });
+        return filtro;
+    });
+    toggleFiltros(event) {
+        const checked = event.target.checked;
+        const filtros = this.filtrarColumnas();
+        Object.keys(filtros).forEach(key => {
+            filtros[key] = checked;
+        });
+    }
+    visibilidadColumn = linkedSignal(() => {
+        const columnVisibility = {};
+        this.columns().forEach(col => {
+            if (col.fieldname) {
+                columnVisibility[col.fieldname] = true;
+            }
+        });
+        return columnVisibility;
+    });
+    concatenarValue(obj, value) {
+        let result = '';
+        value.forEach(el => {
+            result += obj[el];
+        });
+        return result;
+    }
+    isMobile = signal(window.innerWidth <= 768);
+    constructor() {
+        effect(() => {
+            const size = (this.rowFilter() ?? []).length;
+            const alto = this.altoContainer();
+            if (alto > 0 && alto < this.altoContenedor()) {
+                setTimeout(() => {
+                    this.altoContenedor.set(alto);
+                }, 300);
+            }
+            if (alto > 0 && alto > this.altoContenedor()) {
+                this.altoContenedor.set(alto);
+            }
+            const selected = untracked(() => this.selectedRow());
+            if (size > 0 && selected) {
+                queueMicrotask(() => {
+                    const el = document.getElementById('row_table_' + selected);
+                    el?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                });
+            }
+        });
+        effect(() => this.resetSroll());
+        effect(() => {
+            if (!this.activeMobileMode())
+                return;
+            this.isMobile();
+            this.isLoadingResponsive.set(true);
+            setTimeout(() => this.isLoadingResponsive.set(false), 200);
+        });
+        effect(() => {
+            if (this.anchor()) {
+                this.actionsAnchor();
+            }
+        });
+    }
+    onResize(event) {
+        if (!this.activeMobileMode())
+            return;
+        this.isMobile.set(event.target.innerWidth <= 768);
+    }
+    resetSroll() {
+        const filtered = this.rowFilter();
+        const firstBatch = filtered.slice(0, this.batchSize());
+        this.dataVirtual.set(firstBatch);
+        this.loadedCount = firstBatch.length;
+    }
+    actionsAnchor() {
+        this.observer = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting && this.loadedCount < this.rowFilter().length && !this.isLoading()) {
+                this.loadMore();
+            }
+        });
+        this.observer.observe(this.anchor().nativeElement);
+    }
+    selectRow(index) {
+        if (this.identifier().length < 1) {
+            return this.selectedRow.set(index);
+        }
+        this.selectedRow.set(this.concatenarValue(index, this.identifier()));
+    }
+    sortTable(column) {
+        if (this.sortColumn == column) {
+            this.sortDirection = this.sortDirection == 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortColumn = column;
+            this.sortDirection = 'asc';
+        }
+        const sorted = [...this.rowFilter()].sort((a, b) => {
+            const valueA = a[column] ?? '';
+            const valueB = b[column] ?? '';
+            if (typeof valueA === 'number' && typeof valueB === 'number') {
+                return this.sortDirection === 'asc'
+                    ? valueA - valueB
+                    : valueB - valueA;
+            }
+            // VALIDACION ADICIONAL, SI ES TEXTO ,PERO NUMEROS
+            const numA = Number(valueA);
+            const numB = Number(valueB);
+            if (!isNaN(numA) && !isNaN(numB)) {
+                return this.sortDirection === 'asc'
+                    ? numA - numB
+                    : numB - numA;
+            }
+            return this.sortDirection === 'asc'
+                ? valueA.toString().localeCompare(valueB.toString())
+                : valueB.toString().localeCompare(valueA.toString());
+        });
+        this.rowFilter.set(sorted);
+        this.resetSroll();
+        // this.dataVirtual().sort((a, b) => {
+        //   const valueA = a[column] ?? ''
+        //   const valueB = b[column] ?? ''
+        //   if (typeof valueA == 'number' && typeof valueB == 'number') {
+        //     return this.sortDirection == 'asc' ? valueA - valueB : valueB - valueA
+        //   } else {
+        //     return this.sortDirection == 'asc'
+        //       ? valueA.toString().localeCompare(valueB.toString())
+        //       : valueB.toString().localeCompare(valueA.toString())
+        //   }
+        // })
+    }
+    toggleExpandRow(index) {
+        this.expandedRows = this.expandedRows == index ? -1 : index;
+    }
+    textoDigitado(event) {
+        const value = event.target.value;
+        this.busqueda.set(value);
+    }
+    getHighlight(text, fieldname) {
+        if (text == null) {
+            text = '';
+        }
+        if (!this.filtrarColumnas()[fieldname] || !this.busqueda())
+            return text;
+        if (typeof text !== 'string') {
+            text = text.toString();
+        }
+        const regex = new RegExp(`(${this.busqueda()})`, 'gi');
+        return text?.replace(regex, '<mark>$1</mark>');
+    }
+    getSituacionNumberFromColumns(row, columns) {
+        const situacionColumn = columns.find(col => col.type == 'situacion_number');
+        if (situacionColumn) {
+            return row[situacionColumn.prop] || 0;
+        }
+        return 0;
+    }
+    filtraItem(item, term) {
+        const columnasActivas = Object.entries(this.filtrarColumnas())
+            .filter(([_campo, activo]) => activo);
+        return columnasActivas.some(([campo]) => {
+            const raw = item[campo];
+            const formatted = item._format?.[campo];
+            const valor = (formatted ?? raw ?? '').toString().toLowerCase();
+            return valor.includes(term);
+        });
+    }
+    validaVisibilidad(value) {
+        return validarBoolean(value);
+    }
+    isCheckboxDisabled(row) {
+        return this.rowDisabledFn?.()?.(row) ?? false;
+    }
+    allCheck(event) {
+        const input = event.target;
+        if (input.checked) {
+            const total = this.rowFilter()
+                .filter(r => !this.isCheckboxDisabled(r))
+                .map(r => ({ id: r.idListTsi, data: r }));
+            this.selectItems.set(total);
+        }
+        else {
+            this.selectItems.set([]);
+        }
+    }
+    validaAllCheck() {
+        const selectable = this.rowFilter().filter(r => !this.isCheckboxDisabled(r));
+        const selectedIds = new Set(this.selectItems().map(s => s.id));
+        return selectable.length > 0 && selectable.every(row => selectedIds.has(row.idListTsi));
+    }
+    isItemSelected(id) {
+        return this.selectItems().some(item => item.id == id);
+    }
+    toogleItem(idList, event) {
+        const row = this.rowFormat().find(r => r.idListTsi == idList);
+        if (!row || this.isCheckboxDisabled(row)) {
+            return;
+        }
+        const input = event.target;
+        if (input.checked) {
+            const item = { id: idList, data: row };
+            this.selectItems.update(sel => [...sel, item]);
+            return;
+        }
+        this.selectItems.update(sel => sel.filter(s => s.id != idList));
+    }
+    resolveCell(col, row) {
+        const value = row[col];
+        const r = this.rendered().find(r => r.matches(col, value, row));
+        return r ? r.render(value, row) : null;
+    }
+    getTotals(fieldname) {
+        const itemsSelected = this.withCheckbox() ? this.selectItems().map(item => JSON.parse(item?.toString())) : this.rowFormat();
+        const final = itemsSelected.reduce((acc, row) => {
+            const val = row[fieldname];
+            return acc + (typeof val == 'number' ? val : 0);
+        }, 0);
+        return formatNumber(this.decimalPipe, final);
+    }
+    getColspanBeforeTotals() {
+        const firstTotalizableIndex = this.columns().findIndex(c => c.totalizable);
+        const result = firstTotalizableIndex >= 0 ? firstTotalizableIndex : this.columns.length;
+        return this.withCheckbox() ? result + 1 : result;
+    }
+    getRowClass(row) {
+        return {
+            'text-error': row.situac == 'J',
+            'text-alerta': row.situac == 'L'
+        };
+    }
+    getPosition(col) {
+        if (col.position)
+            return `text-${col.position}`;
+        if (['decimal', 'number'].includes(col.tipo))
+            return `text-end`;
+        if (['fecha', 'date'].includes(col.tipo))
+            return `text-center`;
+        return 'text-start';
+    }
+    loadMore() {
+        this.isLoading.set(true);
+        setTimeout(() => {
+            const current = this.dataVirtual();
+            const next = this.rowFilter().slice(this.loadedCount, this.loadedCount + this.batchSize());
+            const merged = [...current];
+            for (const item of next) {
+                if (!merged.some(x => x.idListTsi === item.idListTsi)) {
+                    merged.push(item);
+                }
+            }
+            this.dataVirtual.set(merged);
+            this.loadedCount += next.length;
+            this.isLoading.set(false);
+        }, 100);
+    }
+    onClick(row) {
+        this.rowEvent.emit({ usecase: 1, data: row });
+    }
+    onDoubleClick(row) {
+        this.rowEvent.emit({ usecase: 2, data: row });
+    }
+    onRightClick(event, row) {
+        event.preventDefault();
+        this.rowEvent.emit({ usecase: 3, data: row });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAgrupadaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAgrupadaComponent, isStandalone: true, selector: "lib-table-agrupada", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n    <app-dropdown-cdk>\r\n        <ng-template #trigger>\r\n            <button class=\"btn btn-dark boton-buscar fs-7\">\r\n                <i class=\"fas fa-cog\"></i>\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #content>\r\n            <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n                <div class=\"popover-title fs-7 bg-white\">\r\n                    Filtros\r\n                </div>\r\n\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n                        (change)=\"toggleFiltros($event)\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n                        Todos\r\n                    </label>\r\n                </div>\r\n\r\n                @for (col of columns(); track col.caption) {\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                        id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n                        {{ col.caption }}\r\n                    </label>\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n    </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n\r\n                @if (hasColumnGroups()) {\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n                        </th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th rowspan=\"2\" class=\"cw-40 b-table\">\r\n                        </th>\r\n                        }\r\n\r\n                        @for (seg of headerSegments(); track $index) {\r\n\r\n                        @if (seg.type === 'column') {\r\n                        <th class=\"b-table\" rowspan=\"2\"\r\n                            [style.width]=\"seg.column?.width ? seg.column.width + 'px' : 'auto'\">\r\n                            {{ seg.column?.caption }}\r\n                        </th>\r\n                        }\r\n\r\n                        @if (seg.type === 'group') {\r\n                        <th class=\"b-table text-center fw-bold\" [attr.colspan]=\"seg.group?.colspan\">\r\n                            {{ seg.group?.label }}\r\n                        </th>\r\n                        }\r\n\r\n                        }\r\n                    </tr>\r\n\r\n                    <tr class=\"shadow-sm\">\r\n                        @for (column of groupedColumns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n\r\n                } @else {\r\n\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{ 'switch_' + col.caption }}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n                                            <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n                                                for=\"{{ 'switch_' + col.caption }}\">\r\n                                                {{ col.caption }}\r\n                                            </label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n\r\n                }\r\n\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [""], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], animations: [fadeInOut, dropdownAnimation] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAgrupadaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-table-agrupada', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective], animations: [fadeInOut, dropdownAnimation], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n    <app-dropdown-cdk>\r\n        <ng-template #trigger>\r\n            <button class=\"btn btn-dark boton-buscar fs-7\">\r\n                <i class=\"fas fa-cog\"></i>\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #content>\r\n            <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n                <div class=\"popover-title fs-7 bg-white\">\r\n                    Filtros\r\n                </div>\r\n\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n                        (change)=\"toggleFiltros($event)\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n                        Todos\r\n                    </label>\r\n                </div>\r\n\r\n                @for (col of columns(); track col.caption) {\r\n                <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                    <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                        id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n                        {{ col.caption }}\r\n                    </label>\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n    </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n\r\n                @if (hasColumnGroups()) {\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n                        </th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th rowspan=\"2\" class=\"cw-40 b-table\">\r\n                        </th>\r\n                        }\r\n\r\n                        @for (seg of headerSegments(); track $index) {\r\n\r\n                        @if (seg.type === 'column') {\r\n                        <th class=\"b-table\" rowspan=\"2\"\r\n                            [style.width]=\"seg.column?.width ? seg.column.width + 'px' : 'auto'\">\r\n                            {{ seg.column?.caption }}\r\n                        </th>\r\n                        }\r\n\r\n                        @if (seg.type === 'group') {\r\n                        <th class=\"b-table text-center fw-bold\" [attr.colspan]=\"seg.group?.colspan\">\r\n                            {{ seg.group?.label }}\r\n                        </th>\r\n                        }\r\n\r\n                        }\r\n                    </tr>\r\n\r\n                    <tr class=\"shadow-sm\">\r\n                        @for (column of groupedColumns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n\r\n                } @else {\r\n\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{ 'switch_' + col.caption }}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n                                            <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n                                                for=\"{{ 'switch_' + col.caption }}\">\r\n                                                {{ col.caption }}\r\n                                            </label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n\r\n                }\r\n\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->" }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -4136,6 +4564,7 @@ class TableData {
     promedioPonderado;
     cantidadPonderado;
     swmobile;
+    group;
 }
 
 class Recursos {
@@ -4472,6 +4901,21 @@ function getInputsObligatorios(data) {
     }));
 }
 
+function validaPeriodoSimple(periodo) {
+    if (!periodo)
+        return false;
+    if (periodo > 9999 || periodo < 999)
+        return false;
+    return true;
+}
+function validaMes(mes) {
+    if (!validarVacioAndNull(mes))
+        return false;
+    if (mes > 12 || mes < 0)
+        return false;
+    return true;
+}
+
 function handleErrorsApi(err, alert) {
     const safeError = typeof err === 'string' ? err :
         typeof err?.error === 'string' ? err.error :
@@ -4556,6 +5000,11 @@ function handleModal(modalRef, onSuccess, onDismiss) {
         onSuccess(result);
     }, () => onDismiss?.());
 }
+function handleModalReturn(modalRef) {
+    return modalRef.result
+        .then((result) => result ?? null)
+        .catch(() => null);
+}
 
 var TABLE_EVENTS;
 (function (TABLE_EVENTS) {
@@ -4573,5 +5022,5 @@ var TABLE_EVENTS;
  * Generated bundle index. Do not edit.
  */
 
-export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertErrorComponent, AlertErrorService, AlertService, AlertaComponent, Almacenes, AnimatedCheckboxDirective, AtajosDirective, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CaracteresCodigoDirective, CardMobileComponent, CheckBoxComponent, Cobradores, DecimalDirective, DetalleCreditoComponent, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownMenuComponent, DropdownOption, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, OnlyNumberDirective, OnlyNumberFlexDirective, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchActivoComponent, SwitchComponent, TABLE_EVENTS, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TableUltimateComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, Vendedor, configModal, getInputsObligatorios, handleEmptyResult, handleErrorsApi, handleModal, handleReset, handleResetNoSignal, handleResource, handleResourceV2, handleSuccessApi, handleSuccessResult, showError, throwIfEmptyArray, validaFecha, validaLista, validaPeriodo, validaPosicion, validaTipo, validarObligatorio, validarSituacion };
+export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertErrorComponent, AlertErrorService, AlertService, AlertaComponent, Almacenes, AnimatedCheckboxDirective, AtajosDirective, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CaracteresCodigoDirective, CardMobileComponent, CheckBoxComponent, Cobradores, DecimalDirective, DetalleCreditoComponent, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownMenuComponent, DropdownOption, FilterToggleComponent, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, OnlyNumberDirective, OnlyNumberFlexDirective, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchActivoComponent, SwitchComponent, TABLE_EVENTS, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableAgrupadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TableUltimateComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, Vendedor, configModal, getInputsObligatorios, handleEmptyResult, handleErrorsApi, handleModal, handleModalReturn, handleReset, handleResetNoSignal, handleResource, handleResourceV2, handleSuccessApi, handleSuccessResult, showError, throwIfEmptyArray, validaFecha, validaLista, validaMes, validaPeriodo, validaPeriodoSimple, validaPosicion, validaTipo, validarObligatorio, validarSituacion };
 //# sourceMappingURL=ng-components-tsi.mjs.map