ng-components-tsi 0.0.35 → 0.0.37

package/fesm2022/ng-components-tsi.mjs

@@ -1,7 +1,7 @@
 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, effect, ViewChild, Component, signal, computed, Injectable, ChangeDetectionStrategy, contentChild, ContentChild, model, ViewChildren, ElementRef, Renderer2, Input, linkedSignal, untracked, TemplateRef, contentChildren } from '@angular/core';
+import { input, output, HostListener, Directive, inject, viewChild, signal, effect, ViewChild, Component, computed, Injectable, ChangeDetectionStrategy, contentChild, ContentChild, model, ViewChildren, ElementRef, Renderer2, Input, linkedSignal, untracked, TemplateRef, contentChildren } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { FormsModule, NgModel } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -138,6 +138,13 @@ class ButtonComponent {
     fileSelected = output();
     isRounded = input(false);
     isNotStyle = input(false);
+    hasFocus = signal(false);
+    onFocus() {
+        this.hasFocus.set(true);
+    }
+    onBlur() {
+        this.hasFocus.set(false);
+    }
     constructor() {
         effect(() => {
             if (this.buttonNormal() && this.autoFocus()) {
@@ -145,6 +152,15 @@ class ButtonComponent {
             }
         });
     }
+    getFocusColor() {
+        switch (this.color()) {
+            case 'rojo': return '255,0,0';
+            case 'azul': return '0,123,255';
+            case 'verde': return '0,200,0';
+            case 'plomo': return '128,128,128';
+            default: return '0,123,255';
+        }
+    }
     getSafeHtml() {
         return this.sanitizer.bypassSecurityTrustHtml(this.texto());
     }
@@ -194,11 +210,11 @@ class ButtonComponent {
         return this.atajo() ? `${this.texto()}: Ctrl + ${this.atajo()}` : "";
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, texto: { classPropertyName: "texto", publicName: "texto", isSignal: true, isRequired: false, transformFunction: null }, isHtml: { classPropertyName: "isHtml", publicName: "isHtml", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, sunatButton: { classPropertyName: "sunatButton", publicName: "sunatButton", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null }, buttonDeshabilitado: { classPropertyName: "buttonDeshabilitado", publicName: "buttonDeshabilitado", isSignal: true, isRequired: false, transformFunction: null }, atajo: { classPropertyName: "atajo", publicName: "atajo", isSignal: true, isRequired: false, transformFunction: null }, dropdownButton: { classPropertyName: "dropdownButton", publicName: "dropdownButton", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, uploadButton: { classPropertyName: "uploadButton", publicName: "uploadButton", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, isNotStyle: { classPropertyName: "isNotStyle", publicName: "isNotStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accion: "accion", fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "buttonNormal", first: true, predicate: ["boton"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass()]\" (click)=\"ejecutarAccion()\"\r\n    [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ?\r\n    texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n    (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span>{{ texto() }}</span>\r\n    }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: AtajosDirective, selector: "[atajoTecla]", inputs: ["altKeyCombination"], outputs: ["emitirAtajo"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, texto: { classPropertyName: "texto", publicName: "texto", isSignal: true, isRequired: false, transformFunction: null }, isHtml: { classPropertyName: "isHtml", publicName: "isHtml", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, sunatButton: { classPropertyName: "sunatButton", publicName: "sunatButton", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null }, buttonDeshabilitado: { classPropertyName: "buttonDeshabilitado", publicName: "buttonDeshabilitado", isSignal: true, isRequired: false, transformFunction: null }, atajo: { classPropertyName: "atajo", publicName: "atajo", isSignal: true, isRequired: false, transformFunction: null }, dropdownButton: { classPropertyName: "dropdownButton", publicName: "dropdownButton", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, uploadButton: { classPropertyName: "uploadButton", publicName: "uploadButton", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, isNotStyle: { classPropertyName: "isNotStyle", publicName: "isNotStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accion: "accion", fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "buttonNormal", first: true, predicate: ["boton"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n    [style.--focus-color-rgb]=\"getFocusColor()\"\r\n    [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass() + (hasFocus() ? ' aura-focus' : '') \" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass()]\" (click)=\"ejecutarAccion()\"\r\n    [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ?\r\n    texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n    (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span>{{ texto() }}</span>\r\n    }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out,aura-pulse 1.5s ease-out infinite}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}@keyframes aura-pulse{0%{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, .5))}50%{box-shadow:0 0 0 6px rgba(var(--focus-color-rgb, 0, 123, 255),.2)}to{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, 0))}}.aura-focus{animation:aura-pulse 1.5s ease-out infinite;outline:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: AtajosDirective, selector: "[atajoTecla]", inputs: ["altKeyCombination"], outputs: ["emitirAtajo"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', imports: [CommonModule, NgbTooltipModule, AtajosDirective], template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass()]\" (click)=\"ejecutarAccion()\"\r\n    [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ?\r\n    texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n    (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span>{{ texto() }}</span>\r\n    }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}\n"] }]
+            args: [{ selector: 'app-button', imports: [CommonModule, NgbTooltipModule, AtajosDirective], template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n    (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n    [style.--focus-color-rgb]=\"getFocusColor()\"\r\n    [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\r\n    class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass() + (hasFocus() ? ' aura-focus' : '') \" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n    [id]=\"`id_button_${texto()}`\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n    (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n    class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass()]\" (click)=\"ejecutarAccion()\"\r\n    [disabled]=\"disabled()\">\r\n    <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ?\r\n    texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n    [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n    (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span>{{ texto() }}</span>\r\n    }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n    <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n    [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n    <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    @if(uploadButton()){\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n    }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n    [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n    [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n    <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n    @if(texto()){\r\n    <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n    }\r\n    <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n        class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out,aura-pulse 1.5s ease-out infinite}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}@keyframes aura-pulse{0%{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, .5))}50%{box-shadow:0 0 0 6px rgba(var(--focus-color-rgb, 0, 123, 255),.2)}to{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, 0))}}.aura-focus{animation:aura-pulse 1.5s ease-out infinite;outline:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -290,6 +306,7 @@ class AlertConfirmationComponent {
     extra = signal('');
     colorExtra = signal('azul');
     maxLength = signal(200);
+    focus = signal(true);
     get textareaValueModel() {
         return this.textareaValue();
     }
@@ -343,13 +360,18 @@ 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\" [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"] }] });
+    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]=\"focus()\" />\r\n        }\r\n        @if(mostrarExtra()){\r\n        <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarCancelar()){\r\n        <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" />\r\n        }\r\n    </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.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\" [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"] }]
+            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]=\"focus()\" />\r\n        }\r\n        @if(mostrarExtra()){\r\n        <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n        }\r\n        @if(mostrarCancelar()){\r\n        <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" />\r\n        }\r\n    </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"] }]
         }] });
 
+var alertConfirmation_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AlertConfirmationComponent: AlertConfirmationComponent
+});
+
 class AlertaComponent {
     titulo = input('Atención:');
     mensaje = input('La consulta muestra los 100 primeros registros.');
@@ -4193,6 +4215,7 @@ class MdGenericoComponent {
     title = input('');
     continuar = output();
     continuar2 = output();
+    cerrar = output();
     scrollable = input(true);
     type = input('1');
     content = contentChild('body');
@@ -4205,11 +4228,16 @@ class MdGenericoComponent {
     dataFiltro = input(false);
     emitirFiltro = output();
     isModal = input(true);
+    validaCierre = input(false); // SI VALIDA CIERRE ES TRUE, ENTONCES SOLO SE EMITE LA ACCION, PERO NO CIERRA EN AUTOMATICO
     cerrarModal() {
+        if (this.validaCierre()) {
+            this.cerrar.emit();
+            return;
+        }
         this.modalService.dismiss();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (footer()) {\r\n        <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n    }\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\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", "validateSalto"], outputs: ["withFiltroChange", "cerrarModal"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, validaCierre: { classPropertyName: "validaCierre", publicName: "validaCierre", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", cerrar: "cerrar", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (footer()) {\r\n        <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n    }\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\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", "validateSalto"], outputs: ["withFiltroChange", "cerrarModal"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, decorators: [{
             type: Component,
@@ -4422,6 +4450,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+function configModal(size = 'xl') {
+    return { size, backdrop: 'static' };
+}
+function handleModal(modalRef, onSuccess, onDismiss) {
+    modalRef.result.then((result) => {
+        if (!result)
+            return;
+        onSuccess(result);
+    }, () => onDismiss?.());
+}
+function handleModalReturn(modalRef) {
+    return modalRef.result
+        .then((result) => result ?? null)
+        .catch(() => null);
+}
+
 class AlertConfirmationConfig {
     texto;
     showTextarea;
@@ -4437,10 +4481,12 @@ class AlertConfirmationConfig {
     extra;
     colorExtra;
     maxLength;
+    focus;
 }
 class AlertConfirmationService {
     modalService = inject(NgbModal);
-    open(config) {
+    async open(config) {
+        const { AlertConfirmationComponent } = await Promise.resolve().then(function () { return alertConfirmation_component; });
         const modalRef = this.modalService.open(AlertConfirmationComponent, {
             windowClass: 'modal-xs',
             backdrop: 'static',
@@ -4485,11 +4531,14 @@ class AlertConfirmationService {
         if (config.colorExtra !== undefined) {
             modalRef.componentInstance.colorExtra.set(config.colorExtra);
         }
+        if (config.focus !== undefined) {
+            modalRef.componentInstance.focus.set(config.focus);
+        }
         modalRef.componentInstance.maxLength.set(config.maxLength ?? 200);
         return modalRef;
     }
-    mostrarModalConfirmacion(config) {
-        return this.open(config).result;
+    async mostrarModalConfirmacion(config) {
+        return handleModalReturn(await this.open(config));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationService, providedIn: 'root' });
@@ -4990,22 +5039,6 @@ function handleResourceV2(fn, signal) {
     });
 }
 
-function configModal(size = 'xl') {
-    return { size, backdrop: 'static' };
-}
-function handleModal(modalRef, onSuccess, onDismiss) {
-    modalRef.result.then((result) => {
-        if (!result)
-            return;
-        onSuccess(result);
-    }, () => onDismiss?.());
-}
-function handleModalReturn(modalRef) {
-    return modalRef.result
-        .then((result) => result ?? null)
-        .catch(() => null);
-}
-
 var TABLE_EVENTS;
 (function (TABLE_EVENTS) {
     TABLE_EVENTS[TABLE_EVENTS["CLICK"] = 1] = "CLICK";