ng-components-tsi 0.0.49 → 0.0.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ng-components-tsi.mjs +296 -244
- package/fesm2022/ng-components-tsi.mjs.map +1 -1
- package/lib/modals/general/md-generico/md-generico.component.d.ts +3 -2
- package/lib/models/button-color.model.d.ts +1 -1
- package/lib/ui/forms/inputs/input/input.component.d.ts +4 -4
- package/lib/ui/forms/inputs/input-radio/input-radio.component.d.ts +1 -1
- package/lib/ui/forms/lists/list-option/list-option.component.d.ts +1 -1
- package/lib/ui/tables/paginador/paginador.component.d.ts +1 -1
- package/lib/ui/tables/table-ultimate/table-ultimate.component.d.ts +86 -57
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ import { FormsModule, NgModel } from '@angular/forms';
|
|
|
7
7
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
8
8
|
import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
|
9
9
|
import { NgbTooltipModule, NgbActiveModal, NgbDropdownModule, NgbDropdown, NgbNavModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
|
10
|
-
import { validaArray, validarVacioAndNull, getFirstItem, beep, cleanNumber, obtenerTipoClases, validarBoolean, formatNumber } from 'shared-tsi';
|
|
10
|
+
import { validaArray, validarVacioAndNull, getFirstItem, beep, cleanNumber, obtenerTipoClases, validarBoolean, formatNumber, formatDecimal } from 'shared-tsi';
|
|
11
11
|
import { trigger, transition, style, animate, state } from '@angular/animations';
|
|
12
12
|
import * as i1$3 from '@angular/cdk/overlay';
|
|
13
13
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
@@ -213,11 +213,11 @@ class ButtonComponent {
|
|
|
213
213
|
return this.atajo() ? `${this.texto()}: Ctrl + ${this.atajo()}` : "";
|
|
214
214
|
};
|
|
215
215
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
216
|
-
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"] }] });
|
|
216
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, texto: { classPropertyName: "texto", publicName: "texto", isSignal: true, isRequired: false, transformFunction: null }, isHtml: { classPropertyName: "isHtml", publicName: "isHtml", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, sunatButton: { classPropertyName: "sunatButton", publicName: "sunatButton", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null }, buttonDeshabilitado: { classPropertyName: "buttonDeshabilitado", publicName: "buttonDeshabilitado", isSignal: true, isRequired: false, transformFunction: null }, atajo: { classPropertyName: "atajo", publicName: "atajo", isSignal: true, isRequired: false, transformFunction: null }, dropdownButton: { classPropertyName: "dropdownButton", publicName: "dropdownButton", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, uploadButton: { classPropertyName: "uploadButton", publicName: "uploadButton", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, isNotStyle: { classPropertyName: "isNotStyle", publicName: "isNotStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accion: "accion", fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "buttonNormal", first: true, predicate: ["boton"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n [style.--focus-color-rgb]=\"getFocusColor()\"\r\n [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\r\n class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n [ngClass]=\"outline() ? getColorClassOutline() : getColorClass() + (hasFocus() ? ' aura-focus' : '') \" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n [id]=\"`id_button_${texto()}`\">\r\n @if (icon() == 'sunat') {\r\n <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n }@else {\r\n <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n }\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass()]\" (click)=\"ejecutarAccion()\"\r\n [disabled]=\"disabled()\">\r\n <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ?\r\n texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n @if(texto()){\r\n <span>{{ texto() }}</span>\r\n }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n @if(uploadButton()){\r\n <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out,aura-pulse 1.5s ease-out infinite}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}@keyframes aura-pulse{0%{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, .5))}50%{box-shadow:0 0 0 6px rgba(var(--focus-color-rgb, 0, 123, 255),.2)}to{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, 0))}}.aura-focus{animation:aura-pulse 1.5s ease-out infinite;outline:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: AtajosDirective, selector: "[atajoTecla]", inputs: ["altKeyCombination"], outputs: ["emitirAtajo"] }] });
|
|
217
217
|
}
|
|
218
218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
219
219
|
type: Component,
|
|
220
|
-
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"] }]
|
|
220
|
+
args: [{ selector: 'app-button', imports: [CommonModule, NgbTooltipModule, AtajosDirective], template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !sunatButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n [style.--focus-color-rgb]=\"getFocusColor()\"\r\n [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\r\n class=\"{{ isNotStyle() ? 'btn btn-sm' : (isRounded() ? 'circle button-tilt-hover' : 'btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100') }}\"\r\n [ngClass]=\"outline() ? getColorClassOutline() : getColorClass() + (hasFocus() ? ' aura-focus' : '') \" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n [id]=\"`id_button_${texto()}`\">\r\n @if (icon() == 'sunat') {\r\n <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n }@else {\r\n <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n }\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n</button>\r\n}\r\n@if(sunatButton()){\r\n<button atajoTecla [altKeyCombination]=\"atajo()\"\r\n (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\"\r\n class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass()]\" (click)=\"ejecutarAccion()\"\r\n [disabled]=\"disabled()\">\r\n <img src=\"../../../../../assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\"> {{texto() ?\r\n texto() : 'Importar de SUNAT'}}\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n @if(texto()){\r\n <span>{{ texto() }}</span>\r\n }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n <i class=\"me-1\" [ngClass]=\"getIconClass()\"></i>\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n @if(uploadButton()){\r\n <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n</button>\r\n}", styles: [".no-border{border:none!important}.button-icon-hover{display:inline-block}.btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out,aura-pulse 1.5s ease-out infinite}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.dropdown-item{font-size:12px!important;padding:7px 20px;color:#757575;transition:color .3s ease-in-out}.dropdown-item:hover{background:#e8e8e8;color:#222}.tooltip-inner{white-space:nowrap;max-width:none!important}:host ::ng-deep .tooltip-inner{white-space:nowrap;max-width:none!important}.radius-none{border-radius:0}.padd{padding:3px 8px!important}.circle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;border-radius:100%;color:#fff;transition:box-shadow .3s ease;display:flex!important;justify-content:center!important;align-items:center!important}.circle:hover{box-shadow:0 4px 12px #0003}@keyframes aura-pulse{0%{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, .5))}50%{box-shadow:0 0 0 6px rgba(var(--focus-color-rgb, 0, 123, 255),.2)}to{box-shadow:0 0 0 0 var(--focus-color, rgba(0, 123, 255, 0))}}.aura-focus{animation:aura-pulse 1.5s ease-out infinite;outline:none!important}\n"] }]
|
|
221
221
|
}], ctorParameters: () => [], propDecorators: { fileInput: [{
|
|
222
222
|
type: ViewChild,
|
|
223
223
|
args: ['fileInput']
|
|
@@ -462,7 +462,7 @@ class ToasterComponent {
|
|
|
462
462
|
this.toastService.remove(id);
|
|
463
463
|
}
|
|
464
464
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
465
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToasterComponent, isStandalone: true, selector: "app-toaster", ngImport: i0, template: "<div class=\"toastr-container\">\r\n @for (toast of toastNormal; track toast.id) {\r\n\r\n <div class=\"toast {{toast.type}}\" [ngClass]=\"{'bg-white': toast.type == 'loading'}\" [@toastAnimation]>\r\n\r\n @if (toast.type == 'loading') {\r\n\r\n <div class=\"toast-icon\">\r\n @if (toast.progress < 100) {\r\n <div class=\"spinner\"></div>\r\n }@else {\r\n <i class=\"fas fa-check checkmark\"></i>\r\n }\r\n \r\n </div>\r\n <div class=\"toast-content\">\r\n <h4 class=\"toast-title text-dark\">{{ toast.title }}</h4>\r\n <p class=\"toast-message text-dark\">{{ toast.message }}</p>\r\n </div>\r\n }@else {\r\n <div class=\"toast-icon\">\r\n <i class=\"{{iconType[toast.type]}}\"></i>\r\n </div>\r\n <div class=\"toast-content\">\r\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n <p class=\"toast-message\">{{ toast.message }}</p>\r\n </div>\r\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n <div class=\"toast-loader\"></div>\r\n }\r\n\r\n\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"toastr-webpush shadow\">\r\n @for (toast of toastWebPush; track toast.id) {\r\n <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\r\n <div class=\"toast-icon\">\r\n <img src=\"
|
|
465
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToasterComponent, isStandalone: true, selector: "app-toaster", ngImport: i0, template: "<div class=\"toastr-container\">\r\n @for (toast of toastNormal; track toast.id) {\r\n\r\n <div class=\"toast {{toast.type}}\" [ngClass]=\"{'bg-white': toast.type == 'loading'}\" [@toastAnimation]>\r\n\r\n @if (toast.type == 'loading') {\r\n\r\n <div class=\"toast-icon\">\r\n @if (toast.progress < 100) {\r\n <div class=\"spinner\"></div>\r\n }@else {\r\n <i class=\"fas fa-check checkmark\"></i>\r\n }\r\n \r\n </div>\r\n <div class=\"toast-content\">\r\n <h4 class=\"toast-title text-dark\">{{ toast.title }}</h4>\r\n <p class=\"toast-message text-dark\">{{ toast.message }}</p>\r\n </div>\r\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n }@else {\r\n <div class=\"toast-icon\">\r\n <i class=\"{{iconType[toast.type]}}\"></i>\r\n </div>\r\n <div class=\"toast-content\">\r\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n <p class=\"toast-message\">{{ toast.message }}</p>\r\n </div>\r\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n <div class=\"toast-loader\"></div>\r\n }\r\n\r\n\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"toastr-webpush shadow\">\r\n @for (toast of toastWebPush; track toast.id) {\r\n <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\r\n <div class=\"toast-icon\">\r\n <img src=\"assets/images/logo-tsi-tres.png\" alt=\"\">\r\n </div>\r\n <div class=\"toast-content-webpush\">\r\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n <p class=\"toast-message-webpush\">{{ toast.message }}</p>\r\n <p class=\"toast-subtitle\">{{ toast.subtitle }}</p>\r\n </div>\r\n <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n <div class=\"toast-loader-webpush\"></div>\r\n </div>\r\n }\r\n</div>", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:10px;right:10px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;cursor:pointer}.toast{display:flex;align-items:center;width:350px;min-height:35px;border-radius:4px;margin-bottom:10px;overflow:hidden;position:relative;font-family:Poppins,sans-serif}.toast-icon i{display:flex;align-items:center;justify-content:center;width:25px!important;height:25px!important;padding:12px;margin-left:10px;border-radius:100%;color:#fff;animation:iconPopIn 1.5s ease-in-out infinite;transform-origin:center}.toast-content{flex-grow:1;padding:12px 8px 1px}.toast-title{font-weight:600;margin-bottom:3px;font-size:13px}.toast-message{font-size:13px;padding:0 8px}.toast-close{position:absolute;top:5px;right:10px;background:none;border:none;font-weight:600;font-size:22px!important;cursor:pointer;padding:0;color:inherit;opacity:.7;transition:opacity .2s ease-in-out}.toast-close:hover{opacity:1}.success{background-color:#00c68e;color:#fff}.error{background-color:#bd362f;color:#fff}.info{background-color:#398bf7;color:#fff}.warning{background-color:#ffa908;color:#fff}.success .toast-loader{background-color:#00a879}.error .toast-loader{background-color:#ffe4e3}.info .toast-loader{background-color:#2796b4}.warning .toast-loader{background-color:#eeeeeee8}.toast-loader{position:absolute;bottom:0;left:0;height:4px;animation:loader 3s linear}@keyframes loader{0%{width:100%}to{width:0%}}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:4px;animation:loader 10s linear}.webpush .toast-loader-webpush{background-color:#c6c6c6}.webpush{background-color:#f8f8f8;color:#000}.toastr-webpush{position:fixed;bottom:10px!important;right:10px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;cursor:pointer}.toast-webpush{display:flex;align-items:center;width:350px;min-height:120px;border-radius:4px;margin-bottom:0;overflow:hidden;position:relative;font-family:Poppins,sans-serif}.toast-icon img{display:flex;align-items:center;justify-content:center;width:80px!important;height:80px!important;padding:12px;margin-left:10px;border-radius:100%}.toast-content-webpush{flex-grow:1;padding:5px 8px 1px}.toast-message-webpush{font-size:11px;color:gray;margin-bottom:8px;padding-bottom:0}.toast-subtitle{font-size:10px;color:#a0a0a0;padding:0;margin:0}.toast-close-webpush{position:absolute;top:5px;right:10px;background:none;border:none;font-weight:600;font-size:22px!important;cursor:pointer;padding:0;color:inherit;opacity:.3;transition:opacity .2s ease-in-out}.toast-close-webpush:hover{opacity:1}@media (max-width: 400px){.toast,.toast-webpush{width:100%}.toastr-container,.toastr-webpush{left:10px;right:25px}}@keyframes iconPopIn{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.spinner{width:24px;height:24px;border:3px solid #ccc;border-top:3px solid #333;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px;margin-left:10px;display:inline-block;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.checkmark{width:24px;height:24px;color:green!important;border-radius:100%;border:1px solid green;font-weight:700;margin-right:10px;margin-left:10px;display:inline-block;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
466
466
|
trigger('toastAnimation', [
|
|
467
467
|
transition(':enter', [
|
|
468
468
|
style({ transform: 'translateY(100%)', opacity: 0 }),
|
|
@@ -486,7 +486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
486
486
|
animate('300ms ease-in', style({ transform: 'translateY(100%)', opacity: 0 }))
|
|
487
487
|
])
|
|
488
488
|
])
|
|
489
|
-
], template: "<div class=\"toastr-container\">\r\n @for (toast of toastNormal; track toast.id) {\r\n\r\n <div class=\"toast {{toast.type}}\" [ngClass]=\"{'bg-white': toast.type == 'loading'}\" [@toastAnimation]>\r\n\r\n @if (toast.type == 'loading') {\r\n\r\n <div class=\"toast-icon\">\r\n @if (toast.progress < 100) {\r\n <div class=\"spinner\"></div>\r\n }@else {\r\n <i class=\"fas fa-check checkmark\"></i>\r\n }\r\n \r\n </div>\r\n <div class=\"toast-content\">\r\n <h4 class=\"toast-title text-dark\">{{ toast.title }}</h4>\r\n <p class=\"toast-message text-dark\">{{ toast.message }}</p>\r\n </div>\r\n }@else {\r\n <div class=\"toast-icon\">\r\n <i class=\"{{iconType[toast.type]}}\"></i>\r\n </div>\r\n <div class=\"toast-content\">\r\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n <p class=\"toast-message\">{{ toast.message }}</p>\r\n </div>\r\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n <div class=\"toast-loader\"></div>\r\n }\r\n\r\n\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"toastr-webpush shadow\">\r\n @for (toast of toastWebPush; track toast.id) {\r\n <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\r\n <div class=\"toast-icon\">\r\n <img src=\"
|
|
489
|
+
], template: "<div class=\"toastr-container\">\r\n @for (toast of toastNormal; track toast.id) {\r\n\r\n <div class=\"toast {{toast.type}}\" [ngClass]=\"{'bg-white': toast.type == 'loading'}\" [@toastAnimation]>\r\n\r\n @if (toast.type == 'loading') {\r\n\r\n <div class=\"toast-icon\">\r\n @if (toast.progress < 100) {\r\n <div class=\"spinner\"></div>\r\n }@else {\r\n <i class=\"fas fa-check checkmark\"></i>\r\n }\r\n \r\n </div>\r\n <div class=\"toast-content\">\r\n <h4 class=\"toast-title text-dark\">{{ toast.title }}</h4>\r\n <p class=\"toast-message text-dark\">{{ toast.message }}</p>\r\n </div>\r\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n }@else {\r\n <div class=\"toast-icon\">\r\n <i class=\"{{iconType[toast.type]}}\"></i>\r\n </div>\r\n <div class=\"toast-content\">\r\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n <p class=\"toast-message\">{{ toast.message }}</p>\r\n </div>\r\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n <div class=\"toast-loader\"></div>\r\n }\r\n\r\n\r\n </div>\r\n }\r\n</div>\r\n\r\n<div class=\"toastr-webpush shadow\">\r\n @for (toast of toastWebPush; track toast.id) {\r\n <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\r\n <div class=\"toast-icon\">\r\n <img src=\"assets/images/logo-tsi-tres.png\" alt=\"\">\r\n </div>\r\n <div class=\"toast-content-webpush\">\r\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\r\n <p class=\"toast-message-webpush\">{{ toast.message }}</p>\r\n <p class=\"toast-subtitle\">{{ toast.subtitle }}</p>\r\n </div>\r\n <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\u00D7</button>\r\n <div class=\"toast-loader-webpush\"></div>\r\n </div>\r\n }\r\n</div>", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:10px;right:10px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;cursor:pointer}.toast{display:flex;align-items:center;width:350px;min-height:35px;border-radius:4px;margin-bottom:10px;overflow:hidden;position:relative;font-family:Poppins,sans-serif}.toast-icon i{display:flex;align-items:center;justify-content:center;width:25px!important;height:25px!important;padding:12px;margin-left:10px;border-radius:100%;color:#fff;animation:iconPopIn 1.5s ease-in-out infinite;transform-origin:center}.toast-content{flex-grow:1;padding:12px 8px 1px}.toast-title{font-weight:600;margin-bottom:3px;font-size:13px}.toast-message{font-size:13px;padding:0 8px}.toast-close{position:absolute;top:5px;right:10px;background:none;border:none;font-weight:600;font-size:22px!important;cursor:pointer;padding:0;color:inherit;opacity:.7;transition:opacity .2s ease-in-out}.toast-close:hover{opacity:1}.success{background-color:#00c68e;color:#fff}.error{background-color:#bd362f;color:#fff}.info{background-color:#398bf7;color:#fff}.warning{background-color:#ffa908;color:#fff}.success .toast-loader{background-color:#00a879}.error .toast-loader{background-color:#ffe4e3}.info .toast-loader{background-color:#2796b4}.warning .toast-loader{background-color:#eeeeeee8}.toast-loader{position:absolute;bottom:0;left:0;height:4px;animation:loader 3s linear}@keyframes loader{0%{width:100%}to{width:0%}}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:4px;animation:loader 10s linear}.webpush .toast-loader-webpush{background-color:#c6c6c6}.webpush{background-color:#f8f8f8;color:#000}.toastr-webpush{position:fixed;bottom:10px!important;right:10px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;cursor:pointer}.toast-webpush{display:flex;align-items:center;width:350px;min-height:120px;border-radius:4px;margin-bottom:0;overflow:hidden;position:relative;font-family:Poppins,sans-serif}.toast-icon img{display:flex;align-items:center;justify-content:center;width:80px!important;height:80px!important;padding:12px;margin-left:10px;border-radius:100%}.toast-content-webpush{flex-grow:1;padding:5px 8px 1px}.toast-message-webpush{font-size:11px;color:gray;margin-bottom:8px;padding-bottom:0}.toast-subtitle{font-size:10px;color:#a0a0a0;padding:0;margin:0}.toast-close-webpush{position:absolute;top:5px;right:10px;background:none;border:none;font-weight:600;font-size:22px!important;cursor:pointer;padding:0;color:inherit;opacity:.3;transition:opacity .2s ease-in-out}.toast-close-webpush:hover{opacity:1}@media (max-width: 400px){.toast,.toast-webpush{width:100%}.toastr-container,.toastr-webpush{left:10px;right:25px}}@keyframes iconPopIn{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.spinner{width:24px;height:24px;border:3px solid #ccc;border-top:3px solid #333;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px;margin-left:10px;display:inline-block;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.checkmark{width:24px;height:24px;color:green!important;border-radius:100%;border:1px solid green;font-weight:700;margin-right:10px;margin-left:10px;display:inline-block;vertical-align:middle}\n"] }]
|
|
490
490
|
}] });
|
|
491
491
|
|
|
492
492
|
class DropdownCdkComponent {
|
|
@@ -2148,11 +2148,11 @@ class DropdownMenuComponent {
|
|
|
2148
2148
|
return null;
|
|
2149
2149
|
}
|
|
2150
2150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2151
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, buttonProperties: { classPropertyName: "buttonProperties", publicName: "buttonProperties", isSignal: true, isRequired: false, transformFunction: null }, hoverTrigger: { classPropertyName: "hoverTrigger", publicName: "hoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: NgbDropdown, descendants: true }, { propertyName: "submenuAnchors", predicate: ["submenuAnchor"], descendants: true }, { propertyName: "submenuDivs", predicate: ["submenuDiv"], descendants: true }], ngImport: i0, template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n @if (buttonProps()) {\r\n <button [colorBtn]=\"buttonProps()?.color || null\"\r\n [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"\r\n class=\"button-tilt-hover w-auto w-sm-100\" [ngClass]=\"{\r\n 'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n 'pbp-6 wrap': !inputButton()\r\n }\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\" (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i
|
|
2151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, buttonProperties: { classPropertyName: "buttonProperties", publicName: "buttonProperties", isSignal: true, isRequired: false, transformFunction: null }, hoverTrigger: { classPropertyName: "hoverTrigger", publicName: "hoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: NgbDropdown, descendants: true }, { propertyName: "submenuAnchors", predicate: ["submenuAnchor"], descendants: true }, { propertyName: "submenuDivs", predicate: ["submenuDiv"], descendants: true }], ngImport: i0, template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n @if (buttonProps()) {\r\n <button [colorBtn]=\"buttonProps()?.color || null\"\r\n [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"\r\n class=\"button-tilt-hover w-auto w-sm-100\" [ngClass]=\"{\r\n 'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n 'pbp-6 wrap': !inputButton()\r\n }\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\" (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n @if (buttonProps()?.icon == 'sunat') {\r\n <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n }@else {\r\n <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i>\r\n } {{ buttonProps()?.texto }}\r\n </button>\r\n } @else {\r\n <button class=\"btn btn-sm border-0\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n (mouseleave)=\"handleMainButtonMouseLeave()\" [disabled]=\"disabled()\">\r\n <i class=\"fas fa-align-left fs-6\"></i>\r\n </button>\r\n }\r\n\r\n <div ngbDropdownMenu class=\"my-0 py-0\" (mouseenter)=\"!isMobile() && handleDropdownMouseEnter()\"\r\n (mouseleave)=\"!isMobile() && handleDropdownMouseLeave()\">\r\n @for (option of visibleOptions(); track $index) {\r\n @if (isMobile() && option.submenu) {\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\" [uploadButton]=\"sub.upload\"\r\n [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\" [extraClass]=\"\r\n (isFirstMobileItem(sub) ? 'border-top-radius ' : '') +\r\n (isLastMobileItem(sub) ? 'border-bottom-radius' : '')\r\n \" [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n }\r\n @else if (!option.submenu || (option.submenu && !isMobile())) {\r\n <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n (mouseenter)=\"!isMobile() && submenuAnchor.open()\">\r\n @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n (mouseleave)=\"!isMobile() && mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n @if (option.submenu && !isMobile()) {\r\n <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n (mouseleave)=\"!isMobile() && mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n </div>\r\n }\r\n </app-button>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media (max-width: 575px){.d-inline-block{display:block!important}}button.radius-none,.btn.radius-none{border-radius:0!important}.padd{padding:3px 8px!important}\n"], dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }, { kind: "directive", type: IconsDirective, selector: "[iconName]", inputs: ["iconName"] }, { kind: "directive", type: ButtonsModalDirective, selector: "[colorBtn]", inputs: ["colorBtn"] }, { kind: "directive", type: ButtonsOutlineDirective, selector: "[colorOutlineBtn]", inputs: ["colorOutlineBtn"] }] });
|
|
2152
2152
|
}
|
|
2153
2153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
2154
2154
|
type: Component,
|
|
2155
|
-
args: [{ selector: 'app-dropdown-menu', imports: [NgbDropdownModule, CommonModule, ButtonComponent, IconsDirective, ButtonsModalDirective, ButtonsOutlineDirective], template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n @if (buttonProps()) {\r\n <button [colorBtn]=\"buttonProps()?.color || null\"\r\n [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"\r\n class=\"button-tilt-hover w-auto w-sm-100\" [ngClass]=\"{\r\n 'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n 'pbp-6 wrap': !inputButton()\r\n }\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\" (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i
|
|
2155
|
+
args: [{ selector: 'app-dropdown-menu', imports: [NgbDropdownModule, CommonModule, ButtonComponent, IconsDirective, ButtonsModalDirective, ButtonsOutlineDirective], template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n @if (buttonProps()) {\r\n <button [colorBtn]=\"buttonProps()?.color || null\"\r\n [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"\r\n class=\"button-tilt-hover w-auto w-sm-100\" [ngClass]=\"{\r\n 'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n 'pbp-6 wrap': !inputButton()\r\n }\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\" (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n @if (buttonProps()?.icon == 'sunat') {\r\n <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n }@else {\r\n <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i>\r\n } {{ buttonProps()?.texto }}\r\n </button>\r\n } @else {\r\n <button class=\"btn btn-sm border-0\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n (mouseleave)=\"handleMainButtonMouseLeave()\" [disabled]=\"disabled()\">\r\n <i class=\"fas fa-align-left fs-6\"></i>\r\n </button>\r\n }\r\n\r\n <div ngbDropdownMenu class=\"my-0 py-0\" (mouseenter)=\"!isMobile() && handleDropdownMouseEnter()\"\r\n (mouseleave)=\"!isMobile() && handleDropdownMouseLeave()\">\r\n @for (option of visibleOptions(); track $index) {\r\n @if (isMobile() && option.submenu) {\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\" [uploadButton]=\"sub.upload\"\r\n [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\" [extraClass]=\"\r\n (isFirstMobileItem(sub) ? 'border-top-radius ' : '') +\r\n (isLastMobileItem(sub) ? 'border-bottom-radius' : '')\r\n \" [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n }\r\n @else if (!option.submenu || (option.submenu && !isMobile())) {\r\n <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n (mouseenter)=\"!isMobile() && submenuAnchor.open()\">\r\n @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n (mouseleave)=\"!isMobile() && mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n @if (option.submenu && !isMobile()) {\r\n <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n (mouseleave)=\"!isMobile() && mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n </div>\r\n }\r\n </app-button>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media (max-width: 575px){.d-inline-block{display:block!important}}button.radius-none,.btn.radius-none{border-radius:0!important}.padd{padding:3px 8px!important}\n"] }]
|
|
2156
2156
|
}], propDecorators: { dropdown: [{
|
|
2157
2157
|
type: ViewChild,
|
|
2158
2158
|
args: [NgbDropdown]
|
|
@@ -3542,210 +3542,210 @@ var TABLE_EVENTS;
|
|
|
3542
3542
|
TABLE_EVENTS[TABLE_EVENTS["CHECK_ROW"] = 5] = "CHECK_ROW";
|
|
3543
3543
|
})(TABLE_EVENTS || (TABLE_EVENTS = {}));
|
|
3544
3544
|
|
|
3545
|
+
/**
|
|
3546
|
+
* Tabla con virtual scroll nativo (sin librerías externas).
|
|
3547
|
+
* Solo renderiza las filas visibles + un buffer. Header y footer son sticky.
|
|
3548
|
+
*
|
|
3549
|
+
* @Input columns - Array de columnas con la misma forma que table-simple
|
|
3550
|
+
* @Input rows - Array completo de datos
|
|
3551
|
+
* @Input rowHeight - Alto fijo de cada fila en px (default: 30)
|
|
3552
|
+
* @Input buffer - Filas extra renderizadas fuera del viewport (default: 10)
|
|
3553
|
+
* @Input altoContainer - Alto fijo del contenedor en px (default: 400). Se ignora si se usa altoContenedor.
|
|
3554
|
+
* @Input altoContenedor - Offset desde el top del viewport en px. Activa height: clamp(minAlto, calc(100vh - offset), 100vh).
|
|
3555
|
+
* @Input minAlto - Altura mínima en px cuando se usa altoContenedor (default: 200)
|
|
3556
|
+
* @Input footerRows - Filas del footer (totales, resumen, etc.)
|
|
3557
|
+
* @Input identifier - Campos que forman la clave para selectedRow
|
|
3558
|
+
* @Input withFiltro - Muestra input de búsqueda local
|
|
3559
|
+
* @Input withDetails - Muestra detalles expandibles por fila
|
|
3560
|
+
* @Input withCheckbox - Muestra checkbox para selección de filas
|
|
3561
|
+
* @Input withTotal - Muestra fila de totales en el footer
|
|
3562
|
+
*/
|
|
3545
3563
|
class TableUltimateComponent {
|
|
3546
|
-
|
|
3564
|
+
// @ViewChild('scrollContainer') scrollContainer!: ElementRef<HTMLDivElement>;
|
|
3565
|
+
scrollContainer = viewChild('scrollContainer');
|
|
3547
3566
|
customActions = contentChild('customActions');
|
|
3548
|
-
anchor = viewChild('anchor');
|
|
3549
3567
|
formateador = inject(FormateadorService);
|
|
3550
|
-
|
|
3551
|
-
titleTabla = input('Contrato');
|
|
3568
|
+
// ── Inputs ──────────────────────────────────────────────────────────────────
|
|
3552
3569
|
rows = input([]);
|
|
3553
3570
|
columns = input([]);
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
|
|
3571
|
+
footerRows = input([]);
|
|
3572
|
+
rowHeight = input(30);
|
|
3573
|
+
buffer = input(10);
|
|
3574
|
+
altoContainer = input(400);
|
|
3575
|
+
altoContenedor = input(0);
|
|
3576
|
+
minAlto = input(200);
|
|
3560
3577
|
identifier = input([]);
|
|
3561
|
-
|
|
3578
|
+
withFiltro = input(false);
|
|
3579
|
+
withDetails = input(false);
|
|
3580
|
+
withCheckbox = input(false);
|
|
3581
|
+
withTotal = input(false);
|
|
3562
3582
|
withHeight = input(false);
|
|
3563
3583
|
rendered = input([]);
|
|
3564
|
-
|
|
3565
|
-
withCheckbox = input(false);
|
|
3566
|
-
selectItems = model([]);
|
|
3567
|
-
isDarkMode = input(false);
|
|
3568
|
-
sortColumn = null;
|
|
3569
|
-
sortDirection = 'asc';
|
|
3570
|
-
expandedRows = -1;
|
|
3584
|
+
titleTabla = input('Contrato');
|
|
3571
3585
|
activeMobileMode = input(true);
|
|
3572
|
-
/* VARIABLES PARA OPTIMIZAR */
|
|
3573
|
-
dataVirtual = signal([]);
|
|
3574
|
-
isLoading = signal(false);
|
|
3575
3586
|
isLoadingResponsive = signal(false);
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3587
|
+
isMobile = signal(window.innerWidth <= 768);
|
|
3588
|
+
// ── Output ──────────────────────────────────────────────────────────────────
|
|
3589
|
+
rowEvent = output();
|
|
3590
|
+
// ── ROW ACTIONS ──────────────────────────────────────────────────────────────────
|
|
3591
|
+
selectedRow = model(null);
|
|
3580
3592
|
rowClassFn = input(null);
|
|
3581
3593
|
rowDisabledFn = input(null);
|
|
3582
|
-
|
|
3594
|
+
selectItems = model([]);
|
|
3583
3595
|
rowFormat = computed(() => this.formateador.procesarLista(this.rows(), this.columns()));
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3596
|
+
// ── Estado interno ───────────────────────────────────────────────────────────
|
|
3597
|
+
busqueda = signal('');
|
|
3598
|
+
scrollTop = signal(0);
|
|
3599
|
+
containerHeight = signal(0); // altura real medida del DOM
|
|
3600
|
+
// ── Sort ─────────────────────────────────────────────────────────────────────
|
|
3601
|
+
sortField = signal(null);
|
|
3602
|
+
sortDir = signal('none');
|
|
3603
|
+
//-- EXPANDED ROWS
|
|
3604
|
+
expandedRows = signal(null);
|
|
3605
|
+
// ── CSS height del contenedor ─────────────────────────────────────────────────
|
|
3606
|
+
/** Valor aplicado como [style.height] en el template */
|
|
3607
|
+
heightStyle = computed(() => {
|
|
3608
|
+
if (this.altoContenedor() > 0) {
|
|
3609
|
+
return `clamp(${this.minAlto()}px, calc(100vh - ${this.altoContenedor()}px), 100vh)`;
|
|
3610
|
+
}
|
|
3611
|
+
return `${this.altoContainer()}px`;
|
|
3589
3612
|
});
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
const
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3613
|
+
// ── Filtrado + Ordenamiento ───────────────────────────────────────────────────
|
|
3614
|
+
rowFilter = computed(() => {
|
|
3615
|
+
const term = this.busqueda().toLowerCase().trim();
|
|
3616
|
+
const filtered = term
|
|
3617
|
+
? this.rowFormat().filter(item => this.filtraItem(item, term))
|
|
3618
|
+
: this.rowFormat();
|
|
3619
|
+
const field = this.sortField();
|
|
3620
|
+
const dir = this.sortDir();
|
|
3621
|
+
if (!field || dir === 'none')
|
|
3622
|
+
return filtered;
|
|
3623
|
+
return [...filtered].sort((a, b) => {
|
|
3624
|
+
const valueA = a[field] ?? '';
|
|
3625
|
+
const valueB = b[field] ?? '';
|
|
3626
|
+
if (typeof valueA === 'number' && typeof valueB === 'number') {
|
|
3627
|
+
return dir === 'asc' ? valueA - valueB : valueB - valueA;
|
|
3596
3628
|
}
|
|
3597
|
-
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
const checked = event.target.checked;
|
|
3602
|
-
const filtros = this.filtrarColumnas();
|
|
3603
|
-
Object.keys(filtros).forEach(key => {
|
|
3604
|
-
filtros[key] = checked;
|
|
3605
|
-
});
|
|
3606
|
-
}
|
|
3607
|
-
visibilidadColumn = linkedSignal(() => {
|
|
3608
|
-
const columnVisibility = {};
|
|
3609
|
-
this.columns().forEach(col => {
|
|
3610
|
-
if (col.fieldname) {
|
|
3611
|
-
columnVisibility[col.fieldname] = true;
|
|
3629
|
+
const numA = Number(valueA);
|
|
3630
|
+
const numB = Number(valueB);
|
|
3631
|
+
if (!isNaN(numA) && !isNaN(numB)) {
|
|
3632
|
+
return dir === 'asc' ? numA - numB : numB - numA;
|
|
3612
3633
|
}
|
|
3634
|
+
const va = String(valueA).toLowerCase();
|
|
3635
|
+
const vb = String(valueB).toLowerCase();
|
|
3636
|
+
const cmp = va.localeCompare(vb, undefined, { numeric: true });
|
|
3637
|
+
return dir === 'asc' ? cmp : -cmp;
|
|
3613
3638
|
});
|
|
3614
|
-
return columnVisibility;
|
|
3615
3639
|
});
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
|
|
3636
|
-
|
|
3637
|
-
|
|
3638
|
-
|
|
3639
|
-
|
|
3640
|
-
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
|
|
3644
|
-
|
|
3645
|
-
|
|
3646
|
-
|
|
3647
|
-
if (!this.activeMobileMode())
|
|
3648
|
-
return;
|
|
3649
|
-
this.isMobile();
|
|
3650
|
-
this.isLoadingResponsive.set(true);
|
|
3651
|
-
setTimeout(() => this.isLoadingResponsive.set(false), 200);
|
|
3652
|
-
});
|
|
3653
|
-
effect(() => {
|
|
3654
|
-
if (this.anchor()) {
|
|
3655
|
-
this.actionsAnchor();
|
|
3656
|
-
}
|
|
3657
|
-
});
|
|
3658
|
-
effect(() => {
|
|
3659
|
-
const rows = this.rowFilter();
|
|
3660
|
-
const shouldSelectAll = this.selectAllOnLoad();
|
|
3661
|
-
if (!rows?.length)
|
|
3662
|
-
return;
|
|
3663
|
-
if (!shouldSelectAll)
|
|
3664
|
-
return;
|
|
3665
|
-
if (this.initialized)
|
|
3666
|
-
return;
|
|
3667
|
-
this.initialized = true;
|
|
3668
|
-
this.checkAll(true);
|
|
3669
|
-
});
|
|
3670
|
-
}
|
|
3671
|
-
onResize(event) {
|
|
3672
|
-
if (!this.activeMobileMode())
|
|
3640
|
+
// ── Virtual scroll ────────────────────────────────────────────────────────────
|
|
3641
|
+
totalHeight = computed(() => this.rowFilter().length * this.rowHeight());
|
|
3642
|
+
startIndex = computed(() => {
|
|
3643
|
+
const idx = Math.floor(this.scrollTop() / this.rowHeight()) - this.buffer();
|
|
3644
|
+
return Math.max(0, idx);
|
|
3645
|
+
});
|
|
3646
|
+
endIndex = computed(() => {
|
|
3647
|
+
const visible = Math.ceil(this.containerHeight() / this.rowHeight());
|
|
3648
|
+
const idx = this.startIndex() + visible + this.buffer() * 2;
|
|
3649
|
+
return Math.min(this.rowFilter().length - 1, idx);
|
|
3650
|
+
});
|
|
3651
|
+
visibleRows = computed(() => this.rowFilter().slice(this.startIndex(), this.endIndex() + 1));
|
|
3652
|
+
/** Espacio en blanco antes de las filas renderizadas */
|
|
3653
|
+
paddingTop = computed(() => this.startIndex() * this.rowHeight());
|
|
3654
|
+
/** Espacio en blanco después de las filas renderizadas */
|
|
3655
|
+
paddingBottom = computed(() => {
|
|
3656
|
+
const remaining = this.rowFilter().length - this.endIndex() - 1;
|
|
3657
|
+
return Math.max(0, remaining * this.rowHeight());
|
|
3658
|
+
});
|
|
3659
|
+
// ── Scroll hacia fila seleccionada al cargar datos ───────────────────────────
|
|
3660
|
+
scrollEffect = effect(() => {
|
|
3661
|
+
const rows = this.rowFilter();
|
|
3662
|
+
const selected = untracked(() => this.selectedRow());
|
|
3663
|
+
if (rows.length > 0 && selected != null) {
|
|
3664
|
+
queueMicrotask(() => this.scrollToSelected(selected));
|
|
3665
|
+
}
|
|
3666
|
+
});
|
|
3667
|
+
// ── ResizeObserver ────────────────────────────────────────────────────────────
|
|
3668
|
+
resizeObserver;
|
|
3669
|
+
resizeEffect = effect(() => {
|
|
3670
|
+
if (!this.scrollContainer())
|
|
3673
3671
|
return;
|
|
3674
|
-
this.
|
|
3672
|
+
const el = this.scrollContainer().nativeElement;
|
|
3673
|
+
this.containerHeight.set(el.clientHeight);
|
|
3674
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
3675
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
3676
|
+
this.containerHeight.set(el.clientHeight);
|
|
3677
|
+
this.scrollTop.set(el.scrollTop);
|
|
3678
|
+
});
|
|
3679
|
+
this.resizeObserver.observe(el);
|
|
3680
|
+
}
|
|
3681
|
+
});
|
|
3682
|
+
// ngAfterViewInit() {
|
|
3683
|
+
// const el = this.scrollContainer?.nativeElement;
|
|
3684
|
+
// if (!el) return;
|
|
3685
|
+
// this.containerHeight.set(el.clientHeight);
|
|
3686
|
+
// if (typeof ResizeObserver !== 'undefined') {
|
|
3687
|
+
// this.resizeObserver = new ResizeObserver(() => {
|
|
3688
|
+
// this.containerHeight.set(el.clientHeight);
|
|
3689
|
+
// this.scrollTop.set(el.scrollTop);
|
|
3690
|
+
// });
|
|
3691
|
+
// this.resizeObserver.observe(el);
|
|
3692
|
+
// }
|
|
3693
|
+
// }
|
|
3694
|
+
ngOnDestroy() {
|
|
3695
|
+
this.resizeObserver?.disconnect();
|
|
3675
3696
|
}
|
|
3676
|
-
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
this.dataVirtual.set(firstBatch);
|
|
3680
|
-
this.loadedCount = firstBatch.length;
|
|
3697
|
+
// ── Manejadores ──────────────────────────────────────────────────────────────
|
|
3698
|
+
onScroll(event) {
|
|
3699
|
+
this.scrollTop.set(event.target.scrollTop);
|
|
3681
3700
|
}
|
|
3682
|
-
|
|
3683
|
-
this.
|
|
3684
|
-
|
|
3685
|
-
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3701
|
+
selectRow(row, idList) {
|
|
3702
|
+
this.rowEvent.emit({ usecase: TABLE_EVENTS.CLICK, data: row });
|
|
3703
|
+
if (this.identifier().length < 1) {
|
|
3704
|
+
this.selectedRow.set(idList);
|
|
3705
|
+
}
|
|
3706
|
+
else {
|
|
3707
|
+
this.selectedRow.set(this.concatenarValue(row, this.identifier()));
|
|
3708
|
+
}
|
|
3689
3709
|
}
|
|
3690
|
-
|
|
3710
|
+
isSelected(row, idList) {
|
|
3691
3711
|
if (this.identifier().length < 1) {
|
|
3692
|
-
return this.selectedRow
|
|
3712
|
+
return this.selectedRow() == idList;
|
|
3693
3713
|
}
|
|
3694
|
-
this.selectedRow
|
|
3714
|
+
return this.selectedRow() == this.concatenarValue(row, this.identifier());
|
|
3695
3715
|
}
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3716
|
+
textoDigitado(event) {
|
|
3717
|
+
const val = event.target.value;
|
|
3718
|
+
this.busqueda.set(val);
|
|
3719
|
+
this.scrollTop.set(0);
|
|
3720
|
+
if (this.scrollContainer()?.nativeElement) {
|
|
3721
|
+
this.scrollContainer().nativeElement.scrollTop = 0;
|
|
3699
3722
|
}
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3723
|
+
}
|
|
3724
|
+
toggleSort(field) {
|
|
3725
|
+
if (this.sortField() !== field) {
|
|
3726
|
+
this.sortField.set(field);
|
|
3727
|
+
this.sortDir.set('asc');
|
|
3703
3728
|
}
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
if (typeof valueA === 'number' && typeof valueB === 'number') {
|
|
3708
|
-
return this.sortDirection === 'asc'
|
|
3709
|
-
? valueA - valueB
|
|
3710
|
-
: valueB - valueA;
|
|
3729
|
+
else {
|
|
3730
|
+
if (this.sortDir() === 'asc') {
|
|
3731
|
+
this.sortDir.set('desc');
|
|
3711
3732
|
}
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
if (!isNaN(numA) && !isNaN(numB)) {
|
|
3716
|
-
return this.sortDirection === 'asc'
|
|
3717
|
-
? numA - numB
|
|
3718
|
-
: numB - numA;
|
|
3733
|
+
else if (this.sortDir() === 'desc') {
|
|
3734
|
+
this.sortDir.set('none');
|
|
3735
|
+
this.sortField.set(null);
|
|
3719
3736
|
}
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
}
|
|
3724
|
-
this.rowFilter.set(sorted);
|
|
3725
|
-
this.resetSroll();
|
|
3726
|
-
// this.dataVirtual().sort((a, b) => {
|
|
3727
|
-
// const valueA = a[column] ?? ''
|
|
3728
|
-
// const valueB = b[column] ?? ''
|
|
3729
|
-
// if (typeof valueA == 'number' && typeof valueB == 'number') {
|
|
3730
|
-
// return this.sortDirection == 'asc' ? valueA - valueB : valueB - valueA
|
|
3731
|
-
// } else {
|
|
3732
|
-
// return this.sortDirection == 'asc'
|
|
3733
|
-
// ? valueA.toString().localeCompare(valueB.toString())
|
|
3734
|
-
// : valueB.toString().localeCompare(valueA.toString())
|
|
3735
|
-
// }
|
|
3736
|
-
// })
|
|
3737
|
-
}
|
|
3738
|
-
toggleExpandRow(index) {
|
|
3739
|
-
this.expandedRows = this.expandedRows == index ? -1 : index;
|
|
3737
|
+
else {
|
|
3738
|
+
this.sortDir.set('asc');
|
|
3739
|
+
}
|
|
3740
|
+
}
|
|
3740
3741
|
}
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3742
|
+
// ── Helpers ──────────────────────────────────────────────────────────────────
|
|
3743
|
+
concatenarValue(obj, fields) {
|
|
3744
|
+
return fields.reduce((acc, f) => acc + (obj[f] ?? ''), '');
|
|
3744
3745
|
}
|
|
3745
3746
|
getHighlight(text, fieldname) {
|
|
3746
|
-
if (text == null)
|
|
3747
|
+
if (text == null)
|
|
3747
3748
|
text = '';
|
|
3748
|
-
}
|
|
3749
3749
|
if (!this.filtrarColumnas()[fieldname] || !this.busqueda())
|
|
3750
3750
|
return text;
|
|
3751
3751
|
if (typeof text !== 'string') {
|
|
@@ -3754,13 +3754,6 @@ class TableUltimateComponent {
|
|
|
3754
3754
|
const regex = new RegExp(`(${this.busqueda()})`, 'gi');
|
|
3755
3755
|
return text?.replace(regex, '<mark>$1</mark>');
|
|
3756
3756
|
}
|
|
3757
|
-
getSituacionNumberFromColumns(row, columns) {
|
|
3758
|
-
const situacionColumn = columns.find(col => col.type == 'situacion_number');
|
|
3759
|
-
if (situacionColumn) {
|
|
3760
|
-
return row[situacionColumn.prop] || 0;
|
|
3761
|
-
}
|
|
3762
|
-
return 0;
|
|
3763
|
-
}
|
|
3764
3757
|
filtraItem(item, term) {
|
|
3765
3758
|
const columnasActivas = Object.entries(this.filtrarColumnas())
|
|
3766
3759
|
.filter(([_campo, activo]) => activo);
|
|
@@ -3771,18 +3764,107 @@ class TableUltimateComponent {
|
|
|
3771
3764
|
return valor.includes(term);
|
|
3772
3765
|
});
|
|
3773
3766
|
}
|
|
3767
|
+
scrollToSelected(selected) {
|
|
3768
|
+
const rows = this.rowFilter();
|
|
3769
|
+
const idx = this.identifier().length < 1
|
|
3770
|
+
? (typeof selected === 'number' ? selected : -1)
|
|
3771
|
+
: rows.findIndex(r => this.concatenarValue(r, this.identifier()) === selected);
|
|
3772
|
+
if (idx < 0 || !this.scrollContainer()?.nativeElement)
|
|
3773
|
+
return;
|
|
3774
|
+
const targetTop = idx * this.rowHeight();
|
|
3775
|
+
const container = this.scrollContainer().nativeElement;
|
|
3776
|
+
const containerH = this.containerHeight();
|
|
3777
|
+
if (targetTop < container.scrollTop || targetTop + this.rowHeight() > container.scrollTop + containerH) {
|
|
3778
|
+
container.scrollTop = targetTop - containerH / 2;
|
|
3779
|
+
}
|
|
3780
|
+
}
|
|
3781
|
+
/** Índice real en rowFilter de una fila visible (para isSelected) */
|
|
3782
|
+
realIndex(visibleIdx) {
|
|
3783
|
+
return this.startIndex() + visibleIdx;
|
|
3784
|
+
}
|
|
3785
|
+
/** Mostrar columnas para realizar el filtro */
|
|
3786
|
+
filtrarColumnas = computed(() => {
|
|
3787
|
+
const columns = this.columns();
|
|
3788
|
+
const filtro = {};
|
|
3789
|
+
columns.forEach((col) => {
|
|
3790
|
+
if (col.fieldname) {
|
|
3791
|
+
filtro[col.fieldname] = true;
|
|
3792
|
+
}
|
|
3793
|
+
});
|
|
3794
|
+
return filtro;
|
|
3795
|
+
});
|
|
3796
|
+
toggleFiltros(event) {
|
|
3797
|
+
const checked = event.target.checked;
|
|
3798
|
+
const filtros = this.filtrarColumnas();
|
|
3799
|
+
Object.keys(filtros).forEach(key => {
|
|
3800
|
+
filtros[key] = checked;
|
|
3801
|
+
});
|
|
3802
|
+
}
|
|
3803
|
+
/** MOSTRAR COLUMNAS DE LA TABLA */
|
|
3804
|
+
visibilidadColumn = computed(() => {
|
|
3805
|
+
const columnVisibility = {};
|
|
3806
|
+
this.columns().forEach(col => {
|
|
3807
|
+
if (col.fieldname) {
|
|
3808
|
+
columnVisibility[col.fieldname] = true;
|
|
3809
|
+
}
|
|
3810
|
+
});
|
|
3811
|
+
return columnVisibility;
|
|
3812
|
+
});
|
|
3774
3813
|
validaVisibilidad(value) {
|
|
3775
3814
|
return validarBoolean(value);
|
|
3776
3815
|
}
|
|
3777
|
-
|
|
3778
|
-
|
|
3816
|
+
/** CELL RENDER */
|
|
3817
|
+
resolveCell(col, row) {
|
|
3818
|
+
const value = row[col];
|
|
3819
|
+
const r = this.rendered().find(r => r.matches(col, value, row));
|
|
3820
|
+
return r ? r.render(value, row) : null;
|
|
3821
|
+
}
|
|
3822
|
+
getRowClass(row) {
|
|
3823
|
+
return {
|
|
3824
|
+
'text-error': row.situac == 'J',
|
|
3825
|
+
'text-alerta': row.situac == 'L'
|
|
3826
|
+
};
|
|
3779
3827
|
}
|
|
3828
|
+
getPosition(col) {
|
|
3829
|
+
if (col.position)
|
|
3830
|
+
return `text-${col.position}`;
|
|
3831
|
+
if (['decimal', 'number'].includes(col.tipo))
|
|
3832
|
+
return `text-end`;
|
|
3833
|
+
if (['fecha', 'date'].includes(col.tipo))
|
|
3834
|
+
return `text-center`;
|
|
3835
|
+
return 'text-start';
|
|
3836
|
+
}
|
|
3837
|
+
//** WITH DETAILS - EXPANDED ROW */
|
|
3838
|
+
toggleExpandRow(idRow) {
|
|
3839
|
+
const value = this.expandedRows() == idRow ? null : idRow;
|
|
3840
|
+
this.expandedRows.set(value);
|
|
3841
|
+
}
|
|
3842
|
+
//** WITH TOTAL - FOOTER DE TOTALES */
|
|
3843
|
+
getTotals(fieldname) {
|
|
3844
|
+
const itemsSelected = this.withCheckbox() ? this.selectItems().map(item => item.data) : this.rowFormat();
|
|
3845
|
+
const final = itemsSelected.reduce((acc, row) => {
|
|
3846
|
+
const val = row[fieldname];
|
|
3847
|
+
return acc + (typeof val == 'number' ? val : 0);
|
|
3848
|
+
}, 0);
|
|
3849
|
+
return formatDecimal(final);
|
|
3850
|
+
}
|
|
3851
|
+
getColspanBeforeTotals() {
|
|
3852
|
+
const columns = this.columns();
|
|
3853
|
+
const firstTotalizableIndex = columns.findIndex(c => c.totalizable);
|
|
3854
|
+
const result = firstTotalizableIndex >= 0 ? firstTotalizableIndex : columns.length;
|
|
3855
|
+
const addColumns = (this.withDetails() ? 1 : 0) + (this.withCheckbox() ? 1 : 0) + (this.customActions() ? 1 : 0);
|
|
3856
|
+
return result + addColumns;
|
|
3857
|
+
}
|
|
3858
|
+
//** WITHCHECKBOX LOGICA */
|
|
3780
3859
|
allCheck(event) {
|
|
3781
3860
|
const input = event.target;
|
|
3782
3861
|
const checked = input.checked;
|
|
3783
3862
|
this.rowEvent.emit({ usecase: TABLE_EVENTS.CHECK_ALL, data: checked });
|
|
3784
3863
|
this.checkAll(checked);
|
|
3785
3864
|
}
|
|
3865
|
+
isCheckboxDisabled(row) {
|
|
3866
|
+
return this.rowDisabledFn?.()?.(row) ?? false;
|
|
3867
|
+
}
|
|
3786
3868
|
checkAll(checked) {
|
|
3787
3869
|
if (checked) {
|
|
3788
3870
|
const total = this.rowFilter()
|
|
@@ -3817,58 +3899,7 @@ class TableUltimateComponent {
|
|
|
3817
3899
|
}
|
|
3818
3900
|
this.selectItems.update(sel => sel.filter(s => s.id != idList));
|
|
3819
3901
|
}
|
|
3820
|
-
|
|
3821
|
-
const value = row[col];
|
|
3822
|
-
const r = this.rendered().find(r => r.matches(col, value, row));
|
|
3823
|
-
return r ? r.render(value, row) : null;
|
|
3824
|
-
}
|
|
3825
|
-
getTotals(fieldname) {
|
|
3826
|
-
const itemsSelected = this.withCheckbox() ? this.selectItems().map(item => JSON.parse(item?.toString())) : this.rowFormat();
|
|
3827
|
-
const final = itemsSelected.reduce((acc, row) => {
|
|
3828
|
-
const val = row[fieldname];
|
|
3829
|
-
return acc + (typeof val == 'number' ? val : 0);
|
|
3830
|
-
}, 0);
|
|
3831
|
-
return formatNumber(this.decimalPipe, final);
|
|
3832
|
-
}
|
|
3833
|
-
getColspanBeforeTotals() {
|
|
3834
|
-
const firstTotalizableIndex = this.columns().findIndex(c => c.totalizable);
|
|
3835
|
-
const result = firstTotalizableIndex >= 0 ? firstTotalizableIndex : this.columns.length;
|
|
3836
|
-
return this.withCheckbox() ? result + 1 : result;
|
|
3837
|
-
}
|
|
3838
|
-
getRowClass(row) {
|
|
3839
|
-
return {
|
|
3840
|
-
'text-error': row.situac == 'J',
|
|
3841
|
-
'text-alerta': row.situac == 'L'
|
|
3842
|
-
};
|
|
3843
|
-
}
|
|
3844
|
-
getPosition(col) {
|
|
3845
|
-
if (col.position)
|
|
3846
|
-
return `text-${col.position}`;
|
|
3847
|
-
if (['decimal', 'number'].includes(col.tipo))
|
|
3848
|
-
return `text-end`;
|
|
3849
|
-
if (['fecha', 'date'].includes(col.tipo))
|
|
3850
|
-
return `text-center`;
|
|
3851
|
-
return 'text-start';
|
|
3852
|
-
}
|
|
3853
|
-
loadMore() {
|
|
3854
|
-
this.isLoading.set(true);
|
|
3855
|
-
setTimeout(() => {
|
|
3856
|
-
const current = this.dataVirtual();
|
|
3857
|
-
const next = this.rowFilter().slice(this.loadedCount, this.loadedCount + this.batchSize());
|
|
3858
|
-
const merged = [...current];
|
|
3859
|
-
for (const item of next) {
|
|
3860
|
-
if (!merged.some(x => x.idListTsi === item.idListTsi)) {
|
|
3861
|
-
merged.push(item);
|
|
3862
|
-
}
|
|
3863
|
-
}
|
|
3864
|
-
this.dataVirtual.set(merged);
|
|
3865
|
-
this.loadedCount += next.length;
|
|
3866
|
-
this.isLoading.set(false);
|
|
3867
|
-
}, 100);
|
|
3868
|
-
}
|
|
3869
|
-
onClick(row) {
|
|
3870
|
-
this.rowEvent.emit({ usecase: TABLE_EVENTS.CLICK, data: row });
|
|
3871
|
-
}
|
|
3902
|
+
/* EVENTOS DE LA FILA */
|
|
3872
3903
|
onDoubleClick(row) {
|
|
3873
3904
|
if (window.getSelection()?.type === 'Range')
|
|
3874
3905
|
return;
|
|
@@ -3878,13 +3909,26 @@ class TableUltimateComponent {
|
|
|
3878
3909
|
event.preventDefault();
|
|
3879
3910
|
this.rowEvent.emit({ usecase: TABLE_EVENTS.RIGHT_CLICK, data: row });
|
|
3880
3911
|
}
|
|
3912
|
+
/* MOBILE MODE */
|
|
3913
|
+
onResize(event) {
|
|
3914
|
+
if (!this.activeMobileMode())
|
|
3915
|
+
return;
|
|
3916
|
+
this.isMobile.set(event.target.innerWidth <= 768);
|
|
3917
|
+
}
|
|
3918
|
+
mobileEffect = effect(() => {
|
|
3919
|
+
if (!this.activeMobileMode())
|
|
3920
|
+
return;
|
|
3921
|
+
this.isMobile();
|
|
3922
|
+
this.isLoadingResponsive.set(true);
|
|
3923
|
+
setTimeout(() => this.isLoadingResponsive.set(false), 200);
|
|
3924
|
+
});
|
|
3881
3925
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3882
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null }, selectAllOnLoad: { classPropertyName: "selectAllOnLoad", publicName: "selectAllOnLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" \r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem(idList , $event)\"\r\n [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }@else {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
3926
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, footerRows: { classPropertyName: "footerRows", publicName: "footerRows", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, altoContenedor: { classPropertyName: "altoContenedor", publicName: "altoContenedor", isSignal: true, isRequired: false, transformFunction: null }, minAlto: { classPropertyName: "minAlto", publicName: "minAlto", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEvent: "rowEvent", selectedRow: "selectedRowChange", selectItems: "selectItemsChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n <label class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" id=\"filter_table_lazy_todos\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_table_lazy_todos\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n</div>\r\n}\r\n\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\" [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n <table class=\"ll-table\">\r\n\r\n <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <thead class=\"ll-thead\">\r\n <tr>\r\n @if (withDetails()) {\r\n <th class=\"cw-20\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40\">\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n <th [title]=\"col.caption\" [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n [style.max-width]=\"col.width ? col.width + 'px' : ''\" class=\"ll-th-sortable\"\r\n (click)=\"toggleSort(col.fieldname)\">\r\n <span class=\"ll-th-content\">\r\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n @if (sortField() === col.fieldname) {\r\n <i class=\"ms-1\"\r\n [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n } @else {\r\n <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\r\n }\r\n </span>\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <tbody>\r\n <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\r\n @if (paddingTop() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n\r\n <!-- Filas visibles -->\r\n @for (row of visibleRows(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\" (click)=\"selectRow(row, idList)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\">\r\n\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\r\n [class.fa-chevron-down]=\"expandedRows() == idList\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center cw-40\">\r\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n @if (col.template) {\r\n <td>\r\n <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\r\n </ng-container>\r\n </td>\r\n } @else {\r\n @switch (col.tipo) {\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(col.fieldname, row);\r\n @if (resolverItem) {\r\n <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\r\n [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n [style.max-width]=\"col.width ? col.width + 'px' : ''\" [title]=\"row[col.fieldname]\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n </td>\r\n }\r\n\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails() ? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n\r\n }\r\n\r\n <!-- Fila vac\u00EDa si no hay datos -->\r\n @if (rowFilter().length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n Sin datos\r\n </td>\r\n </tr>\r\n }\r\n\r\n <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n @if (paddingBottom() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n </tbody>\r\n\r\n <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n @if (withTotal() && rowFilter().length > 0) {\r\n <tfoot class=\"ll-tfoot\">\r\n\r\n <tr>\r\n <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n\r\n </table>\r\n </div>\r\n</ng-template>", styles: [".ll-search-bar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:8px}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{height:30px;cursor:pointer}.ll-row:nth-child(odd){background-color:#00000010}.ll-row:hover{background-color:#00000015}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media (max-width: 1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-20{min-width:40px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
3883
3927
|
}
|
|
3884
3928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, decorators: [{
|
|
3885
3929
|
type: Component,
|
|
3886
|
-
args: [{ selector: 'app-table-ultimate', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective], animations: [fadeInOut, dropdownAnimation], template: "\r\n@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" \r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem(idList , $event)\"\r\n [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }@else {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
|
|
3887
|
-
}],
|
|
3930
|
+
args: [{ selector: 'app-table-ultimate', imports: [FormsModule, CommonModule, DropdownCdkComponent, AnimatedCheckboxDirective, CardMobileComponent], animations: [fadeInOut, dropdownAnimation], template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n <label class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" id=\"filter_table_lazy_todos\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_table_lazy_todos\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n</div>\r\n}\r\n\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\" [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n <table class=\"ll-table\">\r\n\r\n <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <thead class=\"ll-thead\">\r\n <tr>\r\n @if (withDetails()) {\r\n <th class=\"cw-20\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40\">\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n <th [title]=\"col.caption\" [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n [style.max-width]=\"col.width ? col.width + 'px' : ''\" class=\"ll-th-sortable\"\r\n (click)=\"toggleSort(col.fieldname)\">\r\n <span class=\"ll-th-content\">\r\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n @if (sortField() === col.fieldname) {\r\n <i class=\"ms-1\"\r\n [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n } @else {\r\n <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\r\n }\r\n </span>\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <tbody>\r\n <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\r\n @if (paddingTop() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n\r\n <!-- Filas visibles -->\r\n @for (row of visibleRows(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\" (click)=\"selectRow(row, idList)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\">\r\n\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\r\n [class.fa-chevron-down]=\"expandedRows() == idList\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center cw-40\">\r\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n @if (col.template) {\r\n <td>\r\n <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\r\n </ng-container>\r\n </td>\r\n } @else {\r\n @switch (col.tipo) {\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(col.fieldname, row);\r\n @if (resolverItem) {\r\n <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\r\n [style.width]=\"col.width ? col.width + 'px' : ''\"\r\n [style.max-width]=\"col.width ? col.width + 'px' : ''\" [title]=\"row[col.fieldname]\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n </td>\r\n }\r\n\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails() ? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n\r\n }\r\n\r\n <!-- Fila vac\u00EDa si no hay datos -->\r\n @if (rowFilter().length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n Sin datos\r\n </td>\r\n </tr>\r\n }\r\n\r\n <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n @if (paddingBottom() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n </tbody>\r\n\r\n <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n @if (withTotal() && rowFilter().length > 0) {\r\n <tfoot class=\"ll-tfoot\">\r\n\r\n <tr>\r\n <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n\r\n </table>\r\n </div>\r\n</ng-template>", styles: [".ll-search-bar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:8px}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{height:30px;cursor:pointer}.ll-row:nth-child(odd){background-color:#00000010}.ll-row:hover{background-color:#00000015}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media (max-width: 1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-20{min-width:40px}\n"] }]
|
|
3931
|
+
}], propDecorators: { onResize: [{
|
|
3888
3932
|
type: HostListener,
|
|
3889
3933
|
args: ['window:resize', ['$event']]
|
|
3890
3934
|
}] } });
|
|
@@ -4294,6 +4338,14 @@ class MdGenericoComponent {
|
|
|
4294
4338
|
isModal = input(true);
|
|
4295
4339
|
acceptDisabled = input(false);
|
|
4296
4340
|
validaCierre = input(false); // SI VALIDA CIERRE ES TRUE, ENTONCES SOLO SE EMITE LA ACCION, PERO NO CIERRA EN AUTOMATICO
|
|
4341
|
+
showFooter = computed(() => {
|
|
4342
|
+
const type = this.type();
|
|
4343
|
+
if (type == 'APROB')
|
|
4344
|
+
return false;
|
|
4345
|
+
if (type == '5')
|
|
4346
|
+
return false;
|
|
4347
|
+
return true;
|
|
4348
|
+
});
|
|
4297
4349
|
cerrarModal() {
|
|
4298
4350
|
if (this.validaCierre()) {
|
|
4299
4351
|
this.cerrar.emit();
|
|
@@ -4302,11 +4354,11 @@ class MdGenericoComponent {
|
|
|
4302
4354
|
this.modalService.dismiss();
|
|
4303
4355
|
}
|
|
4304
4356
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, acceptDisabled: { classPropertyName: "acceptDisabled", publicName: "acceptDisabled", isSignal: true, isRequired: false, transformFunction: null }, validaCierre: { classPropertyName: "validaCierre", publicName: "validaCierre", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", cerrar: "cerrar", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n <div class=\"w-100\">\r\n <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if(
|
|
4357
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, acceptDisabled: { classPropertyName: "acceptDisabled", publicName: "acceptDisabled", isSignal: true, isRequired: false, transformFunction: null }, validaCierre: { classPropertyName: "validaCierre", publicName: "validaCierre", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", cerrar: "cerrar", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n <div class=\"w-100\">\r\n <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( showFooter()){\r\n<div class=\"modal-footer\">\r\n @if (footer()) {\r\n <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n }\r\n @if (type() == '1') {\r\n <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '2') {\r\n <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '3') {\r\n <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '4'){\r\n <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '6'){\r\n <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() != '5'){\r\n <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["title", "tamanio", "showFiltro", "withFiltro", "hasData", "isModal", "showAlerta", "textAlerta", "validateSalto"], outputs: ["withFiltroChange", "cerrarModal"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
|
|
4306
4358
|
}
|
|
4307
4359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, decorators: [{
|
|
4308
4360
|
type: Component,
|
|
4309
|
-
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]=\"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(
|
|
4361
|
+
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]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( showFooter()){\r\n<div class=\"modal-footer\">\r\n @if (footer()) {\r\n <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n }\r\n @if (type() == '1') {\r\n <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '2') {\r\n <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '3') {\r\n <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '4'){\r\n <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '6'){\r\n <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() != '5'){\r\n <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"] }]
|
|
4310
4362
|
}] });
|
|
4311
4363
|
|
|
4312
4364
|
class AlertService {
|