ng-components-tsi 0.0.6 → 0.0.8

package/fesm2022/ng-components-tsi.mjs

@@ -1,12 +1,12 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgTemplateOutlet, DecimalPipe, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, HostListener, Directive, inject, ViewChild, Component, signal, computed, Injectable, ChangeDetectionStrategy, contentChild, ContentChild, effect, model, ViewChildren, viewChild, ElementRef, linkedSignal, untracked, Renderer2, TemplateRef, contentChildren } from '@angular/core';
+import { input, output, HostListener, Directive, inject, viewChild, effect, ViewChild, Component, signal, computed, Injectable, ChangeDetectionStrategy, contentChild, ContentChild, model, ViewChildren, ElementRef, linkedSignal, untracked, Renderer2, TemplateRef, contentChildren } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { FormsModule, NgModel } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbTooltipModule, NgbActiveModal, NgbDropdownModule, NgbNavModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule, NgbActiveModal, NgbDropdownModule, NgbDropdown, NgbNavModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -15,6 +15,7 @@ import { beep, getFirstItem, cleanNumber, obtenerTipoClases, validaArray, valida
 import { SelectionModel } from '@angular/cdk/collections';
 import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { SesionService } from 'core-tsi';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import Swal from 'sweetalert2';
 
@@ -47,6 +48,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 const COLOR_CLASSES = {
     azul: 'btn-info',
     rojo: 'btn-danger',
+    rojo_alerta: 'btn-danger-alert',
     verde: 'btn-success',
     negro: 'btn-dark',
     amarillo: 'btn-warning',
@@ -109,6 +111,8 @@ const ICON_CLASSES = {
 class ButtonComponent {
     sanitizer = inject(DomSanitizer);
     fileInput;
+    buttonNormal = viewChild('boton');
+    autoFocus = input(false);
     color = input(undefined);
     outline = input(undefined);
     icon = input(undefined);
@@ -129,6 +133,13 @@ class ButtonComponent {
     fileSelected = output();
     isRounded = input(false);
     isNotStyle = input(false);
+    constructor() {
+        effect(() => {
+            if (this.buttonNormal() && this.autoFocus()) {
+                this.buttonNormal().nativeElement.focus();
+            }
+        });
+    }
     getSafeHtml() {
         return this.sanitizer.bypassSecurityTrustHtml(this.texto());
     }
@@ -178,12 +189,12 @@ class ButtonComponent {
         return this.atajo() ? `${this.texto()}: Alt + ${this.atajo()}` : "";
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, texto: { classPropertyName: "texto", publicName: "texto", isSignal: true, isRequired: false, transformFunction: null }, isHtml: { classPropertyName: "isHtml", publicName: "isHtml", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, sunatButton: { classPropertyName: "sunatButton", publicName: "sunatButton", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null }, buttonDeshabilitado: { classPropertyName: "buttonDeshabilitado", publicName: "buttonDeshabilitado", isSignal: true, isRequired: false, transformFunction: null }, atajo: { classPropertyName: "atajo", publicName: "atajo", isSignal: true, isRequired: false, transformFunction: null }, dropdownButton: { classPropertyName: "dropdownButton", publicName: "dropdownButton", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, uploadButton: { classPropertyName: "uploadButton", publicName: "uploadButton", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, isNotStyle: { classPropertyName: "isNotStyle", publicName: "isNotStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accion: "accion", fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ??\r\n    'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span>{{ texto() }}</span>\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: AtajosDirective, selector: "[atajoTecla]", inputs: ["altKeyCombination"], outputs: ["emitirAtajo"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, texto: { classPropertyName: "texto", publicName: "texto", isSignal: true, isRequired: false, transformFunction: null }, isHtml: { classPropertyName: "isHtml", publicName: "isHtml", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, sunatButton: { classPropertyName: "sunatButton", publicName: "sunatButton", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null }, buttonDeshabilitado: { classPropertyName: "buttonDeshabilitado", publicName: "buttonDeshabilitado", isSignal: true, isRequired: false, transformFunction: null }, atajo: { classPropertyName: "atajo", publicName: "atajo", isSignal: true, isRequired: false, transformFunction: null }, dropdownButton: { classPropertyName: "dropdownButton", publicName: "dropdownButton", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, uploadButton: { classPropertyName: "uploadButton", publicName: "uploadButton", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, isNotStyle: { classPropertyName: "isNotStyle", publicName: "isNotStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accion: "accion", fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "buttonNormal", first: true, predicate: ["boton"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ??\r\n    'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span>{{ texto() }}</span>\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: AtajosDirective, selector: "[atajoTecla]", inputs: ["altKeyCombination"], outputs: ["emitirAtajo"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', imports: [CommonModule, NgbTooltipModule, AtajosDirective], template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ??\r\n    'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span>{{ texto() }}</span>\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"] }]
-        }], propDecorators: { fileInput: [{
+            args: [{ selector: 'app-button', imports: [CommonModule, NgbTooltipModule, AtajosDirective], template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ??\r\n    'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    <span>{{ texto() }}</span>\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
             }] } });
@@ -310,11 +321,11 @@ class AlertConfirmationComponent {
         this.activeModal.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertConfirmationComponent, isStandalone: true, selector: "app-alert-confirmation", ngImport: i0, template: "<div class=\"p-4\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n    @if(select()){\r\n    <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n        <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n        <select class=\"form-select text-center\" [value]=\"selectedOption()\"\r\n            (change)=\"selectedOption.set($any($event.target).value)\">\r\n            @for(opt of opciones(); track $index){\r\n            <option [value]=\"opt\">{{ opt }}</option>\r\n            }\r\n        </select>\r\n    </div>\r\n    }\r\n\r\n    @if(showTextarea() && mostrarTextareaComputed()){\r\n    <textarea class=\"form-control mt-3 fs-6 ch-100\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\r\n        (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\r\n    </textarea>\r\n    <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\r\n        Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\r\n    </div>\r\n    }\r\n\r\n    <div class=\"d-flex justify-content-center gap-2 mt-3\">\r\n        @if(mostrarConfirmar()){\r\n        <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarExtra()){\r\n        <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarCancelar()){\r\n        <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" />\r\n        }\r\n    </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.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: ["color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertConfirmationComponent, isStandalone: true, selector: "app-alert-confirmation", ngImport: i0, template: "<div class=\"p-4\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n    @if(select()){\r\n    <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n        <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n        <select class=\"form-select text-center\" [value]=\"selectedOption()\"\r\n            (change)=\"selectedOption.set($any($event.target).value)\">\r\n            @for(opt of opciones(); track $index){\r\n            <option [value]=\"opt\">{{ opt }}</option>\r\n            }\r\n        </select>\r\n    </div>\r\n    }\r\n\r\n    @if(showTextarea() && mostrarTextareaComputed()){\r\n    <textarea class=\"form-control mt-3 fs-6 ch-100\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\r\n        (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\r\n    </textarea>\r\n    <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\r\n        Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\r\n    </div>\r\n    }\r\n\r\n    <div class=\"d-flex justify-content-center gap-2 mt-3\">\r\n        @if(mostrarConfirmar()){\r\n        <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"true\" />\r\n        }\r\n        @if(mostrarExtra()){\r\n        <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarCancelar()){\r\n        <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" />\r\n        }\r\n    </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-alert-confirmation', imports: [CommonModule, FormsModule, ButtonComponent], template: "<div class=\"p-4\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n    @if(select()){\r\n    <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n        <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n        <select class=\"form-select text-center\" [value]=\"selectedOption()\"\r\n            (change)=\"selectedOption.set($any($event.target).value)\">\r\n            @for(opt of opciones(); track $index){\r\n            <option [value]=\"opt\">{{ opt }}</option>\r\n            }\r\n        </select>\r\n    </div>\r\n    }\r\n\r\n    @if(showTextarea() && mostrarTextareaComputed()){\r\n    <textarea class=\"form-control mt-3 fs-6 ch-100\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\r\n        (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\r\n    </textarea>\r\n    <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\r\n        Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\r\n    </div>\r\n    }\r\n\r\n    <div class=\"d-flex justify-content-center gap-2 mt-3\">\r\n        @if(mostrarConfirmar()){\r\n        <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarExtra()){\r\n        <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarCancelar()){\r\n        <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" />\r\n        }\r\n    </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"] }]
+            args: [{ selector: 'app-alert-confirmation', imports: [CommonModule, FormsModule, ButtonComponent], template: "<div class=\"p-4\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n    @if(select()){\r\n    <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n        <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n        <select class=\"form-select text-center\" [value]=\"selectedOption()\"\r\n            (change)=\"selectedOption.set($any($event.target).value)\">\r\n            @for(opt of opciones(); track $index){\r\n            <option [value]=\"opt\">{{ opt }}</option>\r\n            }\r\n        </select>\r\n    </div>\r\n    }\r\n\r\n    @if(showTextarea() && mostrarTextareaComputed()){\r\n    <textarea class=\"form-control mt-3 fs-6 ch-100\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\r\n        (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\r\n    </textarea>\r\n    <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\r\n        Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\r\n    </div>\r\n    }\r\n\r\n    <div class=\"d-flex justify-content-center gap-2 mt-3\">\r\n        @if(mostrarConfirmar()){\r\n        <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"true\" />\r\n        }\r\n        @if(mostrarExtra()){\r\n        <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarCancelar()){\r\n        <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" />\r\n        }\r\n    </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"] }]
         }] });
 
 class AlertaComponent {
@@ -328,6 +339,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ selector: 'app-alerta', imports: [NgClass], template: "<div class=\"d-flex bg-title align-items-center flex-md-row p-2\"\r\n    [ngClass]=\"{'flex-column': (titulo()?.length || 0) + (mensaje()?.length || 0) > 100}\">\r\n    <i class=\"fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0\"></i>\r\n    <div class=\"text-alerta text-center text-sm-start ms-1\">\r\n        @if(titulo()){\r\n        <strong>{{ titulo() }}</strong>\r\n        }\r\n        {{ mensaje() }}\r\n        <ng-content></ng-content> \r\n    </div>\r\n</div>", styles: [".bg-title{position:relative;background:#fff0d5;display:inline-flex;padding:5px;color:#000;font-weight:400;border-radius:8px;overflow:hidden}.bg-title:after{content:\"\";position:absolute;background:#f0ad86;top:0;left:0;animation:moveAround 4s linear infinite}@keyframes moveAround{0%{top:0;left:0;width:200px;height:2px}25%{top:0;left:calc(100% + -0px);width:2px;height:2px}50%{top:calc(100% - 2px);left:calc(100% - 2px);width:200px;height:50px}75%{top:calc(100% - 2px);left:0;width:2px;height:50px}to{top:0;left:0;width:2px;height:2px}}.text-alerta{font-size:14px;display:inline}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:25px;color:#855d16}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}\n"] }]
         }] });
 
+class AlertErrorComponent {
+    activeModal = inject(NgbActiveModal);
+    mensaje = signal('');
+    mensajeFormateado = computed(() => this.mensaje().replace(/\n/g, '<br>'));
+    onAceptar() {
+        this.activeModal.close(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AlertErrorComponent, isStandalone: true, selector: "app-alert-error", ngImport: i0, template: "<div class=\"pt-4 text-center modal-error\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-times-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-7 text-white fw-6\" [innerHTML]=\"mensajeFormateado()\"></div>\r\n\r\n    <div class=\"d-flex justify-content-center mt-4 button-error\">\r\n        <app-button texto=\"Aceptar\" color=\"rojo_alerta\" (accion)=\"onAceptar()\" [autoFocus]=\"true\" />\r\n    </div>\r\n</div>", styles: [".modal-error{background-color:#a6222f;border-radius:6px}.button-error{background-color:#fff;border-bottom-left-radius:6px;border-bottom-right-radius:6px;padding:10px}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-alert-error', imports: [CommonModule, ButtonComponent], template: "<div class=\"pt-4 text-center modal-error\">\r\n    <div class=\"d-flex justify-content-center mb-3\">\r\n        <i class=\"fas fa-times-circle color-icon\"></i>\r\n    </div>\r\n\r\n    <div class=\"fs-7 text-white fw-6\" [innerHTML]=\"mensajeFormateado()\"></div>\r\n\r\n    <div class=\"d-flex justify-content-center mt-4 button-error\">\r\n        <app-button texto=\"Aceptar\" color=\"rojo_alerta\" (accion)=\"onAceptar()\" [autoFocus]=\"true\" />\r\n    </div>\r\n</div>", styles: [".modal-error{background-color:#a6222f;border-radius:6px}.button-error{background-color:#fff;border-bottom-left-radius:6px;border-bottom-right-radius:6px;padding:10px}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#fff}\n"] }]
+        }] });
+
 class BadgeComponent {
     label = input('Exp');
     color = input('bg-warning');
@@ -479,47 +505,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             }] } });
 
 class HeaderComponent {
-    titulo = input('');
-    row = input(false);
+    title = input('');
     tamanio = input('7');
-    filtro = output();
-    filtroInicialAbierto = input(true);
-    filtroAbierto = signal(false);
     showFiltro = input(true);
+    withFiltro = model(true);
     hasData = input(false);
     isModal = input(false);
     cerrarModal = output();
     showAlerta = input(false);
     textAlerta = input('La consulta muestra los 100 primeros registros.');
-    constructor() {
-        effect(() => {
-            if (this.row() && this.filtroInicialAbierto()) {
-                this.filtroAbierto.set(true);
-            }
-            else {
-                this.filtroAbierto.set(false);
-            }
-        });
-    }
     toggleFiltro() {
-        if (this.row() && this.hasData()) {
-            this.filtroAbierto.update(value => !value);
-            this.ejecutarFiltro();
+        if (this.hasData()) {
+            this.withFiltro.update(value => !value);
         }
     }
-    ejecutarFiltro() {
-        this.filtro.emit();
-    }
     cerrar() {
         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: { titulo: { classPropertyName: "titulo", publicName: "titulo", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, tamanio: { classPropertyName: "tamanio", publicName: "tamanio", isSignal: true, isRequired: false, transformFunction: null }, filtroInicialAbierto: { classPropertyName: "filtroInicialAbierto", publicName: "filtroInicialAbierto", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", 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 } }, outputs: { filtro: "filtro", cerrarModal: "cerrarModal" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center position-relative flex-wrap\">\r\n    <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n        <h5 class=\"fw-bold pe-2\" [ngClass]=\"['fs-' + tamanio(),  isModal() ? 'pt-3' : 'pt-2']\">\r\n            {{ titulo() }}\r\n        </h5>\r\n        @if(showFiltro()){\r\n        <div [ngClass]=\"{'pt-2': isModal()}\">\r\n            <i class=\"fa-solid fa-filter px-2 me-1\" [class]=\"'fs-' + tamanio()\"\r\n                [ngClass]=\"{ 'disabled-icon': !row() }\"></i>\r\n\r\n            <i class=\"icon-arrow fa-solid fa-chevron-down\"\r\n                [ngClass]=\"{ 'rotate-up': filtroAbierto(), 'disabled-icon': !row()}\"></i>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-actions\">\r\n        @if (showAlerta()) {\r\n        <app-alerta [mensaje]=\"textAlerta()\" />\r\n        }\r\n        @if(isModal()){\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }, { kind: "component", type: AlertaComponent, selector: "app-alerta", inputs: ["titulo", "mensaje"] }] });
+    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 } }, outputs: { withFiltro: "withFiltroChange", cerrarModal: "cerrarModal" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center position-relative flex-wrap\">\r\n    <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n        <h5 class=\"fw-bold pe-2\" [ngClass]=\"['fs-' + tamanio(),  isModal() ? 'pt-3' : 'pt-2']\">\r\n            {{ title() }}\r\n        </h5>\r\n        @if(showFiltro()){\r\n        <div [ngClass]=\"{'pt-2': isModal()}\">\r\n            <i class=\"fa-solid fa-filter px-2 me-1\" [class]=\"'fs-' + tamanio()\"\r\n                [ngClass]=\"{ 'disabled-icon': !hasData() }\"></i>\r\n\r\n            <i class=\"icon-arrow fa-solid fa-chevron-down\"\r\n                [ngClass]=\"{ 'rotate-up': !withFiltro(), 'disabled-icon': !hasData()}\"></i>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-actions\">\r\n        @if (showAlerta()) {\r\n        <app-alerta [mensaje]=\"textAlerta()\" />\r\n        }\r\n        @if(isModal()){\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }, { kind: "component", type: AlertaComponent, selector: "app-alerta", inputs: ["titulo", "mensaje"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-header', imports: [CommonModule, ButtonComponent, AlertaComponent], template: "<div class=\"d-flex justify-content-between align-items-center position-relative flex-wrap\">\r\n    <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n        <h5 class=\"fw-bold pe-2\" [ngClass]=\"['fs-' + tamanio(),  isModal() ? 'pt-3' : 'pt-2']\">\r\n            {{ titulo() }}\r\n        </h5>\r\n        @if(showFiltro()){\r\n        <div [ngClass]=\"{'pt-2': isModal()}\">\r\n            <i class=\"fa-solid fa-filter px-2 me-1\" [class]=\"'fs-' + tamanio()\"\r\n                [ngClass]=\"{ 'disabled-icon': !row() }\"></i>\r\n\r\n            <i class=\"icon-arrow fa-solid fa-chevron-down\"\r\n                [ngClass]=\"{ 'rotate-up': filtroAbierto(), 'disabled-icon': !row()}\"></i>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-actions\">\r\n        @if (showAlerta()) {\r\n        <app-alerta [mensaje]=\"textAlerta()\" />\r\n        }\r\n        @if(isModal()){\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'app-header', imports: [CommonModule, ButtonComponent, AlertaComponent], template: "<div class=\"d-flex justify-content-between align-items-center position-relative flex-wrap\">\r\n    <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n        <h5 class=\"fw-bold pe-2\" [ngClass]=\"['fs-' + tamanio(),  isModal() ? 'pt-3' : 'pt-2']\">\r\n            {{ title() }}\r\n        </h5>\r\n        @if(showFiltro()){\r\n        <div [ngClass]=\"{'pt-2': isModal()}\">\r\n            <i class=\"fa-solid fa-filter px-2 me-1\" [class]=\"'fs-' + tamanio()\"\r\n                [ngClass]=\"{ 'disabled-icon': !hasData() }\"></i>\r\n\r\n            <i class=\"icon-arrow fa-solid fa-chevron-down\"\r\n                [ngClass]=\"{ 'rotate-up': !withFiltro(), 'disabled-icon': !hasData()}\"></i>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-actions\">\r\n        @if (showAlerta()) {\r\n        <app-alerta [mensaje]=\"textAlerta()\" />\r\n        }\r\n        @if(isModal()){\r\n        <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n        }\r\n    </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"] }]
+        }] });
 
 class AutocompleteComponent {
     searchByIdSubject = new Subject();
@@ -1591,6 +1600,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ selector: 'app-spinner', imports: [], template: "<div id=\"custom-spinner\" class=\"spinner-overlay\" hidden>\r\n    <div class=\"spinner-container\">\r\n        <div class=\"spinner-border-wrapper\">\r\n            <div class=\"spinner-border\"></div>\r\n        </div>\r\n        <img src=\"../assets/images/logo-tsi-tres.png\" class=\"spinner-img\" />\r\n    </div>\r\n</div>", styles: [".spinner-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:9999;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:auto}.spinner-overlay:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.spinner-container{position:relative;width:300px;height:300px;display:flex;justify-content:center;align-items:center;animation:heartbeat 1.5s infinite ease-in-out;-webkit-user-select:none;user-select:none}.spinner-border-wrapper{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation:heartbeat 1.5s infinite ease-in-out}.spinner-border{position:absolute;width:100%;height:100%;border-radius:50%;border:10px dotted white;animation:spin 5s linear infinite;mask-image:conic-gradient(#fff 0% 70%,#fff0);-webkit-mask-image:conic-gradient(rgb(255,255,255) 0%,rgb(255,255,255) 70%,rgba(255,255,255,0) 100%);pointer-events:none}.spinner-img{opacity:.85;width:200px;height:auto;position:relative;z-index:1;animation:heartbeat 1.5s infinite ease-in-out;-webkit-user-select:none;user-select:none;pointer-events:none;-webkit-user-drag:none}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }] });
 
+class IconsDirective {
+    name = input('agregar', { alias: 'iconName' });
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    ngOnInit() {
+        this.aplicarEstilo();
+    }
+    aplicarEstilo() {
+        this.renderer.addClass(this.elementRef.nativeElement, 'fa');
+        const iconClass = ICON_CLASSES[this.name()];
+        if (iconClass) {
+            this.renderer.addClass(this.elementRef.nativeElement, iconClass);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: IconsDirective, isStandalone: true, selector: "[iconName]", inputs: { name: { classPropertyName: "name", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[iconName]',
+                    standalone: true
+                }]
+        }] });
+
+class ButtonsModalDirective {
+    color = input('azul', { alias: 'colorBtn' });
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    ngOnInit() {
+        this.aplicarEstilos();
+    }
+    aplicarEstilos() {
+        const baseClasses = ['btn', 'btn-sm', 'py-2', 'px-4', 'btn-rounded', 'me-1'];
+        baseClasses.forEach(cls => this.renderer.addClass(this.el.nativeElement, cls));
+        if (this.color() === 'none') {
+            this.renderer.removeClass(this.el.nativeElement, 'py-2');
+            this.renderer.removeClass(this.el.nativeElement, 'px-4');
+            this.renderer.addClass(this.el.nativeElement, 'bg-none');
+            this.renderer.addClass(this.el.nativeElement, 'border-0');
+            this.renderer.addClass(this.el.nativeElement, 'fs-6');
+            this.renderer.addClass(this.el.nativeElement, 'fw-7');
+        }
+        else {
+            const colorClass = COLOR_CLASSES[this.color()];
+            if (colorClass) {
+                this.renderer.addClass(this.el.nativeElement, colorClass);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonsModalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: ButtonsModalDirective, isStandalone: true, selector: "[colorBtn]", inputs: { color: { classPropertyName: "color", publicName: "colorBtn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonsModalDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[colorBtn]',
+                    standalone: true
+                }]
+        }] });
+
+class ButtonsOutlineDirective {
+    color = input('azul', { alias: 'colorOutlineBtn' });
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    ngOnInit() {
+        this.aplicarEstilos();
+    }
+    aplicarEstilos() {
+        const baseClasses = ['btn', 'btn-rounded', 'me-1', 'fs-8', 'px-3'];
+        baseClasses.forEach(cls => this.renderer.addClass(this.el.nativeElement, cls));
+        const colorClass = OUTLINE_COLOR_CLASSES[this.color()];
+        if (colorClass) {
+            this.renderer.addClass(this.el.nativeElement, colorClass);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonsOutlineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: ButtonsOutlineDirective, isStandalone: true, selector: "[colorOutlineBtn]", inputs: { color: { classPropertyName: "color", publicName: "colorOutlineBtn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonsOutlineDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[colorOutlineBtn]',
+                    standalone: true
+                }]
+        }] });
+
+class DropdownMenuComponent {
+    sesion = inject(SesionService);
+    dropdown;
+    submenuAnchors;
+    submenuDivs;
+    disabled = input(false);
+    options = input([], { alias: 'options' });
+    buttonProperties = input(null, { alias: 'buttonProperties' });
+    hoverTrigger = input(false);
+    propiedades = signal(this.sesion.getSession().propiedades);
+    factores = signal(this.sesion.getSession().factores);
+    activeSubmenu = signal({});
+    visibleOptions = computed(() => this.options().filter(opt => opt.condition !== false &&
+        (!opt.factor || this.factores()[opt.factor.key])));
+    buttonProps = computed(() => this.buttonProperties());
+    handleMainButtonMouseEnter() {
+        if (this.hoverTrigger()) {
+            this.dropdown.open();
+        }
+    }
+    handleMainButtonMouseLeave() {
+        if (this.hoverTrigger()) {
+            if (!this.isMouseOverDropdown()) {
+                this.closeAll();
+            }
+        }
+    }
+    handleDropdownMouseEnter() {
+        if (this.hoverTrigger()) {
+            this.keepOpen();
+        }
+    }
+    handleDropdownMouseLeave() {
+        if (this.hoverTrigger()) {
+            if (!this.isMouseOverButton()) {
+                this.closeAll();
+            }
+        }
+    }
+    isMouseOverDropdown() {
+        const dropdownElement = document.querySelector('.dropdown-menu');
+        return dropdownElement?.contains(document.activeElement) || false;
+    }
+    isMouseOverButton() {
+        const buttonElement = document.querySelector('[ngbDropdownToggle]');
+        return buttonElement?.contains(document.activeElement) || false;
+    }
+    keepOpen() {
+        if (this.dropdown) {
+            this.dropdown.open();
+        }
+    }
+    closeAll() {
+        if (this.dropdown) {
+            this.dropdown.close();
+        }
+        this.submenuAnchors.forEach(anchor => anchor.close());
+        this.activeSubmenu.set({});
+    }
+    mouseLeaveItem(dropdown, event, optionText) {
+        const submenuElementRef = this.submenuDivs.find(elRef => this.visibleOptions().some(opt => opt.text == optionText && elRef.nativeElement.contains(event.relatedTarget)));
+        if (!submenuElementRef) {
+            dropdown.close();
+            this.activeSubmenu.update(state => ({ ...state, [optionText]: false }));
+        }
+    }
+    mouseLeaveSubmenu(dropdown, event, optionText) {
+        const parentElement = this.submenuAnchors.find(anchor => anchor.open && anchor['id'] == optionText);
+        const relatedTarget = event.relatedTarget;
+        if (!parentElement || !relatedTarget || !parentElement['nativeElement'].contains(relatedTarget)) {
+            dropdown.close();
+            this.activeSubmenu.update(state => ({ ...state, [optionText]: false }));
+        }
+    }
+    getVisibleSubmenuItems(submenuItems) {
+        return submenuItems.filter(sub => sub.condition !== false && (!sub.factor || this.factores()[sub.factor]));
+    }
+    getPropertyName(key) {
+        if (key) {
+            return key?.descri ?? '';
+        }
+        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 } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: NgbDropdown, descendants: true }, { propertyName: "submenuAnchors", predicate: ["submenuAnchor"], descendants: true }, { propertyName: "submenuDivs", predicate: ["submenuDiv"], descendants: true }], ngImport: i0, template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n  @if (buttonProps()) {\r\n  <button \r\n    [colorBtn]=\"buttonProps()?.color || null\" \r\n    [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\" class=\"button-tilt-hover pbp-6 wrap w-auto w-sm-100\"\r\n    ngbDropdownToggle\r\n    (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n    <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i> {{ buttonProps()?.texto }}\r\n  </button>\r\n  } @else {\r\n  <button class=\"btn btn-sm border-0\" ngbDropdownToggle\r\n    (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\"\r\n    [disabled]=\"disabled()\"\r\n    >\r\n    <i class=\"fas fa-align-left fs-6\"></i>\r\n  </button>\r\n  }\r\n\r\n  <div ngbDropdownMenu class=\"my-0 py-0\"\r\n    (mouseenter)=\"handleDropdownMouseEnter()\"\r\n    (mouseleave)=\"handleDropdownMouseLeave()\">\r\n    @for (option of visibleOptions(); track $index) {\r\n    <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n      (mouseenter)=\"submenuAnchor.open()\">\r\n      @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n      <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n        [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n        (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n        [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n        [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n        (mouseleave)=\"mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n        @if (option.submenu) {\r\n        <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n          (mouseleave)=\"mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n          @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n          <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n            [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n            [tooltip]=\"getPropertyName(sub.property)\"\r\n            [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n            [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n          }\r\n        </div>\r\n        }\r\n      </app-button>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media (max-width: 575px){.d-inline-block{display:block!important}}\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: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }, { kind: "directive", type: IconsDirective, selector: "[iconName]", inputs: ["iconName"] }, { kind: "directive", type: ButtonsModalDirective, selector: "[colorBtn]", inputs: ["colorBtn"] }, { kind: "directive", type: ButtonsOutlineDirective, selector: "[colorOutlineBtn]", inputs: ["colorOutlineBtn"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-dropdown-menu', imports: [NgbDropdownModule, CommonModule, ButtonComponent, IconsDirective, ButtonsModalDirective, ButtonsOutlineDirective], template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n  @if (buttonProps()) {\r\n  <button \r\n    [colorBtn]=\"buttonProps()?.color || null\" \r\n    [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\" class=\"button-tilt-hover pbp-6 wrap w-auto w-sm-100\"\r\n    ngbDropdownToggle\r\n    (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n    <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i> {{ buttonProps()?.texto }}\r\n  </button>\r\n  } @else {\r\n  <button class=\"btn btn-sm border-0\" ngbDropdownToggle\r\n    (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n    (mouseleave)=\"handleMainButtonMouseLeave()\"\r\n    [disabled]=\"disabled()\"\r\n    >\r\n    <i class=\"fas fa-align-left fs-6\"></i>\r\n  </button>\r\n  }\r\n\r\n  <div ngbDropdownMenu class=\"my-0 py-0\"\r\n    (mouseenter)=\"handleDropdownMouseEnter()\"\r\n    (mouseleave)=\"handleDropdownMouseLeave()\">\r\n    @for (option of visibleOptions(); track $index) {\r\n    <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n      (mouseenter)=\"submenuAnchor.open()\">\r\n      @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n      <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n        [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n        (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n        [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n        [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n        (mouseleave)=\"mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n        @if (option.submenu) {\r\n        <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n          (mouseleave)=\"mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n          @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n          <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n            [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n            [tooltip]=\"getPropertyName(sub.property)\"\r\n            [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n            [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n          }\r\n        </div>\r\n        }\r\n      </app-button>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media (max-width: 575px){.d-inline-block{display:block!important}}\n"] }]
+        }], propDecorators: { dropdown: [{
+                type: ViewChild,
+                args: [NgbDropdown]
+            }], submenuAnchors: [{
+                type: ViewChildren,
+                args: ['submenuAnchor']
+            }], submenuDivs: [{
+                type: ViewChildren,
+                args: ['submenuDiv']
+            }] } });
+
 class CardMobileComponent {
     data = input([]);
     columns = input([]);
@@ -1618,31 +1814,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ selector: 'app-card-mobile', imports: [BadgeComponent, NgTemplateOutlet, ScrollingModule], template: "<cdk-virtual-scroll-viewport itemSize=\"120\" [style.height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\" >\r\n    <div class=\"row g-2 py-2\">\r\n        <!-- @for (item of data(); track $index) { -->\r\n        <div *cdkVirtualFor=\"let item of data(); let i = index\" class=\"col-12\">\r\n            <div class=\"card shadow-sm\">\r\n                <span class=\"pt-2 px-3 fw-bold fs-7\">{{titleTabla() ?? ''}} {{getIdentifier(item)}}</span>\r\n                <div class=\"card-body py-1 my-0\">\r\n                    @for (col of columns(); track $index) {\r\n                        @if (col.swmobile) {\r\n                            <div class=\"d-flex py-1\">\r\n                                <strong class=\"fs-6 me-2 flex-shrink-0\" style=\"min-width: 90px;\">\r\n                                    {{ col.caption }}\r\n                                </strong>\r\n                                \r\n                                <span class=\"fs-6 fw-normal text-break text-wrap flex-grow-1\">\r\n                                    {{ item._format?.[col.fieldname] ?? item[col.fieldname] }}\r\n                                </span>\r\n                                \r\n                            </div>\r\n                        }\r\n                    \r\n                    }\r\n                </div>\r\n                @if (actions()) {\r\n                <div class=\"pb-2 px-3 d-flex justify-content-between align-items-center\">\r\n                    <app-badge label=\"Acciones:\" color=\"bg-success\"></app-badge>\r\n                    <div>\r\n                        <ng-container *ngTemplateOutlet=\"actions(); context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n        <!-- } -->\r\n    </div>\r\n</cdk-virtual-scroll-viewport>" }]
         }] });
 
-class IconsDirective {
-    name = input('agregar', { alias: 'iconName' });
-    elementRef = inject(ElementRef);
-    renderer = inject(Renderer2);
-    ngOnInit() {
-        this.aplicarEstilo();
-    }
-    aplicarEstilo() {
-        this.renderer.addClass(this.elementRef.nativeElement, 'fa');
-        const iconClass = ICON_CLASSES[this.name()];
-        if (iconClass) {
-            this.renderer.addClass(this.elementRef.nativeElement, iconClass);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: IconsDirective, isStandalone: true, selector: "[iconName]", inputs: { name: { classPropertyName: "name", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IconsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[iconName]',
-                    standalone: true
-                }]
-        }] });
-
 class PaginadorComponent {
     total = input(0);
     limit = input(100); // DEFECTO
@@ -2344,11 +2515,11 @@ class TableAdvanceOptimizadaComponent {
         }, 100);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceOptimizadaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAdvanceOptimizadaComponent, isStandalone: true, selector: "app-table-advance-optimizada", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n\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\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\r\n@if (!isMobile()) {\r\n\r\n<div class=\"table-container table-responsive\"\r\n    [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n    [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n    <div>\r\n        <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n            <thead>\r\n                <tr class=\"shadow-sm\">\r\n                    @if (withDetails()) {\r\n                    <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                        <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 (customActions()) {\r\n                    <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                        <app-dropdown-cdk>\r\n                            <ng-template #trigger>\r\n                                <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                    <i class=\"fas fa-cog\"></i>\r\n                                </button>\r\n                            </ng-template>\r\n                            <ng-template #content>\r\n                                <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                    <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                    @for (col of columns(); track col.caption) {\r\n                                    @if (col.caption) {\r\n                                    <div class=\"form-check form-switch text-start\">\r\n                                        <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                            id=\"{{'switch_' + col.caption}}\"\r\n                                            [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                        <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                            for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                </div>\r\n                            </ng-template>\r\n                        </app-dropdown-cdk>\r\n                    </th>\r\n                    }\r\n                    @for (column of columns(); track $index) {\r\n                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                    <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                        [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                        {{ column.caption }}\r\n                        @if(column.caption){\r\n                        @if (sortColumn == column.fieldname) {\r\n                        <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                            <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                        </span>\r\n                        }\r\n                        @if (sortColumn !== column.fieldname) {\r\n                        <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                        }\r\n                        }\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of dataVirtual(); track row.id) {\r\n                <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n                'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n                    (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n                    [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                    @if (withDetails()) {\r\n                    <td class=\"b-table text-center mwp-25\">\r\n                        <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                        </a>\r\n                    </td>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <td scope=\"col\" class=\"text-center b-table\">\r\n                        <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n                            [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n                    </td>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <td class=\"text-center mwp-90 b-table\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                    </td>\r\n                    }\r\n                    @for (column of columns(); track $index) {\r\n                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                    @switch (column.tipo) {\r\n                    @case ('cell-render') {\r\n                    @let resolverItem = resolveCell(column.fieldname, row);\r\n                    @if (resolverItem) {\r\n                    <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                        @if (resolverItem.icon) {\r\n                        <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                        } @else if (resolverItem.class) {\r\n                        <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                            {{ resolverItem.text }}\r\n                        </span>\r\n                        } @else {\r\n                        {{ resolverItem.text }}\r\n                        }\r\n                    </td>\r\n                    }\r\n                    }\r\n\r\n                    @default {\r\n                    <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                        [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n                        class=\"b-table {{getPosition(column)}}\">\r\n                    </td>\r\n                    }\r\n                    }\r\n                    }\r\n                    }\r\n                </tr>\r\n                @if ($index == expandedRows) {\r\n                <tr @fadeInOut>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                        class=\"table-blank\">\r\n                        <div class=\"d-flex flex-column auditoria\">\r\n                            <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                            <span class=\"fs-6 text-dark fw-bold\">\r\n                                Creaci\u00F3n: {{ row.nomucreac }} el {{ row.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.factua }} a las {{\r\n                                row.hactua }}\r\n                            </span>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                }\r\n                }\r\n                <tr #anchor>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n                        @if (isLoading()) {\r\n                        <span>Cargando m\u00E1s registros...</span>\r\n                        }\r\n                        @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                        <span>No hay m\u00E1s registros</span>\r\n                        }\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n\r\n            @if (withTotal()) {\r\n            <tfoot>\r\n                <tr>\r\n                    <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                    @for (col of columns() ; track $index) {\r\n                    @if (col.totalizable) {\r\n                    <td class=\"b-table text-end\">\r\n                        {{ getTotals(col.fieldname)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [dropdownAnimation, fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAdvanceOptimizadaComponent, isStandalone: true, selector: "app-table-advance-optimizada", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n\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\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\r\n@if (!isMobile()) {\r\n\r\n<div class=\"table-container table-responsive\"\r\n    [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n    [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n    <div>\r\n        <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n            <thead>\r\n                <tr class=\"shadow-sm\">\r\n                    @if (withDetails()) {\r\n                    <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                        <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 (customActions()) {\r\n                    <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                        <app-dropdown-cdk>\r\n                            <ng-template #trigger>\r\n                                <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                    <i class=\"fas fa-cog\"></i>\r\n                                </button>\r\n                            </ng-template>\r\n                            <ng-template #content>\r\n                                <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                    <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                    @for (col of columns(); track col.caption) {\r\n                                    @if (col.caption) {\r\n                                    <div class=\"form-check form-switch text-start\">\r\n                                        <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                            id=\"{{'switch_' + col.caption}}\"\r\n                                            [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                        <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                            for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                </div>\r\n                            </ng-template>\r\n                        </app-dropdown-cdk>\r\n                    </th>\r\n                    }\r\n                    @for (column of columns(); track $index) {\r\n                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                    <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                        [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                        {{ column.caption }}\r\n                        @if(column.caption){\r\n                        @if (sortColumn == column.fieldname) {\r\n                        <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                            <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                        </span>\r\n                        }\r\n                        @if (sortColumn !== column.fieldname) {\r\n                        <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                        }\r\n                        }\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of dataVirtual(); track row.idtabletsi) {\r\n                <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n                'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n                    (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n                    [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                    @if (withDetails()) {\r\n                    <td class=\"b-table text-center mwp-25\">\r\n                        <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                        </a>\r\n                    </td>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <td scope=\"col\" class=\"text-center b-table\">\r\n                        <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n                            [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n                    </td>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <td class=\"text-center mwp-90 b-table\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                    </td>\r\n                    }\r\n                    @for (column of columns(); track $index) {\r\n                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                    @switch (column.tipo) {\r\n                    @case ('cell-render') {\r\n                    @let resolverItem = resolveCell(column.fieldname, row);\r\n                    @if (resolverItem) {\r\n                    <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                        @if (resolverItem.icon) {\r\n                        <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                        } @else if (resolverItem.class) {\r\n                        <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                            {{ resolverItem.text }}\r\n                        </span>\r\n                        } @else {\r\n                        {{ resolverItem.text }}\r\n                        }\r\n                    </td>\r\n                    }\r\n                    }\r\n\r\n                    @default {\r\n                    <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                        [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n                        class=\"b-table {{getPosition(column)}}\">\r\n                    </td>\r\n                    }\r\n                    }\r\n                    }\r\n                    }\r\n                </tr>\r\n                @if ($index == expandedRows) {\r\n                <tr @fadeInOut>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                        class=\"table-blank\">\r\n                        <div class=\"d-flex flex-column auditoria\">\r\n                            <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                            <span class=\"fs-6 text-dark fw-bold\">\r\n                                Creaci\u00F3n: {{ row.nomucreac }} el {{ row.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.factua }} a las {{\r\n                                row.hactua }}\r\n                            </span>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                }\r\n                }\r\n                <tr #anchor>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n                        @if (isLoading()) {\r\n                        <span>Cargando m\u00E1s registros...</span>\r\n                        }\r\n                        @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                        <span>No hay m\u00E1s registros</span>\r\n                        }\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n\r\n            @if (withTotal()) {\r\n            <tfoot>\r\n                <tr>\r\n                    <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                    @for (col of columns() ; track $index) {\r\n                    @if (col.totalizable) {\r\n                    <td class=\"b-table text-end\">\r\n                        {{ getTotals(col.fieldname)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [dropdownAnimation, fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvanceOptimizadaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-advance-optimizada', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n\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\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\r\n@if (!isMobile()) {\r\n\r\n<div class=\"table-container table-responsive\"\r\n    [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n    [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n    <div>\r\n        <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n            <thead>\r\n                <tr class=\"shadow-sm\">\r\n                    @if (withDetails()) {\r\n                    <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                        <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 (customActions()) {\r\n                    <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                        <app-dropdown-cdk>\r\n                            <ng-template #trigger>\r\n                                <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                    <i class=\"fas fa-cog\"></i>\r\n                                </button>\r\n                            </ng-template>\r\n                            <ng-template #content>\r\n                                <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                    <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                    @for (col of columns(); track col.caption) {\r\n                                    @if (col.caption) {\r\n                                    <div class=\"form-check form-switch text-start\">\r\n                                        <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                            id=\"{{'switch_' + col.caption}}\"\r\n                                            [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                        <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                            for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                </div>\r\n                            </ng-template>\r\n                        </app-dropdown-cdk>\r\n                    </th>\r\n                    }\r\n                    @for (column of columns(); track $index) {\r\n                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                    <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                        [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                        {{ column.caption }}\r\n                        @if(column.caption){\r\n                        @if (sortColumn == column.fieldname) {\r\n                        <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                            <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                        </span>\r\n                        }\r\n                        @if (sortColumn !== column.fieldname) {\r\n                        <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                        }\r\n                        }\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of dataVirtual(); track row.id) {\r\n                <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n                'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n                    (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n                    [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                    @if (withDetails()) {\r\n                    <td class=\"b-table text-center mwp-25\">\r\n                        <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                        </a>\r\n                    </td>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <td scope=\"col\" class=\"text-center b-table\">\r\n                        <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n                            [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n                    </td>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <td class=\"text-center mwp-90 b-table\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                    </td>\r\n                    }\r\n                    @for (column of columns(); track $index) {\r\n                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                    @switch (column.tipo) {\r\n                    @case ('cell-render') {\r\n                    @let resolverItem = resolveCell(column.fieldname, row);\r\n                    @if (resolverItem) {\r\n                    <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                        @if (resolverItem.icon) {\r\n                        <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                        } @else if (resolverItem.class) {\r\n                        <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                            {{ resolverItem.text }}\r\n                        </span>\r\n                        } @else {\r\n                        {{ resolverItem.text }}\r\n                        }\r\n                    </td>\r\n                    }\r\n                    }\r\n\r\n                    @default {\r\n                    <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                        [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n                        class=\"b-table {{getPosition(column)}}\">\r\n                    </td>\r\n                    }\r\n                    }\r\n                    }\r\n                    }\r\n                </tr>\r\n                @if ($index == expandedRows) {\r\n                <tr @fadeInOut>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                        class=\"table-blank\">\r\n                        <div class=\"d-flex flex-column auditoria\">\r\n                            <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                            <span class=\"fs-6 text-dark fw-bold\">\r\n                                Creaci\u00F3n: {{ row.nomucreac }} el {{ row.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.factua }} a las {{\r\n                                row.hactua }}\r\n                            </span>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                }\r\n                }\r\n                <tr #anchor>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n                        @if (isLoading()) {\r\n                        <span>Cargando m\u00E1s registros...</span>\r\n                        }\r\n                        @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                        <span>No hay m\u00E1s registros</span>\r\n                        }\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n\r\n            @if (withTotal()) {\r\n            <tfoot>\r\n                <tr>\r\n                    <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                    @for (col of columns() ; track $index) {\r\n                    @if (col.totalizable) {\r\n                    <td class=\"b-table text-end\">\r\n                        {{ getTotals(col.fieldname)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
+            args: [{ selector: 'app-table-advance-optimizada', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n\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\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\r\n@if (!isMobile()) {\r\n\r\n<div class=\"table-container table-responsive\"\r\n    [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n    [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n    <div>\r\n        <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n            <thead>\r\n                <tr class=\"shadow-sm\">\r\n                    @if (withDetails()) {\r\n                    <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                        <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 (customActions()) {\r\n                    <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                        <app-dropdown-cdk>\r\n                            <ng-template #trigger>\r\n                                <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                    <i class=\"fas fa-cog\"></i>\r\n                                </button>\r\n                            </ng-template>\r\n                            <ng-template #content>\r\n                                <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                    <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                    @for (col of columns(); track col.caption) {\r\n                                    @if (col.caption) {\r\n                                    <div class=\"form-check form-switch text-start\">\r\n                                        <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                            id=\"{{'switch_' + col.caption}}\"\r\n                                            [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                        <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                            for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                    </div>\r\n                                    }\r\n                                    }\r\n                                </div>\r\n                            </ng-template>\r\n                        </app-dropdown-cdk>\r\n                    </th>\r\n                    }\r\n                    @for (column of columns(); track $index) {\r\n                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                    <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                        [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                        {{ column.caption }}\r\n                        @if(column.caption){\r\n                        @if (sortColumn == column.fieldname) {\r\n                        <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                            <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                        </span>\r\n                        }\r\n                        @if (sortColumn !== column.fieldname) {\r\n                        <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                        }\r\n                        }\r\n                    </th>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of dataVirtual(); track row.idtabletsi) {\r\n                <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n                'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n                    (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n                    [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                    @if (withDetails()) {\r\n                    <td class=\"b-table text-center mwp-25\">\r\n                        <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                        </a>\r\n                    </td>\r\n                    }\r\n\r\n                    @if (withCheckbox()) {\r\n                    <td scope=\"col\" class=\"text-center b-table\">\r\n                        <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n                            [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n                    </td>\r\n                    }\r\n\r\n                    @if (customActions()) {\r\n                    <td class=\"text-center mwp-90 b-table\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                    </td>\r\n                    }\r\n                    @for (column of columns(); track $index) {\r\n                    @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                    @switch (column.tipo) {\r\n                    @case ('cell-render') {\r\n                    @let resolverItem = resolveCell(column.fieldname, row);\r\n                    @if (resolverItem) {\r\n                    <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                        @if (resolverItem.icon) {\r\n                        <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                        } @else if (resolverItem.class) {\r\n                        <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                            {{ resolverItem.text }}\r\n                        </span>\r\n                        } @else {\r\n                        {{ resolverItem.text }}\r\n                        }\r\n                    </td>\r\n                    }\r\n                    }\r\n\r\n                    @default {\r\n                    <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                        [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n                        class=\"b-table {{getPosition(column)}}\">\r\n                    </td>\r\n                    }\r\n                    }\r\n                    }\r\n                    }\r\n                </tr>\r\n                @if ($index == expandedRows) {\r\n                <tr @fadeInOut>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                        class=\"table-blank\">\r\n                        <div class=\"d-flex flex-column auditoria\">\r\n                            <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                            <span class=\"fs-6 text-dark fw-bold\">\r\n                                Creaci\u00F3n: {{ row.nomucreac }} el {{ row.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.factua }} a las {{\r\n                                row.hactua }}\r\n                            </span>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n                }\r\n                }\r\n                <tr #anchor>\r\n                    <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n                        @if (isLoading()) {\r\n                        <span>Cargando m\u00E1s registros...</span>\r\n                        }\r\n                        @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                        <span>No hay m\u00E1s registros</span>\r\n                        }\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n\r\n            @if (withTotal()) {\r\n            <tfoot>\r\n                <tr>\r\n                    <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                    @for (col of columns() ; track $index) {\r\n                    @if (col.totalizable) {\r\n                    <td class=\"b-table text-end\">\r\n                        {{ getTotals(col.fieldname)}}\r\n                    </td>\r\n                    }\r\n                    }\r\n                </tr>\r\n            </tfoot>\r\n            }\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -2812,7 +2983,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: ["color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableDetalleComponent, isStandalone: true, selector: "app-table-detalle", inputs: { selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, busqueda: { classPropertyName: "busqueda", publicName: "busqueda", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, lastItemDisabled: { classPropertyName: "lastItemDisabled", publicName: "lastItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withEditItem: { classPropertyName: "withEditItem", publicName: "withEditItem", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, deleteItems: { classPropertyName: "deleteItems", publicName: "deleteItems", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRadio: { classPropertyName: "selectedRadio", publicName: "selectedRadio", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", busqueda: "busquedaChange", deleteItems: "deleteItemsChange", selectItems: "selectItemsChange", selectedRadio: "selectedRadioChange", editItem: "editItem" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n</div>\r\n}\r\n<div class=\"table-container table-responsive\"\r\n    [style.max-height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\"\r\n    [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\r\n    <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n        <thead>\r\n            <tr class=\"shadow-sm\">\r\n                @if (withCheckbox()) {\r\n                <th scope=\"col\" class=\"text-center b-table w-min\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n                    <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n                        [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n                </th>\r\n                }\r\n\r\n                @if (withEditItem()) {\r\n                <th scope=\"col\" class=\"text-center b-table w-min\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n                </th>\r\n                }\r\n\r\n                @if (customActions) {\r\n                <th scope=\"col\" class=\"b-table w-min mwp-50\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\"></th>\r\n                }\r\n\r\n                @for (column of columns(); track $index) {\r\n                @if (column.visible) {\r\n                <th scope=\"col\" class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                    [style.width]=\"widthDefault(column) + 'px'\" [style.min-width]=\"widthDefault(column) + 'px'\"\r\n                    [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n                    {{ column.caption }}\r\n                </th>\r\n                }\r\n                }\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            @for (row of rowFilter(); track iRow; let iRow = $index) {\r\n            @let isLast = validaAccionDescri(iRow);\r\n            @let rowClass = getRowClass(row);\r\n            <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                [class]=\"rowClass\" (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n                [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n                @if (withCheckbox()) {\r\n                <td scope=\"col\" class=\"text-center b-table w-min\" [class]=\"rowClass\">\r\n                    @if(!resolveCell('checkbox', row)?.hidden){\r\n                    <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n                        [disabled]=\"!lastItemDisabled() ? false : validaLastRegistro($index)\"\r\n                        [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n                    }\r\n                </td>\r\n                }\r\n\r\n                @if (withEditItem()) {\r\n                <td scope=\"col\" class=\"text-start b-table w-min\">\r\n                    <div class=\"d-flex align-items-center justify-content-center\">\r\n                        <i (click)=\"validaEdit(iRow) ? editItem.emit(row) : null \"\r\n                            class=\"fas fa-pen fs-7 px-2 py-2 my-1 rounded-2 text-secondary shadow-sm\"\r\n                            [ngClass]=\"validaEdit(iRow) ? 'cursor-pointer' : ''\" title=\"Editar articulo\"></i>\r\n                    </div>\r\n                </td>\r\n                }\r\n\r\n                @if (customActions) {\r\n                <td class=\"text-center mwp-90 b-table w-min\">\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n                    </div>\r\n                </td>\r\n                }\r\n\r\n                @for (column of columns(); track $index) {\r\n                @if (column.visible) {\r\n                @switch (column.tipo) {\r\n\r\n                @case ('input-radio') {\r\n                <td scope=\"col\" class=\"text-center b-table\">\r\n                    <input type=\"radio\" class=\"form-check-input fs-8 border border-secondary m-0 p-0\"\r\n                        [disabled]=\"lastItemDisabled() && validaLastRegistro(iRow)\" [checked]=\"selectedRadio() === iRow\"\r\n                        (change)=\"clickRadio(iRow)\">\r\n                </td>\r\n                }\r\n\r\n                @case ('fecha') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n                    [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    {{ row[column.fieldname] | date:'dd/MM/yyyy' }}\r\n                </td>\r\n                }\r\n\r\n                @case ('decimal') {\r\n                <td class=\"text-end b-table\" [title]=\"limpiarNumero(row[column.fieldname]) | number:'1.2-2'\"\r\n                    [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    {{limpiarNumero(row[column.fieldname]) | number:'1.2-2'}}\r\n                </td>\r\n                }\r\n\r\n                @case ('list-select') {\r\n                <td class=\"text-center b-table\" [title]=\"row[column.fieldname]\">\r\n                    <div ngbDropdown class=\"d-inline-block\" container=\"body\">\r\n                        <div class=\"h-100 bg-sidebar d-flex align-items-center px-1\">\r\n                            <button [disabled]=\"!isLast\" class=\"border-0 bg-none\"\r\n                                [ngClass]=\"!isLast ? 'text-muted' : 'text-input'\" ngbDropdownToggle>\r\n                                {{row[column.fieldname]}}\r\n                            </button>\r\n                        </div>\r\n                        <div ngbDropdownMenu class=\"my-0 py-0\">\r\n                            @for (item of column.lista; track $index; let last = $last) {\r\n                            <app-button [texto]=\"item.text\"\r\n                                [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n                                [dropdownButton]=\"true\" (accion)=\"item?.action(row,item.codigo)\" />\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                    <!-- <app-dropdown-menu [options]=\"column.lista\" [disabled]=\"lastItemDisabled() ? false : !validaLastRegistro($index)\" [buttonProperties]=\"{color:'none',texto:row[column.fieldname]}\"/> -->\r\n                </td>\r\n\r\n                }\r\n\r\n                @case ('input') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n                        (focus)=\"focusData(row[column.fieldname])\"\r\n                        (blur)=\"!validarData(row[column.fieldname]) ? null : column?.blur(row)\"\r\n                        (keyup.enter)=\"!validarData(row[column.fieldname]) ? null : column?.enter(row)\"\r\n                        [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n                </td>\r\n                }\r\n\r\n                @case ('input-date') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"date\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n                        (blur)=\"column?.blur(row)\" (keyup.enter)=\"column?.enter(row)\"\r\n                        [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n                </td>\r\n                }\r\n\r\n                @case ('input-etiqueta') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"etiqueta\" [withDetails]=\"true\"\r\n                        [(valuedes)]=\"row[column.fieldname]\" [(disabled)]=\"row.disabledEtiqueta\"\r\n                        [auxiliarData]=\"{tipinv:row.tipinv,codart:row.codart,codtit:row.codtit,codalm:row.codalm}\"\r\n                        (emitirAdicionalData)=\"manejarDataEtiqueta($event,row)\"\r\n                        (disabledChange)=\"limpiarEtiqueta($event,row)\" [withBuscar2]=\"true\"\r\n                        [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n                </td>\r\n                }\r\n\r\n                @case ('input-afecta') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"tafecta\" [(valuecod)]=\"row[column.fieldname]\"\r\n                        [(disabled)]=\"row.disabledEtiqueta\" [(valuedes)]=\"row.dtipafec\" viewInput=\"cod\"\r\n                        [withBuscar]=\"true\" [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n                </td>\r\n                }\r\n\r\n                @case ('input-number') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"text\" class=\"form-control text-end\"\r\n                        [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n                        [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n                        [disabled]=\"row.disabledAll ?? false\" onlyNumber>\r\n                </td>\r\n                }\r\n\r\n                @case ('input-decimal') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <input type=\"text\" class=\"form-control text-end w-100\"\r\n                        [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n                        [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n                        [appDecimal]=\"column.pipe\" [readonly]=\"column.readonly ? column.readonly(row) : false\"\r\n                        [disabled]=\"row.disabledAll ?? generateKeyDisabled(row,column)\" onlyNumber>\r\n                </td>\r\n                }\r\n\r\n                @case ('input-select') {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <select class=\"form-select\" name=\"{{`cbo_lista_${row[column.fieldname]}`}}\"\r\n                        id=\"{{`cbo_lista_${row[column.fieldname]}`}}\" [(ngModel)]=\"row[column.fieldname]\"\r\n                        (change)=\"validarFunction(column.change)?.(row)\"\r\n                        [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n                        @for (item of column.lista; track $index) {\r\n                        <option [value]=\"item[column.keyCodigo]\"> {{ item[column.keyDescri]}} </option>\r\n                        }\r\n                    </select>\r\n                </td>\r\n                }\r\n\r\n                @case ('stock') {\r\n                <td class=\"b-table text-center\" [title]=\"row[column.fieldname] ? row[column.fieldname] : 'Sin Stock'\">\r\n                    @if (limpiarNumero(row[column.fieldname]) > 0) {\r\n                    {{row[column.fieldname]}}\r\n                    }@else {\r\n                    <i class=\"fas fa-times text-danger fw-bold fs-4\"></i>\r\n                    }\r\n                </td>\r\n                }\r\n\r\n                @default {\r\n                <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n                    <span [ngClass]=\"isLast ? 'cursor-pointer' : ''\"\r\n                        (click)=\"isLast ? column?.clic() : null\">{{row[column.fieldname]}}</span>\r\n                </td>\r\n                }\r\n                }\r\n                }\r\n                }\r\n            </tr>\r\n            }\r\n        </tbody>\r\n    </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.header-normal{background:#cecece!important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}.w-min{max-width:40px!important;width:40px!important;min-width:40px!important}.bg-red{background-color:red}.bg-red i,.bg-red span,.bg-red button,.bg-red td,.bg-red input,.bg-red select,.bg-red-input{color:red!important}.bg-blue{background-color:#00f}.bg-blue i,.bg-blue span,.bg-blue button,.bg-blue td,.bg-blue input,.bg-blue select,.bg-blue-input{color:#00f!important}.bg-yellow{background-color:#ff0}.bg-green{background-color:#adff2f}.bg-initial{background-color:initial}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "directive", type: DecimalDirective, selector: "[appDecimal]", inputs: ["appDecimal"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]" }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableDetalleComponent, decorators: [{
             type: Component,
@@ -2984,26 +3155,33 @@ class MdGenericoComponent {
     textAlerta = input('La consulta muestra los 100 primeros registros.');
     sizeTitle = input('8');
     showFiltro = input(false);
-    rowFiltro = input(false);
+    // rowFiltro = input<boolean>(false)
+    withFiltro = signal(true);
     dataFiltro = input(false);
     emitirFiltro = output();
-    toggleFiltro() {
-        this.emitirFiltro.emit();
+    constructor() {
+        effect(() => {
+            if (this.withFiltro() != null) {
+                this.emitirFiltro.emit();
+            }
+        });
     }
+    // toggleFiltro() {
+    //   this.emitirFiltro.emit()
+    // }
     // ngOnDestroy() {
     //   this.estadoInputsService.reset('M')
     // }
     cerrarModal() {
-        // this.estadoInputsService.reset('M')
         this.modalService.dismiss();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, rowFiltro: { classPropertyName: "rowFiltro", publicName: "rowFiltro", isSignal: true, isRequired: false, transformFunction: null }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"true\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [titulo]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [row]=\"rowFiltro()\" [filtroInicialAbierto]=\"false\" (filtro)=\"toggleFiltro()\" />\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( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["titulo", "row", "tamanio", "filtroInicialAbierto", "showFiltro", "hasData", "isModal", "showAlerta", "textAlerta"], outputs: ["filtro", "cerrarModal"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"true\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["title", "tamanio", "showFiltro", "withFiltro", "hasData", "isModal", "showAlerta", "textAlerta"], outputs: ["withFiltroChange", "cerrarModal"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-md-generico', imports: [NgClass, NgTemplateOutlet, HeaderComponent, ButtonComponent], template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"true\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [titulo]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [row]=\"rowFiltro()\" [filtroInicialAbierto]=\"false\" (filtro)=\"toggleFiltro()\" />\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( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"] }]
-        }] });
+            args: [{ selector: 'app-md-generico', imports: [NgClass, NgTemplateOutlet, HeaderComponent, ButtonComponent], template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"true\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"] }]
+        }], ctorParameters: () => [] });
 
 class AlertService {
     constructor() { }
@@ -3012,7 +3190,8 @@ class AlertService {
             html: msg,
             icon: "error",
             confirmButtonColor: "#3085d6",
-            confirmButtonText: "Aceptar"
+            confirmButtonText: "Aceptar",
+            focusConfirm: true
         }).then(() => { });
     }
     showSuccessAlert(msg) {
@@ -3020,7 +3199,8 @@ class AlertService {
             html: msg,
             icon: "success",
             confirmButtonColor: "#3085d6",
-            confirmButtonText: "Aceptar"
+            confirmButtonText: "Aceptar",
+            focusConfirm: true
         }).then(() => { });
     }
     showWarningAlert(msg) {
@@ -3028,7 +3208,8 @@ class AlertService {
             text: msg,
             icon: "warning",
             confirmButtonColor: "#3085d6",
-            confirmButtonText: "Aceptar"
+            confirmButtonText: "Aceptar",
+            focusConfirm: true
         });
     }
     openConfirmDialog() {
@@ -3039,7 +3220,8 @@ class AlertService {
                 showCancelButton: true,
                 confirmButtonColor: "#328ad9",
                 cancelButtonColor: "#ea0f0f",
-                confirmButtonText: "Aceptar"
+                confirmButtonText: "Aceptar",
+                focusConfirm: true
             }).then((result) => {
                 if (result.isConfirmed) {
                     resolve(true);
@@ -3058,7 +3240,8 @@ class AlertService {
                 showCancelButton: true,
                 confirmButtonColor: "#328ad9",
                 cancelButtonColor: "#ea0f0f",
-                confirmButtonText: "Aceptar"
+                confirmButtonText: "Aceptar",
+                focusConfirm: true
             }).then((result) => {
                 if (result.isConfirmed) {
                     resolve(true);
@@ -3077,7 +3260,8 @@ class AlertService {
                 showCancelButton: true,
                 confirmButtonColor: "#328ad9",
                 cancelButtonColor: "#ea0f0f",
-                confirmButtonText: "Aceptar"
+                confirmButtonText: "Aceptar",
+                focusConfirm: true
             }).then((result) => {
                 if (result.isConfirmed) {
                     resolve(true);
@@ -3096,6 +3280,7 @@ class AlertService {
                 showCancelButton: true,
                 confirmButtonColor: "#328ad9",
                 cancelButtonColor: "#ea0f0f",
+                focusConfirm: true,
                 confirmButtonText: params.yes ? params.yes : 'Si',
                 cancelButtonText: params.no ? params.no : 'No',
                 customClass: {
@@ -3152,7 +3337,8 @@ class AlertService {
             html: mensaje,
             icon: tipoAlerta,
             confirmButtonColor: "#3085d6",
-            confirmButtonText: "Aceptar"
+            confirmButtonText: "Aceptar",
+            focusConfirm: true
         });
     }
     openConfirmDialogMultipleActions(params) {
@@ -3282,13 +3468,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+class AlertErrorService {
+    modalService = inject(NgbModal);
+    open(mensaje) {
+        const modalRef = this.modalService.open(AlertErrorComponent, {
+            windowClass: 'modal-xs',
+            backdrop: 'static',
+            centered: true,
+        });
+        modalRef.componentInstance.mensaje.set(mensaje);
+        return modalRef;
+    }
+    mostrarModalError(mensaje) {
+        return this.open(mensaje).result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class FormateadorService {
     decimalPipe = inject(DecimalPipe);
     datePipe = inject(DatePipe);
     procesarLista(data, columns) {
         return data.map((item, index) => {
             const nuevoItem = { ...item };
-            if (!('id' in nuevoItem)) {
+            if (!('idtabletsi' in nuevoItem)) {
                 nuevoItem.id = crypto.randomUUID?.() ?? index;
             }
             const formatted = {};
@@ -3332,9 +3542,7 @@ class DropdownOption {
     text;
     condition;
     property;
-    propertyDes;
     factor;
-    factorDes;
     action;
     submenu;
     upload;
@@ -3766,6 +3974,29 @@ function getInputsObligatorios(data) {
     }));
 }
 
+function handleErrorsApi(err, alert) {
+    alert.mostrarModalError(err.error);
+}
+function handleEmptyResult(data, withFiltro, toast, message = 'No se encontraron resultados') {
+    withFiltro.set(true);
+    data.set([]);
+    toast.warning('Advertencia', message);
+}
+function handleSuccessResult(data, withFiltro, result, reload, tableHeader, procesador) {
+    if (!reload) {
+        withFiltro.set(false);
+    }
+    if (procesador) {
+        data.set(procesador.procesarLista(result, tableHeader));
+        return;
+    }
+    data.set(result);
+}
+function handleSuccessApi(toast, onRefresh, message = 'proceso') {
+    toast.success('Éxito', `Se ${message} correctamente`);
+    onRefresh();
+}
+
 /*
  * Public API Surface of ng-components-tsi
  */
@@ -3775,5 +4006,5 @@ function getInputsObligatorios(data) {
  * Generated bundle index. Do not edit.
  */
 
-export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertService, AlertaComponent, Almacenes, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CardMobileComponent, CheckBoxComponent, Cobradores, DetalleCreditoComponent, DetalleDocumentosCab, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownOption, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MaterialesCotizacion, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchComponent, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, Vendedor, getInputsObligatorios, validaFecha, validaLista, validaPeriodo, validaPosicion, validaTipo, validarSituacion };
+export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertErrorComponent, AlertErrorService, AlertService, AlertaComponent, Almacenes, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CardMobileComponent, CheckBoxComponent, Cobradores, DetalleCreditoComponent, DetalleDocumentosCab, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownMenuComponent, DropdownOption, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MaterialesCotizacion, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchComponent, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, Vendedor, getInputsObligatorios, handleEmptyResult, handleErrorsApi, handleSuccessApi, handleSuccessResult, validaFecha, validaLista, validaPeriodo, validaPosicion, validaTipo, validarSituacion };
 //# sourceMappingURL=ng-components-tsi.mjs.map