ng-components-tsi 0.0.49 → 0.0.50
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 +286 -243
- package/fesm2022/ng-components-tsi.mjs.map +1 -1
- package/lib/modals/general/md-generico/md-generico.component.d.ts +2 -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 -58
- 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,209 @@ 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
|
-
|
|
3562
|
-
|
|
3563
|
-
rendered = input([]);
|
|
3564
|
-
withTotal = input(false);
|
|
3578
|
+
withFiltro = input(false);
|
|
3579
|
+
withDetails = input(false);
|
|
3565
3580
|
withCheckbox = input(false);
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
sortDirection = 'asc';
|
|
3570
|
-
expandedRows = -1;
|
|
3581
|
+
withTotal = input(false);
|
|
3582
|
+
rendered = input([]);
|
|
3583
|
+
titleTabla = input('Contrato');
|
|
3571
3584
|
activeMobileMode = input(true);
|
|
3572
|
-
/* VARIABLES PARA OPTIMIZAR */
|
|
3573
|
-
dataVirtual = signal([]);
|
|
3574
|
-
isLoading = signal(false);
|
|
3575
3585
|
isLoadingResponsive = signal(false);
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3586
|
+
isMobile = signal(window.innerWidth <= 768);
|
|
3587
|
+
// ── Output ──────────────────────────────────────────────────────────────────
|
|
3588
|
+
rowEvent = output();
|
|
3589
|
+
// ── ROW ACTIONS ──────────────────────────────────────────────────────────────────
|
|
3590
|
+
selectedRow = model(null);
|
|
3580
3591
|
rowClassFn = input(null);
|
|
3581
3592
|
rowDisabledFn = input(null);
|
|
3582
|
-
|
|
3593
|
+
selectItems = model([]);
|
|
3583
3594
|
rowFormat = computed(() => this.formateador.procesarLista(this.rows(), this.columns()));
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3595
|
+
// ── Estado interno ───────────────────────────────────────────────────────────
|
|
3596
|
+
busqueda = signal('');
|
|
3597
|
+
scrollTop = signal(0);
|
|
3598
|
+
containerHeight = signal(0); // altura real medida del DOM
|
|
3599
|
+
// ── Sort ─────────────────────────────────────────────────────────────────────
|
|
3600
|
+
sortField = signal(null);
|
|
3601
|
+
sortDir = signal('none');
|
|
3602
|
+
//-- EXPANDED ROWS
|
|
3603
|
+
expandedRows = signal(null);
|
|
3604
|
+
// ── CSS height del contenedor ─────────────────────────────────────────────────
|
|
3605
|
+
/** Valor aplicado como [style.height] en el template */
|
|
3606
|
+
heightStyle = computed(() => {
|
|
3607
|
+
if (this.altoContenedor() > 0) {
|
|
3608
|
+
return `clamp(${this.minAlto()}px, calc(100vh - ${this.altoContenedor()}px), 100vh)`;
|
|
3609
|
+
}
|
|
3610
|
+
return `${this.altoContainer()}px`;
|
|
3589
3611
|
});
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
const
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3612
|
+
// ── Filtrado + Ordenamiento ───────────────────────────────────────────────────
|
|
3613
|
+
rowFilter = computed(() => {
|
|
3614
|
+
const term = this.busqueda().toLowerCase().trim();
|
|
3615
|
+
const filtered = term
|
|
3616
|
+
? this.rowFormat().filter(item => this.filtraItem(item, term))
|
|
3617
|
+
: this.rowFormat();
|
|
3618
|
+
const field = this.sortField();
|
|
3619
|
+
const dir = this.sortDir();
|
|
3620
|
+
if (!field || dir === 'none')
|
|
3621
|
+
return filtered;
|
|
3622
|
+
return [...filtered].sort((a, b) => {
|
|
3623
|
+
const valueA = a[field] ?? '';
|
|
3624
|
+
const valueB = b[field] ?? '';
|
|
3625
|
+
if (typeof valueA === 'number' && typeof valueB === 'number') {
|
|
3626
|
+
return dir === 'asc' ? valueA - valueB : valueB - valueA;
|
|
3596
3627
|
}
|
|
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;
|
|
3628
|
+
const numA = Number(valueA);
|
|
3629
|
+
const numB = Number(valueB);
|
|
3630
|
+
if (!isNaN(numA) && !isNaN(numB)) {
|
|
3631
|
+
return dir === 'asc' ? numA - numB : numB - numA;
|
|
3612
3632
|
}
|
|
3633
|
+
const va = String(valueA).toLowerCase();
|
|
3634
|
+
const vb = String(valueB).toLowerCase();
|
|
3635
|
+
const cmp = va.localeCompare(vb, undefined, { numeric: true });
|
|
3636
|
+
return dir === 'asc' ? cmp : -cmp;
|
|
3613
3637
|
});
|
|
3614
|
-
return columnVisibility;
|
|
3615
3638
|
});
|
|
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())
|
|
3639
|
+
// ── Virtual scroll ────────────────────────────────────────────────────────────
|
|
3640
|
+
totalHeight = computed(() => this.rowFilter().length * this.rowHeight());
|
|
3641
|
+
startIndex = computed(() => {
|
|
3642
|
+
const idx = Math.floor(this.scrollTop() / this.rowHeight()) - this.buffer();
|
|
3643
|
+
return Math.max(0, idx);
|
|
3644
|
+
});
|
|
3645
|
+
endIndex = computed(() => {
|
|
3646
|
+
const visible = Math.ceil(this.containerHeight() / this.rowHeight());
|
|
3647
|
+
const idx = this.startIndex() + visible + this.buffer() * 2;
|
|
3648
|
+
return Math.min(this.rowFilter().length - 1, idx);
|
|
3649
|
+
});
|
|
3650
|
+
visibleRows = computed(() => this.rowFilter().slice(this.startIndex(), this.endIndex() + 1));
|
|
3651
|
+
/** Espacio en blanco antes de las filas renderizadas */
|
|
3652
|
+
paddingTop = computed(() => this.startIndex() * this.rowHeight());
|
|
3653
|
+
/** Espacio en blanco después de las filas renderizadas */
|
|
3654
|
+
paddingBottom = computed(() => {
|
|
3655
|
+
const remaining = this.rowFilter().length - this.endIndex() - 1;
|
|
3656
|
+
return Math.max(0, remaining * this.rowHeight());
|
|
3657
|
+
});
|
|
3658
|
+
// ── Scroll hacia fila seleccionada al cargar datos ───────────────────────────
|
|
3659
|
+
scrollEffect = effect(() => {
|
|
3660
|
+
const rows = this.rowFilter();
|
|
3661
|
+
const selected = untracked(() => this.selectedRow());
|
|
3662
|
+
if (rows.length > 0 && selected != null) {
|
|
3663
|
+
queueMicrotask(() => this.scrollToSelected(selected));
|
|
3664
|
+
}
|
|
3665
|
+
});
|
|
3666
|
+
// ── ResizeObserver ────────────────────────────────────────────────────────────
|
|
3667
|
+
resizeObserver;
|
|
3668
|
+
resizeEffect = effect(() => {
|
|
3669
|
+
if (!this.scrollContainer())
|
|
3673
3670
|
return;
|
|
3674
|
-
this.
|
|
3671
|
+
const el = this.scrollContainer().nativeElement;
|
|
3672
|
+
this.containerHeight.set(el.clientHeight);
|
|
3673
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
3674
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
3675
|
+
this.containerHeight.set(el.clientHeight);
|
|
3676
|
+
this.scrollTop.set(el.scrollTop);
|
|
3677
|
+
});
|
|
3678
|
+
this.resizeObserver.observe(el);
|
|
3679
|
+
}
|
|
3680
|
+
});
|
|
3681
|
+
// ngAfterViewInit() {
|
|
3682
|
+
// const el = this.scrollContainer?.nativeElement;
|
|
3683
|
+
// if (!el) return;
|
|
3684
|
+
// this.containerHeight.set(el.clientHeight);
|
|
3685
|
+
// if (typeof ResizeObserver !== 'undefined') {
|
|
3686
|
+
// this.resizeObserver = new ResizeObserver(() => {
|
|
3687
|
+
// this.containerHeight.set(el.clientHeight);
|
|
3688
|
+
// this.scrollTop.set(el.scrollTop);
|
|
3689
|
+
// });
|
|
3690
|
+
// this.resizeObserver.observe(el);
|
|
3691
|
+
// }
|
|
3692
|
+
// }
|
|
3693
|
+
ngOnDestroy() {
|
|
3694
|
+
this.resizeObserver?.disconnect();
|
|
3675
3695
|
}
|
|
3676
|
-
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
this.dataVirtual.set(firstBatch);
|
|
3680
|
-
this.loadedCount = firstBatch.length;
|
|
3696
|
+
// ── Manejadores ──────────────────────────────────────────────────────────────
|
|
3697
|
+
onScroll(event) {
|
|
3698
|
+
this.scrollTop.set(event.target.scrollTop);
|
|
3681
3699
|
}
|
|
3682
|
-
|
|
3683
|
-
this.
|
|
3684
|
-
|
|
3685
|
-
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3700
|
+
selectRow(row, idList) {
|
|
3701
|
+
this.rowEvent.emit({ usecase: TABLE_EVENTS.CLICK, data: row });
|
|
3702
|
+
if (this.identifier().length < 1) {
|
|
3703
|
+
this.selectedRow.set(idList);
|
|
3704
|
+
}
|
|
3705
|
+
else {
|
|
3706
|
+
this.selectedRow.set(this.concatenarValue(row, this.identifier()));
|
|
3707
|
+
}
|
|
3689
3708
|
}
|
|
3690
|
-
|
|
3709
|
+
isSelected(row, idList) {
|
|
3691
3710
|
if (this.identifier().length < 1) {
|
|
3692
|
-
return this.selectedRow
|
|
3711
|
+
return this.selectedRow() == idList;
|
|
3693
3712
|
}
|
|
3694
|
-
this.selectedRow
|
|
3713
|
+
return this.selectedRow() == this.concatenarValue(row, this.identifier());
|
|
3695
3714
|
}
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3715
|
+
textoDigitado(event) {
|
|
3716
|
+
const val = event.target.value;
|
|
3717
|
+
this.busqueda.set(val);
|
|
3718
|
+
this.scrollTop.set(0);
|
|
3719
|
+
if (this.scrollContainer()?.nativeElement) {
|
|
3720
|
+
this.scrollContainer().nativeElement.scrollTop = 0;
|
|
3699
3721
|
}
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3722
|
+
}
|
|
3723
|
+
toggleSort(field) {
|
|
3724
|
+
if (this.sortField() !== field) {
|
|
3725
|
+
this.sortField.set(field);
|
|
3726
|
+
this.sortDir.set('asc');
|
|
3703
3727
|
}
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
if (typeof valueA === 'number' && typeof valueB === 'number') {
|
|
3708
|
-
return this.sortDirection === 'asc'
|
|
3709
|
-
? valueA - valueB
|
|
3710
|
-
: valueB - valueA;
|
|
3728
|
+
else {
|
|
3729
|
+
if (this.sortDir() === 'asc') {
|
|
3730
|
+
this.sortDir.set('desc');
|
|
3711
3731
|
}
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
if (!isNaN(numA) && !isNaN(numB)) {
|
|
3716
|
-
return this.sortDirection === 'asc'
|
|
3717
|
-
? numA - numB
|
|
3718
|
-
: numB - numA;
|
|
3732
|
+
else if (this.sortDir() === 'desc') {
|
|
3733
|
+
this.sortDir.set('none');
|
|
3734
|
+
this.sortField.set(null);
|
|
3719
3735
|
}
|
|
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
|
-
// })
|
|
3736
|
+
else {
|
|
3737
|
+
this.sortDir.set('asc');
|
|
3738
|
+
}
|
|
3739
|
+
}
|
|
3737
3740
|
}
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
textoDigitado(event) {
|
|
3742
|
-
const value = event.target.value;
|
|
3743
|
-
this.busqueda.set(value);
|
|
3741
|
+
// ── Helpers ──────────────────────────────────────────────────────────────────
|
|
3742
|
+
concatenarValue(obj, fields) {
|
|
3743
|
+
return fields.reduce((acc, f) => acc + (obj[f] ?? ''), '');
|
|
3744
3744
|
}
|
|
3745
3745
|
getHighlight(text, fieldname) {
|
|
3746
|
-
if (text == null)
|
|
3746
|
+
if (text == null)
|
|
3747
3747
|
text = '';
|
|
3748
|
-
}
|
|
3749
3748
|
if (!this.filtrarColumnas()[fieldname] || !this.busqueda())
|
|
3750
3749
|
return text;
|
|
3751
3750
|
if (typeof text !== 'string') {
|
|
@@ -3754,13 +3753,6 @@ class TableUltimateComponent {
|
|
|
3754
3753
|
const regex = new RegExp(`(${this.busqueda()})`, 'gi');
|
|
3755
3754
|
return text?.replace(regex, '<mark>$1</mark>');
|
|
3756
3755
|
}
|
|
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
3756
|
filtraItem(item, term) {
|
|
3765
3757
|
const columnasActivas = Object.entries(this.filtrarColumnas())
|
|
3766
3758
|
.filter(([_campo, activo]) => activo);
|
|
@@ -3771,18 +3763,107 @@ class TableUltimateComponent {
|
|
|
3771
3763
|
return valor.includes(term);
|
|
3772
3764
|
});
|
|
3773
3765
|
}
|
|
3766
|
+
scrollToSelected(selected) {
|
|
3767
|
+
const rows = this.rowFilter();
|
|
3768
|
+
const idx = this.identifier().length < 1
|
|
3769
|
+
? (typeof selected === 'number' ? selected : -1)
|
|
3770
|
+
: rows.findIndex(r => this.concatenarValue(r, this.identifier()) === selected);
|
|
3771
|
+
if (idx < 0 || !this.scrollContainer()?.nativeElement)
|
|
3772
|
+
return;
|
|
3773
|
+
const targetTop = idx * this.rowHeight();
|
|
3774
|
+
const container = this.scrollContainer().nativeElement;
|
|
3775
|
+
const containerH = this.containerHeight();
|
|
3776
|
+
if (targetTop < container.scrollTop || targetTop + this.rowHeight() > container.scrollTop + containerH) {
|
|
3777
|
+
container.scrollTop = targetTop - containerH / 2;
|
|
3778
|
+
}
|
|
3779
|
+
}
|
|
3780
|
+
/** Índice real en rowFilter de una fila visible (para isSelected) */
|
|
3781
|
+
realIndex(visibleIdx) {
|
|
3782
|
+
return this.startIndex() + visibleIdx;
|
|
3783
|
+
}
|
|
3784
|
+
/** Mostrar columnas para realizar el filtro */
|
|
3785
|
+
filtrarColumnas = computed(() => {
|
|
3786
|
+
const columns = this.columns();
|
|
3787
|
+
const filtro = {};
|
|
3788
|
+
columns.forEach((col) => {
|
|
3789
|
+
if (col.fieldname) {
|
|
3790
|
+
filtro[col.fieldname] = true;
|
|
3791
|
+
}
|
|
3792
|
+
});
|
|
3793
|
+
return filtro;
|
|
3794
|
+
});
|
|
3795
|
+
toggleFiltros(event) {
|
|
3796
|
+
const checked = event.target.checked;
|
|
3797
|
+
const filtros = this.filtrarColumnas();
|
|
3798
|
+
Object.keys(filtros).forEach(key => {
|
|
3799
|
+
filtros[key] = checked;
|
|
3800
|
+
});
|
|
3801
|
+
}
|
|
3802
|
+
/** MOSTRAR COLUMNAS DE LA TABLA */
|
|
3803
|
+
visibilidadColumn = computed(() => {
|
|
3804
|
+
const columnVisibility = {};
|
|
3805
|
+
this.columns().forEach(col => {
|
|
3806
|
+
if (col.fieldname) {
|
|
3807
|
+
columnVisibility[col.fieldname] = true;
|
|
3808
|
+
}
|
|
3809
|
+
});
|
|
3810
|
+
return columnVisibility;
|
|
3811
|
+
});
|
|
3774
3812
|
validaVisibilidad(value) {
|
|
3775
3813
|
return validarBoolean(value);
|
|
3776
3814
|
}
|
|
3777
|
-
|
|
3778
|
-
|
|
3815
|
+
/** CELL RENDER */
|
|
3816
|
+
resolveCell(col, row) {
|
|
3817
|
+
const value = row[col];
|
|
3818
|
+
const r = this.rendered().find(r => r.matches(col, value, row));
|
|
3819
|
+
return r ? r.render(value, row) : null;
|
|
3820
|
+
}
|
|
3821
|
+
getRowClass(row) {
|
|
3822
|
+
return {
|
|
3823
|
+
'text-error': row.situac == 'J',
|
|
3824
|
+
'text-alerta': row.situac == 'L'
|
|
3825
|
+
};
|
|
3826
|
+
}
|
|
3827
|
+
getPosition(col) {
|
|
3828
|
+
if (col.position)
|
|
3829
|
+
return `text-${col.position}`;
|
|
3830
|
+
if (['decimal', 'number'].includes(col.tipo))
|
|
3831
|
+
return `text-end`;
|
|
3832
|
+
if (['fecha', 'date'].includes(col.tipo))
|
|
3833
|
+
return `text-center`;
|
|
3834
|
+
return 'text-start';
|
|
3835
|
+
}
|
|
3836
|
+
//** WITH DETAILS - EXPANDED ROW */
|
|
3837
|
+
toggleExpandRow(idRow) {
|
|
3838
|
+
const value = this.expandedRows() == idRow ? null : idRow;
|
|
3839
|
+
this.expandedRows.set(value);
|
|
3779
3840
|
}
|
|
3841
|
+
//** WITH TOTAL - FOOTER DE TOTALES */
|
|
3842
|
+
getTotals(fieldname) {
|
|
3843
|
+
const itemsSelected = this.withCheckbox() ? this.selectItems().map(item => item.data) : this.rowFormat();
|
|
3844
|
+
const final = itemsSelected.reduce((acc, row) => {
|
|
3845
|
+
const val = row[fieldname];
|
|
3846
|
+
return acc + (typeof val == 'number' ? val : 0);
|
|
3847
|
+
}, 0);
|
|
3848
|
+
return formatDecimal(final);
|
|
3849
|
+
}
|
|
3850
|
+
getColspanBeforeTotals() {
|
|
3851
|
+
const columns = this.columns();
|
|
3852
|
+
const firstTotalizableIndex = columns.findIndex(c => c.totalizable);
|
|
3853
|
+
const result = firstTotalizableIndex >= 0 ? firstTotalizableIndex : columns.length;
|
|
3854
|
+
const addColumns = (this.withDetails() ? 1 : 0) + (this.withCheckbox() ? 1 : 0) + (this.customActions() ? 1 : 0);
|
|
3855
|
+
return result + addColumns;
|
|
3856
|
+
}
|
|
3857
|
+
//** WITHCHECKBOX LOGICA */
|
|
3780
3858
|
allCheck(event) {
|
|
3781
3859
|
const input = event.target;
|
|
3782
3860
|
const checked = input.checked;
|
|
3783
3861
|
this.rowEvent.emit({ usecase: TABLE_EVENTS.CHECK_ALL, data: checked });
|
|
3784
3862
|
this.checkAll(checked);
|
|
3785
3863
|
}
|
|
3864
|
+
isCheckboxDisabled(row) {
|
|
3865
|
+
return this.rowDisabledFn?.()?.(row) ?? false;
|
|
3866
|
+
}
|
|
3786
3867
|
checkAll(checked) {
|
|
3787
3868
|
if (checked) {
|
|
3788
3869
|
const total = this.rowFilter()
|
|
@@ -3817,58 +3898,7 @@ class TableUltimateComponent {
|
|
|
3817
3898
|
}
|
|
3818
3899
|
this.selectItems.update(sel => sel.filter(s => s.id != idList));
|
|
3819
3900
|
}
|
|
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
|
-
}
|
|
3901
|
+
/* EVENTOS DE LA FILA */
|
|
3872
3902
|
onDoubleClick(row) {
|
|
3873
3903
|
if (window.getSelection()?.type === 'Range')
|
|
3874
3904
|
return;
|
|
@@ -3878,13 +3908,26 @@ class TableUltimateComponent {
|
|
|
3878
3908
|
event.preventDefault();
|
|
3879
3909
|
this.rowEvent.emit({ usecase: TABLE_EVENTS.RIGHT_CLICK, data: row });
|
|
3880
3910
|
}
|
|
3911
|
+
/* MOBILE MODE */
|
|
3912
|
+
onResize(event) {
|
|
3913
|
+
if (!this.activeMobileMode())
|
|
3914
|
+
return;
|
|
3915
|
+
this.isMobile.set(event.target.innerWidth <= 768);
|
|
3916
|
+
}
|
|
3917
|
+
mobileEffect = effect(() => {
|
|
3918
|
+
if (!this.activeMobileMode())
|
|
3919
|
+
return;
|
|
3920
|
+
this.isMobile();
|
|
3921
|
+
this.isLoadingResponsive.set(true);
|
|
3922
|
+
setTimeout(() => this.isLoadingResponsive.set(false), 200);
|
|
3923
|
+
});
|
|
3881
3924
|
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] });
|
|
3925
|
+
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 }, 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]=\"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
3926
|
}
|
|
3884
3927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, decorators: [{
|
|
3885
3928
|
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
|
-
}],
|
|
3929
|
+
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]=\"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"] }]
|
|
3930
|
+
}], propDecorators: { onResize: [{
|
|
3888
3931
|
type: HostListener,
|
|
3889
3932
|
args: ['window:resize', ['$event']]
|
|
3890
3933
|
}] } });
|