ng-components-tsi 0.0.67 → 0.0.69

package/fesm2022/ng-components-tsi.mjs

@@ -17,6 +17,7 @@ import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterOutlet, Router
 import { toSignal, rxResource } from '@angular/core/rxjs-interop';
 import { SesionService } from 'core-tsi';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import Swal from 'sweetalert2';
 
 class AtajosDirective {
@@ -141,6 +142,7 @@ class ButtonComponent {
     uploadButton = input(false);
     accept = input('*/*');
     fileSelected = output();
+    isMultiple = input(false);
     isRounded = input(false);
     isNotStyle = input(false);
     isFullWidth = input(false);
@@ -218,7 +220,12 @@ class ButtonComponent {
     handleFileInput(event) {
         const input = event.target;
         if (input.files && input.files.length > 0) {
-            this.fileSelected.emit(input.files[0]);
+            if (this.isMultiple()) {
+                this.fileSelected.emit(Array.from(input.files));
+            }
+            else {
+                this.fileSelected.emit(input.files[0]);
+            }
             input.value = '';
         }
     }
@@ -273,11 +280,11 @@ class ButtonComponent {
         return `assets/images/${imageIcon[this.icon()]}`;
     };
     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 }, variante: { classPropertyName: "variante", publicName: "variante", 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 }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", 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() && ! 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    [style.min-width.px]=\"minWidth()\"\r\n    [ngClass]=\"getClasses()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    @if (isImageIcon(icon())) {\r\n        <img [src]=\"getImageName()\" class=\"button-icon-hover\" height=\"16px\">\r\n    }\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\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    \r\n    @if (isImageIcon(icon())) {\r\n        <img [src]=\"getImageName()\" class=\"me-1 button-icon-hover\" height=\"16px\" [alt]=\"icon()\" >\r\n    }\r\n    @else {\r\n        <i [ngClass]=\"getIconClass()\" class=\"me-1\"></i>\r\n    }\r\n\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: [".btn-modern{position:relative;isolation:isolate;border-radius:5px!important;font-size:12px;padding-top:5px;padding-bottom:5px;font-weight:500;letter-spacing:.2px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .25s ease,filter .25s ease,transform .06s ease;will-change:transform,filter}.btn-modern:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(var(--focus-color-rgb, 0, 123, 255),.45),0 6px 20px rgba(var(--focus-color-rgb, 0, 123, 255),.3)}.btn-modern:active{transform:scale(.95);filter:brightness(.95);box-shadow:inset 0 3px 6px #00000047,inset 0 1px 2px #00000038}.btn-modern>*{position:relative;z-index:1}.btn-link-modern{border:none!important;background-color:transparent!important;box-shadow:none!important;border-radius:5px!important;font-size:12px;padding-top:8px;padding-bottom:8px;font-weight:500;letter-spacing:.2px;color:rgb(var(--focus-color-rgb, 0, 123, 255))!important;transition:background-color .2s ease,filter .15s ease,transform .06s ease}.btn-link-modern:hover{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.1)!important;filter:brightness(1.08)}.btn-link-modern:active{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.18)!important;transform:scale(.97)}@media (prefers-reduced-motion: reduce){.btn-modern,.btn-modern:before{transition:none}}.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 }, variante: { classPropertyName: "variante", publicName: "variante", 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 }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", 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 }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", 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() && ! 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    [style.min-width.px]=\"minWidth()\"\r\n    [ngClass]=\"getClasses()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    @if (isImageIcon(icon())) {\r\n        <img [src]=\"getImageName()\" class=\"button-icon-hover\" height=\"16px\">\r\n    }\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\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    \r\n    @if (isImageIcon(icon())) {\r\n        <img [src]=\"getImageName()\" class=\"me-1 button-icon-hover\" height=\"16px\" [alt]=\"icon()\" >\r\n    }\r\n    @else {\r\n        <i [ngClass]=\"getIconClass()\" class=\"me-1\"></i>\r\n    }\r\n\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)\" [multiple]=\"isMultiple()\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".btn-modern{position:relative;isolation:isolate;border-radius:5px!important;font-size:12px;padding-top:5px;padding-bottom:5px;font-weight:500;letter-spacing:.2px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .25s ease,filter .25s ease,transform .06s ease;will-change:transform,filter}.btn-modern:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(var(--focus-color-rgb, 0, 123, 255),.45),0 6px 20px rgba(var(--focus-color-rgb, 0, 123, 255),.3)}.btn-modern:active{transform:scale(.95);filter:brightness(.95);box-shadow:inset 0 3px 6px #00000047,inset 0 1px 2px #00000038}.btn-modern>*{position:relative;z-index:1}.btn-link-modern{border:none!important;background-color:transparent!important;box-shadow:none!important;border-radius:5px!important;font-size:12px;padding-top:8px;padding-bottom:8px;font-weight:500;letter-spacing:.2px;color:rgb(var(--focus-color-rgb, 0, 123, 255))!important;transition:background-color .2s ease,filter .15s ease,transform .06s ease}.btn-link-modern:hover{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.1)!important;filter:brightness(1.08)}.btn-link-modern:active{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.18)!important;transform:scale(.97)}@media (prefers-reduced-motion: reduce){.btn-modern,.btn-modern:before{transition:none}}.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() && ! 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    [style.min-width.px]=\"minWidth()\"\r\n    [ngClass]=\"getClasses()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    @if (isImageIcon(icon())) {\r\n        <img [src]=\"getImageName()\" class=\"button-icon-hover\" height=\"16px\">\r\n    }\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\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    \r\n    @if (isImageIcon(icon())) {\r\n        <img [src]=\"getImageName()\" class=\"me-1 button-icon-hover\" height=\"16px\" [alt]=\"icon()\" >\r\n    }\r\n    @else {\r\n        <i [ngClass]=\"getIconClass()\" class=\"me-1\"></i>\r\n    }\r\n\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: [".btn-modern{position:relative;isolation:isolate;border-radius:5px!important;font-size:12px;padding-top:5px;padding-bottom:5px;font-weight:500;letter-spacing:.2px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .25s ease,filter .25s ease,transform .06s ease;will-change:transform,filter}.btn-modern:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(var(--focus-color-rgb, 0, 123, 255),.45),0 6px 20px rgba(var(--focus-color-rgb, 0, 123, 255),.3)}.btn-modern:active{transform:scale(.95);filter:brightness(.95);box-shadow:inset 0 3px 6px #00000047,inset 0 1px 2px #00000038}.btn-modern>*{position:relative;z-index:1}.btn-link-modern{border:none!important;background-color:transparent!important;box-shadow:none!important;border-radius:5px!important;font-size:12px;padding-top:8px;padding-bottom:8px;font-weight:500;letter-spacing:.2px;color:rgb(var(--focus-color-rgb, 0, 123, 255))!important;transition:background-color .2s ease,filter .15s ease,transform .06s ease}.btn-link-modern:hover{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.1)!important;filter:brightness(1.08)}.btn-link-modern:active{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.18)!important;transform:scale(.97)}@media (prefers-reduced-motion: reduce){.btn-modern,.btn-modern:before{transition:none}}.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() && ! 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    [style.min-width.px]=\"minWidth()\"\r\n    [ngClass]=\"getClasses()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    @if (isImageIcon(icon())) {\r\n        <img [src]=\"getImageName()\" class=\"button-icon-hover\" height=\"16px\">\r\n    }\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\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    \r\n    @if (isImageIcon(icon())) {\r\n        <img [src]=\"getImageName()\" class=\"me-1 button-icon-hover\" height=\"16px\" [alt]=\"icon()\" >\r\n    }\r\n    @else {\r\n        <i [ngClass]=\"getIconClass()\" class=\"me-1\"></i>\r\n    }\r\n\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)\" [multiple]=\"isMultiple()\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".btn-modern{position:relative;isolation:isolate;border-radius:5px!important;font-size:12px;padding-top:5px;padding-bottom:5px;font-weight:500;letter-spacing:.2px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .25s ease,filter .25s ease,transform .06s ease;will-change:transform,filter}.btn-modern:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(var(--focus-color-rgb, 0, 123, 255),.45),0 6px 20px rgba(var(--focus-color-rgb, 0, 123, 255),.3)}.btn-modern:active{transform:scale(.95);filter:brightness(.95);box-shadow:inset 0 3px 6px #00000047,inset 0 1px 2px #00000038}.btn-modern>*{position:relative;z-index:1}.btn-link-modern{border:none!important;background-color:transparent!important;box-shadow:none!important;border-radius:5px!important;font-size:12px;padding-top:8px;padding-bottom:8px;font-weight:500;letter-spacing:.2px;color:rgb(var(--focus-color-rgb, 0, 123, 255))!important;transition:background-color .2s ease,filter .15s ease,transform .06s ease}.btn-link-modern:hover{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.1)!important;filter:brightness(1.08)}.btn-link-modern:active{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.18)!important;transform:scale(.97)}@media (prefers-reduced-motion: reduce){.btn-modern,.btn-modern:before{transition:none}}.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']
@@ -436,7 +443,7 @@ 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=\"alert-confirm-container\">\n\n\n  <div class=\"alert-confirm-content\">\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\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...\" [(ngModel)]=\"textareaValueModel\"\n        (ngModelChange)=\"onTextareaChange($event)\" [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  </div>\n\n\n  <div class=\"actions\">\n    @if(mostrarConfirmar()){\n    <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" [minWidth]=\"100\" />\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()\" [minWidth]=\"100\" />\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\"\n    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.\n  </div>\n\n</div>", styles: [".alert-confirm-container{border-radius:16px;display:flex;flex-direction:column;max-height:85vh;overflow:hidden;padding-bottom:32px}.alert-confirm-container>div:last-child{align-self:center;padding:0 30px}.alert-confirm-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:40px 30px 24px;text-align:center}.alert-confirm-content::-webkit-scrollbar{width:5px}.alert-confirm-content::-webkit-scrollbar-track{background:transparent}.alert-confirm-content::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:3px}@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;padding:0 30px}.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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], 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\n  <div class=\"alert-confirm-content\">\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\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...\" [(ngModel)]=\"textareaValueModel\"\n        (ngModelChange)=\"onTextareaChange($event)\" [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  </div>\n\n\n  <div class=\"actions\">\n    @if(mostrarConfirmar()){\n    <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" [minWidth]=\"100\" />\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()\" [minWidth]=\"100\" />\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\"\n    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.\n  </div>\n\n</div>", styles: [".alert-confirm-container{border-radius:16px;display:flex;flex-direction:column;max-height:85vh;overflow:hidden;padding-bottom:32px}.alert-confirm-container>div:last-child{align-self:center;padding:0 30px}.alert-confirm-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:40px 30px 24px;text-align:center}.alert-confirm-content::-webkit-scrollbar{width:5px}.alert-confirm-content::-webkit-scrollbar-track{background:transparent}.alert-confirm-content::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:3px}@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;padding:0 30px}.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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationComponent, decorators: [{
             type: Component,
@@ -481,7 +488,7 @@ class AlertErrorComponent {
         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: "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=\"alert-error-content\">\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        @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\n    <div class=\"actions\">\n        <app-button texto=\"Aceptar\" color=\"rojo_alerta\" [isFullWidth]=\"true\" (accion)=\"onAceptar()\" [autoFocus]=\"true\"\n            paddingY=\"py-2\" />\n    </div>\n\n</div>", styles: [".alert-error-container{border-radius:16px;display:flex;flex-direction:column;max-height:85vh;overflow:hidden}.alert-error-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:40px 30px 24px;text-align:center}.alert-error-content::-webkit-scrollbar{width:5px}.alert-error-content::-webkit-scrollbar-track{background:transparent}.alert-error-content::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:3px}@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;word-break:break-word;overflow-wrap:break-word}.actions{flex-shrink:0;padding:16px 30px 24px;border-top:1px solid rgba(0,0,0,.06)}.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;word-break:break-all;max-width:65%;text-align:right}.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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], 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=\"alert-error-content\">\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        @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\n    <div class=\"actions\">\n        <app-button texto=\"Aceptar\" color=\"rojo_alerta\" [isFullWidth]=\"true\" (accion)=\"onAceptar()\" [autoFocus]=\"true\"\n            paddingY=\"py-2\" />\n    </div>\n\n</div>", styles: [".alert-error-container{border-radius:16px;display:flex;flex-direction:column;max-height:85vh;overflow:hidden}.alert-error-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:40px 30px 24px;text-align:center}.alert-error-content::-webkit-scrollbar{width:5px}.alert-error-content::-webkit-scrollbar-track{background:transparent}.alert-error-content::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:3px}@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;word-break:break-word;overflow-wrap:break-word}.actions{flex-shrink:0;padding:16px 30px 24px;border-top:1px solid rgba(0,0,0,.06)}.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;word-break:break-all;max-width:65%;text-align:right}.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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorComponent, decorators: [{
             type: Component,
@@ -688,7 +695,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=\"header-outer\" [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n    <div class=\"header-main\">\r\n        <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\"\r\n            class=\"header-title 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        @if (showAlerta()) {\r\n        <app-alerta class=\"header-alerta\" [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n        }\r\n    </div>\r\n\r\n    @if(isModal()){\r\n    <div class=\"header-close\">\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n    </div>\r\n    }\r\n</div>", styles: [".header-outer{display:flex;flex-wrap:nowrap;gap:8px}.header-title{flex:1 1 auto;min-width:0}.header-main{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.header-alerta{margin-left:auto;flex:0 1 auto;min-width:0;max-width:100%}.header-close{flex-shrink:0;align-self:flex-start;padding-top:5px}\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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], 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=\"header-outer\" [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n    <div class=\"header-main\">\r\n        <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\"\r\n            class=\"header-title 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        @if (showAlerta()) {\r\n        <app-alerta class=\"header-alerta\" [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n        }\r\n    </div>\r\n\r\n    @if(isModal()){\r\n    <div class=\"header-close\">\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n    </div>\r\n    }\r\n</div>", styles: [".header-outer{display:flex;flex-wrap:nowrap;gap:8px}.header-title{flex:1 1 auto;min-width:0}.header-main{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.header-alerta{margin-left:auto;flex:0 1 auto;min-width:0;max-width:100%}.header-close{flex-shrink:0;align-self:flex-start;padding-top:5px}\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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], 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,
@@ -937,13 +944,21 @@ class AutocompleteV2Component {
     customTransition = input('');
     // NUEVAS VARIABLES
     lista = input([]);
-    filteredItems = computed(() => this.filterList(this.searchText()));
+    filterQuery = signal('');
+    filteredItems = computed(() => this.filterList(this.filterQuery()));
     type = input('simple');
     computedType = computed(() => this.type() == 'doble');
     value = model(null);
     searchText = model('');
     listaMap = computed(() => this.toKeyValue(this.lista(), this.keyCodigo(), this.keyDescri()));
     withCheckTodos = input(false);
+    listboxId = computed(() => 'listbox_' + this.label());
+    selectedIndex = computed(() => {
+        const val = this.value();
+        if (val === null || val === undefined || val === '')
+            return -1;
+        return this.filteredItems().findIndex(item => item[this.keyCodigo()] == val);
+    });
     allDisabled = model();
     altoContainer = input(200);
     resizeObserver;
@@ -975,7 +990,26 @@ class AutocompleteV2Component {
     selectItem(item) {
         this.value.set(item[this.keyCodigo()]);
         this.searchText.set(item[this.keyDescri()]);
+        this.filterQuery.set('');
+        this.showDropdown.set(false);
+        this.highlightedIndex.set(-1);
+    }
+    openDropdown() {
+        this.filterQuery.set('');
+        this.showDropdown.set(true);
+        this.highlightedIndex.set(this.selectedIndex());
+        this.inputRef()?.nativeElement?.select();
+    }
+    onBlur() {
         this.showDropdown.set(false);
+        this.blurKey();
+        this.filterQuery.set('');
+        this.highlightedIndex.set(-1);
+    }
+    onSearchInput() {
+        this.filterQuery.set(this.searchText());
+        const items = this.filteredItems();
+        this.highlightedIndex.set(items.length === 1 ? 0 : -1);
     }
     blurKey() {
         this.searchText.set(this.listaMap()[this.value()] ?? '');
@@ -990,12 +1024,21 @@ class AutocompleteV2Component {
         }, {});
     }
     clear() {
-        if (this.allDisabled())
+        if (this.allDisabled() || this.disabled2())
             return;
         this.searchText.set('');
         this.value.set(null);
+        this.filterQuery.set('');
     }
     onKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.showDropdown.set(false);
+            this.blurKey();
+            this.filterQuery.set('');
+            this.highlightedIndex.set(-1);
+            return;
+        }
         const items = this.filteredItems();
         if (!items.length)
             return;
@@ -1014,6 +1057,7 @@ class AutocompleteV2Component {
                 event.preventDefault();
                 if (this.highlightedIndex() >= 0) {
                     this.selectItem(items[this.highlightedIndex()]);
+                    this.inputRef()?.nativeElement?.blur();
                 }
                 break;
         }
@@ -1023,11 +1067,11 @@ class AutocompleteV2Component {
         itemElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AutocompleteV2Component, isStandalone: true, selector: "app-autocomplete-v2", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, searchIdText: { classPropertyName: "searchIdText", publicName: "searchIdText", isSignal: true, isRequired: false, transformFunction: null }, disabled1: { classPropertyName: "disabled1", publicName: "disabled1", isSignal: true, isRequired: false, transformFunction: null }, disabled2: { classPropertyName: "disabled2", publicName: "disabled2", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, withCheckTodos: { classPropertyName: "withCheckTodos", publicName: "withCheckTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchIdText: "searchIdTextChange", disabled1: "disabled1Change", disabled2: "disabled2Change", changeInput: "changeInput", value: "valueChange", searchText: "searchTextChange", allDisabled: "allDisabledChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "autocompleteItems", predicate: ["autocompleteItem"], descendants: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n\r\n  <div class=\"autocomplete d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n        [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled2()\" (input)=\"null\"\r\n        (blur)=\"showDropdown.set(false)\" (focus)=\"showDropdown.set(true)\" (keydown)=\"onKeyDown($event)\" />\r\n      @if (searchText().length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      }\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\">\r\n          @for (item of filteredItems(); track $index) {\r\n          <li #autocompleteItem class=\"text-dark\"\r\n            [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'bg-primary text-white': highlightedIndex() == $index}\"\r\n            (mousedown)=\"selectItem(item)\">\r\n            @if (joinInfo()) {\r\n            {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n            } @else{\r\n            {{ item[keyDescri()] }}\r\n            }\r\n            @if (item[keyCodigo()] == value()) {\r\n            <i class=\"far fa-check-circle fw-bold text-success cw-20\"></i>\r\n            }\r\n          </li>\r\n          }\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    @if (withCheckTodos()) {\r\n    <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n        (bindingChange)=\"value.set('');\" /></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.dropdown-arrow{position:absolute;right:15px;font-size:11px;transition:transform .3s ease-in-out;cursor:pointer;-webkit-user-select:none;user-select:none}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media (max-width: 443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding", "class", "checked"], outputs: ["bindingChange", "changeCheck"] }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AutocompleteV2Component, isStandalone: true, selector: "app-autocomplete-v2", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, searchIdText: { classPropertyName: "searchIdText", publicName: "searchIdText", isSignal: true, isRequired: false, transformFunction: null }, disabled1: { classPropertyName: "disabled1", publicName: "disabled1", isSignal: true, isRequired: false, transformFunction: null }, disabled2: { classPropertyName: "disabled2", publicName: "disabled2", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, withCheckTodos: { classPropertyName: "withCheckTodos", publicName: "withCheckTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchIdText: "searchIdTextChange", disabled1: "disabled1Change", disabled2: "disabled2Change", changeInput: "changeInput", value: "valueChange", searchText: "searchTextChange", allDisabled: "allDisabledChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "autocompleteItems", predicate: ["autocompleteItem"], descendants: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n\r\n  <div class=\"autocomplete d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n        [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_value_' + label()}}\" name=\"{{'id_value_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [autocomplete]=\"false\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n        id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" role=\"combobox\" aria-autocomplete=\"list\"\r\n        aria-haspopup=\"listbox\" [attr.aria-expanded]=\"showDropdown()\" [attr.aria-controls]=\"listboxId()\"\r\n        [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? (listboxId() + '_opt_' + highlightedIndex()) : null\"\r\n        (input)=\"onSearchInput()\" (blur)=\"onBlur()\" (focus)=\"openDropdown()\" (keydown)=\"onKeyDown($event)\" />\r\n        <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n      <!-- @if (searchText().length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      } @else {\r\n      <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n      } -->\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"onBlur()\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\" [id]=\"listboxId()\" role=\"listbox\">\r\n          @for (item of filteredItems(); track $index) {\r\n          <li #autocompleteItem class=\"text-dark\" role=\"option\" [id]=\"listboxId() + '_opt_' + $index\"\r\n            [attr.aria-selected]=\"item[keyCodigo()] == value()\"\r\n            [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'selected-item': highlightedIndex() == $index}\"\r\n            (mousedown)=\"selectItem(item)\">\r\n            @if (joinInfo()) {\r\n            {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n            } @else{\r\n            {{ item[keyDescri()] }}\r\n            }\r\n            @if (item[keyCodigo()] == value()) {\r\n            <i class=\"ms-2 far fa-check fw-bold text-success cw-20\"></i>\r\n            }\r\n          </li>\r\n          } @empty {\r\n          <li class=\"text-muted no-results\">Sin resultados</li>\r\n          }\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    @if (withCheckTodos()) {\r\n    <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n        (bindingChange)=\"value.set('');\" /></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.no-results{cursor:default;text-align:center;opacity:60%}.no-results:hover{background:transparent}.dropdown-arrow{position:absolute;right:15px;font-size:11px;color:#6c757d;transition:transform .3s ease-in-out;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-arrow.rotate-up{transform:rotate(180deg)}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media (max-width: 443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:15px;background:transparent;border:none;font-size:1.3rem;font-weight:300;line-height:1;cursor:pointer;padding:0}.selected-item{background:#0041ce!important;color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding", "class", "checked"], outputs: ["bindingChange", "changeCheck"] }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'app-autocomplete-v2', imports: [NgClass, FormsModule, OverlayModule, CheckBoxComponent], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n\r\n  <div class=\"autocomplete d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n        [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled2()\" (input)=\"null\"\r\n        (blur)=\"showDropdown.set(false)\" (focus)=\"showDropdown.set(true)\" (keydown)=\"onKeyDown($event)\" />\r\n      @if (searchText().length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      }\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\">\r\n          @for (item of filteredItems(); track $index) {\r\n          <li #autocompleteItem class=\"text-dark\"\r\n            [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'bg-primary text-white': highlightedIndex() == $index}\"\r\n            (mousedown)=\"selectItem(item)\">\r\n            @if (joinInfo()) {\r\n            {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n            } @else{\r\n            {{ item[keyDescri()] }}\r\n            }\r\n            @if (item[keyCodigo()] == value()) {\r\n            <i class=\"far fa-check-circle fw-bold text-success cw-20\"></i>\r\n            }\r\n          </li>\r\n          }\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    @if (withCheckTodos()) {\r\n    <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n        (bindingChange)=\"value.set('');\" /></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.dropdown-arrow{position:absolute;right:15px;font-size:11px;transition:transform .3s ease-in-out;cursor:pointer;-webkit-user-select:none;user-select:none}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media (max-width: 443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}\n"] }]
+            args: [{ selector: 'app-autocomplete-v2', imports: [NgClass, FormsModule, OverlayModule, CheckBoxComponent], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n\r\n  <div class=\"autocomplete d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n        [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_value_' + label()}}\" name=\"{{'id_value_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [autocomplete]=\"false\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n        id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" role=\"combobox\" aria-autocomplete=\"list\"\r\n        aria-haspopup=\"listbox\" [attr.aria-expanded]=\"showDropdown()\" [attr.aria-controls]=\"listboxId()\"\r\n        [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? (listboxId() + '_opt_' + highlightedIndex()) : null\"\r\n        (input)=\"onSearchInput()\" (blur)=\"onBlur()\" (focus)=\"openDropdown()\" (keydown)=\"onKeyDown($event)\" />\r\n        <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n      <!-- @if (searchText().length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      } @else {\r\n      <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n      } -->\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"onBlur()\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\" [id]=\"listboxId()\" role=\"listbox\">\r\n          @for (item of filteredItems(); track $index) {\r\n          <li #autocompleteItem class=\"text-dark\" role=\"option\" [id]=\"listboxId() + '_opt_' + $index\"\r\n            [attr.aria-selected]=\"item[keyCodigo()] == value()\"\r\n            [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'selected-item': highlightedIndex() == $index}\"\r\n            (mousedown)=\"selectItem(item)\">\r\n            @if (joinInfo()) {\r\n            {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n            } @else{\r\n            {{ item[keyDescri()] }}\r\n            }\r\n            @if (item[keyCodigo()] == value()) {\r\n            <i class=\"ms-2 far fa-check fw-bold text-success cw-20\"></i>\r\n            }\r\n          </li>\r\n          } @empty {\r\n          <li class=\"text-muted no-results\">Sin resultados</li>\r\n          }\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    @if (withCheckTodos()) {\r\n    <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n        (bindingChange)=\"value.set('');\" /></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.no-results{cursor:default;text-align:center;opacity:60%}.no-results:hover{background:transparent}.dropdown-arrow{position:absolute;right:15px;font-size:11px;color:#6c757d;transition:transform .3s ease-in-out;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-arrow.rotate-up{transform:rotate(180deg)}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media (max-width: 443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:15px;background:transparent;border:none;font-size:1.3rem;font-weight:300;line-height:1;cursor:pointer;padding:0}.selected-item{background:#0041ce!important;color:#fff!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { autocompleteItems: [{
                 type: ViewChildren,
                 args: ['autocompleteItem']
@@ -2226,7 +2270,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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], 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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], 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,
@@ -3439,7 +3483,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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], 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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableDetalleComponent, decorators: [{
             type: Component,
@@ -3633,26 +3677,9 @@ var TABLE_EVENTS;
     TABLE_EVENTS[TABLE_EVENTS["CHECK_ALL"] = 4] = "CHECK_ALL";
     TABLE_EVENTS[TABLE_EVENTS["CHECK_ROW"] = 5] = "CHECK_ROW";
     TABLE_EVENTS[TABLE_EVENTS["DRAG_DROP"] = 6] = "DRAG_DROP";
+    TABLE_EVENTS[TABLE_EVENTS["SAVE_COLUMN_CONFIG"] = 7] = "SAVE_COLUMN_CONFIG";
 })(TABLE_EVENTS || (TABLE_EVENTS = {}));
 
-/**
- * Tabla con virtual scroll nativo (sin librerías externas).
- * Solo renderiza las filas visibles + un buffer. Header y footer son sticky.
- *
- * @Input columns       - Array de columnas con la misma forma que table-simple
- * @Input rows          - Array completo de datos
- * @Input rowHeight     - Alto fijo de cada fila en px (default: 30)
- * @Input buffer        - Filas extra renderizadas fuera del viewport (default: 10)
- * @Input altoContainer - Alto fijo del contenedor en px (default: 400). Se ignora si se usa altoContenedor.
- * @Input altoContenedor - Offset desde el top del viewport en px. Activa height: clamp(minAlto, calc(100vh - offset), 100vh).
- * @Input minAlto       - Altura mínima en px cuando se usa altoContenedor (default: 200)
- * @Input footerRows    - Filas del footer (totales, resumen, etc.)
- * @Input identifier    - Campos que forman la clave para selectedRow
- * @Input withFiltro    - Muestra input de búsqueda local
- * @Input withDetails   - Muestra detalles expandibles por fila
- * @Input withCheckbox  - Muestra checkbox para selección de filas
- * @Input withTotal     - Muestra fila de totales en el footer
- */
 class TableUltimateComponent {
     // @ViewChild('scrollContainer') scrollContainer!: ElementRef<HTMLDivElement>;
     scrollContainer = viewChild('scrollContainer');
@@ -3664,7 +3691,7 @@ class TableUltimateComponent {
     rows = input([]);
     columns = input([]);
     footerRows = input([]);
-    rowHeight = input(30);
+    rowHeight = input(0);
     buffer = input(10);
     altoContainer = input(0);
     altoContenedor = input(400);
@@ -3737,23 +3764,26 @@ class TableUltimateComponent {
         });
     });
     // ── Virtual scroll ────────────────────────────────────────────────────────────
-    totalHeight = computed(() => this.rowFilter().length * this.rowHeight());
+    // Alto efectivo de fila: si no se pasa rowHeight (0), se resuelve por variante.
+    // DEBE coincidir con el height del td en el SCSS (42px modern / 30px standard) o el scroll se desalinea.
+    rowH = computed(() => this.rowHeight() || (this.variante() === 'modern' ? 40 : 30));
+    totalHeight = computed(() => this.rowFilter().length * this.rowH());
     startIndex = computed(() => {
-        const idx = Math.floor(this.scrollTop() / this.rowHeight()) - this.buffer();
+        const idx = Math.floor(this.scrollTop() / this.rowH()) - this.buffer();
         return Math.max(0, idx);
     });
     endIndex = computed(() => {
-        const visible = Math.ceil(this.containerHeight() / this.rowHeight());
+        const visible = Math.ceil(this.containerHeight() / this.rowH());
         const idx = this.startIndex() + visible + this.buffer() * 2;
         return Math.min(this.rowFilter().length - 1, idx);
     });
     visibleRows = computed(() => this.rowFilter().slice(this.startIndex(), this.endIndex() + 1));
     /** Espacio en blanco antes de las filas renderizadas */
-    paddingTop = computed(() => this.startIndex() * this.rowHeight());
+    paddingTop = computed(() => this.startIndex() * this.rowH());
     /** Espacio en blanco después de las filas renderizadas */
     paddingBottom = computed(() => {
         const remaining = this.rowFilter().length - this.endIndex() - 1;
-        return Math.max(0, remaining * this.rowHeight());
+        return Math.max(0, remaining * this.rowH());
     });
     // ── Scroll hacia fila seleccionada al cargar datos ───────────────────────────
     scrollEffect = effect(() => {
@@ -3870,10 +3900,10 @@ class TableUltimateComponent {
             : rows.findIndex(r => this.concatenarValue(r, this.identifier()) === selected);
         if (idx < 0 || !this.scrollContainer()?.nativeElement)
             return;
-        const targetTop = idx * this.rowHeight();
+        const targetTop = idx * this.rowH();
         const container = this.scrollContainer().nativeElement;
         const containerH = this.containerHeight();
-        if (targetTop < container.scrollTop || targetTop + this.rowHeight() > container.scrollTop + containerH) {
+        if (targetTop < container.scrollTop || targetTop + this.rowH() > container.scrollTop + containerH) {
             container.scrollTop = targetTop - containerH / 2;
         }
     }
@@ -3899,16 +3929,74 @@ class TableUltimateComponent {
             filtros[key] = checked;
         });
     }
-    /** MOSTRAR COLUMNAS DE LA TABLA */
-    visibilidadColumn = computed(() => {
-        const columnVisibility = {};
-        this.columns().forEach(col => {
-            if (col.fieldname) {
-                columnVisibility[col.fieldname] = true;
-            }
+    /** MOSTRAR/ORDENAR COLUMNAS DE LA TABLA (engranaje del header) */
+    /** orden y visibilidad elegidos por el usuario, por fieldname — sembrado siempre desde columns() */
+    columnState = signal(new Map());
+    /** Reconstruye el estado cada vez que cambia columns() (columns() es la única fuente de verdad) */
+    columnStateEffect = effect(() => {
+        const cols = this.columns();
+        untracked(() => this.columnState.set(this.buildColumnState(cols)));
+    });
+    buildColumnState(cols) {
+        const map = new Map();
+        cols.forEach((col, i) => {
+            map.set(col.fieldname, {
+                visible: this.validaVisibilidad(col.visible),
+                order: col.order ?? i
+            });
         });
-        return columnVisibility;
+        return map;
+    }
+    /** Columnas configurables (con caption y permitidas por diseño), en el orden elegido por el usuario */
+    columnasConfigurables = computed(() => {
+        const state = this.columnState();
+        return this.columns()
+            .filter(col => col.caption && this.validaVisibilidad(col.visible))
+            .slice()
+            .sort((a, b) => (state.get(a.fieldname)?.order ?? 0) - (state.get(b.fieldname)?.order ?? 0));
     });
+    /** Columnas que realmente se pintan: configurables y marcadas como visibles */
+    columnasRenderizadas = computed(() => {
+        const state = this.columnState();
+        return this.columnasConfigurables().filter(col => state.get(col.fieldname)?.visible !== false);
+    });
+    isColumnVisible(fieldname) {
+        return this.columnState().get(fieldname)?.visible !== false;
+    }
+    toggleColumnVisible(fieldname, event) {
+        const checked = event.target.checked;
+        this.columnState.update(map => {
+            const next = new Map(map);
+            const prev = next.get(fieldname);
+            next.set(fieldname, { visible: checked, order: prev?.order ?? 0 });
+            return next;
+        });
+    }
+    onColumnDrop(event) {
+        const list = [...this.columnasConfigurables()];
+        moveItemInArray(list, event.previousIndex, event.currentIndex);
+        this.columnState.update(map => {
+            const next = new Map(map);
+            list.forEach((col, i) => {
+                const prev = next.get(col.fieldname);
+                next.set(col.fieldname, { visible: prev?.visible ?? true, order: i });
+            });
+            return next;
+        });
+    }
+    guardarConfiguracionColumnas() {
+        const state = this.columnState();
+        const config = this.columnasConfigurables().map(col => ({
+            fieldname: col.fieldname,
+            visible: state.get(col.fieldname)?.visible !== false,
+            order: state.get(col.fieldname)?.order ?? 0
+        }));
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.SAVE_COLUMN_CONFIG, data: config });
+    }
+    /** Descarta los cambios sin guardar (drags/toggles) y vuelve al orden/visibilidad de columns() */
+    restablecerConfiguracionColumnas() {
+        this.columnState.set(this.buildColumnState(this.columns()));
+    }
     validaVisibilidad(value) {
         return validarBoolean(value);
     }
@@ -3948,7 +4036,7 @@ class TableUltimateComponent {
         return formatDecimal(final);
     }
     getColspanBeforeTotals() {
-        const columns = this.columns();
+        const columns = this.columnasRenderizadas();
         const firstTotalizableIndex = columns.findIndex(c => c.totalizable);
         const result = firstTotalizableIndex >= 0 ? firstTotalizableIndex : columns.length;
         const addColumns = (this.withDetails() ? 1 : 0) + (this.withCheckbox() ? 1 : 0) + (this.customActions() ? 1 : 0);
@@ -4039,14 +4127,15 @@ class TableUltimateComponent {
             this.rowEvent.emit({ usecase: TABLE_EVENTS.DRAG_DROP, data: { file, row } });
         }
     }
+    getRows = () => this.rowFormat().map(({ idListTsi, format, ...rest }) => rest);
     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 }, withAttachment: { classPropertyName: "withAttachment", publicName: "withAttachment", isSignal: true, isRequired: false, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", 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)" }, properties: { "class.ll-variant--modern": "variante() === \"modern\"" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }, { propertyName: "columnDefs", predicate: TsiColumnDefDirective, isSignal: true }, { propertyName: "contentFilter", first: true, predicate: ["header"], 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\r\n    <div class=\"ll-search-bar__left\">\r\n        <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"ll-search-bar__right\">\r\n\r\n        <div class=\"ll-search-group\">\r\n\r\n            <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\r\n            <div class=\"ll-search-input-wrap\">\r\n\r\n                <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\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\"\r\n                                    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\"\r\n                                    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        </div>\r\n\r\n\r\n    </div>\r\n\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\"\r\n        [style.height]=\"withHeight() ? heightStyle() : ''\"\r\n        [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.px]=\"col.width || null\"\r\n                        [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\r\n                        class=\"ll-th-sortable\" (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)\"\r\n                    [class.ll-row--drag-over]=\"withAttachment() && dragOverRowId() === idList\"\r\n                    (click)=\"selectRow(row, idList)\" (dblclick)=\"onDoubleClick(row)\"\r\n                    (contextmenu)=\"onRightClick($event,row)\"\r\n                    (dragover)=\"withAttachment() && onDragOver($event, idList)\"\r\n                    (dragleave)=\"withAttachment() && onDragLeave()\" (drop)=\"withAttachment() && onDrop($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 (columnDefMap().has(col.fieldname)) {\r\n                    <td>\r\n                        <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\r\n                        </ng-container>\r\n                    </td>\r\n                    } @else 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'\"\r\n                        [attr.title]=\"row[col.fieldname] || null\"\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: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border-radius:10px!important;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background-color:#fff;color:#1e293b!important;border:none;border-right:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.1);padding:12px 14px;letter-spacing:.06em;font-size:10px!important;font-weight:600;box-shadow:none}:host(.ll-variant--modern) .ll-thead tr th:first-child{border-top-left-radius:10px}:host(.ll-variant--modern) .ll-thead tr th:last-child{border-top-right-radius:10px;border-right:none}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#f3f4f6!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .ll-row{transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd),:host(.ll-variant--modern) .ll-row:nth-child(2n){background-color:#fff}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){background-color:#eef2f7!important}:host(.ll-variant--modern) .ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{background-color:#5b8dee14!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.06);padding:5px 14px;line-height:20px}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.ll-search-bar__left{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}.ll-search-bar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.ll-search-bar__right .ll-search-group{display:flex;align-items:center;gap:4px}.ll-search-bar__right .ll-search-group .ll-search-label{white-space:nowrap}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{display:flex;align-items:center}@media (max-width: 576px){.ll-search-bar__right{width:100%;justify-content:space-between}.ll-search-bar__right .ll-search-group{flex-direction:column;align-items:flex-start;width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap input{flex:1}}.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--drag-over{background-color:#5b8dee1f!important;outline:2px dashed #5b8dee;outline-offset:-2px;cursor:copy}.ll-row--drag-over td{color:#5b8dee!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] });
+    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 }, withAttachment: { classPropertyName: "withAttachment", publicName: "withAttachment", isSignal: true, isRequired: false, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", 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)" }, properties: { "class.ll-variant--modern": "variante() === \"modern\"" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }, { propertyName: "columnDefs", predicate: TsiColumnDefDirective, isSignal: true }, { propertyName: "contentFilter", first: true, predicate: ["header"], 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\r\n    <div class=\"ll-search-bar__left\">\r\n        <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"ll-search-bar__right\">\r\n\r\n        <div class=\"ll-search-group\">\r\n\r\n            <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\r\n            <div class=\"ll-search-input-wrap\">\r\n\r\n                <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\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\"\r\n                                    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\"\r\n                                    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        </div>\r\n\r\n\r\n    </div>\r\n\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\"\r\n        [style.height]=\"withHeight() ? heightStyle() : ''\"\r\n        [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 icon-table\">\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 d-flex align-items-baseline justify-content-between\">\r\n                                        <span>Columnas</span>\r\n                                        <span class=\"column-config-hint\">arrastra para ordenar</span>\r\n                                    </div>\r\n\r\n                                    <div cdkDropList class=\"column-config-list\" (cdkDropListDropped)=\"onColumnDrop($event)\">\r\n                                        @for (col of columnasConfigurables(); track col.fieldname) {\r\n                                        <div class=\"column-config-row\" cdkDrag>\r\n                                            <i class=\"fas fa-grip-vertical column-config-grip\" cdkDragHandle></i>\r\n                                            <div class=\"form-check form-switch text-start d-flex align-items-center mb-0 flex-grow-1\">\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                                                    [checked]=\"isColumnVisible(col.fieldname)\"\r\n                                                    (change)=\"toggleColumnVisible(col.fieldname, $event)\" />\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                                        </div>\r\n                                        }\r\n                                    </div>\r\n\r\n                                    <div class=\"column-config-footer\">\r\n                                        <!-- <button type=\"button\" class=\"btn btn-link btn-sm p-0 text-secondary fs-7\"\r\n                                            (click)=\"restablecerConfiguracionColumnas()\">\r\n                                            Restablecer\r\n                                        </button> -->\r\n                                        <button type=\"button\" class=\"btn btn-sm fs-7 column-config-save\"\r\n                                            (click)=\"guardarConfiguracionColumnas()\">\r\n                                            Guardar configuraci\u00F3n\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-template>\r\n                        </app-dropdown-cdk>\r\n                    </th>\r\n                    }\r\n\r\n                    @for (col of columnasRenderizadas(); track col.fieldname) {\r\n                    <th [title]=\"col.caption\" [style.width.px]=\"col.width || null\"\r\n                        [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\r\n                        class=\"ll-th-sortable\" (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                </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]=\"columnasRenderizadas().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)\"\r\n                    [class.ll-row--drag-over]=\"withAttachment() && dragOverRowId() === idList\"\r\n                    (click)=\"selectRow(row, idList)\" (dblclick)=\"onDoubleClick(row)\"\r\n                    (contextmenu)=\"onRightClick($event,row)\"\r\n                    (dragover)=\"withAttachment() && onDragOver($event, idList)\"\r\n                    (dragleave)=\"withAttachment() && onDragLeave()\" (drop)=\"withAttachment() && onDrop($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 columnasRenderizadas(); track col.fieldname) {\r\n                    @if (columnDefMap().has(col.fieldname)) {\r\n                    <td>\r\n                        <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\r\n                        </ng-container>\r\n                    </td>\r\n                    } @else 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'\"\r\n                        [attr.title]=\"row[col.fieldname] || null\"\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                </tr>\r\n\r\n                @if (idList == expandedRows()) {\r\n                <tr @fadeInOut>\r\n                    <td [attr.colspan]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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 columnasRenderizadas() ; track col.fieldname) {\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: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);padding:12px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .icon-table{color:#5e5959!important;font-size:12px!important}:host(.ll-variant--modern) .ll-row{transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd){background-color:#fff}:host(.ll-variant--modern) .ll-row:nth-child(2n){background-color:#f0f0f0}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){background-color:#ebebeb!important}:host(.ll-variant--modern) .ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{background-color:#5b8dee14!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.1);height:40px}:host(.ll-variant--modern) .ll-row td:hover{background-color:#292a2c09!important;border-bottom:1px solid rgb(133,133,133)}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.ll-search-bar__left{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}.ll-search-bar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.ll-search-bar__right .ll-search-group{display:flex;align-items:center;gap:4px}.ll-search-bar__right .ll-search-group .ll-search-label{white-space:nowrap}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{display:flex;align-items:center}@media (max-width: 576px){.ll-search-bar__right{width:100%;justify-content:space-between}.ll-search-bar__right .ll-search-group{flex-direction:column;align-items:flex-start;width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap input{flex:1}}.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--drag-over{background-color:#5b8dee1f!important;outline:2px dashed #5b8dee;outline-offset:-2px;cursor:copy}.ll-row--drag-over td{color:#5b8dee!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;right:auto;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:min(500px,80vh);width:min(400px,100vw - 2rem);max-width:calc(80vw - 2rem);overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.6rem .75rem;border-bottom:1px solid #c4c4c4;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}.column-config-hint{font-size:10px;font-weight:400;text-transform:none;color:#9aa3ac}.column-config-list{display:flex;flex-direction:column;gap:3px;padding:4px 0 2px}.column-config-row{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#fff;border:1px solid transparent;border-radius:6px;transition:background-color .15s ease,border-color .15s ease}.column-config-row:hover{background:#f6f7f8}.column-config-grip{cursor:grab;color:#adb5bd;font-size:13px;flex:none}.column-config-grip:active{cursor:grabbing}.column-config-row.cdk-drag-preview{box-shadow:0 10px 24px -8px #00000059;border:1px solid #e5e5e5;border-radius:6px;background:#fff;transform:rotate(-1.5deg)}.column-config-row.cdk-drag-placeholder{border:1.5px dashed #6c757d;border-radius:6px;background:#f1f3f5;opacity:.7}.column-config-row.cdk-drag-placeholder *{visibility:hidden}.column-config-list.cdk-drop-list-dragging .column-config-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.column-config-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;bottom:0;background:#fff;border-top:1px solid #e5e5e5;margin:6px -.75rem 0;padding:8px .75rem}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.column-config-save{border-radius:6px;border:1px solid rgba(0,0,0,.12);background-color:#fff;color:#272727;padding:4px 12px;box-shadow:0 1px 2px #0000000f;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.column-config-save:hover{background-color:#334155;border-color:#0003;color:#fff;box-shadow:0 2px 6px #00000026}.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"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], 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, NgTemplateOutlet, TsiColumnDefDirective], animations: [fadeInOut, dropdownAnimation], host: {
+            args: [{ selector: 'app-table-ultimate', imports: [FormsModule, CommonModule, DropdownCdkComponent, AnimatedCheckboxDirective, CardMobileComponent, NgTemplateOutlet, CdkDropList, CdkDrag, CdkDragHandle], animations: [fadeInOut, dropdownAnimation], host: {
                         '[class.ll-variant--modern]': 'variante() === "modern"'
-                    }, template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n\r\n    <div class=\"ll-search-bar__left\">\r\n        <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"ll-search-bar__right\">\r\n\r\n        <div class=\"ll-search-group\">\r\n\r\n            <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\r\n            <div class=\"ll-search-input-wrap\">\r\n\r\n                <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\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\"\r\n                                    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\"\r\n                                    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        </div>\r\n\r\n\r\n    </div>\r\n\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\"\r\n        [style.height]=\"withHeight() ? heightStyle() : ''\"\r\n        [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.px]=\"col.width || null\"\r\n                        [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\r\n                        class=\"ll-th-sortable\" (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)\"\r\n                    [class.ll-row--drag-over]=\"withAttachment() && dragOverRowId() === idList\"\r\n                    (click)=\"selectRow(row, idList)\" (dblclick)=\"onDoubleClick(row)\"\r\n                    (contextmenu)=\"onRightClick($event,row)\"\r\n                    (dragover)=\"withAttachment() && onDragOver($event, idList)\"\r\n                    (dragleave)=\"withAttachment() && onDragLeave()\" (drop)=\"withAttachment() && onDrop($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 (columnDefMap().has(col.fieldname)) {\r\n                    <td>\r\n                        <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\r\n                        </ng-container>\r\n                    </td>\r\n                    } @else 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'\"\r\n                        [attr.title]=\"row[col.fieldname] || null\"\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: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border-radius:10px!important;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background-color:#fff;color:#1e293b!important;border:none;border-right:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.1);padding:12px 14px;letter-spacing:.06em;font-size:10px!important;font-weight:600;box-shadow:none}:host(.ll-variant--modern) .ll-thead tr th:first-child{border-top-left-radius:10px}:host(.ll-variant--modern) .ll-thead tr th:last-child{border-top-right-radius:10px;border-right:none}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#f3f4f6!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .ll-row{transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd),:host(.ll-variant--modern) .ll-row:nth-child(2n){background-color:#fff}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){background-color:#eef2f7!important}:host(.ll-variant--modern) .ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{background-color:#5b8dee14!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.06);padding:5px 14px;line-height:20px}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.ll-search-bar__left{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}.ll-search-bar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.ll-search-bar__right .ll-search-group{display:flex;align-items:center;gap:4px}.ll-search-bar__right .ll-search-group .ll-search-label{white-space:nowrap}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{display:flex;align-items:center}@media (max-width: 576px){.ll-search-bar__right{width:100%;justify-content:space-between}.ll-search-bar__right .ll-search-group{flex-direction:column;align-items:flex-start;width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap input{flex:1}}.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--drag-over{background-color:#5b8dee1f!important;outline:2px dashed #5b8dee;outline-offset:-2px;cursor:copy}.ll-row--drag-over td{color:#5b8dee!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"] }]
+                    }, template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n\r\n    <div class=\"ll-search-bar__left\">\r\n        <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"ll-search-bar__right\">\r\n\r\n        <div class=\"ll-search-group\">\r\n\r\n            <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\r\n            <div class=\"ll-search-input-wrap\">\r\n\r\n                <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\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\"\r\n                                    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\"\r\n                                    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        </div>\r\n\r\n\r\n    </div>\r\n\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\"\r\n        [style.height]=\"withHeight() ? heightStyle() : ''\"\r\n        [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 icon-table\">\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 d-flex align-items-baseline justify-content-between\">\r\n                                        <span>Columnas</span>\r\n                                        <span class=\"column-config-hint\">arrastra para ordenar</span>\r\n                                    </div>\r\n\r\n                                    <div cdkDropList class=\"column-config-list\" (cdkDropListDropped)=\"onColumnDrop($event)\">\r\n                                        @for (col of columnasConfigurables(); track col.fieldname) {\r\n                                        <div class=\"column-config-row\" cdkDrag>\r\n                                            <i class=\"fas fa-grip-vertical column-config-grip\" cdkDragHandle></i>\r\n                                            <div class=\"form-check form-switch text-start d-flex align-items-center mb-0 flex-grow-1\">\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                                                    [checked]=\"isColumnVisible(col.fieldname)\"\r\n                                                    (change)=\"toggleColumnVisible(col.fieldname, $event)\" />\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                                        </div>\r\n                                        }\r\n                                    </div>\r\n\r\n                                    <div class=\"column-config-footer\">\r\n                                        <!-- <button type=\"button\" class=\"btn btn-link btn-sm p-0 text-secondary fs-7\"\r\n                                            (click)=\"restablecerConfiguracionColumnas()\">\r\n                                            Restablecer\r\n                                        </button> -->\r\n                                        <button type=\"button\" class=\"btn btn-sm fs-7 column-config-save\"\r\n                                            (click)=\"guardarConfiguracionColumnas()\">\r\n                                            Guardar configuraci\u00F3n\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-template>\r\n                        </app-dropdown-cdk>\r\n                    </th>\r\n                    }\r\n\r\n                    @for (col of columnasRenderizadas(); track col.fieldname) {\r\n                    <th [title]=\"col.caption\" [style.width.px]=\"col.width || null\"\r\n                        [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\r\n                        class=\"ll-th-sortable\" (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                </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]=\"columnasRenderizadas().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)\"\r\n                    [class.ll-row--drag-over]=\"withAttachment() && dragOverRowId() === idList\"\r\n                    (click)=\"selectRow(row, idList)\" (dblclick)=\"onDoubleClick(row)\"\r\n                    (contextmenu)=\"onRightClick($event,row)\"\r\n                    (dragover)=\"withAttachment() && onDragOver($event, idList)\"\r\n                    (dragleave)=\"withAttachment() && onDragLeave()\" (drop)=\"withAttachment() && onDrop($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 columnasRenderizadas(); track col.fieldname) {\r\n                    @if (columnDefMap().has(col.fieldname)) {\r\n                    <td>\r\n                        <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\r\n                        </ng-container>\r\n                    </td>\r\n                    } @else 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'\"\r\n                        [attr.title]=\"row[col.fieldname] || null\"\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                </tr>\r\n\r\n                @if (idList == expandedRows()) {\r\n                <tr @fadeInOut>\r\n                    <td [attr.colspan]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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 columnasRenderizadas() ; track col.fieldname) {\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: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);padding:12px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .icon-table{color:#5e5959!important;font-size:12px!important}:host(.ll-variant--modern) .ll-row{transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd){background-color:#fff}:host(.ll-variant--modern) .ll-row:nth-child(2n){background-color:#f0f0f0}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){background-color:#ebebeb!important}:host(.ll-variant--modern) .ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{background-color:#5b8dee14!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.1);height:40px}:host(.ll-variant--modern) .ll-row td:hover{background-color:#292a2c09!important;border-bottom:1px solid rgb(133,133,133)}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.ll-search-bar__left{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}.ll-search-bar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.ll-search-bar__right .ll-search-group{display:flex;align-items:center;gap:4px}.ll-search-bar__right .ll-search-group .ll-search-label{white-space:nowrap}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{display:flex;align-items:center}@media (max-width: 576px){.ll-search-bar__right{width:100%;justify-content:space-between}.ll-search-bar__right .ll-search-group{flex-direction:column;align-items:flex-start;width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap input{flex:1}}.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--drag-over{background-color:#5b8dee1f!important;outline:2px dashed #5b8dee;outline-offset:-2px;cursor:copy}.ll-row--drag-over td{color:#5b8dee!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;right:auto;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:min(500px,80vh);width:min(400px,100vw - 2rem);max-width:calc(80vw - 2rem);overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.6rem .75rem;border-bottom:1px solid #c4c4c4;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}.column-config-hint{font-size:10px;font-weight:400;text-transform:none;color:#9aa3ac}.column-config-list{display:flex;flex-direction:column;gap:3px;padding:4px 0 2px}.column-config-row{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#fff;border:1px solid transparent;border-radius:6px;transition:background-color .15s ease,border-color .15s ease}.column-config-row:hover{background:#f6f7f8}.column-config-grip{cursor:grab;color:#adb5bd;font-size:13px;flex:none}.column-config-grip:active{cursor:grabbing}.column-config-row.cdk-drag-preview{box-shadow:0 10px 24px -8px #00000059;border:1px solid #e5e5e5;border-radius:6px;background:#fff;transform:rotate(-1.5deg)}.column-config-row.cdk-drag-placeholder{border:1.5px dashed #6c757d;border-radius:6px;background:#f1f3f5;opacity:.7}.column-config-row.cdk-drag-placeholder *{visibility:hidden}.column-config-list.cdk-drop-list-dragging .column-config-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.column-config-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;bottom:0;background:#fff;border-top:1px solid #e5e5e5;margin:6px -.75rem 0;padding:8px .75rem}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.column-config-save{border-radius:6px;border:1px solid rgba(0,0,0,.12);background-color:#fff;color:#272727;padding:4px 12px;box-shadow:0 1px 2px #0000000f;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.column-config-save:hover{background-color:#334155;border-color:#0003;color:#fff;box-shadow:0 2px 6px #00000026}.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']]
@@ -4474,7 +4563,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 }, showCancelar: { classPropertyName: "showCancelar", publicName: "showCancelar", 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=\"md-inner\">\r\n    <div class=\"modal-header py-2\">\r\n        <div class=\"w-100\">\r\n            <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\"\r\n                [showAlerta]=\"showAlerta()\" [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\"\r\n                [hasData]=\"dataFiltro()\" [(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()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if (type() == '2') {\r\n        <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if (type() == '3') {\r\n        <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if( type() == '4'){\r\n        <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if( type() == '6'){\r\n        <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if(showCancelar()){\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    }\r\n</div>", styles: [".md-inner{display:grid;grid-template-rows:auto 1fr auto;height:fit-content;max-height:calc(100dvh - var(--bs-modal-margin) * 2 - 2px);overflow:hidden}.max-height{overflow-y:auto;min-height:0}.modal-body{overflow-x:auto!important}\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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], 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 }, showCancelar: { classPropertyName: "showCancelar", publicName: "showCancelar", 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=\"md-inner\">\r\n    <div class=\"modal-header py-2\">\r\n        <div class=\"w-100\">\r\n            <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\"\r\n                [showAlerta]=\"showAlerta()\" [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\"\r\n                [hasData]=\"dataFiltro()\" [(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()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if (type() == '2') {\r\n        <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if (type() == '3') {\r\n        <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if( type() == '4'){\r\n        <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if( type() == '6'){\r\n        <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\"\r\n            [disabled]=\"acceptDisabled()\" />\r\n        }\r\n        @if(showCancelar()){\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    }\r\n</div>", styles: [".md-inner{display:grid;grid-template-rows:auto 1fr auto;height:fit-content;max-height:calc(100dvh - var(--bs-modal-margin) * 2 - 2px);overflow:hidden}.max-height{overflow-y:auto;min-height:0}.modal-body{overflow-x:auto!important}\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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, decorators: [{
             type: Component,