ng-components-tsi 0.0.51 → 0.0.53

package/fesm2022/ng-components-tsi.mjs

@@ -138,6 +138,9 @@ class ButtonComponent {
     fileSelected = output();
     isRounded = input(false);
     isNotStyle = input(false);
+    isFullWidth = input(false);
+    paddingX = input('px-3');
+    paddingY = input('');
     hasFocus = signal(false);
     onFocus() {
         this.hasFocus.set(true);
@@ -212,12 +215,38 @@ class ButtonComponent {
     construirAlt = () => {
         return this.atajo() ? `${this.texto()}: Ctrl + ${this.atajo()}` : "";
     };
+    getClasses() {
+        return [
+            this.getBaseClasses(),
+            this.getVariantClasses(),
+            this.getStateClasses(),
+            this.getWidthClass()
+        ];
+    }
+    getBaseClasses() {
+        if (this.isNotStyle())
+            return 'btn btn-sm';
+        if (this.isRounded())
+            return 'circle button-tilt-hover';
+        return `btn btn-rounded button-tilt-hover text-white me-1 fs-8 ${this.paddingX()} ${this.paddingY()}`;
+    }
+    getVariantClasses() {
+        return this.outline()
+            ? this.getColorClassOutline()
+            : this.getColorClass();
+    }
+    getStateClasses() {
+        return this.hasFocus() ? 'aura-focus' : '';
+    }
+    getWidthClass() {
+        return this.isFullWidth() ? 'w-100' : 'w-auto w-sm-100';
+    }
     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    (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n    [style.--focus-color-rgb]=\"getFocusColor()\"\r\n    [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\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() + (hasFocus() ? ' aura-focus' : '') \" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    @if (icon() == 'sunat') {\r\n        <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n    }@else {\r\n        <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    }\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,aura-pulse 1.5s ease-out infinite}.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}@keyframes aura-pulse{0%{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, .5))}50%{box-shadow:0 0 0 6px rgba(var(--focus-color-rgb, 0, 123, 255),.2)}to{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, 0))}}.aura-focus{animation:aura-pulse 1.5s ease-out infinite;outline:none!important}\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 }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", 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    (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n    [style.--focus-color-rgb]=\"getFocusColor()\"\r\n    [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\r\n    [ngClass]=\"getClasses()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    @if (icon() == 'sunat') {\r\n        <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n    }@else {\r\n        <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    }\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,aura-pulse 1.5s ease-out infinite}.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}@keyframes aura-pulse{0%{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, .5))}50%{box-shadow:0 0 0 6px rgba(var(--focus-color-rgb, 0, 123, 255),.2)}to{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, 0))}}.aura-focus{animation:aura-pulse 1.5s ease-out infinite;outline:none!important}\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    (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n    [style.--focus-color-rgb]=\"getFocusColor()\"\r\n    [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\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() + (hasFocus() ? ' aura-focus' : '') \" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    @if (icon() == 'sunat') {\r\n        <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n    }@else {\r\n        <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    }\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,aura-pulse 1.5s ease-out infinite}.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}@keyframes aura-pulse{0%{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, .5))}50%{box-shadow:0 0 0 6px rgba(var(--focus-color-rgb, 0, 123, 255),.2)}to{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, 0))}}.aura-focus{animation:aura-pulse 1.5s ease-out infinite;outline:none!important}\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    (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n    [style.--focus-color-rgb]=\"getFocusColor()\"\r\n    [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\r\n    [ngClass]=\"getClasses()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    @if (icon() == 'sunat') {\r\n        <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n    }@else {\r\n        <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    }\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,aura-pulse 1.5s ease-out infinite}.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}@keyframes aura-pulse{0%{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, .5))}50%{box-shadow:0 0 0 6px rgba(var(--focus-color-rgb, 0, 123, 255),.2)}to{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, 0))}}.aura-focus{animation:aura-pulse 1.5s ease-out infinite;outline:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -265,8 +294,12 @@ class ToastService {
     warning(title, message) {
         return this.show(title, message, 'warning');
     }
-    webpush(title, message, subtitle) {
-        return this.show(title, message, 'webpush', subtitle);
+    webpush(title, message, subtitle, icon = 'fas fa-bell') {
+        const id = Date.now() * 1000 + Math.floor(Math.random() * 1000);
+        const toast = { id, title, message, type: 'webpush', subtitle, icon };
+        this.toasts.update(prev => [...prev, toast]);
+        setTimeout(() => this.remove(id), 10000);
+        return id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToastService, providedIn: 'root' });
@@ -282,6 +315,7 @@ class AlertConfirmationComponent {
     activeModal = inject(NgbActiveModal);
     toast = inject(ToastService);
     showTextarea = signal(true);
+    title = signal('Confirmar acción');
     texto = signal('');
     textoFormateado = computed(() => {
         const texto = this.texto();
@@ -371,11 +405,11 @@ class AlertConfirmationComponent {
         this.activeModal.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertConfirmationComponent, isStandalone: true, selector: "app-alert-confirmation", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOptionChange" }, ngImport: i0, template: "<div class=\"p-4\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n    @if(select()){\r\n    <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n        @if (showLabel()) {\r\n            <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n        }\r\n        <select class=\"form-select text-center\" [(ngModel)]=\"selectedOption\">\r\n            @for(opt of opcionesFormateadas(); track $index){\r\n                <option [value]=\"opt.codigo\">\r\n                    {{ opt.descri }}\r\n                </option>\r\n            }\r\n        </select>\r\n    </div>\r\n    }\r\n\r\n    @if(showTextarea() && mostrarTextareaComputed()){\r\n    <textarea class=\"form-control mt-3 fs-6 ch-100\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\r\n        (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\r\n    </textarea>\r\n    <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\r\n        Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\r\n    </div>\r\n    }\r\n\r\n    <div class=\"d-flex justify-content-center gap-2 mt-3\">\r\n        @if(mostrarConfirmar()){\r\n        <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" />\r\n        }\r\n        @if(mostrarExtra()){\r\n        <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarCancelar()){\r\n        <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" />\r\n        }\r\n    </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertConfirmationComponent, isStandalone: true, selector: "app-alert-confirmation", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOptionChange" }, ngImport: i0, template: "<div class=\"alert-confirm-container\">\n\n  <div class=\"icon-wrapper\">\n    <div class=\"icon-circle\">\n      <i class=\"fas fa-exclamation-triangle\"></i>\n    </div>\n    <div class=\"icon-badge\">\n      <i class=\"fas fa-exclamation text-warning\"></i>\n    </div>\n  </div>\n\n  <h2 class=\"error-title\">{{ title() }}</h2>\n  <div class=\"confirm-message\" [innerHTML]=\"textoFormateado()\"></div>\n\n  @if(select()){\n    <div class=\"select-wrapper\">\n      @if (showLabel()) {\n        <label class=\"select-label\">Motivo:</label>\n      }\n      <select class=\"form-select\" [(ngModel)]=\"selectedOption\">\n        @for(opt of opcionesFormateadas(); track $index){\n          <option [value]=\"opt.codigo\">{{ opt.descri }}</option>\n        }\n      </select>\n    </div>\n  }\n\n  @if(showTextarea() && mostrarTextareaComputed()){\n    <div class=\"textarea-wrapper\">\n      <textarea class=\"form-control\" placeholder=\"Ingresar motivo...\"\n        [(ngModel)]=\"textareaValueModel\"\n        (ngModelChange)=\"onTextareaChange($event)\"\n        [maxlength]=\"maxLength()\">\n      </textarea>\n      <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\n        Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\n      </div>\n    </div>\n  }\n\n  <div class=\"actions\">\n    @if(mostrarConfirmar()){\n      <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" />\n    }\n    @if(mostrarExtra()){\n      <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\"  />\n    }\n    @if(mostrarCancelar()){\n      <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" />\n    }\n  </div>\n\n  <div class=\"fw-bold fs-6 mt-4 d-inline-flex px-3 py-1 rounded d-flex align-items-center gap-2\" style=\"background: rgba(128, 128, 128, 0.185);\">\n    <i class=\"fa-solid fa-shield-halved\"></i>\n    Por favor, selecciona cuidadosamente. Esta acci\u00F3n es irreversible.</div>\n\n</div>\n", styles: [".alert-confirm-container{border-radius:16px;padding:40px 30px 32px;text-align:center;margin:0 auto}@keyframes confirmEntrance{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes confirmPulse{0%,to{box-shadow:0 8px 24px #b4780059}50%{box-shadow:0 8px 32px #b47800a6,0 0 0 10px #b4780012}}@keyframes badgeBounce{0%{transform:scale(0);opacity:0}70%{transform:scale(1.25);opacity:1}to{transform:scale(1)}}.icon-wrapper{position:relative;display:inline-block;margin-bottom:24px}.icon-circle{width:80px;height:80px;background:linear-gradient(135deg,#fbbf24,#d97706);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #b4780059;animation:confirmEntrance .5s cubic-bezier(.36,.07,.19,.97) both,confirmPulse 2.4s ease-in-out .5s infinite}.icon-circle i{color:#fff;font-size:34px;font-weight:900}.icon-badge{position:absolute;top:-4px;right:-6px;width:26px;height:26px;background-color:var(--background-card);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0000001f;animation:badgeBounce .4s cubic-bezier(.36,.07,.19,.97) .4s both}.icon-badge i{font-size:11px;font-weight:900}.confirm-message{font-size:.95rem;color:#6b7280;line-height:1.6;margin-bottom:24px}.select-wrapper{display:flex;align-items:center;gap:8px;margin-bottom:16px;text-align:left}.select-wrapper .select-label{font-size:.875rem;font-weight:600;color:#374151;white-space:nowrap;margin-bottom:0}.textarea-wrapper{margin-bottom:16px;text-align:left}.textarea-wrapper .form-control{min-height:100px;resize:vertical}.character-counter{font-size:.75rem;color:#9ca3af;text-align:right;margin-top:4px}.color-caracter{color:#d97706!important}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.actions app-button{min-width:110px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "isFullWidth", "paddingX", "paddingY"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-alert-confirmation', imports: [CommonModule, FormsModule, ButtonComponent], template: "<div class=\"p-4\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n    @if(select()){\r\n    <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n        @if (showLabel()) {\r\n            <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n        }\r\n        <select class=\"form-select text-center\" [(ngModel)]=\"selectedOption\">\r\n            @for(opt of opcionesFormateadas(); track $index){\r\n                <option [value]=\"opt.codigo\">\r\n                    {{ opt.descri }}\r\n                </option>\r\n            }\r\n        </select>\r\n    </div>\r\n    }\r\n\r\n    @if(showTextarea() && mostrarTextareaComputed()){\r\n    <textarea class=\"form-control mt-3 fs-6 ch-100\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\r\n        (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\r\n    </textarea>\r\n    <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\r\n        Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\r\n    </div>\r\n    }\r\n\r\n    <div class=\"d-flex justify-content-center gap-2 mt-3\">\r\n        @if(mostrarConfirmar()){\r\n        <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" />\r\n        }\r\n        @if(mostrarExtra()){\r\n        <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarCancelar()){\r\n        <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" />\r\n        }\r\n    </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"] }]
+            args: [{ selector: 'app-alert-confirmation', imports: [CommonModule, FormsModule, ButtonComponent], template: "<div class=\"alert-confirm-container\">\n\n  <div class=\"icon-wrapper\">\n    <div class=\"icon-circle\">\n      <i class=\"fas fa-exclamation-triangle\"></i>\n    </div>\n    <div class=\"icon-badge\">\n      <i class=\"fas fa-exclamation text-warning\"></i>\n    </div>\n  </div>\n\n  <h2 class=\"error-title\">{{ title() }}</h2>\n  <div class=\"confirm-message\" [innerHTML]=\"textoFormateado()\"></div>\n\n  @if(select()){\n    <div class=\"select-wrapper\">\n      @if (showLabel()) {\n        <label class=\"select-label\">Motivo:</label>\n      }\n      <select class=\"form-select\" [(ngModel)]=\"selectedOption\">\n        @for(opt of opcionesFormateadas(); track $index){\n          <option [value]=\"opt.codigo\">{{ opt.descri }}</option>\n        }\n      </select>\n    </div>\n  }\n\n  @if(showTextarea() && mostrarTextareaComputed()){\n    <div class=\"textarea-wrapper\">\n      <textarea class=\"form-control\" placeholder=\"Ingresar motivo...\"\n        [(ngModel)]=\"textareaValueModel\"\n        (ngModelChange)=\"onTextareaChange($event)\"\n        [maxlength]=\"maxLength()\">\n      </textarea>\n      <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\n        Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\n      </div>\n    </div>\n  }\n\n  <div class=\"actions\">\n    @if(mostrarConfirmar()){\n      <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" />\n    }\n    @if(mostrarExtra()){\n      <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\"  />\n    }\n    @if(mostrarCancelar()){\n      <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" />\n    }\n  </div>\n\n  <div class=\"fw-bold fs-6 mt-4 d-inline-flex px-3 py-1 rounded d-flex align-items-center gap-2\" style=\"background: rgba(128, 128, 128, 0.185);\">\n    <i class=\"fa-solid fa-shield-halved\"></i>\n    Por favor, selecciona cuidadosamente. Esta acci\u00F3n es irreversible.</div>\n\n</div>\n", styles: [".alert-confirm-container{border-radius:16px;padding:40px 30px 32px;text-align:center;margin:0 auto}@keyframes confirmEntrance{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes confirmPulse{0%,to{box-shadow:0 8px 24px #b4780059}50%{box-shadow:0 8px 32px #b47800a6,0 0 0 10px #b4780012}}@keyframes badgeBounce{0%{transform:scale(0);opacity:0}70%{transform:scale(1.25);opacity:1}to{transform:scale(1)}}.icon-wrapper{position:relative;display:inline-block;margin-bottom:24px}.icon-circle{width:80px;height:80px;background:linear-gradient(135deg,#fbbf24,#d97706);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #b4780059;animation:confirmEntrance .5s cubic-bezier(.36,.07,.19,.97) both,confirmPulse 2.4s ease-in-out .5s infinite}.icon-circle i{color:#fff;font-size:34px;font-weight:900}.icon-badge{position:absolute;top:-4px;right:-6px;width:26px;height:26px;background-color:var(--background-card);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0000001f;animation:badgeBounce .4s cubic-bezier(.36,.07,.19,.97) .4s both}.icon-badge i{font-size:11px;font-weight:900}.confirm-message{font-size:.95rem;color:#6b7280;line-height:1.6;margin-bottom:24px}.select-wrapper{display:flex;align-items:center;gap:8px;margin-bottom:16px;text-align:left}.select-wrapper .select-label{font-size:.875rem;font-weight:600;color:#374151;white-space:nowrap;margin-bottom:0}.textarea-wrapper{margin-bottom:16px;text-align:left}.textarea-wrapper .form-control{min-height:100px;resize:vertical}.character-counter{font-size:.75rem;color:#9ca3af;text-align:right;margin-top:4px}.color-caracter{color:#d97706!important}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.actions app-button{min-width:110px}\n"] }]
         }], ctorParameters: () => [] });
 
 var alertConfirmation_component = /*#__PURE__*/Object.freeze({
@@ -406,17 +440,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class AlertErrorComponent {
     activeModal = inject(NgbActiveModal);
+    titulo = signal('Algo salió mal');
     mensaje = signal('');
+    codigoEstado = signal('');
+    idTraza = signal('');
+    timestamp = signal('');
     mensajeFormateado = computed(() => this.mensaje().replace(/\n/g, '<br>'));
     onAceptar() {
         this.activeModal.close(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AlertErrorComponent, isStandalone: true, selector: "app-alert-error", ngImport: i0, template: "<div class=\"pt-4 text-center modal-error\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-times-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-7 text-white fw-6\" [innerHTML]=\"mensajeFormateado()\"></div>\r\n\r\n    <div class=\"d-flex justify-content-center mt-4 button-error\">\r\n        <app-button texto=\"Aceptar\" color=\"rojo_alerta\" (accion)=\"onAceptar()\" [autoFocus]=\"true\" />\r\n    </div>\r\n</div>", styles: [".modal-error{background-color:#a6222f;border-radius:6px}.button-error{background-color:#fff;border-bottom-left-radius:6px;border-bottom-right-radius:6px;padding:10px}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertErrorComponent, isStandalone: true, selector: "app-alert-error", ngImport: i0, template: "<div class=\"alert-error-container\">\n\n  <div class=\"icon-wrapper\">\n    <div class=\"icon-circle\">\n      <i class=\"fas fa-exclamation\"></i>\n    </div>\n    <div class=\"icon-badge\">\n      <i class=\"fas fa-exclamation-triangle\"></i>\n    </div>\n  </div>\n\n  <h2 class=\"error-title text-dark\">{{ titulo() }}</h2>\n\n  <p class=\"error-message\" [innerHTML]=\"mensajeFormateado()\"></p>\n\n  <div class=\"actions\">\n    <app-button texto=\"Aceptar\" color=\"rojo_alerta\" [isFullWidth]=\"true\" (accion)=\"onAceptar()\" [autoFocus]=\"true\" paddingY=\"py-2\" />\n  </div>\n\n  @if (codigoEstado() || idTraza() || timestamp()) {\n    <div class=\"technical-details\">\n      <div class=\"tech-header\">\n        <i class=\"fas fa-terminal\"></i>\n        <span>DETALLES T\u00C9CNICOS</span>\n      </div>\n      @if (codigoEstado()) {\n        <div class=\"tech-row\">\n          <span class=\"tech-label\">C\u00D3DIGO_ESTADO:</span>\n          <span class=\"tech-value error-code\">{{ codigoEstado() }}</span>\n        </div>\n      }\n      @if (idTraza()) {\n        <div class=\"tech-row\">\n          <span class=\"tech-label\">ID_TRAZA:</span>\n          <span class=\"tech-value\">{{ idTraza() }}</span>\n        </div>\n      }\n      @if (timestamp()) {\n        <div class=\"tech-row\">\n          <span class=\"tech-label\">TIMESTAMP:</span>\n          <span class=\"tech-value\">{{ timestamp() }}</span>\n        </div>\n      }\n    </div>\n  }\n\n</div>\n", styles: [".alert-error-container{border-radius:16px;padding:40px 30px 32px;text-align:center;margin:0 auto}@keyframes errorEntrance{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes errorPulse{0%,to{box-shadow:0 8px 24px #c81e1e66}50%{box-shadow:0 8px 32px #c81e1ebf,0 0 0 10px #c81e1e14}}@keyframes badgeBounce{0%{transform:scale(0);opacity:0}70%{transform:scale(1.25);opacity:1}to{transform:scale(1)}}.icon-wrapper{position:relative;display:inline-block;margin-bottom:24px}.icon-circle{width:80px;height:80px;background:linear-gradient(135deg,#f05252,#c81e1e);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #c81e1e66;animation:errorEntrance .5s cubic-bezier(.36,.07,.19,.97) both,errorPulse 2.4s ease-in-out .5s infinite}.icon-circle i{color:#fff;font-size:36px;font-weight:900}.icon-badge{position:absolute;top:-4px;right:-6px;width:26px;height:26px;background-color:var(--background-card);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0000001f;animation:badgeBounce .4s cubic-bezier(.36,.07,.19,.97) .4s both}.icon-badge i{color:#be0000;font-size:12px}.error-title{font-size:1.5rem;font-weight:700;margin-bottom:12px}.error-message{font-size:.95rem;color:#6b7280;line-height:1.6;margin-bottom:28px}.actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:28px}.actions app-button{width:100%}.btn-cerrar{background:none;border:none;padding:6px 16px;font-size:.95rem;color:#374151;cursor:pointer;font-weight:500}.btn-cerrar:hover{color:#1a1a2e;text-decoration:underline}.technical-details{background-color:var(--background-color);border:var(--border-table-header);border-radius:10px;padding:16px 20px;text-align:left}.tech-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.tech-header i{color:#8a8a8a;font-size:12px}.tech-header span{font-size:.7rem;font-weight:700;color:#64748b;letter-spacing:.08em;text-transform:uppercase}.tech-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}.tech-row .tech-label{font-size:.72rem;color:#929292;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.tech-row .tech-value{font-size:.78rem;color:#475569;font-family:monospace}.tech-row .tech-value.error-code{color:#e0352b;font-weight:700;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "isFullWidth", "paddingX", "paddingY"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-alert-error', imports: [CommonModule, ButtonComponent], template: "<div class=\"pt-4 text-center modal-error\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-times-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-7 text-white fw-6\" [innerHTML]=\"mensajeFormateado()\"></div>\r\n\r\n    <div class=\"d-flex justify-content-center mt-4 button-error\">\r\n        <app-button texto=\"Aceptar\" color=\"rojo_alerta\" (accion)=\"onAceptar()\" [autoFocus]=\"true\" />\r\n    </div>\r\n</div>", styles: [".modal-error{background-color:#a6222f;border-radius:6px}.button-error{background-color:#fff;border-bottom-left-radius:6px;border-bottom-right-radius:6px;padding:10px}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#fff}\n"] }]
+            args: [{ selector: 'app-alert-error', imports: [CommonModule, ButtonComponent], template: "<div class=\"alert-error-container\">\n\n  <div class=\"icon-wrapper\">\n    <div class=\"icon-circle\">\n      <i class=\"fas fa-exclamation\"></i>\n    </div>\n    <div class=\"icon-badge\">\n      <i class=\"fas fa-exclamation-triangle\"></i>\n    </div>\n  </div>\n\n  <h2 class=\"error-title text-dark\">{{ titulo() }}</h2>\n\n  <p class=\"error-message\" [innerHTML]=\"mensajeFormateado()\"></p>\n\n  <div class=\"actions\">\n    <app-button texto=\"Aceptar\" color=\"rojo_alerta\" [isFullWidth]=\"true\" (accion)=\"onAceptar()\" [autoFocus]=\"true\" paddingY=\"py-2\" />\n  </div>\n\n  @if (codigoEstado() || idTraza() || timestamp()) {\n    <div class=\"technical-details\">\n      <div class=\"tech-header\">\n        <i class=\"fas fa-terminal\"></i>\n        <span>DETALLES T\u00C9CNICOS</span>\n      </div>\n      @if (codigoEstado()) {\n        <div class=\"tech-row\">\n          <span class=\"tech-label\">C\u00D3DIGO_ESTADO:</span>\n          <span class=\"tech-value error-code\">{{ codigoEstado() }}</span>\n        </div>\n      }\n      @if (idTraza()) {\n        <div class=\"tech-row\">\n          <span class=\"tech-label\">ID_TRAZA:</span>\n          <span class=\"tech-value\">{{ idTraza() }}</span>\n        </div>\n      }\n      @if (timestamp()) {\n        <div class=\"tech-row\">\n          <span class=\"tech-label\">TIMESTAMP:</span>\n          <span class=\"tech-value\">{{ timestamp() }}</span>\n        </div>\n      }\n    </div>\n  }\n\n</div>\n", styles: [".alert-error-container{border-radius:16px;padding:40px 30px 32px;text-align:center;margin:0 auto}@keyframes errorEntrance{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes errorPulse{0%,to{box-shadow:0 8px 24px #c81e1e66}50%{box-shadow:0 8px 32px #c81e1ebf,0 0 0 10px #c81e1e14}}@keyframes badgeBounce{0%{transform:scale(0);opacity:0}70%{transform:scale(1.25);opacity:1}to{transform:scale(1)}}.icon-wrapper{position:relative;display:inline-block;margin-bottom:24px}.icon-circle{width:80px;height:80px;background:linear-gradient(135deg,#f05252,#c81e1e);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #c81e1e66;animation:errorEntrance .5s cubic-bezier(.36,.07,.19,.97) both,errorPulse 2.4s ease-in-out .5s infinite}.icon-circle i{color:#fff;font-size:36px;font-weight:900}.icon-badge{position:absolute;top:-4px;right:-6px;width:26px;height:26px;background-color:var(--background-card);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0000001f;animation:badgeBounce .4s cubic-bezier(.36,.07,.19,.97) .4s both}.icon-badge i{color:#be0000;font-size:12px}.error-title{font-size:1.5rem;font-weight:700;margin-bottom:12px}.error-message{font-size:.95rem;color:#6b7280;line-height:1.6;margin-bottom:28px}.actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:28px}.actions app-button{width:100%}.btn-cerrar{background:none;border:none;padding:6px 16px;font-size:.95rem;color:#374151;cursor:pointer;font-weight:500}.btn-cerrar:hover{color:#1a1a2e;text-decoration:underline}.technical-details{background-color:var(--background-color);border:var(--border-table-header);border-radius:10px;padding:16px 20px;text-align:left}.tech-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.tech-header i{color:#8a8a8a;font-size:12px}.tech-header span{font-size:.7rem;font-weight:700;color:#64748b;letter-spacing:.08em;text-transform:uppercase}.tech-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}.tech-row .tech-label{font-size:.72rem;color:#929292;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.tech-row .tech-value{font-size:.78rem;color:#475569;font-family:monospace}.tech-row .tech-value.error-code{color:#e0352b;font-weight:700;text-transform:uppercase}\n"] }]
         }] });
 
 class BadgeComponent {
@@ -462,31 +500,31 @@ class ToasterComponent {
         this.toastService.remove(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToasterComponent, isStandalone: true, selector: "app-toaster", ngImport: i0, template: "<div class=\"toastr-container\">\r\n    @for (toast of toastNormal; track toast.id) {\r\n\r\n    <div class=\"toast {{toast.type}}\" [ngClass]=\"{'bg-white': toast.type == 'loading'}\" [@toastAnimation]>\r\n\r\n        @if (toast.type == 'loading') {\r\n\r\n            <div class=\"toast-icon\">\r\n                @if (toast.progress < 100) {\r\n                    <div class=\"spinner\"></div>\r\n                }@else {\r\n                    <i class=\"fas fa-check checkmark\"></i>\r\n                }\r\n                \r\n            </div>\r\n            <div class=\"toast-content\">\r\n                <h4 class=\"toast-title text-dark\">{{ toast.title }}</h4>\r\n                <p class=\"toast-message text-dark\">{{ toast.message }}</p>\r\n            </div>\r\n            <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n        }@else {\r\n        <div class=\"toast-icon\">\r\n            <i class=\"{{iconType[toast.type]}}\"></i>\r\n        </div>\r\n        <div class=\"toast-content\">\r\n            <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n            <p class=\"toast-message\">{{ toast.message }}</p>\r\n        </div>\r\n        <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n        <div class=\"toast-loader\"></div>\r\n        }\r\n\r\n\r\n    </div>\r\n    }\r\n</div>\r\n\r\n<div class=\"toastr-webpush shadow\">\r\n    @for (toast of toastWebPush; track toast.id) {\r\n    <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\r\n        <div class=\"toast-icon\">\r\n            <img src=\"assets/images/logo-tsi-tres.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"toast-content-webpush\">\r\n            <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n            <p class=\"toast-message-webpush\">{{ toast.message }}</p>\r\n            <p class=\"toast-subtitle\">{{ toast.subtitle }}</p>\r\n        </div>\r\n        <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n        <div class=\"toast-loader-webpush\"></div>\r\n    </div>\r\n    }\r\n</div>", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:10px;right:10px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;cursor:pointer}.toast{display:flex;align-items:center;width:350px;min-height:35px;border-radius:4px;margin-bottom:10px;overflow:hidden;position:relative;font-family:Poppins,sans-serif}.toast-icon i{display:flex;align-items:center;justify-content:center;width:25px!important;height:25px!important;padding:12px;margin-left:10px;border-radius:100%;color:#fff;animation:iconPopIn 1.5s ease-in-out infinite;transform-origin:center}.toast-content{flex-grow:1;padding:12px 8px 1px}.toast-title{font-weight:600;margin-bottom:3px;font-size:13px}.toast-message{font-size:13px;padding:0 8px}.toast-close{position:absolute;top:5px;right:10px;background:none;border:none;font-weight:600;font-size:22px!important;cursor:pointer;padding:0;color:inherit;opacity:.7;transition:opacity .2s ease-in-out}.toast-close:hover{opacity:1}.success{background-color:#00c68e;color:#fff}.error{background-color:#bd362f;color:#fff}.info{background-color:#398bf7;color:#fff}.warning{background-color:#ffa908;color:#fff}.success .toast-loader{background-color:#00a879}.error .toast-loader{background-color:#ffe4e3}.info .toast-loader{background-color:#2796b4}.warning .toast-loader{background-color:#eeeeeee8}.toast-loader{position:absolute;bottom:0;left:0;height:4px;animation:loader 3s linear}@keyframes loader{0%{width:100%}to{width:0%}}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:4px;animation:loader 10s linear}.webpush .toast-loader-webpush{background-color:#c6c6c6}.webpush{background-color:#f8f8f8;color:#000}.toastr-webpush{position:fixed;bottom:10px!important;right:10px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;cursor:pointer}.toast-webpush{display:flex;align-items:center;width:350px;min-height:120px;border-radius:4px;margin-bottom:0;overflow:hidden;position:relative;font-family:Poppins,sans-serif}.toast-icon img{display:flex;align-items:center;justify-content:center;width:80px!important;height:80px!important;padding:12px;margin-left:10px;border-radius:100%}.toast-content-webpush{flex-grow:1;padding:5px 8px 1px}.toast-message-webpush{font-size:11px;color:gray;margin-bottom:8px;padding-bottom:0}.toast-subtitle{font-size:10px;color:#a0a0a0;padding:0;margin:0}.toast-close-webpush{position:absolute;top:5px;right:10px;background:none;border:none;font-weight:600;font-size:22px!important;cursor:pointer;padding:0;color:inherit;opacity:.3;transition:opacity .2s ease-in-out}.toast-close-webpush:hover{opacity:1}@media (max-width: 400px){.toast,.toast-webpush{width:100%}.toastr-container,.toastr-webpush{left:10px;right:25px}}@keyframes iconPopIn{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.spinner{width:24px;height:24px;border:3px solid #ccc;border-top:3px solid #333;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px;margin-left:10px;display:inline-block;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.checkmark{width:24px;height:24px;color:green!important;border-radius:100%;border:1px solid green;font-weight:700;margin-right:10px;margin-left:10px;display:inline-block;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToasterComponent, isStandalone: true, selector: "app-toaster", ngImport: i0, template: "<div class=\"toastr-container\">\n    @for (toast of toastNormal; track toast.id) {\n\n    <div class=\"toast {{toast.type}}\" [class.loading-done]=\"(toast.progress ?? 0) >= 100\" [@toastAnimation]>\n\n        @if (toast.type == 'loading') {\n\n            @if ((toast.progress ?? 0) < 100) {\n                <div class=\"toast-icon\">\n                    <div class=\"loading-orbit\">\n                        <div class=\"file-core\">\n                            <i class=\"fas fa-file-alt\"></i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"toast-content loading-content\">\n                    <h4 class=\"toast-title\">{{ toast.title }}</h4>\n                    <p class=\"toast-message\">{{ toast.message }}</p>\n                    <div class=\"loading-bar-wrap\">\n                        <div class=\"loading-bar-fill\"></div>\n                    </div>\n                </div>\n            } @else {\n                <div class=\"toast-icon\">\n                    <div class=\"complete-circle\">\n                        <i class=\"fas fa-check\"></i>\n                    </div>\n                </div>\n                <div class=\"toast-content\">\n                    <h4 class=\"toast-title\">{{ toast.title }}</h4>\n                    <p class=\"toast-message\">{{ toast.message }}</p>\n                </div>\n            }\n\n            <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n            </button>\n\n        } @else {\n\n            <div class=\"toast-icon\">\n                <i class=\"{{iconType[toast.type]}}\"></i>\n            </div>\n            <div class=\"toast-content\">\n                <h4 class=\"toast-title\">{{ toast.title }}</h4>\n                <p class=\"toast-message\">{{ toast.message }}</p>\n            </div>\n            <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n            </button>\n            <div class=\"toast-loader\"></div>\n\n        }\n\n    </div>\n    }\n</div>\n\n<div class=\"toastr-webpush\">\n    @for (toast of toastWebPush; track toast.id) {\n    <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\n\n        <div class=\"toast-icon\">\n            <div class=\"webpush-icon-wrap\">\n                <i class=\"{{ toast.icon ?? 'fas fa-bell' }}\"></i>\n                <span class=\"live-dot\"></span>\n            </div>\n        </div>\n\n        <div class=\"toast-content-webpush\">\n            <div class=\"webpush-header\">\n                <h4 class=\"toast-title\">{{ toast.title }}</h4>\n                <span class=\"webpush-badge\">\n                    <span class=\"badge-dot\"></span>EN VIVO\n                </span>\n            </div>\n            <p class=\"toast-message-webpush\">{{ toast.message }}</p>\n            @if (toast.subtitle) {\n                <p class=\"toast-subtitle\">\n                    <i class=\"fas fa-bolt\"></i>\n                    {{ toast.subtitle }}\n                </p>\n            }\n        </div>\n\n        <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n            </svg>\n        </button>\n        <div class=\"toast-loader-webpush\"></div>\n    </div>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast{pointer-events:all;display:flex;align-items:center;width:368px;min-height:68px;border-radius:16px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.toast.success{background:#10b981;border-color:#0d9367;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #10b98180,0 12px 24px -4px #10b98159}.toast.success:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #10b98199,0 20px 40px -8px #10b98173}.toast.error{background:#ef4444;border-color:#ec1e1e;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #ef444480,0 12px 24px -4px #ef444459}.toast.error:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #ef444499,0 20px 40px -8px #ef444473}.toast.info{background:#3b82f6;border-color:#1469f4;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #3b82f680,0 12px 24px -4px #3b82f659}.toast.info:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #3b82f699,0 20px 40px -8px #3b82f673}.toast.warning{background:#f59e0b;border-color:#cf8508;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #f59e0b80,0 12px 24px -4px #f59e0b59}.toast.warning:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #f59e0b99,0 20px 40px -8px #f59e0b73}.toast.loading{background:#fff;border-color:#00000014;box-shadow:0 4px 8px -2px #0000001f,0 12px 24px -4px #00000014}.toast.loading .toast-title{color:#000000d9}.toast.loading .toast-message{color:#00000080}.toast.loading .toast-close{background:#0000000f;border-color:#0000001a;color:#0006}.toast.loading .toast-close:hover{background:#0000001f;color:#000000bf}.toast.loading:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 8px 16px -4px #00000026,0 20px 40px -8px #0000001a}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:16px 0 0 16px;z-index:1}.success:before{background:#096546;box-shadow:0 0 10px #0c8a6099}.error:before{background:#c61111;box-shadow:0 0 10px #eb151599}.info:before{background:#0953cc;box-shadow:0 0 10px #0b63f399}.warning:before{background:#9e6506;box-shadow:0 0 10px #c57f0899}.toast-icon{padding:0 14px 0 22px;flex-shrink:0}.toast-icon i{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;font-size:14px!important;padding:0!important;margin:0!important;border-radius:10px;animation:iconPulse 2.5s ease-in-out infinite;transition:transform .2s ease}.bg-success,.bg-danger,.bg-info,.bg-warning{background:#ffffff38!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important}.toast-content{flex-grow:1;padding:14px 44px 14px 4px}.toast-title{font-weight:600;font-size:13px;margin-bottom:3px;color:#fff;letter-spacing:-.01em;line-height:1.3}.toast-message{font-size:11.5px;color:#fffc;padding:0;margin:0;line-height:1.55}.toast-close{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#ffffff2e;border:1px solid rgba(255,255,255,.3);border-radius:7px;font-size:15px;font-weight:400;line-height:1;cursor:pointer;color:#fffc;padding:0;transition:background .15s ease,color .15s ease,border-color .15s ease}.toast-close:hover{background:#ffffff4d;color:#fff;border-color:#ffffff73}.toast-loader{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 3s linear forwards}.success .toast-loader{background:linear-gradient(90deg,#10b981,#29ecac)}.error .toast-loader{background:linear-gradient(90deg,#ef4444,#f58a8a)}.info .toast-loader{background:linear-gradient(90deg,#3b82f6,#84b1f9)}.warning .toast-loader{background:linear-gradient(90deg,#f59e0b,#f8bb54)}.loading{min-height:82px}.loading:before{display:none}.loading:after{content:\"\";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.06),transparent);animation:shimmerScan 2.4s ease-in-out infinite;pointer-events:none;border-radius:16px}.loading-done:before{display:block!important;background:#10b981!important;box-shadow:0 0 14px #10b981bf!important}.loading-done:after{display:none}.loading-orbit{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.loading-orbit:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1s linear infinite}.loading-orbit:after{content:\"\";position:absolute;inset:7px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.6s linear infinite reverse}.file-core{width:24px;height:24px;background:#3b82f61f;border:1px solid rgba(59,130,246,.28);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#3b82f6;font-size:10px;z-index:1;animation:filePulse 2s ease-in-out infinite}.complete-circle{width:36px;height:36px;background:#10b98126;border:1px solid rgba(16,185,129,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#10b981;font-size:13px;box-shadow:0 0 18px #10b98159;animation:completePop .45s cubic-bezier(.34,1.56,.64,1) forwards;flex-shrink:0}.loading-content{padding-bottom:18px}.loading-bar-wrap{margin-top:9px;width:100%;height:3px;background:#ffffff12;border-radius:100px;overflow:hidden;position:relative}.loading-bar-fill{position:absolute;top:0;left:-40%;height:100%;width:40%;border-radius:100px;background:linear-gradient(90deg,transparent,#3b82f6 35%,#8b5cf6 65%,transparent);animation:indeterminateSlide 1.6s ease-in-out infinite}@property --border-angle{syntax: \"<angle>\"; initial-value: 0deg; inherits: false;}.toastr-webpush{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast-webpush{--border-angle: 0deg;pointer-events:all;display:flex;align-items:center;width:380px;min-height:100px;border-radius:20px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--border-angle),rgba(59,130,246,.85),rgba(139,92,246,.75),rgba(6,182,212,.7),rgba(16,185,129,.65),rgba(59,130,246,.85)) border-box;border:1.5px solid transparent;box-shadow:0 8px 20px -4px #0000001f,0 24px 48px -8px #00000014,0 0 50px -12px #3b82f626;cursor:pointer;animation:webpushBorderSpin 5s linear infinite;transition:transform .2s ease,box-shadow .2s ease}.toast-webpush:hover{transform:translateY(-3px) scale(1.006);box-shadow:0 12px 28px -4px #00000026,0 32px 60px -8px #0000001a,0 0 60px -10px #3b82f640}.webpush-icon-wrap{position:relative;flex-shrink:0;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}.webpush-icon-wrap:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1.2s linear infinite}.webpush-icon-wrap:after{content:\"\";position:absolute;inset:8px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.8s linear infinite reverse}.webpush-icon-wrap i{font-size:18px;color:#3b82f6;position:relative;z-index:1}.live-dot{position:absolute;bottom:2px;right:2px;width:11px;height:11px;background:#10b981;border-radius:50%;border:2px solid #ffffff;z-index:2}.live-dot:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(16,185,129,.5);animation:livePing 2s ease-out infinite}.live-dot:after{content:\"\";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(16,185,129,.2);animation:livePing 2s ease-out infinite .5s}.toast-content-webpush{flex-grow:1;padding:14px 44px 14px 14px}.webpush-header{display:flex;align-items:center;gap:7px;margin-bottom:5px}.toast-webpush .toast-title{font-weight:600;font-size:13px;color:#000000d9;letter-spacing:-.01em;line-height:1.3;margin:0}.webpush-badge{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;letter-spacing:.08em;color:#10b981;background:#10b9811a;border:1px solid rgba(16,185,129,.22);border-radius:5px;padding:2px 6px 2px 5px;flex-shrink:0;animation:badgePulse 2.5s ease-in-out infinite}.webpush-badge .badge-dot{width:5px;height:5px;background:#10b981;border-radius:50%;flex-shrink:0;animation:badgeDotBlink 1s ease-in-out infinite}.toast-message-webpush{font-size:11px;color:#00000080;margin:0 0 5px;padding:0;line-height:1.5}.toast-subtitle{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#3b82f6a6;margin:0;padding:0;letter-spacing:.01em}.toast-subtitle i{font-size:8px;color:#3b82f68c}.toast-close-webpush{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#0000000f;border:1px solid rgba(0,0,0,.1);border-radius:7px;cursor:pointer;color:#0006;padding:0;transition:background .15s ease,color .15s ease}.toast-close-webpush:hover{background:#0000001f;color:#000000bf}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 10s linear forwards;background:linear-gradient(90deg,#3b82f6b3,#8b5cf699,#06b6d480)}@keyframes loader{0%{width:100%}to{width:0%}}@keyframes iconPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes filePulse{0%,to{box-shadow:0 0 #3b82f600}50%{box-shadow:0 0 0 5px #3b82f61f}}@keyframes completePop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes indeterminateSlide{0%{left:-40%}to{left:110%}}@keyframes shimmerScan{0%{left:-60%}to{left:140%}}@keyframes webpushBorderSpin{to{--border-angle: 360deg}}@keyframes livePing{0%{transform:scale(1);opacity:.7}to{transform:scale(2.4);opacity:0}}@keyframes badgePulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes badgeDotBlink{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}@media (max-width: 420px){.toast,.toast-webpush{width:calc(100vw - 24px)}.toastr-container,.toastr-webpush{left:12px;right:12px}}\n"], animations: [
             trigger('toastAnimation', [
                 transition(':enter', [
-                    style({ transform: 'translateY(100%)', opacity: 0 }),
-                    animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
+                    style({ transform: 'translateX(110%)', opacity: 0, scale: 0.95 }),
+                    animate('400ms cubic-bezier(0.34, 1.56, 0.64, 1)', style({ transform: 'translateX(0)', opacity: 1, scale: 1 }))
                 ]),
                 transition(':leave', [
-                    animate('300ms ease-in', style({ transform: 'translateY(100%)', opacity: 0 }))
+                    animate('250ms cubic-bezier(0.4, 0, 1, 1)', style({ transform: 'translateX(110%)', opacity: 0, scale: 0.95 }))
                 ])
             ])
         ] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToasterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-toaster', imports: [NgClass], animations: [
+            args: [{ selector: 'app-toaster', imports: [], animations: [
                         trigger('toastAnimation', [
                             transition(':enter', [
-                                style({ transform: 'translateY(100%)', opacity: 0 }),
-                                animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
+                                style({ transform: 'translateX(110%)', opacity: 0, scale: 0.95 }),
+                                animate('400ms cubic-bezier(0.34, 1.56, 0.64, 1)', style({ transform: 'translateX(0)', opacity: 1, scale: 1 }))
                             ]),
                             transition(':leave', [
-                                animate('300ms ease-in', style({ transform: 'translateY(100%)', opacity: 0 }))
+                                animate('250ms cubic-bezier(0.4, 0, 1, 1)', style({ transform: 'translateX(110%)', opacity: 0, scale: 0.95 }))
                             ])
                         ])
-                    ], template: "<div class=\"toastr-container\">\r\n    @for (toast of toastNormal; track toast.id) {\r\n\r\n    <div class=\"toast {{toast.type}}\" [ngClass]=\"{'bg-white': toast.type == 'loading'}\" [@toastAnimation]>\r\n\r\n        @if (toast.type == 'loading') {\r\n\r\n            <div class=\"toast-icon\">\r\n                @if (toast.progress < 100) {\r\n                    <div class=\"spinner\"></div>\r\n                }@else {\r\n                    <i class=\"fas fa-check checkmark\"></i>\r\n                }\r\n                \r\n            </div>\r\n            <div class=\"toast-content\">\r\n                <h4 class=\"toast-title text-dark\">{{ toast.title }}</h4>\r\n                <p class=\"toast-message text-dark\">{{ toast.message }}</p>\r\n            </div>\r\n            <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n        }@else {\r\n        <div class=\"toast-icon\">\r\n            <i class=\"{{iconType[toast.type]}}\"></i>\r\n        </div>\r\n        <div class=\"toast-content\">\r\n            <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n            <p class=\"toast-message\">{{ toast.message }}</p>\r\n        </div>\r\n        <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n        <div class=\"toast-loader\"></div>\r\n        }\r\n\r\n\r\n    </div>\r\n    }\r\n</div>\r\n\r\n<div class=\"toastr-webpush shadow\">\r\n    @for (toast of toastWebPush; track toast.id) {\r\n    <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\r\n        <div class=\"toast-icon\">\r\n            <img src=\"assets/images/logo-tsi-tres.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"toast-content-webpush\">\r\n            <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n            <p class=\"toast-message-webpush\">{{ toast.message }}</p>\r\n            <p class=\"toast-subtitle\">{{ toast.subtitle }}</p>\r\n        </div>\r\n        <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n        <div class=\"toast-loader-webpush\"></div>\r\n    </div>\r\n    }\r\n</div>", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:10px;right:10px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;cursor:pointer}.toast{display:flex;align-items:center;width:350px;min-height:35px;border-radius:4px;margin-bottom:10px;overflow:hidden;position:relative;font-family:Poppins,sans-serif}.toast-icon i{display:flex;align-items:center;justify-content:center;width:25px!important;height:25px!important;padding:12px;margin-left:10px;border-radius:100%;color:#fff;animation:iconPopIn 1.5s ease-in-out infinite;transform-origin:center}.toast-content{flex-grow:1;padding:12px 8px 1px}.toast-title{font-weight:600;margin-bottom:3px;font-size:13px}.toast-message{font-size:13px;padding:0 8px}.toast-close{position:absolute;top:5px;right:10px;background:none;border:none;font-weight:600;font-size:22px!important;cursor:pointer;padding:0;color:inherit;opacity:.7;transition:opacity .2s ease-in-out}.toast-close:hover{opacity:1}.success{background-color:#00c68e;color:#fff}.error{background-color:#bd362f;color:#fff}.info{background-color:#398bf7;color:#fff}.warning{background-color:#ffa908;color:#fff}.success .toast-loader{background-color:#00a879}.error .toast-loader{background-color:#ffe4e3}.info .toast-loader{background-color:#2796b4}.warning .toast-loader{background-color:#eeeeeee8}.toast-loader{position:absolute;bottom:0;left:0;height:4px;animation:loader 3s linear}@keyframes loader{0%{width:100%}to{width:0%}}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:4px;animation:loader 10s linear}.webpush .toast-loader-webpush{background-color:#c6c6c6}.webpush{background-color:#f8f8f8;color:#000}.toastr-webpush{position:fixed;bottom:10px!important;right:10px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;cursor:pointer}.toast-webpush{display:flex;align-items:center;width:350px;min-height:120px;border-radius:4px;margin-bottom:0;overflow:hidden;position:relative;font-family:Poppins,sans-serif}.toast-icon img{display:flex;align-items:center;justify-content:center;width:80px!important;height:80px!important;padding:12px;margin-left:10px;border-radius:100%}.toast-content-webpush{flex-grow:1;padding:5px 8px 1px}.toast-message-webpush{font-size:11px;color:gray;margin-bottom:8px;padding-bottom:0}.toast-subtitle{font-size:10px;color:#a0a0a0;padding:0;margin:0}.toast-close-webpush{position:absolute;top:5px;right:10px;background:none;border:none;font-weight:600;font-size:22px!important;cursor:pointer;padding:0;color:inherit;opacity:.3;transition:opacity .2s ease-in-out}.toast-close-webpush:hover{opacity:1}@media (max-width: 400px){.toast,.toast-webpush{width:100%}.toastr-container,.toastr-webpush{left:10px;right:25px}}@keyframes iconPopIn{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.spinner{width:24px;height:24px;border:3px solid #ccc;border-top:3px solid #333;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px;margin-left:10px;display:inline-block;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.checkmark{width:24px;height:24px;color:green!important;border-radius:100%;border:1px solid green;font-weight:700;margin-right:10px;margin-left:10px;display:inline-block;vertical-align:middle}\n"] }]
+                    ], template: "<div class=\"toastr-container\">\n    @for (toast of toastNormal; track toast.id) {\n\n    <div class=\"toast {{toast.type}}\" [class.loading-done]=\"(toast.progress ?? 0) >= 100\" [@toastAnimation]>\n\n        @if (toast.type == 'loading') {\n\n            @if ((toast.progress ?? 0) < 100) {\n                <div class=\"toast-icon\">\n                    <div class=\"loading-orbit\">\n                        <div class=\"file-core\">\n                            <i class=\"fas fa-file-alt\"></i>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"toast-content loading-content\">\n                    <h4 class=\"toast-title\">{{ toast.title }}</h4>\n                    <p class=\"toast-message\">{{ toast.message }}</p>\n                    <div class=\"loading-bar-wrap\">\n                        <div class=\"loading-bar-fill\"></div>\n                    </div>\n                </div>\n            } @else {\n                <div class=\"toast-icon\">\n                    <div class=\"complete-circle\">\n                        <i class=\"fas fa-check\"></i>\n                    </div>\n                </div>\n                <div class=\"toast-content\">\n                    <h4 class=\"toast-title\">{{ toast.title }}</h4>\n                    <p class=\"toast-message\">{{ toast.message }}</p>\n                </div>\n            }\n\n            <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n            </button>\n\n        } @else {\n\n            <div class=\"toast-icon\">\n                <i class=\"{{iconType[toast.type]}}\"></i>\n            </div>\n            <div class=\"toast-content\">\n                <h4 class=\"toast-title\">{{ toast.title }}</h4>\n                <p class=\"toast-message\">{{ toast.message }}</p>\n            </div>\n            <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n            </button>\n            <div class=\"toast-loader\"></div>\n\n        }\n\n    </div>\n    }\n</div>\n\n<div class=\"toastr-webpush\">\n    @for (toast of toastWebPush; track toast.id) {\n    <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\n\n        <div class=\"toast-icon\">\n            <div class=\"webpush-icon-wrap\">\n                <i class=\"{{ toast.icon ?? 'fas fa-bell' }}\"></i>\n                <span class=\"live-dot\"></span>\n            </div>\n        </div>\n\n        <div class=\"toast-content-webpush\">\n            <div class=\"webpush-header\">\n                <h4 class=\"toast-title\">{{ toast.title }}</h4>\n                <span class=\"webpush-badge\">\n                    <span class=\"badge-dot\"></span>EN VIVO\n                </span>\n            </div>\n            <p class=\"toast-message-webpush\">{{ toast.message }}</p>\n            @if (toast.subtitle) {\n                <p class=\"toast-subtitle\">\n                    <i class=\"fas fa-bolt\"></i>\n                    {{ toast.subtitle }}\n                </p>\n            }\n        </div>\n\n        <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n            </svg>\n        </button>\n        <div class=\"toast-loader-webpush\"></div>\n    </div>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast{pointer-events:all;display:flex;align-items:center;width:368px;min-height:68px;border-radius:16px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.toast.success{background:#10b981;border-color:#0d9367;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #10b98180,0 12px 24px -4px #10b98159}.toast.success:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #10b98199,0 20px 40px -8px #10b98173}.toast.error{background:#ef4444;border-color:#ec1e1e;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #ef444480,0 12px 24px -4px #ef444459}.toast.error:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #ef444499,0 20px 40px -8px #ef444473}.toast.info{background:#3b82f6;border-color:#1469f4;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #3b82f680,0 12px 24px -4px #3b82f659}.toast.info:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #3b82f699,0 20px 40px -8px #3b82f673}.toast.warning{background:#f59e0b;border-color:#cf8508;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #f59e0b80,0 12px 24px -4px #f59e0b59}.toast.warning:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #f59e0b99,0 20px 40px -8px #f59e0b73}.toast.loading{background:#fff;border-color:#00000014;box-shadow:0 4px 8px -2px #0000001f,0 12px 24px -4px #00000014}.toast.loading .toast-title{color:#000000d9}.toast.loading .toast-message{color:#00000080}.toast.loading .toast-close{background:#0000000f;border-color:#0000001a;color:#0006}.toast.loading .toast-close:hover{background:#0000001f;color:#000000bf}.toast.loading:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 8px 16px -4px #00000026,0 20px 40px -8px #0000001a}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:16px 0 0 16px;z-index:1}.success:before{background:#096546;box-shadow:0 0 10px #0c8a6099}.error:before{background:#c61111;box-shadow:0 0 10px #eb151599}.info:before{background:#0953cc;box-shadow:0 0 10px #0b63f399}.warning:before{background:#9e6506;box-shadow:0 0 10px #c57f0899}.toast-icon{padding:0 14px 0 22px;flex-shrink:0}.toast-icon i{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;font-size:14px!important;padding:0!important;margin:0!important;border-radius:10px;animation:iconPulse 2.5s ease-in-out infinite;transition:transform .2s ease}.bg-success,.bg-danger,.bg-info,.bg-warning{background:#ffffff38!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important}.toast-content{flex-grow:1;padding:14px 44px 14px 4px}.toast-title{font-weight:600;font-size:13px;margin-bottom:3px;color:#fff;letter-spacing:-.01em;line-height:1.3}.toast-message{font-size:11.5px;color:#fffc;padding:0;margin:0;line-height:1.55}.toast-close{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#ffffff2e;border:1px solid rgba(255,255,255,.3);border-radius:7px;font-size:15px;font-weight:400;line-height:1;cursor:pointer;color:#fffc;padding:0;transition:background .15s ease,color .15s ease,border-color .15s ease}.toast-close:hover{background:#ffffff4d;color:#fff;border-color:#ffffff73}.toast-loader{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 3s linear forwards}.success .toast-loader{background:linear-gradient(90deg,#10b981,#29ecac)}.error .toast-loader{background:linear-gradient(90deg,#ef4444,#f58a8a)}.info .toast-loader{background:linear-gradient(90deg,#3b82f6,#84b1f9)}.warning .toast-loader{background:linear-gradient(90deg,#f59e0b,#f8bb54)}.loading{min-height:82px}.loading:before{display:none}.loading:after{content:\"\";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.06),transparent);animation:shimmerScan 2.4s ease-in-out infinite;pointer-events:none;border-radius:16px}.loading-done:before{display:block!important;background:#10b981!important;box-shadow:0 0 14px #10b981bf!important}.loading-done:after{display:none}.loading-orbit{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.loading-orbit:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1s linear infinite}.loading-orbit:after{content:\"\";position:absolute;inset:7px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.6s linear infinite reverse}.file-core{width:24px;height:24px;background:#3b82f61f;border:1px solid rgba(59,130,246,.28);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#3b82f6;font-size:10px;z-index:1;animation:filePulse 2s ease-in-out infinite}.complete-circle{width:36px;height:36px;background:#10b98126;border:1px solid rgba(16,185,129,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#10b981;font-size:13px;box-shadow:0 0 18px #10b98159;animation:completePop .45s cubic-bezier(.34,1.56,.64,1) forwards;flex-shrink:0}.loading-content{padding-bottom:18px}.loading-bar-wrap{margin-top:9px;width:100%;height:3px;background:#ffffff12;border-radius:100px;overflow:hidden;position:relative}.loading-bar-fill{position:absolute;top:0;left:-40%;height:100%;width:40%;border-radius:100px;background:linear-gradient(90deg,transparent,#3b82f6 35%,#8b5cf6 65%,transparent);animation:indeterminateSlide 1.6s ease-in-out infinite}@property --border-angle{syntax: \"<angle>\"; initial-value: 0deg; inherits: false;}.toastr-webpush{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast-webpush{--border-angle: 0deg;pointer-events:all;display:flex;align-items:center;width:380px;min-height:100px;border-radius:20px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--border-angle),rgba(59,130,246,.85),rgba(139,92,246,.75),rgba(6,182,212,.7),rgba(16,185,129,.65),rgba(59,130,246,.85)) border-box;border:1.5px solid transparent;box-shadow:0 8px 20px -4px #0000001f,0 24px 48px -8px #00000014,0 0 50px -12px #3b82f626;cursor:pointer;animation:webpushBorderSpin 5s linear infinite;transition:transform .2s ease,box-shadow .2s ease}.toast-webpush:hover{transform:translateY(-3px) scale(1.006);box-shadow:0 12px 28px -4px #00000026,0 32px 60px -8px #0000001a,0 0 60px -10px #3b82f640}.webpush-icon-wrap{position:relative;flex-shrink:0;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}.webpush-icon-wrap:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1.2s linear infinite}.webpush-icon-wrap:after{content:\"\";position:absolute;inset:8px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.8s linear infinite reverse}.webpush-icon-wrap i{font-size:18px;color:#3b82f6;position:relative;z-index:1}.live-dot{position:absolute;bottom:2px;right:2px;width:11px;height:11px;background:#10b981;border-radius:50%;border:2px solid #ffffff;z-index:2}.live-dot:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(16,185,129,.5);animation:livePing 2s ease-out infinite}.live-dot:after{content:\"\";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(16,185,129,.2);animation:livePing 2s ease-out infinite .5s}.toast-content-webpush{flex-grow:1;padding:14px 44px 14px 14px}.webpush-header{display:flex;align-items:center;gap:7px;margin-bottom:5px}.toast-webpush .toast-title{font-weight:600;font-size:13px;color:#000000d9;letter-spacing:-.01em;line-height:1.3;margin:0}.webpush-badge{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;letter-spacing:.08em;color:#10b981;background:#10b9811a;border:1px solid rgba(16,185,129,.22);border-radius:5px;padding:2px 6px 2px 5px;flex-shrink:0;animation:badgePulse 2.5s ease-in-out infinite}.webpush-badge .badge-dot{width:5px;height:5px;background:#10b981;border-radius:50%;flex-shrink:0;animation:badgeDotBlink 1s ease-in-out infinite}.toast-message-webpush{font-size:11px;color:#00000080;margin:0 0 5px;padding:0;line-height:1.5}.toast-subtitle{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#3b82f6a6;margin:0;padding:0;letter-spacing:.01em}.toast-subtitle i{font-size:8px;color:#3b82f68c}.toast-close-webpush{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#0000000f;border:1px solid rgba(0,0,0,.1);border-radius:7px;cursor:pointer;color:#0006;padding:0;transition:background .15s ease,color .15s ease}.toast-close-webpush:hover{background:#0000001f;color:#000000bf}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 10s linear forwards;background:linear-gradient(90deg,#3b82f6b3,#8b5cf699,#06b6d480)}@keyframes loader{0%{width:100%}to{width:0%}}@keyframes iconPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes filePulse{0%,to{box-shadow:0 0 #3b82f600}50%{box-shadow:0 0 0 5px #3b82f61f}}@keyframes completePop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes indeterminateSlide{0%{left:-40%}to{left:110%}}@keyframes shimmerScan{0%{left:-60%}to{left:140%}}@keyframes webpushBorderSpin{to{--border-angle: 360deg}}@keyframes livePing{0%{transform:scale(1);opacity:.7}to{transform:scale(2.4);opacity:0}}@keyframes badgePulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes badgeDotBlink{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}@media (max-width: 420px){.toast,.toast-webpush{width:calc(100vw - 24px)}.toastr-container,.toastr-webpush{left:12px;right:12px}}\n"] }]
         }] });
 
 class DropdownCdkComponent {
@@ -619,7 +657,7 @@ 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 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"] }] });
+    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", "isFullWidth", "paddingX", "paddingY"], 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,
@@ -2148,7 +2186,7 @@ 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 } }, 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    @if (buttonProps()?.icon == 'sunat') {\r\n        <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n    }@else {\r\n      <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i>\r\n    } {{ 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"] }] });
+    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    @if (buttonProps()?.icon == 'sunat') {\r\n        <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n    }@else {\r\n      <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i>\r\n    } {{ 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", "isFullWidth", "paddingX", "paddingY"], 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,
@@ -3361,7 +3399,7 @@ class TableDetalleComponent {
         return text?.replace(regex, '<mark>$1</mark>');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableDetalleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableDetalleComponent, isStandalone: true, selector: "app-table-detalle", inputs: { selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, busqueda: { classPropertyName: "busqueda", publicName: "busqueda", 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 }, lastItemDisabled: { classPropertyName: "lastItemDisabled", publicName: "lastItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withEditItem: { classPropertyName: "withEditItem", publicName: "withEditItem", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, deleteItems: { classPropertyName: "deleteItems", publicName: "deleteItems", 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 }, selectedRadio: { classPropertyName: "selectedRadio", publicName: "selectedRadio", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", busqueda: "busquedaChange", deleteItems: "deleteItemsChange", selectItems: "selectItemsChange", selectedRadio: "selectedRadioChange", editItem: "editItem" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: 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 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</div>\r\n}\r\n<div class=\"table-container table-responsive\"\r\n    [style.max-height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\"\r\n    [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\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 (withCheckbox()) {\r\n                <th scope=\"col\" class=\"text-center b-table w-min\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n                    <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n                        [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n                </th>\r\n                }\r\n\r\n                @if (withEditItem()) {\r\n                <th scope=\"col\" class=\"text-center b-table w-min\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n                </th>\r\n                }\r\n\r\n                @if (customActions) {\r\n                <th scope=\"col\" class=\"b-table w-min mwp-50\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\"></th>\r\n                }\r\n\r\n                @for (column of columns(); track $index) {\r\n                @if (column.visible) {\r\n                <th scope=\"col\" class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                    [style.width]=\"widthDefault(column) + 'px'\" [style.min-width]=\"widthDefault(column) + 'px'\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n                    {{ column.caption }}\r\n                </th>\r\n                }\r\n                }\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            @for (row of rowFilter(); track iRow; let iRow = $index) {\r\n            @let isLast = validaAccionDescri(iRow);\r\n            @let rowClass = getRowClass(row);\r\n            <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                [class]=\"rowClass\" (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n                [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n                @if (withCheckbox()) {\r\n                <td scope=\"col\" class=\"text-center b-table w-min\" [class]=\"rowClass\">\r\n                    @if(!resolveCell('checkbox', row)?.hidden){\r\n                    <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n                        [disabled]=\"!lastItemDisabled() ? false : validaLastRegistro($index)\"\r\n                        [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n                    }\r\n                </td>\r\n                }\r\n\r\n                @if (withEditItem()) {\r\n                <td scope=\"col\" class=\"text-start b-table w-min\">\r\n                    <div class=\"d-flex align-items-center justify-content-center\">\r\n                        <i (click)=\"validaEdit(iRow) ? editItem.emit(row) : null \"\r\n                            class=\"fas fa-pen fs-7 px-2 py-2 my-1 rounded-2 text-secondary shadow-sm\"\r\n                            [ngClass]=\"validaEdit(iRow) ? 'cursor-pointer' : ''\" title=\"Editar articulo\"></i>\r\n                    </div>\r\n                </td>\r\n                }\r\n\r\n                @if (customActions) {\r\n                <td class=\"text-center mwp-90 b-table w-min\">\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n                    </div>\r\n                </td>\r\n                }\r\n\r\n                @for (column of columns(); track $index) {\r\n                @if (column.visible) {\r\n                @switch (column.tipo) {\r\n\r\n                @case ('input-radio') {\r\n                <td scope=\"col\" class=\"text-center b-table\">\r\n                    <input type=\"radio\" class=\"form-check-input fs-8 border border-secondary m-0 p-0\"\r\n                        [disabled]=\"lastItemDisabled() && validaLastRegistro(iRow)\" [checked]=\"selectedRadio() === iRow\"\r\n                        (change)=\"clickRadio(iRow)\">\r\n                </td>\r\n                }\r\n\r\n                @case ('fecha') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n                    [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    {{ row[column.fieldname] | date:'dd/MM/yyyy' }}\r\n                </td>\r\n                }\r\n\r\n                @case ('decimal') {\r\n                <td class=\"text-end b-table\" [title]=\"limpiarNumero(row[column.fieldname]) | number:'1.2-2'\"\r\n                    [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    {{limpiarNumero(row[column.fieldname]) | number:'1.2-2'}}\r\n                </td>\r\n                }\r\n\r\n                @case ('list-select') {\r\n                <td class=\"text-center b-table\" [title]=\"row[column.fieldname]\">\r\n                    <div ngbDropdown class=\"d-inline-block\" container=\"body\">\r\n                        <div class=\"h-100 bg-sidebar d-flex align-items-center px-1\">\r\n                            <button [disabled]=\"!isLast\" class=\"border-0 bg-none\"\r\n                                [ngClass]=\"!isLast ? 'text-muted' : 'text-input'\" ngbDropdownToggle>\r\n                                {{row[column.fieldname]}}\r\n                            </button>\r\n                        </div>\r\n                        <div ngbDropdownMenu class=\"my-0 py-0\">\r\n                            @for (item of column.lista; track $index; let last = $last) {\r\n                            <app-button [texto]=\"item.text\"\r\n                                [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n                                [dropdownButton]=\"true\" (accion)=\"item?.action(row,item.codigo)\" />\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                    <!-- <app-dropdown-menu [options]=\"column.lista\" [disabled]=\"lastItemDisabled() ? false : !validaLastRegistro($index)\" [buttonProperties]=\"{color:'none',texto:row[column.fieldname]}\"/> -->\r\n                </td>\r\n\r\n                }\r\n\r\n                @case ('input') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n                        (focus)=\"focusData(row[column.fieldname])\"\r\n                        (blur)=\"!validarData(row[column.fieldname]) ? null : column?.blur(row)\"\r\n                        (keyup.enter)=\"!validarData(row[column.fieldname]) ? null : column?.enter(row)\"\r\n                        [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n                </td>\r\n                }\r\n\r\n                @case ('input-date') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"date\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n                        (blur)=\"column?.blur(row)\" (keyup.enter)=\"column?.enter(row)\"\r\n                        [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n                </td>\r\n                }\r\n\r\n                @case ('input-etiqueta') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"etiqueta\" [withDetails]=\"true\"\r\n                        [(valuedes)]=\"row[column.fieldname]\" [(disabled)]=\"row.disabledEtiqueta\"\r\n                        [auxiliarData]=\"{tipinv:row.tipinv,codart:row.codart,codtit:row.codtit,codalm:row.codalm}\"\r\n                        (emitirAdicionalData)=\"manejarDataEtiqueta($event,row)\"\r\n                        (disabledChange)=\"limpiarEtiqueta($event,row)\" [withBuscar2]=\"true\"\r\n                        [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n                </td>\r\n                }\r\n\r\n                @case ('input-afecta') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"tafecta\" [(valuecod)]=\"row[column.fieldname]\"\r\n                        [(disabled)]=\"row.disabledEtiqueta\" [(valuedes)]=\"row.dtipafec\" viewInput=\"cod\"\r\n                        [withBuscar]=\"true\" [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n                </td>\r\n                }\r\n\r\n                @case ('input-number') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"text\" class=\"form-control text-end\"\r\n                        [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n                        [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n                        [disabled]=\"row.disabledAll ?? false\" onlyNumber>\r\n                </td>\r\n                }\r\n\r\n                @case ('input-decimal') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"text\" class=\"form-control text-end w-100\"\r\n                        [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n                        [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n                        [appDecimal]=\"column.pipe\" [readonly]=\"column.readonly ? column.readonly(row) : false\"\r\n                        [disabled]=\"row.disabledAll ?? generateKeyDisabled(row,column)\" onlyNumber>\r\n                </td>\r\n                }\r\n\r\n                @case ('input-select') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <select class=\"form-select\" name=\"{{`cbo_lista_${row[column.fieldname]}`}}\"\r\n                        id=\"{{`cbo_lista_${row[column.fieldname]}`}}\" [(ngModel)]=\"row[column.fieldname]\"\r\n                        (change)=\"validarFunction(column.change)?.(row)\"\r\n                        [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n                        @for (item of column.lista; track $index) {\r\n                        <option [value]=\"item[column.keyCodigo]\"> {{ item[column.keyDescri]}} </option>\r\n                        }\r\n                    </select>\r\n                </td>\r\n                }\r\n\r\n                @case ('stock') {\r\n                <td class=\"b-table text-center\" [title]=\"row[column.fieldname] ? row[column.fieldname] : 'Sin Stock'\">\r\n                    @if (limpiarNumero(row[column.fieldname]) > 0) {\r\n                    {{row[column.fieldname]}}\r\n                    }@else {\r\n                    <i class=\"fas fa-times text-danger fw-bold fs-4\"></i>\r\n                    }\r\n                </td>\r\n                }\r\n\r\n                @default {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <span [ngClass]=\"isLast ? 'cursor-pointer' : ''\"\r\n                        (click)=\"isLast ? column?.clic() : null\">{{row[column.fieldname]}}</span>\r\n                </td>\r\n                }\r\n                }\r\n                }\r\n                }\r\n            </tr>\r\n            }\r\n        </tbody>\r\n    </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.header-normal{background:#cecece!important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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}}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}.w-min{max-width:40px!important;width:40px!important;min-width:40px!important}.bg-red{background-color:red}.bg-red i,.bg-red span,.bg-red button,.bg-red td,.bg-red input,.bg-red select,.bg-red-input{color:red!important}.bg-blue{background-color:#00f}.bg-blue i,.bg-blue span,.bg-blue button,.bg-blue td,.bg-blue input,.bg-blue select,.bg-blue-input{color:#00f!important}.bg-yellow{background-color:#ff0}.bg-green{background-color:#adff2f}.bg-initial{background-color:initial}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "directive", type: DecimalDirective, selector: "[appDecimal]", inputs: ["appDecimal"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]" }, { 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: "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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableDetalleComponent, isStandalone: true, selector: "app-table-detalle", inputs: { selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, busqueda: { classPropertyName: "busqueda", publicName: "busqueda", 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 }, lastItemDisabled: { classPropertyName: "lastItemDisabled", publicName: "lastItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withEditItem: { classPropertyName: "withEditItem", publicName: "withEditItem", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, deleteItems: { classPropertyName: "deleteItems", publicName: "deleteItems", 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 }, selectedRadio: { classPropertyName: "selectedRadio", publicName: "selectedRadio", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", busqueda: "busquedaChange", deleteItems: "deleteItemsChange", selectItems: "selectItemsChange", selectedRadio: "selectedRadioChange", editItem: "editItem" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: 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 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</div>\r\n}\r\n<div class=\"table-container table-responsive\"\r\n    [style.max-height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\"\r\n    [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\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 (withCheckbox()) {\r\n                <th scope=\"col\" class=\"text-center b-table w-min\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n                    <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n                        [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n                </th>\r\n                }\r\n\r\n                @if (withEditItem()) {\r\n                <th scope=\"col\" class=\"text-center b-table w-min\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n                </th>\r\n                }\r\n\r\n                @if (customActions) {\r\n                <th scope=\"col\" class=\"b-table w-min mwp-50\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\"></th>\r\n                }\r\n\r\n                @for (column of columns(); track $index) {\r\n                @if (column.visible) {\r\n                <th scope=\"col\" class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                    [style.width]=\"widthDefault(column) + 'px'\" [style.min-width]=\"widthDefault(column) + 'px'\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n                    {{ column.caption }}\r\n                </th>\r\n                }\r\n                }\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            @for (row of rowFilter(); track iRow; let iRow = $index) {\r\n            @let isLast = validaAccionDescri(iRow);\r\n            @let rowClass = getRowClass(row);\r\n            <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                [class]=\"rowClass\" (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n                [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n                @if (withCheckbox()) {\r\n                <td scope=\"col\" class=\"text-center b-table w-min\" [class]=\"rowClass\">\r\n                    @if(!resolveCell('checkbox', row)?.hidden){\r\n                    <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n                        [disabled]=\"!lastItemDisabled() ? false : validaLastRegistro($index)\"\r\n                        [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n                    }\r\n                </td>\r\n                }\r\n\r\n                @if (withEditItem()) {\r\n                <td scope=\"col\" class=\"text-start b-table w-min\">\r\n                    <div class=\"d-flex align-items-center justify-content-center\">\r\n                        <i (click)=\"validaEdit(iRow) ? editItem.emit(row) : null \"\r\n                            class=\"fas fa-pen fs-7 px-2 py-2 my-1 rounded-2 text-secondary shadow-sm\"\r\n                            [ngClass]=\"validaEdit(iRow) ? 'cursor-pointer' : ''\" title=\"Editar articulo\"></i>\r\n                    </div>\r\n                </td>\r\n                }\r\n\r\n                @if (customActions) {\r\n                <td class=\"text-center mwp-90 b-table w-min\">\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n                    </div>\r\n                </td>\r\n                }\r\n\r\n                @for (column of columns(); track $index) {\r\n                @if (column.visible) {\r\n                @switch (column.tipo) {\r\n\r\n                @case ('input-radio') {\r\n                <td scope=\"col\" class=\"text-center b-table\">\r\n                    <input type=\"radio\" class=\"form-check-input fs-8 border border-secondary m-0 p-0\"\r\n                        [disabled]=\"lastItemDisabled() && validaLastRegistro(iRow)\" [checked]=\"selectedRadio() === iRow\"\r\n                        (change)=\"clickRadio(iRow)\">\r\n                </td>\r\n                }\r\n\r\n                @case ('fecha') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n                    [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    {{ row[column.fieldname] | date:'dd/MM/yyyy' }}\r\n                </td>\r\n                }\r\n\r\n                @case ('decimal') {\r\n                <td class=\"text-end b-table\" [title]=\"limpiarNumero(row[column.fieldname]) | number:'1.2-2'\"\r\n                    [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    {{limpiarNumero(row[column.fieldname]) | number:'1.2-2'}}\r\n                </td>\r\n                }\r\n\r\n                @case ('list-select') {\r\n                <td class=\"text-center b-table\" [title]=\"row[column.fieldname]\">\r\n                    <div ngbDropdown class=\"d-inline-block\" container=\"body\">\r\n                        <div class=\"h-100 bg-sidebar d-flex align-items-center px-1\">\r\n                            <button [disabled]=\"!isLast\" class=\"border-0 bg-none\"\r\n                                [ngClass]=\"!isLast ? 'text-muted' : 'text-input'\" ngbDropdownToggle>\r\n                                {{row[column.fieldname]}}\r\n                            </button>\r\n                        </div>\r\n                        <div ngbDropdownMenu class=\"my-0 py-0\">\r\n                            @for (item of column.lista; track $index; let last = $last) {\r\n                            <app-button [texto]=\"item.text\"\r\n                                [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n                                [dropdownButton]=\"true\" (accion)=\"item?.action(row,item.codigo)\" />\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                    <!-- <app-dropdown-menu [options]=\"column.lista\" [disabled]=\"lastItemDisabled() ? false : !validaLastRegistro($index)\" [buttonProperties]=\"{color:'none',texto:row[column.fieldname]}\"/> -->\r\n                </td>\r\n\r\n                }\r\n\r\n                @case ('input') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n                        (focus)=\"focusData(row[column.fieldname])\"\r\n                        (blur)=\"!validarData(row[column.fieldname]) ? null : column?.blur(row)\"\r\n                        (keyup.enter)=\"!validarData(row[column.fieldname]) ? null : column?.enter(row)\"\r\n                        [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n                </td>\r\n                }\r\n\r\n                @case ('input-date') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"date\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n                        (blur)=\"column?.blur(row)\" (keyup.enter)=\"column?.enter(row)\"\r\n                        [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n                </td>\r\n                }\r\n\r\n                @case ('input-etiqueta') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"etiqueta\" [withDetails]=\"true\"\r\n                        [(valuedes)]=\"row[column.fieldname]\" [(disabled)]=\"row.disabledEtiqueta\"\r\n                        [auxiliarData]=\"{tipinv:row.tipinv,codart:row.codart,codtit:row.codtit,codalm:row.codalm}\"\r\n                        (emitirAdicionalData)=\"manejarDataEtiqueta($event,row)\"\r\n                        (disabledChange)=\"limpiarEtiqueta($event,row)\" [withBuscar2]=\"true\"\r\n                        [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n                </td>\r\n                }\r\n\r\n                @case ('input-afecta') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"tafecta\" [(valuecod)]=\"row[column.fieldname]\"\r\n                        [(disabled)]=\"row.disabledEtiqueta\" [(valuedes)]=\"row.dtipafec\" viewInput=\"cod\"\r\n                        [withBuscar]=\"true\" [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n                </td>\r\n                }\r\n\r\n                @case ('input-number') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"text\" class=\"form-control text-end\"\r\n                        [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n                        [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n                        [disabled]=\"row.disabledAll ?? false\" onlyNumber>\r\n                </td>\r\n                }\r\n\r\n                @case ('input-decimal') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"text\" class=\"form-control text-end w-100\"\r\n                        [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n                        [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n                        [appDecimal]=\"column.pipe\" [readonly]=\"column.readonly ? column.readonly(row) : false\"\r\n                        [disabled]=\"row.disabledAll ?? generateKeyDisabled(row,column)\" onlyNumber>\r\n                </td>\r\n                }\r\n\r\n                @case ('input-select') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <select class=\"form-select\" name=\"{{`cbo_lista_${row[column.fieldname]}`}}\"\r\n                        id=\"{{`cbo_lista_${row[column.fieldname]}`}}\" [(ngModel)]=\"row[column.fieldname]\"\r\n                        (change)=\"validarFunction(column.change)?.(row)\"\r\n                        [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n                        @for (item of column.lista; track $index) {\r\n                        <option [value]=\"item[column.keyCodigo]\"> {{ item[column.keyDescri]}} </option>\r\n                        }\r\n                    </select>\r\n                </td>\r\n                }\r\n\r\n                @case ('stock') {\r\n                <td class=\"b-table text-center\" [title]=\"row[column.fieldname] ? row[column.fieldname] : 'Sin Stock'\">\r\n                    @if (limpiarNumero(row[column.fieldname]) > 0) {\r\n                    {{row[column.fieldname]}}\r\n                    }@else {\r\n                    <i class=\"fas fa-times text-danger fw-bold fs-4\"></i>\r\n                    }\r\n                </td>\r\n                }\r\n\r\n                @default {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <span [ngClass]=\"isLast ? 'cursor-pointer' : ''\"\r\n                        (click)=\"isLast ? column?.clic() : null\">{{row[column.fieldname]}}</span>\r\n                </td>\r\n                }\r\n                }\r\n                }\r\n                }\r\n            </tr>\r\n            }\r\n        </tbody>\r\n    </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.header-normal{background:#cecece!important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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}}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}.w-min{max-width:40px!important;width:40px!important;min-width:40px!important}.bg-red{background-color:red}.bg-red i,.bg-red span,.bg-red button,.bg-red td,.bg-red input,.bg-red select,.bg-red-input{color:red!important}.bg-blue{background-color:#00f}.bg-blue i,.bg-blue span,.bg-blue button,.bg-blue td,.bg-blue input,.bg-blue select,.bg-blue-input{color:#00f!important}.bg-yellow{background-color:#ff0}.bg-green{background-color:#adff2f}.bg-initial{background-color:initial}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "directive", type: DecimalDirective, selector: "[appDecimal]", inputs: ["appDecimal"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]" }, { 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: "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", "isFullWidth", "paddingX", "paddingY"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableDetalleComponent, decorators: [{
             type: Component,
@@ -3571,8 +3609,8 @@ class TableUltimateComponent {
     footerRows = input([]);
     rowHeight = input(30);
     buffer = input(10);
-    altoContainer = input(400);
-    altoContenedor = input(0);
+    altoContainer = input(0);
+    altoContenedor = input(400);
     minAlto = input(200);
     identifier = input([]);
     withFiltro = input(false);
@@ -3605,10 +3643,10 @@ class TableUltimateComponent {
     // ── CSS height del contenedor ─────────────────────────────────────────────────
     /** Valor aplicado como [style.height] en el template */
     heightStyle = computed(() => {
-        if (this.altoContenedor() > 0) {
-            return `clamp(${this.minAlto()}px, calc(100vh - ${this.altoContenedor()}px), 100vh)`;
+        if (this.altoContainer() > 0) {
+            return `clamp(${this.minAlto()}px, calc(100vh - ${this.altoContainer()}px), 100vh)`;
         }
-        return `${this.altoContainer()}px`;
+        return `${this.altoContenedor()}px`;
     });
     // ── Filtrado + Ordenamiento ───────────────────────────────────────────────────
     rowFilter = computed(() => {
@@ -3923,11 +3961,11 @@ class TableUltimateComponent {
         setTimeout(() => this.isLoadingResponsive.set(false), 200);
     });
     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: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, footerRows: { classPropertyName: "footerRows", publicName: "footerRows", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, altoContenedor: { classPropertyName: "altoContenedor", publicName: "altoContenedor", isSignal: true, isRequired: false, transformFunction: null }, minAlto: { classPropertyName: "minAlto", publicName: "minAlto", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", 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 }, titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", 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 }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEvent: "rowEvent", selectedRow: "selectedRowChange", selectItems: "selectItemsChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar:</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (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)\" id=\"filter_table_lazy_todos\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_table_lazy_todos\">\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\r\n</div>\r\n}\r\n\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    <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n    <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\" [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n        <table class=\"ll-table\">\r\n\r\n            <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            <thead class=\"ll-thead\">\r\n                <tr>\r\n                    @if (withDetails()) {\r\n                    <th class=\"cw-20\"></th>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <th class=\"cw-20\">\r\n                        <label>\r\n                            <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n                                animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n                        </label>\r\n                    </th>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <th class=\"cw-40\">\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\r\n                    @for (col of columns(); track $index) {\r\n                    @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n                    <th [title]=\"col.caption\" [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n                        [style.max-width]=\"col.width ? col.width + 'px' : ''\" class=\"ll-th-sortable\"\r\n                        (click)=\"toggleSort(col.fieldname)\">\r\n                        <span class=\"ll-th-content\">\r\n                            <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n                            @if (sortField() === col.fieldname) {\r\n                            <i class=\"ms-1\"\r\n                                [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            } @else {\r\n                            <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\r\n                            }\r\n                        </span>\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n\r\n            <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            <tbody>\r\n                <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\r\n                @if (paddingTop() > 0) {\r\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\r\n                    <td [attr.colspan]=\"columns().length\"></td>\r\n                </tr>\r\n                }\r\n\r\n                <!-- Filas visibles -->\r\n                @for (row of visibleRows(); track row.idListTsi) {\r\n                @let idList = row.idListTsi;\r\n                <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\" (click)=\"selectRow(row, idList)\"\r\n                    (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\">\r\n\r\n                    @if (withDetails()) {\r\n                    <td class=\"b-table text-center mwp-25\">\r\n                        <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\r\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\r\n                                [class.fa-chevron-down]=\"expandedRows() == idList\"></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)\" (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\r\n                        </label>\r\n                    </td>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <td class=\"text-center cw-40\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                    </td>\r\n                    }\r\n\r\n                    @for (col of columns(); track $index) {\r\n                    @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n                    @if (col.template) {\r\n                    <td>\r\n                        <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\r\n                        </ng-container>\r\n                    </td>\r\n                    } @else {\r\n                    @switch (col.tipo) {\r\n\r\n                    @case ('cell-render') {\r\n                    @let resolverItem = resolveCell(col.fieldname, row);\r\n                    @if (resolverItem) {\r\n                    <td [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?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\r\n                        [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n                        [style.max-width]=\"col.width ? col.width + 'px' : ''\" [title]=\"row[col.fieldname]\"\r\n                        [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n                    </td>\r\n                    }\r\n\r\n                    }\r\n                    }\r\n                    }\r\n                    }\r\n                </tr>\r\n\r\n                @if (idList == 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                }\r\n\r\n                <!-- Fila vac\u00EDa si no hay datos -->\r\n                @if (rowFilter().length === 0) {\r\n                <tr>\r\n                    <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n                        Sin datos\r\n                    </td>\r\n                </tr>\r\n                }\r\n\r\n                <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n                @if (paddingBottom() > 0) {\r\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n                    <td [attr.colspan]=\"columns().length\"></td>\r\n                </tr>\r\n                }\r\n            </tbody>\r\n\r\n            <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            @if (withTotal() && rowFilter().length > 0) {\r\n            <tfoot class=\"ll-tfoot\">\r\n\r\n                <tr>\r\n                    <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2\">Totales:</td>\r\n                    @for (col of columns() ; track $index) {\r\n                    @if (col.totalizable) {\r\n                    <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n                        {{ getTotals(col.fieldname)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n\r\n        </table>\r\n    </div>\r\n</ng-template>", styles: [".ll-search-bar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:8px}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{height:30px;cursor:pointer}.ll-row:nth-child(odd){background-color:#00000010}.ll-row:hover{background-color:#00000015}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media (max-width: 1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.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}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-20{min-width:40px}\n"], dependencies: [{ 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [fadeInOut, dropdownAnimation] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, footerRows: { classPropertyName: "footerRows", publicName: "footerRows", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, altoContenedor: { classPropertyName: "altoContenedor", publicName: "altoContenedor", isSignal: true, isRequired: false, transformFunction: null }, minAlto: { classPropertyName: "minAlto", publicName: "minAlto", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", 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 }, titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", 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 }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEvent: "rowEvent", selectedRow: "selectedRowChange", selectItems: "selectItemsChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar:</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (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)\" id=\"filter_table_lazy_todos\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_table_lazy_todos\">\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\r\n</div>\r\n}\r\n\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    <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n    <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\" [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n        <table class=\"ll-table\">\r\n\r\n            <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            <thead class=\"ll-thead\">\r\n                <tr>\r\n                    @if (withDetails()) {\r\n                    <th class=\"cw-25\"></th>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <th class=\"cw-20\">\r\n                        <label>\r\n                            <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n                                animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n                        </label>\r\n                    </th>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <th class=\"cw-40\">\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\r\n                    @for (col of columns(); track $index) {\r\n                    @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n                    <th [title]=\"col.caption\" [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n                        [style.max-width]=\"col.width ? col.width + 'px' : ''\" class=\"ll-th-sortable\"\r\n                        (click)=\"toggleSort(col.fieldname)\">\r\n                        <span class=\"ll-th-content\">\r\n                            <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n                            @if (sortField() === col.fieldname) {\r\n                            <i class=\"ms-1\"\r\n                                [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            } @else {\r\n                            <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\r\n                            }\r\n                        </span>\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n\r\n            <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            <tbody>\r\n                <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\r\n                @if (paddingTop() > 0) {\r\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\r\n                    <td [attr.colspan]=\"columns().length\"></td>\r\n                </tr>\r\n                }\r\n\r\n                <!-- Filas visibles -->\r\n                @for (row of visibleRows(); track row.idListTsi) {\r\n                @let idList = row.idListTsi;\r\n                <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\" (click)=\"selectRow(row, idList)\"\r\n                    (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\">\r\n\r\n                    @if (withDetails()) {\r\n                    <td class=\"b-table text-center mwp-25\">\r\n                        <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\r\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\r\n                                [class.fa-chevron-down]=\"expandedRows() == idList\"></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)\" (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\r\n                        </label>\r\n                    </td>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <td class=\"text-center\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                    </td>\r\n                    }\r\n\r\n                    @for (col of columns(); track $index) {\r\n                    @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n                    @if (col.template) {\r\n                    <td>\r\n                        <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\r\n                        </ng-container>\r\n                    </td>\r\n                    } @else {\r\n                    @switch (col.tipo) {\r\n\r\n                    @case ('cell-render') {\r\n                    @let resolverItem = resolveCell(col.fieldname, row);\r\n                    @if (resolverItem) {\r\n                    <td [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?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\r\n                        [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\r\n                        [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\" [title]=\"row[col.fieldname]\"\r\n                        [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n                    </td>\r\n                    }\r\n\r\n                    }\r\n                    }\r\n                    }\r\n                    }\r\n                </tr>\r\n\r\n                @if (idList == 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                }\r\n\r\n                <!-- Fila vac\u00EDa si no hay datos -->\r\n                @if (rowFilter().length === 0) {\r\n                <tr>\r\n                    <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n                        Sin datos\r\n                    </td>\r\n                </tr>\r\n                }\r\n\r\n                <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n                @if (paddingBottom() > 0) {\r\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n                    <td [attr.colspan]=\"columns().length\"></td>\r\n                </tr>\r\n                }\r\n            </tbody>\r\n\r\n            <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            @if (withTotal() && rowFilter().length > 0) {\r\n            <tfoot class=\"ll-tfoot\">\r\n\r\n                <tr>\r\n                    <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n                    @for (col of columns() ; track $index) {\r\n                    @if (col.totalizable) {\r\n                    <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n                        {{ getTotals(col.fieldname)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n\r\n        </table>\r\n    </div>\r\n</ng-template>", styles: [".ll-search-bar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:8px}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{height:30px;cursor:pointer}.ll-row:nth-child(odd){background-color:#00000010}.ll-row:hover{background-color:#00000015}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media (max-width: 1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.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}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-25{min-width:40px}\n"], dependencies: [{ 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], 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: [FormsModule, CommonModule, DropdownCdkComponent, AnimatedCheckboxDirective, CardMobileComponent], animations: [fadeInOut, dropdownAnimation], template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar:</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (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)\" id=\"filter_table_lazy_todos\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_table_lazy_todos\">\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\r\n</div>\r\n}\r\n\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    <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n    <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\" [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n        <table class=\"ll-table\">\r\n\r\n            <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            <thead class=\"ll-thead\">\r\n                <tr>\r\n                    @if (withDetails()) {\r\n                    <th class=\"cw-20\"></th>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <th class=\"cw-20\">\r\n                        <label>\r\n                            <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n                                animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n                        </label>\r\n                    </th>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <th class=\"cw-40\">\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\r\n                    @for (col of columns(); track $index) {\r\n                    @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n                    <th [title]=\"col.caption\" [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n                        [style.max-width]=\"col.width ? col.width + 'px' : ''\" class=\"ll-th-sortable\"\r\n                        (click)=\"toggleSort(col.fieldname)\">\r\n                        <span class=\"ll-th-content\">\r\n                            <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n                            @if (sortField() === col.fieldname) {\r\n                            <i class=\"ms-1\"\r\n                                [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            } @else {\r\n                            <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\r\n                            }\r\n                        </span>\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n\r\n            <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            <tbody>\r\n                <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\r\n                @if (paddingTop() > 0) {\r\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\r\n                    <td [attr.colspan]=\"columns().length\"></td>\r\n                </tr>\r\n                }\r\n\r\n                <!-- Filas visibles -->\r\n                @for (row of visibleRows(); track row.idListTsi) {\r\n                @let idList = row.idListTsi;\r\n                <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\" (click)=\"selectRow(row, idList)\"\r\n                    (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\">\r\n\r\n                    @if (withDetails()) {\r\n                    <td class=\"b-table text-center mwp-25\">\r\n                        <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\r\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\r\n                                [class.fa-chevron-down]=\"expandedRows() == idList\"></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)\" (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\r\n                        </label>\r\n                    </td>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <td class=\"text-center cw-40\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                    </td>\r\n                    }\r\n\r\n                    @for (col of columns(); track $index) {\r\n                    @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n                    @if (col.template) {\r\n                    <td>\r\n                        <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\r\n                        </ng-container>\r\n                    </td>\r\n                    } @else {\r\n                    @switch (col.tipo) {\r\n\r\n                    @case ('cell-render') {\r\n                    @let resolverItem = resolveCell(col.fieldname, row);\r\n                    @if (resolverItem) {\r\n                    <td [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?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\r\n                        [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n                        [style.max-width]=\"col.width ? col.width + 'px' : ''\" [title]=\"row[col.fieldname]\"\r\n                        [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n                    </td>\r\n                    }\r\n\r\n                    }\r\n                    }\r\n                    }\r\n                    }\r\n                </tr>\r\n\r\n                @if (idList == 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                }\r\n\r\n                <!-- Fila vac\u00EDa si no hay datos -->\r\n                @if (rowFilter().length === 0) {\r\n                <tr>\r\n                    <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n                        Sin datos\r\n                    </td>\r\n                </tr>\r\n                }\r\n\r\n                <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n                @if (paddingBottom() > 0) {\r\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n                    <td [attr.colspan]=\"columns().length\"></td>\r\n                </tr>\r\n                }\r\n            </tbody>\r\n\r\n            <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            @if (withTotal() && rowFilter().length > 0) {\r\n            <tfoot class=\"ll-tfoot\">\r\n\r\n                <tr>\r\n                    <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2\">Totales:</td>\r\n                    @for (col of columns() ; track $index) {\r\n                    @if (col.totalizable) {\r\n                    <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n                        {{ getTotals(col.fieldname)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n\r\n        </table>\r\n    </div>\r\n</ng-template>", styles: [".ll-search-bar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:8px}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{height:30px;cursor:pointer}.ll-row:nth-child(odd){background-color:#00000010}.ll-row:hover{background-color:#00000015}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media (max-width: 1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.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}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-20{min-width:40px}\n"] }]
+            args: [{ selector: 'app-table-ultimate', imports: [FormsModule, CommonModule, DropdownCdkComponent, AnimatedCheckboxDirective, CardMobileComponent], animations: [fadeInOut, dropdownAnimation], template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n    <label class=\"form-label me-2 pt-2\">Buscar:</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (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)\" id=\"filter_table_lazy_todos\" />\r\n                    <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_table_lazy_todos\">\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\r\n</div>\r\n}\r\n\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    <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n    <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\" [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n        <table class=\"ll-table\">\r\n\r\n            <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            <thead class=\"ll-thead\">\r\n                <tr>\r\n                    @if (withDetails()) {\r\n                    <th class=\"cw-25\"></th>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <th class=\"cw-20\">\r\n                        <label>\r\n                            <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n                                animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n                        </label>\r\n                    </th>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <th class=\"cw-40\">\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\r\n                    @for (col of columns(); track $index) {\r\n                    @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n                    <th [title]=\"col.caption\" [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n                        [style.max-width]=\"col.width ? col.width + 'px' : ''\" class=\"ll-th-sortable\"\r\n                        (click)=\"toggleSort(col.fieldname)\">\r\n                        <span class=\"ll-th-content\">\r\n                            <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n                            @if (sortField() === col.fieldname) {\r\n                            <i class=\"ms-1\"\r\n                                [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            } @else {\r\n                            <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\r\n                            }\r\n                        </span>\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n\r\n            <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            <tbody>\r\n                <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\r\n                @if (paddingTop() > 0) {\r\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\r\n                    <td [attr.colspan]=\"columns().length\"></td>\r\n                </tr>\r\n                }\r\n\r\n                <!-- Filas visibles -->\r\n                @for (row of visibleRows(); track row.idListTsi) {\r\n                @let idList = row.idListTsi;\r\n                <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\" (click)=\"selectRow(row, idList)\"\r\n                    (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\">\r\n\r\n                    @if (withDetails()) {\r\n                    <td class=\"b-table text-center mwp-25\">\r\n                        <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\r\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\r\n                                [class.fa-chevron-down]=\"expandedRows() == idList\"></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)\" (click)=\"$event.stopPropagation()\"\r\n                                (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\r\n                        </label>\r\n                    </td>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <td class=\"text-center\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                    </td>\r\n                    }\r\n\r\n                    @for (col of columns(); track $index) {\r\n                    @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n                    @if (col.template) {\r\n                    <td>\r\n                        <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\r\n                        </ng-container>\r\n                    </td>\r\n                    } @else {\r\n                    @switch (col.tipo) {\r\n\r\n                    @case ('cell-render') {\r\n                    @let resolverItem = resolveCell(col.fieldname, row);\r\n                    @if (resolverItem) {\r\n                    <td [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?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\r\n                        [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\r\n                        [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\" [title]=\"row[col.fieldname]\"\r\n                        [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n                    </td>\r\n                    }\r\n\r\n                    }\r\n                    }\r\n                    }\r\n                    }\r\n                </tr>\r\n\r\n                @if (idList == 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                }\r\n\r\n                <!-- Fila vac\u00EDa si no hay datos -->\r\n                @if (rowFilter().length === 0) {\r\n                <tr>\r\n                    <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n                        Sin datos\r\n                    </td>\r\n                </tr>\r\n                }\r\n\r\n                <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n                @if (paddingBottom() > 0) {\r\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n                    <td [attr.colspan]=\"columns().length\"></td>\r\n                </tr>\r\n                }\r\n            </tbody>\r\n\r\n            <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n            @if (withTotal() && rowFilter().length > 0) {\r\n            <tfoot class=\"ll-tfoot\">\r\n\r\n                <tr>\r\n                    <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n                    @for (col of columns() ; track $index) {\r\n                    @if (col.totalizable) {\r\n                    <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n                        {{ getTotals(col.fieldname)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n\r\n        </table>\r\n    </div>\r\n</ng-template>", styles: [".ll-search-bar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:8px}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{height:30px;cursor:pointer}.ll-row:nth-child(odd){background-color:#00000010}.ll-row:hover{background-color:#00000015}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media (max-width: 1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.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}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-25{min-width:40px}\n"] }]
         }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -4354,7 +4392,7 @@ class MdGenericoComponent {
         this.modalService.dismiss();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", 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 }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, acceptDisabled: { classPropertyName: "acceptDisabled", publicName: "acceptDisabled", isSignal: true, isRequired: false, transformFunction: null }, validaCierre: { classPropertyName: "validaCierre", publicName: "validaCierre", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", cerrar: "cerrar", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( showFooter()){\r\n<div class=\"modal-footer\">\r\n    @if (footer()) {\r\n        <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n    }\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["title", "tamanio", "showFiltro", "withFiltro", "hasData", "isModal", "showAlerta", "textAlerta", "validateSalto"], outputs: ["withFiltroChange", "cerrarModal"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", 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 }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, acceptDisabled: { classPropertyName: "acceptDisabled", publicName: "acceptDisabled", isSignal: true, isRequired: false, transformFunction: null }, validaCierre: { classPropertyName: "validaCierre", publicName: "validaCierre", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", cerrar: "cerrar", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( showFooter()){\r\n<div class=\"modal-footer\">\r\n    @if (footer()) {\r\n        <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n    }\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["title", "tamanio", "showFiltro", "withFiltro", "hasData", "isModal", "showAlerta", "textAlerta", "validateSalto"], outputs: ["withFiltroChange", "cerrarModal"] }, { 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", "isFullWidth", "paddingX", "paddingY"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, decorators: [{
             type: Component,
@@ -4696,17 +4734,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class AlertErrorService {
     modalService = inject(NgbModal);
-    open(mensaje) {
+    open(mensaje, status) {
         const modalRef = this.modalService.open(AlertErrorComponent, {
             windowClass: 'modal-xs',
             backdrop: 'static',
             centered: true,
         });
         modalRef.componentInstance.mensaje.set(mensaje);
-        return modalRef;
+        if (status) {
+            modalRef.componentInstance.codigoEstado.set(status);
+        }
+        return handleModalReturn(modalRef);
     }
-    mostrarModalError(mensaje) {
-        return this.open(mensaje).result;
+    async mostrarModalError(mensaje, status) {
+        return this.open(mensaje, status);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorService, providedIn: 'root' });