ng-components-tsi 0.0.55 → 0.0.57
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 +52 -20
- package/fesm2022/ng-components-tsi.mjs.map +1 -1
- package/lib/enums/table-events.d.ts +2 -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/models/general/utils.interface.d.ts +3 -0
- package/lib/ui/forms/button/button.component.d.ts +3 -0
- 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/forms/sidebar/sidebar.component.d.ts +1 -0
- package/lib/ui/tables/paginador/paginador.component.d.ts +1 -1
- package/lib/ui/tables/table-ultimate/table-ultimate.component.d.ts +8 -2
- package/package.json +3 -3
|
@@ -241,12 +241,23 @@ class ButtonComponent {
|
|
|
241
241
|
getWidthClass() {
|
|
242
242
|
return this.isFullWidth() ? 'w-100' : 'w-auto w-sm-100';
|
|
243
243
|
}
|
|
244
|
+
iconsWithImage = ['sunat', 'bcp', 'ibk', 'bbva'];
|
|
245
|
+
isImageIcon = (icon) => this.iconsWithImage.includes(icon);
|
|
246
|
+
getImageName = () => {
|
|
247
|
+
const imageIcon = {
|
|
248
|
+
'sunat': 'Sunat.ico',
|
|
249
|
+
'bcp': 'BCP.svg',
|
|
250
|
+
'ibk': 'IBK.svg',
|
|
251
|
+
'bbva': 'BBVA.svg'
|
|
252
|
+
};
|
|
253
|
+
return `assets/images/${imageIcon[this.icon()]}`;
|
|
254
|
+
};
|
|
244
255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
245
|
-
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 }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null } }, 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() && !
|
|
256
|
+
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 }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accion: "accion", fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "buttonNormal", first: true, predicate: ["boton"], descendants: true, isSignal: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n [style.--focus-color-rgb]=\"getFocusColor()\"\r\n [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\r\n [ngClass]=\"getClasses()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n [id]=\"`id_button_${texto()}`\">\r\n @if (isImageIcon(icon())) {\r\n <img [src]=\"getImageName()\" class=\"button-icon-hover\" height=\"16px\">\r\n }\r\n @else {\r\n <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n }\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n @if(texto()){\r\n <span>{{ texto() }}</span>\r\n }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n \r\n @if (isImageIcon(icon())) {\r\n <img [src]=\"getImageName()\" class=\"me-1 button-icon-hover\" height=\"16px\" [alt]=\"icon()\" >\r\n }\r\n @else {\r\n <i [ngClass]=\"getIconClass()\" class=\"me-1\"></i>\r\n }\r\n\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n @if(uploadButton()){\r\n <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n</button>\r\n}", styles: [".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"] }] });
|
|
246
257
|
}
|
|
247
258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
248
259
|
type: Component,
|
|
249
|
-
args: [{ selector: 'app-button', imports: [CommonModule, NgbTooltipModule, AtajosDirective], template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && !
|
|
260
|
+
args: [{ selector: 'app-button', imports: [CommonModule, NgbTooltipModule, AtajosDirective], template: "@if(!closeButton() && !dropdownButton() && !uploadButton() && ! inputButton()){\r\n<button atajoTecla #boton [altKeyCombination]=\"atajo()\"\r\n (emitirAtajo)=\"disabled() ? null : ( atajo() ? ejecutarAccion() : null)\" [title]=\"construirAlt()\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n [style.--focus-color-rgb]=\"getFocusColor()\"\r\n [style.--focus-color]=\"'rgba(' + getFocusColor() + ',0.5)'\"\r\n [ngClass]=\"getClasses()\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\"\r\n [id]=\"`id_button_${texto()}`\">\r\n @if (isImageIcon(icon())) {\r\n <img [src]=\"getImageName()\" class=\"button-icon-hover\" height=\"16px\">\r\n }\r\n @else {\r\n <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n }\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n</button>\r\n}\r\n\r\n@if(inputButton()){\r\n<button class=\"btn button-tilt-hover text-white me-1 fs-6 px-3 py-0 w-auto w-sm-100 radius-none padd\"\r\n [ngClass]=\"[outline() ? getColorClassOutline() : getColorClass(), !texto() ? 'boton-buscar' : '']\"\r\n (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n <i [ngClass]=\"getIconClass()\" class=\"button-icon-hover\"></i>\r\n @if(texto()){\r\n <span>{{ texto() }}</span>\r\n }\r\n</button>\r\n}\r\n\r\n@if(closeButton()){\r\n<button class=\"btn close fs-5 no-border\" (click)=\"ejecutarAccion()\" [disabled]=\"disabled()\">\r\n <i class=\"me-1 button-icon-hover text-dark fw-bold\" [ngClass]=\"getIconClass()\"></i>\r\n</button>\r\n}\r\n\r\n@if(dropdownButton()){\r\n<button class=\"dropdown-item fs-6\" (click)=\"handleClick($event)\" [disabled]=\"disabled()\" [ngClass]=\"extraClass()\"\r\n [ngbTooltip]=\"tooltip()\" [style.cursor]=\"shouldBlockClick() ? 'not-allowed' : 'pointer'\" placement=\"right\">\r\n \r\n @if (isImageIcon(icon())) {\r\n <img [src]=\"getImageName()\" class=\"me-1 button-icon-hover\" height=\"16px\" [alt]=\"icon()\" >\r\n }\r\n @else {\r\n <i [ngClass]=\"getIconClass()\" class=\"me-1\"></i>\r\n }\r\n\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n @if(uploadButton()){\r\n <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n }\r\n</button>\r\n}\r\n\r\n@if(uploadButton() && !dropdownButton()){\r\n<button class=\"btn btn-rounded button-tilt-hover text-white me-1 fs-8 px-3 w-auto w-sm-100\"\r\n [ngClass]=\"outline() ? getColorClassOutline() : getColorClass()\" (click)=\"triggerFileInput()\"\r\n [disabled]=\"disabled()\" [ngbTooltip]=\"tooltip()\" type=\"button\">\r\n <i [ngClass]=\"getIconClass()\" class=\"me-1 button-icon-hover\"></i>\r\n @if(texto()){\r\n <span [innerHTML]=\"isHtml() ? getSafeHtml() : texto()\"></span>\r\n }\r\n <input type=\"file\" #fileInput [accept]=\"accept()\" (change)=\"handleFileInput($event)\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n</button>\r\n}", styles: [".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"] }]
|
|
250
261
|
}], ctorParameters: () => [], propDecorators: { fileInput: [{
|
|
251
262
|
type: ViewChild,
|
|
252
263
|
args: ['fileInput']
|
|
@@ -450,11 +461,11 @@ class AlertErrorComponent {
|
|
|
450
461
|
this.activeModal.close(true);
|
|
451
462
|
}
|
|
452
463
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
453
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertErrorComponent, isStandalone: true, selector: "app-alert-error", ngImport: i0, template: "<div class=\"alert-error-container\">\n\n
|
|
464
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertErrorComponent, isStandalone: true, selector: "app-alert-error", ngImport: i0, template: "<div class=\"alert-error-container\">\n\n <div class=\"alert-error-content\">\n\n <div class=\"icon-wrapper\">\n <div class=\"icon-circle\">\n <i class=\"fas fa-exclamation\"></i>\n </div>\n <div class=\"icon-badge\">\n <i class=\"fas fa-exclamation-triangle\"></i>\n </div>\n </div>\n\n <h2 class=\"error-title text-dark\">{{ titulo() }}</h2>\n\n <p class=\"error-message\" [innerHTML]=\"mensajeFormateado()\"></p>\n\n @if (codigoEstado() || idTraza() || timestamp()) {\n <div class=\"technical-details\">\n <div class=\"tech-header\">\n <i class=\"fas fa-terminal\"></i>\n <span>DETALLES T\u00C9CNICOS</span>\n </div>\n @if (codigoEstado()) {\n <div class=\"tech-row\">\n <span class=\"tech-label\">C\u00D3DIGO_ESTADO:</span>\n <span class=\"tech-value error-code\">{{ codigoEstado() }}</span>\n </div>\n }\n @if (idTraza()) {\n <div class=\"tech-row\">\n <span class=\"tech-label\">ID_TRAZA:</span>\n <span class=\"tech-value\">{{ idTraza() }}</span>\n </div>\n }\n @if (timestamp()) {\n <div class=\"tech-row\">\n <span class=\"tech-label\">TIMESTAMP:</span>\n <span class=\"tech-value\">{{ timestamp() }}</span>\n </div>\n }\n </div>\n }\n\n </div>\n\n <div class=\"actions\">\n <app-button texto=\"Aceptar\" color=\"rojo_alerta\" [isFullWidth]=\"true\" (accion)=\"onAceptar()\" [autoFocus]=\"true\"\n paddingY=\"py-2\" />\n </div>\n\n</div>", styles: [".alert-error-container{border-radius:16px;display:flex;flex-direction:column;max-height:85vh;overflow:hidden}.alert-error-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:40px 30px 24px;text-align:center}.alert-error-content::-webkit-scrollbar{width:5px}.alert-error-content::-webkit-scrollbar-track{background:transparent}.alert-error-content::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:3px}@keyframes errorEntrance{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes errorPulse{0%,to{box-shadow:0 8px 24px #c81e1e66}50%{box-shadow:0 8px 32px #c81e1ebf,0 0 0 10px #c81e1e14}}@keyframes badgeBounce{0%{transform:scale(0);opacity:0}70%{transform:scale(1.25);opacity:1}to{transform:scale(1)}}.icon-wrapper{position:relative;display:inline-block;margin-bottom:24px}.icon-circle{width:80px;height:80px;background:linear-gradient(135deg,#f05252,#c81e1e);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #c81e1e66;animation:errorEntrance .5s cubic-bezier(.36,.07,.19,.97) both,errorPulse 2.4s ease-in-out .5s infinite}.icon-circle i{color:#fff;font-size:36px;font-weight:900}.icon-badge{position:absolute;top:-4px;right:-6px;width:26px;height:26px;background-color:var(--background-card);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0000001f;animation:badgeBounce .4s cubic-bezier(.36,.07,.19,.97) .4s both}.icon-badge i{color:#be0000;font-size:12px}.error-title{font-size:1.5rem;font-weight:700;margin-bottom:12px}.error-message{font-size:.95rem;color:#6b7280;line-height:1.6;margin-bottom:28px;word-break:break-word;overflow-wrap:break-word}.actions{flex-shrink:0;padding:16px 30px 24px;border-top:1px solid rgba(0,0,0,.06)}.actions app-button{width:100%}.btn-cerrar{background:none;border:none;padding:6px 16px;font-size:.95rem;color:#374151;cursor:pointer;font-weight:500}.btn-cerrar:hover{color:#1a1a2e;text-decoration:underline}.technical-details{background-color:var(--background-color);border:var(--border-table-header);border-radius:10px;padding:16px 20px;text-align:left}.tech-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.tech-header i{color:#8a8a8a;font-size:12px}.tech-header span{font-size:.7rem;font-weight:700;color:#64748b;letter-spacing:.08em;text-transform:uppercase}.tech-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}.tech-row .tech-label{font-size:.72rem;color:#929292;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.tech-row .tech-value{font-size:.78rem;color:#475569;font-family:monospace;word-break:break-all;max-width:65%;text-align:right}.tech-row .tech-value.error-code{color:#e0352b;font-weight:700;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY"], outputs: ["accion", "fileSelected"] }] });
|
|
454
465
|
}
|
|
455
466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertErrorComponent, decorators: [{
|
|
456
467
|
type: Component,
|
|
457
|
-
args: [{ selector: 'app-alert-error', imports: [CommonModule, ButtonComponent], template: "<div class=\"alert-error-container\">\n\n
|
|
468
|
+
args: [{ selector: 'app-alert-error', imports: [CommonModule, ButtonComponent], template: "<div class=\"alert-error-container\">\n\n <div class=\"alert-error-content\">\n\n <div class=\"icon-wrapper\">\n <div class=\"icon-circle\">\n <i class=\"fas fa-exclamation\"></i>\n </div>\n <div class=\"icon-badge\">\n <i class=\"fas fa-exclamation-triangle\"></i>\n </div>\n </div>\n\n <h2 class=\"error-title text-dark\">{{ titulo() }}</h2>\n\n <p class=\"error-message\" [innerHTML]=\"mensajeFormateado()\"></p>\n\n @if (codigoEstado() || idTraza() || timestamp()) {\n <div class=\"technical-details\">\n <div class=\"tech-header\">\n <i class=\"fas fa-terminal\"></i>\n <span>DETALLES T\u00C9CNICOS</span>\n </div>\n @if (codigoEstado()) {\n <div class=\"tech-row\">\n <span class=\"tech-label\">C\u00D3DIGO_ESTADO:</span>\n <span class=\"tech-value error-code\">{{ codigoEstado() }}</span>\n </div>\n }\n @if (idTraza()) {\n <div class=\"tech-row\">\n <span class=\"tech-label\">ID_TRAZA:</span>\n <span class=\"tech-value\">{{ idTraza() }}</span>\n </div>\n }\n @if (timestamp()) {\n <div class=\"tech-row\">\n <span class=\"tech-label\">TIMESTAMP:</span>\n <span class=\"tech-value\">{{ timestamp() }}</span>\n </div>\n }\n </div>\n }\n\n </div>\n\n <div class=\"actions\">\n <app-button texto=\"Aceptar\" color=\"rojo_alerta\" [isFullWidth]=\"true\" (accion)=\"onAceptar()\" [autoFocus]=\"true\"\n paddingY=\"py-2\" />\n </div>\n\n</div>", styles: [".alert-error-container{border-radius:16px;display:flex;flex-direction:column;max-height:85vh;overflow:hidden}.alert-error-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:40px 30px 24px;text-align:center}.alert-error-content::-webkit-scrollbar{width:5px}.alert-error-content::-webkit-scrollbar-track{background:transparent}.alert-error-content::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:3px}@keyframes errorEntrance{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes errorPulse{0%,to{box-shadow:0 8px 24px #c81e1e66}50%{box-shadow:0 8px 32px #c81e1ebf,0 0 0 10px #c81e1e14}}@keyframes badgeBounce{0%{transform:scale(0);opacity:0}70%{transform:scale(1.25);opacity:1}to{transform:scale(1)}}.icon-wrapper{position:relative;display:inline-block;margin-bottom:24px}.icon-circle{width:80px;height:80px;background:linear-gradient(135deg,#f05252,#c81e1e);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #c81e1e66;animation:errorEntrance .5s cubic-bezier(.36,.07,.19,.97) both,errorPulse 2.4s ease-in-out .5s infinite}.icon-circle i{color:#fff;font-size:36px;font-weight:900}.icon-badge{position:absolute;top:-4px;right:-6px;width:26px;height:26px;background-color:var(--background-card);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0000001f;animation:badgeBounce .4s cubic-bezier(.36,.07,.19,.97) .4s both}.icon-badge i{color:#be0000;font-size:12px}.error-title{font-size:1.5rem;font-weight:700;margin-bottom:12px}.error-message{font-size:.95rem;color:#6b7280;line-height:1.6;margin-bottom:28px;word-break:break-word;overflow-wrap:break-word}.actions{flex-shrink:0;padding:16px 30px 24px;border-top:1px solid rgba(0,0,0,.06)}.actions app-button{width:100%}.btn-cerrar{background:none;border:none;padding:6px 16px;font-size:.95rem;color:#374151;cursor:pointer;font-weight:500}.btn-cerrar:hover{color:#1a1a2e;text-decoration:underline}.technical-details{background-color:var(--background-color);border:var(--border-table-header);border-radius:10px;padding:16px 20px;text-align:left}.tech-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.tech-header i{color:#8a8a8a;font-size:12px}.tech-header span{font-size:.7rem;font-weight:700;color:#64748b;letter-spacing:.08em;text-transform:uppercase}.tech-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}.tech-row .tech-label{font-size:.72rem;color:#929292;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.tech-row .tech-value{font-size:.78rem;color:#475569;font-family:monospace;word-break:break-all;max-width:65%;text-align:right}.tech-row .tech-value.error-code{color:#e0352b;font-weight:700;text-transform:uppercase}\n"] }]
|
|
458
469
|
}] });
|
|
459
470
|
|
|
460
471
|
class BadgeComponent {
|
|
@@ -657,11 +668,11 @@ class HeaderComponent {
|
|
|
657
668
|
this.cerrarModal.emit();
|
|
658
669
|
}
|
|
659
670
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
660
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tamanio: { classPropertyName: "tamanio", publicName: "tamanio", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, hasData: { classPropertyName: "hasData", publicName: "hasData", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withFiltro: "withFiltroChange", cerrarModal: "cerrarModal" }, ngImport: i0, template: "<div class=\"
|
|
671
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tamanio: { classPropertyName: "tamanio", publicName: "tamanio", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, hasData: { classPropertyName: "hasData", publicName: "hasData", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withFiltro: "withFiltroChange", cerrarModal: "cerrarModal" }, ngImport: i0, template: "<div class=\"header-outer\" [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n <div class=\"header-main\">\r\n <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\"\r\n class=\"header-title d-flex align-items-center mb-2\">\r\n <h5 class=\"fw-bold no-select\" [ngClass]=\"['fs-' + tamanio(), isModal() ? 'pt-3' : 'pt-2']\">\r\n {{ title() }}\r\n </h5>\r\n @if(showFiltro()){\r\n <div [ngClass]=\"{'pt-2': isModal()}\">\r\n <app-filter-toggle [hasData]=\"hasData()\" [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (showAlerta()) {\r\n <app-alerta class=\"header-alerta\" [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n }\r\n </div>\r\n\r\n @if(isModal()){\r\n <div class=\"header-close\">\r\n <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n </div>\r\n }\r\n</div>", styles: [".header-outer{display:flex;flex-wrap:nowrap;gap:8px}.header-title{flex:1 1 auto;min-width:0}.header-main{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.header-alerta{margin-left:auto;flex:0 1 auto;min-width:0;max-width:100%}.header-close{flex-shrink:0;align-self:flex-start;padding-top:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY"], outputs: ["accion", "fileSelected"] }, { kind: "component", type: AlertaComponent, selector: "app-alerta", inputs: ["titulo", "mensaje", "iconSize", "classContainer", "paddingClass", "validateSalto"] }, { kind: "component", type: FilterToggleComponent, selector: "app-filter-toggle", inputs: ["hasData", "tamanio", "withFiltro"], outputs: ["withFiltroChange"] }] });
|
|
661
672
|
}
|
|
662
673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
663
674
|
type: Component,
|
|
664
|
-
args: [{ selector: 'app-header', imports: [CommonModule, ButtonComponent, AlertaComponent, FilterToggleComponent], template: "<div class=\"
|
|
675
|
+
args: [{ selector: 'app-header', imports: [CommonModule, ButtonComponent, AlertaComponent, FilterToggleComponent], template: "<div class=\"header-outer\" [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n <div class=\"header-main\">\r\n <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\"\r\n class=\"header-title d-flex align-items-center mb-2\">\r\n <h5 class=\"fw-bold no-select\" [ngClass]=\"['fs-' + tamanio(), isModal() ? 'pt-3' : 'pt-2']\">\r\n {{ title() }}\r\n </h5>\r\n @if(showFiltro()){\r\n <div [ngClass]=\"{'pt-2': isModal()}\">\r\n <app-filter-toggle [hasData]=\"hasData()\" [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (showAlerta()) {\r\n <app-alerta class=\"header-alerta\" [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n }\r\n </div>\r\n\r\n @if(isModal()){\r\n <div class=\"header-close\">\r\n <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n </div>\r\n }\r\n</div>", styles: [".header-outer{display:flex;flex-wrap:nowrap;gap:8px}.header-title{flex:1 1 auto;min-width:0}.header-main{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.header-alerta{margin-left:auto;flex:0 1 auto;min-width:0;max-width:100%}.header-close{flex-shrink:0;align-self:flex-start;padding-top:5px}\n"] }]
|
|
665
676
|
}] });
|
|
666
677
|
|
|
667
678
|
class AutocompleteComponent {
|
|
@@ -1288,11 +1299,11 @@ class SwitchActivoComponent {
|
|
|
1288
1299
|
return this._checked ? this.iconOn() : this.iconOff();
|
|
1289
1300
|
}
|
|
1290
1301
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SwitchActivoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1291
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1302
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SwitchActivoComponent, isStandalone: true, selector: "app-switch-activo", inputs: { valueOn: { classPropertyName: "valueOn", publicName: "valueOn", isSignal: true, isRequired: true, transformFunction: null }, valueOff: { classPropertyName: "valueOff", publicName: "valueOff", isSignal: true, isRequired: true, transformFunction: null }, labelOn: { classPropertyName: "labelOn", publicName: "labelOn", isSignal: true, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "labelOff", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, colorOn: { classPropertyName: "colorOn", publicName: "colorOn", isSignal: true, isRequired: false, transformFunction: null }, colorOff: { classPropertyName: "colorOff", publicName: "colorOff", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, ngImport: i0, template: "<div class=\"form-check form-switch d-flex align-items-center\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" [checked]=\"_checked\" [ngClass]=\"currentColor()\"\r\n (change)=\"toggle($event)\" [id]=\"`toogle-${id()}`\">\r\n\r\n <span class=\"switch-circle\">\r\n <i [class]=\"currentIcon()\"></i>\r\n </span>\r\n\r\n @if (currentLabel()) {\r\n <label class=\"label-toggle\" [for]=\"`toogle-${id()}`\">\r\n {{ currentLabel() }}\r\n </label>\r\n }\r\n</div>", styles: [".form-check{display:inline-flex;align-items:center;gap:.5rem;position:relative;padding-left:0}.form-check-input{width:50px!important;height:25px!important;border-radius:1.5rem;appearance:none;outline:none;cursor:pointer;background-color:#e9ecef;border:1px solid #ffffff;transition:background-color .2s ease-in-out,border-color .2s ease-in-out;position:relative;margin:0}.switch-circle{position:absolute;top:50%;left:3px;transform:translateY(-50%);width:19px;height:19px;background-color:#fff;border-color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;transition:left .2s ease-in-out,background-color .2s ease-in-out,color .2s,border-color .2s;pointer-events:none;z-index:1}.form-check-input:checked~.switch-circle{left:28px;background-color:#fff;border-color:#000;color:#fff}.label-toggle{min-width:50px;text-align:center}.form-check-input:focus{box-shadow:none!important}.bg-error{background:#e70045}.bg-exito{background:#00e68e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1292
1303
|
}
|
|
1293
1304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SwitchActivoComponent, decorators: [{
|
|
1294
1305
|
type: Component,
|
|
1295
|
-
args: [{ selector: 'app-switch-activo', imports: [CommonModule], template: "<div class=\"form-check form-switch d-flex align-items-center\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" [checked]=\"_checked\" [ngClass]=\"currentColor()\"\r\n (change)=\"toggle($event)\" [id]=\"`toogle-${id()}`\"
|
|
1306
|
+
args: [{ selector: 'app-switch-activo', imports: [CommonModule], template: "<div class=\"form-check form-switch d-flex align-items-center\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" [checked]=\"_checked\" [ngClass]=\"currentColor()\"\r\n (change)=\"toggle($event)\" [id]=\"`toogle-${id()}`\">\r\n\r\n <span class=\"switch-circle\">\r\n <i [class]=\"currentIcon()\"></i>\r\n </span>\r\n\r\n @if (currentLabel()) {\r\n <label class=\"label-toggle\" [for]=\"`toogle-${id()}`\">\r\n {{ currentLabel() }}\r\n </label>\r\n }\r\n</div>", styles: [".form-check{display:inline-flex;align-items:center;gap:.5rem;position:relative;padding-left:0}.form-check-input{width:50px!important;height:25px!important;border-radius:1.5rem;appearance:none;outline:none;cursor:pointer;background-color:#e9ecef;border:1px solid #ffffff;transition:background-color .2s ease-in-out,border-color .2s ease-in-out;position:relative;margin:0}.switch-circle{position:absolute;top:50%;left:3px;transform:translateY(-50%);width:19px;height:19px;background-color:#fff;border-color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;transition:left .2s ease-in-out,background-color .2s ease-in-out,color .2s,border-color .2s;pointer-events:none;z-index:1}.form-check-input:checked~.switch-circle{left:28px;background-color:#fff;border-color:#000;color:#fff}.label-toggle{min-width:50px;text-align:center}.form-check-input:focus{box-shadow:none!important}.bg-error{background:#e70045}.bg-exito{background:#00e68e}\n"] }]
|
|
1296
1307
|
}], ctorParameters: () => [] });
|
|
1297
1308
|
|
|
1298
1309
|
class OnlyNumberFlexDirective {
|
|
@@ -1515,11 +1526,11 @@ class InputComponent {
|
|
|
1515
1526
|
this.changeInput.emit(encontrar);
|
|
1516
1527
|
}
|
|
1517
1528
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1518
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, withBuscar: { classPropertyName: "withBuscar", publicName: "withBuscar", isSignal: true, isRequired: false, transformFunction: null }, iconButton: { classPropertyName: "iconButton", publicName: "iconButton", isSignal: true, isRequired: false, transformFunction: null }, classButton: { classPropertyName: "classButton", publicName: "classButton", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, value2: { classPropertyName: "value2", publicName: "value2", isSignal: true, isRequired: false, transformFunction: null }, position_row: { classPropertyName: "position_row", publicName: "position_row", isSignal: true, isRequired: false, transformFunction: null }, withChangeInput: { classPropertyName: "withChangeInput", publicName: "withChangeInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isImportant: { classPropertyName: "isImportant", publicName: "isImportant", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, alto: { classPropertyName: "alto", publicName: "alto", isSignal: true, isRequired: false, transformFunction: null }, formatNumber: { classPropertyName: "formatNumber", publicName: "formatNumber", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, enter: { classPropertyName: "enter", publicName: "enter", isSignal: true, isRequired: false, transformFunction: null }, keyup: { classPropertyName: "keyup", publicName: "keyup", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalidInput", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, textoAyuda: { classPropertyName: "textoAyuda", publicName: "textoAyuda", isSignal: true, isRequired: false, transformFunction: null }, sinAyuda: { classPropertyName: "sinAyuda", publicName: "sinAyuda", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, showTopLabel: { classPropertyName: "showTopLabel", publicName: "showTopLabel", isSignal: true, isRequired: false, transformFunction: null }, topLabelText: { classPropertyName: "topLabelText", publicName: "topLabelText", isSignal: true, isRequired: false, transformFunction: null }, firstItemDefault: { classPropertyName: "firstItemDefault", publicName: "firstItemDefault", isSignal: true, isRequired: false, transformFunction: null }, typeKey: { classPropertyName: "typeKey", publicName: "typeKey", isSignal: true, isRequired: false, transformFunction: null }, validaCodigo: { classPropertyName: "validaCodigo", publicName: "validaCodigo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", value2: "value2Change", disabled: "disabledChange", allDisabled: "allDisabledChange", invalidInput: "invalidInputChange", accion: "accion", changeInput: "changeInput" }, ngImport: i0, template: "@if (isVertical()) {\r\n<label [ngClass]=\"{'text-error': isImportant()}\" [for]=\"inputId\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n @if (!isVertical()) {\r\n <label [ngClass]=\"{'text-error': isImportant()}\" [for]=\"inputId\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"flex-grow-1 me-2\">\r\n <div [ngClass]=\"{'d-block': typeStandar() == 'date','d-flex': typeStandar() != 'date', 'flex-column': showTopLabel() }\"\r\n class=\"position-relative\">\r\n \r\n @if (showTopLabel() && topLabelText()) {\r\n <div class=\"input-top-label\">\r\n <label class=\"fw-bold\">{{ topLabelText() }}</label>\r\n </div>\r\n }\r\n \r\n @if (!distintInputs.includes(typeStandar())) {\r\n <input [type]=\"typeStandar()\" (blur)=\"callBlur()\" (keyup.enter)=\"enter()?.()\" (input)=\"keyup()?.()\"\r\n class=\"form-control text-{{position()}}\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n (focus)=\"invalidInput.set(false)\" autocomplete=\"off\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\" [caracteresCodigo]=\"validaCodigo()\"\r\n [name]=\"inputId\" [attr.maxlength]=\"maxLength()\">\r\n }\r\n\r\n @if (typeStandar() == 'input-switch') {\r\n <div class=\"d-flex w-100\">\r\n <div class=\"flex-grow-1\">\r\n <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (keyup.enter)=\"enter()?.()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n [id]=\"inputId\" [name]=\"inputId\" [caracteresCodigo]=\"validaCodigo()\"\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n </div>\r\n <div class=\"px-2\">\r\n <app-switch-activo valueOn=\"S\" valueOff=\"N\" [id]=\"`switch_${inputId}`\" [(model)]=\"value2\" />\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (typeStandar() == 'number-format-decimal') {\r\n <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n [id]=\"inputId\" [name]=\"inputId\" [appDecimal]=\"formatNumber()\" onlyNumberFlex\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'number-integer') {\r\n <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n [(ngModel)]=\"value\" [id]=\"inputId\" [name]=\"inputId\" onlyNumber\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'day') {\r\n <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n [(ngModel)]=\"value\" [id]=\"inputId\" [name]=\"inputId\" onlyDay\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'date') {\r\n <input type=\"date\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\"\r\n [name]=\"inputId\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'time') {\r\n <input type=\"time\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\"\r\n [name]=\"inputId\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'text-area') {\r\n <textarea class=\"{{'text-' + position()}} form-area\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [id]=\"inputId\" [name]=\"inputId\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [rows]=\"alto()\"\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n\r\n </textarea>\r\n }\r\n\r\n @if (typeStandar() == 'select') {\r\n <select class=\"form-select {{'text-' + position()}}\" [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [class.text-error]=\"isImportant()\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\" [style.min-width.px]=\"maxWidth()\" [(ngModel)]=\"value\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [id]=\"inputId\"\r\n [name]=\"inputId\" (change)=\"emitirChange()\" (focus)=\"focusInput()\">\r\n @if (withTodos()) {\r\n <option [value]=\"typeKey() == 'number' ? -1 : ''\">Todos</option>\r\n }\r\n @for (item of lista(); track $index) {\r\n @if (!keyCodigo()) {\r\n <option [value]=\"item\"> {{ item }}</option>\r\n }\r\n @if (keyCodigo()) {\r\n <option [value]=\"item[keyCodigo()]\"> {{ joinInfo() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n item[keyDescri()]}}</option>\r\n }\r\n\r\n }\r\n </select>\r\n }\r\n\r\n @if (withBuscar()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" [ngClass]=\"classButton()\" [disabled]=\"allDisabled()\" (click)=\"ejecutarAccion()\">\r\n <i [ngClass]=\"iconButton()\" ></i>\r\n </button>\r\n }\r\n @if (withChangeInput()) {\r\n <button class=\"btn btn-dark boton-buscar bg-search fs-7\" [disabled]=\"allDisabled()\" (click)=\"changeInputAction()\">\r\n <i [ngClass]=\"typeStandar() == 'select' ? 'fas fa-times' : 'fa solid fa-pen'\"></i>\r\n </button>\r\n }\r\n @if (invalidInput()) {\r\n <div class=\"infoBox\" @fadeInOut><i class=\"fas fa-exclamation-triangle fs-9 text-danger\"></i> Ocurri\u00F3 un\r\n error: El campo es obligatorio, aseg\u00FArese de ingresar datos v\u00E1lidos.</div>\r\n }\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (textoAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n <span class=\"text-error fs-6\">{{textoAyuda()}}</span>\r\n <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}\r\n\r\n@if (sinAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n <span class=\"text-error fs-6\"></span>\r\n <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}", styles: [".text-error{color:#d60000!important;font-weight:700!important}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;animation:aura-pulse 1.5s ease-out infinite;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DecimalDirective, selector: "[appDecimal]", inputs: ["appDecimal"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]" }, { kind: "directive", type: OnlyDayDirective, selector: "[onlyDay]" }, { kind: "component", type: SwitchActivoComponent, selector: "app-switch-activo", inputs: ["valueOn", "valueOff", "labelOn", "labelOff", "iconOn", "iconOff", "colorOn", "colorOff", "id", "model"], outputs: ["modelChange"] }, { kind: "directive", type: OnlyNumberFlexDirective, selector: "[onlyNumberFlex]" }, { kind: "directive", type: CaracteresCodigoDirective, selector: "[caracteresCodigo]", inputs: ["caracteresCodigo"] }], animations: [fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1529
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, withBuscar: { classPropertyName: "withBuscar", publicName: "withBuscar", isSignal: true, isRequired: false, transformFunction: null }, iconButton: { classPropertyName: "iconButton", publicName: "iconButton", isSignal: true, isRequired: false, transformFunction: null }, classButton: { classPropertyName: "classButton", publicName: "classButton", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, value2: { classPropertyName: "value2", publicName: "value2", isSignal: true, isRequired: false, transformFunction: null }, position_row: { classPropertyName: "position_row", publicName: "position_row", isSignal: true, isRequired: false, transformFunction: null }, withChangeInput: { classPropertyName: "withChangeInput", publicName: "withChangeInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isImportant: { classPropertyName: "isImportant", publicName: "isImportant", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, alto: { classPropertyName: "alto", publicName: "alto", isSignal: true, isRequired: false, transformFunction: null }, formatNumber: { classPropertyName: "formatNumber", publicName: "formatNumber", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, enter: { classPropertyName: "enter", publicName: "enter", isSignal: true, isRequired: false, transformFunction: null }, keyup: { classPropertyName: "keyup", publicName: "keyup", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalidInput", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, textoAyuda: { classPropertyName: "textoAyuda", publicName: "textoAyuda", isSignal: true, isRequired: false, transformFunction: null }, sinAyuda: { classPropertyName: "sinAyuda", publicName: "sinAyuda", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, showTopLabel: { classPropertyName: "showTopLabel", publicName: "showTopLabel", isSignal: true, isRequired: false, transformFunction: null }, topLabelText: { classPropertyName: "topLabelText", publicName: "topLabelText", isSignal: true, isRequired: false, transformFunction: null }, firstItemDefault: { classPropertyName: "firstItemDefault", publicName: "firstItemDefault", isSignal: true, isRequired: false, transformFunction: null }, typeKey: { classPropertyName: "typeKey", publicName: "typeKey", isSignal: true, isRequired: false, transformFunction: null }, validaCodigo: { classPropertyName: "validaCodigo", publicName: "validaCodigo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", value2: "value2Change", disabled: "disabledChange", allDisabled: "allDisabledChange", invalidInput: "invalidInputChange", accion: "accion", changeInput: "changeInput" }, ngImport: i0, template: "@if (isVertical()) {\r\n<label [ngClass]=\"{'text-error': isImportant()}\" [for]=\"inputId\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n @if (!isVertical()) {\r\n <label [ngClass]=\"{'text-error': isImportant()}\" [for]=\"inputId\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"flex-grow-1 me-2\" style=\"min-width: 0\">\r\n <div [ngClass]=\"{'d-block': typeStandar() == 'date', 'd-flex': typeStandar() != 'date', 'flex-column': showTopLabel() }\"\r\n class=\"position-relative\">\r\n \r\n @if (showTopLabel() && topLabelText()) {\r\n <div class=\"input-top-label\">\r\n <label class=\"fw-bold\">{{ topLabelText() }}</label>\r\n </div>\r\n }\r\n \r\n @if (!distintInputs.includes(typeStandar())) {\r\n <input [type]=\"typeStandar()\" (blur)=\"callBlur()\" (keyup.enter)=\"enter()?.()\" (input)=\"keyup()?.()\"\r\n class=\"form-control text-{{position()}}\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n (focus)=\"invalidInput.set(false)\" autocomplete=\"off\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\" [caracteresCodigo]=\"validaCodigo()\"\r\n [name]=\"inputId\" [attr.maxlength]=\"maxLength()\">\r\n }\r\n\r\n @if (typeStandar() == 'input-switch') {\r\n <div class=\"d-flex w-100\">\r\n <div class=\"flex-grow-1\">\r\n <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (keyup.enter)=\"enter()?.()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n [id]=\"inputId\" [name]=\"inputId\" [caracteresCodigo]=\"validaCodigo()\"\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n </div>\r\n <div class=\"px-2\">\r\n <app-switch-activo valueOn=\"S\" valueOff=\"N\" [id]=\"`switch_${inputId}`\" [(model)]=\"value2\" />\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (typeStandar() == 'number-format-decimal') {\r\n <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n [id]=\"inputId\" [name]=\"inputId\" [appDecimal]=\"formatNumber()\" onlyNumberFlex\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'number-integer') {\r\n <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n [(ngModel)]=\"value\" [id]=\"inputId\" [name]=\"inputId\" onlyNumber\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'day') {\r\n <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n [(ngModel)]=\"value\" [id]=\"inputId\" [name]=\"inputId\" onlyDay\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'date') {\r\n <input type=\"date\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\"\r\n [name]=\"inputId\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'time') {\r\n <input type=\"time\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\"\r\n [name]=\"inputId\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'text-area') {\r\n <textarea class=\"{{'text-' + position()}} form-area\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [id]=\"inputId\" [name]=\"inputId\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [rows]=\"alto()\"\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n\r\n </textarea>\r\n }\r\n\r\n @if (typeStandar() == 'select') {\r\n <select class=\"form-select {{'text-' + position()}}\" [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [class.text-error]=\"isImportant()\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\" [style.min-width.px]=\"maxWidth()\" [(ngModel)]=\"value\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [id]=\"inputId\"\r\n [name]=\"inputId\" (change)=\"emitirChange()\" (focus)=\"focusInput()\">\r\n @if (withTodos()) {\r\n <option [value]=\"typeKey() == 'number' ? -1 : ''\">Todos</option>\r\n }\r\n @for (item of lista(); track $index) {\r\n @if (!keyCodigo()) {\r\n <option [value]=\"item\"> {{ item }}</option>\r\n }\r\n @if (keyCodigo()) {\r\n <option [value]=\"item[keyCodigo()]\"> {{ joinInfo() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n item[keyDescri()]}}</option>\r\n }\r\n\r\n }\r\n </select>\r\n }\r\n\r\n @if (withBuscar()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" [ngClass]=\"classButton()\" [disabled]=\"allDisabled()\" (click)=\"ejecutarAccion()\">\r\n <i [ngClass]=\"iconButton()\" ></i>\r\n </button>\r\n }\r\n @if (withChangeInput()) {\r\n <button class=\"btn btn-dark boton-buscar bg-search fs-7\" [disabled]=\"allDisabled()\" (click)=\"changeInputAction()\">\r\n <i [ngClass]=\"typeStandar() == 'select' ? 'fas fa-times' : 'fa solid fa-pen'\"></i>\r\n </button>\r\n }\r\n @if (invalidInput()) {\r\n <div class=\"infoBox\" @fadeInOut><i class=\"fas fa-exclamation-triangle fs-9 text-danger\"></i> Ocurri\u00F3 un\r\n error: El campo es obligatorio, aseg\u00FArese de ingresar datos v\u00E1lidos.</div>\r\n }\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (textoAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n <span class=\"text-error fs-6\">{{textoAyuda()}}</span>\r\n <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}\r\n\r\n@if (sinAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n <span class=\"text-error fs-6\"></span>\r\n <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}", styles: [".text-error{color:#d60000!important;font-weight:700!important}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;animation:aura-pulse 1.5s ease-out infinite;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DecimalDirective, selector: "[appDecimal]", inputs: ["appDecimal"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]" }, { kind: "directive", type: OnlyDayDirective, selector: "[onlyDay]" }, { kind: "component", type: SwitchActivoComponent, selector: "app-switch-activo", inputs: ["valueOn", "valueOff", "labelOn", "labelOff", "iconOn", "iconOff", "colorOn", "colorOff", "id", "model"], outputs: ["modelChange"] }, { kind: "directive", type: OnlyNumberFlexDirective, selector: "[onlyNumberFlex]" }, { kind: "directive", type: CaracteresCodigoDirective, selector: "[caracteresCodigo]", inputs: ["caracteresCodigo"] }], animations: [fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1519
1530
|
}
|
|
1520
1531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputComponent, decorators: [{
|
|
1521
1532
|
type: Component,
|
|
1522
|
-
args: [{ selector: 'app-input', imports: [FormsModule, CommonModule, DecimalDirective, OnlyNumberDirective, OnlyDayDirective, SwitchActivoComponent, OnlyNumberFlexDirective, CaracteresCodigoDirective], animations: [fadeInOut], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVertical()) {\r\n<label [ngClass]=\"{'text-error': isImportant()}\" [for]=\"inputId\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n @if (!isVertical()) {\r\n <label [ngClass]=\"{'text-error': isImportant()}\" [for]=\"inputId\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"flex-grow-1 me-2\">\r\n <div [ngClass]=\"{'d-block': typeStandar() == 'date','d-flex': typeStandar() != 'date', 'flex-column': showTopLabel() }\"\r\n class=\"position-relative\">\r\n \r\n @if (showTopLabel() && topLabelText()) {\r\n <div class=\"input-top-label\">\r\n <label class=\"fw-bold\">{{ topLabelText() }}</label>\r\n </div>\r\n }\r\n \r\n @if (!distintInputs.includes(typeStandar())) {\r\n <input [type]=\"typeStandar()\" (blur)=\"callBlur()\" (keyup.enter)=\"enter()?.()\" (input)=\"keyup()?.()\"\r\n class=\"form-control text-{{position()}}\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n (focus)=\"invalidInput.set(false)\" autocomplete=\"off\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\" [caracteresCodigo]=\"validaCodigo()\"\r\n [name]=\"inputId\" [attr.maxlength]=\"maxLength()\">\r\n }\r\n\r\n @if (typeStandar() == 'input-switch') {\r\n <div class=\"d-flex w-100\">\r\n <div class=\"flex-grow-1\">\r\n <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (keyup.enter)=\"enter()?.()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n [id]=\"inputId\" [name]=\"inputId\" [caracteresCodigo]=\"validaCodigo()\"\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n </div>\r\n <div class=\"px-2\">\r\n <app-switch-activo valueOn=\"S\" valueOff=\"N\" [id]=\"`switch_${inputId}`\" [(model)]=\"value2\" />\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (typeStandar() == 'number-format-decimal') {\r\n <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n [id]=\"inputId\" [name]=\"inputId\" [appDecimal]=\"formatNumber()\" onlyNumberFlex\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'number-integer') {\r\n <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n [(ngModel)]=\"value\" [id]=\"inputId\" [name]=\"inputId\" onlyNumber\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'day') {\r\n <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n [(ngModel)]=\"value\" [id]=\"inputId\" [name]=\"inputId\" onlyDay\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'date') {\r\n <input type=\"date\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\"\r\n [name]=\"inputId\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'time') {\r\n <input type=\"time\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\"\r\n [name]=\"inputId\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'text-area') {\r\n <textarea class=\"{{'text-' + position()}} form-area\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [id]=\"inputId\" [name]=\"inputId\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [rows]=\"alto()\"\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n\r\n </textarea>\r\n }\r\n\r\n @if (typeStandar() == 'select') {\r\n <select class=\"form-select {{'text-' + position()}}\" [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [class.text-error]=\"isImportant()\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\" [style.min-width.px]=\"maxWidth()\" [(ngModel)]=\"value\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [id]=\"inputId\"\r\n [name]=\"inputId\" (change)=\"emitirChange()\" (focus)=\"focusInput()\">\r\n @if (withTodos()) {\r\n <option [value]=\"typeKey() == 'number' ? -1 : ''\">Todos</option>\r\n }\r\n @for (item of lista(); track $index) {\r\n @if (!keyCodigo()) {\r\n <option [value]=\"item\"> {{ item }}</option>\r\n }\r\n @if (keyCodigo()) {\r\n <option [value]=\"item[keyCodigo()]\"> {{ joinInfo() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n item[keyDescri()]}}</option>\r\n }\r\n\r\n }\r\n </select>\r\n }\r\n\r\n @if (withBuscar()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" [ngClass]=\"classButton()\" [disabled]=\"allDisabled()\" (click)=\"ejecutarAccion()\">\r\n <i [ngClass]=\"iconButton()\" ></i>\r\n </button>\r\n }\r\n @if (withChangeInput()) {\r\n <button class=\"btn btn-dark boton-buscar bg-search fs-7\" [disabled]=\"allDisabled()\" (click)=\"changeInputAction()\">\r\n <i [ngClass]=\"typeStandar() == 'select' ? 'fas fa-times' : 'fa solid fa-pen'\"></i>\r\n </button>\r\n }\r\n @if (invalidInput()) {\r\n <div class=\"infoBox\" @fadeInOut><i class=\"fas fa-exclamation-triangle fs-9 text-danger\"></i> Ocurri\u00F3 un\r\n error: El campo es obligatorio, aseg\u00FArese de ingresar datos v\u00E1lidos.</div>\r\n }\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (textoAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n <span class=\"text-error fs-6\">{{textoAyuda()}}</span>\r\n <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}\r\n\r\n@if (sinAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n <span class=\"text-error fs-6\"></span>\r\n <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}", styles: [".text-error{color:#d60000!important;font-weight:700!important}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;animation:aura-pulse 1.5s ease-out infinite;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}\n"] }]
|
|
1533
|
+
args: [{ selector: 'app-input', imports: [FormsModule, CommonModule, DecimalDirective, OnlyNumberDirective, OnlyDayDirective, SwitchActivoComponent, OnlyNumberFlexDirective, CaracteresCodigoDirective], animations: [fadeInOut], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVertical()) {\r\n<label [ngClass]=\"{'text-error': isImportant()}\" [for]=\"inputId\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n @if (!isVertical()) {\r\n <label [ngClass]=\"{'text-error': isImportant()}\" [for]=\"inputId\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"flex-grow-1 me-2\" style=\"min-width: 0\">\r\n <div [ngClass]=\"{'d-block': typeStandar() == 'date', 'd-flex': typeStandar() != 'date', 'flex-column': showTopLabel() }\"\r\n class=\"position-relative\">\r\n \r\n @if (showTopLabel() && topLabelText()) {\r\n <div class=\"input-top-label\">\r\n <label class=\"fw-bold\">{{ topLabelText() }}</label>\r\n </div>\r\n }\r\n \r\n @if (!distintInputs.includes(typeStandar())) {\r\n <input [type]=\"typeStandar()\" (blur)=\"callBlur()\" (keyup.enter)=\"enter()?.()\" (input)=\"keyup()?.()\"\r\n class=\"form-control text-{{position()}}\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n (focus)=\"invalidInput.set(false)\" autocomplete=\"off\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\" [caracteresCodigo]=\"validaCodigo()\"\r\n [name]=\"inputId\" [attr.maxlength]=\"maxLength()\">\r\n }\r\n\r\n @if (typeStandar() == 'input-switch') {\r\n <div class=\"d-flex w-100\">\r\n <div class=\"flex-grow-1\">\r\n <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (keyup.enter)=\"enter()?.()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n [id]=\"inputId\" [name]=\"inputId\" [caracteresCodigo]=\"validaCodigo()\"\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n </div>\r\n <div class=\"px-2\">\r\n <app-switch-activo valueOn=\"S\" valueOff=\"N\" [id]=\"`switch_${inputId}`\" [(model)]=\"value2\" />\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (typeStandar() == 'number-format-decimal') {\r\n <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n [id]=\"inputId\" [name]=\"inputId\" [appDecimal]=\"formatNumber()\" onlyNumberFlex\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'number-integer') {\r\n <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n [(ngModel)]=\"value\" [id]=\"inputId\" [name]=\"inputId\" onlyNumber\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'day') {\r\n <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\" (keyup.enter)=\"enter()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n [(ngModel)]=\"value\" [id]=\"inputId\" [name]=\"inputId\" onlyDay\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'date') {\r\n <input type=\"date\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\"\r\n [name]=\"inputId\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'time') {\r\n <input type=\"time\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [id]=\"inputId\"\r\n [name]=\"inputId\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n\r\n @if (typeStandar() == 'text-area') {\r\n <textarea class=\"{{'text-' + position()}} form-area\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [id]=\"inputId\" [name]=\"inputId\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [rows]=\"alto()\"\r\n [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n\r\n </textarea>\r\n }\r\n\r\n @if (typeStandar() == 'select') {\r\n <select class=\"form-select {{'text-' + position()}}\" [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n [class.text-error]=\"isImportant()\"\r\n [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\" [style.min-width.px]=\"maxWidth()\" [(ngModel)]=\"value\"\r\n [disabled]=\"allDisabled() ? true : disabled()\" [id]=\"inputId\"\r\n [name]=\"inputId\" (change)=\"emitirChange()\" (focus)=\"focusInput()\">\r\n @if (withTodos()) {\r\n <option [value]=\"typeKey() == 'number' ? -1 : ''\">Todos</option>\r\n }\r\n @for (item of lista(); track $index) {\r\n @if (!keyCodigo()) {\r\n <option [value]=\"item\"> {{ item }}</option>\r\n }\r\n @if (keyCodigo()) {\r\n <option [value]=\"item[keyCodigo()]\"> {{ joinInfo() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n item[keyDescri()]}}</option>\r\n }\r\n\r\n }\r\n </select>\r\n }\r\n\r\n @if (withBuscar()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" [ngClass]=\"classButton()\" [disabled]=\"allDisabled()\" (click)=\"ejecutarAccion()\">\r\n <i [ngClass]=\"iconButton()\" ></i>\r\n </button>\r\n }\r\n @if (withChangeInput()) {\r\n <button class=\"btn btn-dark boton-buscar bg-search fs-7\" [disabled]=\"allDisabled()\" (click)=\"changeInputAction()\">\r\n <i [ngClass]=\"typeStandar() == 'select' ? 'fas fa-times' : 'fa solid fa-pen'\"></i>\r\n </button>\r\n }\r\n @if (invalidInput()) {\r\n <div class=\"infoBox\" @fadeInOut><i class=\"fas fa-exclamation-triangle fs-9 text-danger\"></i> Ocurri\u00F3 un\r\n error: El campo es obligatorio, aseg\u00FArese de ingresar datos v\u00E1lidos.</div>\r\n }\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n@if (textoAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n <span class=\"text-error fs-6\">{{textoAyuda()}}</span>\r\n <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}\r\n\r\n@if (sinAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n <span class=\"text-error fs-6\"></span>\r\n <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}", styles: [".text-error{color:#d60000!important;font-weight:700!important}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;animation:aura-pulse 1.5s ease-out infinite;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}\n"] }]
|
|
1523
1534
|
}], ctorParameters: () => [] });
|
|
1524
1535
|
|
|
1525
1536
|
class InputClaseComponent {
|
|
@@ -1920,14 +1931,13 @@ class SidebarComponent {
|
|
|
1920
1931
|
if (typeof window != 'undefined') {
|
|
1921
1932
|
fromEvent(window, 'resize')
|
|
1922
1933
|
.pipe(throttleTime(200))
|
|
1923
|
-
.subscribe(() =>
|
|
1924
|
-
|
|
1925
|
-
this.showMenu.set(!isMediumScreen);
|
|
1926
|
-
});
|
|
1927
|
-
const initialCheck = window.innerWidth <= 1160 && window.innerWidth >= 700;
|
|
1928
|
-
this.showMenu.set(!initialCheck);
|
|
1934
|
+
.subscribe(() => this.showMenu.set(window.innerWidth > 1400));
|
|
1935
|
+
this.showMenu.set(window.innerWidth > 1400);
|
|
1929
1936
|
}
|
|
1930
1937
|
}
|
|
1938
|
+
toggleMenu() {
|
|
1939
|
+
this.showMenu.set(!this.showMenu());
|
|
1940
|
+
}
|
|
1931
1941
|
onMiddleClick(event, ruta) {
|
|
1932
1942
|
if (event.button == 1 && ruta) {
|
|
1933
1943
|
event.preventDefault();
|
|
@@ -1941,11 +1951,11 @@ class SidebarComponent {
|
|
|
1941
1951
|
}
|
|
1942
1952
|
}
|
|
1943
1953
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1944
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, titleMenu: { classPropertyName: "titleMenu", publicName: "titleMenu", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"
|
|
1954
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, titleMenu: { classPropertyName: "titleMenu", publicName: "titleMenu", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"sidebar-wrapper mtp-12\">\r\n <div class=\"sidebar-panel\" [ngClass]=\"{'sidebar-expanded': showMenu(), 'sidebar-collapsed': !showMenu()}\"\r\n [style.--expanded-width]=\"expandedWidth()\">\r\n <div class=\"sidebar-header\" [style.justifyContent]=\"showMenu() ? 'flex-start' : 'center'\"\r\n [style.padding]=\"showMenu() ? '12px' : '10px 0'\" (click)=\"toggleMenu()\">\r\n <div class=\"sidebar-toggle-btn\">\r\n <i class=\"fa-solid fa-table-columns\" [class.flipped]=\"!showMenu()\"></i>\r\n <i class=\"fa-solid fa-chevron-left toggle-arrow\" [class.flipped]=\"!showMenu()\"></i>\r\n </div>\r\n @if (showMenu()) {\r\n <span class=\"sidebar-title\">{{ titleMenu() }}</span>\r\n }\r\n </div>\r\n\r\n <div class=\"sidebar-divider\"></div>\r\n\r\n <ul class=\"sidebar-nav\">\r\n @for (item of lista(); track $index) {\r\n <li class=\"sidebar-item\" [routerLink]=\"item.ruta\" [routerLinkActive]=\"'sidebar-item-active'\"\r\n (mousedown)=\"onMiddleClick($event, item.ruta)\" (contextmenu)=\"onRightClick($event, item.ruta)\">\r\n <span class=\"sidebar-item-icon\">\r\n <i class=\"fas fa-folder fs-8\"></i>\r\n </span>\r\n <span class=\"sidebar-item-label\">{{ item.nombre }}</span>\r\n @if (item.badge) {\r\n <div class=\"sidebar-item-badge\">\r\n <app-badge [label]=\"item.labelBadge\" [color]=\"item.bgBadge\" />\r\n </div>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n\r\n <div class=\"sidebar-content\">\r\n <div class=\"content-card\">\r\n <p class=\"content-title fs-7 fw-bold\">{{ title() }}</p>\r\n <router-outlet></router-outlet>\r\n </div>\r\n </div>\r\n</div>", styles: [".sidebar-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:8px}.sidebar-panel{flex-shrink:0;display:flex;flex-direction:column;background:var(--background-card);border-radius:12px;border:1px solid var(--border-color-modal);box-shadow:var(--shadow-card);transition:width .25s cubic-bezier(.4,0,.2,1),min-width .25s cubic-bezier(.4,0,.2,1);position:relative;z-index:10}.sidebar-expanded{width:var(--expanded-width, 280px);min-width:var(--expanded-width, 280px);overflow:hidden}.sidebar-expanded .sidebar-title{opacity:1;transform:translate(0)}.sidebar-collapsed{width:56px;min-width:56px;overflow:hidden}.sidebar-collapsed:has(.sidebar-item:hover){overflow:visible}.sidebar-collapsed .sidebar-toggle-btn{padding:5px 7px;gap:3px}.sidebar-collapsed .sidebar-nav{overflow:visible}.sidebar-collapsed .sidebar-item-label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translate(-4px);background:var(--text-color);color:var(--background-card);padding:5px 11px;border-radius:7px;font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease,transform .15s ease;z-index:1050;box-shadow:var(--shadow-card)}.sidebar-collapsed .sidebar-item-label:before{content:\"\";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--text-color)}.sidebar-collapsed .sidebar-item:hover .sidebar-item-label{opacity:1;transform:translateY(-50%) translate(0)}.sidebar-collapsed .sidebar-item-badge{display:none}.sidebar-header{display:flex;align-items:center;gap:10px;padding:12px;cursor:pointer;flex-shrink:0;border-radius:11px 11px 0 0;transition:background .18s ease}.sidebar-header:hover{background:var(--bs-table-hover-bg)}.sidebar-header:hover .sidebar-toggle-btn{transform:scale(1.06);box-shadow:0 4px 14px color-mix(in srgb,var(--sidebar-accent) 55%,transparent)}.sidebar-toggle-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 10px;border-radius:20px;background:var(--sidebar-accent);color:#fff;font-size:13px;box-shadow:0 2px 8px color-mix(in srgb,var(--sidebar-accent) 45%,transparent);transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.sidebar-toggle-btn i{transition:transform .25s cubic-bezier(.4,0,.2,1)}.sidebar-toggle-btn i.flipped{transform:scaleX(-1)}.sidebar-toggle-btn .toggle-arrow{font-size:9px;color:#fff}.sidebar-title{font-size:12px;font-weight:700;color:var(--text-color);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease,transform .2s ease}.sidebar-divider{height:1px;background:var(--border-color-modal);margin:0 10px;flex-shrink:0}.sidebar-nav{list-style:none;margin:0;padding:8px 6px;overflow-y:auto;scrollbar-width:none;flex:1}.sidebar-nav::-webkit-scrollbar{display:none}.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--text-color);transition:all .18s ease;margin-bottom:2px;position:relative;border-left:3px solid transparent;white-space:nowrap}.sidebar-item:hover{background:var(--bs-table-hover-bg);transform:translate(2px)}.sidebar-item-active{background:linear-gradient(90deg,color-mix(in srgb,var(--sidebar-accent) 12%,transparent),color-mix(in srgb,var(--sidebar-accent) 3%,transparent))!important;border-left:3px solid var(--sidebar-accent)!important;border-radius:0 8px 8px 0!important}.sidebar-item-active .sidebar-item-icon{color:var(--sidebar-accent);opacity:1}.sidebar-item-icon{font-size:12px;min-width:20px;text-align:center;flex-shrink:0;color:inherit;transition:color .18s ease}.sidebar-expanded .sidebar-item-label{font-size:13px;overflow:hidden;text-overflow:ellipsis;flex:1;color:inherit;animation:labelFadeIn .18s ease}.sidebar-content{flex:1;min-width:0}.content-card{background:var(--background-card);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-card);border:1px solid var(--border-color-modal)}.content-card .content-title{color:var(--text-color);margin-bottom:8px;padding-top:4px}@keyframes labelFadeIn{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}@media (max-width: 699px){.sidebar-wrapper{flex-direction:column}.sidebar-content{width:100%}.sidebar-expanded{width:100%!important;min-width:100%!important}.sidebar-collapsed{width:56px!important;min-width:56px!important;height:56px;overflow:hidden;flex-shrink:0}.sidebar-collapsed .sidebar-divider,.sidebar-collapsed .sidebar-nav{display:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: BadgeComponent, selector: "app-badge", inputs: ["label", "color", "size"] }] });
|
|
1945
1955
|
}
|
|
1946
1956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
1947
1957
|
type: Component,
|
|
1948
|
-
args: [{ selector: 'app-sidebar', imports: [NgClass, RouterLink, RouterOutlet, RouterLinkActive], template: "<div class=\"
|
|
1958
|
+
args: [{ selector: 'app-sidebar', imports: [NgClass, RouterLink, RouterOutlet, RouterLinkActive, BadgeComponent], template: "<div class=\"sidebar-wrapper mtp-12\">\r\n <div class=\"sidebar-panel\" [ngClass]=\"{'sidebar-expanded': showMenu(), 'sidebar-collapsed': !showMenu()}\"\r\n [style.--expanded-width]=\"expandedWidth()\">\r\n <div class=\"sidebar-header\" [style.justifyContent]=\"showMenu() ? 'flex-start' : 'center'\"\r\n [style.padding]=\"showMenu() ? '12px' : '10px 0'\" (click)=\"toggleMenu()\">\r\n <div class=\"sidebar-toggle-btn\">\r\n <i class=\"fa-solid fa-table-columns\" [class.flipped]=\"!showMenu()\"></i>\r\n <i class=\"fa-solid fa-chevron-left toggle-arrow\" [class.flipped]=\"!showMenu()\"></i>\r\n </div>\r\n @if (showMenu()) {\r\n <span class=\"sidebar-title\">{{ titleMenu() }}</span>\r\n }\r\n </div>\r\n\r\n <div class=\"sidebar-divider\"></div>\r\n\r\n <ul class=\"sidebar-nav\">\r\n @for (item of lista(); track $index) {\r\n <li class=\"sidebar-item\" [routerLink]=\"item.ruta\" [routerLinkActive]=\"'sidebar-item-active'\"\r\n (mousedown)=\"onMiddleClick($event, item.ruta)\" (contextmenu)=\"onRightClick($event, item.ruta)\">\r\n <span class=\"sidebar-item-icon\">\r\n <i class=\"fas fa-folder fs-8\"></i>\r\n </span>\r\n <span class=\"sidebar-item-label\">{{ item.nombre }}</span>\r\n @if (item.badge) {\r\n <div class=\"sidebar-item-badge\">\r\n <app-badge [label]=\"item.labelBadge\" [color]=\"item.bgBadge\" />\r\n </div>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n\r\n <div class=\"sidebar-content\">\r\n <div class=\"content-card\">\r\n <p class=\"content-title fs-7 fw-bold\">{{ title() }}</p>\r\n <router-outlet></router-outlet>\r\n </div>\r\n </div>\r\n</div>", styles: [".sidebar-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:8px}.sidebar-panel{flex-shrink:0;display:flex;flex-direction:column;background:var(--background-card);border-radius:12px;border:1px solid var(--border-color-modal);box-shadow:var(--shadow-card);transition:width .25s cubic-bezier(.4,0,.2,1),min-width .25s cubic-bezier(.4,0,.2,1);position:relative;z-index:10}.sidebar-expanded{width:var(--expanded-width, 280px);min-width:var(--expanded-width, 280px);overflow:hidden}.sidebar-expanded .sidebar-title{opacity:1;transform:translate(0)}.sidebar-collapsed{width:56px;min-width:56px;overflow:hidden}.sidebar-collapsed:has(.sidebar-item:hover){overflow:visible}.sidebar-collapsed .sidebar-toggle-btn{padding:5px 7px;gap:3px}.sidebar-collapsed .sidebar-nav{overflow:visible}.sidebar-collapsed .sidebar-item-label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translate(-4px);background:var(--text-color);color:var(--background-card);padding:5px 11px;border-radius:7px;font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease,transform .15s ease;z-index:1050;box-shadow:var(--shadow-card)}.sidebar-collapsed .sidebar-item-label:before{content:\"\";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--text-color)}.sidebar-collapsed .sidebar-item:hover .sidebar-item-label{opacity:1;transform:translateY(-50%) translate(0)}.sidebar-collapsed .sidebar-item-badge{display:none}.sidebar-header{display:flex;align-items:center;gap:10px;padding:12px;cursor:pointer;flex-shrink:0;border-radius:11px 11px 0 0;transition:background .18s ease}.sidebar-header:hover{background:var(--bs-table-hover-bg)}.sidebar-header:hover .sidebar-toggle-btn{transform:scale(1.06);box-shadow:0 4px 14px color-mix(in srgb,var(--sidebar-accent) 55%,transparent)}.sidebar-toggle-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 10px;border-radius:20px;background:var(--sidebar-accent);color:#fff;font-size:13px;box-shadow:0 2px 8px color-mix(in srgb,var(--sidebar-accent) 45%,transparent);transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.sidebar-toggle-btn i{transition:transform .25s cubic-bezier(.4,0,.2,1)}.sidebar-toggle-btn i.flipped{transform:scaleX(-1)}.sidebar-toggle-btn .toggle-arrow{font-size:9px;color:#fff}.sidebar-title{font-size:12px;font-weight:700;color:var(--text-color);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease,transform .2s ease}.sidebar-divider{height:1px;background:var(--border-color-modal);margin:0 10px;flex-shrink:0}.sidebar-nav{list-style:none;margin:0;padding:8px 6px;overflow-y:auto;scrollbar-width:none;flex:1}.sidebar-nav::-webkit-scrollbar{display:none}.sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--text-color);transition:all .18s ease;margin-bottom:2px;position:relative;border-left:3px solid transparent;white-space:nowrap}.sidebar-item:hover{background:var(--bs-table-hover-bg);transform:translate(2px)}.sidebar-item-active{background:linear-gradient(90deg,color-mix(in srgb,var(--sidebar-accent) 12%,transparent),color-mix(in srgb,var(--sidebar-accent) 3%,transparent))!important;border-left:3px solid var(--sidebar-accent)!important;border-radius:0 8px 8px 0!important}.sidebar-item-active .sidebar-item-icon{color:var(--sidebar-accent);opacity:1}.sidebar-item-icon{font-size:12px;min-width:20px;text-align:center;flex-shrink:0;color:inherit;transition:color .18s ease}.sidebar-expanded .sidebar-item-label{font-size:13px;overflow:hidden;text-overflow:ellipsis;flex:1;color:inherit;animation:labelFadeIn .18s ease}.sidebar-content{flex:1;min-width:0}.content-card{background:var(--background-card);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-card);border:1px solid var(--border-color-modal)}.content-card .content-title{color:var(--text-color);margin-bottom:8px;padding-top:4px}@keyframes labelFadeIn{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}@media (max-width: 699px){.sidebar-wrapper{flex-direction:column}.sidebar-content{width:100%}.sidebar-expanded{width:100%!important;min-width:100%!important}.sidebar-collapsed{width:56px!important;min-width:56px!important;height:56px;overflow:hidden;flex-shrink:0}.sidebar-collapsed .sidebar-divider,.sidebar-collapsed .sidebar-nav{display:none}}\n"] }]
|
|
1949
1959
|
}], ctorParameters: () => [] });
|
|
1950
1960
|
|
|
1951
1961
|
class DetalleCreditoComponent {
|
|
@@ -3580,6 +3590,7 @@ var TABLE_EVENTS;
|
|
|
3580
3590
|
TABLE_EVENTS[TABLE_EVENTS["RIGHT_CLICK"] = 3] = "RIGHT_CLICK";
|
|
3581
3591
|
TABLE_EVENTS[TABLE_EVENTS["CHECK_ALL"] = 4] = "CHECK_ALL";
|
|
3582
3592
|
TABLE_EVENTS[TABLE_EVENTS["CHECK_ROW"] = 5] = "CHECK_ROW";
|
|
3593
|
+
TABLE_EVENTS[TABLE_EVENTS["DRAG_DROP"] = 6] = "DRAG_DROP";
|
|
3583
3594
|
})(TABLE_EVENTS || (TABLE_EVENTS = {}));
|
|
3584
3595
|
|
|
3585
3596
|
/**
|
|
@@ -3620,11 +3631,14 @@ class TableUltimateComponent {
|
|
|
3620
3631
|
withCheckbox = input(false);
|
|
3621
3632
|
withTotal = input(false);
|
|
3622
3633
|
withHeight = input(false);
|
|
3634
|
+
withAttachment = input(false);
|
|
3623
3635
|
rendered = input([]);
|
|
3636
|
+
dragOverRowId = signal(null); // dropzone para adjuntos
|
|
3624
3637
|
titleTabla = input('Contrato');
|
|
3625
3638
|
activeMobileMode = input(true);
|
|
3626
3639
|
isLoadingResponsive = signal(false);
|
|
3627
3640
|
isMobile = signal(window.innerWidth <= 768);
|
|
3641
|
+
contentFilter = contentChild('header'); // inyect content in filter
|
|
3628
3642
|
// ── Output ──────────────────────────────────────────────────────────────────
|
|
3629
3643
|
rowEvent = output();
|
|
3630
3644
|
// ── ROW ACTIONS ──────────────────────────────────────────────────────────────────
|
|
@@ -3962,12 +3976,30 @@ class TableUltimateComponent {
|
|
|
3962
3976
|
this.isLoadingResponsive.set(true);
|
|
3963
3977
|
setTimeout(() => this.isLoadingResponsive.set(false), 200);
|
|
3964
3978
|
});
|
|
3979
|
+
// DRAG AND DROP ADJUNTOS
|
|
3980
|
+
onDragOver(event, idList) {
|
|
3981
|
+
event.preventDefault();
|
|
3982
|
+
event.stopPropagation();
|
|
3983
|
+
this.dragOverRowId.set(idList);
|
|
3984
|
+
}
|
|
3985
|
+
onDragLeave() {
|
|
3986
|
+
this.dragOverRowId.set(null);
|
|
3987
|
+
}
|
|
3988
|
+
onDrop(event, row) {
|
|
3989
|
+
event.preventDefault();
|
|
3990
|
+
event.stopPropagation();
|
|
3991
|
+
this.dragOverRowId.set(null);
|
|
3992
|
+
const file = event.dataTransfer?.files?.[0];
|
|
3993
|
+
if (file) {
|
|
3994
|
+
this.rowEvent.emit({ usecase: TABLE_EVENTS.DRAG_DROP, data: { file, row } });
|
|
3995
|
+
}
|
|
3996
|
+
}
|
|
3965
3997
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3966
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, footerRows: { classPropertyName: "footerRows", publicName: "footerRows", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, altoContenedor: { classPropertyName: "altoContenedor", publicName: "altoContenedor", isSignal: true, isRequired: false, transformFunction: null }, minAlto: { classPropertyName: "minAlto", publicName: "minAlto", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEvent: "rowEvent", selectedRow: "selectedRowChange", selectItems: "selectItemsChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n <label class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" id=\"filter_table_lazy_todos\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_table_lazy_todos\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n</div>\r\n}\r\n\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\" [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n <table class=\"ll-table\">\r\n\r\n <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <thead class=\"ll-thead\">\r\n <tr>\r\n @if (withDetails()) {\r\n <th class=\"cw-25\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40\">\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n <th [title]=\"col.caption\"\r\n [style.width.px]=\"col.width || null\"\r\n [style.min-width.px]=\"col.width || null\"\r\n [style.max-width.px]=\"col.width || null\"\r\n 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\">\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' : 'auto'\"\r\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\" [attr.title]=\"row[col.fieldname] || null\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n </td>\r\n }\r\n\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails() ? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n\r\n }\r\n\r\n <!-- Fila vac\u00EDa si no hay datos -->\r\n @if (rowFilter().length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n Sin datos\r\n </td>\r\n </tr>\r\n }\r\n\r\n <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n @if (paddingBottom() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n </tbody>\r\n\r\n <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n @if (withTotal() && rowFilter().length > 0) {\r\n <tfoot class=\"ll-tfoot\">\r\n\r\n <tr>\r\n <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n\r\n </table>\r\n </div>\r\n</ng-template>", styles: [".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-25{min-width:40px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
3998
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, footerRows: { classPropertyName: "footerRows", publicName: "footerRows", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, altoContenedor: { classPropertyName: "altoContenedor", publicName: "altoContenedor", isSignal: true, isRequired: false, transformFunction: null }, minAlto: { classPropertyName: "minAlto", publicName: "minAlto", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, withAttachment: { classPropertyName: "withAttachment", publicName: "withAttachment", isSignal: true, isRequired: false, transformFunction: null }, 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 }, { propertyName: "contentFilter", first: true, predicate: ["header"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n\r\n <div class=\"ll-search-bar__left\">\r\n <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\r\n </div>\r\n\r\n <div class=\"ll-search-bar__right\">\r\n\r\n <div class=\"ll-search-group\">\r\n\r\n <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\r\n <div class=\"ll-search-input-wrap\">\r\n\r\n <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" id=\"filter_table_lazy_todos\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\"\r\n for=\"filter_table_lazy_todos\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\r\n for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n</div>\r\n}\r\n\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\"\r\n [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n <table class=\"ll-table\">\r\n\r\n <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <thead class=\"ll-thead\">\r\n <tr>\r\n @if (withDetails()) {\r\n <th class=\"cw-25\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40\">\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n <th [title]=\"col.caption\" [style.width.px]=\"col.width || null\"\r\n [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\r\n class=\"ll-th-sortable\" (click)=\"toggleSort(col.fieldname)\">\r\n <span class=\"ll-th-content\">\r\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n @if (sortField() === col.fieldname) {\r\n <i class=\"ms-1\"\r\n [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n } @else {\r\n <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\r\n }\r\n </span>\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <tbody>\r\n <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\r\n @if (paddingTop() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n\r\n <!-- Filas visibles -->\r\n @for (row of visibleRows(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\"\r\n [class.ll-row--drag-over]=\"withAttachment() && dragOverRowId() === idList\"\r\n (click)=\"selectRow(row, idList)\" (dblclick)=\"onDoubleClick(row)\"\r\n (contextmenu)=\"onRightClick($event,row)\" [attr.draggable]=\"withAttachment() ? true : null\"\r\n (dragover)=\"withAttachment() && onDragOver($event, idList)\"\r\n (dragleave)=\"withAttachment() && onDragLeave()\" (drop)=\"withAttachment() && onDrop($event, row)\">\r\n\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\r\n [class.fa-chevron-down]=\"expandedRows() == idList\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center\">\r\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n @if (col.template) {\r\n <td>\r\n <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\r\n </ng-container>\r\n </td>\r\n } @else {\r\n @switch (col.tipo) {\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(col.fieldname, row);\r\n @if (resolverItem) {\r\n <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\r\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\r\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\r\n [attr.title]=\"row[col.fieldname] || null\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n </td>\r\n }\r\n\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails() ? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n\r\n }\r\n\r\n <!-- Fila vac\u00EDa si no hay datos -->\r\n @if (rowFilter().length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n Sin datos\r\n </td>\r\n </tr>\r\n }\r\n\r\n <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n @if (paddingBottom() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n </tbody>\r\n\r\n <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n @if (withTotal() && rowFilter().length > 0) {\r\n <tfoot class=\"ll-tfoot\">\r\n\r\n <tr>\r\n <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n\r\n </table>\r\n </div>\r\n</ng-template>", styles: [".ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.ll-search-bar__left{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}.ll-search-bar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.ll-search-bar__right .ll-search-group{display:flex;align-items:center;gap:4px}.ll-search-bar__right .ll-search-group .ll-search-label{white-space:nowrap}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{display:flex;align-items:center}@media (max-width: 576px){.ll-search-bar__right{width:100%;justify-content:space-between}.ll-search-bar__right .ll-search-group{flex-direction:column;align-items:flex-start;width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap input{flex:1}}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{height:30px;cursor:pointer}.ll-row:nth-child(odd){background-color:#00000010}.ll-row:hover{background-color:#00000015}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row--drag-over{background-color:#5b8dee1f!important;outline:2px dashed #5b8dee;outline-offset:-2px;cursor:copy}.ll-row--drag-over td{color:#5b8dee!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media (max-width: 1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-25{min-width:40px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
3967
3999
|
}
|
|
3968
4000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, decorators: [{
|
|
3969
4001
|
type: Component,
|
|
3970
|
-
args: [{ selector: 'app-table-ultimate', imports: [FormsModule, CommonModule, DropdownCdkComponent, AnimatedCheckboxDirective, CardMobileComponent], animations: [fadeInOut, dropdownAnimation], template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n <label class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" id=\"filter_table_lazy_todos\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_table_lazy_todos\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n</div>\r\n}\r\n\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\" [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n <table class=\"ll-table\">\r\n\r\n <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <thead class=\"ll-thead\">\r\n <tr>\r\n @if (withDetails()) {\r\n <th class=\"cw-25\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40\">\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n <th [title]=\"col.caption\"\r\n [style.width.px]=\"col.width || null\"\r\n [style.min-width.px]=\"col.width || null\"\r\n [style.max-width.px]=\"col.width || null\"\r\n 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\">\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' : 'auto'\"\r\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\" [attr.title]=\"row[col.fieldname] || null\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n </td>\r\n }\r\n\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails() ? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n\r\n }\r\n\r\n <!-- Fila vac\u00EDa si no hay datos -->\r\n @if (rowFilter().length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n Sin datos\r\n </td>\r\n </tr>\r\n }\r\n\r\n <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n @if (paddingBottom() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n </tbody>\r\n\r\n <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n @if (withTotal() && rowFilter().length > 0) {\r\n <tfoot class=\"ll-tfoot\">\r\n\r\n <tr>\r\n <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n\r\n </table>\r\n </div>\r\n</ng-template>", styles: [".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-25{min-width:40px}\n"] }]
|
|
4002
|
+
args: [{ selector: 'app-table-ultimate', imports: [FormsModule, CommonModule, DropdownCdkComponent, AnimatedCheckboxDirective, CardMobileComponent, NgTemplateOutlet], animations: [fadeInOut, dropdownAnimation], template: "@if (withFiltro()) {\r\n<div class=\"ll-search-bar\">\r\n\r\n <div class=\"ll-search-bar__left\">\r\n <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\r\n </div>\r\n\r\n <div class=\"ll-search-bar__right\">\r\n\r\n <div class=\"ll-search-group\">\r\n\r\n <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\r\n <div class=\"ll-search-input-wrap\">\r\n\r\n <input type=\"text\" class=\"form-control cw-250\" [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" id=\"filter_table_lazy_todos\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\"\r\n for=\"filter_table_lazy_todos\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\r\n for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n\r\n</div>\r\n}\r\n\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky -->\r\n <div #scrollContainer class=\"ll-scroll-container\" [style.height]=\"withHeight() ? heightStyle() : ''\"\r\n [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\r\n <table class=\"ll-table\">\r\n\r\n <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <thead class=\"ll-thead\">\r\n <tr>\r\n @if (withDetails()) {\r\n <th class=\"cw-25\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\" id=\"check_box_select_table_main\"\r\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40\">\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n <th [title]=\"col.caption\" [style.width.px]=\"col.width || null\"\r\n [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\r\n class=\"ll-th-sortable\" (click)=\"toggleSort(col.fieldname)\">\r\n <span class=\"ll-th-content\">\r\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n @if (sortField() === col.fieldname) {\r\n <i class=\"ms-1\"\r\n [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n } @else {\r\n <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\r\n }\r\n </span>\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <tbody>\r\n <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\r\n @if (paddingTop() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n\r\n <!-- Filas visibles -->\r\n @for (row of visibleRows(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\"\r\n [class.ll-row--drag-over]=\"withAttachment() && dragOverRowId() === idList\"\r\n (click)=\"selectRow(row, idList)\" (dblclick)=\"onDoubleClick(row)\"\r\n (contextmenu)=\"onRightClick($event,row)\" [attr.draggable]=\"withAttachment() ? true : null\"\r\n (dragover)=\"withAttachment() && onDragOver($event, idList)\"\r\n (dragleave)=\"withAttachment() && onDragLeave()\" (drop)=\"withAttachment() && onDrop($event, row)\">\r\n\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\r\n [class.fa-chevron-down]=\"expandedRows() == idList\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center\">\r\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n\r\n @for (col of columns(); track $index) {\r\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\r\n @if (col.template) {\r\n <td>\r\n <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\r\n </ng-container>\r\n </td>\r\n } @else {\r\n @switch (col.tipo) {\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(col.fieldname, row);\r\n @if (resolverItem) {\r\n <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\r\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\r\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\r\n [attr.title]=\"row[col.fieldname] || null\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\r\n </td>\r\n }\r\n\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails() ? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n\r\n }\r\n\r\n <!-- Fila vac\u00EDa si no hay datos -->\r\n @if (rowFilter().length === 0) {\r\n <tr>\r\n <td [attr.colspan]=\"columns().length\" class=\"ll-empty\">\r\n Sin datos\r\n </td>\r\n </tr>\r\n }\r\n\r\n <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\r\n @if (paddingBottom() > 0) {\r\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\r\n <td [attr.colspan]=\"columns().length\"></td>\r\n </tr>\r\n }\r\n </tbody>\r\n\r\n <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n @if (withTotal() && rowFilter().length > 0) {\r\n <tfoot class=\"ll-tfoot\">\r\n\r\n <tr>\r\n <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"ll-footer-cell fw-5 text-end fs-6\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n\r\n </table>\r\n </div>\r\n</ng-template>", styles: [".ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.ll-search-bar__left{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}.ll-search-bar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.ll-search-bar__right .ll-search-group{display:flex;align-items:center;gap:4px}.ll-search-bar__right .ll-search-group .ll-search-label{white-space:nowrap}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{display:flex;align-items:center}@media (max-width: 576px){.ll-search-bar__right{width:100%;justify-content:space-between}.ll-search-bar__right .ll-search-group{flex-direction:column;align-items:flex-start;width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap input{flex:1}}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{height:30px;cursor:pointer}.ll-row:nth-child(odd){background-color:#00000010}.ll-row:hover{background-color:#00000015}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row--drag-over{background-color:#5b8dee1f!important;outline:2px dashed #5b8dee;outline-offset:-2px;cursor:copy}.ll-row--drag-over td{color:#5b8dee!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media (max-width: 1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-25{min-width:40px}\n"] }]
|
|
3971
4003
|
}], propDecorators: { onResize: [{
|
|
3972
4004
|
type: HostListener,
|
|
3973
4005
|
args: ['window:resize', ['$event']]
|